@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Syne:wght@600;700;800&display=swap');
.roundOver{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:#080a10d9;padding:20px}.roundCard{width:min(440px,100%);background:#11141e;border:1px solid #3b465e;box-shadow:12px 12px 0 #171b27;padding:32px;text-align:center}.roundCard .eyebrow{color:#c8ff56;margin:0 0 8px}.roundCard h2{font:800 34px Syne;margin:0 0 22px}.finalScores{border-top:1px solid #303747;margin-bottom:20px}.finalScores div{display:grid;grid-template-columns:28px 1fr 42px;align-items:center;text-align:left;border-bottom:1px solid #303747;padding:11px 0;font-size:13px}.finalScores b{color:#7f899e}.finalScores strong{text-align:right;color:#c8ff56;font:700 16px Syne}.roundCard p{color:#9ba4b7;font-size:10px;line-height:1.5;margin:15px 0 0}
.latency{margin-left:auto;color:#8f97a8;font-size:9px}.hud #network{color:#62e9ff;margin-right:10px;font:9px 'DM Mono'}
.touchControls{display:none}@media(max-width:760px),(pointer:coarse){.game{justify-content:flex-start;padding:8px}.hud{margin:4px 0 8px}.game canvas{max-height:58vh;touch-action:none}.touchControls{display:flex;gap:12px;width:min(960px,100%);margin-top:12px;touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.touchControls button{height:74px;flex:1;background:#202635;color:#c8ff56;border:1px solid #3b465e;font:700 28px Syne;line-height:1;padding:8px;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}.touchControls button:active{background:#c8ff56;color:#0b0d12;transform:translateY(1px)}.touchControls small{display:block;margin-top:5px;font:9px 'DM Mono';letter-spacing:2px}.controls{margin-top:9px;text-align:center}.controls span{margin:0 6px}}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#080a10;color:#f5f7ff;font-family:'DM Mono',monospace;overflow-x:hidden}body:before{content:'';position:fixed;inset:0;background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(#0004,transparent 65%);pointer-events:none}main{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr;gap:4vw;align-items:center;max-width:1180px;margin:auto;padding:48px}.hero{padding:30px 0}.mark{font:800 18px Syne;letter-spacing:5px;color:#f4f6fb;display:flex;align-items:center;gap:12px}.mark i{display:block;background:#c8ff56;width:14px;height:14px;box-shadow:14px 0 #ff5378,28px 0 #62e9ff}.hero>p,.eyebrow{font-size:11px;letter-spacing:3px;color:#a5adbf;margin:38px 0 12px}.hero h1{font:800 clamp(56px,8vw,112px)/.88 Syne;letter-spacing:-5px;margin:0;max-width:650px}.hero em{color:#c8ff56;font-style:normal}.rules{display:flex;gap:26px;margin-top:52px;color:#72798c;font-size:10px}.rules b{display:block;color:#eef0f7;letter-spacing:1.5px;margin-top:6px}.panel,.room{background:#11141e;border:1px solid #292e3d;padding:38px;box-shadow:12px 12px 0 #171b27}.panel h2{font:700 36px Syne;letter-spacing:-1.5px;margin:0 0 28px}.panel .eyebrow,.room .eyebrow{color:#c8ff56;margin:0 0 10px}label{display:block;font-size:10px;letter-spacing:2px;color:#aab2c5;margin-bottom:18px}input{display:block;background:#080a10;border:1px solid #343a4b;color:white;font:16px 'DM Mono';letter-spacing:1px;width:100%;padding:15px;margin-top:9px;outline:none}input:focus{border-color:#c8ff56}button{border:0;background:#c8ff56;color:#0b0d12;font:700 13px Syne;letter-spacing:.5px;padding:16px 18px;width:100%;cursor:pointer;transition:.15s}button:hover{background:#e0ff92;transform:translateY(-2px)}button span{float:right;font-size:20px;line-height:12px}.or{text-align:center;font-size:10px;color:#747d91;letter-spacing:2px;margin:24px 0}.join{display:flex;gap:8px}.join input{margin:0;text-transform:uppercase}.join button{width:110px}.note{color:#7d8597;font-size:10px;line-height:1.7;margin:23px 0 0}.hidden{display:none!important}.roomcode{font:800 58px Syne;letter-spacing:10px;color:#c8ff56;margin:8px 0}.room p{font-size:11px;color:#8f97a8}.players{margin:28px 0}.player{padding:10px 0;border-bottom:1px solid #272c39;font-size:12px;display:flex;align-items:center;gap:10px}.dot{width:9px;height:9px;border-radius:50%}.readytag{margin-left:auto;color:#c8ff56;font-size:9px}.game{position:fixed;inset:0;background:#080a10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}.hud{width:min(960px,100%);display:flex;justify-content:space-between;align-items:center;margin:0 0 12px;font:700 12px Syne;letter-spacing:1px}.logo{color:#f5f7ff}.logo small{color:#c8ff56;font:10px 'DM Mono';margin-left:5px}.controls{margin-top:13px;font-size:10px;color:#9ba4b7;letter-spacing:1px}.controls span{color:#c8ff56;margin:0 15px}canvas{width:min(960px,100%);height:auto;max-height:75vh;background:#0d1019;border:1px solid #293043;box-shadow:0 0 50px #5260ff16}#score{display:flex;gap:13px;font:10px 'DM Mono'}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#ff5378;color:white;padding:12px 18px;font-size:12px;opacity:0;transition:.25s;pointer-events:none}#toast.show{opacity:1}@media(max-width:760px){main{display:block;padding:26px}.hero{padding-bottom:45px}.hero h1{font-size:64px}.rules{margin-top:35px}.panel,.room{padding:27px}.game{padding:10px}.hud{font-size:10px}.controls{font-size:8px}}
