:root { --ink:#eaf5ff; --navy:#07111f; --panel:#0e2035; --gold:#ffd34e; --cyan:#57e5ff; --muted:#9bb3c9; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:#050a12; font-family:'Barlow Condensed',Impact,sans-serif; }
button,select { font:inherit; }
.app-shell { min-height:100vh; overflow:hidden; }
.screen { min-height:100vh; }
.hidden { display:none !important; }
.start-screen { position:relative; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 14%,#27476c 0%,#101d31 37%,#060c16 82%); isolation:isolate; }
.start-screen:before { content:''; position:absolute; inset:0; opacity:.42; background:repeating-linear-gradient(115deg,transparent 0 28px,rgba(255,255,255,.035) 29px 30px),linear-gradient(180deg,transparent 68%,#07131d); z-index:-1; }
.stadium-lights { position:absolute; width:min(1250px,125vw); height:250px; top:-78px; background:radial-gradient(ellipse at center,rgba(141,229,255,.72),rgba(141,229,255,.1) 34%,transparent 68%); filter:blur(8px); z-index:-1; }
.start-content { width:min(940px,92vw); text-align:center; padding:38px 0; }
.eyebrow { margin:0 0 4px; font:600 13px 'DM Mono',monospace; letter-spacing:.22em; color:var(--cyan); }
h1 { margin:0; font-size:clamp(70px,13vw,158px); line-height:.7; letter-spacing:-.065em; font-style:italic; text-shadow:8px 8px 0 #05101d, 12px 12px 0 #e66d2f; transform:skew(-5deg); }
h1 span { color:var(--gold); }
.tagline { margin:28px 0 22px; color:#c4d4e6; font-size:23px; letter-spacing:.05em; }
.selection-panel { display:grid; grid-template-columns:1fr 58px 1fr; align-items:center; gap:12px; width:min(740px,100%); margin:auto; padding:19px 28px 21px; background:linear-gradient(120deg,rgba(23,48,75,.94),rgba(6,20,34,.94)); border:1px solid rgba(121,201,243,.34); box-shadow:0 16px 48px rgba(0,0,0,.28); }
.team-picker { min-width:0; text-align:left; }.team-picker label,.playbook-label { display:block; margin-bottom:5px; color:#88accd; font:500 11px 'DM Mono',monospace; letter-spacing:.14em; }
select { width:100%; appearance:none; padding:8px 29px 8px 10px; color:var(--ink); background:#0a1829 linear-gradient(45deg,transparent 50%,#7ee4ff 50%) calc(100% - 14px) 50%/6px 6px no-repeat,linear-gradient(135deg,#7ee4ff 50%,transparent 50%) calc(100% - 9px) 50%/6px 6px no-repeat; border:1px solid #31546f; border-radius:2px; font-size:18px; }
.team-preview { display:flex; align-items:center; gap:10px; margin-top:11px; min-height:44px; }.team-badge { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; color:#07111f; font-size:16px; font-weight:900; }.team-preview b { display:block; font-size:21px; line-height:.9; }.team-preview small { color:#9bb3c9; font:10px 'DM Mono',monospace; }.vs { color:var(--gold); font-size:29px; font-style:italic; font-weight:900; }
.primary-button { margin-top:25px; padding:13px 34px; cursor:pointer; color:#07111f; background:var(--gold); border:0; box-shadow:5px 5px 0 #e96d2f; font-size:25px; font-weight:900; letter-spacing:.08em; transition:.15s transform,.15s box-shadow; }.primary-button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 #e96d2f; }.primary-button span { margin-left:14px; }
.controls-hint { margin-top:31px; color:#9bb3c9; font:11px 'DM Mono',monospace; letter-spacing:.05em; }.controls-hint span { color:var(--ink); }.controls-hint i { display:inline-block; width:20px; }
.game-screen { display:flex; flex-direction:column; background:#07111f; }
.scoreboard { display:grid; grid-template-columns:1fr 190px 1fr; align-items:stretch; height:79px; background:#0a1727; border-bottom:1px solid #223a51; box-shadow:0 4px 18px #0005; z-index:2; }.score-team { display:flex; align-items:center; gap:18px; padding:0 7vw; font-size:25px; letter-spacing:.07em; }.score-team.away { justify-content:flex-end; }.score-team.home { justify-content:flex-start; }.score-team strong { color:var(--gold); font-size:53px; line-height:1; }.game-meta { display:grid; place-content:center; text-align:center; border-inline:1px solid #2b4054; font-family:'DM Mono',monospace; }.game-meta div { font-size:12px; }.game-meta b { margin-left:8px; color:var(--gold); font-size:18px; }.game-meta small { margin-top:4px; color:#9fc3df; font-size:10px; }
.game-layout { display:grid; grid-template-columns:205px minmax(0,1fr); flex:1; min-height:0; }.playbook { padding:20px 13px; background:#0a1829; border-right:1px solid #294158; }.play-card { display:grid; grid-template-columns:30px 1fr; grid-template-rows:auto auto; width:100%; margin-bottom:9px; padding:9px 8px; cursor:pointer; text-align:left; color:#c1d3e4; background:#101f31; border:1px solid #2a455e; border-left:3px solid #2e536f; transition:.15s; }.play-card:hover,.play-card.selected { color:white; border-color:#57e5ff; border-left-color:#57e5ff; background:#12314b; }.play-icon { grid-row:1/3; align-self:center; color:#62dcff; font-size:26px; font-weight:bold; }.play-card b { font-size:18px; line-height:1; }.play-card small { color:#83a4c0; font:9px 'DM Mono',monospace; }.play-tip { margin-top:20px; padding:10px; color:#94b5cf; border-top:1px solid #294158; font:11px/1.4 'DM Mono',monospace; }
.field-wrap { position:relative; display:grid; min-width:0; place-items:center; overflow:hidden; background:#040a12; }.field-wrap canvas { display:block; width:min(100%,1050px); max-height:calc(100vh - 130px); aspect-ratio:105/62; object-fit:contain; }.game-message { position:absolute; top:18px; left:50%; transform:translateX(-50%); padding:7px 13px; color:#f6fcff; background:#081829dd; border:1px solid #5bcbe9a8; font-size:20px; font-weight:800; letter-spacing:.05em; text-align:center; transition:opacity .25s; }.game-message.fade { opacity:0; }.field-legend { position:absolute; bottom:13px; right:17px; padding:6px 9px; color:#cfebfb; background:#06111dd4; font:10px 'DM Mono',monospace; }.legend-dot { display:inline-block; width:8px; height:8px; margin:0 4px 0 8px; border-radius:50%; }.legend-dot.offense { background:#ffd34e; }.legend-dot.defense { background:#f16c54; }
.game-footer { display:flex; align-items:center; justify-content:space-between; min-height:51px; padding:0 24px; color:#8dabbe; background:#091525; border-top:1px solid #20394e; font:12px 'DM Mono',monospace; }.text-button { padding:4px 0; cursor:pointer; color:#b8d8ed; background:none; border:0; border-bottom:1px solid #52728b; font:11px 'DM Mono',monospace; }
.leaderboard-panel { padding:16px 24px 23px; background:#07111f; border-top:1px solid #20394e; }.leaderboard-panel p { margin:0 0 9px; color:#85b7d9; font:600 11px 'DM Mono',monospace; letter-spacing:.14em; }.leaderboard-panel:empty { display:none; }
@media (max-width:700px) { .selection-panel { grid-template-columns:1fr; gap:8px; }.vs { display:none; }.team-preview { min-height:27px; }.team-badge { width:28px; height:28px; font-size:11px; }.team-preview b { font-size:17px; }.controls-hint i { width:5px; }.game-layout { grid-template-columns:1fr; grid-template-rows:auto 1fr; }.playbook { display:flex; gap:5px; padding:8px; border-right:0; border-bottom:1px solid #294158; }.playbook-label,.play-tip { display:none; }.play-card { margin:0; padding:5px; grid-template-columns:0 1fr; }.play-icon { display:none; }.play-card b { font-size:14px; }.play-card small { font-size:7px; }.scoreboard { grid-template-columns:1fr 115px 1fr; height:61px; }.score-team { gap:6px; padding:0 10px; font-size:18px; }.game-meta b { font-size:14px; }.game-footer { min-height:43px; padding:0 11px; }.game-footer span { max-width:53%; text-align:center; font-size:9px; }.leaderboard-panel { padding:12px; } }