:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#070e1e;color:#eaf9ff;font-synthesis:none}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
button,input{font:inherit}
button{touch-action:manipulation}
.game-shell{position:fixed;inset:0;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#152d42 0%,#0a1628 45%,#060c19 100%);width:100%;height:100vh;height:100dvh}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.game-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,9,20,.78) 0%,rgba(2,9,20,.10) 17%,transparent 32%,transparent 80%,rgba(2,9,20,.3) 100%)}
.topbar{position:absolute;top:0;left:0;right:0;z-index:5;min-height:88px;display:grid;grid-template-columns:minmax(170px,1fr) auto minmax(250px,1fr);align-items:start;gap:18px;padding:22px max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));pointer-events:none}
.brand{white-space:nowrap;font-size:22px;font-weight:950;letter-spacing:-1.7px;text-shadow:0 3px 20px #000b;align-self:center}
.brand>span:last-child{color:#64efd7}.brand-mark{color:#64efd7;font-size:26px;margin-right:9px;filter:drop-shadow(0 0 12px #53f6d26d)}
.match-info{display:flex;justify-content:center;align-items:start;gap:24px;padding:9px 24px 12px;border:1px solid #c8fff01a;border-radius:0 0 18px 18px;background:#08172bb0;backdrop-filter:blur(14px);white-space:nowrap;min-width:285px;margin-top:-22px}
.match-number{min-width:52px;padding-top:10px;display:flex;flex-direction:column;text-align:center;gap:3px}
.match-info span{font-size:10px;color:#8ca7b9;letter-spacing:1px;font-weight:800}
.match-info strong{font-weight:900;font-size:20px;font-variant-numeric:tabular-nums}
.match-clock{text-align:center;min-width:100px}.match-clock span{display:block;color:#70efd7;font-size:9px;margin-bottom:3px;letter-spacing:.8px}.match-clock strong{font-size:31px;line-height:1.1}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;pointer-events:auto}
.action-button,.room-pill{background:#0a1b31cb;border:1px solid #5d8a9a54;backdrop-filter:blur(12px);height:42px;border-radius:12px;color:#eefbff;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 12px;font-weight:750;font-size:13px;box-shadow:0 4px 18px #0003}
.action-button{cursor:pointer;min-width:42px;transition:background .14s,border-color .14s}.action-button:hover,.action-button[aria-expanded="true"]{background:#173951e8;border-color:#69eed6}.action-button:focus-visible,.help-button:focus-visible,#play:focus-visible{outline:2px solid #a2ffe9;outline-offset:3px}
.room-pill{font-size:12px;letter-spacing:.75px;color:#75f2dc;max-width:124px;overflow:hidden;text-overflow:ellipsis}
.my-score{display:flex;gap:10px;margin-right:5px;white-space:nowrap;align-items:center;color:#9cb9c8;font-size:10px;font-weight:800;letter-spacing:.3px}.my-score b{display:inline-block;font-size:15px;color:#e9fff9;margin-left:2px}
.leaderboard{position:absolute;right:max(24px,env(safe-area-inset-right));top:82px;z-index:7;width:250px;max-width:calc(100vw - 24px);padding:15px;border:1px solid #69e6cd3b;border-radius:15px;background:#08172ce8;backdrop-filter:blur(18px);box-shadow:0 20px 55px #0008}
.leaderboard-title{display:flex;align-items:center;justify-content:space-between;color:#ddfff7;font-size:11px;letter-spacing:1.3px;font-weight:850;padding:3px 4px 13px}
.leaderboard-title span{color:#72e9d3}.leader-row{display:grid;grid-template-columns:22px minmax(0,1fr) 42px 34px;align-items:center;gap:6px;padding:9px 4px;border-top:1px solid #b0fff31b;font-size:11px}.leader-row.mine{color:#69f5d8}.leader-row.dead{opacity:.52}.leader-row .rank{color:#74899e}.leader-row .player-name{display:flex;gap:7px;min-width:0;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.leader-row .player-name span{overflow:hidden;text-overflow:ellipsis}.leader-row .dot{width:7px;height:7px;flex-shrink:0;border-radius:50%}.leader-row .score{color:#bbd5db;text-align:right;font-variant-numeric:tabular-nums}.empty-leaders{text-align:center;padding:20px 6px;color:#97afbf;font-size:12px}
.banner{position:absolute;top:35%;left:50%;transform:translate(-50%,-50%);z-index:4;padding:16px 28px;max-width:min(520px,90vw);min-width:260px;border:1px solid #5cf1d24c;border-radius:16px;background:#09192ed5;box-shadow:0 15px 60px #0008;color:#effffc;text-align:center;font-weight:950;font-size:clamp(16px,2.3vw,30px);letter-spacing:.6px;text-shadow:0 3px 15px #000b;pointer-events:none;backdrop-filter:blur(14px)}
.network-error{position:absolute;z-index:12;bottom:calc(26px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);max-width:min(480px,90vw);background:#7f2638e8;border:1px solid #ffc3d066;border-radius:10px;padding:13px 18px;color:#fff;font-size:13px;text-align:center;box-shadow:0 10px 30px #0008}
.help-button{position:absolute;z-index:8;bottom:calc(22px + env(safe-area-inset-bottom));left:calc(24px + env(safe-area-inset-left));width:36px;height:36px;border-radius:50%;border:1px solid #8bb9af55;background:#0b1c31bb;color:#9fc9c9;font-weight:800;font-size:15px;cursor:pointer;backdrop-filter:blur(10px)}.help-button:hover{color:#eafffa;border-color:#62f3d7}
.controls{position:absolute;z-index:9;bottom:calc(68px + env(safe-area-inset-bottom));left:calc(24px + env(safe-area-inset-left));padding:16px 20px;background:#08162be9;border:1px solid #5cead645;border-radius:15px;box-shadow:0 12px 38px #0009;color:#d5f4f6;font-size:12px;line-height:2.3;backdrop-filter:blur(18px)}.controls strong{font-size:14px;color:#6ef0d5}.controls kbd{display:inline-block;min-width:24px;padding:0 6px;border:1px solid #628a9e64;border-radius:4px;background:#162d42;font-family:inherit;font-size:11px;text-align:center;color:#ecffff;margin-right:3px}
.lobby{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:18px;background:radial-gradient(ellipse at center,#101e32bb 0%,#050b18b5 62%,#040918db 100%);backdrop-filter:blur(7px)}
.lobby-card{width:min(420px,100%);padding:32px 35px 34px;border:1px solid #71d9cd43;border-radius:24px;background:linear-gradient(155deg,#1a3046f0,#0a162cf2 85%);box-shadow:0 18px 85px #000a;text-align:center}
.lobby-emblem{margin:0 auto 4px;color:#6df5db;font-size:43px;filter:drop-shadow(0 0 17px #55e8c9a0)}.lobby h1{font-size:clamp(36px,7vw,48px);line-height:1.05;letter-spacing:-3px;margin:0;font-weight:1000}.lobby h1 span{color:#6ef0d6}.lobby p{color:#a5c8cb;font-size:13px;margin:14px 0 28px}
#join-form{text-align:left}#join-form label{display:block;margin:15px 0 7px;color:#9ebbc9;font-size:10px;font-weight:850;letter-spacing:1.6px}#join-form input{width:100%;height:47px;border:1px solid #62889b60;outline:none;border-radius:11px;background:#061426b0;color:#effffb;font-size:15px;padding:0 14px;transition:border-color .15s}#join-form input:focus{border-color:#5af0d4;box-shadow:0 0 0 3px #66f1d317}#join-form input::placeholder{color:#6e8996}
#play{margin-top:22px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:54px;border:0;border-radius:12px;background:linear-gradient(110deg,#76f3d8,#3ad7bd);color:#05282c;font-size:15px;letter-spacing:1.5px;font-weight:950;cursor:pointer;box-shadow:0 8px 30px #3ae2bf37}#play:hover{background:linear-gradient(110deg,#b6ffef,#60f1d7)}#play:disabled{opacity:.6;cursor:wait}
.hidden{display:none!important}
@media(max-width:980px){.topbar{grid-template-columns:1fr auto;padding-top:16px;gap:12px}.brand{font-size:17px}.brand-mark{font-size:20px;margin-right:4px}.match-info{grid-column:1/-1;grid-row:2;margin:0 auto 0;border-radius:15px;padding:8px 16px;gap:15px;min-width:0}.match-number{padding-top:3px}.top-actions{grid-column:2;grid-row:1}.my-score{display:none!important}.invite span{display:none}.room-pill{height:38px}.action-button{height:38px;min-width:38px}.leaderboard{top:68px}}
@media(max-width:540px){.topbar{padding:12px 12px;gap:6px}.brand{font-size:15px;letter-spacing:-1px}.brand-mark{font-size:18px}.top-actions{gap:5px}.room-pill{font-size:10px;max-width:75px;padding:0 7px;height:35px}.action-button{height:35px;min-width:35px;border-radius:9px;padding:0 8px;font-size:12px}.match-info{gap:12px;padding:6px 15px}.match-info span{font-size:8px}.match-info strong{font-size:16px}.match-clock strong{font-size:22px}.match-clock{min-width:87px}.match-clock span{font-size:8px}.lobby-card{padding:22px 23px 26px;border-radius:18px}.lobby h1{font-size:36px}.lobby p{margin:11px 0 16px}.help-button{left:14px;bottom:calc(14px + env(safe-area-inset-bottom))}.controls{left:12px;bottom:calc(56px + env(safe-area-inset-bottom))}.leaderboard{right:10px;top:59px}.banner{top:44%;padding:14px 16px;min-width:220px}}
@media(max-height:530px){.lobby-card{padding:13px 22px}.lobby-emblem{display:none}.lobby h1{font-size:27px;letter-spacing:-1px}.lobby p{margin:5px 0 7px}.lobby-card label{margin:7px 0 3px!important}#join-form input{height:35px}#play{height:39px;margin-top:9px}.topbar{min-height:44px}.match-info{padding:4px 10px}.banner{top:48%}}