/* WHAT: Full-window game and shared-broadcast layouts. WHY: The court should use available width and height without losing essential controls. HOW: A constrained grid gives the canvas flexible space and keeps compact HUD rows readable on desktop and tablet. */
.game-route .site-header { height: 65px; }.game-route .site-footer { display: none; }.game-route #main { max-width: none; min-height: 0; height: calc(100dvh - 65px); padding: 14px 22px; }
.game-shell { height: 100%; min-height: 575px; display: grid; grid-template-rows: auto auto minmax(210px,1fr) auto auto; gap: 9px; }.game-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.game-topline h1 { font-size: 19px; letter-spacing: -.03em; margin: 0; }.game-topline .button-row { gap: 7px; }.game-topline .tag { font-size: 9px; }
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; background: #172326; border: 1px solid #34484b; border-radius: 12px; padding: 10px 22px; align-items: center; gap: 18px; }
.team-score { display: flex; align-items: center; gap: 16px; }.team-score.beta { flex-direction: row-reverse; text-align: right; }.team-score strong { font: 650 38px/1 var(--font); letter-spacing: -.05em; }.team-score .name { font: 700 13px/1.4 var(--font); letter-spacing: .09em; }.team-score small { display: block; font: 10px var(--mono); margin-top: 3px; color: var(--muted); }.score-center { text-align: center; }.score-center strong { font: 11px var(--mono); color: var(--ink); letter-spacing: .06em; }.score-center small { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.court-wrap { min-height: 0; position: relative; border: 1px solid #365753; border-radius: 14px; overflow: hidden; background: #132326; }.pong-canvas { width: 100%; height: 100%; display: block; touch-action: none; }.court-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; padding: 20px; text-align: center; }.court-overlay strong { font-size: clamp(20px,3vw,42px); line-height: 1.15; padding: 10px 20px; background: #102020c9; border-radius: 12px; backdrop-filter: blur(4px); }.court-overlay span { font-size: 12px; margin-top: 10px; color: #b9d5ce; padding: 3px 10px; background: #102020d9; border-radius: 6px; }.court-meta { position: absolute; top: 12px; left: 14px; display: flex; gap: 8px; pointer-events: none; }.court-meta .tag { background: #10201dc9; color: #b2c9c5; font-size: 9px; }
.power-strip { position: absolute; bottom: 12px; left: 14px; right: 14px; display: flex; justify-content: space-between; gap: 10px; pointer-events: none; }.power-badge { display: inline-flex; gap: 10px; align-items: center; font: 10px var(--mono); border: 1px solid #47776e; border-radius: 6px; background: #17332dea; color: var(--mint); padding: 6px 9px; }.power-badge.beta { border-color: #895749; color: var(--coral); background: #36231fe8; }
/* WHAT: Compact courtside information. WHY: Commentary, predictions and standings should not steal most of the court height. HOW: Shares a three-column desktop row and progressively condenses secondary details on short screens. */
.courtside-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 9px; }.courtside-box { background: #182326; border: 1px solid #304246; border-radius: 10px; padding: 12px 15px; min-width: 0; }.courtside-box h2 { font: 10px var(--mono); letter-spacing: .06em; color: var(--muted); margin: 0 0 7px; }.caption-line { font-size: 13px; line-height: 1.4; min-height: 37px; margin: 0; color: #e3eeea; }.caption-line strong { color: var(--mint); }.prediction-choices { display: flex; gap: 6px; }.prediction-choices .button { min-height: 29px; padding: 4px 11px; font-size: 10px; flex: 1; }.prediction-choices button[aria-pressed="true"] { border-color: var(--mint); background: #28443c; }.prediction-result { font-size: 10px; color: var(--muted); margin-top: 6px; min-height: 15px; }.stat-line { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); font-size: 11px; margin-top: 5px; }.stat-line strong { color: var(--ink); font: 11px var(--mono); }.game-controls { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: space-between; }.game-controls .button-row { gap: 6px; }.game-controls .button { padding: 6px 10px; min-height: 34px; font-size: 10px; }.game-controls .check { font-size: 10px; }.game-controls .muted { font-size: 10px; }
.settings-dialog { max-width: min(700px,calc(100vw - 28px)); width: 700px; padding: 27px; color: var(--ink); border: 1px solid #526d66; border-radius: 18px; background: #162225; max-height: 88dvh; }.settings-dialog::backdrop { background: #030c0ccc; backdrop-filter: blur(3px); }.settings-dialog h2 { margin: 0; }.settings-dialog .form-grid { gap: 15px; }.settings-dialog summary { cursor: pointer; color: var(--mint); font-size: 13px; margin-top: 20px; }.power-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 15px; }.power-guide p { font-size: 12px; margin: 4px 0; }.power-guide strong { font-size: 12px; }.settings-note { margin: 12px 0; font-size: 12px; }
/* WHAT: Official playback and human-input surfaces. WHY: Shared broadcasts and local demonstrations need visibly distinct provenance. HOW: Uses a large playable embed, explicit source labels and touch targets outside the canvas. */
.broadcast-layout { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 22px; }.video-stage { aspect-ratio: 16 / 9; border: 1px solid #38504e; border-radius: 16px; background: radial-gradient(ellipse at 50% 60%,#1c3932,#112025 65%); overflow: hidden; display: grid; place-items: center; }.video-stage iframe { width: 100%; height: 100%; border: 0; }.video-stage .empty-state { max-width: 570px; }.video-stage .empty-state h2 { font-size: 30px; }.broadcast-side { display: grid; gap: 16px; align-content: start; }.broadcast-side p { font-size: 13px; }.broadcast-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 18px; }.broadcast-footer p { font-size: 12px; max-width: 550px; margin: 0; }
.room-lobby { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }.invitation { display: grid; gap: 15px; }.invite-code { font: 34px var(--mono); letter-spacing: .18em; color: var(--mint); }.room-notice { font-size: 12px; margin: 0; color: var(--muted); }.touch-controls { display: flex; gap: 12px; justify-content: center; }.touch-controls .button { min-width: 65px; min-height: 48px; }
.snake-shell { max-width: 1000px; margin: 0 auto; height: 100%; display: grid; grid-template-columns: minmax(250px,1fr) 260px; gap: 24px; align-items: center; }.snake-stage { width: 100%; aspect-ratio: 1; max-height: calc(100dvh - 120px); border: 1px solid #405c4b; border-radius: 18px; background: #17271e; touch-action: none; }.snake-aside h1 { font-size: 33px; }.snake-score { font: 48px var(--mono); color: var(--mint); margin: 15px 0; }.direction-pad { display: grid; grid-template-columns: repeat(3,48px); justify-content: center; gap: 7px; margin-top: 25px; }.direction-pad button:first-child { grid-column: 2; }.direction-pad button:nth-child(2) { grid-column: 1; }
@media(max-width: 1100px) { .broadcast-layout { grid-template-columns: 1fr; }.broadcast-side { grid-template-columns: 1fr 1fr; }.game-shell { min-height: 590px; }.game-controls { gap: 5px; } }
@media(max-width: 760px) { .game-route .site-header { height: 113px; }.game-route #main { height: calc(100dvh - 113px); padding: 9px; }.game-shell { min-height: 640px; gap: 7px; }.game-topline h1 { font-size: 16px; }.game-topline .small-text { display: none; }.scoreboard { padding: 10px 13px; gap: 10px; }.team-score { gap: 9px; }.team-score strong { font-size: 28px; }.team-score .name { font-size: 10px; }.team-score small { font-size: 8px; }.score-center strong { font-size: 9px; }.courtside-grid { grid-template-columns: 1.2fr 1fr; }.courtside-box:last-child { display: none; }.courtside-box { padding: 10px; }.caption-line { font-size: 11px; }.game-controls { justify-content: flex-start; }.game-controls .small-text { display: none; }.game-controls .button { min-height: 38px; }.power-badge { font-size: 8px; padding: 4px 6px; }.room-lobby, .broadcast-side { grid-template-columns: 1fr; }.video-stage { min-height: 270px; aspect-ratio: auto; }.video-stage iframe { min-height: 270px; }.snake-shell { display: flex; flex-direction: column; gap: 12px; height: auto; }.snake-stage { max-height: none; }.snake-aside { width: 100%; }.snake-aside h1 { font-size: 26px; }.direction-pad { margin-top: 12px; }.power-guide { grid-template-columns: 1fr; } }
@media(min-width: 761px) and (max-height: 750px) { .game-shell { min-height: 545px; }.courtside-box { padding: 9px 13px; }.caption-line { font-size: 12px; min-height: 30px; }.scoreboard { padding: 8px 20px; }.team-score strong { font-size: 31px; } }