/* All match interaction belongs to this one fullscreen-capable play area. */
.in-game .masthead, .in-game footer { display: none; }
.in-game .lobby-app { max-width: 1440px; padding: 12px; }
.online-game { display: block !important; }
.online-game[hidden] { display: none !important; }
.game-stage { --hud-height: 110px; position: relative; isolation: isolate; container-type: inline-size; height: min(900px, calc(100dvh - 24px)); min-height: 300px; overflow: hidden; border-radius: 8px; background: #173c49; color: white; }
.game-viewport { position: absolute; inset: var(--hud-height) 0 0; }
.game-viewport canvas { width: 100%; height: 100%; object-fit: contain; }
.play-hud { position: absolute; inset: 0 0 auto; z-index: 50; background: #102c38; display: flex; align-items: center; padding-right: max(8px, env(safe-area-inset-right)); }
.play-hud .game-scores { flex: 1; min-width: 0; background: transparent; padding-left: max(8px, env(safe-area-inset-left)); }
.game-tools { display: flex; gap: 4px; flex-shrink: 0; }
.game-stage button { color: white; border: 1px solid #ffffff55; background: #254954; padding: 9px 12px; border-radius: 5px; font-size: 12px; min-height: 40px; cursor: pointer; }
.game-stage button:hover { background: #355d65; }
.game-stage button.primary-button { background: #ce6443; border-color: #eea082; }
.game-stage button:disabled { opacity: .5; cursor: default; }
.game-stage .icon-button { width: 40px; height: 40px; padding: 8px; display: grid; place-items: center; flex-shrink: 0; }
.icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-button .resume-symbol, .icon-button .collapse-symbol { display: none; }
.icon-button[aria-pressed="true"] .pause-symbol, .icon-button[aria-pressed="true"] .expand-symbol { display: none; }
.icon-button[aria-pressed="true"] .resume-symbol, .icon-button[aria-pressed="true"] .collapse-symbol { display: block; }
.game-stage button:focus-visible, .game-stage select:focus-visible, .game-stage .panel-scroll:focus-visible { outline: 3px solid #f4cc75; outline-offset: -3px; }
.game-stage input { accent-color: #ed7952; }
.field-hints { position: absolute; inset: 0; pointer-events: none; color: #d4e6e8; font-size: 9px; letter-spacing: .5px; opacity: .55; user-select: none; }
.edge-hint { position: absolute; top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); }
.left-hint { left: max(5px, env(safe-area-inset-left)); transform: translateY(-50%) rotate(180deg); }
.right-hint { right: max(5px, env(safe-area-inset-right)); }
.center-hint { position: absolute; bottom: max(4px, env(safe-area-inset-bottom)); left: 40%; width: 20%; text-align: center; font-size: 8px; }
.game-stage[data-flight="waiting"] .field-hints, .game-stage[data-flight="paused"] .field-hints, .game-stage[data-flight="results"] .field-hints { display: none; }
/* A late optional UI update can never leave a blocking overlay over live flight. */
.game-stage[data-flight="live"] > #online-overlay { display: none !important; }
.game-panel { position: absolute; inset: var(--hud-height) 0 0; z-index: 20; background: #112e3a; display: flex; flex-direction: column; min-height: 0; }
.game-pause { justify-content: center; align-items: center; text-align: center; padding: 16px; background: #112e3ae8; }
.game-panel h2 { font-size: clamp(20px, 3cqw, 30px); margin: 0 0 10px; overflow-wrap: anywhere; }
.game-panel p { line-height: 1.6; font-size: 12px; }
.game-pause p { margin: 0 0 16px; max-width: 520px; }
.game-menu { z-index: 30; }
.panel-scroll { overflow: auto; overscroll-behavior: contain; min-height: 0; flex: 1; padding: 20px; }
.panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); background: #0b222d; border-top: 1px solid #ffffff22; flex-shrink: 0; }
.panel-actions button { min-height: 44px; }
.results-filter { display: flex; align-items: center; gap: 12px; margin: 12px 0; }
.game-stage label { color: #d0e0e2; margin: 0; font-size: 12px; letter-spacing: 0; }
.game-stage select { width: auto; color: white; background: #254954; border: 1px solid #ffffff55; border-radius: 4px; padding: 8px; font-size: 12px; appearance: auto; }
.results-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: clamp(10px, 1.4cqw, 14px); text-align: right; }
.results-table th, .results-table td { border-bottom: 1px solid #ffffff24; padding: 8px 6px; overflow-wrap: anywhere; }
.results-table th:first-child { width: 28%; text-align: left; font-weight: 400; color: #cedfe2; }
.results-table thead th { text-align: right; vertical-align: bottom; }
.results-table [data-own="true"] { color: #ffe0a1; }
.results-details { margin-top: 16px; color: #cedfe2; font-size: 12px; line-height: 1.6; }
.results-details summary { cursor: pointer; }
.game-stage .online-options { display: flex; flex-wrap: wrap; flex-direction: row; padding-block: 12px; }
.game-stage .online-options label { display: flex; align-items: center; gap: 8px; }
.game-stage .network-diagnostics { position: static !important; max-height: none !important; margin: 18px 0 0; background: #f7f5ec; color: #223f3d; }
#online-room-error { color: #ffbba1; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.game-stage:fullscreen, .game-stage.expanded { width: 100%; height: 100dvh; min-height: 0; max-height: none; border-radius: 0; padding: 0; }
.game-stage.expanded { position: fixed; inset: 0; z-index: 1000; }
body.game-expanded { overflow: hidden; }
@media (max-width: 600px) { .in-game .lobby-app { padding: 0; } .game-stage { height: 100dvh; border-radius: 0; } .game-tools { gap: 2px; } .play-hud { padding-right: 4px; } .play-hud .game-scores { gap: 4px; padding-inline: 6px; } .game-stage .icon-button { width: 36px; height: 36px; min-height: 36px; padding: 7px; } .panel-scroll { padding: 12px; } .panel-actions { gap: 8px; padding-inline: 8px; } .panel-actions button { font-size: 11px; } .results-table th, .results-table td { padding: 7px 3px; } }
@media (max-height: 500px) { .in-game .lobby-app { padding: 0; } .game-stage { height: 100dvh; border-radius: 0; }  .game-scores { padding-block: 5px; } .score-state { margin-top: 1px; } .panel-scroll { padding-block: 12px; } }