:root{--bg: #f7f3ea;--card: #ffffff;--ink: #12372a;--muted: #5d6f66;--line: #e4ddce;--brand: #12372a;--accent: #f2711c;--good: #1f8a4c;--good-bg: #e3f4e8;--bad: #c8372d;--bad-bg: #fbe6e3;--o0: #d9472b;--o1: #1f6fb5;--o2: #c98a00;--o3: #2a8c57;--radius: 18px}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--ink);font-family:Outfit,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:17px;line-height:1.45;min-height:100dvh;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}h1{font-size:clamp(1.8rem,6vw,2.6rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}h2{font-size:1.4rem;font-weight:700;line-height:1.25}h3{font-size:1.05rem;font-weight:700}a{color:var(--accent);font-weight:600}code{background:#efe9db;padding:1px 6px;border-radius:6px;font-size:.9em}.muted{color:var(--muted)}.small{font-size:.88rem}.center{text-align:center}.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:var(--accent)}.page{width:100%;max-width:1180px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:18px}.page.narrow{max-width:560px}.page.center{align-items:center;justify-content:center;min-height:100dvh}.page.center>.card,.page.center>.btn{width:100%}.brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.brand-mark{width:76px;height:76px;border-radius:24px;background:var(--brand);display:grid;place-items:center;font-size:2.2rem;margin-bottom:8px;box-shadow:0 10px 24px -10px #12372a99}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:flex;flex-direction:column;gap:12px;text-align:left}.form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.95rem}input{font:inherit;font-size:1.1rem;padding:14px 16px;border-radius:14px;border:2px solid var(--line);background:#fdfcf9;color:var(--ink);width:100%}input:focus{outline:none;border-color:var(--brand)}.code-input{text-transform:uppercase;letter-spacing:.3em;font-weight:700;text-align:center}.btn{font:inherit;font-weight:700;font-size:1.1rem;border:0;cursor:pointer;padding:16px 22px;border-radius:14px;text-align:center;text-decoration:none;display:block;width:100%;transition:transform .08s ease,opacity .15s}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px var(--accent)}.btn.ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}.btn.auto{width:auto}.alert{background:var(--bad-bg);color:#8a231c;border-radius:12px;padding:12px 14px;font-size:.95rem}.room-chip{display:inline-block;align-self:center;background:#e9e2d0;padding:6px 14px;border-radius:999px;font-size:.9rem;letter-spacing:.04em}.room-chip b{letter-spacing:.16em}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:#eef3ee;border-radius:999px;padding:6px 14px;font-weight:600;animation:pop .25s ease}.chip.me{background:var(--brand);color:#fff}@keyframes pop{0%{transform:scale(.7);opacity:0}}.pulse{width:16px;height:16px;border-radius:50%;background:var(--accent);animation:pulse 1.4s infinite;margin:6px auto}@keyframes pulse{0%{box-shadow:0 0 #f2711c80}to{box-shadow:0 0 0 22px #f2711c00}}.timer{background:var(--brand);color:#fff;border-radius:var(--radius);padding:14px 18px 16px;position:sticky;top:8px;z-index:5}.timer-row{display:flex;justify-content:space-between;align-items:baseline}.timer-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;opacity:.8}.timer-value{font-size:2.6rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}.timer.big .timer-value{font-size:clamp(3rem,7vw,5rem)}.timer-track{height:8px;background:#fff3;border-radius:99px;margin-top:10px;overflow:hidden}.timer-fill{height:100%;background:#9be3b4;border-radius:99px;transition:width .2s linear}.timer.low{background:var(--bad)}.timer.low .timer-fill{background:#fff}.timer.low .timer-value{animation:blink 1s infinite}@keyframes blink{50%{opacity:.55}}.next-in{background:#e9e2d0;border-radius:var(--radius);padding:14px 18px;font-weight:700;text-align:center}.q-meta{display:flex;justify-content:space-between;font-size:.88rem;color:var(--muted);font-weight:600}.q-text{font-size:clamp(1.25rem,4.6vw,1.7rem)}.options{display:flex;flex-direction:column;gap:10px}.options.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.option{--c: var(--o0);font:inherit;text-align:left;color:var(--ink);cursor:pointer;position:relative;display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 14px;background:var(--card);border:2px solid var(--line);border-left:8px solid var(--c);border-radius:14px;transition:transform .08s,opacity .2s,background .2s;width:100%}.option.o1{--c: var(--o1)}.option.o2{--c: var(--o2)}.option.o3{--c: var(--o3)}.option:not(:disabled):not(.static):active{transform:scale(.98)}.option:disabled{cursor:default}.option.static{cursor:default;flex-wrap:wrap}.letter{flex:none;width:38px;height:38px;border-radius:10px;background:var(--c);color:#fff;display:grid;place-items:center;font-weight:800}.opt-text{flex:1;font-weight:500;font-size:1.02rem}.option.chosen{border-color:var(--c);background:#fff8ee;box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 25%,transparent)}.option.dim{opacity:.5}.option.correct{border-color:var(--good);background:var(--good-bg);opacity:1}.option.wrong{border-color:var(--bad);background:var(--bad-bg);opacity:1}.mark{font-weight:800;color:var(--good);font-size:1.3rem}.count{flex-basis:100%;display:flex;align-items:center;gap:8px}.count i{display:block;height:8px;min-width:4px;background:var(--c);border-radius:99px}.status-box{background:#e9e2d0;border-radius:14px;padding:14px 16px}.status-box p{margin-top:6px}.status-box.good{background:var(--good-bg);color:#14522e}.status-box.bad{background:var(--bad-bg);color:#8a231c}.winner{background:var(--brand);color:#fff;border-radius:24px;padding:26px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px}.winner .eyebrow{color:#ffc48f}.winner h2{font-size:clamp(1.8rem,7vw,2.6rem);font-weight:800}.winner-trophy{font-size:3rem;line-height:1}.winner-stats{display:flex;gap:28px;margin-top:12px}.winner-stats div{display:flex;flex-direction:column}.winner-stats strong{font-size:1.5rem}.winner-stats span{font-size:.8rem;opacity:.8;text-transform:uppercase;letter-spacing:.08em}.ranking{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.ranking li{display:grid;grid-template-columns:44px 1fr auto auto;gap:10px;align-items:center;padding:10px 6px;border-top:1px solid var(--line)}.ranking li:first-child{border-top:0}.ranking li.me{background:#fff3e6;border-radius:10px}.ranking .pos{font-weight:800;text-align:center}.ranking .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ranking .name em{font-weight:400;color:var(--muted)}.ranking .score{font-weight:800;font-variant-numeric:tabular-nums}.ranking .score small{font-weight:500;color:var(--muted)}.ranking .time{color:var(--muted);font-size:.88rem;font-variant-numeric:tabular-nums;min-width:78px;text-align:right}.ranking.compact li{grid-template-columns:34px 1fr auto 12px;padding:8px 2px}.dot{width:10px;height:10px;border-radius:50%;background:var(--line)}.dot.on{background:var(--good)}.perf{border-top:1px solid var(--line);padding:4px 0}.perf summary{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;cursor:pointer;padding:8px 2px;list-style:none}.perf summary::-webkit-details-marker{display:none}.perf .pos{font-weight:800}.perf .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dots{display:flex;gap:3px}.dots i{width:9px;height:9px;border-radius:50%;background:var(--bad)}.dots i.ok{background:var(--good)}.dots i.skip{background:#c9c2b2}.perf-list{list-style:none;margin:4px 0 10px;padding:0;display:flex;flex-direction:column;gap:8px}.perf-list li{border-left:4px solid var(--bad);background:#faf7f0;border-radius:8px;padding:8px 10px;font-size:.92rem}.perf-list li.ok{border-left-color:var(--good)}.perf-a{display:flex;flex-direction:column;gap:2px;margin-top:4px}.perf-a .right{color:var(--good);font-weight:600}.host-lobby{display:grid;gap:20px;align-items:start}.qr-panel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}.qr-box{background:#fff;padding:14px;border-radius:24px;border:1px solid var(--line);line-height:0}.qr-box svg{width:min(280px,70vw);height:auto}.code-big{font-size:clamp(2.4rem,9vw,4rem);font-weight:800;letter-spacing:.22em;padding-left:.22em}.url{word-break:break-all}.host-game{display:grid;gap:20px;align-items:start}.host-main{display:flex;flex-direction:column;gap:16px;min-width:0}.dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:2px}.kpi span{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}.kpi strong{font-size:1.7rem;font-weight:800;line-height:1.15}.kpi strong small{font-size:1rem;color:var(--muted);font-weight:500}.dash-grid{display:grid;gap:18px;align-items:start}.dash-col{display:flex;flex-direction:column;gap:18px;min-width:0}.qstats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}.qstats-top{display:flex;justify-content:space-between;gap:12px;font-size:.95rem}.bar{height:10px;background:#eee8da;border-radius:99px;overflow:hidden;margin:6px 0 4px}.bar i{display:block;height:100%;background:var(--good);border-radius:99px}@media (min-width: 900px){.host-lobby{grid-template-columns:1.1fr 1fr;padding-top:48px}.host-game{grid-template-columns:1fr 320px}.host-game .q-text{font-size:2.1rem}.host-game .opt-text{font-size:1.2rem}.kpis{grid-template-columns:repeat(4,1fr)}.dash-grid{grid-template-columns:1fr 1fr}}.alert.info{background:#e6eef7;color:#1d4670}.chip.link{text-decoration:none;color:var(--ink);letter-spacing:.12em;font-weight:700}.chip.pick{font:inherit;font-weight:600;border:0;cursor:pointer;color:var(--ink)}.chip.pick.me{color:#fff}.chip.pick:disabled{opacity:.5;cursor:not-allowed}input:disabled{opacity:.6}.head-actions{display:flex;gap:10px;flex-wrap:wrap}.invite{flex-direction:row;align-items:center;gap:16px}.invite>div:last-child{min-width:0;display:flex;flex-direction:column;gap:4px}.qr-box.small{padding:8px;border-radius:14px;flex:none}.qr-box.small svg{width:132px}.leader{background:var(--brand);color:#fff;border-radius:24px;padding:22px 20px;display:flex;flex-direction:column;gap:6px}.leader .eyebrow{color:#ffc48f}.leader h2{font-size:clamp(1.5rem,5vw,2.1rem);font-weight:800;overflow-wrap:anywhere}.leader p{opacity:.9}.ranking.live li{grid-template-columns:40px 1fr auto auto 12px}.kpi strong.clip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kpi{min-width:0}.bar.progress{margin:0;height:12px}.bar.progress i{background:var(--accent);transition:width .4s ease}.q-now{font-weight:600;font-size:1.08rem}.opt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.opt-list li{padding:8px 10px;border-radius:10px;background:#faf7f0;font-size:.95rem}.opt-list li.ok{background:var(--good-bg);color:#14522e;font-weight:600}.game{padding-bottom:calc(104px + env(safe-area-inset-bottom))}.confirm-bar{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:linear-gradient(to top,var(--bg) 70%,transparent)}.confirm-bar .btn{max-width:528px;margin:0 auto}.wait-head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.wait-box{display:flex;align-items:center;gap:16px;text-align:left;width:100%;background:var(--brand);color:#fff;border-radius:var(--radius);padding:16px 18px}.wait-box .pulse{flex:none;margin:0 6px}.wait-box p{font-size:.93rem;opacity:.9;margin-top:2px}.howto{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.howto li{display:flex;gap:12px;align-items:flex-start}.howto li>span{flex:none;width:28px;height:28px;border-radius:50%;background:#fde6d3;color:#a84a0a;display:grid;place-items:center;font-weight:800;font-size:.9rem}.howto p{font-size:.98rem;padding-top:2px}