:root{--bg:#0e1116;--panel:#12161eeb;--surface:#ffffff0a;--surface-hover:#ffffff14;--text:#eef2f7;--muted:#9aa5b5;--accent:#ffb454;--accent-hover:#ffc46f;--accent-text:#1a1206;--error:#ff6b6b;--ok:#4ecdc4;--border:#ffffff1f;--radius:10px;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}html,body{background:var(--bg);height:100%;margin:0;overflow:hidden}#game{position:fixed;inset:0}#game canvas{display:block}#backdrop{position:fixed;inset:0}#backdrop canvas{display:block}.screen{background:linear-gradient(#0e111659,#0e1116b3);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0;overflow-y:auto}.panel{border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);scrollbar-width:thin;scrollbar-color:#ffffff2e transparent;border-radius:16px;flex-direction:column;gap:18px;width:min(420px,100%);max-height:100%;padding:28px;display:flex;overflow-y:auto}.panel::-webkit-scrollbar{width:8px}.panel::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:999px}.panel-wide{width:min(560px,100%)}.panel-header{flex-direction:column;gap:4px;display:flex}.section{flex-direction:column;gap:8px;display:flex}.section-head{justify-content:space-between;align-items:baseline;display:flex}.title{letter-spacing:-.02em;margin:0;font-size:32px}.title-small{font-size:24px}.subtitle,.hint,.label,.empty{color:var(--muted);margin:0;font-size:14px;line-height:1.45}.label{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600}.field{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;display:flex}.check{cursor:pointer;align-items:center;gap:10px;font-size:14px;display:flex}.check input{width:18px;height:18px;accent-color:var(--accent)}input{font:inherit;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);outline:none;width:100%;padding:12px 14px}input:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px #ffb45433}.code-input{text-transform:uppercase;letter-spacing:.3em;font-weight:600}.button{font:inherit;border-radius:var(--radius);border:1px solid var(--border);color:var(--text);cursor:pointer;white-space:nowrap;background:#ffffff0f;padding:12px 18px;font-weight:600;transition:background .12s,transform .12s}.button:hover:not(:disabled){background:#ffffff1f}.button:active:not(:disabled){transform:translateY(1px)}.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.button:disabled{opacity:.45;cursor:not-allowed}.button.primary{background:var(--accent);color:var(--accent-text);border-color:#0000}.button.primary:hover:not(:disabled){background:var(--accent-hover)}.button.large{padding:14px 20px;font-size:16px}.button.small{padding:8px 12px;font-size:13px}.button.icon{padding:4px 10px;font-size:12px}.button.ghost{background:0 0}.button.chip{text-transform:capitalize;padding:8px 14px;font-size:13px}.button.chip.selected{background:var(--accent);color:var(--accent-text);border-color:#0000}.button.chip:disabled.selected{opacity:.85;cursor:default}.row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.row-end{justify-content:flex-end}.row-between{flex-direction:row;justify-content:space-between}.divider{text-align:center;color:var(--muted);font-size:12px}.error{color:var(--error);margin:0;font-size:13px}.tag{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;background:#ffffff14;border-radius:999px;padding:2px 8px;font-size:11px;font-weight:600;display:inline-block}.tag-lock{color:var(--accent)}kbd{border:1px solid var(--border);color:var(--text);background:#ffffff0f;border-radius:5px;margin:0 1px;padding:1px 6px;font:600 11px/1.5 inherit;display:inline-block}.banner{z-index:10;text-align:center;background:var(--accent);color:var(--accent-text);padding:8px 16px;font-size:13px;font-weight:600;position:fixed;top:0;left:0;right:0}.swatch-0{background:#ff6b6b}.swatch-1{background:#4ecdc4}.swatch-2{background:#ffd166}.swatch-3{background:#a29bfe}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.live-dot{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;align-items:center;gap:6px;font-size:11px;display:inline-flex}.live-dot:before{content:"";background:var(--ok);border-radius:50%;width:7px;height:7px;animation:2s ease-in-out infinite pulse}.lobby-list{flex-direction:column;gap:6px;max-height:240px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.lobby-row{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;display:flex}.lobby-row:hover{background:var(--surface-hover)}.lobby-row-closed{opacity:.6}.lobby-row-main{flex-direction:column;gap:3px;min-width:0;display:flex}.lobby-row-title{white-space:nowrap;text-overflow:ellipsis;align-items:center;gap:6px;font-weight:600;display:flex;overflow:hidden}.lobby-row-meta{color:var(--muted);gap:10px;font-size:12px;display:flex}.lobby-row-difficulty{text-transform:capitalize}.lobby-row-status{font-weight:600}.status-waiting{color:var(--ok)}.join-row{flex-wrap:nowrap}.join-row input{flex:1;min-width:0}.empty{text-align:center;border:1px dashed var(--border);border-radius:var(--radius);padding:18px 12px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.35}}.invite{background:#ffb4540f;border:1px solid #ffb45459;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.invite-actions{flex-wrap:wrap;gap:8px;display:flex}.code{letter-spacing:.3em;color:var(--accent);font-variant-numeric:tabular-nums;margin:4px 0 0;font-size:40px;font-weight:700;line-height:1}.slots{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.slot{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);align-items:center;gap:10px;padding:10px 12px;display:flex}.slot-empty{color:var(--muted);background:0 0;border-style:dashed}.slot-dropped{opacity:.55}.slot-index{width:20px;color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;font-size:12px;font-weight:700}.slot-swatch{border-radius:50%;flex-shrink:0;width:12px;height:12px}.slot-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.slot-tags{gap:4px;display:flex}.actions{border-top:1px solid var(--border);flex-direction:column;gap:10px;padding-top:6px;display:flex}.waiting{text-align:center;border-radius:var(--radius);border:1px dashed var(--border);color:var(--muted);margin:0;padding:14px;font-size:14px;animation:2.4s ease-in-out infinite pulse}.dialog{border:1px solid var(--border);background:var(--panel);width:min(420px,100vw - 32px);color:var(--text);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:0}.dialog::backdrop{background:#0009}.dialog-body{flex-direction:column;gap:14px;padding:24px;display:flex}.dialog-title{letter-spacing:-.01em;margin:0;font-size:20px}#hud{pointer-events:none;flex-direction:column;justify-content:space-between;padding:16px;display:flex;position:fixed;inset:0}.hud-top{justify-content:space-between;align-items:center;display:flex}.hud-actions{align-items:center;gap:8px;display:flex}.hud-actions .hud-gear{background:#00000073;border-radius:999px;place-items:center;width:40px;height:40px;padding:0;display:grid}.hud-gear svg{transition:transform .24s}.hud-gear:hover svg{transform:rotate(60deg)}.hud-top .button{pointer-events:auto}.hud-timer{font-variant-numeric:tabular-nums;text-shadow:0 2px 8px #0009;font-size:28px;font-weight:700}.hud-hint{text-align:center;color:var(--text);text-shadow:0 2px 8px #0009;margin:0;font-size:14px}.hud-hint kbd{text-shadow:none;background:#0000008c;border-color:#ffffff40}.nameplate{color:#fff;white-space:nowrap;background:#0000008c;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600}.label-layer{pointer-events:none;position:absolute;top:0;left:0}