/* ══════════════════════════════════════════════════════════════════════════
   Aurora Landscape Game Setup — Control Centre (Option A)
   Scoped entirely under .lgs-* to avoid any collision with setup.js's old
   .wiz-* / .rw-* classes (kept on disk, no longer loaded — see index.html).
   Colors reuse Aurora's real tokens (table-theme.css --tt-gold family via
   beta-hygiene-v1.css's --bh-* aliases), not the mockup's placeholder palette.
   ══════════════════════════════════════════════════════════════════════════ */

/* Color values below are written as literal fallback-inclusive var()
   references (e.g. var(--tt-gold, #c9a04a)) rather than a local --lgs-*
   custom-property layer. Root-caused 2026-08-05 (owner bug report — Start
   button/ESG unreachable at every real device size): the comment block
   above originally wrote the two old wizard class-name patterns back to
   back with no separating space between them. A CSS comment ends at the
   first asterisk-then-slash pair it finds, and mashing those two patterns
   together happened to place exactly that pair mid-sentence — ending the
   comment three sentences early and corrupting parsing badly enough to
   silently drop the entire next rule (the bare .lgs block below) from the
   stylesheet, with no error anywhere. Fixed by inserting the space now
   visible above. That's what actually broke layout, not a custom-property/
   CSSOM quirk as originally (wrongly) suspected — this file never needed
   the literal-var()-fallback workaround in the first place. Kept anyway
   since it's harmless and one less indirection layer to trace through. */
.lgs {
  width: min(1180px, 100%);
  height: min(94dvh, 620px);
  max-height: 94dvh;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -20%, rgba(27, 58, 83, .28), transparent 46%),
    linear-gradient(180deg, rgba(10, 18, 30, .98), rgba(5, 10, 18, .98));
  border: 1px solid rgba(201, 160, 74, .22);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .5);
  color: var(--text, #eef4ff);
  font-family: inherit;
}

.lgs-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.lgs-nav b {
  text-align: center;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--muted, #91a0ad);
}
.lgs-round {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: var(--text, #eef4ff);
  font-size: 18px;
  cursor: pointer;
}
.lgs-round:hover { border-color: var(--tt-gold, #c9a04a); color: #e2c36e; }

.lgs-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) minmax(230px, 280px);
}

/* ── Left rail: game selection ─────────────────────────────────────────── */
.lgs-rail {
  min-height: 0; /* grid items default to min-height:auto, which would let content overflow instead of scroll */
  border-right: 1px solid rgba(255, 255, 255, .06);
  padding: 14px 10px;
  overflow-y: auto;
  background: rgba(8, 11, 16, .35);
}
.lgs-rail-label {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #7f8b9e; font-weight: 900; margin: 2px 4px 8px;
}
.lgs-game {
  display: block; width: 100%; text-align: left;
  border: 1px solid transparent; background: transparent; color: #d8dde6;
  border-radius: 13px; padding: 9px 8px; margin-bottom: 6px; cursor: pointer;
}
.lgs-game strong { display: block; font-size: 13.5px; line-height: 1.25; }
.lgs-game span { display: block; color: #7f899a; font-size: 11px; margin-top: 2px; }
.lgs-game.on {
  border-color: rgba(199, 155, 79, .5);
  background: linear-gradient(135deg, #252117, #151920);
  box-shadow: inset 0 0 0 1px rgba(220, 183, 107, .16);
}
.lgs-game.on strong { color: #e2c36e; }
.lgs-game .lgs-game-icon { display: none; } /* icons kept in markup for parity with setup.js's board-geometry-identity note, hidden at this rail's compact width to keep names/badges readable — full geometry shown via the summary rail's table preview instead */
.lgs-game.lgs-soon { opacity: .45; cursor: not-allowed; }
.lgs-badge {
  display: inline-block; margin-top: 4px; font-size: 10px; font-style: normal;
  color: var(--muted, #91a0ad);
}

/* ── Center: configuration cards ───────────────────────────────────────── */
.lgs-main {
  min-height: 0; /* see .lgs-rail's identical note */
  padding: 14px 16px;
  overflow-y: auto;
}
.lgs-main-head { margin-bottom: 10px; }
.lgs-main-head h2 { margin: 0 0 3px; font-size: 22px; }
.lgs-main-head p { margin: 0; color: var(--muted, #91a0ad); font-size: 12.5px; }

.lgs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.lgs-card {
  border: 1px solid rgba(201, 160, 74, .22);
  background: rgba(18, 24, 33, .82);
  border-radius: 14px;
  padding: 12px 14px;
}
.lgs-card-full { grid-column: 1 / -1; }
.lgs-card-title {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 8px; margin-bottom: 8px;
}
.lgs-card-title strong { font-size: 14px; }
.lgs-card-title small { display: block; color: var(--muted, #91a0ad); font-size: 11.5px; margin-top: 2px; }
.lgs-capacity { color: #6fd7aa; font-size: 11.5px; font-weight: 850; white-space: nowrap; }

.lgs-seg-row { display: flex; gap: 6px; flex-wrap: wrap; }
.lgs-seg {
  border: 1px solid #303b4c; background: #0c1118; color: #aeb7c5;
  border-radius: 10px; padding: 8px 13px; min-width: 40px; cursor: pointer;
  font-weight: 800; font-size: 13px;
}
.lgs-seg.on { background: var(--tt-gold, #c9a04a); border-color: var(--tt-gold, #c9a04a); color: #181208; }
.lgs-seg.lgs-disabled, .lgs-seg:disabled { opacity: .25; cursor: not-allowed; text-decoration: line-through; }
.lgs-legal-note { margin: 8px 0 0; color: #8b96a7; font-size: 11.5px; line-height: 1.4; }

.lgs-explain {
  margin-top: 9px; border: 1px solid #394657;
  background: linear-gradient(135deg, rgba(37, 45, 59, .8), rgba(18, 24, 33, .9));
  border-radius: 12px; padding: 11px; display: flex; gap: 8px; align-items: flex-start;
}
.lgs-explain i {
  font-style: normal; width: 24px; height: 24px; flex: 0 0 auto;
  display: grid; place-items: center; background: #222c39; border-radius: 50%;
  color: #e2c36e; font-weight: 900; font-size: 12px;
}
.lgs-explain strong { font-size: 12.5px; }
.lgs-explain p { margin: 2px 0 0; color: #adb6c4; font-size: 12px; line-height: 1.42; }

.lgs-esg-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lgs-mode {
  border: 1px solid #303a4b; background: #0d1219; color: #c3cad5;
  border-radius: 11px; padding: 10px; cursor: pointer; text-align: left;
}
.lgs-mode strong { display: block; font-size: 13px; }
.lgs-mode span { display: block; color: #7f8a9b; font-size: 10.5px; margin-top: 2px; }
.lgs-mode.on { border-color: var(--tt-gold, #c9a04a); background: #252117; }

.lgs-esg-config { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.lgs-mini { border: 1px solid #293444; border-radius: 11px; padding: 10px; background: #0c1118; }
.lgs-mini label { display: block; color: #8d98a9; font-size: 10.5px; margin-bottom: 6px; }
.lgs-stepper {
  display: flex; align-items: center; justify-content: space-between;
  border: 1px solid #303a4a; background: #0c1118; border-radius: 10px; padding: 4px;
}
.lgs-stepper button {
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: #222c3a; color: #fff; cursor: pointer; font-size: 18px;
}
.lgs-stepper button:disabled { opacity: .3; cursor: not-allowed; }
.lgs-stepper b { font-size: 16px; }

/* ── Right rail: live summary ──────────────────────────────────────────── */
.lgs-summary {
  min-height: 0; /* see .lgs-rail's identical note */
  border-left: 1px solid rgba(255, 255, 255, .06);
  padding: 14px; background: linear-gradient(180deg, rgba(16, 21, 29, .85), rgba(9, 12, 17, .92));
  display: flex; flex-direction: column; overflow-y: auto;
}
.lgs-summary h3 { margin: 0 0 3px; font-size: 16px; }
.lgs-summary > p { color: var(--muted, #91a0ad); font-size: 11px; line-height: 1.4; margin: 0 0 10px; }

.lgs-rules { border: 1px solid rgba(201, 160, 74, .22); border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.lgs-rule {
  display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .06); font-size: 12px;
}
.lgs-rule:last-child { border-bottom: 0; }
.lgs-rule span { color: #8e99aa; }
.lgs-rule b { text-align: right; }

.lgs-deck { padding: 9px; border: 1px solid #3d4a5c; background: #121923; border-radius: 12px; margin-bottom: 10px; }
.lgs-deckline { display: flex; justify-content: space-between; font-size: 11px; }
.lgs-bar { height: 6px; background: #06090d; border-radius: 999px; margin-top: 7px; overflow: hidden; }
.lgs-bar span { display: block; height: 100%; background: linear-gradient(90deg, #6fd7aa, var(--tt-gold, #c9a04a)); }

.lgs-validation {
  border: 1px solid rgba(255, 143, 143, .4); background: rgba(255, 143, 143, .08);
  border-radius: 10px; padding: 8px 9px; margin-bottom: 10px;
}
.lgs-validation p { margin: 0 0 4px; color: #ff8f8f; font-size: 11px; line-height: 1.35; }
.lgs-validation p:last-child { margin-bottom: 0; }

.lgs-deal {
  margin-top: auto; border: 0; border-radius: 13px; padding: 14px;
  background: linear-gradient(180deg, #e2c36e, var(--tt-gold, #c9a04a));
  color: #1a1308; font-weight: 950; font-size: 15px; cursor: pointer;
}
.lgs-deal:disabled { opacity: .35; cursor: not-allowed; }
.lgs-hint { text-align: center; color: #748093; font-size: 10px; margin-top: 6px; }

/* ── Landscape-first sizing: same dvh-based approach beta-hygiene-v1.css
   already established for the old wizard, so mobile-browser-chrome quirks
   (100vh ignoring the URL bar) don't reappear here. ─────────────────────── */
@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)); }
  .lgs { height: min(94dvh, 560px); }
  .lgs-body { grid-template-columns: minmax(130px, 165px) minmax(0, 1fr) minmax(200px, 245px); }
  .lgs-main-head h2 { font-size: 19px; }
  .lgs-grid { gap: 8px; }
  .lgs-card { padding: 10px 12px; }
}

@media (orientation: landscape) and (max-height: 440px) {
  /* Threshold measured directly against real device landscape heights
     (2026-08-05): iPhone 16 Pro Max lands at exactly 430px, just past the
     original 420px cutoff, so it fell through to the looser 620px band and
     got none of this compaction despite needing it just as much as the
     smaller phones. 440px covers it with margin.
     Rebalanced 2026-08-05 (owner follow-up — legible over dense, now that
     the outer scroll actually works): this band used to shrink text hard
     enough to hit an 8-8.5px floor on several elements chasing zero scroll
     at the smallest sizes. With scrolling confirmed reachable everywhere,
     that trade isn't worth it — this band now only trims spacing/padding
     and pulls font sizes down a little from the base values above, never
     below ~10px anywhere. The two subtitle paragraphs that used to be
     display:none here are back; small/medium phones will scroll a bit more
     through the config column than before, which is the intended trade. */
  .lgs-main { padding: 10px 12px; }
  .lgs-main-head { margin-bottom: 7px; }
  .lgs-main-head h2 { font-size: 17px; }
  .lgs-main-head p { font-size: 11px; }
  .lgs-summary > p { font-size: 10px; }
  .lgs-grid { gap: 7px; }
  .lgs-card { padding: 9px 10px; }
  .lgs-card-title { margin-bottom: 5px; }
  .lgs-card-title strong { font-size: 13px; }
  .lgs-card-title small { font-size: 11px; margin-top: 0; }
  .lgs-seg { padding: 6px 10px; font-size: 12.5px; }
  .lgs-legal-note { margin-top: 5px; font-size: 11px; line-height: 1.3; }
  .lgs-explain { margin-top: 6px; padding: 8px 9px; gap: 7px; }
  .lgs-explain i { width: 20px; height: 20px; font-size: 10.5px; }
  .lgs-explain strong { font-size: 12px; }
  .lgs-explain p { font-size: 11px; line-height: 1.35; }
  .lgs-esg-modes { gap: 5px; }
  .lgs-mode { padding: 7px 9px; }
  .lgs-mode strong { font-size: 12px; }
  .lgs-mode span { font-size: 10px; }
}

/* Removed 2026-08-05 (owner bug report — Start button/ESG unreachable at
   every real device size): this width-based breakpoint assumed "narrow"
   meant a portrait phone that needed its config grid to stack to one
   column. But this screen is landscape-only (the app's own orientation
   gate blocks portrait before you ever reach it) and every real landscape
   phone is comfortably under 900px wide (iPhone 16 Pro is 852px) — so this
   fired on ordinary landscape sessions, collapsing 2 columns of config
   cards into 1 and roughly doubling .lgs-main's content height, well past
   what the height-based compact bands above were tuned to fit. The 2-column
   grid stays fixed for every real device width this screen can ever load
   at; only HEIGHT-based compaction (the two @media (orientation:landscape)
   blocks above) should ever change this layout. */