:root{--ink:#f3f6f4;--ink-2:#f3f6f4c7;--ink-3:#f3f6f48f;--red:#ff5a63;--blue:#5a9bff;--sun:#ffe066;--cyan:#7ff0ff;--green:#5ee37a;--hot:#ff5a3c;--glass:#0a141094;--glass-strong:#08120dd1;--line:#ffffff26;--sans:"Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{height:100%;color:var(--ink);font:400 15px/1.4 var(--sans);-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;background:#2f5a2a;margin:0;overflow:hidden}#scene{width:100%;height:100%;display:block;position:fixed;inset:0}.mono{font-variant-numeric:tabular-nums}.muted{color:var(--ink-3)}.small{font-size:13px}.red-t{color:var(--red)}.blue-t{color:var(--blue)}.sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}kbd{text-align:center;min-width:1.7em;font:600 12px var(--sans);background:#ffffff1a;border:1px solid #ffffff4d;border-bottom-width:3px;border-radius:6px;padding:2px 6px;display:inline-block}button,input{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--sun);outline-offset:2px}.glass{background:var(--glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px #00000040}.primary,.secondary,.ghost-btn{text-transform:uppercase;letter-spacing:.04em;border-radius:12px;padding:11px 26px;font-size:18px;font-weight:700}.primary{background:var(--sun);color:#1a1a1a;border:0;box-shadow:0 4px #b99a2c}.primary:hover{filter:brightness(1.06)}.primary:active{transform:translateY(2px);box-shadow:0 2px #b99a2c}.secondary{background:#ffffff1a;border:1px solid #ffffff59;box-shadow:0 4px #0000004d}.secondary:active{transform:translateY(2px);box-shadow:0 2px #0000004d}.ghost-btn{color:var(--ink-2);background:0 0;border:0;font-size:15px}.ghost-btn:hover{color:var(--ink)}.col-btns{flex-direction:column;align-items:center;gap:10px;margin-top:10px;display:flex}.row-btns{flex-wrap:wrap;justify-content:center;gap:10px;display:flex}.overlay{padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l));z-index:20;touch-action:pan-y;background:#08100c61;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.overlay.show{display:flex}.card{text-align:left;width:min(640px,100%);max-height:100%;padding:24px 26px;position:relative;overflow:auto}.card.small{text-align:center;width:min(400px,100%)}h1{font:700 clamp(56px, 11vw, 110px) / .9 var(--sans);letter-spacing:.01em;text-transform:uppercase;color:var(--sun);text-shadow:0 5px #00000059,0 0 40px #00000059;margin:0}h2{font:700 30px var(--sans);text-transform:uppercase;text-wrap:balance;margin:0 0 12px}h3{font:600 18px var(--sans);text-transform:uppercase;letter-spacing:.04em;margin:18px 0 6px}.tag{color:var(--ink);text-shadow:0 2px 8px #0009;margin:8px 0 0;font-size:19px}.back{color:var(--ink-2);background:0 0;border:0;font-size:16px;position:absolute;top:14px;right:16px}.back:hover{color:var(--ink)}#home{background:linear-gradient(90deg,#06120ab8,#06120a33 70%);justify-content:flex-start}.home{flex-direction:column;gap:18px;width:min(460px,100%);max-height:100%;padding-left:clamp(0px,4vw,40px);display:flex;overflow:auto}.menu{flex-direction:column;gap:10px;display:flex}.big-btn{border:1px solid var(--line);background:var(--glass-strong);text-align:left;border-radius:14px;flex-direction:column;align-items:flex-start;padding:12px 18px;transition:transform .1s,background .15s;display:flex;box-shadow:0 4px #00000059}.big-btn b{text-transform:uppercase;letter-spacing:.03em;font-size:22px}.big-btn span{color:var(--ink-3);font-size:14px}.big-btn:hover{transform:translate(4px)}.big-btn.primary{background:var(--sun);color:#1a1a1a;border:0;box-shadow:0 4px #b99a2c}.big-btn.primary span{color:#0009}.big-btn.ghost{background:#0a141073}.settings{flex-direction:column;gap:8px;padding:12px 14px;display:flex}.set{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.set .k{text-transform:uppercase;letter-spacing:.1em;width:72px;color:var(--ink-3);font-size:12px}.set-desc{margin:-2px 0 2px 84px;font-size:13px}.seg{border:1px solid var(--line);border-radius:10px;flex:1;min-width:0;display:flex;overflow:hidden}.seg button{color:var(--ink-2);border:0;border-right:1px solid var(--line);background:0 0;flex:1;padding:6px 8px;font-weight:600}.seg button:last-child{border-right:0}.seg button[aria-checked=true]{background:var(--sun);color:#1a1a1a}.mp-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;display:grid}.mp-box{border:1px solid var(--line);background:#ffffff0a;border-radius:12px;flex-direction:column;gap:10px;min-width:0;padding:14px;display:flex}.mp-box h3,.mp-box p{margin:0}.join-row{gap:8px;display:flex}.join-row input{letter-spacing:.2em;text-transform:uppercase;-webkit-user-select:text;user-select:text;background:#0000004d;border:1px solid #ffffff4d;border-radius:10px;flex:1;min-width:0;padding:9px 12px;font-size:20px;font-weight:600}.mp-status{min-height:1.4em;color:var(--ink-2)}.mp-status.bad{color:#ffb3b8}.touch-only{display:none}body.touch .touch-only{display:block}body.touch #local-box .secondary{opacity:.4;pointer-events:none}.code{font:700 64px/1 var(--sans);letter-spacing:.18em;color:var(--sun);margin:8px 0}#lobby-link{-webkit-user-select:all;user-select:all;word-break:break-all}.spinner{border:3px solid #fff3;border-top-color:var(--sun);border-radius:50%;width:26px;height:26px;margin:12px auto;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(1turn)}}.keys{gap:8px;margin:0 0 6px;padding:0;list-style:none;display:grid}.keys li{grid-template-columns:118px 1fr;align-items:start;gap:10px;display:grid}.keys li .k{gap:3px;font-weight:400;display:flex}.keys li span{color:var(--ink-2)}#howto h3+p{margin-top:0}.final{font:700 34px var(--sans);margin:4px 0}.verdict{color:var(--ink-2)}#hud{pointer-events:none;opacity:0;z-index:5;transition:opacity .4s;position:fixed;inset:0}body.playing #hud{opacity:1}#hud button{pointer-events:auto}.scorebug{top:calc(12px + var(--safe-t));left:calc(12px + var(--safe-l));align-items:center;gap:12px;padding:6px 14px;font-size:17px;font-weight:600;display:flex;position:absolute}.scorebug .team{letter-spacing:.05em;align-items:center;gap:6px;display:flex}.scorebug .team i{border-radius:3px;width:10px;height:18px;display:inline-block}.scorebug .red i{background:var(--red)}.scorebug .blue i{background:var(--blue)}.scorebug .score{gap:6px;font-size:24px;font-weight:700;display:flex}.scorebug .score em{color:var(--ink-3);font-style:normal}.scorebug .clock{border-left:1px solid var(--line);color:var(--sun);min-width:44px;padding-left:12px}.pause-btn{top:calc(12px + var(--safe-t));right:calc(12px + var(--safe-r));letter-spacing:-.05em;width:44px;height:44px;font-weight:700;position:absolute}.you{width:200px;padding:8px 12px}.you-name{align-items:baseline;gap:8px;display:flex}.you .who{text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);font-size:12px}.you .num{color:var(--sun);font-size:24px;font-weight:700}.side1 .you .num{color:var(--cyan)}.you .role{color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.stamina .bar{background:#ffffff1f;border-radius:4px;height:7px;overflow:hidden}.stamina .fill{background:var(--green);width:100%;height:100%;transition:width .1s linear}.stamina .fill.low{background:var(--hot)}.person .you{bottom:calc(44px + var(--safe-b));left:calc(12px + var(--safe-l));position:absolute}.person .shot{left:50%;bottom:calc(44px + var(--safe-b));position:absolute}.people.n2 .side1 .you{left:auto;right:calc(12px + var(--safe-r))}.people.n2 .side0 .shot{left:31%}.people.n2 .side1 .shot{left:69%}.people.n2 .shot{width:min(380px,36vw)}.people.n2~.radar{display:none}.shot{opacity:0;width:min(460px,100vw - 32px);padding:10px 14px 8px;transition:opacity .2s,transform .2s;transform:translate(-50%,16px)}.shot.visible{opacity:1;transform:translate(-50%)}.shot.meters-off .meter{display:none}.meter{grid-template-columns:50px 1fr 54px;align-items:center;gap:8px;margin-bottom:6px;display:grid}.meter .lbl{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-size:12px}.meter .pct{text-align:right;font-weight:600}.meter .bar{background:#ffffff1f;border-radius:8px;height:16px;position:relative;overflow:hidden}.power .fill{background:linear-gradient(90deg, #7fd48a, var(--sun));width:0;position:absolute;inset:0 auto 0 0}.power .fill.hot{background:linear-gradient(90deg, #7fd48a, var(--sun) 70%, var(--hot))}.power .over{background:repeating-linear-gradient(135deg,#ff5a3c59 0 6px,#ff5a3c26 6px 12px);position:absolute;top:0;bottom:0}.power .tick100{background:#fff;width:2px;position:absolute;top:-2px;bottom:-2px}.strike .band{background:#5ee37a8c;position:absolute;top:0;bottom:0}.strike .pure{background:var(--sun);position:absolute;top:0;bottom:0}.strike .needle{background:#fff;width:4px;margin-left:-2px;position:absolute;top:-2px;bottom:-2px;box-shadow:0 0 6px #fff}.strike .needle.in{background:var(--green);box-shadow:0 0 10px var(--green)}.strike .mark{background:#ff3b8a;width:3px;margin-left:-1.5px;position:absolute;top:-2px;bottom:-2px}.callout{text-align:center;letter-spacing:.02em;font-size:16px;font-weight:600}.callout[data-tone=hot]{color:var(--hot)}.callout[data-tone=now]{color:var(--green)}.callout[data-tone=pure]{color:var(--sun);font-size:20px}.callout[data-tone=bad]{color:#ff9aa0}.banner{text-align:center;opacity:0;transition:opacity .25s,transform .25s;position:absolute;top:22%;left:16px;right:16px;transform:scale(.85)}.banner.show{opacity:1;animation:.35s ease-out pop;transform:scale(1)}.banner .big{font:700 64px/1 var(--sans);text-transform:uppercase;letter-spacing:.03em;text-shadow:0 4px #00000059,0 0 30px #0000004d}.banner .small{text-shadow:0 2px 6px #0009;margin-top:6px;font-size:20px;font-weight:600}.banner[data-tone=pure] .big{color:var(--sun);font-size:96px}.banner[data-tone=bad] .big{color:#ffb3b8}.banner[data-tone=soft] .big{font-size:40px}@keyframes pop{0%{transform:scale(1.4)}to{transform:scale(1)}}.radar{right:calc(12px + var(--safe-r));bottom:calc(44px + var(--safe-b));border-radius:10px;width:180px;height:116px;position:absolute}.help{left:8px;right:8px;bottom:calc(10px + var(--safe-b));text-align:center;color:var(--ink-2);text-shadow:0 1px 3px #0009;font-size:13px;position:absolute}.help kbd{border-bottom-width:2px;padding:0 5px;font-size:11px}#touch{display:none}body.show-touch.playing #touch{display:block}.stick-zone{z-index:6;touch-action:none;width:45vw;height:70vh;position:fixed;bottom:0;left:0}.stick{pointer-events:none;background:#0000002e;border:2px solid #ffffff59;border-radius:50%;width:120px;height:120px;margin:-60px 0 0 -60px;display:none;position:fixed}.stick.on{display:block}.knob{background:#ffffff8c;border-radius:50%;width:54px;height:54px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.pad{right:calc(14px + var(--safe-r));bottom:calc(14px + var(--safe-b));z-index:6;touch-action:none;width:250px;height:210px;position:fixed}.tbtn{color:#fff;touch-action:none;background:#0a141080;border:2px solid #ffffff73;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;line-height:1;transition:opacity .15s,transform 80ms;display:flex;position:absolute}.tbtn b{text-transform:uppercase;letter-spacing:.04em;font-size:14px}.tbtn small{opacity:.75;margin-top:3px;font-size:9px}.tbtn.on{background:#ffe0668c;transform:scale(.92)}.tbtn.shoot{background:#ff5a3c73;width:96px;height:96px;bottom:0;right:0}.tbtn.shoot b{font-size:18px}.tbtn.pass{width:70px;height:70px;bottom:0;right:104px}.tbtn.loft{width:64px;height:64px;bottom:104px;right:18px}.tbtn.slide{width:64px;height:64px;bottom:80px;right:100px}.tbtn.sprint{width:60px;height:60px;bottom:6px;right:180px}.tbtn.switch{width:56px;height:56px;bottom:80px;right:172px}.pad.attacking .slide,.pad.attacking .switch,.pad.defending .shoot,.pad.defending .pass,.pad.defending .loft{opacity:.3}#rotate{left:50%;bottom:calc(236px + var(--safe-b));z-index:7;background:var(--glass-strong);white-space:nowrap;pointer-events:none;border-radius:999px;padding:6px 12px;font-size:13px;display:none;position:fixed;transform:translate(-50%)}@media (orientation:portrait){body.touch.playing #rotate{display:block}}body.touch .help,body.touch .radar{display:none}body.touch .person .you{bottom:auto;top:calc(58px + var(--safe-t));width:160px;padding:6px 10px}body.touch .person .shot{bottom:auto;left:auto;right:calc(66px + var(--safe-r));top:calc(10px + var(--safe-t));width:min(360px,100vw - 340px);min-width:240px;padding:6px 10px 4px;transform:translateY(-10px)}body.touch .person .shot.visible{transform:none}body.touch .meter{grid-template-columns:42px 1fr 40px;gap:6px;margin-bottom:4px}body.touch .meter .bar{height:13px}body.touch .callout{font-size:14px}body.touch .banner{top:30%}@media (max-width:760px),(max-height:480px){.scorebug{gap:8px;padding:4px 10px;font-size:14px}.scorebug .score{font-size:20px}.banner .big{font-size:44px}.banner[data-tone=pure] .big{font-size:64px}.banner .small{font-size:16px}.card{padding:18px}.keys li{grid-template-columns:1fr;gap:2px}.home{gap:12px}.big-btn{padding:9px 14px}.big-btn b{font-size:18px}.code{font-size:48px}}@media (max-height:480px){h1{font-size:52px}.tag{font-size:15px}.big-btn span,.set-desc{display:none}}@media (max-width:600px){body.touch .person .shot{top:calc(100px + var(--safe-t));width:calc(100vw - 32px);min-width:0;right:16px}.set-desc{margin-left:0}}@media (prefers-reduced-motion:reduce){.banner.show{animation:none}.spinner{animation-duration:3s}}