:root{--bg:#1b1f27;--text:#f1f3f5;--muted:#8a919e;--surface:#141820eb;--surface-soft:#141820bf;--border:#ffffff1a;--input:#2b313c;--input-border:#3d4452;--accent:#ff5c9a;--link:#9ecbff;--radius:14px}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--link)}.hidden{display:none!important}.players,.board,.results{margin:0;padding:0;list-style:none}.players li,.board li,.results li{align-items:center;gap:8px;padding:3px 0;font-size:.875rem;display:flex}.players li.me,.board li.me,.results li.me{font-weight:700}.dot{border-radius:50%;flex:none;width:10px;height:10px}.name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.score{font-variant-numeric:tabular-nums}.toasts{bottom:calc(48px + var(--room-panel-h,0px));pointer-events:none;z-index:20;flex-direction:column;gap:6px;display:flex;position:fixed;left:16px}.toast{background:#141820d9;border-radius:8px;padding:6px 12px;font-size:.875rem;transition:opacity .7s;animation:.35s cubic-bezier(.2,1.4,.4,1) toast-in}@keyframes toast-in{0%{opacity:0;transform:translate(-30px)scale(.9)}}.toast.fade{opacity:0}.room-panel{z-index:11;background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;gap:6px;max-width:min(300px,100vw - 32px);padding:6px;font-size:.875rem;display:flex;position:fixed;bottom:16px;left:16px;box-shadow:0 6px 20px #0006}.room-panel-row{flex-wrap:wrap;gap:6px;display:flex}.room-panel .spectators{padding:0 4px}.room-panel .spectators .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.room-panel button{font:inherit;color:inherit;cursor:pointer;border:1px solid var(--border);white-space:nowrap;background:#ffffff0f;border-radius:6px;padding:4px 10px}.room-panel button:hover:not(:disabled){background:#ffffff1f}.room-panel button:disabled{opacity:.5;cursor:not-allowed}.room-panel .seat-in{padding:2px 8px;font-size:.8125rem}.room-host-menu{flex-direction:column;align-items:stretch;gap:4px;margin-bottom:6px;display:flex}.room-host-menu button{text-align:left}.room-panel .restart{color:var(--muted)}.restart-confirm{flex-wrap:wrap;gap:6px;display:flex}.restart-warning{flex-basis:100%}.room-panel button.danger{color:#fff;background:#c92a2a;border-color:#c92a2a}.room-panel button.danger:hover{background:#e03131}.game-log{left:16px;bottom:calc(24px + var(--room-panel-h,0px));z-index:21;background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-direction:column;width:min(360px,100vw - 32px);max-height:min(55vh,480px);font-size:.875rem;display:flex;position:fixed;box-shadow:0 10px 30px #00000080}.game-log-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:6px 8px 6px 12px;font-weight:700;display:flex}.game-log-close{font:inherit;color:var(--muted);cursor:pointer;background:0 0;border:none;font-size:1.25rem;line-height:1}.game-log-list{-webkit-user-select:text;user-select:text;margin:0;padding:6px 12px 10px;list-style:none;overflow-y:auto}.game-log-list li{padding:2px 0;line-height:1.5}.game-log-list li.heading{border-top:1px solid var(--border);color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:8px;padding-top:6px;font-size:.75rem;font-weight:700}.game-log-list li.heading:first-child{border-top:none;margin-top:0}.log-open .toasts{display:none}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);z-index:10;-webkit-user-select:none;user-select:none;flex-direction:column;gap:10px;width:min(360px,100vw - 32px);max-height:calc(100vh - 32px);padding:18px 20px;display:flex;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:0 10px 40px #00000080}.panel h1{margin:0 0 4px;font-size:1.625rem}.settings-rows{flex-direction:column;gap:10px;display:flex}.field{justify-content:space-between;align-items:center;gap:10px;font-size:.875rem;display:flex}.field input,.field select{background:var(--input);border:1px solid var(--input-border);width:160px;color:inherit;font:inherit;border-radius:6px;padding:5px 8px}.field input[type=checkbox]{width:auto}.panel button{font:inherit;cursor:pointer;background:var(--input-border);color:inherit;border:0;border-radius:8px;padding:8px 12px}.panel button.start{background:var(--accent);padding:10px;font-size:1rem;font-weight:700}.panel button:disabled{opacity:.5;cursor:default}.blocked{text-align:center;color:var(--muted);font-size:.8125rem}.foot{justify-content:space-between;font-size:.75rem;display:flex}.room,.status{opacity:.75;font-size:.75rem}.back{text-decoration:none}.waiting{text-align:center;opacity:.85;padding:16px 0}.lobby-members .score{color:var(--muted);font-size:.75rem}.prefs-btn{z-index:30;border:1px solid var(--border);background:var(--surface);width:2.5rem;height:2.5rem;color:var(--text);cursor:pointer;border-radius:50%;font-size:1.25rem;line-height:1;position:fixed;top:12px;right:12px;box-shadow:0 2px 10px #0006}.prefs-btn:focus-visible,.prefs-panel :focus-visible,.dialog :focus-visible{outline:2px solid var(--link);outline-offset:2px}.prefs-panel{z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);-webkit-user-select:none;user-select:none;flex-direction:column;gap:14px;width:min(320px,100vw - 24px);max-height:calc(100vh - 72px);padding:14px 16px;display:flex;position:fixed;top:60px;right:12px;overflow-y:auto;box-shadow:0 10px 40px #00000080}.prefs-panel h2{margin:0;font-size:1.125rem}.pref{flex-direction:column;gap:6px;font-size:.875rem;display:flex}.pref-head{justify-content:space-between;display:flex}.pref-value{font-variant-numeric:tabular-nums;color:var(--muted)}.pref-action{width:100%;font:inherit;text-align:left;color:inherit;background:var(--input);border:1px solid var(--input-border);cursor:pointer;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;font-size:.8125rem;font-weight:600;transition:border-color .15s,background .15s;display:flex}.pref-action:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--input))}.pref-action-go{color:var(--accent);margin-left:auto;font-size:1.25rem;line-height:1;transition:transform .15s}.pref-action:hover .pref-action-go{transform:translate(3px)}.pref select,.pref input[type=number]{background:var(--input);border:1px solid var(--input-border);color:inherit;font:inherit;border-radius:6px;padding:6px 8px}.pref input[type=range]{width:100%;accent-color:var(--accent)}.pref.disabled{opacity:.6}.pref-help,.pref-note{color:var(--muted);font-size:.75rem}.pref-note{color:#ffd8a8}.prefs-done{font:inherit;cursor:pointer;background:var(--input-border);color:inherit;border:0;border-radius:8px;padding:8px}.pref-toggle{border:1px solid var(--border);background:var(--surface-soft);border-radius:8px;flex-direction:column;display:inline-flex;overflow:hidden;box-shadow:0 2px 8px #0000004d}.pref-toggle button{font:inherit;cursor:pointer;color:var(--muted);white-space:nowrap;background:0 0;border:0;padding:6px 10px;font-size:.8125rem}.pref-toggle button+button{border-top:1px solid var(--border)}.pref-toggle button.on{background:var(--accent);color:#fff;font-weight:600}.pref-toggle button:focus-visible{outline:2px solid var(--link);outline-offset:-2px}.dialog-backdrop{z-index:40;background:#0000008c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);-webkit-user-select:text;user-select:text;flex-direction:column;width:min(860px,100%);max-height:calc(100vh - 32px);display:flex;box-shadow:0 20px 60px #0009}.dialog.dialog-full{width:100%;height:calc(100vh - 32px)}.dialog-head{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;display:flex}.dialog-title{margin:0;font-size:1.375rem}.dialog-close{font:inherit;background:var(--input);width:2.25rem;height:2.25rem;color:inherit;cursor:pointer;border:0;border-radius:8px;font-size:1.5rem;line-height:1}.dialog-body{padding:16px 20px 24px;overflow-y:auto}body{padding:48px 16px}header{text-align:center;max-width:880px;margin:0 auto 32px}header h1{margin:0;font-size:clamp(32px,6vw,52px)}.lead{color:var(--muted);margin:8px 0 20px;font-size:17px}.who{color:var(--muted);align-items:center;gap:10px;font-size:14px;display:inline-flex}input{background:var(--input);border:1px solid var(--input-border);color:inherit;font:inherit;border-radius:8px;min-width:0;padding:8px 10px}.games{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;max-width:880px;margin:0 auto;display:grid}.game{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);flex-direction:column;gap:8px;padding:20px;display:flex}.game .emoji{font-size:40px}.game h2{margin:0;font-size:22px}.tagline{color:#c9ced6;flex:1;margin:0;font-size:14px;line-height:1.45}.meta,.live{color:var(--muted);font-size:12px}.live:empty{display:none}.play{text-align:center;background:var(--accent);color:#fff;border-radius:8px;margin-top:6px;padding:10px;font-weight:700;text-decoration:none;display:block}.join-row{gap:8px;display:flex}.join-row input{flex:1}.join{font:inherit;cursor:pointer;background:var(--input-border);color:inherit;border:0;border-radius:8px;padding:8px 14px}