:root{color-scheme:dark;--bg:#101310;--surface:#191e19;--line:#30382f;--muted:#a0a79c;--white:#f2f4ec;--green:#b6f776;--orange:#ff9575;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--green);outline-offset:5px}button{touch-action:manipulation}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.icon-library{position:absolute;width:0;height:0;overflow:hidden}button{border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.site-header{height:91px;max-width:1400px;margin:auto;padding:0 56px;border-bottom:1px solid #293027;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:800;letter-spacing:1.5px;line-height:1.4}.brand-mark{background:var(--green);color:#162014;width:39px;height:39px;border-radius:11px;display:grid;place-items:center;transform:rotate(-8deg)}.brand-mark svg{width:26px;height:26px;stroke-width:1.8}.brand-club{display:block;color:var(--muted);font-size:10px;letter-spacing:4.4px;font-weight:500}.header-note{display:flex;align-items:center;gap:9px;font-size:10px;color:var(--muted);letter-spacing:1.4px}.live-dot{width:5px;height:5px;background:var(--green);border-radius:50%;display:inline-block;flex-shrink:0}.header-actions{display:flex;align-items:center;gap:12px}.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;display:grid;place-items:center;transition:background .2s,color .2s}.icon-button:hover:not(:disabled){background:#263025;color:var(--green)}.icon-button svg{width:18px;height:18px}.help-button{height:40px;border:1px solid var(--line);border-radius:24px;padding:0 15px;background:transparent;display:flex;align-items:center;gap:9px;font-size:11px}.help-button svg{width:17px;height:17px}.help-button:hover{background:var(--surface)}
.main-layout{max-width:1196px;padding:35px 30px 30px;margin:auto;display:grid;grid-template-columns:326px minmax(0,1fr);gap:76px;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:7px}.eyebrow>span{width:5px;height:5px;background:var(--green);border-radius:50%}.intro h1{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-size:78px;line-height:.86;letter-spacing:-5px;margin:24px 0 19px;position:relative}.intro h1>span:not(.title-star){color:var(--green)}.title-star{font-size:66px;font-weight:400;color:var(--green);position:absolute;top:4px;left:169px;line-height:1}.intro p{font-size:13px;line-height:1.75;color:var(--muted);margin:0 0 25px}.setup-card{border:1px solid var(--line);border-radius:17px;padding:19px;background:#181d17}.section-label{display:flex;justify-content:space-between;font-size:10px;font-weight:700;letter-spacing:1.3px;margin-bottom:13px}.section-label span+span{color:#959d90;font-weight:400;letter-spacing:1px}.mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px}.mode-option{display:flex;align-items:flex-start;text-align:left;flex-direction:column;border:1px solid #3b4436;border-radius:9px;background:#20261d;padding:12px;position:relative;transition:background .2s,border-color .2s;min-height:99px}.mode-option>svg{width:22px;height:22px;color:#b4bcac;margin-bottom:10px}.mode-option strong{display:block;font-size:12px;font-weight:600;margin-bottom:5px}.mode-option small{display:block;font-size:10px;color:var(--muted)}.mode-option.selected{border-color:var(--green);background:#29351e}.mode-option.selected>svg{color:var(--green)}.selected-dot{position:absolute;top:13px;right:12px;border:1px solid #616d56;border-radius:50%;width:10px;height:10px}.selected .selected-dot{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 2px #29351e}.setting-group{margin-top:20px}.field-label{font-size:11px;display:flex;align-items:center;justify-content:space-between;margin:0 0 10px}.field-label svg{width:13px;height:13px;color:var(--muted)}.segmented{display:flex;gap:4px;background:#10150f;border:1px solid #293125;padding:4px;border-radius:8px}.segmented button{background:transparent;flex:1;height:31px;font-size:10px;border-radius:5px;color:#b0b8a6;display:flex;align-items:center;justify-content:center;gap:3px}.segmented .selected{background:#35412d;color:var(--white);box-shadow:0 1px 3px #0004}.segmented svg{width:11px;height:11px}.target-group{border-top:1px solid #30382b;padding-top:17px;display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px}.target-group .field-label{margin-bottom:5px}.field-hint{font-size:10px;color:var(--muted)}.target-picker{display:flex;gap:5px}.target-picker button{background:#20271c;border:1px solid #38432f;border-radius:6px;width:33px;height:34px;font-size:11px}.target-picker .selected{background:#34462a;border-color:#91b56d;color:var(--green)}.primary-button{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--green);color:#192213;border-radius:8px;height:47px;padding:0 17px;font-size:12px;font-weight:700;transition:background .2s,transform .2s;min-width:0}.primary-button:hover{background:#caff95}.primary-button:active{transform:scale(.98)}.primary-button svg{width:18px;height:18px}.desktop-start{width:100%;margin-top:19px}.touch-note{display:flex;align-items:center;justify-content:center;gap:7px;color:#b0b9a7;margin-top:14px;font-size:10px}.touch-note svg{width:13px;height:13px}.sidebar-bottom{display:flex;align-items:center;gap:10px;font-size:10px;color:var(--muted);padding:17px 3px 0}.mini-arrow{margin-left:auto;font-size:19px;color:#c2cbb7}.tiny-puck{width:16px;height:9px;border:1px solid #68765b;border-radius:50%;box-shadow:0 3px 0 -1px #38452f}.mobile-settings{display:none}
.arena{min-width:0;width:100%;position:relative}.scoreboard{display:flex;align-items:center;justify-content:space-between;max-width:545px;margin:0 auto 19px;gap:12px}.score-side{display:flex;align-items:center;gap:10px;min-width:0}.player-avatar{height:34px;width:34px;border-radius:10px;display:grid;place-items:center;border:1px solid #435a31;background:#26341d;color:var(--green)}.player-avatar svg{width:17px;height:17px}.player-label{font-size:10px;letter-spacing:1.3px;font-weight:600;display:block;white-space:nowrap}.player-sub{font-size:10px;color:var(--muted);margin-top:5px;display:block;white-space:nowrap}.score-side strong{font-size:38px;line-height:1;font-weight:500;letter-spacing:-2px;margin-left:9px;font-variant-numeric:tabular-nums}.player-two{text-align:right}.player-two strong{margin:0 9px 0 0}.player-two .player-avatar{background:#39271f;border-color:#674034;color:var(--orange)}.score-center{text-align:center;display:flex;flex-direction:column;gap:9px;white-space:nowrap}.score-center>span:first-child{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--green);font-size:10px;letter-spacing:1px}.score-center>span:last-child{color:var(--muted);font-size:10px;letter-spacing:1.3px}.court-area{display:flex;align-items:center;justify-content:center;position:relative;gap:26px}.court-shell{position:relative;aspect-ratio:600/760;height:clamp(330px,calc(100svh - 241px),630px);max-width:calc(100% - 55px);border:1px solid #435140;border-radius:27px;padding:10px;background:#232c22;box-shadow:0 18px 60px #0003,inset 0 0 0 4px #1b231b;flex-shrink:0;overflow:hidden;isolation:isolate}.court-shell:before{content:"";position:absolute;z-index:2;pointer-events:none;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 5px #151c14, inset 0 0 0 6px #3a4735}.court-shell canvas{display:block;width:100%;height:100%;border-radius:19px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}.court-shell canvas:active{cursor:grabbing}.rail-label{writing-mode:vertical-rl;display:flex;justify-content:space-between;height:64%;font-size:10px;letter-spacing:2px;color:#929d89;position:absolute;top:18%}.rail-left{left:16px;transform:rotate(180deg)}.rail-right{right:16px}.rail-label span{font-size:10px;color:#8c9980}.court-overlay{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;background:#141d145c;z-index:3;border-radius:19px;pointer-events:none}.overlay-content{pointer-events:auto;text-align:center;width:88%;max-width:292px;padding:23px 18px;border:1px solid #5c6e4c66;border-radius:15px;background:#161e15ed;box-shadow:0 10px 30px #0004;backdrop-filter:blur(12px)}.overlay-kicker{font-size:10px;letter-spacing:2.2px;color:var(--green)}.overlay-content h2{font-size:29px;font-weight:600;letter-spacing:-1px;margin:12px 0 10px}.overlay-content p{font-size:11px;color:#b0baaa;line-height:1.65;margin:0 0 20px}.overlay-content .primary-button{width:100%;font-size:11px;height:43px}.overlay-key{display:block;color:var(--muted);font-size:10px;margin-top:14px}kbd{font-family:inherit;font-size:10px;padding:2px 5px;border:1px solid #546049;border-radius:4px;color:#e2e8da;background:#2b3525}.overlay-key kbd{font-size:10px;margin:0 3px}.text-button{display:block;background:transparent;font-size:11px;text-decoration:underline;text-underline-offset:4px;color:#b3bea7;padding:13px;margin:3px auto 0}.countdown{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font-size:95px;color:var(--green);font-weight:800;letter-spacing:-7px;z-index:4;pointer-events:none;text-shadow:0 0 40px #a2ff4840}.countdown.visible{display:flex;background:#131c1350}.goal-flash{position:absolute;left:0;right:0;top:43%;z-index:4;text-align:center;font-weight:800;font-size:48px;letter-spacing:5px;pointer-events:none;opacity:0;transition:opacity .15s;text-shadow:0 2px 30px #000}.goal-flash.visible{opacity:1}.arena-toolbar{display:flex;align-items:center;justify-content:space-between;margin:14px auto 0;max-width:545px;gap:10px}.play-hint{display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.5;color:var(--muted)}.play-hint svg{width:14px;height:14px}.arena-actions{display:flex;gap:6px}.arena-actions .icon-button{height:31px;width:31px;border-radius:7px}.arena-actions svg{height:14px;width:14px}.site-footer{border-top:1px solid #293027;max-width:1288px;margin:8px auto 0;padding:22px 0 23px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:var(--muted);letter-spacing:1px}.site-footer>span{display:flex;align-items:center;gap:9px}.site-footer .footer-center{font-size:10px;letter-spacing:0;color:#98a18f}.site-footer>span:last-child{color:var(--white);font-weight:600}.site-footer svg{width:14px;height:14px}.modal{color:var(--white);border:1px solid #48513e;background:#1a2118;border-radius:20px;padding:34px;max-width:460px;width:calc(100% - 32px);box-shadow:0 30px 100px #0008;max-height:calc(100svh - 36px);overflow:auto}.modal::backdrop{background:#080e08c9;backdrop-filter:blur(6px)}.close-dialog.icon-button{position:absolute;right:15px;top:15px;width:30px;height:30px}.close-dialog.icon-button svg{height:15px;width:15px}.modal>.eyebrow{color:var(--green);margin:8px 0 15px;font-size:10px}.modal h2{font-size:31px;letter-spacing:-1px;margin:0 0 16px}.modal-intro{font-size:13px;line-height:1.7;color:#bac3af;margin-bottom:25px}.help-row{display:flex;gap:15px;margin:24px 0}.help-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #425333;border-radius:12px;flex-shrink:0}.help-icon.green{color:var(--green);background:#2e3b23}.help-icon.orange{color:var(--orange);background:#3d2c23;border-color:#6b4938}.help-row h3{font-size:13px;margin:1px 0 7px}.help-row p{font-size:12px;line-height:1.65;color:#adb8a2;margin:0}.keyboard-help{background:#12190f;border:1px solid #39432e;border-radius:10px;padding:15px;margin:24px 0}.keyboard-help>div{display:flex;gap:4px;align-items:center;margin:9px 0}.keyboard-help span:first-child{font-size:11px;color:#b0baa4;flex:1}.keyboard-help kbd{min-width:24px;text-align:center;font-size:11px;line-height:19px}.keyboard-help span{font-size:10px}.modal>.primary-button{width:100%;margin-top:22px}.settings-notice{color:var(--muted);font-size:11px;line-height:1.6}.settings-modal .settings-fields{display:block!important}.settings-modal .setting-group{margin-top:26px}.settings-modal .segmented button{height:40px;font-size:12px}.settings-modal .target-picker button{width:40px;height:40px}.settings-modal .field-label{font-size:13px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,10px);background:#34412a;border:1px solid #667b52;color:var(--white);padding:13px 20px;border-radius:10px;font-size:12px;max-width:calc(100% - 30px);width:max-content;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;z-index:30}.toast.visible{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.arena:fullscreen{background:var(--bg);display:flex;flex-direction:column;justify-content:center;padding:18px;gap:12px}.arena:fullscreen .scoreboard,.arena:fullscreen .arena-toolbar{width:100%;max-width:580px}.arena:fullscreen .court-shell{height:min(calc(100dvh - 160px),800px);max-width:90vw}.arena:fullscreen .court-area{width:100%;max-width:720px;margin:0 auto}.arena:fullscreen .rail-label{display:none}
@media(min-width:1400px){.main-layout{gap:110px;max-width:1250px;padding-top:44px;padding-bottom:36px}.intro h1{font-size:86px}.title-star{left:185px;top:2px}.site-footer{margin-top:20px}}
@media(max-width:1399px){.site-footer{margin-left:56px;margin-right:56px}}
@media(max-height:780px) and (min-width:851px){.site-header{height:73px}.main-layout{padding-top:22px;padding-bottom:19px}.intro h1{font-size:67px;margin-top:18px;margin-bottom:15px}.title-star{font-size:53px;left:145px}.intro p{margin-bottom:18px;font-size:12px}.setup-card{padding:16px}.mode-option{min-height:84px;padding:10px}.mode-option>svg{margin-bottom:8px;width:19px;height:19px}.mode-option small{font-size:10px}.setting-group{margin-top:14px}.target-group{padding-top:14px}.desktop-start{margin-top:15px;height:43px}.touch-note{margin-top:10px}.sidebar-bottom{padding-top:14px}.court-shell{height:calc(100svh - 217px)}.site-footer{padding-top:17px;padding-bottom:17px;margin-top:0}.scoreboard{margin-bottom:15px}.arena-toolbar{margin-top:12px}}
@media(max-width:1080px) and (min-width:851px){.main-layout{gap:35px;grid-template-columns:295px 1fr;padding-left:35px;padding-right:35px}.intro h1{font-size:70px}.title-star{left:155px}.site-header{padding-left:35px;padding-right:35px}.header-note{display:none}.rail-label{display:none}.court-shell{max-width:100%}.score-side{gap:7px}.score-side strong{margin-left:4px}.player-two strong{margin-right:4px}.player-avatar{width:29px;height:29px}.player-label{font-size:10px;letter-spacing:.7px}.score-center>span:first-child{font-size:10px}.score-center>span:last-child{font-size:10px}.site-footer{margin-left:35px;margin-right:35px}}
@media(max-width:850px){.site-header{height:65px;padding:0 25px}.header-note{display:none}.main-layout{grid-template-columns:1fr;gap:15px;padding:21px 25px 17px;max-width:600px}.sidebar{display:contents}.intro{display:flex;align-items:center;justify-content:space-between}.intro .eyebrow,.intro p{display:none}.intro h1{font-size:36px;line-height:1;letter-spacing:-1.8px;margin:0}.intro h1 br{display:none}.intro h1>span:not(.title-star){margin-left:8px}.title-star{font-size:32px;position:static;margin-left:14px}.setup-card{padding:0;background:none;border:none;border-radius:0}.section-label,.touch-note,.desktop-start,.sidebar-bottom{display:none}.mode-option{flex-direction:row;align-items:center;min-height:57px;padding:10px 12px;border-color:#414a37;background:#1a2117;gap:11px;border-radius:9px}.mode-option>svg{margin:0;width:21px;height:21px}.mode-option strong{font-size:12px;margin-bottom:4px}.mode-option small{font-size:10px}.selected-dot{right:11px;top:14px;width:8px;height:8px}.mode-option.selected{background:#29351e}.mode-picker{gap:10px}.mobile-settings{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:10px;color:var(--muted);height:29px}.mobile-settings button{display:flex;align-items:center;gap:6px;color:#bfc9b4;background:transparent;font-size:10px;padding:7px 0 7px 10px;min-height:34px}.mobile-settings button svg{width:13px;height:13px}.setup-card>.settings-fields{display:none}.arena{margin-top:-2px}.scoreboard{margin-bottom:12px;max-width:450px;gap:9px}.score-side{gap:8px}.player-avatar{width:29px;height:29px;border-radius:8px}.player-avatar svg{width:16px;height:16px}.player-label{font-size:10px;letter-spacing:.7px}.player-sub{font-size:10px;margin-top:4px}.score-side strong{font-size:31px;margin-left:3px}.player-two strong{margin:0 3px 0 0}.score-center{gap:7px}.score-center>span:first-child{font-size:10px;letter-spacing:.5px}.score-center>span:last-child{font-size:10px;letter-spacing:1px}.court-shell{height:auto;width:min(100%,calc((100svh - 312px) * .78947));max-width:450px;padding:8px;border-radius:23px;min-width:240px}.court-shell canvas{border-radius:15px}.court-shell:before{box-shadow:inset 0 0 0 4px #151c14,inset 0 0 0 5px #3a4735}.court-overlay{inset:8px;border-radius:15px}.rail-label{display:none}.arena-toolbar{margin-top:9px;max-width:450px}.arena-actions .icon-button{height:34px;width:34px}.play-hint{font-size:10px;max-width:210px;gap:6px}.play-hint svg{width:15px;height:15px}.site-footer{margin:0 25px;padding:16px 0;font-size:10px}.footer-center{display:none!important}.site-footer>span{gap:7px}.brand{font-size:11px;letter-spacing:1px;gap:9px}.brand-club{font-size:10px;letter-spacing:3.3px}.brand-mark{height:33px;width:33px;border-radius:9px}.brand-mark svg{height:23px;width:23px}.header-actions{gap:8px}.icon-button{height:35px;width:35px}.help-button{height:35px;padding:0 12px;font-size:10px}.help-button svg{height:15px;width:15px}.overlay-content{max-width:270px;padding:20px 17px}.overlay-content h2{font-size:27px}.overlay-key{display:none}.overlay-content p{font-size:10px;margin-bottom:18px}.countdown{font-size:80px}.goal-flash{font-size:40px}.settings-modal{padding-bottom:27px}.arena:fullscreen .court-shell{width:auto;height:min(calc(100dvh - 150px),800px);max-width:90vw}}
@media(max-width:390px){.site-header{padding-left:18px;padding-right:18px}.main-layout{padding-left:18px;padding-right:18px;gap:14px;padding-top:17px}.intro h1{font-size:32px}.title-star{font-size:29px;margin-left:12px}.help-button{padding:0 9px;gap:6px}.score-side{gap:6px}.player-avatar{width:26px;height:26px}.score-side strong{font-size:30px}.score-center>span:first-child{font-size:10px}.court-shell{width:min(100%,calc((100svh - 291px) * .78947))}.play-hint{max-width:180px}.site-footer{margin-left:18px;margin-right:18px}.mode-option{padding-left:10px;gap:8px}.selected-dot{right:8px}.modal{padding:27px}.keyboard-help{padding:12px}}
@media(max-height:500px) and (max-width:950px) and (orientation:landscape){.site-header{height:52px}.main-layout{max-width:850px;display:grid;grid-template-columns:240px 1fr;gap:22px;padding:16px 22px}.sidebar{display:block}.intro{margin-bottom:18px}.intro h1{font-size:29px}.title-star{font-size:25px}.mode-option{min-height:61px;padding:9px;gap:7px}.mode-option strong{font-size:11px}.mode-option small{font-size:10px}.mode-option>svg{width:18px;height:18px}.selected-dot{display:none}.court-shell{height:calc(100svh - 154px);width:auto;min-width:0}.site-footer{display:none}.scoreboard{margin-bottom:8px}.player-sub{display:none}.play-hint{font-size:10px}.arena-actions .icon-button{width:29px;height:29px}.arena-toolbar{margin-top:8px}.overlay-content{padding:12px}.overlay-content h2{font-size:22px;margin:8px 0}.overlay-content p{margin-bottom:10px;font-size:10px}.overlay-content .primary-button{height:35px}.overlay-kicker{font-size:10px}.rail-label{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
@media(pointer:coarse){.icon-button,.help-button{min-width:44px;min-height:44px}.arena-actions .icon-button{width:44px;height:44px}.mobile-settings{height:44px}.mobile-settings button{min-height:44px;padding-left:14px}.modal .close-dialog.icon-button{width:44px;height:44px;right:8px;top:8px}.settings-modal .segmented button,.settings-modal .target-picker button{min-height:44px;min-width:44px}.text-button{min-height:44px}}
@media(max-width:390px){.score-side .player-avatar{display:none}.scoreboard{gap:7px}.score-side{gap:5px}.score-center>span:first-child{letter-spacing:0}.header-actions{gap:6px}.help-button{padding-left:10px;padding-right:10px}}
@media(max-width:350px){.help-button span{display:none}.help-button{padding:0;justify-content:center;width:44px}.intro h1{font-size:29px}.title-star{font-size:26px}.mode-option{gap:6px;padding-left:8px;padding-right:8px}.mode-option strong{font-size:11px}.mode-option>svg{width:18px;height:18px}.selected-dot{display:none}.play-hint{max-width:138px}.court-shell{min-width:220px}}