/* ── Aurora Table — landscape shell layout ───────────────────────────────────
   Everything here is gated behind `body.aurora-gameplay-active` (set by
   aurora-table.js's MutationObserver on the home/setup/wait overlays) AND
   `@media (orientation: landscape)`, so:
   - lobby/setup/wait screens are completely untouched, in any orientation.
   - the existing portrait `.board-stage`/`.table-wrap` rules in style.css
     are never edited, only overridden under this narrower condition — the
     portrait path stays intact as the fallback until Aurora is validated.
   Visual skinning (colors, chip/dock component styling, motion) lives in
   aurora-components.css — this file is layout geometry only.
──────────────────────────────────────────────────────────────────────────── */

/* Reparented-but-not-deleted legacy chrome (.topbar/.coach-bar/#actionBar)
   collapses once Aurora is active — their content has already been moved
   into #auroraDnaBar / #auroraContextDock by aurora-table.js; the original
   shells stay in the DOM only so their ids keep resolving. */
@media (orientation: landscape) {
  body.aurora-gameplay-active .app > .topbar,
  body.aurora-gameplay-active .app > .coach-bar,
  body.aurora-gameplay-active .app > footer.action-bar {
    display: none;
  }

  /* ── Game DNA Bar — retired 2026-07-20 (see aurora-table.js init()'s
     comment for the full reasoning: pure duplicate of #auroraGameDock, plus
     branding chrome nobody needed). #auroraDnaBar is never unhidden by JS
     anymore (reparentDnaBar() deleted), but this explicit display:none
     stays as the belt-and-suspenders layout guarantee — without it the grid
     row this element sits in wouldn't reliably collapse to 0 height, since
     display:none (not the `hidden` attribute alone) is what removes an
     element from grid track sizing. .aurora-dna-left/-center/-right and
     their styling in aurora-components.css/beta-hygiene-v1.css/
     p0-vertical-layout-budget-v1.css are now unreachable dead selectors
     (reparentDnaBar() was the only code that ever created those elements)
     — left in place rather than chased across four files in one pass; safe
     to delete in a follow-up cleanup. */
  body.aurora-gameplay-active #auroraDnaBar {
    display: none;
  }

  /* ── Table Wrap: arc space | board | dock, as a 3-row grid so the Hero
     Dock's id/cards/context slots can share a row with #seat-hero without
     restructuring the DOM (#auroraHeroDock uses display:contents below so
     its children become direct grid items). display:grid MUST stay here —
     p0-vertical-layout-budget-v1.css's .table-wrap rule sets grid-row/
     grid-template-rows/grid-template-columns but never declares display:grid
     itself; it assumes this rule already made .table-wrap a grid container.
     (Confirmed the hard way: removing display:grid here during a token
     cleanup silently reverted .table-wrap to normal flow — p0's grid-row/
     grid-template-* became no-ops, collapsing the dock to ~8px and pushing
     hero's hole cards below the viewport. Full visual suite caught it.)
     grid-template-rows/columns/padding themselves ARE solely p0's now
     (loads last, !important) — only declare display:grid + non-track
     properties here. overflow:visible was kept here historically so
     negative-y seats (LAYOUTS, aurora-table.js) poking above #boardStage
     into the reserved arc row weren't clipped — p0 now sets
     overflow:hidden!important on this same selector, which always wins.
     CORRECTION (2026-07-25): the claim that used to sit here — "no seat is
     actually clipped today, verified via the full visual-regression suite"
     — was wrong. That suite (test/visual/geometry.js) never actually
     checks .opp-pill/oppAvatars for viewport containment (its
     outside-viewport check only runs against a fixed alwaysOn/whenShown
     element list oppPills isn't part of), so it could not have verified
     this either way. Direct .opp-pill rect measurement on Countdown found
     real clipping above the true viewport top edge (up to 25px, worse at
     7-8 players) whenever the arc row's reserved height was smaller than
     a seat's own avatar-offset overshoot — the "renders into the arc row,
     not outside .table-wrap's bounds" reasoning only holds while the
     overshoot stays inside that reserved height; it silently breaks once
     something (a board-height change, an --mix-arc-h/--mix-dock-h
     rebalance) shifts the two out of sync. Mitigated same day via a
     layoutSeats() floor clamp (aurora-table.js) plus rebalancing
     --mix-arc-h/--mix-dock-h — see that file's minYPercent comment. ── */
  body.aurora-gameplay-active .app .table-wrap {
    display: grid;
    align-items: center;
    width: 100%;
    max-width: none;
    height: 100%;
  }

  body.aurora-gameplay-active .app .board-stage {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    border-radius: 28px;
    padding: 3% 5%;
  }

  /* #oppStrip stays position:absolute (style.css:292, unconditional) and is
     overlaid on #boardStage's measured box by aurora-table.js's
     layoutSeats() — no grid placement needed, absolute items are excluded
     from grid flow. Negative-y seat coordinates render into row 1's empty
     reserved space above the felt. */

  #auroraPuck {
    position: absolute;
    /* 46, not 35: #oppStrip is a sibling in this same .table-wrap stacking
       context and got bumped to z-index 45 (beta-hygiene-v1.css, unrelated
       reason — clearing the felt background layers), which put the ENTIRE
       opponent rail's stacking context above this puck regardless of any
       individual pill's own z-index. Result: any time the dealer button
       was on an opponent seat (not hero), that opponent's own pill fully
       occluded the puck — confirmed via live DOM/screenshot evidence
       2026-07-29 (elementFromPoint at the puck's own coordinates returned
       the pill's .pill-top, not the puck). Hero-as-dealer looked fine only
       because that case never uses this puck at all (hero's own .d-badge
       renders directly, unaffected). One above 45 is the minimal fix.
       See also: 2026-07-28 hero-as-dealer-on-Countdown puck fix (a
       different, selector-matching bug in the same feature). */
    z-index: 46;
    transform: translate(-50%, -50%);
  }

  /* 2026-07-25: now a real flex child of .hero-id/.cd-hero-head (inserted
     by app.js's heroZoneShell() / countdown-ui.js's cdHeroSkeleton()), not
     a free-floating overlay — no position/z-index/centering-transform
     needed, the row lays it out like any other child. Size/scale rules
     live in aurora-components.css, per breakpoint. */

  body.aurora-gameplay-active #auroraHeroDock { display: contents; }
  body.aurora-gameplay-active .app .seat--hero {
    grid-row: 3;
    grid-column: 1;
    width: auto;
  }
  body.aurora-gameplay-active .aurora-context-dock {
    grid-row: 3;
    grid-column: 2;
    align-self: center;
    justify-self: stretch;
    min-width: 0;
  }
}

/* ── Portrait rotation gate ───────────────────────────────────────────────
   App-wide (landscape task, 2026-07-16): home/lobby/setup/wait screens now
   trigger this too, not just live gameplay — the goal is "install, tap the
   icon, land straight in landscape," which means the very first screen
   needs the same nudge, not just the table. Was gameplay-only until this
   change (body.aurora-gameplay-active gated); that scoping is preserved
   below ONLY for the table-hiding rule, which has nothing to hide outside
   gameplay anyway (the home/setup/wait overlays already cover the full
   screen on their own). visibility:hidden, not display:none/unmount, on
   the table specifically — game state, DOM, and in-flight timers
   underneath are completely untouched; they simply aren't painted while
   the gate is up, and reappear instantly with whatever state they already
   hold the moment the device rotates back to landscape. z-index sits above
   every other overlay in the app (aurora-modal.css's 9500 included) —
   nothing is legible in portrait, so the gate must win regardless of what
   else happens to be open. */
#auroraOrientationGate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  padding: 24px;
}
@media (orientation: portrait) {
  #auroraOrientationGate {
    display: flex;
  }
  body.aurora-gameplay-active .app .table-wrap,
  body.aurora-gameplay-active .app > header,
  body.aurora-gameplay-active .app > footer,
  body.aurora-gameplay-active .app > .coach-bar {
    visibility: hidden;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   AURORA ITERATION 2 — authoritative landscape geometry
   Same gate and selector strength as the rules above (equal specificity,
   later in this file), so shape and paint cascade as one coherent set
   instead of splitting across two different-specificity sources — see the
   Premium Table V4 review, which found exactly that split-brain problem
   with a bare `.board-stage` selector loaded from a separate file. This
   block does not affect portrait, lobby, or setup/wait screens.
   ══════════════════════════════════════════════════════════════════════════ */
@media (orientation: landscape) {
  /* .table-wrap's dock-row sizing (originally: "Dock row bumped from
     clamp(96,19dvh,142) — measured via Puppeteer: the narrow ~250px dock
     column forces raise-sizing's slider+presets and Fold/Check/Raise to
     wrap across two stacked rows, needing ~150-215px of actual content
     height depending on state") is now owned solely by
     p0-vertical-layout-budget-v1.css's --mix-dock-h/--mix-arc-h/--mix-context-w
     (loads last, !important) — this block used to redeclare
     grid-template-rows/columns/gap/padding a second time here, always dead.
     See p0's own comment for the current budget numbers/rationale. */

  /* Aurora Max rail — #boardStage is the outer/rail box (scaffold's
     .aurora-max-table); #premiumTableContent below is the felt box
     (.aurora-max-felt). Padding replaces the old flat `border: 8px solid`
     so the rail can carry a real top-to-bottom gradient (layered inner/
     outer edges) instead of one flat color — aurora-max-design-tokens.css's
     .aurora-max-table treatment, translated onto the real DOM/tokens. */
  body.aurora-gameplay-active .app .board-stage {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    padding: clamp(22px, 4.2dvh, 40px) clamp(34px, 5vw, 74px);
    overflow: visible;
    border: none;
    border-radius: clamp(26px, 3.6vw, 42px);
    /* Polish pass (Stage E, comparison vs reference/aurora-max-target.png):
       reference's rail reads as several distinct depth bands (outer edge ->
       highlight band -> shadow falloff -> inner gold rim), ours read flatter
       by comparison. Added a second gradient stop (a mid-tone highlight
       band around 22%, between the existing top-highlight and bottom-
       shadow stops) and a second, tighter inset shadow layer for a sharper
       inner bevel — paint only, no size/padding/radius change. */
    background:
      linear-gradient(180deg, var(--tt-rail-hi), var(--tt-rail-hi) 8%, var(--tt-rail) 22%, var(--tt-rail) 58%, var(--tt-rail-lo)),
      var(--tt-rail);
    box-shadow:
      inset 0 1px 0 var(--tt-rail-highlight),
      inset 0 3px 6px rgba(0,0,0,.4),
      inset 0 -10px 24px rgba(0,0,0,.7),
      0 0 0 1px var(--tt-gold-dim),
      var(--tt-shadow-table);
    isolation: isolate;
  }

  /* Premium Table Phase 1 — satin wood grain, painted not photographed.
     Fine diagonal streaks at very low contrast/opacity so it reads as
     "satin walnut" rather than cartoon grain (brief section 4: "no
     exaggerated wood grain"). Covers the full box but sits below the felt
     (z-index 2, opaque) — only the rail band it's actually visible in, no
     mask needed since the felt naturally occludes the rest. */
  body.aurora-gameplay-active .app .board-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    opacity: .5;
    background: repeating-linear-gradient(
      95deg,
      var(--tt-rail-grain) 0 1px,
      transparent 1px 6px,
      var(--tt-rail-grain) 6px 7px,
      transparent 7px 15px
    );
  }

  body.aurora-gameplay-active .app .board-stage::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(201,160,74,.32);
    border-radius: calc(clamp(26px, 3.6vw, 42px) - 9px);
    box-shadow: 0 0 10px rgba(201,160,74,.14);
    pointer-events: none;
    z-index: 0;
  }

  /* Felt — #premiumTableContent is the inner box sitting in #boardStage's
     padding, so it never overlaps the rail. Deep gradient + soft center
     highlight + fine repeating-radial "grain" (not a flat fill) per the
     brief's "felt must feel deep and tactile" requirement; the grain noise
     lives on this element's own ::after (below) rather than #boardStage's,
     now that #boardStage paints the rail instead of the felt. (The "AURORA"
     wordmark watermark that used to live on ::before here was removed
     2026-07-18 — Arun found it distracting; a better brand treatment is
     still to be designed.) */
  body.aurora-gameplay-active .app .premium-table-content {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.3dvh, 12px);
    border-radius: inherit;
    background:
      radial-gradient(circle at 50% 38%, var(--tt-felt-highlight), transparent 33%),
      radial-gradient(ellipse at 50% 28%, rgba(255,255,255,.075), transparent 33%),
      radial-gradient(ellipse at 50% 58%, rgba(57,202,139,.055), transparent 58%),
      linear-gradient(150deg, var(--tt-felt-hi), var(--tt-felt) 56%, var(--tt-felt-lo));
    box-shadow:
      inset 0 0 70px rgba(0,12,9,.74),
      inset 0 0 0 2px rgba(255,255,255,.05),
      0 0 0 1px var(--tt-gold-dim);
  }

  /* Premium Table Phase 1 — ambient lighting overlay (brief section 5):
     soft vignette + centre spotlight + edge darkening + faint warm
     reflection, simulating professional table-photography light. Sits
     above the felt/board/cards but below nothing else in #boardStage's
     own isolated stacking context (last child, no z-index needed to beat
     #dealerSeat's 130 — that element lives outside this box entirely).
     Opacity ~20% per spec; pointer-events:none so it never intercepts
     board clicks/taps. */
  body.aurora-gameplay-active .app #tableLightingOverlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: .2;
    background:
      radial-gradient(ellipse at 50% 32%, rgba(255,244,214,.5), transparent 46%),
      radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  }

  /* Dealer Seat (2026-07-17 correction — supersedes the bottom-right
     "permanent felt station" from earlier the same day; see index.html's
     comment on #dealerSeat for the full reasoning). A non-playing 8th seat,
     positioned by aurora-table.js's positionDealerSeat() using the same
     "measure and overlay" px technique as #auroraPuck/#timerWrap (it lives
     outside #oppStrip on purpose, so it's never pruned by
     renderOpponentRail()'s real-seats-only cleanup). Board-safety here is
     the SAME maxYPercent clamp real seats get (computed against
     #communityCards every frame), not a separate hand-tuned margin — this
     is exactly why the redesigned LAYOUTS rows in aurora-table.js only ever
     needed to relocate the one seat that used to sit at x=50, never the
     board-overlap logic itself. */
  #dealerSeat {
    position: absolute;
    z-index: 130;
    /* Fallback only (2026-07-26 rail-anchor fix): positionDealerSeat() now
       sets this inline every frame, anchored by the portrait's own center
       rather than the whole box's, so the portrait — not half the deck too
       — is what lands on the rail. This static -50% only ever applies
       before the first layoutSeats() call paints over it. */
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    pointer-events: none;
  }

  /* Aurora Table Geometry v2 (2026-07-23), directive 1.5: reduced slightly
     — was clamp(32px,3.2vw,40px), same as opponent avatars at the time.
     Not cut as far as the opponent-avatar reduction below (22-28px):
     aurora-components.css's own design note on .dealer-zone says the
     dealer "should not look like a ninth player avatar," which cuts both
     ways — matching it exactly to the now-much-smaller opponent avatars
     would undermine that as much as not shrinking it at all. */
  .dealer-portrait {
    width: clamp(28px, 2.8vw, 34px);
    height: clamp(28px, 2.8vw, 34px);
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 40%;
    border: 2px solid var(--tt-gold);
    box-shadow: 0 0 0 3px rgba(6,11,17,.95), 0 5px 13px rgba(0,0,0,.46);
  }

  /* The deck itself keeps its existing look (aurora-components.css skins
     .dealer-zone/.dealer-zone__deck) — only its position changes, from an
     independent absolute anchor at the board-stage corner to plain flow
     directly under the portrait within #dealerSeat's own flex column. */
  #dealerSeat .dealer-zone {
    position: static;
    display: grid;
    place-items: center;
  }

  /* Compact-height landscape phones: the portrait/gap/deck's combined
     height (clamp floors alone give ~62px) genuinely doesn't fit the real
     available gap at the worst measured combo — 740×360 with Triple
     Board's 3-row board leaves only ~60px between the DNA bar and the
     community-cards row, confirmed via Puppeteer, not assumed. Both
     clamps below are width-driven (vw), which never actually shrinks them
     at these viewport widths (740-932px) since 3.2vw/2.3vw stay under the
     px floor regardless — a height problem needs a height-keyed override,
     not a wider clamp. Board-safety (positionDealerSeat's dealerMaxYPercent)
     still wins even if this weren't enough on its own. */
  @media (max-height: 450px) {
    /* Proportionally reduced alongside the base rule above (2026-07-23) —
       shrinking only helps the tight-fit math this override exists for
       (see comment above), never hurts it. */
    .dealer-portrait {
      width: clamp(19px, 2.6vw, 28px);
      height: clamp(19px, 2.6vw, 28px);
    }
    #dealerSeat .dealer-zone__deck {
      width: clamp(16px, 2vw, 20px);
      height: clamp(20px, 2.6vw, 28px);
    }
  }

  /* Felt grain — fine repeating-radial texture, not a flat fill. Self-clips
     via inset (matching the existing rail hairline's pattern) rather than
     relying on overflow:hidden on the parent, which stays default/visible
     so it never risks clipping seat pills or the hero timer ring. */
  body.aurora-gameplay-active .app .premium-table-content::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: .55;
    background:
      repeating-radial-gradient(circle at 45% 50%, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
    z-index: 0;
  }

  /* Neutralizes the pre-Aurora desktop breakpoint (style.css,
     @media(min-width:601px)) that was silently active during Phase 1 —
     Aurora's landscape phone viewports (≥601px wide) matched a rule
     written for desktop browsers, switching on the SVG table-shell
     images with no object-fit against a box shaped nothing like the one
     they were drawn for. Scoped to Aurora gameplay only, unlike Premium
     V4's global version of this same fix. */
  body.aurora-gameplay-active .app .table-shell-layer {
    display: none !important;
  }

  body.aurora-gameplay-active .app .seat--hero {
    align-self: center;
    min-width: 0;
  }
}