:root{color-scheme:dark;--green:#00ffa2;--green2:#31ff69;--text:#f5fffa;--muted:#9db8ae;--line:rgba(0,255,163,.28);--bg:#020906;--card:rgba(3,15,13,.90);font-family:'Chakra Petch',system-ui,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}
.app{position:relative;height:100%;min-height:440px;overflow:hidden;isolation:isolate}
#court{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;z-index:-3;background:#020704}
.grain{pointer-events:none;position:absolute;inset:0;z-index:-2;opacity:.36;background:repeating-linear-gradient(0deg,transparent 0px,transparent 3px,rgba(0,0,0,.32) 4px);}
.topbar{position:absolute;z-index:10;top:0;left:0;width:100%;padding:22px clamp(20px,4.2vw,75px);display:flex;align-items:center;justify-content:space-between;gap:18px;background:linear-gradient(#020806eb,transparent)}
.topbrand{cursor:pointer;color:inherit;border:0;background:none;padding:0;text-align:left;font-family:Orbitron,monospace;font-size:clamp(13px,1.5vw,19px);font-weight:800;letter-spacing:.16em;white-space:nowrap}.brand-mark{color:var(--green);font-size:23px;vertical-align:-1px;text-shadow:0 0 14px var(--green)}.small-brand{font-family:'Chakra Petch',monospace;color:var(--green);font-size:11px;letter-spacing:.16em;font-weight:600}
.top-actions{display:flex;align-items:center;gap:clamp(10px,2.1vw,31px)}.online{font-size:10px;color:var(--muted);letter-spacing:.13em;display:flex;align-items:center;gap:9px;white-space:nowrap}.led,.tiny-led{display:inline-block;width:7px;height:7px;background:#858b87;border-radius:50%;box-shadow:0 0 0 2px #171d19}.led.connected,.tiny-led{background:var(--green);box-shadow:0 0 10px #00ffa2}.linkbtn{background:none;color:#b5c8c1;border:0;font-weight:600;font-size:12px;letter-spacing:.12em;white-space:nowrap;padding:7px}.linkbtn:hover,.linkbtn:focus-visible{color:var(--green)}
.hidden{display:none!important}.welcome{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;overflow-y:auto;padding:100px 14px 32px;background:radial-gradient(ellipse at center,rgba(0,0,0,.53),rgba(0,0,0,.38) 35%,rgba(0,0,0,.11) 85%)}
.welcome-inner{width:min(100%,630px);text-align:center;margin:auto}.eyebrow{color:var(--green);font-size:10px;font-weight:700;letter-spacing:.32em;display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 9px}.eyebrow-line{display:inline-block;height:1px;width:28px;background:var(--green);opacity:.65}
h1{font-family:Orbitron,monospace;font-weight:900;font-size:clamp(43px,7.7vw,86px);line-height:1.05;letter-spacing:.035em;margin:0;text-shadow:0 4px 28px #000;white-space:nowrap}h1 span{color:var(--green);text-shadow:0 0 24px #00ffa64d}.hero-copy{font-family:Orbitron,monospace;font-size:clamp(10px,1.25vw,14px);font-weight:700;letter-spacing:.43em;margin:10px 0 25px;color:#e7fef3}
.welcome-card{text-align:left;background:linear-gradient(140deg,rgba(3,19,17,.95),rgba(1,11,10,.88));border:1px solid rgba(0,255,160,.35);box-shadow:0 0 70px #0009,0 0 32px #00ee8710,inset 0 1px #b2ffe716;padding:clamp(17px,3.2vw,27px);backdrop-filter:blur(16px);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.welcome-stat{display:flex;align-items:center;gap:10px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.1em;margin:0 0 20px}.tiny-led{flex:none}.field-caption{display:block;font-size:10px;letter-spacing:.18em;font-weight:700;color:#95beb0;margin-bottom:8px}.optional{color:#5f8278}.field{width:100%;height:43px;padding:0 13px;outline:none;border:1px solid #285246;background:rgba(0,0,0,.55);color:#fff;border-radius:2px;letter-spacing:.08em;font-size:14px;min-width:0}.field::placeholder{color:#678378}.field:focus{border-color:var(--green);box-shadow:0 0 0 1px #00ffa233}
.welcome-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:11px;margin-top:12px}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:43px;padding:11px 15px;border-radius:2px;border:1px solid transparent;font-family:Orbitron,monospace;font-size:10px;letter-spacing:.07em;font-weight:800;transition:background .15s,border-color .15s,box-shadow .15s;white-space:nowrap}.btn:hover{filter:brightness(1.14)}.btn:focus-visible{outline:2px solid #fff;outline-offset:2px}.btn-primary{color:#002215;background:var(--green);border-color:var(--green);box-shadow:0 0 16px #00ffaa24}.btn-outline{background:#0a1b17e8;color:#d4fae9;border-color:#397568}.btn-outline:hover{border-color:var(--green)}.btn-secondary{background:#134031;color:#bcffe7;border-color:#267b57}.arrow{font-size:17px;line-height:0;margin-left:auto}
.split{display:flex;align-items:center;gap:12px;margin:22px 0 15px;color:#8eada2;font-size:10px;letter-spacing:.21em;white-space:nowrap}.split:before,.split:after{content:"";height:1px;flex:1;background:#275345}.tabbar{display:flex;gap:15px;border-bottom:1px solid #265345;margin-bottom:15px}.tab{flex:1;min-height:34px;border:0;background:none;color:#86a69a;font-size:10px;font-weight:700;letter-spacing:.07em;padding:0 2px 11px}.tab.active{border-bottom:2px solid var(--green);color:var(--green)}.private-row{display:flex;gap:8px;align-items:stretch}.private-row .btn{min-width:112px}.private-row .field{flex:1}.welcome-hint{color:#96c0b0;font-size:10px;letter-spacing:.18em;margin-top:18px;text-shadow:0 2px 6px black}
.room-hud{position:absolute;inset:0;z-index:3;pointer-events:none}.room-hud button{pointer-events:auto}.scoreboard{position:absolute;top:77px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:28px;justify-content:center;width:min(100%,650px);padding:12px 20px;background:linear-gradient(90deg,transparent,rgba(1,12,9,.77) 14%,rgba(1,12,9,.77) 86%,transparent)}.score-person{flex:1;min-width:0}.score-person.right{text-align:right}.score-label{font:800 12px Orbitron,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.score-hint{font-size:10px;color:var(--green);margin-top:6px;letter-spacing:.12em}.score-numbers{text-align:center;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;font:800 31px Orbitron,monospace;min-width:134px}.score-dash{color:var(--green);font-size:23px}.score-numbers small{display:block;width:100%;font:600 9px 'Chakra Petch',monospace;letter-spacing:.20em;color:#9db8ae;margin-top:-8px}.room-id{position:absolute;left:clamp(20px,4vw,70px);top:96px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--green)}
.side-panel{position:absolute;right:clamp(15px,3vw,46px);top:25%;width:190px;padding:18px;background:rgba(0,15,12,.75);border:1px solid #215b49;box-shadow:0 12px 28px #0007}.side-heading{display:flex;justify-content:space-between;font-size:10px;color:var(--green);letter-spacing:.12em;font-weight:700}.side-status{font-size:13px;line-height:1.4;margin:9px 0 0;font-weight:600}.side-muted{font-size:12px;margin-top:12px;color:#b0c5bd}.separator{height:1px;background:#2a5145;margin:14px 0}.queue-list{font-size:12px;color:#b0c5bd;line-height:1.8;margin-top:10px;max-height:190px;overflow:hidden}.queue-item{display:flex;justify-content:space-between;gap:5px}.queue-item em{font-style:normal;color:var(--green);font-size:10px}
.bottom-panel{position:absolute;bottom:clamp(20px,4vw,40px);left:50%;transform:translateX(-50%);width:fit-content;max-width:95%;display:grid;gap:12px;justify-items:center}.play-instruction{white-space:nowrap;text-align:center;font-size:11px;letter-spacing:.12em;text-shadow:0 2px 4px black;color:#d2fceb}.bottom-controls{display:flex;align-items:center;gap:9px;padding:9px 11px;background:#03120de8;border:1px solid #256b50;pointer-events:auto;max-width:100%}.your-status{font-size:10px;letter-spacing:.1em;font-weight:700;color:var(--green);padding:0 10px;white-space:nowrap}.compact{min-height:35px;font-size:9px;padding:9px 11px}.center-announcement{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);white-space:nowrap;color:#f2fff8;font:800 clamp(14px,3vw,28px) Orbitron,monospace;letter-spacing:.12em;text-shadow:0 0 22px var(--green),0 2px 10px #000;opacity:0;transition:opacity .12s}.center-announcement.visible{opacity:1}.cursor-aim{pointer-events:none;position:absolute;width:21px;height:21px;transform:translate(-50%,-50%);border:1px solid #d5ffec;border-radius:50%;box-shadow:0 0 10px #00ffa2}.cursor-aim:before,.cursor-aim:after{content:"";position:absolute;background:#fff}.cursor-aim:before{height:1px;width:31px;top:9px;left:-6px}.cursor-aim:after{height:31px;width:1px;top:-6px;left:9px}
.modal{max-width:min(530px,92vw);max-height:min(80vh,780px);overflow:auto;padding:28px;background:#061713;color:#e8fcf2;border:1px solid var(--green);box-shadow:0 0 85px #001e17;line-height:1.7}.modal::backdrop{background:#000a;backdrop-filter:blur(7px)}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:20px}.modal h2{font:800 21px Orbitron,monospace;margin:0 0 15px}.modal p{color:#b9d1c8;font-size:14px}.modal strong{color:#fff}.close-dialog{background:none;border:0;color:var(--green);font-size:28px;line-height:1;padding:4px 9px}.dialog-action{width:100%;margin-top:14px}.subtle{opacity:.8}.leaderboard{margin:18px 0;display:grid;gap:7px}.leader-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #174939;padding:8px 5px;font-size:13px}.leader-rank{color:var(--green);margin-right:16px}.leader-score{color:var(--green);font:700 12px Orbitron,monospace}
.toast{position:absolute;z-index:25;left:50%;bottom:25px;transform:translateX(-50%) translateY(15px);background:#002b20;border:1px solid var(--green);color:#dcffef;box-shadow:0 0 25px #000b;padding:12px 19px;max-width:95vw;text-align:center;font-size:13px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}.toast.visible{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:970px){.side-panel{top:auto;bottom:124px;right:12px;width:166px;padding:11px;background:#061610e6}.scoreboard{top:74px}.room-id{top:157px}.side-heading{font-size:9px}.queue-list{max-height:90px}.side-status{font-size:11px}}
@media(max-width:650px){.topbar{padding:15px 12px;flex-wrap:wrap;gap:5px}.topbrand{font-size:12px}.small-brand{font-size:9px}.top-actions{gap:5px}.linkbtn{font-size:9px;padding:4px}.online{font-size:9px}.welcome{padding:102px 11px 18px}.welcome-card{padding:14px}.eyebrow{font-size:8px;letter-spacing:.15em}h1{font-size:clamp(36px,10vw,62px)}.hero-copy{font-size:9px;letter-spacing:.25em;margin-bottom:14px}.welcome-stat{margin-bottom:10px;font-size:9px}.welcome-grid{gap:7px}.welcome-grid .btn{font-size:8px;padding:10px 8px}.split{margin:13px 0 12px;font-size:9px}.tab{font-size:9px}.private-row{flex-wrap:wrap}.private-row .btn{min-width:85px}.private-row .field{min-width:115px}.welcome-hint{font-size:8px;letter-spacing:.11em}.scoreboard{top:82px;gap:8px;padding:8px}.score-numbers{min-width:82px;gap:5px;font-size:21px}.score-label{font-size:9px}.score-hint{font-size:8px}.room-id{top:151px;left:12px;font-size:9px}.side-panel{display:none}.bottom-panel{bottom:15px;width:96%}.bottom-controls{gap:5px;width:100%;justify-content:center;flex-wrap:wrap}.your-status{width:100%;text-align:center}.compact{font-size:8px;min-height:34px}.play-instruction{font-size:9px;white-space:normal}.modal{padding:18px}.modal h2{font-size:17px}}
@media(max-height:720px){.welcome{padding-top:74px}.welcome-inner{transform:scale(.88);transform-origin:center center}.topbar{padding-top:12px}.welcome-hint{margin-top:8px}}
@media(max-height:570px){.welcome{align-items:flex-start}.welcome-inner{transform:none}.welcome-card{padding:13px}.hero-copy{margin-bottom:10px}.welcome-hint{margin-bottom:8px}}

/* Ultra-low-latency player reticle: only GPU-transform on each display frame. */
.cursor-aim { left: 0; top: 0; will-change: transform; }

.render-fps { font:700 10px 'Chakra Petch',monospace; white-space:nowrap; letter-spacing:.1em; color:#90c4af; border:1px solid #205a42; padding:5px 7px; border-radius:2px; }
@media(max-width:650px) { .render-fps { font-size:9px; padding:3px; } }


/* V1.2: zero-distraction live match and score safely above the 3D tunnel. */
.scoreboard{top:45px;gap:16px;min-height:42px;padding:3px 12px;background:linear-gradient(90deg,transparent,#010c0a96 17%,#010c0a96 83%,transparent);z-index:4}
.score-numbers{font-size:24px;gap:7px;min-width:90px}
.score-numbers small{font-size:8px;letter-spacing:.08em;margin-top:-7px}
.score-label{font-size:11px}
.score-hint{font-size:9px;margin-top:2px}
.topbrand:hover,.topbrand:focus-visible{color:var(--green)}
.topbrand:focus-visible{outline:1px solid var(--green);outline-offset:5px}
/* Only the brand, off-field score, and bottom playing bar remain during play. */
.active-match .top-actions{display:none}
.room-hud.is-playing .side-panel,.room-hud.is-playing .room-id,
.room-hud.is-playing .play-instruction,.room-hud.is-playing #queueBtn,
.room-hud.is-playing #copyInvite{display:none!important}
.room-hud.is-playing .bottom-panel{bottom:clamp(9px,1.7vw,20px)}
.room-hud.is-playing .bottom-controls{padding:5px 9px;background:#02120cce;gap:5px}
.room-hud.is-playing .compact{min-height:28px;padding:6px 9px;font-size:8px}
.room-hud.is-playing .your-status{padding:0 6px}
/* Private rooms never present spectator statistics. */
.room-hud.private-arena .spectators-info{display:none!important}
/* Waiting messages appear when opponents leave, but vanish in gameplay. */
.room-hud.is-playing .center-announcement{font-size:clamp(12px,1.8vw,19px);max-width:80vw;white-space:normal;text-align:center}
@media(max-width:650px){.scoreboard{top:43px;gap:6px;padding:3px 8px;min-height:34px}.score-numbers{font-size:18px;min-width:64px}.score-label{font-size:8px}.score-hint{font-size:7px}.room-hud.is-playing .bottom-panel{bottom:9px}}

/* V1.3.1: Unmissable full-screen 3D coin flip; no ball is rendered during toss. */
.coin-toss{position:absolute;inset:0;transform:none;z-index:9;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:21px;text-align:center;background:radial-gradient(ellipse at center,rgba(0,24,19,.85),rgba(0,4,3,.91) 77%);color:#f3fff9;text-shadow:0 0 17px #00eebc}
.coin-toss-label{font:800 clamp(15px,1.8vw,23px) Orbitron,monospace;letter-spacing:.27em;color:#7fffd4}
.coin-stage{width:160px;height:164px;perspective:750px;display:grid;place-items:center}
.coin-flip{position:relative;width:118px;height:118px;transform-style:preserve-3d;animation:curveballCoinFlip 850ms linear infinite;filter:drop-shadow(0 0 24px rgba(0,255,167,.57))}
.coin-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;backface-visibility:hidden;border:6px solid #d7ffe7;background:radial-gradient(circle at 30% 24%,#e3fff7 0%,#3eecc3 37%,#058e67 95%);box-shadow:inset 0 0 14px #024b37,0 0 23px #00ffaa88;color:#053625;font:900 45px Orbitron,monospace}
.coin-back{transform:rotateY(180deg);background:radial-gradient(circle at 29% 26%,#eafffa,#36a4ff 48%,#124d9f 95%);border-color:#bfeaff;color:#072a59}
.coin-toss-caption{font:800 clamp(11px,1.4vw,17px) Orbitron,monospace;letter-spacing:.10em;color:#effff9;min-height:2em;padding:0 20px}
.coin-toss.resolved .coin-flip{animation:none;transform:rotateY(0) scale(1.12)}
.coin-toss.resolved.second-wins .coin-flip{transform:rotateY(180deg) scale(1.12)}
.coin-toss.resolved .coin-toss-caption{color:#00ffaa;text-shadow:0 0 20px #00ffa2}
@keyframes curveballCoinFlip{0%{transform:rotateY(0deg) translateY(0)}25%{transform:rotateY(180deg) translateY(-20px)}50%{transform:rotateY(360deg) translateY(0)}75%{transform:rotateY(540deg) translateY(-20px)}100%{transform:rotateY(720deg) translateY(0)}}
@media(prefers-reduced-motion:reduce){.coin-flip{animation:none}}
@media(max-width:650px){.coin-toss{gap:12px}.coin-stage{width:110px;height:118px}.coin-flip{width:85px;height:85px}.coin-face{font-size:30px;border-width:4px}}

/* v1.4: Chat is opt-in visually for each browser, and exclusively public. */
.public-chat{pointer-events:auto;position:absolute;z-index:6;right:clamp(12px,2vw,30px);bottom:90px;width:min(300px,27vw);height:min(350px,50vh);display:flex;flex-direction:column;background:#01140feb;border:1px solid #168b62;box-shadow:0 10px 40px #000a;backdrop-filter:blur(8px)}
.chat-header{font:800 11px Orbitron,monospace;letter-spacing:.12em;color:#00ffa2;padding:11px;border-bottom:1px solid #215d48;display:flex;align-items:center;justify-content:space-between}
.chat-close{font-size:19px;color:#00ffa2;border:0;background:none;cursor:pointer}
.chat-history{flex:1;min-height:0;overflow-y:auto;padding:9px;word-wrap:break-word;overflow-wrap:anywhere;scrollbar-color:#2b8763 transparent}
.chat-message{font-size:12px;line-height:1.5;margin:0 0 7px;color:#daffe9}.chat-message strong{color:#00ffa2;margin-right:6px}
.chat-input-row{display:flex;gap:4px;border-top:1px solid #215d48;padding:7px}.chat-input-row input{min-width:0;flex:1;background:#000b08;color:#fff;border:1px solid #39735d;padding:7px;font:12px 'Chakra Petch',sans-serif}.chat-input-row button{color:#03110a;background:#00ffa2;border:0;font-weight:800;font-size:10px;padding:7px}
.account-status{color:#00ffa2;font-size:11px;margin-bottom:8px;letter-spacing:.09em}.account-modal{max-width:min(540px,94vw)}.auth-form{display:grid;gap:12px;margin:12px 0}.auth-form label{color:#a5dbc5;font-size:11px;font-weight:700;display:grid;gap:5px}.auth-form .field{margin-top:3px}.auth-message{color:#c8ffd5;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}.auth-mfa-stage{margin:15px 0;padding:13px;border:1px solid #325d4b}.auth-mfa-stage img{background:white;max-width:100%;height:auto}.mfa-secret{font:11px monospace;overflow-wrap:anywhere}.top-actions #accountBtn{color:#00ffa2}
@media(max-width:850px){.public-chat{width:min(280px,44vw)}}
@media(max-width:650px){.public-chat{right:8px;bottom:110px;width:min(285px,90vw);height:230px}.top-actions #accountBtn{font-size:9px}.top-actions{flex-wrap:wrap;justify-content:flex-end}}
/* The coin flies toward the viewer as it flips; 2.8 seconds within the 3.9s toss. */
.coin-stage{perspective:1100px;perspective-origin:50% 50%;overflow:visible}
.coin-flip{animation:curveballCoinThrow 2.85s cubic-bezier(.22,.6,.35,1) both!important}
.coin-toss.resolved .coin-flip{animation:none!important;transform:translateZ(320px) rotateY(0deg) scale(1.35)}
.coin-toss.resolved.second-wins .coin-flip{transform:translateZ(320px) rotateY(180deg) scale(1.35)}
@keyframes curveballCoinThrow{
  0%{transform:translate3d(0,70px,-850px) rotateX(35deg) rotateY(0deg) scale(.60)}
  17%{transform:translate3d(0,-110px,-350px) rotateX(75deg) rotateY(400deg) scale(.85)}
  45%{transform:translate3d(0,-180px,20px) rotateX(180deg) rotateY(950deg) scale(1.15)}
  72%{transform:translate3d(0,-45px,225px) rotateX(305deg) rotateY(1530deg) scale(1.12)}
  100%{transform:translate3d(0,0,320px) rotateX(360deg) rotateY(2160deg) scale(1.35)}
}
@media(prefers-reduced-motion:reduce){.coin-flip{animation:none!important}}