:root {
  color-scheme: dark;
  --ink: #e8f1ee;
  --muted: #8da5a6;
  --line: rgba(181, 224, 210, .16);
  --deep: #2a130a;
  --panel: #4c2412;
  --felt: #e79a56;
  --aqua: #f4d18c;
  --gold: #f2c35e;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background-color: #552610; color: #fff4dd; font-family: "Avenir Next", Avenir, system-ui, sans-serif; background-image: repeating-linear-gradient(8deg, rgba(255,208,135,.08) 0 2px, transparent 2px 13px), repeating-linear-gradient(97deg, rgba(77,25,7,.18) 0 1px, transparent 1px 31px); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2; background-image: radial-gradient(rgba(255,255,255,.18) .6px, transparent .6px); background-size: 5px 5px; }
.shell { width: min(1280px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 28px; }
.masthead { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.kicker, .section-label { margin: 0 0 10px; color: var(--aqua); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 700px; margin-bottom: 10px; font-family: "Iowan Old Style", Georgia, serif; font-size: clamp(38px, 5vw, 72px); font-weight: 500; line-height: .98; letter-spacing: -.04em; }
.dek { margin: 0; color: #e9cda0; font-size: 16px; }
.game-meta { display: flex; gap: 14px; align-items: center; min-width: 170px; padding: 12px 0 2px 18px; border-left: 3px solid var(--gold); color: var(--gold); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.game-meta-copy { display: grid; gap: 5px; }
.game-meta span { color: #e9cda0; }
.game-meta-left { width: fit-content; min-width: 0; margin-bottom: 16px; padding: 0 0 0 12px; border-left-width: 2px; }
.game-id-link { color: var(--gold); text-decoration: none; text-underline-offset: 3px; }
.game-id-link:hover, .game-id-link:focus-visible { color: #fff4dd; text-decoration: underline; }
.next-game { min-height: 32px; padding: 7px 10px; border: 1px solid rgba(242, 195, 94, .72); background: rgba(53, 17, 6, .38); color: #ffe1ad; font: 700 10px ui-monospace, monospace; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.next-game:hover, .next-game:focus-visible { background: var(--gold); color: #3a160a; outline: none; }
.next-game:disabled { opacity: .62; cursor: wait; }
.lobby { margin: 22px 0 0; }
.lobby-actions, .room-live { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 18px 20px; border: 2px solid #7d3919; background: rgba(53, 17, 6, .42); box-shadow: inset 0 0 0 3px rgba(255, 209, 137, .08); }
.practice-entry { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 10px; padding: 18px 20px; border: 2px solid var(--gold); background: linear-gradient(110deg, rgba(104, 49, 22, .92), rgba(53, 17, 6, .72)); box-shadow: inset 0 0 0 3px rgba(255, 209, 137, .1); }
.practice-entry h3 { margin: 0 0 6px; color: #fff4dd; font: 500 24px/1.05 "Iowan Old Style", Georgia, serif; }
.practice-button { min-width: 176px; min-height: 48px !important; }
.practice-status { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 12px 16px; border: 1px solid rgba(242, 195, 94, .58); background: rgba(53, 17, 6, .42); }
.practice-status .section-label { margin: 0 0 3px; }
.practice-status strong { color: #fff4dd; font: 500 18px "Iowan Old Style", Georgia, serif; }
.lobby h3 { margin: 0 0 6px; font: 500 24px/1.05 "Iowan Old Style", Georgia, serif; }
.lobby p:not(.section-label) { max-width: 500px; margin: 0; color: #e9cda0; font-size: 13px; line-height: 1.45; }
.lobby-forms { display: grid; grid-template-columns: minmax(150px, 1fr) auto; gap: 8px; min-width: min(100%, 390px); }
.lobby label { display: grid; gap: 5px; color: #f3d6a5; font: 11px ui-monospace, monospace; }
.lobby input, .lobby select { min-width: 0; min-height: 44px; padding: 10px 11px; border: 1px solid rgba(255, 226, 170, .4); background: #351106; color: #fff4dd; font: 13px system-ui, sans-serif; }
.lobby button { align-self: end; min-height: 39px; padding: 9px 13px; border: 1px solid var(--gold); color: #3a160a; background: var(--gold); font: 700 11px ui-monospace, monospace; text-transform: uppercase; cursor: pointer; }
.lobby button.secondary { color: #ffe1ad; background: transparent; }
.join-field { grid-column: 1; }
.recent-challenges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.recent-challenges .section-label { flex-basis: 100%; margin-bottom: 0; }
.recent-challenges button { align-self: auto; }
.room-live { align-items: stretch; }
.share-link { display: block; width: min(100%, 390px); margin: 8px 0; }
.participants { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; max-width: 420px; color: #f3d6a5; font-size: 11px; }
.participant { padding: 6px 8px; border: 1px solid rgba(255, 226, 170, .25); background: rgba(32, 9, 3, .35); }
.participant.voted { color: var(--gold); border-color: rgba(242, 195, 94, .55); }
.form-error { margin-top: 10px !important; color: #ffb19d !important; }
.waiting h3 { margin-bottom: 8px; color: var(--gold); font: 500 24px/1.05 "Iowan Old Style", Georgia, serif; }
.waiting p:last-child { color: #e9cda0; font-size: 12px; line-height: 1.5; }
.winner-row { padding: 6px; border: 1px solid rgba(242, 195, 94, .45); background: rgba(242, 195, 94, .08); }
.winner-row em { grid-column: 2; color: var(--gold); font: 10px ui-monospace, monospace; text-transform: uppercase; }
.briefing { display: flex; justify-content: space-between; gap: 30px; align-items: end; padding: 34px 0 26px; }
.briefing h2 { max-width: 690px; margin: 0; font-size: clamp(23px, 3vw, 38px); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; }
.briefing h2 span { color: var(--gold); white-space: nowrap; }
.briefing-note { max-width: 270px; margin: 0; color: #e9cda0; font-size: 13px; line-height: 1.55; }
.workbench { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 18px; align-items: stretch; }
.board-wrap, .side-panel, .replay-section { border: 2px solid #7d3919; background: #6d3218; box-shadow: 0 7px 0 rgba(32, 10, 3, .34), inset 0 0 0 4px rgba(255, 209, 137, .12); }
.board-wrap { min-height: 650px; padding: 16px; background-color: var(--felt); background-image: repeating-linear-gradient(12deg, rgba(126, 48, 15, .18) 0 2px, transparent 2px 19px), radial-gradient(circle at 48% 44%, rgba(255, 220, 157, .15), transparent 42%); }
.board-caption { display: flex; justify-content: space-between; color: #f8dbab; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.board-caption span:last-child { color: var(--gold); }
.board { height: 600px; margin: 2px auto 0; }
.board svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ocean { fill: url(#wood-grain); stroke: #783814; stroke-width: 3; }
.table-grain { fill: transparent; pointer-events: none; }
.orbit { fill: none; stroke: rgba(255, 232, 172, .38); stroke-width: 2; stroke-dasharray: 2 8; }
.water-tile { fill: url(#water-grain); stroke: #0c5d91; stroke-width: 3; filter: drop-shadow(0 3px 0 rgba(28, 42, 40, .35)); }
.hex polygon { stroke: #eed194; stroke-width: 3; filter: url(#tile-grain); }
.hex-wood polygon { fill: #286342; } .hex-brick polygon { fill: #c4793d; } .hex-sheep polygon { fill: #bedf78; } .hex-wheat polygon { fill: #e6b548; } .hex-ore polygon { fill: #98a0a5; } .hex-desert polygon { fill: #e5ca91; }
.token { display: grid; place-items: center; align-content: center; gap: 0; width: 46px; height: 43px; border: 2px solid rgba(45, 65, 41, .28); border-radius: 50%; background: #f9f3d9; color: #2b2b20; font: 700 20px ui-monospace, monospace; line-height: .9; text-align: center; box-shadow: 0 3px 0 rgba(73, 47, 24, .35); }
.token b { display: block; font-weight: 800; }
.token-pips { display: block; color: currentColor; font: 700 8px/7px Georgia, serif; letter-spacing: 1px; min-height: 7px; }
.token.hot { color: #c73830; box-shadow: 0 0 0 2px #c73830 inset, 0 3px 0 rgba(73, 47, 24, .35); }
.port .pier { fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } .port .pier-shadow { stroke: #4a281b; stroke-width: 9; opacity: .9; filter: url(#piece-shadow); } .port .pier-top { stroke: #a96739; stroke-width: 6; } .port .pier-top::after { stroke: #e0a05a; } .port-label { font: 700 8px ui-monospace, monospace; letter-spacing: .35px; text-anchor: middle; }
.road-piece { pointer-events: none; } .road-outline { opacity: .96; filter: url(#piece-shadow); } .road-shadow { opacity: .95; filter: url(#piece-shadow); } .road { opacity: .99; filter: url(#piece-shadow); } .road-highlight { pointer-events: none; }
.settlement-hit { cursor: pointer; outline: none; } .settlement-hit:hover circle, .settlement-hit:focus circle { opacity: .5; } .settlement-hit path { filter: url(#piece-shadow); }
.placement-order { pointer-events: none; }
.placement-order-item rect { stroke: #f8e6b5; stroke-width: 2; filter: url(#piece-shadow); }
.placement-order-number { fill: #fff7df; font: 800 17px ui-monospace, SFMono-Regular, Menlo, monospace; }
.port-icon { font-size: 22px; dominant-baseline: middle; }
.port-label { font-size: 9px; font-weight: 800; }
.settlement-order { fill: #fff7df; font: 800 10px ui-monospace, SFMono-Regular, Menlo, monospace; paint-order: stroke; stroke: #452016; stroke-width: 3px; }
.side-panel { display: flex; flex-direction: column; justify-content: flex-start; padding: 22px; background: #7b3a1c; }
.choices { display: grid; gap: 9px; }
.choice { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; width: 100%; padding: 12px 12px 11px; border: 2px solid rgba(255, 230, 177, .18); background: rgba(57, 18, 7, .3); color: #fff4dd; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.choice:hover, .choice:focus-visible, .choice.chosen { border-color: var(--gold); background: rgba(255, 213, 126, .15); outline: none; }
.choice i, .identities i { grid-row: 1 / span 2; display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--choice-color); box-shadow: 0 0 0 3px rgba(255,255,255,.08); }
.choice span { font-size: 14px; } .choice small { margin-top: 3px; color: #e9cda0; font-size: 10px; font-family: ui-monospace, monospace; }
.choice:disabled { cursor: default; }
.ranking-instructions { margin: 0 0 7px; color: #e9cda0; font-size: 12px; line-height: 1.35; }
.ranking-rows { display: grid; gap: 3px; }
.ranking-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; align-items: center; min-height: 44px; }
.ranking-ordinal { color: var(--gold); font: 700 12px ui-monospace, monospace; }
.rank-tile { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid rgba(255, 230, 177, .28); background: rgba(57, 18, 7, .36); color: #fff4dd; text-align: left; font: inherit; font-size: 13px; font-weight: 600; cursor: grab; touch-action: none; }
.rank-tile:hover, .rank-tile:focus-visible { border-color: var(--gold); background: rgba(255, 213, 126, .13); }
.rank-tile:active { cursor: grabbing; }
.rank-tile:disabled { opacity: .65; cursor: default; }
.rank-grip { color: var(--gold); font-size: 18px; line-height: 1; }
.rank-tile i { flex: 0 0 13px; width: 13px; height: 13px; border-radius: 50%; background: var(--choice-color); box-shadow: 0 0 0 2px rgba(255,255,255,.12); }
.ranking-row.drop-target .rank-tile { border-color: var(--gold); background: rgba(255, 213, 126, .2); }
.ranking-row.dragging .rank-tile { position: relative; z-index: 2; transform: translateY(var(--drag-delta, 0)); opacity: .82; pointer-events: none; box-shadow: 0 8px 16px rgba(30, 8, 1, .45); }
.lock-ranking { width: 100%; min-height: 44px; margin-top: 8px; border: 1px solid #ffe19b; background: linear-gradient(#efc56d, #c98731); color: #3f1b0c; font-size: 14px; font-weight: 800; box-shadow: 0 3px 0 #81461c; cursor: pointer; }
.lock-ranking:disabled { opacity: .52; box-shadow: none; cursor: default; }
.training-actions { display: grid; gap: 8px; }
.training-actions .training-next-board { width: 100%; min-height: 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ranking-room .result { min-height: 0; margin: 8px 0; padding-top: 8px; }
.ranking-room .side-panel { gap: 10px; justify-content: start; }
.training-mode .side-panel { justify-content: start; gap: 14px; }
.training-mode .result { min-height: 0; margin: 0; padding-top: 14px; }
.ranking-locked { padding: 12px; border-left: 3px solid var(--gold); background: rgba(255, 213, 126, .1); color: #fff4dd; font-size: 13px; }
.result { min-height: 0; margin: 0; padding-top: 20px; border-top: 1px solid rgba(255, 226, 170, .24); }
.result-placeholder { margin: 0; color: #e9cda0; font-size: 13px; line-height: 1.6; }
.training-prompt h3, .training-result h3 { margin: 0 0 8px; color: #fff4dd; font: 500 22px/1.1 "Iowan Old Style", Georgia, serif; }
.training-prompt p:last-child { margin: 0; color: #e9cda0; font-size: 12px; line-height: 1.5; }
.training-result .section-label { margin-bottom: 7px; }
.training-score { margin: 0 0 13px; color: var(--gold); font: 700 16px ui-monospace, monospace; }
.training-score span { display: block; margin-top: 4px; color: #e9cda0; font: 11px system-ui, sans-serif; }
.training-score.unavailable { color: #ffd1c3; font: 12px/1.5 system-ui, sans-serif; }
.training-placements { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.training-placements li { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 6px 9px; align-items: center; padding: 7px 9px; border: 1px solid rgba(255, 226, 170, .2); background: rgba(57, 18, 7, .22); font-size: 11px; }
.training-placements i { grid-row: 1 / span 2; display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--choice-color); }
.training-placements strong { grid-column: 2; color: var(--aqua); font-weight: 500; }
.verdict-word { margin-bottom: 8px; color: var(--gold); font: 600 11px ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.verdict h3 { margin-bottom: 9px; font-family: "Iowan Old Style", Georgia, serif; font-size: 25px; font-weight: 500; line-height: 1.05; }
.verdict p:last-child { margin: 0; color: #e9cda0; font-size: 12px; line-height: 1.5; }
.incorrect .verdict-word { color: #ef8b79; }
.identities { margin-top: 25px; } .identities ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .identities li { display: grid; grid-template-columns: 15px 1fr; gap: 8px; align-items: center; font-size: 11px; } .identities strong { grid-column: 2; color: var(--aqua); font-weight: 500; } .identities i { grid-row: 1 / span 2; width: 9px; height: 9px; }
.group-results { margin-top: 22px; }
.group-results ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.group-vote { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid rgba(255, 226, 170, .2); font-size: 11px; }
.group-vote strong { overflow-wrap: anywhere; }
.group-vote span { color: #e9cda0; text-align: right; }
.group-vote.correct span { color: #b9e2a1; }
.group-vote.incorrect span { color: #ef8b79; }
.group-vote.unvoted span { color: #c4b5a2; }
.key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 4px; color: #e9cda0; font-size: 11px; } .key-grid span { display: flex; align-items: center; gap: 7px; } .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; } .swatch.wood { background: #286342; } .swatch.brick { background: #c4793d; } .swatch.sheep { background: #bedf78; } .swatch.wheat { background: #e6b548; } .swatch.ore { background: #98a0a5; } .swatch.desert { background: #e5ca91; }
.replay-section { margin-top: 18px; padding: 20px 22px 18px; background: #6d3218; } .replay-heading { display: flex; justify-content: space-between; gap: 20px; align-items: end; } .replay-heading h2 { margin: 0; font: 500 28px "Iowan Old Style", Georgia, serif; } .replay-heading > p { margin: 0; color: var(--gold); font: 11px ui-monospace, monospace; }
#timeline { width: 100%; margin: 25px 0 8px; accent-color: var(--gold); } .timeline-scale { display: flex; justify-content: space-between; color: var(--muted); font: 10px ui-monospace, monospace; }
.footer { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; color: #e9cda0; font: 10px ui-monospace, monospace; } .load-file { color: var(--aqua); cursor: pointer; } .load-file input { max-width: 150px; font: inherit; }
@media (max-width: 850px) { .shell { width: min(100% - 24px, 720px); padding-top: 24px; } .masthead, .briefing { display: block; } .game-meta { margin-top: 22px; } .briefing-note { margin-top: 15px; } .workbench { grid-template-columns: 1fr; } .board-wrap { min-height: auto; } .board { height: min(78vw, 580px); } .side-panel { gap: 20px; } .result { margin: 0; } .footer { display: block; } .footer > span { display: block; margin-top: 12px; } }
@media (max-width: 560px) { .game-meta { align-items: stretch; flex-wrap: wrap; max-width: 100%; } .game-meta-copy { min-width: 0; overflow-wrap: anywhere; } .next-game { max-width: 100%; min-height: 42px; } .lobby input, .lobby select, .host-controls select, .load-file input { font-size: 16px; } }
@media (max-width: 600px) { .lobby-actions, .room-live { display: block; } .lobby-forms { margin-top: 16px; } .participants { justify-content: flex-start; margin-top: 18px; } }
@media (max-width: 600px) { .practice-entry { align-items: stretch; flex-direction: column; } .practice-button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* Live-room presentation layer */
.stage { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 150px; gap: 14px; align-items: center; }
.stage .board-wrap { grid-column: 2; min-height: 0; width: 100%; padding: 12px; }
.stage .board { height: min(62vw, 700px); min-height: 420px; }
.participant-rail { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 340px; }
.voter-card { animation: voter-enter .35s ease both; padding: 10px 12px; border: 1px solid rgba(255,226,170,.3); background: rgba(47,16,7,.62); color: #fff4dd; font-size: 12px; box-shadow: 3px 3px 0 rgba(40,10,3,.25); }
.voter-card span { display: block; margin-top: 4px; color: var(--gold); font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .08em; }
.countdown { position: absolute; z-index: 4; left: 50%; top: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 120px; height: 120px; border: 4px solid #f6d487; border-radius: 50%; background: rgba(69,20,8,.9); color: #fff4dd; font: 700 48px Georgia, serif; box-shadow: 0 0 0 12px rgba(239,59,54,.22), 0 10px 0 rgba(50,12,3,.35); animation: countdown-pop .7s ease infinite alternate; }
.countdown[hidden], .reveal-banner[hidden] { display: none; }
.reveal-banner { position: absolute; z-index: 5; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 13px 24px; border: 2px solid #f6d487; background: #ef3b36; color: #fff; font: 700 13px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 5px 0 rgba(57,12,5,.35); animation: winner-pulse .8s ease both; }
.phone-panel { margin-top: 18px; }
.phone-panel .side-panel { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 20px; align-items: start; }
.color-choice { min-height: 72px; }
.color-choice i { width: 18px; height: 18px; }
.winner-piece { animation: winner-pulse .9s ease-in-out infinite alternate; }
.winner-row { animation: correct-celebrate .55s ease both; }
.tv-room-chip { text-align: center; padding: 11px; color: var(--gold); font: 700 12px ui-monospace, monospace; letter-spacing: .14em; }
.host-controls { display: flex; align-items: end; gap: 8px; }
.host-controls label { display: grid; gap: 5px; color: #f3d6a5; font: 11px ui-monospace, monospace; }
.host-controls select { padding: 9px; border: 1px solid rgba(255,226,170,.4); background: #3a160a; color: #fff4dd; }
.join-note { margin-top: 12px !important; color: var(--gold) !important; text-align: center; }
@keyframes voter-enter { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes countdown-pop { from { transform: translate(-50%,-50%) scale(1); } to { transform: translate(-50%,-50%) scale(1.05); } }
@keyframes winner-pulse { from { filter: saturate(1); } to { filter: saturate(1.45) drop-shadow(0 0 8px rgba(246,212,135,.8)); } }
@keyframes correct-celebrate { from { transform: scale(.95); } to { transform: scale(1.03); } }
@media (max-width: 850px) { .stage { grid-template-columns: 1fr; } .stage .board-wrap { grid-column: 1; } .participant-rail { position: absolute; z-index: 3; top: 28px; min-height: 0; width: 112px; } #participant-rail-left { left: -4px; } #participant-rail-right { right: -4px; } .stage .board { height: min(86vw, 580px); min-height: 340px; } .phone-panel .side-panel { display: flex; } }
@media (max-width: 560px) { .shell { width: min(100% - 18px, 720px); padding-top: 18px; } .masthead h1 { font-size: 39px; } .stage .board { min-height: 300px; } .participant-rail { width: 90px; } .voter-card { padding: 7px; font-size: 10px; } .voter-card span { font-size: 8px; } .phone-panel .side-panel { padding: 16px; } .host-controls { margin-top: 14px; } }
body.tv-mode { min-height: 100dvh; background-color: #301208; }
body.tv-mode .shell { width: min(1500px, calc(100% - 44px)); padding: 20px 0; }
body.tv-mode .masthead { padding-bottom: 10px; align-items: center; }
body.tv-mode .masthead h1 { margin: 0; font-size: clamp(28px, 3vw, 48px); }
body.tv-mode .masthead .dek, body.tv-mode .briefing, body.tv-mode .phone-panel, body.tv-mode .replay-section, body.tv-mode .footer { display: none; }
body.tv-mode .stage { min-height: calc(100dvh - 105px); grid-template-columns: 190px minmax(0, 1fr) 190px; }
body.tv-mode .stage .board-wrap { grid-column: 2; }
body.tv-mode .stage .board { height: min(76vh, 820px); min-height: 540px; }
body.tv-mode .participant-rail { min-height: 520px; }
body.tv-mode .game-meta-left { min-width: 0; }
body.tv-mode .tv-room-chip { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .voter-card, .countdown, .reveal-banner, .winner-piece, .winner-row { animation: none !important; } }

/* City pieces and the revealed end-state scorecard */
.city-piece { cursor: pointer; }
.city-piece .city-shadow, .city-piece .city-core { filter: url(#piece-shadow); }
.city-piece .city-window { filter: drop-shadow(0 1px 0 rgba(69, 32, 22, .45)); }
.city-piece:hover circle, .city-piece:focus circle { opacity: .5; }
.scorecard { margin-top: 18px; padding: 22px; border: 2px solid #7d3919; background: #6d3218; box-shadow: 0 7px 0 rgba(32, 10, 3, .34), inset 0 0 0 4px rgba(255, 209, 137, .12); }
.scorecard-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 226, 170, .24); }
.scorecard-heading h2 { margin: 0 0 6px; font: 500 30px/1.05 "Iowan Old Style", Georgia, serif; }
.scorecard-heading p:not(.section-label) { margin: 0; color: #e9cda0; font-size: 12px; }
.scorecard-awards { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.scorecard-awards > span { display: grid; gap: 3px; min-width: 142px; padding: 9px 11px; border: 1px solid rgba(242, 195, 94, .42); background: rgba(53, 17, 6, .32); color: #e9cda0; font: 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .06em; }
.scorecard-awards b { color: var(--gold); font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.score-rows { display: grid; gap: 8px; margin-top: 16px; }
.score-row { display: grid; grid-template-columns: minmax(150px, 1.05fr) minmax(0, 2.4fr) minmax(120px, .8fr); gap: 16px; align-items: center; padding: 12px; border: 1px solid rgba(255, 226, 170, .16); background: rgba(53, 17, 6, .28); }
.score-row { border-left: 6px solid var(--player-color); }
.score-row-winner { border-color: var(--player-color); background: rgba(242, 195, 94, .08); }
.score-vp-track { flex-basis: 100%; height: 10px; background: rgba(255,255,255,.12); border-radius: 6px; overflow: hidden; }
.score-vp-track > div { height: 100%; background: var(--player-color); border-radius: inherit; }
.dice-chart { margin-top: 24px; padding-top: 18px; border-top: 1px solid #ffffff30; }
.dice-chart h3 { margin: 0; font-size: 20px; }
.dice-chart p { font-size: 14px; color: #e9cda0; }
.dice-columns { display: grid; grid-template-columns: repeat(11,minmax(0,1fr)); gap: clamp(3px,1vw,14px); }
.dice-column { text-align: center; font: 14px ui-monospace,monospace; }
.dice-track { height: 110px; display: flex; align-items: flex-end; margin: 6px 0; }
.dice-bar { width: 100%; background: var(--gold, #f2c35e); border-radius: 4px 4px 0 0; }
.score-player { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-width: 0; }
.score-player > i { display: block; width: 13px; height: 13px; border-radius: 50%; background: var(--choice-color); box-shadow: 0 0 0 3px rgba(255, 255, 255, .08); }
.score-player strong, .score-player span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score-player strong { color: #fff4dd; font-size: 13px; }
.score-player span { margin-top: 3px; color: #e9cda0; font-size: 10px; }
.score-player em { color: var(--gold); font: 10px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .07em; }
.score-metrics { display: flex; flex-wrap: wrap; gap: 6px 12px; color: #e9cda0; font: 10px ui-monospace, monospace; }
.score-metrics span { white-space: nowrap; }
.score-metrics span:first-child { color: var(--gold); }
.score-metrics b { color: #fff4dd; font-size: 15px; }
.score-awards { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.score-award, .score-muted { padding: 5px 7px; border: 1px solid rgba(242, 195, 94, .4); color: var(--gold); font: 9px ui-monospace, monospace; text-transform: uppercase; letter-spacing: .04em; }
.score-muted { border-color: rgba(255, 226, 170, .16); color: #b7946c; }
@media (max-width: 850px) { .scorecard-heading { display: block; } .scorecard-awards { justify-content: flex-start; margin-top: 14px; } .score-row { grid-template-columns: 1fr; gap: 10px; } .score-awards { justify-content: flex-start; } }
body.tv-mode .scorecard { position: fixed; z-index: 6; left: 50%; bottom: 16px; width: min(1120px, calc(100% - 40px)); max-height: min(47dvh, 430px); overflow: auto; transform: translateX(-50%); padding: 14px; background: rgba(74, 29, 13, .96); }
body.tv-mode .scorecard-heading { padding-bottom: 10px; }
body.tv-mode .scorecard-heading h2 { font-size: 22px; }
body.tv-mode .scorecard-heading p:not(.section-label) { font-size: 10px; }
body.tv-mode .scorecard-awards > span { min-width: 120px; padding: 6px 8px; }
body.tv-mode .score-rows { gap: 5px; margin-top: 10px; }
body.tv-mode .score-row { grid-template-columns: 145px minmax(0, 1fr) auto; gap: 10px; padding: 7px 9px; }
body.tv-mode .score-player strong { font-size: 11px; }
body.tv-mode .score-player span, body.tv-mode .score-metrics, body.tv-mode .score-award, body.tv-mode .score-muted { font-size: 8px; }
@media (max-width: 850px) { body.tv-mode .scorecard { width: calc(100% - 20px); max-height: 52dvh; } body.tv-mode .score-row { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .score-row-winner { animation: none !important; } }

/* Native safe-area and touch accessibility. */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.shell { padding-top: max(30px, env(safe-area-inset-top)); padding-bottom: max(30px, env(safe-area-inset-bottom)); }
button { min-height: 44px; }
.host-controls button, .footer-links button { min-width: 44px; }
.footer-links { display: flex; align-items: center; gap: 14px; }
.footer-links[hidden], .footer-links [hidden] { display: none; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--aqua); }
.form-error[role="alert"] { display: block; color: #ffd1c3; font-size: 12px; line-height: 1.45; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible, [role="button"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 560px) {
  .shell { padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .footer-links { margin-top: 16px; flex-wrap: wrap; }
  .host-controls button, .primary, .secondary { min-height: 44px; }
}

/* Keep the key and inspection controls with the board, outside the zoomed SVG. */
.board-surface { position: relative; isolation: isolate; }
.board-caption, .board-caption span:last-child { color: #54270f; }
.board-surface .board { overflow: hidden; border-radius: 6px; }
.board-surface .board svg { overflow: hidden; }
.board-actions { display: flex; justify-content: center; align-items: center; gap: 6px; width: max-content; max-width: 100%; margin: 10px auto 0; padding: 4px; border: 1px solid rgba(242, 209, 140, .25); border-radius: 10px; background: rgba(40, 22, 17, .62); }
.board-actions button { min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid rgba(242, 209, 140, .25); border-radius: 8px; background: transparent; color: #fff4dd; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.board-actions button[data-action="previous"], .board-actions button[data-action="right"] { width: 44px; padding: 4px; font-size: 20px; line-height: 1; }
.board-actions button:hover:not(:disabled) { border-color: var(--gold); background: var(--gold); color: #3d2118; }
.board-actions button:disabled { opacity: .35; cursor: default; }
@media (max-width: 560px) {
  .board-actions { width: 100%; gap: 4px; padding: 3px; }
  .board-actions button { padding-inline: 7px; }
  .board-actions button[data-action="previous"], .board-actions button[data-action="right"] { flex: 0 0 44px; }
  .board-actions button[data-action="reveal"], .board-actions button[data-action="next"] { flex: 1 1 0; min-width: 0; padding-inline: 5px; font-size: 11px; white-space: nowrap; }
}
.board-zoom-controls { position: absolute; z-index: 2; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid #f4d18c88; border-radius: 8px; background: #351106ed; color: #fff4dd; }
.board-zoom-controls button { min-width: 44px; min-height: 44px; padding: 4px 8px; border: 0; background: transparent; color: inherit; font: 600 18px system-ui, sans-serif; cursor: pointer; }
.board-zoom-controls button:last-child { font-size: 11px; }
.board-zoom-controls button:disabled { opacity: .35; cursor: default; }
.board-zoom-controls output { min-width: 38px; text-align: center; font: 11px ui-monospace, monospace; }
.board-key { position: absolute; z-index: 2; bottom: 8px; left: 8px; right: 8px; width: fit-content; max-width: calc(100% - 16px); margin: 0 auto; padding: 7px 10px; border: 1px solid #f4d18c66; border-radius: 6px; background: #351106ed; pointer-events: none; }
.board-key .key-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 12px; color: #fff4dd; font-size: 10px; }
.board-key .key-grid span { gap: 4px; }
.board-key .swatch { width: 9px; height: 9px; }
.replay-lobby .phone-panel .side-panel { display: block; padding: 14px 16px; }
.replay-lobby .side-panel > div:first-child { display: none; }
.replay-lobby .result { margin: 0; padding: 0; border: 0; }
body.tv-mode .board-zoom-controls { display: none; }
body.tv-mode .board-actions { display: none; }

.placement-key { margin: 5px 0 0; padding-top: 5px; border-top: 1px solid #f4d18c44; color: #fff4dd; font: 10px/1.35 system-ui, sans-serif; text-align: center; }
.training-complete .side-panel { display: block; }
.training-complete .result { border: 0; padding-top: 0; }
.prediction-comparison { width: 100%; border-collapse: collapse; margin: 12px 0; color: #fff4dd; font: 12px/1.4 system-ui, sans-serif; }
.prediction-comparison caption { text-align: left; margin-bottom: 9px; font-weight: 700; font-size: 15px; }
.prediction-comparison th, .prediction-comparison td { text-align: left; padding: 10px 5px; border-bottom: 1px solid #f4d18c33; }
.prediction-comparison thead th { font-size: 10px; color: #e9cda0; font-weight: 600; }
.prediction-color { display: inline-flex; align-items: center; gap: 5px; }
.prediction-color i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--choice-color); flex: 0 0 9px; }
.prediction-match { background: #b5d79518; }
.prediction-match .prediction-status { color: #c7edb0; }
.prediction-miss .prediction-status { color: #ffd1b1; }
.prediction-status { font-size: 11px; font-weight: 600; }

/* Compact the reading flow while keeping the board as the main visual anchor. */
.shell { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.masthead { gap: 20px; padding-bottom: 18px; }
.masthead h1 { margin-bottom: 6px; font-size: clamp(38px, 4vw, 58px); }
.kicker { margin-bottom: 6px; }
.game-meta-left { margin-bottom: 8px; }
.lobby { margin-top: 12px; }
.lobby-actions, .room-live { gap: 16px; padding: 12px 16px; }
.practice-entry { gap: 14px; margin-bottom: 8px; padding: 12px 16px; }
.practice-entry h3, .lobby h3 { margin-bottom: 4px; font-size: 21px; }
.briefing { gap: 20px; padding: 18px 0 16px; }
.briefing-note { max-width: 250px; font-size: 12px; line-height: 1.4; }
.workbench { gap: 14px; }
.side-panel { padding: 16px; }
.result { padding-top: 14px; }
.identities { margin-top: 16px; }
.group-results { margin-top: 14px; }
.scorecard { margin-top: 14px; padding: 16px; }
.scorecard-heading { gap: 16px; padding-bottom: 12px; }
.scorecard-heading h2 { font-size: 26px; }
.score-rows { gap: 6px; margin-top: 12px; }
.score-row { gap: 12px; padding: 9px; }
.replay-section { margin-top: 14px; padding: 14px 16px; }
#timeline { margin-top: 17px; }
.footer { padding-top: 16px; }
button { min-height: 44px; }
.lobby button, .next-game { min-height: 44px; }
.training-actions .training-next-board { min-height: 44px; }
.practice-status { gap: 12px; padding: 9px 12px; }
.ranking-locked { padding: 9px 11px; }
.prediction-comparison { margin: 8px 0; font-size: 11px; }
.prediction-comparison caption { margin-bottom: 6px; font-size: 14px; }
.prediction-comparison th, .prediction-comparison td { padding: 7px 4px; }

@media (max-width: 850px) {
  .shell { padding-top: max(18px, env(safe-area-inset-top)); }
  .briefing { padding: 16px 0 12px; }
  .briefing-note { max-width: none; }
  .side-panel { padding: 15px; }
}
@media (max-width: 600px) {
  .lobby-actions, .room-live { padding: 12px; }
  .practice-entry { padding: 12px; }
  .scorecard { padding: 12px; }
  .scorecard-heading h2 { font-size: 24px; }
}
@media (max-width: 560px) {
  .shell { padding-top: max(14px, env(safe-area-inset-top)); }
  .masthead { padding-bottom: 14px; }
  .briefing { padding-top: 13px; }
}
@media (max-width: 560px) {
  .practice-status { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
  .practice-status > div { grid-column: 1; }
  .practice-status > button { grid-column: 2; grid-row: 1; }
  .training-round-control { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
  .training-round-control select { width: auto; min-width: 165px; min-height: 44px; }
}

/* Board-first masthead and room setup. */
.masthead .brand { display: flex; align-items: center; gap: 14px; }
.brand-icon { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 13px; }
.masthead .brand h1 { margin: 0; line-height: 1.05; }
.masthead .brand .dek { margin: 5px 0 0; }
.game-status { margin-top: 8px; }
.game-status[hidden] { display: none; }
.room-live { align-items: center; }
.footer { justify-content: flex-end; }
@media (max-width: 560px) {
  .masthead .brand { gap: 10px; }
  .brand-icon { width: 48px; height: 48px; flex-basis: 48px; border-radius: 11px; }
  .masthead .brand .dek { font-size: 13px; }
}

/* Keep predictions and the reveal in the game's frame. */
.stage { grid-template-columns: minmax(0, 1fr); align-items: start; }
.stage .board-wrap { grid-column: 1; width: min(100%, 900px); justify-self: center; }
.stage .participant-rail { display: none; }
.stage .board { height: auto; aspect-ratio: 960 / 760; min-height: 0; padding-top: 36px; padding-bottom: 58px; }
.stage .board svg { width: 100%; height: 100%; }
.game-recap[hidden], .board-interaction [hidden], .lobby [hidden] { display: none !important; }
.board-interaction:has(.prediction-entry[hidden]):has(.result:empty), .board-interaction:has(.prediction-entry[hidden]):not(:has(.result)) { display: none; }
.board-interaction { margin-top: 12px; padding: 14px; background: #351106; border-radius: 8px; color: #fff4dd; }
.prediction-entry .choices { display: block; }
.prediction-question { margin: 0 0 10px; font: 600 18px/1.3 system-ui, sans-serif; }
.prediction-options, .prediction-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.prediction-options { margin-top: 10px; }
.prediction-option, .prediction-pick { flex: 1; min-width: 90px; min-height: 44px; padding: 9px 12px; border: 1px solid #f2c35e70; border-radius: 6px; background: #54270f; color: #fff4dd; font: 600 14px system-ui, sans-serif; cursor: pointer; }
.prediction-option:hover, .prediction-pick:hover { border-color: var(--gold); background: #73401d; }
.prediction-pick { display: grid; gap: 4px; font-size: 12px; text-align: left; }
.prediction-pick > span:first-child { color: var(--gold); font-size: 10px; }
.prediction-option .prediction-color i { width: 14px; height: 14px; flex-basis: 14px; }
.prediction-hint { margin: 10px 0; font-size: 11px; color: #e9cda0; }
#lock-ranking { min-height: 44px; padding: 10px 18px; border: 1px solid var(--gold); border-radius: 6px; background: var(--gold); color: #351106; font-weight: 700; cursor: pointer; }
.board-interaction .result { margin: 10px 0 0; padding: 10px 0 0; border-top: 1px solid #f2c35e33; }
.board-interaction .result:empty { display: none; }
.board-interaction:has(.prediction-entry[hidden]) .result { margin: 0; padding: 0; border: 0; }
.board-interaction .waiting strong { color: var(--gold); font-size: 13px; }
.board-interaction .waiting p { margin: 5px 0 0; font-size: 12px; }
.board-interaction .waiting { min-height: 0; }
.winner-crown { pointer-events: none; }
.winner-piece { animation: none; }
.play-menu { padding: 10px; border: 1px solid #f2c35e55; border-radius: 8px; background: #35110680; }
.play-options { display: flex; gap: 8px; }
.play-options button { flex: 1; text-transform: none; font: 600 14px system-ui, sans-serif; border-radius: 6px; }
.play-options button.selected { background: #f2c35e28; }
.room-setup { padding: 12px 2px 2px; }
.room-setup > p { margin-bottom: 10px !important; }
.room-setup .lobby-forms { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; min-width: 0; }
.create-fields, .join-fields { display: flex; flex: 1; align-items: end; flex-wrap: wrap; gap: 10px; }
.room-setup label { flex: 1; min-width: 120px; }
.room-setup .lobby-forms > label { max-width: 240px; }
.room-code { display: block; font: 700 28px/1.2 ui-monospace, monospace; letter-spacing: .15em; color: var(--gold); }
.room-invite { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; }
.room-invite > span { grid-column: 1; font-size: 11px; color: #e9cda0; }
.room-invite > button { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.room-members { flex: 1; min-width: 0; }
.room-members .participants { margin-top: 7px; justify-content: start; }
.room-live { border-radius: 8px; flex-wrap: wrap; }
.room-live .host-controls { flex-wrap: wrap; margin: 0; }
.game-recap { min-width: 0; width: 100%; padding: 14px; border: 1px solid #f2c35e66; border-radius: 8px; background: #35110699; }
.game-recap .scorecard { padding: 0; margin: 0; border: 0; box-shadow: none; background: transparent; }
.game-recap .result { margin: 0 0 14px; padding: 0; border: 0; }
.game-recap .result:empty { display: none; }
.game-recap .training-result > .section-label, .game-recap .training-result > h3 { display: none; }
.game-recap .identities { display: none; }
.game-recap .verdict { padding: 0; }
.game-recap .verdict p { margin: 5px 0; font-size: 12px; }
.game-recap .verdict h3 { margin: 0; font-size: 20px; }
.recap-scroll { overflow-x: auto; }
.recap-table { width: 100%; border-collapse: collapse; font: 12px/1.4 system-ui, sans-serif; }
.recap-table caption { text-align: left; font: 600 21px/1.3 Georgia, serif; padding-bottom: 10px; color: #fff4dd; }
.recap-table th, .recap-table td { padding: 10px 4px; border-bottom: 1px solid #f2c35e33; text-align: center; }
.recap-table th[scope="row"] { text-align: left; }
.recap-table thead { color: #e9cda0; font-size: 10px; }
.recap-table abbr { text-decoration: none; }
.recap-player { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.recap-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--player-color); flex: 0 0 10px; }
.recap-player small { display: none; }
.recap-winner-label { width: 100%; padding-left: 15px; color: var(--gold); font-size: 9px; font-weight: 500; }
.recap-winner { background: #f2c35e13; }
.recap-details { font-size: 10px; text-align: left; }
.recap-details summary { cursor: pointer; min-height: 24px; display: flex; align-items: center; color: #f2c35e; }
.recap-details > div { display: grid; gap: 5px; padding-top: 5px; }
.game-recap .dice-chart { margin-top: 16px; padding-top: 12px; }
.game-recap .dice-chart h3 { font-size: 16px; }
.game-recap .dice-chart p { margin: 5px 0 10px; font-size: 11px; }
.game-recap .dice-column { font-size: 10px; }
.game-recap .dice-track { height: 78px; }
.stage.has-recap .board-wrap { width: 100%; }
.stage.has-recap .reveal-banner { display: none; }
@media (min-width: 900px) {
  .stage.has-recap { grid-template-columns: minmax(0, 1.15fr) minmax(390px, 1fr); gap: 18px; }
  .stage.has-recap .board-wrap { grid-column: 1; }
  .stage.has-recap .game-recap { grid-column: 2; grid-row: 1; }
}
@media (max-width: 899px) {
  .stage.has-recap .game-recap { grid-column: 1; max-width: 900px; justify-self: center; }
}
@media (max-width: 560px) {
  .play-options { gap: 5px; }
  .play-options button { padding: 8px 6px; font-size: 12px; }
  .board-interaction { padding: 12px; }
  .prediction-question { font-size: 16px; }
  .prediction-option, .prediction-pick { min-width: 40%; }
  .room-live { display: flex; gap: 12px; }
  .room-members { flex-basis: 100%; }
  .room-setup .lobby-forms { margin-top: 0; }
  .room-setup .lobby-forms > label { max-width: none; flex-basis: 100%; }
  .game-recap { padding: 10px; }
  .recap-table { font-size: 11px; }
  .recap-table th, .recap-table td { padding: 8px 3px; }
}
body.tv-mode .game-recap .scorecard { position: static; transform: none; width: auto; max-height: none; overflow: visible; }
@media (prefers-reduced-motion: no-preference) { .game-recap { animation: recap-appear .25s ease-out; } }
@keyframes recap-appear { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
.stage .board { aspect-ratio: auto; }
.stage .board svg { display: block; height: auto; aspect-ratio: 960 / 700; }
body.training-mode .board-actions [data-action="reveal"] { display: none; }