html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;background:#0b0e14;font-family:Segoe UI,system-ui,-apple-system,sans-serif;color:#eef2f6;-webkit-user-select:none;user-select:none}#app{position:fixed;inset:0}#app canvas{display:block;width:100%;height:100%}.ui-overlay{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;z-index:10}.ui-overlay>*{pointer-events:auto}.game-title{margin-top:6vh;font-size:clamp(2rem,6vw,4rem);font-weight:800;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 4px 24px rgba(80,160,255,.45)}.character-picker{position:absolute;bottom:18vh;display:flex;align-items:center;gap:2rem}.char-name{min-width:10rem;text-align:center;font-size:clamp(1.1rem,2.5vw,1.6rem);font-weight:600;letter-spacing:.08em}.nav-arrow{width:3.2rem;height:3.2rem;border-radius:50%;border:2px solid rgba(255,255,255,.35);background:#ffffff14;color:#fff;font-size:1.5rem;cursor:pointer;transition:background .15s,transform .15s}.nav-arrow:hover{background:#ffffff38;transform:scale(1.08)}.primary-button{position:absolute;bottom:7vh;padding:.9rem 3.5rem;font-size:clamp(1rem,2.2vw,1.25rem);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0b0e14;background:linear-gradient(135deg,#6dd66d,#2fbf71);border:none;border-radius:999px;cursor:pointer;box-shadow:0 6px 28px #2fbf7166;transition:transform .15s,box-shadow .15s}.primary-button:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 34px #2fbf718c}.loading-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.1rem;letter-spacing:.2em;opacity:.8}.hud-time{position:absolute;top:2rem;left:50%;transform:translate(-50%);font-size:clamp(1.2rem,3vw,2rem);font-weight:700;font-variant-numeric:tabular-nums;background:#0a0e148c;padding:.4rem 1.4rem;border-radius:999px;border:1px solid rgba(255,255,255,.15)}.hud-hint{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);font-size:clamp(.75rem,1.8vw,.95rem);opacity:.65;letter-spacing:.08em}.countdown{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);font-size:clamp(4rem,14vw,9rem);font-weight:900;text-shadow:0 6px 40px rgba(255,200,60,.5)}.countdown.go{color:#6dd66d;text-shadow:0 6px 40px rgba(109,214,109,.6)}.finish-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#0c1018e0;border:1px solid rgba(255,255,255,.14);border-radius:1.2rem;padding:2.5rem 3.5rem;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.finish-panel h2{margin:0 0 .5rem;font-size:clamp(1.4rem,4vw,2rem);letter-spacing:.12em;text-transform:uppercase}.finish-panel .finish-time{font-size:clamp(2rem,7vw,3rem);font-weight:800;margin-bottom:1.5rem;color:#6dd66d;font-variant-numeric:tabular-nums}.finish-panel .primary-button{position:static}.lobby-overlay{position:fixed;inset:0;z-index:20;pointer-events:none;display:grid;grid-template-columns:minmax(18rem,31rem) 1fr;align-items:center;padding:clamp(1rem,4vw,4rem);background:linear-gradient(90deg,rgba(5,10,18,.92) 0%,rgba(5,10,18,.72) 38%,transparent 70%);box-sizing:border-box}.lobby-overlay>*{pointer-events:auto;grid-column:1}.lobby-overlay header{align-self:end;margin-bottom:1rem}.lobby-overlay h1{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(2rem,5vw,3.4rem)}.lobby-overlay h2,.lobby-overlay h3{margin:0 0 1rem}.lobby-status{color:#a8b5c7;margin-top:.35rem}.lobby-error{background:#b42733eb;border:1px solid #ff7885;padding:.7rem 1rem;border-radius:.65rem;margin-bottom:.8rem}.lobby-panel{align-self:start;max-height:65vh;overflow:auto;padding:1.25rem;border-radius:1rem;background:#0a111be8;border:1px solid rgba(255,255,255,.12);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 70px #00000059}.lobby-panel[hidden],.lobby-error[hidden]{display:none}.lobby-actions{display:grid;grid-template-columns:1fr auto;gap:.65rem;margin-bottom:1.3rem}.lobby-actions .accent{grid-column:1 / -1}.lobby-actions input{min-width:0;color:#fff;background:#101b2a;border:1px solid rgba(255,255,255,.16);border-radius:.6rem;padding:.7rem;letter-spacing:.15em;text-transform:uppercase}.lobby-button{border:1px solid rgba(255,255,255,.18);background:#1b2a3d;color:#fff;border-radius:.65rem;padding:.65rem .9rem;cursor:pointer;font-weight:700}.lobby-button:hover{background:#29405c}.lobby-button:disabled{opacity:.5;cursor:wait}.lobby-button.accent,.ready-button{background:#37b96b;color:#07130c;border-color:#6fe69a}.lobby-button.danger{background:#542530}.room-list-header,.room-row,.player-row,.room-footer,.lobby-character-picker{display:flex;align-items:center;justify-content:space-between;gap:1rem}.room-list{display:grid;gap:.55rem}.room-row,.player-row{background:#ffffff0e;padding:.75rem;border-radius:.65rem}.room-row div{display:grid;gap:.15rem}.room-row span,.lobby-empty,.lobby-hint{color:#9fb0c4;font-size:.9rem}.player-list{display:grid;gap:.45rem;margin-bottom:1rem}.player-row strong{color:#e4ad63;font-size:.8rem}.player-row.ready strong{color:#67dc90}.lobby-character-picker{justify-content:center;background:#0003;padding:.7rem;border-radius:.7rem;margin:.8rem 0}.lobby-character-picker strong{min-width:8rem;text-align:center}.room-footer{margin-top:1rem}.ready-button.is-ready{background:#d09b3d;border-color:#f0c670}@media(max-width:720px){.lobby-overlay{grid-template-columns:1fr;align-items:end;background:linear-gradient(0deg,#050a12f5,#050a1273)}.lobby-panel{max-height:58vh}}.results-list{display:grid;gap:.55rem;min-width:min(28rem,70vw);margin:1.2rem 0 1.5rem}.result-row{display:grid;grid-template-columns:3rem 1fr auto;gap:1rem;text-align:left;padding:.7rem .9rem;border-radius:.65rem;background:#ffffff0f}.result-row strong{color:#6dd66d}.result-row span:last-child{font-variant-numeric:tabular-nums;color:#b8c4d1}