:root{color-scheme:dark;font-family:Bahnschrift,Segoe UI Variable Text,Trebuchet MS,sans-serif;--bg-deep: #09131d;--bg-panel: rgba(9, 22, 34, .72);--bg-panel-strong: rgba(7, 18, 29, .9);--line-soft: rgba(255, 255, 255, .14);--home: #ff7a18;--home-soft: #ffc36f;--away: #38a9ff;--away-soft: #9ed8ff;--accent: #f6df81;--good: #72f0d0;--text-main: #f4f8fc;--text-dim: rgba(235, 242, 249, .75);--shadow-lg: 0 28px 50px rgba(0, 0, 0, .38)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;background:radial-gradient(circle at top left,rgba(39,82,114,.52),transparent 34%),radial-gradient(circle at bottom right,rgba(255,122,24,.18),transparent 28%),linear-gradient(150deg,#071018,#0d1f2b 45%,#13334b);color:var(--text-main)}body:before{content:"";position:fixed;inset:0;background:linear-gradient(90deg,transparent 0,transparent calc(50% - 1px),rgba(255,255,255,.03) calc(50% - 1px),rgba(255,255,255,.03) calc(50% + 1px),transparent calc(50% + 1px),transparent 100%);opacity:.8;pointer-events:none}.app-shell{position:relative;width:100vw;height:100vh;overflow:hidden}#gameCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}.top-bar{position:absolute;top:max(1rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:4;display:grid;grid-template-columns:minmax(7rem,9rem) minmax(13rem,17rem) minmax(7rem,9rem);align-items:center;gap:.9rem;width:min(56rem,calc(100vw - 2rem));animation:board-enter .65s ease both}.score-card,.center-board,.side-panel,.message-ribbon,.overlay-card,.home-card,.home-hero{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.score-card{border:1px solid var(--line-soft);border-radius:1.25rem;padding:.85rem 1rem;background:var(--bg-panel);box-shadow:var(--shadow-lg)}.score-card strong{display:block;font-size:clamp(2rem,4vw,2.8rem);line-height:1;margin-top:.2rem}.team-home strong{color:var(--home-soft)}.team-away strong{color:var(--away-soft)}.score-label,.mini-label,.eyebrow,.install-hint{color:var(--text-dim);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}.center-board{display:grid;grid-template-columns:.78fr 1fr 1fr;gap:.75rem;border-radius:1.25rem;padding:.75rem;background:#07121ddb;border:1px solid rgba(241,211,106,.16);box-shadow:var(--shadow-lg)}.clock-stack{padding:.65rem .8rem;border-radius:1rem;background:#ffffff0a}.clock-stack strong{display:block;font-size:clamp(1.1rem,2.4vw,1.7rem);margin-top:.12rem;white-space:nowrap}.stack-subtext{display:block;margin-top:.2rem;color:var(--text-dim);font-size:.82rem}.period-stack{border:1px solid rgba(56,169,255,.18);background:linear-gradient(135deg,#38a9ff29,#ffffff0a)}.clock-stack.accent{background:linear-gradient(135deg,#f1d36a3d,#ff7a1824);border:1px solid rgba(241,211,106,.18)}.pause-fab{position:absolute;top:max(1rem,env(safe-area-inset-top));left:max(1rem,env(safe-area-inset-left));z-index:5;min-width:5.2rem;padding:.8rem 1rem;border-radius:999px;background:#07121dc7;box-shadow:0 16px 30px #00000047}.message-ribbon{position:absolute;top:clamp(6rem,12vw,8.2rem);left:50%;transform:translate(-50%);z-index:4;width:min(36rem,calc(100vw - 2rem));padding:.8rem 1rem;border-radius:999px;text-align:center;background:#07121dc7;border:1px solid rgba(113,242,172,.16);box-shadow:0 18px 36px #00000047;animation:board-enter .8s ease both}.side-panel{position:absolute;top:max(1rem,env(safe-area-inset-top));right:max(1rem,env(safe-area-inset-right));z-index:4;width:min(23rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem - env(safe-area-inset-top));overflow:auto;padding:1rem;border-radius:1.7rem;background:linear-gradient(180deg,#08141fe0,#091622b8);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg);animation:panel-enter .8s ease both}.panel-block+.panel-block{margin-top:1rem}.hero-panel{padding:.25rem 0 .4rem}.hero-panel h1{margin:.2rem 0 .6rem;font-size:clamp(1.8rem,4vw,2.5rem);line-height:.95}.panel-copy,.overlay-copy,.home-hero p:last-child,.mode-description{margin:0;line-height:1.55;color:var(--text-dim)}.field-label{display:block;margin:.45rem 0;color:var(--text-dim);font-size:.9rem}select,button{font:inherit}select,button{border:1px solid rgba(255,255,255,.14);border-radius:1rem;background:#ffffff0f;color:var(--text-main)}select{width:100%;padding:.85rem 1rem;color-scheme:dark}select option{background:#101b2b;color:#f2f6fb}.button-row,.action-buttons{display:grid;gap:.65rem}.button-row{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:.8rem}.action-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}button{padding:.82rem .95rem;cursor:pointer;transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease}button:hover,button:focus-visible{transform:translateY(-1px);background:#ffffff1c;border-color:#ffffff47}button:active,button.active{transform:translateY(1px) scale(.98)}.primary,.install-button,.shoot,.mode-card.selected{background:linear-gradient(135deg,#ff7a18e6,#f1d36ac7);color:#0d1419;border-color:transparent;box-shadow:0 10px 24px #ff7a1847}.install-button{width:100%}.compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem 1rem}.compact-grid strong{display:block;margin-top:.18rem}.meter-block{display:grid;gap:.65rem}.meter-copy{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}.meter-copy strong{font-size:.95rem}.stamina-copy{margin-top:.2rem}.meter-track{position:relative;height:.95rem;border-radius:999px;overflow:hidden;background:#ffffff14;border:1px solid rgba(255,255,255,.08)}.meter-fill,.meter-window{position:absolute;top:0;bottom:0;border-radius:inherit}.meter-fill{left:0;width:100%;transform-origin:left center;transform:scaleX(0)}.meter-fill.shot{background:linear-gradient(90deg,#ff7a18f2,#f1d36af2)}.meter-fill.stamina-fill{background:linear-gradient(90deg,#71f2acf2,#38a9fff2)}.meter-window{border:1px solid rgba(113,242,172,.55);background:#71f2ac2e;box-shadow:inset 0 0 0 1px #71f2ac24}.instructions p{margin:.3rem 0;color:var(--text-dim)}.touch-layer{position:absolute;inset:auto 0 0;z-index:5;display:none;justify-content:space-between;align-items:end;gap:1rem;padding:1rem max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left))}.dpad{display:grid;grid-template-columns:repeat(3,4rem);grid-template-rows:repeat(3,4rem);gap:.45rem}.dpad button,.action-pad button{border-radius:1.1rem;background:#07121db3;box-shadow:0 12px 26px #00000047}.dpad button[data-action=up]{grid-column:2;grid-row:1}.dpad button[data-action=left]{grid-column:1;grid-row:2}.dpad button[data-action=right]{grid-column:3;grid-row:2}.dpad button[data-action=down]{grid-column:2;grid-row:3}.action-pad{display:grid;grid-template-columns:repeat(2,minmax(4.1rem,5rem));gap:.55rem}.action-pad .shoot{grid-column:span 2}.action-pad .sprint{color:var(--good);border-color:#71f2ac42}.overlay-shell,.home-screen{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .18s ease}.overlay-shell{background:#040a0f6b}.overlay-shell.visible,.home-screen.visible{opacity:1;pointer-events:auto}.overlay-card{width:min(28rem,calc(100vw - 1.5rem));padding:1.35rem;border-radius:1.6rem;background:linear-gradient(180deg,#08141ff2,#091622e0);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg)}.overlay-card h2{margin:.15rem 0 .55rem;font-size:clamp(1.7rem,4vw,2.25rem)}.overlay-actions{margin-top:1rem}.home-screen{z-index:9}.home-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 18% 18%,rgba(255,122,24,.22),transparent 26%),radial-gradient(circle at 78% 24%,rgba(56,169,255,.2),transparent 22%),linear-gradient(180deg,#050c12b8,#060e16f0)}.home-content{position:relative;display:grid;gap:1rem;width:min(74rem,calc(100vw - 1.5rem))}.home-hero{padding:1.25rem 1.35rem;border-radius:1.7rem;border:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,#ff7a1829,#07121dd1 44%,#38a9ff24);box-shadow:var(--shadow-lg)}.home-hero h2{margin:.15rem 0 .5rem;font-size:clamp(2rem,4.8vw,3.4rem);line-height:.95}.home-grid{display:grid;grid-template-columns:1.35fr .95fr .95fr;gap:1rem}.home-card{padding:1.1rem;border-radius:1.5rem;background:linear-gradient(180deg,#08141fe6,#091622d1);border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow-lg)}.mode-card-grid{display:grid;gap:.75rem;margin-top:.35rem}.mode-card{display:grid;gap:.25rem;padding:1rem;text-align:left}.mode-card strong{font-size:1rem}.mode-card span{color:var(--text-dim);font-size:.92rem}.mode-card.selected span{color:#0d1419b8}.mode-description{margin-top:.8rem}.theme-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-bottom:.8rem}.theme-preview span{height:.75rem;border-radius:999px;box-shadow:inset 0 0 0 1px #ffffff2e}.home-mode-meta{display:grid;gap:.8rem;margin-top:1rem}.home-mode-meta strong{display:block;margin-top:.16rem}.home-actions{grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr)}@keyframes board-enter{0%{opacity:0;transform:translate(-50%) translateY(-16px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes panel-enter{0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@media(pointer:coarse),(max-width:980px){.touch-layer{display:flex}.top-bar{width:calc(100vw - 1rem);gap:.5rem}.message-ribbon{top:clamp(6.7rem,15vw,7.6rem);width:calc(100vw - 1rem);border-radius:1.15rem}.side-panel{top:auto;bottom:11.5rem;left:.75rem;right:.75rem;width:auto;max-height:min(42vh,26rem);border-radius:1.4rem;padding:.9rem}.home-grid{grid-template-columns:1fr}.home-content{width:calc(100vw - 1rem)}.home-hero h2{font-size:2rem}}@media(max-width:720px){.top-bar{grid-template-columns:1fr}.score-card,.center-board{padding:.65rem .7rem;border-radius:1rem}.center-board,.compact-grid,.action-buttons,.button-row,.home-actions{grid-template-columns:1fr}.overlay-card,.home-card,.home-hero{border-radius:1.2rem}}.commentary-bar{position:fixed;left:50%;top:12.5rem;transform:translate(-50%);max-width:min(86vw,640px);padding:8px 18px;border-radius:999px;background:#0a0e1ad1;border:1px solid var(--accent, #f6df81);color:#f5f8ff;font-size:17px;font-weight:700;letter-spacing:.04em;text-align:center;pointer-events:none;z-index:40;animation:commentary-pop 3.2s ease forwards}.commentary-bar[data-tone=hot]{border-color:#ff7a18;color:#ffd6aa}.commentary-bar[data-tone=cool]{border-color:#38a9ff;color:#cfe9ff}@keyframes commentary-pop{0%{opacity:0;transform:translate(-50%) translateY(-8px) scale(.94)}8%{opacity:1;transform:translate(-50%) translateY(0) scale(1.02)}14%{transform:translate(-50%) scale(1)}78%{opacity:1}to{opacity:0}}@media(max-width:720px){.commentary-bar{top:10.8rem;font-size:14px;padding:6px 14px}}.power-panel-big{position:absolute;left:50%;bottom:90px;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:10px 18px;border-radius:16px;background:#080e1ad1;border:2px solid rgba(125,224,140,.55);box-shadow:0 0 20px #7de08c4d;z-index:40;pointer-events:none}.power-panel-big span{font-size:16px;font-weight:800;color:#9fe8ac;letter-spacing:.1em;white-space:nowrap}.big-track{width:min(46vw,440px);height:20px;border-radius:999px;background:#ffffff24;overflow:hidden}.big-fill{height:100%;width:100%;transform:scaleX(0);transform-origin:left;border-radius:999px;background:linear-gradient(90deg,#7de08c,#ffd24a 55%,#ff7a18);box-shadow:0 0 14px #ffd24ad9}.big-fill.full{background:linear-gradient(90deg,#ffd24a,#f54)}[hidden]{display:none!important}