/* Deck builder as a book, not a scroll.
 *
 * Hearthstone's Collection Manager never scrolls vertically: it is a spread of 4x2 cards
 * with the deck pinned to the right and arrows on the page edges. You turn pages. That
 * suits a phone in landscape far better than a tall grid, because the axis a landscape
 * phone is short of is exactly the one an infinite scroll consumes.
 *
 * Measured before this pass, at 402x874 portrait: 9,483px, 10.85 screens, and the first
 * card 1,215px down because style.css pins `.deckpanel { grid-row: 1 }` under 700px and
 * un-caps `#deck-list`.
 *
 * Landscape phone only; desktop web keeps the original workshop.
 */

@media (orientation: landscape) and (max-height: 540px) {

  /* ---------------------------------------------------------- one viewport, no scroll */

  body.app-shell:not(.immersive):has(> main > #build:not([hidden])) {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
  }

  .app-shell:not(.immersive) > main:has(> #build:not([hidden])) {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 8px 12px;
    /* style.css gives main `margin:auto`. In a column flex container auto block margins
       absorb the free space, so main sat at content height and centred itself instead of
       filling the viewport. Keep the horizontal centring, drop the vertical. */
    margin-block: 0;
  }

  body.app-shell:not(.immersive):has(> main > #build:not([hidden])) > footer {
    flex: 0 0 auto;
    padding: 3px 12px;
    font-size: 8px;
    line-height: 1.3;
  }

  .app-shell #build {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 8px;
  }

  /* The rail already carries "Play", and the banner is a 220px min-height picture of a
     compass. The art toggle moves out of the way of the cards; it is still reachable from
     the deck panel's own controls. Import is a dialog, so it needs no room here. */
  .app-shell #build > .intro,
  .app-shell #build > .art-preference { display: none; }

  /* Step navigation stays — it is how you move through the build — as one swipeable row. */
  .app-shell #build #deck-guide {
    flex: 0 0 auto;
    margin: 0;
    padding: 4px 6px;
    font-size: 11px;
    border-radius: 10px;
  }
  /* Descendants, not children: the step heading and its description sit inside a
     wrapper, so `>` missed them and they kept 90px of the spread. */
  .app-shell #build #deck-guide :is(h2, h3, p) { display: none; }
  .app-shell .builder-steps {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    margin: 0;
  }
  .app-shell .builder-steps button {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
    min-height: 32px;
    padding: 4px 10px;
    font-size: 11px;
  }
  .app-shell .builder-navigation { display: none; }

  /* ------------------------------------------------------------ spread + deck panel */

  .app-shell #build .workshop {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) 190px;
    /* An auto row grows to its tallest child, so the spread computed 503px inside a
       430px viewport and lost its second row. Same clamp the play tab needs. */
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
  }

  .app-shell #build .workshop > :is(.library, .deckpanel) {
    align-self: stretch;
    max-height: 100%;
  }

  .app-shell #build .library {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .app-shell #build .toolbar { flex: 0 0 auto; gap: 8px; }
  .app-shell #build .toolbar input,
  .app-shell #build .toolbar select { min-height: 34px; font-size: 12px; }
  .app-shell #build .toolbar select { max-width: 150px; }
  /* The card count and the domain filter are useful on a desktop; here they cost a
     whole row of card art. The filter stays reachable in the toolbar. */
  .app-shell #build .filterline { display: none; }

  /* The spread: two rows, columns flowing sideways, one page snapped at a time. */
  .app-shell #build .card-grid {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc(25% - 7.5px);
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    padding-bottom: 2px;
  }

  /* Snapping every fourth tile makes each swipe land on a clean spread of eight. */
  /* The tile is a button wrapping the card image at its natural 5:7, so without this it
     keeps its intrinsic 229px and overflows an 80px grid row. Let the art take whatever
     the row leaves after the name strip. */
  .app-shell #build .card-grid > .card {
    min-height: 0;
    /* Explicit, because the tile keeps an intrinsic 229px from its image and was
       overflowing the row and getting clipped — taking the name strip with it. */
    height: 100%;
    align-self: stretch;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .app-shell #build .card-grid .art-button {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
  }
  .app-shell #build .card-grid .card-body { flex: 0 0 auto; }
  .app-shell #build .card-grid > .card:nth-child(8n + 1),
  .app-shell #build .card-grid > .card:nth-child(8n + 2) { scroll-snap-align: start; }

  .app-shell #build .card-grid .card-body { padding: 5px 6px; }
  .app-shell #build .card-grid .card h3 { font-size: 11px; line-height: 1.15; }
  .app-shell #build .card-grid .card p { display: none; }
  .app-shell #build .card-grid .card-bottom { font-size: 9px; }
  .app-shell #build .card-grid .card-add { min-height: 30px; display: inline-flex; align-items: center; }
  .app-shell #build .card-grid .cost { width: 20px; height: 20px; line-height: 18px; font-size: 11px; }
  .app-shell #build .card-grid .art-button { min-height: 0; }
  .app-shell #build .card-grid img { height: 100%; width: 100%; object-fit: contain; }

  /* The pager wraps the grid so the arrows sit on the page edges, as in the
     Collection Manager, rather than floating over the cards. */
  .app-shell #build .pager {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 26px;
    /* Wrapping #cards made it a GRID item, so the `flex` on it stopped applying and the
       auto row sized to the cards' intrinsic 229px. Clamp the row here instead. */
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
    gap: 4px;
  }

  .app-shell #build .pager > .card-grid { height: 100%; min-height: 0; }
  .app-shell #build .pager__arrow {
    padding: 0;
    border: 1px solid #395162;
    border-radius: 8px;
    background: #11212e;
    color: #cfe0e6;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }
  .app-shell #build .pager__arrow:disabled { opacity: .25; cursor: default; }
  .app-shell #build .pager--idle .pager__arrow { visibility: hidden; }

  /* Paging IS "show more" here — card-pager.js clicks this when you reach the last
     spread, so the book just keeps turning. Kept in the DOM for that click. */
  .app-shell #build #more { display: none; }

  /* Deck panel pinned right, scrolling on its own — never pushing the spread. */
  .app-shell #build .deckpanel {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: 10px;
    grid-row: auto;
  }
  .app-shell #build .deckpanel > .eyebrow { font-size: 10px; }
  .app-shell #build .deck-name { font-size: 15px; padding: 4px 0; }
  .app-shell #build .deck-tools { margin: 8px 0; gap: 4px; }
  .app-shell #build .deck-tools button { min-height: 36px; font-size: 11px; padding: 6px; }
  .app-shell #build .deck-row { padding: 3px 0; font-size: 11px; }
  .app-shell #build .deck-section { margin: 8px 0 4px; font-size: 9px; }
  .app-shell #build .deck-actions { gap: 4px; margin-top: 10px; }
  .app-shell #build .deck-actions button,
  .app-shell #build .deck-actions .button { min-height: 36px; font-size: 11px; padding: 6px 8px; }
  .app-shell #build #deck-appearance summary { font-size: 11px; min-height: 36px; display: flex; align-items: center; }
  .app-shell #build #validation { font-size: 10px; }
}