:root{color-scheme:dark;--bg:#142321;--ink:#f3f2e7;--muted:#9aa9a1;--accent:#d6ed8b;--red:#f26760;--blue:#77acfb;--line:rgba(220,235,214,.14)}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Segoe UI",Arial,sans-serif;overflow:hidden;font-size:14px}button,input,a{-webkit-tap-highlight-color:transparent}button,a,input{outline-offset:5px}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent)}a{color:inherit;text-decoration:none}button{color:inherit}svg{width:24px;height:24px}button svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.hidden{display:none!important}#gameCanvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none}.vignette{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 65% 48%,transparent 30%,rgba(9,19,19,.25) 95%)}
.topbar{height:93px;position:relative;z-index:5;display:flex;align-items:center;padding:0 4.4vw;gap:30px;border-bottom:1px solid rgba(224,239,214,.1)}.brand{display:flex;align-items:center;gap:10px;font-size:30px;font-weight:850;letter-spacing:-1.4px}.brand svg{width:30px;height:32px}.brand-dot{color:var(--accent)}.club-label{font-size:9px;letter-spacing:1.75px;font-weight:600;line-height:1.9;color:#d2dacf;border-left:1px solid var(--line);padding-left:26px}.club-label span{display:block;color:#7f958a;font-size:8px;letter-spacing:2px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.local-badge{font-size:9px;letter-spacing:1.2px;color:#a9baad;margin-right:23px;display:flex;align-items:center;gap:8px}.local-badge i,.match-footer i{width:5px;height:5px;background:var(--accent);border-radius:50%;display:inline-block;box-shadow:0 0 10px #b6d07755}.icon-button{border:1px solid transparent;background:transparent;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#becfc2;transition:.2s}.icon-button:hover{background:#e6f2d510;border-color:#e6f2d526;color:var(--accent)}.icon-button svg{width:19px;height:19px}.help-button{width:auto;gap:7px;margin-right:8px;border-radius:7px;padding:0 10px}.help-button span{font-size:12px;border:1px solid #b1c2b393;border-radius:50%;width:17px;height:17px;text-align:center;line-height:15px}.help-button b{font-size:11px;font-weight:500}.mute-slash{display:none}.is-muted .sound-waves{display:none}.is-muted .mute-slash{display:block}
.menu{position:absolute;inset:93px 0 0;pointer-events:none;background:linear-gradient(90deg,rgba(15,31,29,.94) 0,rgba(15,31,29,.9) 26%,rgba(15,31,29,.3) 51%,transparent 70%)}.hero-copy{pointer-events:auto;position:absolute;left:7.1vw;top:50%;transform:translateY(-55%);width:48%;max-width:640px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:12px}.tiny-line{height:1px;width:29px;display:inline-block;background:var(--accent)}h1{font-size:clamp(44px,4.6vw,76px);line-height:1.07;letter-spacing:-3.5px;font-weight:700;margin:26px 0 20px}h1 em{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:var(--accent);letter-spacing:-3px}.intro{font-size:14px;color:#acbcb0;line-height:1.85;margin:0}.match-facts{display:flex;gap:0;margin-top:29px;margin-bottom:27px}.match-facts div{padding:0 25px;border-right:1px solid var(--line)}.match-facts div:first-child{padding-left:0}.match-facts div:last-child{border:0}.match-facts strong{font-size:23px;font-weight:500;letter-spacing:-.7px;display:block}.match-facts span{font-size:8px;letter-spacing:1.65px;color:#8fa798;display:block;margin-top:7px}.name-inputs{display:flex;gap:11px;max-width:360px;margin-bottom:14px}.name-inputs label{position:relative;width:50%;border-bottom:1px solid #b5cfad38;display:flex;align-items:center;gap:7px;padding-bottom:7px}.name-inputs label>span{display:none}.name-inputs input{border:0;background:transparent;width:100%;font:inherit;font-size:12px;color:#d4dfd3;padding:5px 2px}.name-inputs input:focus{outline:none}.name-inputs label:focus-within{border-color:var(--accent)}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}.dot.red{background:var(--red);box-shadow:0 0 13px #f2676022}.dot.blue{background:var(--blue);box-shadow:0 0 13px #77acfb22}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:360px;width:100%;padding:18px 23px;background:var(--accent);border:0;border-radius:5px;color:#172c24;font-size:14px;font-weight:650;transition:background .2s,transform .2s}.primary-button:hover{background:#e7f6b4;transform:translateY(-1px)}.button-arrow{font-size:23px;line-height:1}.start-note{display:flex;align-items:center;gap:8px;color:#7d9586;font-size:10px;margin-top:13px}.start-note svg{width:17px;height:16px;fill:none;stroke:currentColor;stroke-width:1}.scene-caption{position:absolute;right:6vw;bottom:92px;display:flex;align-items:center;gap:12px;color:#c1d2bd}.caption-cross{font-size:27px;font-weight:200;color:var(--accent);line-height:1}.scene-caption b{font-size:9px;letter-spacing:1.5px;font-weight:600;display:block}.scene-caption div>span{font-size:10px;color:#8caa94;display:block;margin-top:7px}.menu-footer{position:absolute;bottom:0;left:4.4vw;right:4.4vw;display:flex;align-items:center;justify-content:space-between;height:68px;border-top:1px solid var(--line);font-size:8px;letter-spacing:1.4px;color:#739181;pointer-events:auto}.menu-footer a{font-size:8px;letter-spacing:1px;color:#a4bcaa}.menu-footer a span{font-size:15px;margin-left:7px}.footer-tip{display:flex;gap:10px;align-items:center;letter-spacing:.2px;font-size:10px;color:#a7bda9}.split-ball{display:inline-block;width:16px;height:17px;background:linear-gradient(145deg,#ef6665 0 50%,#5993e2 50%);clip-path:polygon(24% 0,76% 0,100% 25%,100% 75%,70% 100%,24% 100%,0 74%,0 25%);transform:rotate(-12deg);flex-shrink:0}.load-error{color:#ffb7a9;font-size:12px;line-height:1.5;max-width:420px}
.match-ui{position:fixed;inset:0;pointer-events:none;z-index:3}.scoreboard{position:absolute;top:13px;left:50%;transform:translateX(-50%);height:66px;display:flex;align-items:center;gap:24px;padding:0 24px;background:#142321ec;border:1px solid var(--line);border-radius:9px;z-index:6}.playing .club-label,.playing .local-badge,.playing .help-button b{display:none}.playing .topbar{height:93px;padding-left:27px;padding-right:27px}.playing .brand{font-size:25px}.score-team{display:flex;align-items:center;gap:12px;min-width:144px}.score-team span{font-size:12px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score-team strong{font-size:35px;font-weight:500;line-height:1}.team-left{justify-content:flex-end}.team-left strong{margin-left:15px}.team-right strong{margin-right:15px}.clock-block{display:flex;align-items:center;flex-direction:column;min-width:81px}.clock-block>span:first-child{font-size:7px;letter-spacing:1.6px;color:var(--accent)}.clock-block>strong{font-size:26px;line-height:1.3;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:1px}.clock-block>span:last-child{font-size:6px;letter-spacing:1px;color:#7d998b}.clock-block.urgent>strong{color:#f9c18b}.views{position:absolute;inset:104px 16px 191px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.view-frame{position:relative;border:1px solid #e2efda21;border-radius:10px;background:transparent;overflow:hidden}.view-top{display:flex;align-items:center;justify-content:space-between;position:absolute;top:18px;left:20px;right:20px;gap:10px}.player-tag{font-size:10px;color:#819d8c;letter-spacing:1px}.player-tag b{font-weight:600;font-size:10px;margin-left:9px;letter-spacing:.6px;color:#e2e9d9}.view-role{font-size:8px;letter-spacing:1.2px;background:#152820cc;border:1px solid #bed5aa33;padding:7px 9px;border-radius:3px;color:#aabfa3}.view-role.attacking{color:var(--accent);border-color:#d6ed8b55}.camera-caption{position:absolute;left:20px;bottom:16px;font-size:7px;letter-spacing:1.8px;color:#b4c9b290;z-index:2}.bottom-hud{position:absolute;bottom:37px;left:16px;right:16px;height:144px;display:grid;grid-template-columns:1fr 164px 1fr;gap:10px}.control-panel{border:1px solid var(--line);border-radius:8px;background:#14231fec;padding:15px 20px;min-width:0}.control-heading{display:flex;align-items:center;justify-content:space-between;font-size:11px;margin-bottom:13px}.control-heading>span{display:flex;align-items:center;gap:9px}.control-heading b{font-weight:500;max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.control-heading small{font-size:7px;letter-spacing:1px;color:#809a88}.turn-clock{font-size:9px;color:#99b28c;letter-spacing:.5px;font-variant-numeric:tabular-nums}.turn-clock.urgent{color:#ffbd83}.control-main{display:flex;align-items:center;gap:22px}.keys{display:flex;gap:17px;flex-shrink:0}.keys>div{display:flex;flex-direction:row;align-items:center;gap:4px;flex-wrap:wrap;max-width:113px}.keys span{flex-basis:100%;font-size:8px;color:#8da68f;margin-top:3px;white-space:nowrap}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;background:#c9ddbd09;border:1px solid #c9ddbd33;border-bottom-width:2px;border-radius:4px;font-family:inherit;font-size:10px;color:#d5e3ca;padding:0 6px}.shot-control{flex:1;min-width:100px}.shot-control>div:first-child{display:flex;align-items:center;gap:7px;margin-bottom:8px}.shot-key{color:var(--accent);border-color:#c8e68466;font-weight:600}.shot-control span{color:#8fa88b;font-size:9px;white-space:nowrap}.shot-control strong{font-size:9px;font-weight:500;color:var(--accent);margin-left:auto;white-space:nowrap;min-width:30px;text-align:right}.power-track{height:5px;border-radius:3px;background:#b2cca814;overflow:hidden}.power-fill{height:100%;width:0;background:linear-gradient(90deg,#89c58e,var(--accent),#ffb780);border-radius:3px;transition:width .04s linear}.control-panel.attacking{border-color:#d6ed8b42}.control-panel.attacking .control-heading small{color:var(--accent)}.control-panel.charging{box-shadow:inset 0 0 22px #cce48808}.stance{font-size:8px;color:#718e76;margin-top:10px;letter-spacing:.1px}.ball-info{display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:#14231ff5;overflow:hidden}.ball-info-top{display:flex;align-items:center;gap:7px;font-size:7px;letter-spacing:.6px;color:#d2dfbf;margin:9px 0 0}.ball-info-top .split-ball{width:10px;height:11px}.ball-info>span{font-size:6px;letter-spacing:1.4px;color:#698972;margin-bottom:10px}#minimap{width:140px;height:82px;max-width:100%;display:block}.match-footer{position:absolute;bottom:0;left:26px;right:26px;height:30px;display:flex;justify-content:space-between;align-items:center;color:#6d8c75;font-size:7px;letter-spacing:.8px}.match-footer>span:first-child{display:flex;align-items:center;gap:6px}.match-footer>span:nth-child(2){font-size:9px;letter-spacing:.1px;color:#a1b592}.match-footer kbd{min-width:22px;height:17px;font-size:7px;margin-right:6px}.event-banner{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;border:1px solid #dce9c72b;border-radius:9px;background:#142720e8;backdrop-filter:blur(14px);padding:25px 45px;min-width:300px;z-index:8;box-shadow:0 20px 70px #0003}.event-banner>span:first-child{font-size:9px;letter-spacing:2px;color:var(--accent)}.event-banner strong{font-size:37px;font-weight:500;letter-spacing:-1.3px}.event-banner>span:last-child{font-size:11px;color:#a0b79b}.event-banner.goal{border-color:#d6ed8b66}.event-banner.goal strong{font-size:58px;color:var(--accent);font-family:Georgia,serif;font-style:italic}
dialog{color:var(--ink);background:#1b3029;border:1px solid #cee6b833;border-radius:12px;padding:38px;box-shadow:0 25px 100px #0007;max-height:calc(100dvh - 45px);overflow:auto}dialog::backdrop{background:#081611b8;backdrop-filter:blur(9px)}.dialog{width:min(850px,calc(100vw - 40px))}.small-dialog{width:min(430px,calc(100vw - 40px));text-align:center}.small-dialog .eyebrow{justify-content:center}.dialog h2{font-size:44px;line-height:1.1;letter-spacing:-1.7px;margin:20px 0;font-weight:500}.dialog-intro{color:#a5baa1;font-size:13px;line-height:1.7;margin-bottom:24px}.dialog-close{position:absolute;right:19px;top:13px;background:transparent;border:0;font-size:28px;color:#a6bba0}.dialog .primary-button{max-width:none}.dialog .compact{max-width:290px;padding:14px 18px;font-size:12px}.help-controls{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:#0d221d66;border:1px solid var(--line);border-radius:7px;padding:16px 20px}.help-controls h3{font-size:13px;font-weight:500;margin:0 0 13px;display:flex;align-items:center;gap:7px}.help-controls p{font-size:10px;color:#a2b89e;line-height:1.8;margin:8px 0}.help-controls kbd{height:21px;min-width:21px;font-size:9px;margin-right:2px}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 25px;margin:24px 0 18px}.rules-grid b{color:#d9e7c7;font-size:11px;font-weight:500}.rules-grid p{font-size:11px;color:#91a98d;line-height:1.65;margin:7px 0 12px}.help-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:20px}.help-footer a{font-size:10px;color:var(--accent)}.help-note{font-size:9px;color:#6e916f;line-height:1.6;margin:17px 0 0}.secondary-button,.small-button{background:#c4dba80c;border:1px solid var(--line);border-radius:5px;padding:13px;width:100%;font-size:12px;margin-top:10px}.secondary-button:hover,.small-button:hover{background:#c4dba81b}.text-button{background:transparent;border:0;font-size:11px;color:#8fa98b;margin-top:22px}.referee{margin-top:23px;text-align:left;border-top:1px solid var(--line);padding-top:16px;font-size:10px;color:#8fa88b}.referee summary{cursor:pointer}.referee p{font-size:10px}.referee>div{display:flex;gap:8px}.small-button{margin-top:0;font-size:10px}.result-score{font-size:69px;letter-spacing:2px;font-weight:300;color:var(--accent);margin:10px 0 20px;font-variant-numeric:tabular-nums}.result-stats{font-size:10px;color:#8faa87;margin-bottom:25px}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:50;border:1px solid var(--line);background:#233e2b;padding:13px 23px;border-radius:7px;font-size:12px;color:#e3edcb;max-width:90vw;text-align:center}
.shot-setting{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:360px;margin:0 0 15px;font-size:10px;color:#8fa98e}.shot-setting select{background:#192f26;color:#cfdfbd;border:1px solid #c9ddbd33;border-radius:4px;padding:7px 9px;font:inherit;font-size:10px;max-width:210px;cursor:pointer}.small-dialog .shot-setting{max-width:none;margin-bottom:20px;text-align:left}
.solo .views{grid-template-columns:1fr}.solo #view1,.solo #control1{display:none}.solo .bottom-hud{grid-template-columns:minmax(0,1fr)180px}.solo .control-main{max-width:850px}.solo .control-panel .shot-control{max-width:480px}.name-inputs input:disabled{opacity:.6}.menu .shot-setting{margin-bottom:10px}.solo .ball-info-top{font-size:7px}
@media(max-height:850px){.menu .hero-copy{transform:translateY(-52%)}.menu h1{font-size:48px;margin:17px 0 12px}.menu .intro{font-size:12px;line-height:1.65}.menu .match-facts{margin:18px 0}.menu .match-facts strong{font-size:21px}.menu .shot-setting{margin-bottom:8px}.menu .name-inputs{margin-bottom:9px}}
@media(min-width:1600px){.hero-copy{left:8vw}.intro{font-size:16px}.primary-button{padding:20px 24px}.match-facts{margin-top:35px;margin-bottom:35px}.name-inputs{margin-bottom:17px}.hero-copy h1{margin-top:30px}}
@media(max-width:1150px){.topbar{padding:0 30px}.club-label{display:none}.local-badge{margin-right:8px;font-size:8px}.hero-copy{left:6vw;width:50%}h1{font-size:52px;letter-spacing:-2.5px}.intro{font-size:12px}.hero-copy{transform:translateY(-55%)}.keys{gap:9px}.control-panel{padding:14px}.control-main{gap:13px}.keys>div{max-width:90px}.shot-control span{font-size:8px}.scoreboard{gap:16px;padding:0 15px}.score-team{min-width:108px}.score-team span{max-width:90px}.scene-caption{right:4vw}.bottom-hud{grid-template-columns:1fr 136px 1fr}.ball-info-top{font-size:6px}.control-heading b{max-width:90px}.control-heading small{font-size:6px}.control-panel .shot-control>div:first-child{gap:4px}}
@media(max-width:900px){.local-badge{display:none}.hero-copy{width:56%}h1{font-size:46px}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.4px}.name-inputs,.hero-copy .primary-button{max-width:300px}.match-facts div{padding:0 18px}.scene-caption{bottom:90px}.scene-caption b{font-size:7px}.scene-caption div>span{font-size:8px}.edition{display:none}.bottom-hud{grid-template-columns:1fr 100px 1fr;gap:7px}.control-panel{padding:12px}.control-main{gap:9px}.keys{gap:6px}.keys>div{max-width:58px}.keys span{font-size:6px;white-space:normal}.keys kbd{min-width:21px;height:22px;padding:0 5px}.shot-control{min-width:90px}.shot-control span{white-space:normal;font-size:7px}.control-heading small{display:none}.stance{font-size:7px}.ball-info-top{font-size:5px;letter-spacing:0;gap:4px}.scoreboard{gap:12px}.playing .brand>span{display:none}.playing .top-actions{gap:2px}.playing .top-actions .help-button{margin:0;padding:0 6px}.score-team{min-width:90px}.score-team span{max-width:70px}.score-team strong{font-size:30px}.score-team .dot{display:none}.clock-block{min-width:68px}.clock-block>strong{font-size:23px}.ball-info>span{font-size:5px}.camera-caption{font-size:6px}.view-top{left:13px;right:13px;top:13px}.view-role{font-size:7px;padding:6px}.player-tag b{font-size:8px}.view-frame{border-radius:7px}}
@media(max-height:760px) and (min-width:850px){.topbar{height:76px}.menu{top:76px}.hero-copy{transform:translateY(-55%)}h1{font-size:51px;margin:20px 0 13px}.intro{font-size:12px;line-height:1.7}.match-facts{margin-top:20px;margin-bottom:18px}.match-facts strong{font-size:21px}.name-inputs{margin-bottom:10px}.primary-button{padding:15px 20px}.menu-footer{height:54px}.scene-caption{bottom:75px}.playing .topbar{height:76px}.scoreboard{top:7px;height:60px}.views{top:85px;bottom:172px}.bottom-hud{height:126px;bottom:36px}.control-panel{padding:12px 16px}.control-heading{margin-bottom:10px}.stance{margin-top:7px}.ball-info>span{margin-bottom:7px}#minimap{height:69px;width:117px}}
@media(max-width:650px){.topbar{height:72px;padding:0 20px}.brand{font-size:25px}.top-actions{gap:3px}.help-button{margin-right:0;padding:0 6px}.help-button b{display:none}.menu{top:72px;background:linear-gradient(90deg,#0f1f1df2,#0f1f1dd9 50%,#0f1f1d44)}.hero-copy{left:8vw;top:45%;transform:translateY(-50%);width:84%}h1{font-size:44px;letter-spacing:-2.2px}.intro{font-size:12px}.scene-caption{display:none}.menu-footer{left:8vw;right:8vw;height:65px}.menu-footer>a{font-size:6px}.footer-tip{font-size:8px;max-width:150px;line-height:1.6;gap:7px}.name-inputs,.hero-copy .primary-button{max-width:335px}.playing .topbar{height:78px;padding:0 12px}.playing .brand{display:none}.scoreboard{top:9px;left:12px;transform:none;padding:0 10px;gap:8px;height:58px}.score-team{min-width:63px;gap:6px}.score-team span{font-size:9px;max-width:54px}.score-team strong{font-size:25px}.team-left strong{margin-left:4px}.team-right strong{margin-right:4px}.clock-block{min-width:56px}.clock-block>strong{font-size:20px}.clock-block>span:first-child{font-size:6px}.clock-block>span:last-child{font-size:5px}.playing .top-actions #helpButton,.playing .top-actions #fullscreenButton{display:none}.playing .top-actions{z-index:9}.views{inset:85px 8px 235px;gap:7px}.view-top{top:9px;left:9px;right:9px;flex-wrap:wrap;gap:5px}.view-role{font-size:6px;padding:4px 5px}.player-tag{font-size:8px}.player-tag b{font-size:7px;margin-left:4px}.camera-caption{left:9px;font-size:5px;letter-spacing:.9px}.bottom-hud{left:8px;right:8px;bottom:32px;height:194px;grid-template-columns:1fr 1fr;gap:7px}.ball-info{display:none}.control-panel{padding:12px}.control-main{flex-direction:column;align-items:stretch;gap:13px}.keys{gap:20px}.keys span{font-size:7px;max-width:72px}.keys>div{max-width:75px}.stance{font-size:7px;line-height:1.5;margin-top:10px}.shot-control{min-width:0}.shot-control>div:first-child{margin-bottom:7px}.shot-control span{font-size:8px}.control-heading{font-size:9px;margin-bottom:13px;gap:5px}.control-heading b{max-width:75px}.control-heading>span{gap:5px}.turn-clock{font-size:8px}.match-footer{left:12px;right:12px;font-size:6px}.match-footer>span:first-child{display:none}.match-footer>span:nth-child(2){font-size:7px;max-width:75%}.dialog{padding:28px 23px}.dialog h2{font-size:36px}.help-controls{grid-template-columns:1fr;gap:15px}.rules-grid{grid-template-columns:1fr;gap:0}.help-footer{align-items:stretch;flex-direction:column;gap:15px}.dialog .compact{max-width:none}.event-banner{padding:22px;min-width:250px;max-width:90vw}.event-banner strong{font-size:29px}.event-banner.goal strong{font-size:45px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
@media(max-width:650px){.solo .bottom-hud{grid-template-columns:1fr}.solo .control-main{flex-direction:row;align-items:center;gap:20px}.solo .keys{gap:12px}.solo .shot-control{min-width:120px}.menu .shot-setting{max-width:335px}.menu h1{font-size:43px}}