/* Final workshop composition. Keep printed card faces at their native ratio. */
@media (min-height: 541px) {
  body.app-shell:has(#build:not([hidden])) {
    background-image: linear-gradient(#020c1538, #020c1538), url('/modern/assets/deck-workshop-v1/rift-backdrop.png');
  }
  .app-shell #build {
    background: #02111be8;
    border-inline: 1px solid #715932;
  }
  .app-shell #build > .intro {
    background-image: linear-gradient(90deg, #020d17f5 10%, #020d1770 38%, transparent 70%), url('/modern/assets/deck-workshop-v1/workshop-banner-v2.png');
    background-position: center, right 54%;
    background-size: 100% 100%, auto 320px;
    background-repeat: no-repeat;
    background-color: #020d17;
  }
  .app-shell #build .builder-steps { margin-bottom: 6px; }
  .app-shell #build .builder-heading { padding-block: 0; }
  .app-shell #build .builder-heading h2 { font-family: Georgia, serif; text-transform: none; }
  .app-shell #build .workshop { gap: 14px; padding-inline: 12px; }
  .app-shell #build .library { padding: 12px; }
  .app-shell #build .library .card-grid { gap: 16px; }
  .app-shell #build .library .card .card-image {
    aspect-ratio: auto;
    object-fit: contain;
  }
  .app-shell #build .library .card { padding: 3px; }
  .app-shell #build .library .card-body { min-height: 25px; }
  .app-shell #build .library .card-copy-counter { font-size: 11px; padding: 4px 8px; }
  .app-shell #build .library .card-bottom { min-height: 25px; align-items: end; }
  .app-shell #build .library .card-add,
  .app-shell #build .library .card-remove { min-height: 24px; font-size: 11px; }
  .app-shell #build .deckpanel { padding: 20px 22px; }
  .app-shell #build .deck-section { margin-top: 14px; }
  .app-shell #build .deck-row { padding-block: 7px; }
  .app-shell #build :is(button, input, select):focus-visible {
    outline: 2px solid #9bf7ff;
    outline-offset: 3px;
  }
}
@media (min-width: 1200px) and (min-height: 541px) {
  .app-shell #build .workshop { grid-template-columns: minmax(0, 1fr) 330px; }
}
@media (max-width: 700px) and (min-height: 541px) {
  .app-shell #build .workshop { padding-inline: 4px; }
  .app-shell #build .library { padding: 8px; }
  .app-shell #build .library .card-grid { gap: 12px; }
  .app-shell #build .library .card-add,
  .app-shell #build .library .card-remove { min-height: 32px; padding-inline: 7px; }
  .app-shell #build .library .card-body { min-height: 44px; }
  .app-shell #build .library .card-bottom { padding-top: 12px; }
}

/* Keep deck file actions beside Back at every builder step. */
.app-shell #build .deckpanel-scroll { display:contents; }
@media(min-height:541px){
 .app-shell #build .deckpanel { overflow:hidden; padding:0; }
 .app-shell #build .deckpanel::after { z-index:1; }
 /* The list scrolls inside the gold frame, not under it: the frame's 26px border and corner
    ornaments sit over the panel edge, so the scrolling box is inset past them and its top and
    bottom fade instead of being sliced off by the ornament. */
 .app-shell #build .deckpanel-scroll {
   display:block;
   max-height:calc(100dvh - 24px - 40px);
   margin:20px 8px;
   overflow:auto;
   overscroll-behavior:contain;
   padding:6px 14px;
   box-sizing:border-box;
   scrollbar-width:thin;
   scrollbar-color:#c6b48b #071522;
   -webkit-mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 10px),transparent);
   mask-image:linear-gradient(transparent,#000 10px,#000 calc(100% - 10px),transparent);
 }
 .app-shell #build .deckpanel #deck-list { max-height:none; overflow:visible; }
}
.app-shell #build .deck-row { gap:6px; }
.app-shell #build .deck-row > span { min-width:0; flex:1; }
.app-shell #build .deck-row [data-inspect] { text-align:left; cursor:zoom-in; }
.app-shell #build .deck-row [data-remove] {
 flex:none;
 width:28px;
 min-width:28px;
 min-height:28px;
 padding:0;
 font-size:16px !important;
 line-height:1;
 border:1px solid #657e8b;
 border-radius:5px;
 background:#142936;
 color:#f3d4c7;
 font-size:11px;
 cursor:pointer;
}
.app-shell #build .deck-row [data-remove]:hover { background:#55302e; border-color:#ecad94; }
.app-shell #build .builder-navigation { display:flex; gap:10px; flex-wrap:wrap; }
@media(max-width:760px){
 .app-shell #build .builder-navigation { gap:6px; }
 .app-shell #build .builder-navigation button { min-height:36px; padding:8px 12px; }
}
@media(orientation:landscape) and (max-height:540px){
 .app-shell #build .builder-navigation { gap:4px; }
 .app-shell #build .builder-navigation button { min-height:28px; padding:4px 8px; font-size:11px; }
}

/* Sidebar: sort that stays in reach, and each card's cost, rune pips and Might. */
.app-shell #build .deck-sort-bar{position:sticky;top:-6px;z-index:2;display:flex;align-items:center;gap:8px;margin:12px -4px 4px;padding:8px 4px;background:#02121e;border-bottom:1px solid #244356;font-size:12px;color:#8fb3c4;letter-spacing:.06em;text-transform:uppercase}
.app-shell #build .deck-sort-bar select{flex:1;min-width:0;padding:5px 8px;border:1px solid #3d5a6b;border-radius:6px;background:#07121b;color:#edf3f5;font-size:13px;letter-spacing:0;text-transform:none}
.app-shell #build .deck-row{align-items:center}
.app-shell #build .deck-stats{display:flex;align-items:center;gap:6px;flex:none}
.app-shell #build .deck-cost{display:inline-flex;align-items:center;gap:2px}
.app-shell #build .deck-cost b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#e9eef0;color:#0b1822;font-size:11.5px;font-weight:800;line-height:1;box-shadow:inset 0 0 0 1.5px #0b1822,0 0 0 1px #9fb3bd}
.app-shell #build .deck-pip{display:inline-block;width:11px;height:11px;border-radius:2px;transform:rotate(45deg) scale(.85);box-shadow:0 0 0 1px #02121e,0 0 0 2px #ffffff55}
.app-shell #build .deck-might{display:inline-flex;align-items:center;justify-content:flex-end;gap:1px;min-width:30px;color:#f5d991;font-size:12px;font-weight:700}
.app-shell #build .deck-might img{width:15px;height:15px}
.app-shell #build .deck-makeup{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0 2px;color:#a4b7c6;font-size:12px}
.app-shell #build .deck-makeup b{color:#edf3f5;font-variant-numeric:tabular-nums}
.app-shell #build .deck-type-heading{display:flex;justify-content:space-between;margin:10px 0 0;padding:2px 2px 4px;color:#e6c58b;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px dashed #2c4a5c}
.app-shell #build .deck-type-heading b{color:#a4b7c6;font-weight:600}