:root{color-scheme:dark;--mint:#6bffb5;--ink:#08121e;--muted:#a4b2bd}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:#fff;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:4px}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}#game{max-width:660px;margin:auto;min-height:100vh;min-height:100dvh;padding:max(20px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;justify-content:center}.card{width:100%;max-width:440px;margin:auto;text-align:center;padding:25px 8px}h1{font-size:clamp(30px,8vw,48px);line-height:1.05;letter-spacing:-1.5px;margin:22px 0}h1 span,.accent{color:var(--mint)}h2{font-size:27px;line-height:1.2}p{color:var(--muted);line-height:1.6;font-size:14px}.badge{margin:0 auto 22px;background:var(--mint);color:var(--ink);width:64px;height:72px;display:grid;place-items:center;font-size:27px;font-weight:900;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}.primary,.secondary{width:100%;min-height:54px;border-radius:9px;padding:14px;margin:7px 0;font-size:13px;letter-spacing:1px;font-weight:800}.primary{background:var(--mint);color:var(--ink);border:1px solid var(--mint)}.secondary{background:#112332;color:white;border:1px solid #304655}.quiet{background:none;border:0;color:var(--muted);padding:14px;font-size:12px;min-height:44px}.note{font-size:12px}.error{color:#ffb5a5;min-height:1.5em;white-space:pre-wrap}label{text-align:left;display:block;font-size:12px;color:var(--muted);margin:18px 0 8px}input,select{display:block;width:100%;min-height:54px;padding:13px;color:#fff;background:#152534;border:1px solid #456072;border-radius:8px;font-size:16px}input::placeholder{color:#a4b2bd}.small-heading{letter-spacing:2px;font-size:10px;color:var(--mint);font-weight:800}.room-code{font-size:44px;letter-spacing:6px;color:var(--mint);margin:20px 0}.profile{font-size:24px;overflow-wrap:anywhere}.spinner{width:58px;height:58px;border-radius:50%;border:3px solid #233945;border-top-color:var(--mint);animation:spin 1s linear infinite;margin:30px auto}.counter{font-size:40px;font-weight:800;color:var(--mint)}.topbar{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px;gap:12px;margin-bottom:15px}.topbar strong{color:var(--mint)}.scoreboard{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;text-align:center;padding:12px 0}.player-name{font-size:clamp(12px,3.3vw,17px);overflow-wrap:anywhere}.flag{font-size:27px;display:block;margin-bottom:6px}.score{font-size:36px;font-weight:800;white-space:nowrap}.marks{color:var(--mint);letter-spacing:3px;font-size:15px;line-height:1.8;min-height:28px}.match-caption{text-align:center;min-height:24px;font-size:12px;color:var(--muted);margin:8px 0}.match-clock{font-size:24px;font-weight:800;text-align:center;margin:10px 0 15px;color:var(--mint)}.arena{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.05;background:radial-gradient(ellipse at 50% 0,#314c58,#101d2c 65%);border-radius:12px;border:1px solid #34505b}.arena:before,.arena:after{content:'';position:absolute;top:11%;height:5px;width:26%;background:#e1ffe9;box-shadow:0 0 18px 5px #c3fce388;transform:rotate(7deg);left:3%}.arena:after{left:auto;right:3%;transform:rotate(-7deg)}.crowd{position:absolute;top:18%;width:100%;height:33%;background:radial-gradient(#8cb9b8 1px,transparent 2px);background-size:8px 7px;opacity:.4}.turf{position:absolute;bottom:0;height:55%;width:100%;background:repeating-linear-gradient(0deg,#194b33 0 30px,#1c553a 30px 60px)}.turf:before{content:'';position:absolute;left:15%;top:12%;width:70%;height:70%;border:2px solid #cfefd355;transform:perspective(200px) rotateX(40deg)}.net{position:absolute;top:24%;left:8%;height:34%;width:84%;border:4px solid #e3eeee;border-bottom-width:2px;background:repeating-linear-gradient(90deg,transparent 0 15px,#ffffff28 16px 17px),repeating-linear-gradient(0deg,transparent 0 15px,#ffffff28 16px 17px);box-shadow:0 14px 20px #0005}.keeper{position:absolute;left:50%;top:47%;width:20px;height:53px;background:#f5bc58;border-radius:10px 10px 3px 3px;transform:translate(-50%,-50%);z-index:2;transition:left .55s ease-out,top .55s ease-out,rotate .55s;pointer-events:none}.keeper:before{content:'';position:absolute;top:-17px;left:2px;width:16px;height:16px;background:#bb9677;border-radius:50%}.keeper:after{content:'';position:absolute;top:7px;left:-20px;width:60px;height:9px;background:#f5bc58;border-radius:8px}.match-ball{position:absolute;left:50%;top:86%;font-size:30px;transform:translate(-50%,-50%);z-index:4;filter:drop-shadow(3px 6px 3px #0008);pointer-events:none}.match-ball.flying{transition:left .65s ease-out,top .65s ease-out,font-size .65s; font-size:19px}.zone{position:absolute;z-index:3;min-width:56px;min-height:48px;border-radius:10px;color:#e9fff2;border:1px solid #6bffb599;background:#08121e80;font-size:11px;font-weight:800;transform:translate(-50%,-50%)}.zone[data-zone='0']{left:22%;top:32%}.zone[data-zone='1']{left:22%;top:51%}.zone[data-zone='2']{left:50%;top:42%}.zone[data-zone='3']{left:78%;top:32%}.zone[data-zone='4']{left:78%;top:51%}.zone.picked{background:var(--mint);color:var(--ink)}.zone:disabled{opacity:.5}.arena.resolving .zone{visibility:hidden}.result-banner{position:absolute;bottom:14%;left:0;width:100%;text-align:center;font-size:36px;font-weight:900;color:#fff;text-shadow:0 2px 12px #000;z-index:5;pointer-events:none}.result-banner:empty{display:none}.versus{display:flex;align-items:center;justify-content:space-around;gap:16px;margin:36px 0}.versus>div{flex:1;overflow-wrap:anywhere}.versus b{font-size:25px;color:var(--mint)}.versus .flag{font-size:44px}.board{width:100%;border-collapse:collapse;text-align:left;font-size:13px}.board td,.board th{padding:12px 6px;border-bottom:1px solid #29404e}.board td:last-child,.board th:last-child{text-align:right}.board .you{background:#6bffb519;color:var(--mint)}.divider{margin:25px 0;border:0;border-top:1px solid #29404e}a{color:var(--mint)}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:600px){.arena{max-height:430px;aspect-ratio:1.35}.card{padding-block:40px}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}.keeper,.match-ball.flying{transition:none}}