:root{--bg:#0a0a0f;--surface:#13131f;--surface2:#1c1c28;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);--ink:#ededf5;--muted:#8585a5;--accent:#7c5cfc;--accent-ink:#fdfcff;--accent2:#fc5c7d;--good:#4ee49a;--warn:#ffd166;--connect-red:#ff5d72;--connect-yellow:#ffd74f;--word-correct:#2f9e62;--word-present:#c7932d;--word-absent:#444653;--font-display:'Syne',system-ui,sans-serif;--font-body:'DM Sans',system-ui,sans-serif;--sa-top:env(safe-area-inset-top,0px);--sa-bottom:env(safe-area-inset-bottom,0px)}
[data-theme="light"]{--bg:#f4f4f8;--surface:#fff;--surface2:#eeeef5;--border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.14);--ink:#18181f;--muted:#666681;--accent:#6d3ff5;--accent2:#d93267;--good:#198754;--warn:#946300}
[data-theme="pastel"]{--bg:#fdf4fb;--surface:#fff8fe;--surface2:#f3e8f8;--ink:#2e1a3a;--muted:#806c92;--accent:#a953ef}
[data-theme="pastel-dark"]{--bg:#1a1326;--surface:#241a33;--surface2:#2e2040;--ink:#f3e8ff;--muted:#aa96c2;--accent:#b66dff}
[data-theme="mint"]{--bg:#effaf4;--surface:#fff;--surface2:#dbf3e5;--ink:#143a2a;--muted:#4d7967;--accent:#238b63}
[data-theme="mint-dark"]{--bg:#0f2018;--surface:#162b21;--surface2:#1f3a2c;--ink:#e4f5ed;--muted:#91b5a4;--accent:#3dc088}
[data-theme="peach"]{--bg:#fff5f0;--surface:#fffaf7;--surface2:#ffe7dc;--ink:#402118;--muted:#875f50;--accent:#d95f38}
[data-theme="peach-dark"]{--bg:#1e1410;--surface:#2a1c16;--surface2:#3a2820;--ink:#ffe7dc;--muted:#c69480;--accent:#ff8a65}
[data-theme="sky"]{--bg:#eff6fd;--surface:#fff;--surface2:#dbe9f7;--ink:#132945;--muted:#56728f;--accent:#3578c7}
[data-theme="sky-dark"]{--bg:#0d1722;--surface:#152233;--surface2:#1e2f45;--ink:#e4edfa;--muted:#8fa8c8;--accent:#4a90e2}
*,*::before,*::after{box-sizing:border-box}html,body{margin:0;overflow-x:clip;background:var(--bg);color:var(--ink)}body{min-height:100dvh;font-family:var(--font-body);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.shell{width:min(100% - 20px,700px);margin:auto;padding:calc(var(--sa-top) + 8px) 0 calc(var(--sa-bottom) + 18px)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.back{display:inline-flex;align-items:center;min-height:42px;padding:0 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--muted);text-decoration:none;font-size:13px;white-space:nowrap}.brand{font:800 18px/1 var(--font-display)}.beta{padding:3px 8px;border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);border-radius:999px;color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent);font-size:10px;letter-spacing:.08em}.menu-inner{width:min(100%,520px);margin:auto;display:grid;gap:12px}.menu-copy{padding:8px 4px 2px}.menu-copy h1{margin:0 0 5px;font:800 clamp(24px,6vw,32px)/1.05 var(--font-display);overflow-wrap:anywhere}.menu-copy p{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.panel{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:15px}.panel-title,.eyebrow,.label,.field label{display:block;margin:0 0 9px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.mode-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.mode-tile{min-height:110px;padding:14px;border:1px solid var(--border);border-radius:18px;background:var(--surface2);color:var(--ink);cursor:pointer;text-align:center}.mode-tile strong{display:block;margin-top:7px;font:800 14px var(--font-display)}.mode-tile small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.mode-icon{display:block;font:800 28px/1 var(--font-display);color:var(--accent)}.mode-tile:hover,.mode-tile.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--surface))}.stack{display:grid;gap:10px}.row,.action-grid{display:flex;gap:8px}.row>*{min-width:0}.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;padding:0 16px;border:0;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-weight:800;cursor:pointer;white-space:nowrap;transition:filter .12s,transform .1s}.btn:hover{filter:brightness(1.08)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.secondary{border:1px solid var(--border);background:var(--surface2);color:var(--ink)}.btn.danger{border:1px solid color-mix(in srgb,var(--accent2) 35%,transparent);background:color-mix(in srgb,var(--accent2) 12%,var(--surface));color:var(--accent2)}.input,select{width:100%;min-height:46px;padding:0 13px;border:1px solid var(--border);border-radius:11px;outline:0;background:var(--surface2);color:var(--ink);font-weight:600}.input:focus,select:focus{border-color:var(--accent)}.btn:focus-visible,.input:focus-visible,select:focus-visible,.mode-tile:focus-visible,.key:focus-visible,.slot:focus-visible,.party-card:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 42%,transparent);outline-offset:2px}.field{display:grid;gap:6px}.field label{margin:0}.hidden{display:none!important}.status{min-height:20px;color:var(--muted);font-size:13px;text-align:center}.status.error{color:var(--accent2)}.status.success{color:var(--good)}.play-layout,.intro{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:12px;align-items:start}.board-panel,.main-panel{display:grid;justify-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:14px}.side-panel,.intro>aside{display:grid;gap:9px}.side-card,.intro>.panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:12px}.intro>.panel:first-child{min-width:0}.intro>.panel.stack{display:grid}.eyebrow{margin-bottom:7px}.intro h2,.panel h2{margin:0;font:800 clamp(17px,4vw,22px)/1.15 var(--font-display)}.intro p,.panel p{margin:5px 0;color:var(--muted);font-size:13px;line-height:1.45}.players{display:grid;gap:6px}.player{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:13px}.host{color:var(--warn);font-size:9px;font-weight:800;text-transform:uppercase}.score{font-family:var(--font-display)}.room-code{padding:13px;border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:12px;background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--accent);font:800 clamp(24px,8vw,38px)/1 var(--font-display);letter-spacing:.16em;text-align:center}.tabs{display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}.tabs button{flex:1;min-width:0;min-height:38px;border:0;border-radius:8px;background:transparent;color:var(--muted);font-weight:800;white-space:nowrap}.tabs button.on{background:var(--accent);color:var(--accent-ink)}.notice{padding:9px 11px;border-radius:9px;background:var(--surface2);color:var(--muted);font-size:12px;line-height:1.4}.source{font-size:11px;color:var(--muted)}.source a{color:var(--accent)}.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.party-card{color:inherit;text-decoration:none}.leaderboard{width:100%;border-collapse:collapse;font-size:13px}.leaderboard th,.leaderboard td{padding:8px 6px;border-bottom:1px solid var(--border);text-align:left}.leaderboard th{color:var(--muted);font-size:10px;text-transform:uppercase}.accuracy{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.metric{min-width:0;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:11px;color:var(--muted)}.metric b{display:block;color:var(--ink);overflow-wrap:anywhere}.result-number{font:800 clamp(36px,9vw,64px)/1 var(--font-display);color:var(--warn)}
@media(max-width:620px){.play-layout,.intro{grid-template-columns:minmax(0,1fr)}.side-panel,.intro>aside{grid-template-columns:repeat(2,minmax(0,1fr))}.side-panel .players,.intro>aside .players{grid-column:1/-1}.shell{width:min(100% - 16px,700px)}}
@media(max-width:390px){.mode-tiles,.game-grid{grid-template-columns:minmax(0,1fr)}.side-panel,.intro>aside{grid-template-columns:minmax(0,1fr)}.accuracy{gap:4px}.metric{padding:8px 5px}.row,.action-grid{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.mode-tiles.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.main-panel>*{max-width:100%}.main-panel h2{margin:0;font:800 clamp(17px,4vw,22px)/1.15 var(--font-display)}.main-panel p{margin:5px 0;color:var(--muted);font-size:13px;line-height:1.45}
@media(max-width:390px){.mode-tiles.three{grid-template-columns:minmax(0,1fr)}}