/* ==========================================================================
   MIX GAME — P0 VERTICAL LAYOUT BUDGET V1
   Authoritative landscape/PWA containment patch.
   Load LAST, after beta-hygiene-v1.css.

   Purpose:
   - The app, DNA bar and gameplay table share one measured viewport budget.
   - Hero hand and decision controls always remain inside the viewport.
   - The board flexes/compresses before actionable UI is allowed to disappear.
   - Presentation only: no game, betting, evaluator or multiplayer logic.
   ========================================================================== */

@media (orientation: landscape) {
  body.aurora-gameplay-active {
    --mix-viewport-h: 100dvh;
    --mix-dna-h: clamp(40px, 7.5dvh, 54px);
    /* 2026-07-23: shrunk from clamp(54px,11dvh,82px) — this row existed only
       to give negative-y seats (aurora-table.js LAYOUTS) room to poke above
       #boardStage's own top edge. Every seat is now flattened onto a single
       positive-y row that sits inside the stage box (see aurora-table.js's
       2026-07-23 comment), so nothing renders here any more.
       2026-07-26: tightened further, clamp(6px,1.2dvh,14px)->clamp(2px,0.3dvh,6px)
       — Pixel Budget Audit confirmed (real getBoundingClientRect measurement,
       HLH, all 3 breakpoint tiers) this row is genuinely unused at THIS
       breakpoint (>450px height) specifically: 0px opponent-pill poke above
       #boardStage's own top edge. The freed height flows into the board row
       (minmax(0,1fr)) as felt breathing room — no card-size change, board
       cards stay capped at 50px (owner ruling, 2026-07-22, board-stage.js's
       fitCardWidth maxW). Deliberately NOT touching the ≤450px/≤380px
       overrides below — those were independently increased the same day as
       the first comment above specifically to fix real Countdown/Triple-
       Board opponent-pill clipping at those tighter breakpoints (still only
       partially resolved per BUG-FIXING-BACKLOG.md); shrinking them here
       would reopen that fix, not free dead space. */
    --mix-arc-h: clamp(2px, 0.3dvh, 6px);
    /* +28px both ends (2026-07-25): funded by the Countdown/Triple-Board
       card-shrink caps in countdown-ui.js/multiboard-ui.js — those free
       ~28.6px of real board-row height per tier, which this budget spends
       on bigger hero cards via heightCeiling in app.js's heroCardWidth().
       HLH/Double-Board/HLHLH/F2 all measured 40-94px of real felt slack
       and absorb this increase unchanged; verified via the visual-test
       harness across all board variants and the full viewport matrix
       before shipping, not assumed safe by analogy. */
    --mix-dock-h: clamp(116px, 19dvh, 152px);
    --mix-context-w: clamp(250px, 31vw, 390px);
    --mix-stage-gap: 8px;
  }

  /* JS supplies the actual visualViewport height. This is especially
     important in iOS standalone/PWA mode and during orientation settling. */
  @supports (height: 1dvh) {
    body.aurora-gameplay-active {
      --mix-viewport-h: var(--mix-visual-viewport-h, 100dvh);
    }
  }

  html,
  body {
    max-height: var(--mix-viewport-h);
  }

  body.aurora-gameplay-active {
    height: var(--mix-viewport-h);
    min-height: 0;
    overflow: hidden;
  }

  /* Critical correction: .app previously had a 100dvh height while the DNA
     bar also consumed normal-flow height, and .table-wrap independently asked
     for height:100%. This made the combined children taller than the viewport.
     The app now owns the viewport and explicitly budgets DNA + gameplay. */
  body.aurora-gameplay-active .app {
    box-sizing: border-box;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-columns: minmax(0, 1fr);
    align-content: stretch;
    width: 100%;
    height: var(--mix-viewport-h) !important;
    min-height: 0 !important;
    max-height: var(--mix-viewport-h) !important;
    overflow: hidden !important;
  }

  body.aurora-gameplay-active #auroraDnaBar {
    grid-row: 1;
    min-height: 0;
    height: calc(var(--mix-dna-h) + env(safe-area-inset-top, 0px)) !important;
    flex: 0 0 auto;
    box-sizing: border-box;
  }

  /* The table receives only the remaining space. height:100% is deliberately
     removed because the grid track, not the child, is the source of truth. */
  body.aurora-gameplay-active .app .table-wrap {
    grid-row: 2;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: 100%;
    overflow: hidden !important;

    grid-template-rows:
      var(--mix-arc-h)
      minmax(0, 1fr)
      var(--mix-dock-h) !important;
    grid-template-columns:
      minmax(0, 1fr)
      var(--mix-context-w) !important;
    row-gap: var(--mix-stage-gap);
    column-gap: 12px;
    padding:
      0
      calc(10px + env(safe-area-inset-right, 0px))
      max(4px, env(safe-area-inset-bottom, 0px))
      calc(10px + env(safe-area-inset-left, 0px));
  }

  body.aurora-gameplay-active .app .board-stage {
    min-width: 0;
    min-height: 0 !important;
    max-height: 100%;
    overflow: visible;
    padding-block: clamp(5px, 1.4dvh, 12px);
  }

  /* Felt game-picker mode (2026-07-20, solo only — see app.js
     openRoundSetup()'s comment for the body.mg-felt-picker toggle). Arc and
     hero-dock rows collapse to 0 so the middle board row's minmax(0,1fr)
     absorbs the space instead — same "freed row flows to the board"
     mechanism the top-bar removal already relies on, just applied to two
     more rows. Opponents/hero cards/action bar have nothing to show yet
     anyway (no round exists during the picker); hiding them, rather than
     leaving empty space reserved, is what actually lets the felt grow. */
  body.mg-felt-picker.aurora-gameplay-active .app .table-wrap {
    grid-template-rows: 0 minmax(0, 1fr) 0 !important;
  }
  /* display:none, not opacity:0 (found via the geometry regression suite,
     2026-07-20): opacity:0 still occupies full layout space and is still a
     real, measurable rect — #auroraGameDock (always visible, see aurora-
     table.js) sitting on top of an invisible-but-still-there #oppStrip
     registered as a genuine geometric overlap to automated checks, even
     though nothing is visually wrong. display:none removes them from
     layout entirely, which is what "hidden" should mean here anyway since
     nothing animates them and pointer-events was already off. */
  body.mg-felt-picker #oppStrip,
  body.mg-felt-picker #auroraHeroDock {
    display: none;
  }

  /* Last-resort safety net (owner decision 2026-07-20, after a real iPhone 13
     playtest showed hero's own cards unreadable): shrinking card size for
     short viewports (app.js heroCardWidth(), this file's own --mix-dock-h
     budget) has a legibility floor — it can't shrink forever. Below that
     floor, the worst-case combination (max-ESG hand + shortest supported
     screen) can still exceed --mix-dock-h. Previously this box was
     `overflow: visible`, so any excess silently bled past the dock into
     territory .table-wrap clips with `overflow:hidden` (or off the physical
     screen) — the cards were simply gone with no way to reach them. Making
     this scrollable turns that same excess into something the player can
     reach with a swipe instead of never seeing at all. Under-budget hands
     (the overwhelming majority — this box already fits everything as of the
     2026-07-20 fix batch) are completely unaffected: content shorter than
     max-height never triggers a scrollbar. overflow-x stays hidden so nothing
     scrolls sideways (fanMetrics() already guarantees horizontal fit).
     Deliberately NOT hiding the scrollbar the way aurora-components.css's
     cosmetic coach-chips row does — those are optional secondary info, this
     is the single most decision-critical thing on screen, so it keeps
     whatever native scroll affordance the platform provides rather than
     hiding the one visual hint that more content exists.

     !important on the two overflow lines: aurora-motion-v2.css has
     `body.aurora-gameplay-active #seat-hero { overflow: visible; }` (an ID
     selector, for the opponent/hero action-pill badges) which outranks this
     rule's specificity regardless of this file loading last — confirmed via
     the browser's own resolved CSSOM, not assumed. Only #seat-hero needs the
     override; .opp-pill (the other half of that shared motion-v2 selector)
     is untouched, so opponent action-pill badges keep their overflow
     allowance exactly as before. */
  body.aurora-gameplay-active .app .seat--hero {
    min-width: 0;
    min-height: 0;
    max-height: var(--mix-dock-h);
    /* 2026-07-26: bottom-docked, not centered — mirrors the rail-anchor
       treatment opponent/dealer seats got the same day (aurora-table.js's
       railAnchorYPercent(), commit 1c4b0d3): a fixed, predictable anchor
       edge instead of a position that drifts with content size. The old
       align-self:center + translateY(-12px) pair (2026-07-23) chased the
       opposite goal — closing the gap ABOVE the row, between the felt and
       the hero cards, at the cost of an inconsistent, sometimes-larger gap
       below (between the row and the screen edge, since the transform was a
       fixed -12px regardless of how much slack the row actually had).
       Owner direction (2026-07-26): the card fan itself is what must stay
       visible and consistently placed — a variable gap opening up above,
       toward the felt, is fine (felt is not the precious resource; cards
       being visible is), so align-self:end lands the fan flush against the
       bottom of its track every time, whatever its content height, with
       zero dependence on card size/count. No transform needed: this is a
       real position, not a paint-only offset over a wrong one. */
    align-self: end;
    /* Real regression caught by the visual-test suite (2026-07-26), not
       theoretical: at max-anytime-ESG hero hands (11 cards) on the Large
       tier, the fan's rotated outer cards' bounding box overshoots the
       nominal card height by ~12px (rotation math: cardH×cos18°+cardW×sin18°
       ≈ 83px vs a 71px nominal card) — heroFanAvailHeight()'s own /1.18
       divisor already budgets for exactly this, leaving ~0 spare margin by
       design. align-self:center used to absorb that last ~1px by accident,
       via its own centering slack; flush bottom-docking removes that
       accident, so the rotated corner clipped ~0.7px past the viewport edge
       (test/visual/run.js, validation_state_a_hlh_8p_maxesg @ 1280x720).
       This margin restores a small deliberate buffer instead of relying on
       the old side effect — confirmed via re-run: 0 new failures vs. the
       pre-bottom-dock baseline (7 pre-existing, unrelated Countdown
       rail-clip failures, byte-for-byte identical before/after). */
    margin-bottom: 6px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  /* overflow-y stays auto (not hidden) — restores aurora-components.css's
     original, deliberate fix for this exact case (raise-sizing's slider +
     min/max row + confirm button don't always fit the dock's fixed height
     budget on short landscape phones, especially once Coach Mode's share of
     the dock is also in play). A later pass here previously set
     `overflow: hidden !important`, which silently re-clipped the confirm
     button off-screen with no way to reach it — found via Puppeteer measurement,
     2026-07-19: on 932x430 the confirm button rendered 24px below the
     viewport and 29px below its own container. overflow-x stays hidden so
     nothing scrolls sideways. */
  body.aurora-gameplay-active .aurora-context-dock {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0 !important;
    max-height: var(--mix-dock-h);
    align-self: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* 2026-07-26: dropped the matching -12px transform .seat--hero used to
       carry (see that rule's comment — same bottom-docked reasoning
       applies). This box already fills its track edge-to-edge
       (align-self:stretch), so its own bottom edge already sits at the
       track's true bottom without needing a nudge; removing the transform
       here just stops it from being shifted 12px past that, which is what
       kept it visually matched to the hero row's old (now-removed) upward
       shift. Buttons/slider still lay out normally inside this box via
       their own rules below. */
  }

  body.aurora-gameplay-active .aurora-context-dock .coach-left {
    flex: 0 0 auto;
  }

  body.aurora-gameplay-active .aurora-context-dock #actionBtns,
  body.aurora-gameplay-active .aurora-context-dock #raiseSizing {
    min-height: 0;
    max-height: 100%;
  }

  body.aurora-gameplay-active .aurora-context-dock #actionBtns {
    align-content: center;
  }

  /* No gameplay element may create document-level vertical scrolling.
     .seat--hero is the one deliberate exception with its own internal
     scroll (see above) — overscroll-behavior:none on it just stops that
     internal scroll from chaining into a page-level bounce once it hits
     its own top/bottom, not disabling the scroll itself. */
  body.aurora-gameplay-active .app,
  body.aurora-gameplay-active .app .table-wrap,
  body.aurora-gameplay-active #boardStage,
  body.aurora-gameplay-active #auroraHeroDock,
  body.aurora-gameplay-active .app .seat--hero {
    overscroll-behavior: none;
  }
}

/* Standard short landscape phones, including 844×390 / 852×393 / 932×430. */
@media (orientation: landscape) and (max-height: 450px) {
  body.aurora-gameplay-active {
    --mix-dna-h: 40px;
    /* 2026-07-25: redirected 24px/end from --mix-dock-h back to --mix-arc-h.
       The card-shrink-and-grow commit (see --mix-dock-h below) freed this
       budget from the Countdown/Triple-Board board-row shrink and spent
       100% of it on the dock; none went to the arc row directly above the
       board, where #oppStrip's seats actually render (aurora-table.js's
       layoutSeats() positions them as a % of #boardStage's own height).
       Real measurement (Puppeteer, .opp-pill rects) showed seats clipping
       above the viewport top edge at this tier by 1-22px depending on
       player count — this row was still sized for the pre-shrink board,
       never widened alongside the growth it indirectly enabled. */
    --mix-arc-h: clamp(28px, 2.4dvh, 36px);
    /* 2026-07-26: +15px for the 1-2-row variants (default/HLH, f2-mode,
       plain mb-mode = DBBP/HLHLH), funded by the pot's relocation off the
       board (commit 25de966 frees real board-row slack). TBBP (mb3-mode)
       and Countdown (cd-mode) explicitly opt back OUT of this below —
       real per-variant testing (not assumption) found even this modest a
       boost still pushes their taller multi-row community-card blocks into
       aurora-table.js's just-shipped rail-anchor fix (1c4b0d3), which clips
       opponent avatars above the viewport when the board grows toward them
       (board-safety wins over on-screen seats by that fix's own explicit
       design). A first, larger attempt (+35px, reaching hero's full 50px
       ceiling) broke this for every multi-row variant and a second fix
       (matching +30px on --mix-arc-h) traded it for a new collision with
       the just-relocated #auroraPotRail instead — both caught by the full
       fixture x viewport suite. +15px stays clean for HLH/F2/DBBP/HLHLH
       (verified, 0 regressions across all 198 combos) without touching
       arc-h at all. TBBP/Countdown keep their pre-boost size for now
       rather than risk further whack-a-mole on a system two other
       concurrent-session changes are already sharing today. */
    --mix-dock-h: clamp(101px, calc(22dvh + 15px), 115px);
  }
  body.aurora-gameplay-active .app.mb3-mode,
  body.aurora-gameplay-active .app.cd-mode {
    --mix-dock-h: clamp(101px, calc(22dvh + 15px), 115px);
  }
  body.aurora-gameplay-active .app.mb3-mode {
    --mix-arc-h: clamp(48px, calc(2.4dvh + 20px), 56px);
  }
  body.aurora-gameplay-active .app.cd-mode {
    --mix-arc-h: clamp(56px, calc(2.4dvh + 28px), 64px);
  }
  body.aurora-gameplay-active .app.cd-mode {
    --mix-context-w: clamp(238px, 30vw, 330px);
    --mix-stage-gap: 3px;
  }

  body.aurora-gameplay-active #auroraDnaBar {
    padding-inline:
      calc(9px + env(safe-area-inset-left, 0px))
      calc(9px + env(safe-area-inset-right, 0px));
  }

  body.aurora-gameplay-active .app .table-wrap {
    column-gap: 8px;
    padding-inline:
      calc(7px + env(safe-area-inset-left, 0px))
      calc(7px + env(safe-area-inset-right, 0px));
  }

  body.aurora-gameplay-active .aurora-context-dock {
    border-radius: 14px;
  }

  body.aurora-gameplay-active .aurora-context-dock .coach-left {
    padding: 4px 8px 3px;
  }

  body.aurora-gameplay-active .aurora-context-dock #actionBtns {
    min-height: 0;
    gap: 5px;
    padding: 5px 7px 6px;
  }

  body.aurora-gameplay-active .aurora-context-dock .btn-act {
    min-height: 38px;
    padding-block: 5px;
  }

  body.aurora-gameplay-active .aurora-context-dock #raiseSizing {
    gap: 3px;
    padding: 4px 7px 5px;
  }
}

/* Extreme supported case: 740×360 and similarly short PWA viewports.
   We preserve the hand and controls, and spend the compression on chrome,
   spacing and board scale—not on hiding actionable UI. */
@media (orientation: landscape) and (max-height: 380px) {
  body.aurora-gameplay-active {
    --mix-dna-h: 36px;
    /* 2026-07-25: redirected 26px from --mix-dock-h back to --mix-arc-h —
       see the matching comment on the max-height:450px rule above. This is
       the worst tier (740x360-class viewports): seats were clipping up to
       25px above the viewport top at 7-8 players before this. */
    --mix-arc-h: 32px;
    --mix-dock-h: 82px; /* +2px net (was +28px, 26px redirected to --mix-arc-h above) */
    --mix-context-w: clamp(220px, 31vw, 280px);
    --mix-stage-gap: 0px;
  }
  /* Explicit re-assertion, not redundant: media queries aren't exclusive
     ranges — a 360px-tall viewport (sm-740x360, galaxy-s24-780x360) matches
     BOTH this block and the (max-height:450px) block above. Without this,
     the ≤450 block's `.app.cd-mode`/`.app.mb3-mode` overrides (higher-
     specificity selectors than this block's plain `body.aurora-gameplay-
     active`) would win at that height regardless of source order, leaking
     the Standard-tier boost into the shortest supported screens — confirmed
     via the visual-test suite both times (first Countdown's dock-h alone,
     then again once mb3-mode/cd-mode also got an --mix-arc-h override).
     Matching specificity here beats both back down to this block's own,
     deliberately conservative values. */
  body.aurora-gameplay-active .app.cd-mode,
  body.aurora-gameplay-active .app.mb3-mode {
    --mix-dock-h: 82px;
    --mix-arc-h: 32px;
  }

  body.aurora-gameplay-active .aurora-dna-center {
    font-size: .57rem;
  }

  body.aurora-gameplay-active .aurora-dna-left .brand {
    font-size: .66rem;
  }

  body.aurora-gameplay-active .app .table-wrap {
    column-gap: 6px;
    padding-bottom: max(2px, env(safe-area-inset-bottom, 0px));
  }

  body.aurora-gameplay-active .app .board-stage {
    border-radius: 22px;
    padding-block: 3px;
  }

  body.aurora-gameplay-active .aurora-context-dock .coach-left {
    display: none !important;
  }

  body.aurora-gameplay-active .aurora-context-dock {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  body.aurora-gameplay-active .aurora-context-dock #actionBtns {
    height: 100%;
    padding: 4px 6px;
  }

  body.aurora-gameplay-active .aurora-context-dock .btn-act {
    /* 38px is the floor (owner geometry spec, 2026-07-16), not a target to
       shrink below — this was 36px, 2px under spec on the shortest
       supported viewport. */
    min-height: 38px;
    border-radius: 10px;
    font-size: .65rem;
  }
}

/* Width pressure: protect the context dock without allowing it to force the
   hero hand off-screen. */
@media (orientation: landscape) and (max-width: 780px) {
  body.aurora-gameplay-active {
    --mix-context-w: clamp(210px, 30vw, 245px);
  }

  body.aurora-gameplay-active .aurora-context-dock .coach-name {
    display: none;
  }
}

/* JS adds this only when a post-layout measurement still detects overflow.
   It is a safety state, not the primary layout strategy. */
@media (orientation: landscape) {
  body.aurora-gameplay-active.mix-p0-emergency-compact {
    --mix-dna-h: 34px;
    --mix-arc-h: 6px;
    --mix-dock-h: 76px;
    --mix-stage-gap: 0px;
  }

  body.aurora-gameplay-active.mix-p0-emergency-compact
  .aurora-context-dock .coach-left {
    display: none !important;
  }
}