:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#f4fff4;background:#0a2f0f;flex-direction:column;min-height:100vh;margin:0;padding:0;font-family:system-ui,sans-serif;display:flex}header{padding:.75rem 1rem}header nav a{color:#9dc49d;font-size:.8rem;text-decoration:none}header nav a:hover{text-decoration:underline}main{flex:1;justify-content:center;align-items:center;padding:1rem;display:flex}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pitch{aspect-ratio:4/5;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;background:radial-gradient(at 50% 18%,#ffffff12,#0000 55%),repeating-linear-gradient(0deg,#1d6b23 0 10%,#195e1f 10% 20%);border-radius:.6rem;width:min(92vw,620px);position:relative;overflow:hidden}.pitch:after{content:"";aspect-ratio:2;border-top:2px solid #ffffff2e;border-radius:50% 50% 0 0/100% 100% 0 0;width:46%;position:absolute;bottom:4%;left:50%;transform:translate(-50%)}.goal{box-sizing:border-box;border:.4rem solid #f8fff8;border-bottom:none;border-radius:.2rem .2rem 0 0;width:76%;height:25%;position:absolute;top:5%;left:12%}.net{background:repeating-linear-gradient(90deg,#ffffff29 0 1px,#0000 1px 7%),repeating-linear-gradient(0deg,#ffffff29 0 1px,#0000 1px 13%),linear-gradient(#00000047,#0000001a);position:absolute;inset:0}.goal.scored{animation:.5s ease-out net-ripple}@keyframes net-ripple{0%{box-shadow:inset 0 0 #4ade80bf}40%{box-shadow:inset 0 0 3rem .6rem #4ade808c}to{box-shadow:inset 0 0 #4ade8000}}.keeper{will-change:left, transform;width:24%;height:62%;transition:left var(--flight,.34s) cubic-bezier(.22, .68, .24, 1), transform var(--flight,.34s) cubic-bezier(.22, .68, .24, 1);position:absolute;bottom:0}.keeper-body{background:linear-gradient(#ffd95e,#f5a623);border-radius:.35rem .35rem .15rem .15rem;position:absolute;inset:0;box-shadow:0 0 0 2px #00000038}.keeper-body:before,.keeper-body:after{content:"";width:26%;height:16%;transition:transform var(--flight,.34s) cubic-bezier(.22, .68, .24, 1);background:#ffd95e;border-radius:.2rem;position:absolute;top:12%}.keeper-body:before{transform-origin:100%;left:-22%}.keeper-body:after{transform-origin:0;right:-22%}.keeper.pacing{transition:none}.keeper.diving .keeper-body:before{transform:rotate(-38deg)scaleX(1.5)}.keeper.diving .keeper-body:after{transform:rotate(38deg)scaleX(1.5)}.keeper.saved .keeper-body{background:linear-gradient(#fff,#ffe89a);box-shadow:0 0 1.4rem .3rem #ffe89ae6}.reticle{pointer-events:none;opacity:0;z-index:3;border:2px solid #ffffffe6;border-radius:50%;width:1.5rem;height:1.5rem;transition:opacity .2s;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.reticle:after{content:"";background:#ffffffe6;border-radius:50%;position:absolute;inset:42%}.reticle.visible{opacity:1}.reticle.armed{border-color:#ffd95e;animation:.55s ease-in-out infinite reticle-pulse;box-shadow:0 0 .7rem #ffd95ecc}.reticle.armed:after{background:#ffd95e}@keyframes reticle-pulse{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-50%)scale(1.35)}}.ball{aspect-ratio:1;z-index:2;will-change:transform;background:radial-gradient(circle at 34% 28%,#fff,#dcdcdc 56%,#a8a8a8);border-radius:50%;width:7%;position:absolute;top:88%;left:50%;transform:translate(-50%,-50%);box-shadow:0 .2rem .45rem #00000073}.power-meter{opacity:0;background:#00000059;border:1px solid #fff6;border-radius:999px;width:8%;height:34%;transition:opacity .18s;position:absolute;bottom:8%;right:5%;overflow:visible}.power-meter.charging{opacity:1}.power-zones{background:linear-gradient(0deg,#4b5563 0 22%,#22c55e 22% 95%,#ef4444 95% 100%);border-radius:999px;position:absolute;inset:0;overflow:hidden}.power-zones:after{content:"";background:linear-gradient(0deg,#0000 0 21.4%,#0000008c 21.4% 22.6%,#0000 22.6%),linear-gradient(0deg,#0000 0 94.4%,#0000008c 94.4% 95.6%,#0000 95.6%);position:absolute;inset:0}.power-marker{background:#fff;border:1.5px solid #000c;border-radius:1px;width:168%;height:.4rem;transition:background 90ms linear;position:absolute;bottom:0%;left:-34%;box-shadow:0 0 .45rem #000000bf}.power-marker:before{content:"";filter:drop-shadow(0 0 1.5px #000000e6);border-top:.34rem solid #0000;border-bottom:.34rem solid #0000;border-left:.42rem solid #fff;position:absolute;top:50%;left:-.42rem;transform:translateY(-50%)}.power-marker.zone-weak,.power-marker.zone-weak:before{background:#e2e8f0;border-left-color:#e2e8f0}.power-marker.zone-over,.power-marker.zone-over:before{background:#fee2e2;border-left-color:#fee2e2}.scoreboard{z-index:4;background:#061a088c;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:.55rem;padding:.45rem .6rem;display:flex;position:absolute;bottom:5%;left:4%}.scoreboard .pip{box-sizing:border-box;background:0 0;border:2px solid #ffffff73;border-radius:50%;flex:none;width:.7rem;height:.7rem;transition:background .25s,border-color .25s}.scoreboard .pip--goal{background:#4ade80;border-color:#4ade80}.scoreboard .pip--save{background:#facc15;border-color:#facc15}.scoreboard .pip--miss{background:#ef4444;border-color:#ef4444}.end-screen{z-index:5;cursor:pointer;background:#041404e0;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;display:flex;position:absolute;inset:0}.end-screen.hidden{display:none}.end-screen .tally{letter-spacing:.02em;font-size:clamp(2.5rem,12vw,4rem);font-weight:800}.end-screen .replay{border:2.5px solid #f4fff4;border-radius:50%;width:3rem;height:3rem;animation:1.3s ease-in-out infinite pulse;position:relative}.end-screen .replay:before{content:"";border-top:.35rem solid #0000;border-bottom:.35rem solid #0000;border-left:.5rem solid #f4fff4;position:absolute;top:-.2rem;right:.15rem}@keyframes pulse{0%,to{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}@media (prefers-reduced-motion:reduce){.reticle.armed,.end-screen .replay{animation:none}}
