*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0e1521;--panel: #17233a;--panel-2: #1d2c47;--accent: #ffb627;--accent-2: #ff7b54;--text: #e8edf5;--muted: #8aa0bd;--good: #46d67a;--bad: #ff5d6c;--border: #2c3f61}html,body{width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#1b2a45 0%,var(--bg) 70%);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center}#screens{position:relative;width:100%;height:100%;max-width:1200px}.screen{display:none;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:24px;text-align:center}.screen.active{display:flex}.logo{font-size:72px;font-weight:900;letter-spacing:4px;color:var(--accent);text-shadow:0 4px 0 #a06a00,0 8px 24px rgba(0,0,0,.5);margin-bottom:4px}.logo span{color:var(--accent-2);text-shadow:0 4px 0 #a03a20,0 8px 24px rgba(0,0,0,.5)}.tagline{color:var(--muted);margin-bottom:32px}.menu-buttons{display:flex;flex-direction:column;gap:14px;width:320px}.menu-footer{margin-top:32px;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;flex-wrap:wrap;justify-content:center}.menu-footer select{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:14px}.menu-footer input,#room-input{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:14px;width:120px}#room-input{width:100px;text-align:center;text-transform:uppercase;font-weight:700;letter-spacing:3px}.lobby-status{color:var(--muted);font-size:14px;min-height:18px;margin-top:14px}.lobby-players{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;max-width:520px}.lobby-players .chip{background:var(--panel-2);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}.lobby-players .chip .dot{width:12px;height:12px;border-radius:50%;display:inline-block}.btn{font-family:inherit;border:none;border-radius:10px;padding:14px 22px;font-size:16px;font-weight:700;cursor:pointer;transition:transform .08s ease,box-shadow .15s ease,background .15s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-primary{background:linear-gradient(180deg,var(--accent),#ff9f1c);color:#3a2500;box-shadow:0 6px #9a6a00,0 10px 20px #00000059}.btn-primary:hover{box-shadow:0 8px #9a6a00,0 14px 24px #00000059}.btn-secondary{background:linear-gradient(180deg,var(--panel-2),var(--panel));color:var(--text);border:1px solid var(--border)}.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);font-weight:600}.ws-status{margin-top:22px;font-size:13px;color:var(--muted)}.ws-status.online{color:var(--good)}.ws-status.offline{color:var(--bad)}h2{font-size:34px;margin-bottom:28px;color:var(--accent);letter-spacing:1px}.setup-row{display:flex;align-items:center;gap:18px;width:460px;max-width:92vw;margin-bottom:20px;justify-content:space-between}.setup-row label{color:var(--muted);font-weight:600;min-width:120px;text-align:right}.segmented{display:flex;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:5px}.segmented button{font-family:inherit;background:transparent;color:var(--muted);border:none;border-radius:7px;padding:8px 18px;font-weight:700;cursor:pointer}.segmented button.selected{background:var(--accent);color:#3a2500}.setup-value{color:var(--text);font-weight:700;font-size:15px}.setup-actions{display:flex;gap:14px;margin-top:12px}.lobby-status{margin-top:18px;color:var(--muted);font-size:14px;min-height:18px}#game-screen{padding:0;justify-content:flex-start;background:#0c1220}#game-canvas{width:100%;height:100%;display:block}#hud{position:absolute;top:16px;left:16px;display:flex;gap:12px;align-items:center}#hud>div{background:#0d1422d1;border:1px solid var(--border);border-radius:10px;padding:8px 14px;font-weight:800;font-size:16px;color:var(--text)}#hud-position{color:var(--accent)}#hud-timer{font-variant-numeric:tabular-nums;min-width:96px;text-align:center}.lap-message{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:40px;font-weight:900;color:var(--accent);text-shadow:0 3px 0 rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .4s ease}.lap-message.show{opacity:1}.countdown{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:90px;font-weight:900;color:var(--accent-2);text-shadow:0 4px 0 rgba(0,0,0,.6),0 0 40px rgba(255,123,84,.5);pointer-events:none}.quit-btn{position:absolute;top:16px;right:16px;padding:8px 14px;font-size:13px}#touch-controls{display:none;position:absolute;bottom:24px;left:0;right:0;justify-content:space-between;padding:0 24px;pointer-events:none}#touch-controls .touch-left,#touch-controls .touch-right{display:flex;gap:10px;pointer-events:auto}.touch-btn{width:64px;height:64px;border-radius:50%;background:#ffffff24;border:1px solid rgba(255,255,255,.28);color:var(--text);font-size:24px;font-weight:900;touch-action:none;-webkit-user-select:none;user-select:none}.touch-btn.active{background:#ffb62780;border-color:var(--accent)}@media(pointer:coarse){#touch-controls{display:flex}}#results-list{list-style:none;width:460px;max-width:92vw;margin-bottom:24px}#results-list li{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;padding:12px 18px;font-weight:700}#results-list li .medal{font-size:18px;margin-right:10px}#results-list li .name{flex:1;text-align:left;margin-left:8px}#results-list li .time{color:var(--muted);font-variant-numeric:tabular-nums}#results-list li.first{border-color:var(--accent);box-shadow:0 0 14px #ffb62759}.result-actions{display:flex;gap:14px}.tabs{display:flex;gap:8px;margin-bottom:22px}.tab-btn{font-family:inherit;background:var(--panel);color:var(--muted);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-weight:700;cursor:pointer}.tab-btn.selected{background:var(--accent);color:#3a2500;border-color:var(--accent)}.records-content{width:640px;max-width:94vw;max-height:52vh;overflow-y:auto;margin-bottom:24px}.records-table{width:100%;border-collapse:collapse;font-size:14px}.records-table th{color:var(--muted);text-align:left;padding:8px 10px;border-bottom:2px solid var(--border);position:sticky;top:0;background:var(--bg)}.records-table td{padding:8px 10px;border-bottom:1px solid rgba(44,63,97,.4);text-align:left}.records-table tr.highlight td{color:var(--accent);font-weight:700}.empty-state{color:var(--muted);padding:30px;font-size:14px}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--panel)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px}@media(max-width:640px){.logo{font-size:48px}.setup-row{flex-direction:column;gap:8px;width:92vw}.setup-row label{text-align:center}}