html,body{margin:0}
[hidden]{display:none!important}
/* Layout: one column, scoreboard over a pixel pond-pitch, thumb controls underneath */
:root{--bg:#0f2a3a;--panel:#163a50;--ink:#f4f7ea;--muted:#9fc0c9;--pink:#ff6fae;--pinkd:#c23c7c;--toad:#8fbf4f;--toadd:#3f6420;--gold:#ffd23f;--line:#e6f4d2;--px:"Press Start 2P",ui-monospace,"Courier New",monospace;color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--px);padding-block:12px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;justify-content:center;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.game{position:relative;width:min(100%,760px);display:flex;flex-direction:column;gap:10px}
.hud{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:clamp(12px,3.6vw,20px)}
.team{display:flex;align-items:center;gap:10px}
.team b{font-size:1.6em;font-variant-numeric:tabular-nums}
.pink{color:var(--pink)}.toad{color:var(--toad)}
.lab{font-size:.55em;letter-spacing:.1em}
#clock{background:#0a1d28;border:2px solid var(--line);padding:6px 10px;font-size:.8em;min-width:6.5em;text-align:center}
#clock.gold{color:var(--gold);border-color:var(--gold)}
.stage{position:relative}
*,*::before,*::after{box-sizing:border-box}
.menu[hidden]{display:none}
canvas{display:block;width:100%;max-width:100%;aspect-ratio:256/150;image-rendering:pixelated;border:3px solid var(--line);touch-action:none;background:#17405a}
.banner{position:absolute;left:0;right:0;top:36%;text-align:center;font-size:clamp(18px,6vw,44px);color:var(--gold);text-shadow:3px 3px 0 #000;pointer-events:none;opacity:0}
.banner.show{animation:pop 1.4s steps(14) forwards}
.banner.pk{color:var(--pink)}.banner.td{color:var(--toad)}
@keyframes pop{0%{transform:scale(.3);opacity:1}15%{transform:scale(1.15);opacity:1}25%{transform:scale(1);opacity:1}80%{opacity:1}100%{opacity:0}}
.ctrl{display:flex;justify-content:space-between;align-items:center;gap:12px}
.joy{width:min(34vw,150px);aspect-ratio:1;border-radius:50%;background:#0a1d28;border:3px solid var(--line);position:relative;touch-action:none;flex:none}
.knob{position:absolute;left:30%;top:30%;width:40%;height:40%;border-radius:50%;background:var(--pink);box-shadow:inset -4px -4px 0 var(--pinkd);pointer-events:none}
.kick{width:min(32vw,140px);aspect-ratio:1;border-radius:50%;font:inherit;font-size:clamp(12px,3.6vw,18px);color:#1a1405;background:var(--gold);border:3px solid var(--line);box-shadow:0 6px 0 #a8801a;touch-action:none;cursor:pointer;flex:none}
.kick.on{transform:translateY(4px);box-shadow:0 2px 0 #a8801a}
.kick:focus-visible,.small:focus-visible{outline:3px solid #fff;outline-offset:3px}
.mid{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:8px;color:var(--muted);text-align:center;line-height:1.8;flex:1;min-width:0}
.small{font:inherit;font-size:9px;background:none;color:var(--muted);border:2px solid var(--muted);padding:6px 8px;cursor:pointer}
.menu{position:absolute;inset:0;background:rgba(10,29,40,.9);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:16px;overflow:auto;z-index:2}
.menu h2{margin:0;font-size:clamp(22px,7vw,48px);color:var(--pink);text-shadow:4px 4px 0 var(--toadd);text-wrap:balance;line-height:1.2}
.menu p{margin:0;font-size:clamp(9px,2.6vw,12px);line-height:1.9;max-width:46ch}
.diff{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.diff button{font:inherit;font-size:clamp(10px,3vw,14px);padding:14px;background:var(--panel);color:var(--ink);border:3px solid var(--line);cursor:pointer;box-shadow:0 4px 0 #000}
.diff button:hover,.diff button:focus-visible{background:var(--pink);color:#1a0b12;outline:none}
.diff small{display:block;font-size:.6em;margin-top:6px;color:var(--muted)}
.diff button:hover small,.diff button:focus-visible small{color:#1a0b12}
.how{color:var(--muted)}
.back{color:var(--muted);font-size:9px}