:root{--bg: #14102b;--bg2: #221a46;--fg: #f4f1ff;--muted: #a99fd6;--accent: #ffcf3f;--ok: #3ddc97;--bad: #ff6b6b;--a: #ff5d8f;--b: #4cc9f0;--c: #ffcf3f;--d: #7bd389;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{min-height:100vh;background:radial-gradient(circle at 20% 0%,#3a2a7a 0,var(--bg) 55%)}h1,h2{margin:0 0 .5em;line-height:1.15}.muted{color:var(--muted)}.btn{display:inline-block;border:0;border-radius:14px;padding:14px 22px;background:var(--accent);color:#1a1300;font-weight:700;font-size:1.05rem;text-decoration:none;cursor:pointer}.btn.ghost{background:transparent;color:var(--fg);border:2px solid var(--muted)}.btn.big{font-size:1.3rem;padding:18px 30px}.btn:disabled{opacity:.45;cursor:default}.center{min-height:100vh;display:grid;place-content:center;gap:16px;text-align:center;padding:16px}.banner{position:fixed;top:0;left:0;right:0;background:var(--bad);color:#fff;text-align:center;padding:8px;z-index:10}.home{max-width:1040px;margin:0 auto;padding:32px 16px 64px}.hero{padding:24px 0 32px}.hero h1{font-size:clamp(2rem,5vw,3.4rem)}.lead{font-size:1.2rem;color:var(--muted);max-width:640px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}.card{display:grid;gap:6px;padding:18px;border-radius:18px;background:var(--bg2);color:var(--fg);text-decoration:none;border:2px solid transparent}.card:hover,.card:focus{border-color:var(--accent);outline:none}.tag{justify-self:start;font-size:.8rem;padding:3px 8px;border-radius:99px;background:#ffffff1a}.how ol{color:var(--muted);font-size:1.1rem;line-height:1.7}.host{min-height:100vh;padding:3vh 4vw 8vh;font-size:clamp(16px,1.6vw,28px)}.lobby{display:grid;gap:3vh;justify-items:center;text-align:center}.lobby h1{font-size:2.4em}.join-box{display:flex;gap:2em;align-items:center;background:var(--bg2);padding:1.2em 1.6em;border-radius:24px;text-align:left}.join-box img{border-radius:12px;background:#fff}.url{font-size:1.3em}.code{font-size:4em;font-weight:800;letter-spacing:.15em;color:var(--accent)}.players{display:flex;flex-wrap:wrap;gap:.5em;justify-content:center;max-width:80vw}.chip{background:#ffffff1f;padding:.35em .8em;border-radius:99px}.chip.off{opacity:.4}.meta{display:flex;gap:1.5em;color:var(--muted);align-items:center}.timer{margin-left:auto;font-size:2.4em;font-weight:800;color:var(--accent);min-width:2ch;text-align:right}.q{font-size:2.6em;margin:.6em 0}.options{display:grid;grid-template-columns:1fr 1fr;gap:1em}.opt{display:flex;align-items:center;gap:.7em;background:var(--bg2);border-radius:18px;padding:.9em 1em;font-size:1.4em;transition:opacity .3s}.opt.correct{outline:4px solid var(--ok)}.opt.dim{opacity:.35}.opt .count{margin-left:auto;color:var(--muted)}.letter{display:inline-grid;place-content:center;width:1.8em;height:1.8em;border-radius:10px;font-weight:800;color:#14102b;flex:none}.l0 .letter,.letter.l0{background:var(--a)}.l1 .letter,.letter.l1{background:var(--b)}.l2 .letter,.letter.l2{background:var(--c)}.l3 .letter,.letter.l3{background:var(--d)}.explain{font-size:1.3em;color:var(--muted)}.controls{margin-top:2vh}.scores{display:grid;justify-items:center;gap:3vh}.board{list-style:none;padding:0;margin:0;width:min(900px,90vw);display:grid;gap:.5em}.board li{display:flex;gap:1em;align-items:center;background:var(--bg2);padding:.6em 1em;border-radius:14px;font-size:1.3em}.board li.first{outline:3px solid var(--accent)}.place{font-weight:800;color:var(--accent);width:2ch}.board .score{margin-left:auto;font-weight:700}.mini-join{position:fixed;bottom:1.5vh;left:0;right:0;text-align:center;color:var(--muted)}.player{min-height:100vh;padding:16px;display:flex;flex-direction:column;gap:16px}.player.join{max-width:420px;margin:0 auto;justify-content:center}.player label{display:grid;gap:6px;color:var(--muted)}.player input{font-size:1.4rem;padding:14px;border-radius:12px;border:2px solid var(--bg2);background:var(--bg2);color:var(--fg);text-transform:none}.player input:focus{outline:none;border-color:var(--accent)}.error{color:var(--bad)}.me{display:flex;justify-content:space-between;color:var(--muted)}.pad{display:grid;gap:12px;flex:1}.pad-btn{display:flex;align-items:center;gap:12px;border:0;border-radius:18px;padding:18px;font-size:1.15rem;text-align:left;background:var(--bg2);color:var(--fg);min-height:72px}.pad-btn.picked{outline:4px solid var(--accent)}.pad-btn:disabled:not(.picked){opacity:.4}.center-text{text-align:center;font-size:1.3rem;margin:auto 0}.result.ok{color:var(--ok);font-size:2rem;font-weight:800}.result.bad{color:var(--bad);font-size:2rem;font-weight:800}@media(max-width:700px){.options{grid-template-columns:1fr}.join-box{flex-direction:column;text-align:center}}section{margin-top:32px}.card.featured{border-color:var(--accent)}.form{display:grid;gap:14px;max-width:760px}.form label{display:grid;gap:6px;color:var(--muted)}.form input{font-size:1.05rem;padding:12px;border-radius:10px;border:2px solid var(--bg2);background:var(--bg2);color:var(--fg)}.form input:focus{outline:none;border-color:var(--accent)}.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}.custom{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:1px solid #ffffff22;border-radius:12px;padding:12px}.custom input:first-child{grid-column:1 / -1}.form .check{display:flex;gap:10px;align-items:flex-start}.form .check input{width:22px;height:22px;margin-top:2px}
