:root{color-scheme:dark;--ink:#08131f;--panel:#102334;--panel2:#172d3d;--white:#edf7f3;--muted:#9fb3bc;--line:#c9e3dd22;--cyan:#43dff5;--coral:#ff766c;--lime:#d6f674;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink);color:var(--white)}button,select,input{font:inherit}button{border:0;color:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--lime);outline-offset:3px}[hidden]{display:none!important}
#game-shell{height:100dvh;display:flex;flex-direction:column;background:#08131f}.topbar{height:64px;flex:0 0 auto;z-index:8;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));background:#0b1927f5;border-bottom:1px solid var(--line);box-shadow:0 8px 28px #0003}.home-link{justify-self:start;color:#b9cbd0;text-decoration:none;font-size:9px;font-weight:900;letter-spacing:.14em}.brand{display:flex;align-items:center;gap:10px;font-weight:950;font-size:12px;letter-spacing:.07em}.brand small{display:block;color:#8299a6;font-size:6px;letter-spacing:.18em;margin-top:3px}.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:8px;background:var(--lime);color:#14242a;font-size:24px;font-style:italic;letter-spacing:-.12em}.brand-mark span{font-size:13px}.scoreboard{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px}.scoreboard strong{font-size:31px;line-height:1;font-weight:950}.team-name{font-size:8px;font-weight:900;letter-spacing:.14em}.team-name.blue{color:var(--cyan)}.team-name.red{color:var(--coral)}.clock-wrap{min-width:66px;text-align:center;padding:5px 10px;border:1px solid var(--line);border-radius:8px;background:#112535}.clock-wrap span{display:block;font:900 14px ui-monospace,SFMono-Regular,Menlo,monospace}.clock-wrap small{display:block;color:#98acb3;font-size:6px;letter-spacing:.12em;margin-top:2px}.top-actions{justify-self:end;display:flex;gap:6px}.icon-button{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:#172b3b;border:1px solid #66829344;font-size:17px;font-weight:900}.icon-button.active{color:var(--lime);border-color:#d6f67466}
#stage{position:relative;flex:1;min-height:180px;overflow:hidden;background:#101e30;touch-action:none}#pitch{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#06101ccc 0,transparent 35%,transparent 73%,#06101c55 100%)}#stage-top{position:absolute;top:15px;left:19px;display:flex;align-items:center;gap:8px;font-size:8px;font-weight:900;letter-spacing:.13em;text-shadow:0 2px 7px #000;pointer-events:none}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px #d6f67499}.divider{color:#6e8793}#view-tag{color:#b8c9ce}.minimap-wrap{position:absolute;right:18px;top:13px;width:135px;padding:6px 8px 5px;border:1px solid #9dcabd2a;background:#071522a8;border-radius:11px;pointer-events:none;backdrop-filter:blur(8px)}#minimap{display:block;width:100%;height:auto}.minimap-wrap span{display:block;text-align:center;margin-top:2px;color:#aebdc0;font-size:6px;font-weight:800;letter-spacing:.11em}#player-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.player-label{position:absolute;transform:translate(-50%,-100%);padding:3px 6px;border-radius:5px;background:#071624b8;color:#edf7f3;font-size:7px;font-weight:850;letter-spacing:.035em;white-space:nowrap;box-shadow:0 3px 10px #0004}.player-label.you{background:var(--lime);color:#172527;font-size:8px}.player-label.friend{color:var(--cyan)}.player-label.enemy{color:#ffaaa4}#ball-arrow{position:absolute;pointer-events:none;transform:translate(-50%,-50%);padding:6px 9px;border:1px solid #d6f67475;border-radius:10px;background:#0b1b28dd;font-size:12px}#ball-arrow span{font-size:7px;font-weight:900;letter-spacing:.1em}#ticker{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);max-width:calc(100% - 30px);width:max-content;padding:8px 13px;border:1px solid #c6e0d32b;border-radius:9px;background:#071522dd;color:#eaf4ef;font-size:10px;font-weight:650;text-align:center;pointer-events:none;backdrop-filter:blur(8px)}#ticker.good{color:var(--lime);border-color:#d6f67466}#ticker.bad{color:#ffb6af;border-color:#ff766c66}#aim-badge{position:absolute;left:50%;bottom:54px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;padding:7px 8px 7px 11px;border:1px solid #d6f67466;border-radius:100px;background:#071522ee;box-shadow:0 8px 22px #0005}#aim-badge strong{font-size:8px;letter-spacing:.11em;color:var(--lime)}#aim-badge span{font-size:8px;color:#b3c5c8}#cancel-aim{padding:6px 8px;border-radius:100px;background:#273a46;font-size:7px;font-weight:900;letter-spacing:.08em}#announcement{position:absolute;top:22%;left:50%;transform:translateX(-50%);width:92%;text-align:center;pointer-events:none;text-shadow:0 5px 32px #0009}#announcement small{display:block;color:var(--lime);font-size:9px;font-weight:900;letter-spacing:.24em}#announcement strong{display:block;font-size:clamp(35px,7vw,82px);font-weight:950;font-style:italic;letter-spacing:-.06em;line-height:1.1}#skip-replay{pointer-events:auto;margin-top:9px;padding:9px 13px;border:1px solid #ffffff38;border-radius:100px;background:#0a1724d8;font-size:8px;font-weight:900;letter-spacing:.11em}#skip-replay span{color:var(--lime);margin-left:8px}.small-button{position:absolute;left:18px;bottom:17px;padding:8px 10px;border:1px solid #ffffff2b;border-radius:8px;background:#102638dd;font-size:8px;font-weight:900;letter-spacing:.08em}
.screen{position:absolute;inset:0;z-index:5}.idle #player-labels,.idle .minimap-wrap,.idle #stage-top,.idle #ticker,.idle #aim-badge,.idle #ball-arrow,.idle #controls{visibility:hidden}.idle #controls{display:none}.idle .scoreboard{opacity:.4}.idle .top-actions{visibility:hidden}#menu-screen{display:flex;align-items:center;padding:34px 6.5%;overflow-y:auto;touch-action:pan-y;background:linear-gradient(90deg,#071522f6 0%,#071522e6 38%,#07152267 70%,#07152217 100%),linear-gradient(0deg,#071522aa,transparent 50%)}.menu-copy{width:min(610px,67%)}.eyebrow{display:flex;align-items:center;gap:7px;color:var(--lime);font-size:8px;font-weight:900;letter-spacing:.18em}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:var(--lime)}h1{margin:19px 0 14px;font-size:clamp(50px,6vw,88px);font-weight:950;line-height:.91;letter-spacing:-.065em}h1 em{font-style:normal;color:var(--lime)}.menu-copy>p{max-width:520px;margin:0 0 15px;color:#b2c4c9;font-size:13px;line-height:1.55}.menu-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.menu-meta span{padding:5px 7px;border:1px solid #aec3d030;border-radius:5px;background:#0c20306e;font-size:7px;font-weight:850;letter-spacing:.08em}.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(145px,220px));gap:9px 11px;margin-bottom:14px}.setup-grid label{display:grid;gap:5px;color:#8fa6af;font-size:7px;font-weight:900;letter-spacing:.13em}select{height:39px;padding:8px 10px;border:1px solid #466174;border-radius:8px;background:#12283a;color:var(--white);font-size:11px}.start-buttons{display:flex;gap:9px}.primary,.secondary,.text-button{min-height:44px;border-radius:9px;font-size:10px;font-weight:900;letter-spacing:.045em}.primary{display:inline-flex;align-items:center;justify-content:center;gap:18px;padding:12px 21px;background:var(--lime);color:#15242a;box-shadow:0 6px 20px #0003}.primary:hover{background:#e4ff9c}.primary span{font-size:18px}.secondary{padding:11px 16px;border:1px solid #57748988;background:#132b3dc4}.menu-note{max-width:500px!important;margin-top:13px!important;font-size:9px!important;color:#849da7!important}.menu-note b{color:#c7d7d8}.menu-stamp{position:absolute;right:5.5%;bottom:10%;text-align:right}.menu-stamp>span{font-size:78px;font-weight:950;line-height:1;color:#ffffff0e;-webkit-text-stroke:1px #d4ead143;letter-spacing:-.07em}.menu-stamp div{font-size:21px;font-weight:900;line-height:1.05;letter-spacing:-.03em}.menu-stamp small{display:block;margin-top:10px;color:#9eb3b8;font-size:7px;font-weight:850;letter-spacing:.14em}.edition{position:absolute;bottom:15px;left:6.5%;color:#758f9a;font-size:6px;letter-spacing:.14em}#loading{z-index:10;display:grid;place-items:center;background:#0c1c2beb}.loading-badge{display:flex;flex-direction:column;align-items:center;gap:14px}.loading-badge strong{font-size:10px;letter-spacing:.2em}.loading-badge small{color:var(--muted);font-size:9px}.spinner{width:29px;height:29px;border:2px solid var(--line);border-top-color:var(--lime);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#error-screen{z-index:20;display:grid;place-items:center;background:#091725f4}.error-card{max-width:430px;padding:26px}.error-card p{color:#b8c7cb;font-size:12px;line-height:1.6}.fine{font-size:9px!important;color:#8197a1!important}
#controls{z-index:7;flex:0 0 auto;min-height:150px;padding:10px max(18px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));border-top:1px solid var(--line);background:linear-gradient(#122637,#0d1b29);touch-action:none}.controls-inner{max-width:1050px;margin:auto;display:grid;grid-template-columns:150px 1fr auto 150px;align-items:center;gap:18px}.joystick-wrap{justify-self:center}#joystick{position:relative;width:124px;height:124px;border:1px solid #66829377;border-radius:50%;background:radial-gradient(circle,#294555aa 0,#1c324288 58%,#38576a55 60%,#11263755 63%);box-shadow:inset 0 0 20px #0004;touch-action:none;user-select:none}#joystick.held{border-color:var(--cyan)}.joystick-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#bce7ed15;pointer-events:none}.joystick-cross.x{width:89%;height:1px}.joystick-cross.y{width:1px;height:89%}#joystick-thumb{position:absolute;left:50%;top:50%;width:47px;height:47px;transform:translate(-50%,-50%);border:1px solid #9db4bf88;border-radius:50%;background:linear-gradient(145deg,#416274,#233d50);box-shadow:0 6px 14px #0006,inset 0 1px 1px #fff3;pointer-events:none}.stick-label{position:absolute;left:0;right:0;bottom:9px;text-align:center;color:#93aab3;font-size:7px;font-weight:900;letter-spacing:.16em;pointer-events:none}.field-hint{text-align:center}.field-hint strong{display:block;color:var(--lime);font-size:9px;letter-spacing:.15em}.field-hint span{display:block;margin-top:6px;color:#90a8b2;font-size:8px}.utility-buttons{display:flex;gap:8px}.utility-buttons button{min-width:78px;min-height:53px;padding:7px 8px;border:1px solid #466274;border-radius:10px;background:#193246;font-size:9px;font-weight:900}.utility-buttons button b{display:inline-block;margin-right:4px;color:var(--cyan);font-size:15px}.utility-buttons small,.action small{display:block;margin-top:4px;color:#93aab5;font-size:5px;letter-spacing:.04em}.utility-buttons button.held{background:#245467;border-color:var(--cyan)}.action-pad{justify-self:center}.action{display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px;height:88px;border:3px solid #ffc1a8;border-radius:50%;background:var(--coral);color:#16242b;font-size:12px;font-weight:950;box-shadow:0 0 0 5px #ff766c12,0 8px 20px #0004}.action small{color:#3d3130}.action.held{filter:brightness(1.15);transform:scale(.96)}.keyboard-guide{text-align:center;margin-top:5px;color:#6f8995;font-size:7px}.keyboard-guide b{color:#b5c8cd;font-weight:800}.left-handed .controls-inner{grid-template-columns:150px auto 1fr 150px}.left-handed .joystick-wrap{grid-column:4}.left-handed .field-hint{grid-column:3;grid-row:1}.left-handed .utility-buttons{grid-column:2;grid-row:1}.left-handed .action-pad{grid-column:1;grid-row:1}
dialog{width:calc(100% - 28px);max-width:490px;max-height:92dvh;padding:25px;border:1px solid #476174;border-radius:18px;background:#122638;color:var(--white);box-shadow:0 26px 100px #000a;overflow-y:auto;touch-action:pan-y}dialog::backdrop{background:#030b13c8;backdrop-filter:blur(9px)}.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start}.dialog-heading h2{margin-bottom:8px}h2{margin:8px 0 16px;font-size:30px;line-height:1.05;letter-spacing:-.04em}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 0;border-bottom:1px solid #ffffff0d}.setting-row label{font-size:11px;font-weight:750}.setting-row label small{display:block;max-width:240px;margin-top:4px;color:#8fa6b0;font-size:8px;font-weight:450;line-height:1.45}.setting-row select{max-width:160px;height:35px;font-size:10px}.setting-row input[type=checkbox]{width:20px;height:20px;accent-color:var(--lime)}#tilt-panel{padding:12px;margin:11px 0;border:1px solid #4e697844;border-radius:11px;background:#0b1c2a}.tilt-actions{display:flex;gap:8px}.tilt-actions button{flex:1;min-height:38px;font-size:8px}#tilt-status{margin:9px 0;color:#9fb4bb;font-size:8px;line-height:1.4}.range-label{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#c6d3d5;font-size:9px}.range-label input{width:55%;accent-color:var(--lime)}.howto{margin:15px 0;color:#a9bac1;font-size:10px;line-height:1.55}.howto summary{cursor:pointer;color:#e0ebea;font-weight:750}.howto p{margin:9px 0}.full{width:100%}.dialog-bottom{display:flex;gap:10px;margin-top:10px}.dialog-bottom>*{flex:1}.text-button{padding:11px 5px;background:transparent;color:#a7bac0}#controls-card{text-align:center;max-width:570px}.control-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0 21px}.control-cards>div{padding:14px 10px;border:1px solid #ffffff16;border-radius:11px;background:#0b1d2b}.control-cards b{display:grid;place-items:center;width:23px;height:23px;margin:0 auto 10px;border-radius:50%;background:var(--lime);color:#16242a;font-size:10px}.control-cards strong{display:block;font-size:9px;letter-spacing:.1em}.control-cards span{display:block;margin-top:7px;color:#9db0b6;font-size:8px;line-height:1.4}#results-dialog{text-align:center;padding:32px 25px}#results-dialog .eyebrow{justify-content:center}#result-title{font-size:38px;margin-top:16px}#result-score{color:var(--lime);font-size:62px;font-weight:950;letter-spacing:-.06em}#result-subtitle{color:#a8bcc2;font-size:11px;line-height:1.5}.result-stats{display:flex;justify-content:space-around;margin:23px 0;padding:17px 0;border-block:1px solid var(--line)}.result-stats strong{display:block;font-size:24px}.result-stats span{display:block;margin-top:3px;color:#90a7b0;font-size:7px;font-weight:800;letter-spacing:.08em}.noscript{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:30px;background:#102334}
#rotate-note{position:absolute;z-index:15;inset:auto 10px 10px;pointer-events:none;padding:12px;border:1px solid #d6f67455;border-radius:10px;background:#091725ed;text-align:center}#rotate-note strong{display:block;color:var(--lime);font-size:10px;letter-spacing:.13em}#rotate-note span{display:block;margin-top:4px;color:#afc1c5;font-size:8px}
@media(max-width:760px){.topbar{height:53px;padding:6px 11px}.home-link{font-size:7px}.brand{font-size:8px;gap:6px}.brand-mark{width:28px;height:28px;font-size:19px}.brand small{font-size:5px}.scoreboard{gap:7px}.scoreboard strong{font-size:24px}.team-name{display:none}.clock-wrap{min-width:52px;padding:3px 6px}.clock-wrap span{font-size:11px}.clock-wrap small{font-size:5px}.icon-button{width:31px;height:31px;font-size:13px}.minimap-wrap{width:92px;top:9px;right:10px;padding:4px 5px}.minimap-wrap span{font-size:4px}#stage-top{left:11px;top:10px;font-size:6px}#view-tag,.divider{display:none}#ticker{bottom:91px;max-width:calc(100% - 280px);font-size:8px;padding:5px 8px}#aim-badge{bottom:116px}.menu-copy{width:min(430px,74%)}h1{font-size:51px;margin:10px 0 8px}.menu-copy>p{font-size:9px;margin-bottom:9px}.menu-meta{margin-bottom:8px}.setup-grid{grid-template-columns:repeat(2,minmax(125px,180px));gap:6px}.setup-grid label{font-size:6px}.setup-grid select{height:31px;padding:5px 7px;font-size:9px}.primary,.secondary{min-height:36px;padding:8px 13px;font-size:8px}.menu-note{display:none}.menu-stamp{display:none}.edition{bottom:8px;font-size:5px}#controls{position:absolute;left:0;right:0;bottom:0;min-height:126px;padding:0 12px max(5px,env(safe-area-inset-bottom));border:0;background:linear-gradient(transparent,#0b1926a6 42%,#0b1926df);pointer-events:none}.controls-inner{height:126px;max-width:none;grid-template-columns:112px 1fr auto 105px;gap:7px;pointer-events:none}.joystick-wrap,.field-hint,.utility-buttons,.action-pad{pointer-events:auto}#joystick{width:104px;height:104px}#joystick-thumb{width:41px;height:41px}.field-hint{align-self:end;margin-bottom:8px}.field-hint strong{font-size:7px}.field-hint span{font-size:6px}.utility-buttons{align-self:end;margin-bottom:8px;gap:5px}.utility-buttons button{min-width:61px;min-height:39px;padding:4px;font-size:7px}.utility-buttons small{font-size:4px}.action{width:73px;height:73px;font-size:10px;border-width:2px}.action small{font-size:4px}.keyboard-guide{display:none}.left-handed .controls-inner{grid-template-columns:105px auto 1fr 112px}.player-label{font-size:5px;padding:2px 3px}.player-label.you{font-size:6px}#announcement strong{font-size:43px}#announcement small{font-size:7px}#ball-arrow{font-size:10px}.small-button{left:118px;bottom:9px;font-size:6px;padding:6px}.control-cards{grid-template-columns:1fr}.control-cards>div{padding:10px}}
@media(max-height:520px) and (orientation:landscape){.topbar{height:46px;padding:5px max(13px,env(safe-area-inset-right)) 5px max(13px,env(safe-area-inset-left))}.brand-mark{width:27px;height:27px}.brand small{display:none}.menu-copy{width:min(500px,70%)}#menu-screen{padding:12px 5.5%}h1{font-size:43px}.menu-meta{display:none}.setup-grid{grid-template-columns:repeat(4,minmax(92px,145px));gap:6px}.setup-grid select{width:100%}.menu-copy>p{max-width:430px}.start-buttons{margin-top:8px}.edition{left:5.5%}#ticker{bottom:83px}.minimap-wrap{width:82px}#announcement{top:19%}dialog{padding:18px;max-height:95dvh}h2{font-size:25px;margin:5px 0 10px}.setting-row{padding:8px 0}#tilt-panel{padding:8px;margin:7px 0}.howto{margin:8px 0}.control-cards{grid-template-columns:repeat(3,1fr)}}
@media(orientation:portrait) and (max-width:850px){#game-shell:not(.idle) #rotate-note{display:block!important}.idle #rotate-note{display:none!important}.minimap-wrap{display:none}#ticker{bottom:145px;max-width:calc(100% - 24px)}#controls{min-height:145px}.controls-inner{grid-template-columns:105px 1fr 86px}.field-hint{display:none}.utility-buttons{flex-direction:column}.utility-buttons button{min-height:36px}.action{width:70px;height:70px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.vignette{display:none}}
