/* ==========================================================================
   MIX GAME — BETA HYGIENE V1
   Load AFTER aurora-table.css and aurora-components.css.

   Scope:
   - landscape setup wizard
   - Aurora DNA-bar clearance
   - Hero Turn decision console
   - F2 shared-river spacing
   - landscape showdown containment

   Presentation only. No engine, betting, evaluator, multiplayer or settlement
   behaviour is changed.
   ========================================================================== */

:root {
  --bh-gold: var(--tt-gold, #c9a04a);
  --bh-gold-hi: #e2c36e;
  --bh-panel: rgba(8, 15, 24, .96);
  --bh-panel-2: rgba(13, 21, 31, .96);
  --bh-line: rgba(201, 160, 74, .24);
  --bh-text: var(--text, #eef4ff);
  --bh-muted: var(--muted, #91a0ad);
}

/* ==========================================================================
   1. LANDSCAPE ROUND SETUP
   The wizard is a single contained landscape panel. Header/progress/footer
   remain in normal flow; only the choices area scrolls.
   ========================================================================== */

@media (orientation: landscape) and (max-height: 620px) {
  .setup-overlay {
    padding:
      max(8px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    align-items: center;
    /* NOT overflow:hidden (removed 2026-08-05, owner bug report — Start
       button/ESG unreachable at every real device size on the new Control
       Centre). This block predates that screen and assumed the ONLY
       content here was the old .wiz wizard below, which owned its own
       internal scroll and never needed the outer overlay to move. The new
       .lgs-based Control Centre (landscape-game-setup.css) makes the same
       assumption for its own internal columns, but disabling the outer
       overlay's scroll here left zero fallback the moment anything (even a
       parser bug elsewhere) made .lgs taller than intended — style.css's
       base .setup-overlay rule already sets overflow-y:auto; this block
       must not fight that for any content loaded after the old wizard. */
  }

  .setup-overlay .wiz {
    width: min(1180px, 100%);
    height: min(94dvh, 580px);
    max-height: 94dvh;
    padding: 12px 18px 10px;
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    background:
      radial-gradient(ellipse at 50% -20%, rgba(27, 58, 83, .24), transparent 46%),
      linear-gradient(180deg, rgba(10, 18, 30, .98), rgba(5, 10, 18, .98));
  }

  /* Choose Game step's own .rw shell (2026-07-23) — same dvh-based height
     the .wiz rule above already uses, so it doesn't rely on 100vh ignoring
     mobile browser chrome the way plain vh can. */
  .setup-overlay .rw {
    width: min(1180px, 100%);
    height: min(94dvh, 580px);
    max-height: 94dvh;
  }

  .setup-overlay .wiz-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) minmax(280px, 1.3fr) minmax(170px, 1fr);
    grid-template-areas:
      "brand progress blank"
      "title title title"
      "sub sub sub";
    align-items: center;
    gap: 3px 18px;
    min-height: 92px;
    padding: 0 48px 4px;
    background: transparent;
    z-index: 2;
  }

  .setup-overlay .wiz-head h2 {
    grid-area: brand;
    justify-self: start;
    font-size: clamp(.72rem, 1.4vw, .92rem);
    letter-spacing: .22em;
    white-space: nowrap;
  }

  .setup-overlay .wiz-prog {
    grid-area: progress;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }

  .setup-overlay .wp-dot {
    width: 28px;
    height: 28px;
  }

  .setup-overlay .wiz-title {
    grid-area: title;
    margin-top: 2px;
    font-size: clamp(1.05rem, 2.3vw, 1.38rem);
  }

  .setup-overlay .wiz-sub {
    grid-area: sub;
    margin-top: 0;
    font-size: .72rem;
  }

  .setup-overlay .wiz-x {
    top: 2px;
    right: 2px;
    width: 38px;
    height: 38px;
    z-index: 3;
  }

  .setup-overlay .wiz-body {
    min-height: 0;
    margin: 5px 0;
    padding: 4px 4px 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  .setup-overlay .wiz-games {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    gap: 10px;
  }

  .setup-overlay .wiz-esgmodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 900px;
    margin: 0 auto;
  }

  .setup-overlay .wg-card {
    min-height: 118px;
    padding: 10px 8px 8px;
    gap: 4px;
    border-radius: 14px;
    justify-content: flex-start;
  }

  .setup-overlay .gi {
    min-height: 42px;
    transform: scale(.9);
    transform-origin: center;
  }

  .setup-overlay .wg-name {
    font-size: clamp(.72rem, 1.4vw, .9rem);
    line-height: 1.12;
  }

  .setup-overlay .wg-sub {
    font-size: .62rem;
  }

  .setup-overlay .wg-blurb {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .57rem;
    line-height: 1.22;
  }

  .setup-overlay .wg-pts,
  .setup-overlay .wg-soon {
    font-size: .6rem;
  }

  .setup-overlay .wiz-foot {
    min-height: 52px;
    margin-top: 2px;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,.055);
    background: transparent;
  }

  .setup-overlay .wiz-btn {
    min-height: 42px;
    padding-inline: 24px;
  }

  .setup-overlay .wiz-stepno {
    margin-top: 2px;
    font-size: .62rem;
  }

  .setup-overlay .wiz-esgcfg {
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    max-width: 880px;
    margin: 0 auto;
  }

  .setup-overlay .wiz-points {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .setup-overlay .pt-card {
    min-height: 88px;
    padding: 9px 7px;
  }

  .setup-overlay .wiz-note {
    margin-top: 6px;
    font-size: .63rem;
  }
}

/* Narrow landscape phones: three columns keep names readable. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 900px) {
  .setup-overlay .wiz {
    height: 96dvh;
    max-height: 96dvh;
    padding-inline: 12px;
  }

  .setup-overlay .wiz-head {
    min-height: 76px;
    grid-template-columns: 140px 1fr 140px;
    padding-inline: 42px;
  }

  .setup-overlay .wiz-games {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .setup-overlay .wg-card {
    min-height: 106px;
  }

  .setup-overlay .wg-blurb {
    display: none;
  }
}

/* ==========================================================================
   2. DNA BAR AND OPPONENT CLEARANCE
   Avatars must frame the table, never cover the scoreboard/info ribbon.
   ========================================================================== */

@media (orientation: landscape) {
  body.aurora-gameplay-active #auroraDnaBar {
    position: relative;
    z-index: 90;
    min-height: clamp(44px, 8.5dvh, 58px);
    background:
      linear-gradient(180deg, rgba(7, 13, 22, .98), rgba(4, 9, 16, .94));
    border-bottom: 1px solid rgba(201,160,74,.38);
    box-shadow: 0 8px 18px rgba(0,0,0,.26);
  }

  body.aurora-gameplay-active .aurora-dna-left,
  body.aurora-gameplay-active .aurora-dna-right {
    position: relative;
    z-index: 2;
  }

  body.aurora-gameplay-active .aurora-dna-center {
    padding-inline: 10px;
    color: rgba(232, 209, 143, .9);
  }

  /* More protected air between the DNA ribbon and the felt. The seat map
     remains Aurora-owned; this changes the stage's vertical slot rather than
     writing competing seat coordinates. */
  body.aurora-gameplay-active .app .table-wrap {
    grid-template-rows:
      clamp(76px, 13dvh, 96px)
      minmax(0, 1fr)
      clamp(104px, 20dvh, 146px);
  }

  body.aurora-gameplay-active #oppStrip {
    z-index: 45;
  }
}

/* ==========================================================================
   3. HERO TURN CONSOLE
   Mirrors Aurora Screen 002: one connected dark decision panel, coach above,
   three primary actions below. Raise sizing remains the existing functional
   control but is visually contained.
   ========================================================================== */

@media (orientation: landscape) {
  body.aurora-gameplay-active .aurora-context-dock {
    align-self: stretch;
    justify-self: stretch;
    display: grid;
    /* Was `auto minmax(48px,1fr)` — two explicit rows meant for [coach row,
       actionBtns/raiseSizing row], but neither #actionBtns nor #raiseSizing
       is ever assigned an explicit grid-row, so with Coach Mode off by
       default (env.js flags.coachModeEnabled) they auto-flow into row 1
       while row 2 sits reserved-but-empty below them — confirmed via
       getBoundingClientRect() as the dead space under Fold/Call/Raise.
       Single auto row + align-content:center actually centers the visible
       content instead. */
    grid-template-rows: auto;
    align-content: center;
    gap: 0;
    min-height: clamp(84px, 17dvh, 126px);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(201,160,74,.24);
    border-radius: 18px;
    background:
      linear-gradient(180deg, rgba(16,23,32,.98), rgba(6,10,16,.98));
    box-shadow:
      0 10px 24px rgba(0,0,0,.52),
      inset 0 1px 0 rgba(255,255,255,.04);
  }

  body.aurora-gameplay-active .aurora-context-dock .coach-left {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px 11px 7px;
    border-bottom: 1px solid rgba(255,255,255,.055);
    background: rgba(8,13,21,.72);
  }

  body.aurora-gameplay-active .aurora-context-dock .coach-name {
    align-self: start;
    margin-top: 1px;
    white-space: nowrap;
    font-size: .62rem;
    color: #d8c9e8;
  }

  body.aurora-gameplay-active .aurora-context-dock .coach-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(.58rem, .85vw, .7rem);
    line-height: 1.25;
    color: #a8b4bf;
  }

  body.aurora-gameplay-active .aurora-context-dock #coachChips {
    display: none;
  }

  body.aurora-gameplay-active .aurora-context-dock #actionBtns {
    width: 100%;
    min-height: 50px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px 10px;
  }

  body.aurora-gameplay-active .aurora-context-dock #actionBtns.hidden {
    display: none;
  }

  body.aurora-gameplay-active .aurora-context-dock .btn-act {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    border-radius: 12px;
    font-size: clamp(.68rem, 1vw, .82rem);
    font-weight: 850;
    letter-spacing: .03em;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      0 5px 12px rgba(0,0,0,.28);
  }

  /* At any moment the existing controller shows either Check or Call.
     Both keep their allocated middle decision slot. */
  body.aurora-gameplay-active .aurora-context-dock #checkBtn,
  body.aurora-gameplay-active .aurora-context-dock #callBtn {
    grid-column: 2;
  }

  body.aurora-gameplay-active .aurora-context-dock #raiseBtn {
    grid-column: 3;
    background: linear-gradient(180deg, #32925a, #1c683b);
    color: white;
  }

  body.aurora-gameplay-active .aurora-context-dock #raiseSizing {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 6px;
    padding: 8px 10px 9px;
  }

  body.aurora-gameplay-active .aurora-context-dock #raiseSizing.hidden {
    display: none;
  }

  body.aurora-gameplay-active .aurora-context-dock .raise-slider-row {
    display: grid;
    grid-template-columns: 32px minmax(80px, 1fr) 32px auto;
    align-items: center;
    gap: 7px;
  }

  body.aurora-gameplay-active .aurora-context-dock .stepper {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(201,160,74,.10);
    border: 1px solid rgba(201,160,74,.28);
    color: #ead99e;
  }

  body.aurora-gameplay-active .aurora-context-dock .raise-amt {
    min-width: 48px;
    padding: 4px 8px;
    border-radius: 999px;
    text-align: center;
    color: #201700;
    background: linear-gradient(180deg, #ead28d, #b9913b);
    font-size: .68rem;
    font-weight: 850;
  }

  body.aurora-gameplay-active .aurora-context-dock .raise-minmax-row {
    font-size: .6rem;
    color: #d6c89f;
  }

  body.aurora-gameplay-active .aurora-context-dock .raise-confirm-row {
    width: 100%;
  }

  body.aurora-gameplay-active .aurora-context-dock .raise-confirm {
    min-height: 40px;
    border-radius: 12px;
    font-size: clamp(.68rem, 1vw, .8rem);
    font-weight: 850;
  }

  body.aurora-gameplay-active .aurora-context-dock .raise-back {
    flex-basis: 36px;
    min-height: 40px;
    border-radius: 12px;
    font-size: .78rem;
    background: rgba(201,160,74,.10);
    border: 1px solid rgba(201,160,74,.28);
    color: #ead99e;
  }

  body.aurora-gameplay-active .aurora-context-dock[data-state="waiting"],
  body.aurora-gameplay-active .aurora-context-dock[data-state="opponent-turn"] {
    border-color: rgba(255,255,255,.07);
    background: rgba(5,9,15,.64);
    box-shadow: none;
  }
}

/* ==========================================================================
   4. F2 CANONICAL COMPOSITION
   Pull shared rivers close to the two four-card boards. The former 1fr middle
   column stretched R1/R2 to opposite ends of the felt.
   ========================================================================== */

@media (orientation: landscape) {
  body.aurora-gameplay-active .community-cards.f2-board-v2 {
    grid-template-columns: auto auto auto;
    width: max-content;
    max-width: 100%;
    column-gap: clamp(8px, 1vw, 14px);
    row-gap: clamp(7px, 1.4dvh, 12px);
    justify-content: center;
    justify-items: center;
    margin-inline: auto;
  }

  body.aurora-gameplay-active .f2-board-v2 .f2-live-row {
    width: max-content;
  }

  body.aurora-gameplay-active .f2-board-v2 .f2-shared-river .board-card {
    box-shadow:
      0 0 0 1px rgba(201,160,74,.24),
      0 8px 18px rgba(0,0,0,.42),
      inset 0 1px 0 rgba(255,255,255,.9);
  }
}

/* ==========================================================================
   5. LANDSCAPE SHOWDOWN
   The overlay owns the viewport. Underlying Aurora seats/cards cannot paint
   above it, and recap/deep-dive content scrolls inside the overlay.
   ========================================================================== */

.sd-overlay,
.cd-sd-overlay {
  z-index: 1000 !important;
}

body.beta-showdown-open {
  overflow: hidden;
}

body.beta-showdown-open #auroraHeroDock,
body.beta-showdown-open #oppStrip,
body.beta-showdown-open #auroraPuck,
body.beta-showdown-open #timerWrap,
body.beta-showdown-open #auroraDnaBar {
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (orientation: landscape) {
  .sd-overlay,
  .cd-sd-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding:
      max(6px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }

  .sd-overlay > .sd-box,
  .cd-sd-overlay > .cd-sd-box,
  .sd-box,
  .cd-sd-box {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 18px;
    overflow: hidden;
  }

  .cd-sd-box {
    display: flex;
    flex-direction: column;
  }

  .cd-sd-body,
  .sd-body {
    min-height: 0;
    overflow: hidden;
  }

  .cd-sd-main,
  .cd-sd-panel,
  .cd-sd-recap,
  .fs-after {
    min-height: 0;
  }

  .cd-sd-panel,
  .cd-sd-recap,
  .fs-after {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .cd-sd-header {
    flex-shrink: 0;
    padding-block: 8px;
  }

  .cd-sd-body {
    flex: 1;
    display: flex;
    min-height: 0;
  }

  .cd-sd-sidebar {
    width: clamp(190px, 22vw, 260px);
    flex: 0 0 auto;
  }

  .cd-sd-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  .cd-sd-panel {
    flex: 1;
    padding: 10px 14px;
  }

  .cd-sd-footer {
    flex-shrink: 0;
    padding: 8px 14px;
  }

  .fs-hero-stage .fs-banner {
    transform: translateY(min(18vh, 105px)) scale(1.12);
  }

  .fs-banner {
    padding: 8px 12px 6px;
  }

  .fs-trophy {
    font-size: 30px;
    margin-bottom: 3px;
  }

  .fs-headline {
    max-width: 520px;
    font-size: clamp(1rem, 2vw, 1.25rem);
  }

  .fs-amt {
    font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  }

  .fs-after {
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .fs-point-card {
    max-height: none;
  }
}

/* Very short screens: remove ceremony scale rather than hide content. */
@media (orientation: landscape) and (max-height: 430px) {
  .fs-hero-stage .fs-banner {
    transform: translateY(42px) scale(1.04);
  }

  .fs-trophy {
    font-size: 24px;
  }

  .fs-skip-hint {
    display: none;
  }

  .cd-sd-header-sub,
  .fs-card-cta {
    display: none;
  }
}

/* ==========================================================================
   6. ACCESSIBILITY / ROBUSTNESS
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .setup-overlay .wiz,
  .aurora-context-dock,
  .sd-box,
  .cd-sd-box {
    scroll-behavior: auto !important;
  }
}