:root{--bg: #14101f;--bg-soft: #1f1830;--card: #241c3a;--ink: #f6f1ff;--muted: #b9aecf;--accent: #ff5d8f;--accent-ink: #2b0412;--secondary: #7c6cf0;--good: #3ddc84;--bad: #ff6b6b;--line: #3a2f56;--radius: 14px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(120% 60% at 50% -10%,#2c2147 0%,var(--bg) 60%) fixed,var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;min-height:100dvh}.app{display:flex;flex-direction:column;margin:0 auto;max-width:34rem;min-height:100dvh;padding:1rem 1rem 0}.app-main{flex:1}.app-footer{color:var(--muted);font-size:.75rem;padding:1.25rem 0 1rem;text-align:center}.home{display:flex;flex-direction:column;gap:1rem}.hero{padding:1.5rem 0 .5rem;text-align:center}.hero-title{font-size:3.5rem;letter-spacing:.08em;line-height:1;margin:0;text-shadow:0 4px 0 var(--accent)}.hero-subtitle{color:var(--muted);margin:.5rem 0 0}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem}.card-title{font-size:1.05rem;margin:0 0 .75rem}.field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.85rem}.field-label{color:var(--muted);font-size:.85rem}.input{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;color:var(--ink);font-size:1.05rem;min-height:3rem;padding:.65rem .85rem;width:100%}.input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:1px}.input-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.6rem;letter-spacing:.35em;text-align:center;text-transform:uppercase}.btn{border:none;border-radius:999px;cursor:pointer;font-size:1.05rem;font-weight:700;min-height:3rem;padding:.7rem 1.4rem;width:100%}.btn:disabled{cursor:not-allowed;opacity:.55}.btn-primary{background:var(--accent);color:#fff}.btn-secondary{background:var(--secondary);color:#fff}.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted);margin-top:.75rem}.link{background:none;border:none;color:inherit;cursor:pointer;font:inherit;padding:0;text-decoration:underline}.alert{border-radius:10px;margin:0;padding:.75rem 1rem}.alert-error{background:#ff6b6b24;border:1px solid var(--bad);color:#ffc9c9}.muted{color:var(--muted)}.room{display:flex;flex-direction:column;gap:1rem;padding-top:.5rem}.room-header{align-items:center;display:flex;justify-content:space-between;gap:1rem}.room-code-label{color:var(--muted);font-size:.8rem;margin:0;text-transform:uppercase}.room-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:2.75rem;font-weight:800;letter-spacing:.18em;line-height:1.1;margin:0}.dot{border-radius:999px;font-size:.8rem;padding:.3rem .8rem;white-space:nowrap}.dot-on{background:#3ddc8426;border:1px solid var(--good);color:var(--good)}.dot-off{background:#ff6b6b26;border:1px solid var(--bad);color:#ffc9c9}.players{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0;padding:0}.player{align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;display:flex;justify-content:space-between;padding:.6rem .85rem}.player-me{border-color:var(--accent)}.player-active{border-color:var(--good)}.player-name{align-items:center;display:flex;flex-wrap:wrap;font-weight:600;gap:.4rem}.player-score{color:var(--muted);font-variant-numeric:tabular-nums}.badge{background:var(--line);border-radius:999px;font-size:.7rem;font-weight:700;padding:.15rem .55rem;text-transform:uppercase}.badge-host{background:var(--secondary);color:#fff}.badge-turn{background:var(--good);color:#062b18}.badge-off{background:transparent;border:1px solid var(--bad);color:#ffc9c9}.prompt{background:var(--bg-soft);border-left:4px solid var(--accent);border-radius:0 10px 10px 0;font-size:1.25rem;font-weight:600;margin:0 0 .75rem;padding:.75rem 1rem}.turn{margin:0 0 .5rem}.countdown{font-size:1.6rem;font-variant-numeric:tabular-nums;font-weight:800;margin:0 0 .75rem}.answer-form{display:flex;flex-direction:column}.ranking{display:flex;flex-direction:column;gap:.5rem;list-style:none;margin:0 0 1rem;padding:0}.rank{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:.6rem .85rem}.rank-winner{border-color:var(--good)}.rank-position{color:var(--muted);font-variant-numeric:tabular-nums}@media(min-width:40rem){.hero-title{font-size:4.5rem}.room-code{font-size:3.5rem}}