:root{--ink:#f2f5f9;--ink-dim:#f2f5f99e;--gold:#f0c453;--home:#e04a52;--away:#cbe64a;--panel:#060a14b8;--panel-border:#f0c45359;--danger:#ff5964;color:var(--ink);font-synthesis:none;text-rendering:geometricprecision;background:#060a14;font-family:Avenir Next,Avenir,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px}#app{background:#060a14;position:relative}#game-canvas{touch-action:none;cursor:crosshair;outline:none;width:100vw;height:100vh;display:block}button{cursor:pointer;font-family:inherit}#scoreboard{top:max(14px, env(safe-area-inset-top));border:1px solid var(--panel-border);pointer-events:none;letter-spacing:.06em;background:linear-gradient(#0a101ee0,#060a14c7);border-radius:4px;align-items:stretch;gap:14px;padding:8px 18px;display:flex;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 10px 34px #00000073}.team{flex-direction:column;justify-content:center;gap:5px;min-width:118px;display:flex}.team-home{text-align:right;align-items:flex-end}.team-away{align-items:flex-start}.team-name{font-size:.72rem;font-weight:800}.team-home .team-name{color:var(--home)}.team-away .team-name{color:var(--away)}.pips{gap:5px;display:flex}.pip{background:0 0;border:1.5px solid #f2f5f966;border-radius:50%;width:13px;height:13px;transition:background .2s,border-color .2s}.pip.scored{background:#58d68d;border-color:#58d68d}.pip.missed{background:var(--danger);border-color:var(--danger)}.pip.current{border-color:var(--gold);box-shadow:0 0 8px #f0c453b3}.score-center{align-items:center;gap:8px;padding:0 6px 14px;display:flex;position:relative}.score-digit{font-variant-numeric:tabular-nums;text-align:center;min-width:1.25ch;font-size:1.9rem;font-weight:900}.score-sep{color:var(--ink-dim);font-size:1.3rem}#round-badge{white-space:nowrap;color:#0a0e18;background:var(--gold);letter-spacing:.14em;border-radius:2px;padding:2px 10px;font-size:.62rem;font-weight:800;position:absolute;bottom:-4px;left:50%;transform:translate(-50%)}#role-badge{top:calc(max(14px, env(safe-area-inset-top)) + 86px);letter-spacing:.22em;background:var(--panel);border:1px solid var(--panel-border);pointer-events:none;border-radius:2px;padding:6px 20px;font-size:.82rem;font-weight:900;position:absolute;left:50%;transform:translate(-50%)}#role-badge.kicking{color:var(--home);border-color:#e04a528c}#role-badge.saving{color:var(--away);border-color:#cbe64a8c}#instruction-strip{bottom:max(22px, env(safe-area-inset-bottom));letter-spacing:.18em;color:var(--ink-dim);background:var(--panel);border-top:2px solid var(--gold);white-space:nowrap;pointer-events:none;padding:8px 22px;font-size:.74rem;font-weight:700;position:absolute;left:50%;transform:translate(-50%)}#power-meter{left:max(26px, env(safe-area-inset-left));border:1px solid var(--panel-border);background:var(--panel);border-radius:3px;width:26px;height:34vh;min-height:180px;position:absolute;bottom:18vh;overflow:hidden}#power-fill{background:linear-gradient(#ff5964 0%,#f0c453 40%,#58d68d 100%);height:0%;position:absolute;bottom:0;left:0;right:0}.power-ticks{background:repeating-linear-gradient(#0000 0 calc(10% - 1px),#060a14a6 calc(10% - 1px) 10%);position:absolute;inset:0}.power-label{letter-spacing:.2em;color:var(--ink-dim);font-size:.6rem;font-weight:800;position:absolute;bottom:-22px;left:50%;transform:translate(-50%)}#outcome-banner{letter-spacing:.12em;color:var(--gold);text-shadow:0 0 24px #f0c4538c,0 6px 30px #000c;pointer-events:none;white-space:nowrap;font-size:clamp(2.6rem,9vw,5.4rem);font-weight:900;position:absolute;top:34%;left:50%;transform:translate(-50%,-50%)}#outcome-banner.negative{color:var(--danger);text-shadow:0 0 24px #ff596480,0 6px 30px #000c}#outcome-banner.neutral{color:var(--ink)}#icon-controls{top:max(14px, env(safe-area-inset-top));right:max(14px, env(safe-area-inset-right));gap:8px;display:flex;position:absolute}#icon-controls button{width:44px;height:44px;color:var(--ink);background:var(--panel);border:1px solid var(--panel-border);border-radius:4px;font-size:1.05rem;transition:background .15s,transform .1s}#icon-controls button:hover{background:#182034e6}#icon-controls button:active{transform:scale(.94)}#icon-controls button.off{color:#f2f5f94d;text-decoration:line-through}#title-screen,#pause-screen,#result-screen{z-index:10;text-align:center;background:radial-gradient(at 50% 30%,#1422428c,#0000 60%),linear-gradient(#04070ed1,#04070eeb);flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;display:flex;position:absolute;inset:0}#title-logo{filter:drop-shadow(0 12px 44px #f0c45340);mix-blend-mode:screen;width:min(520px,78vw)}#title-logo.missing{display:none}#title-fallback{letter-spacing:.14em;color:var(--gold);margin:0;font-size:clamp(2.4rem,8vw,4.6rem);font-weight:900;display:none}#title-logo.missing+#title-fallback{display:block}.title-sub{letter-spacing:.34em;color:var(--ink-dim);margin:0;font-size:.85rem;font-weight:700}.title-hint{letter-spacing:.12em;color:var(--ink-dim);max-width:420px;margin:4px 0 0;font-size:.72rem;line-height:1.7}#start-button,#rematch-button,#resume-button,#restart-button{letter-spacing:.22em;color:#0a0e18;background:linear-gradient(180deg, #ffd977, var(--gold));border:none;border-radius:3px;min-width:220px;padding:14px 40px;font-size:1rem;font-weight:900;transition:transform .12s,box-shadow .12s;box-shadow:0 8px 30px #f0c45359}#restart-button,#resume-button{min-width:260px}#restart-button{color:var(--ink);border:1px solid var(--panel-border);box-shadow:none;background:0 0}#start-button:hover,#rematch-button:hover,#resume-button:hover{transform:translateY(-2px);box-shadow:0 12px 38px #f0c45380}#start-button:active,#rematch-button:active,#resume-button:active{transform:translateY(0)scale(.97)}#pause-screen h2,#result-screen h2{letter-spacing:.2em;color:var(--ink);margin:0;font-size:clamp(2rem,7vw,3.6rem);font-weight:900}#result-screen h2.win{color:var(--gold);text-shadow:0 0 34px #f0c45380}#result-screen h2.lose{color:var(--danger)}#result-score{font-variant-numeric:tabular-nums;letter-spacing:.1em;margin:0;font-size:clamp(1.8rem,6vw,3rem);font-weight:900}#result-marks{flex-direction:column;align-items:center;gap:8px;display:flex}#result-marks .pips{justify-content:center}#result-marks .marks-row{letter-spacing:.1em;align-items:center;gap:10px;font-size:.72rem;font-weight:800;display:flex}#result-marks .marks-row .row-label{text-align:right;min-width:96px;color:var(--ink-dim)}#touch-controls{right:max(18px, env(safe-area-inset-right));bottom:max(112px, calc(env(safe-area-inset-bottom) + 98px));left:max(18px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:flex-end;display:none;position:absolute}#touch-stick{aspect-ratio:1;border:1px solid var(--panel-border);pointer-events:auto;touch-action:none;background:#060a1480;border-radius:50%;width:clamp(96px,24vw,128px);position:relative}#touch-knob{aspect-ratio:1;background:var(--gold);border-radius:50%;width:42%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 22px #f0c45373}#kick-button{aspect-ratio:1;border:1px solid var(--panel-border);color:#0a0e18;letter-spacing:.08em;background:linear-gradient(180deg, #ffd977, var(--gold));pointer-events:auto;touch-action:none;border-radius:50%;width:clamp(76px,19vw,100px);font-weight:900}@media (pointer:coarse){#touch-controls:not([hidden]){display:flex}}@media (width<=760px),(pointer:coarse){.team{min-width:84px}.team-name{font-size:.6rem}.score-digit{font-size:1.5rem}.pip{width:10px;height:10px}#scoreboard{gap:8px;max-width:94vw;padding:7px 12px}#icon-controls{top:calc(max(14px, env(safe-area-inset-top)) + 92px)}#role-badge{top:calc(max(14px, env(safe-area-inset-top)) + 74px);font-size:.7rem;left:18px;transform:none}#instruction-strip{letter-spacing:.1em;white-space:normal;text-align:center;max-width:92vw;font-size:.62rem}#power-meter{height:28vh;bottom:24vh}#icon-controls button{width:40px;height:40px}}