:root{color-scheme:dark;--bg:#091223;--panel:#111f36;--panel2:#192b49;--line:#3b526e;--text:#f8f7f2;--muted:#b9c7d9;--gold:#ffd16d;--a:#43d7c0;--b:#ff789c;--bad:#ff8793;--good:#73e8b0}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -15%,#263e6a 0,#101d34 35%,var(--bg) 75%);color:var(--text);font:18px/1.55 Tahoma,Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.5}
a{color:var(--gold)}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.stage-glow{position:fixed;inset:0;pointer-events:none;background:linear-gradient(100deg,#43d7c00a,transparent 30%,transparent 70%,#ff789c0a)}
.app{position:relative;max-width:1080px;min-height:100vh;margin:auto;padding:20px 20px 56px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--gold);letter-spacing:.02em}
.brand-logo{width:50px;height:50px;object-fit:contain;border-radius:10px;box-shadow:0 4px 16px #0005}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}
.eyebrow{font-size:.78rem;font-weight:900;color:var(--gold);letter-spacing:.07em}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.22;margin-bottom:14px}
h2{font-size:clamp(1.55rem,3vw,2.2rem);line-height:1.3}
h3{font-size:1.06rem}
.lede{color:var(--muted);font-size:1.05rem;max-width:44rem}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px;align-items:start}
.home-layout{grid-template-columns:minmax(0,1fr) 350px}
.card{background:linear-gradient(150deg,#172a47 0,var(--panel) 68%);border:1px solid var(--line);box-shadow:0 16px 45px #0005;border-radius:22px;padding:26px}
.card + .card{margin-top:16px}
.hero{min-height:410px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,5vw,58px);background:radial-gradient(circle at 85% 8%,#ffd16d1b,transparent 34%),linear-gradient(145deg,#101e34,#0b1527 75%)}
.hero-wordmark{display:block;width:290px;max-width:78%;height:auto;margin:-24px 0 -8px;filter:drop-shadow(0 5px 14px #0008)}
.hero-badges{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}
.hero-badges span{display:inline-flex;align-items:center;gap:5px;background:#0b1b32;border:1px solid #596f8e;border-radius:999px;padding:7px 13px;color:#dbe7f5;font-size:.82rem;font-weight:800}
.hero-badges strong{font-size:1.15rem;color:var(--gold);line-height:1}
.home-showcase{min-height:410px;background:radial-gradient(circle at 50% 28%,#28466b,#12233d 60%,#0d1b31);overflow:hidden}
.mini-scoreboard{display:flex;align-items:center;gap:7px;margin:17px 0 25px}
.mini-team{flex:1;min-width:0;text-align:center;border:1px solid var(--line);border-top:4px solid var(--team);border-radius:13px;background:#0b1a30;padding:10px 5px}
.mini-a{--team:var(--a)}.mini-b{--team:var(--b)}
.mini-team span{display:block;font-size:.73rem;color:var(--muted)}
.mini-team strong{display:block;font-size:1.65rem;color:var(--text);line-height:1.2}
.mini-vs{font-size:.72rem;font-weight:900;color:var(--gold)}
.mini-board-title{text-align:center;color:var(--muted);font-size:.8rem;font-weight:800;margin-bottom:8px}
.mini-board{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.mini-board span{display:grid;place-items:center;min-height:68px;border:1px solid #6f8db6;border-radius:11px;background:linear-gradient(140deg,#2b4976,#172b4c);color:var(--gold);font-size:1.25rem;font-weight:900;box-shadow:inset 0 1px #ffffff20,0 6px 14px #0003}
.mini-steal{display:flex;align-items:center;gap:10px;margin:20px 0 14px;border:1px solid #c49965;border-radius:13px;padding:10px;background:#8a653221}
.mini-steal-mark{display:grid;place-items:center;width:37px;height:37px;flex:none;border-radius:50%;background:var(--gold);color:#18243a;font-size:1.5rem;font-weight:900}
.mini-steal strong,.mini-steal small{display:block}
.mini-steal strong{font-size:.85rem;color:#ffe0a2}
.mini-steal small{color:var(--muted);font-size:.7rem}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{border:1px solid var(--line);border-radius:14px;background:#263956;color:var(--text);padding:12px 18px;font-weight:800;min-height:48px;transition:transform .16s,background .16s,border-color .16s}
.btn:hover:not(:disabled){transform:translateY(-2px);border-color:#7c91ae}
.btn.primary{background:linear-gradient(115deg,#ffe09a,var(--gold));color:#152132;border-color:#fff0bd;box-shadow:0 7px 24px #ffd16d30}
.btn.secondary{background:var(--panel2)}
.btn.quiet{background:transparent;color:var(--muted)}
.btn.danger{border-color:#aa6070;color:#ffd0d7;background:#482432}
.btn.small{font-size:.82rem;padding:8px 11px;min-height:38px}
.btn.full{width:100%}
.muted{color:var(--muted)}
.fine{font-size:.79rem;color:var(--muted);line-height:1.6}
.label{font-size:.82rem;font-weight:800;color:var(--muted);display:block;margin-bottom:7px}
.field{display:block;width:100%;border:1px solid #6680a3;background:#0c1b31;border-radius:12px;padding:12px 14px;color:var(--text);min-height:48px}
.field::placeholder{color:#899ab0}
.field:focus-visible{outline-offset:4px}
.field + .fine{margin-top:20px;position:relative;z-index:1}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{margin-bottom:20px}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.option{border:1px solid var(--line);border-radius:14px;background:#152742;padding:15px;color:var(--text);text-align:right;min-height:64px;font-weight:800}
.option .fine{display:block;margin-top:4px}
.charades-choice{grid-column:1/-1}
.option:hover:not(:disabled){border-color:#98b2d1;background:#20385a}
.option.selected{border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold);background:#413822}
.option.wrong{border-color:var(--bad);color:#ffc7ce;text-decoration:line-through}
.option.used{opacity:.48}
.settings{display:flex;gap:10px;flex-wrap:wrap}
.check-card{display:flex;align-items:center;gap:11px;border:1px solid var(--line);padding:12px 14px;border-radius:12px;background:#142640;font-weight:700}
.check-card input{width:20px;height:20px;accent-color:var(--gold)}
.team-a{--team:var(--a)}.team-b{--team:var(--b)}
.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:16px}
.score{border:1px solid var(--line);border-top:5px solid var(--team);border-radius:15px;background:#12243f;padding:12px 15px}
.score.active{box-shadow:0 0 0 2px var(--team)}
.score-name{color:var(--muted);font-size:.82rem}
.score-value{font-size:clamp(1.45rem,4vw,2rem);font-weight:900;line-height:1.2}
.status{border:1px solid #bd9556;background:#6950203d;border-radius:15px;padding:14px 17px;margin-bottom:16px;color:#ffe0a1;font-weight:800}
.status.good{border-color:#438e77;background:#25665730;color:#a4f4cd}
.status.bad{border-color:#a86470;background:#6f29363d;color:#ffd1d8}
.feedback-card{text-align:center;padding:clamp(28px,6vw,58px);border-width:2px}
.feedback-card.correct{border-color:#54d5a0;background:radial-gradient(circle at 50% 25%,#2c705244,#10283a 65%)}
.feedback-card.wrong{border-color:#f0818e;background:radial-gradient(circle at 50% 25%,#903d4d55,#211d34 65%)}
.feedback-card.review{border-color:#e9be6a;background:radial-gradient(circle at 50% 25%,#94723544,#252438 65%)}
.feedback-symbol{display:grid;place-items:center;width:115px;height:115px;margin:10px auto 22px;border:5px solid currentColor;border-radius:50%;font-size:4.1rem;font-weight:900;line-height:1}
.feedback-card.correct .feedback-symbol{color:var(--good);box-shadow:0 0 45px #73e8b04a}
.feedback-card.wrong .feedback-symbol{color:var(--bad);box-shadow:0 0 45px #ff87934a}
.feedback-card.review .feedback-symbol{color:var(--gold);box-shadow:0 0 45px #ffd16d48}
.feedback-card h1{margin-bottom:8px}
.feedback-card p{color:var(--muted);max-width:34rem;margin:0 auto 24px}
.feedback-points{font-size:1.55rem;font-weight:900;color:var(--good);margin-bottom:24px}
.feedback-next{max-width:340px;margin:auto}
.handoff-note{display:flex;align-items:center;gap:12px;border:1px solid #5a7598;background:#0e2039;border-radius:13px;padding:12px 15px;margin:16px 0;color:#dbe8f8;font-weight:800}
.handoff-note .arrow{font-size:1.8rem;color:var(--gold)}
.actor-card{text-align:center;max-width:760px;margin:auto}
.actor-lock{display:grid;place-items:center;width:88px;height:88px;margin:10px auto 20px;border-radius:22px;background:#ffd16d1c;border:1px solid #cdaa68;font-size:2.4rem}
.actor-prompt{font-size:clamp(1.8rem,5vw,3rem);font-weight:900;color:var(--gold);padding:22px;border:1px solid #b69a64;border-radius:16px;background:#0d1a2d;margin:18px 0}
.actor-warning{font-size:.92rem;color:var(--muted);line-height:1.7}
.progress{color:var(--muted);font-size:.82rem;font-weight:800;margin-bottom:12px}
.progress-track{height:8px;background:#23344d;border-radius:99px;overflow:hidden;margin:8px 0 18px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--a),var(--gold));border-radius:99px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tile{border:1px solid #7190b5;border-radius:17px;background:linear-gradient(130deg,#284972,#172c4d);min-height:118px;color:var(--gold);font-weight:900;font-size:2rem;display:flex;align-items:center;justify-content:center;flex-direction:column}
.tile small{font-size:.8rem;color:var(--muted)}
.tile.used{background:#14243a;color:#90a1b4}
.question-text{font-size:clamp(1.45rem,4vw,2.25rem);line-height:1.65;font-weight:900;text-align:center;padding:24px 12px;min-height:155px;display:grid;place-items:center;border:1px solid #5b779e;border-radius:18px;background:#0d1d35;margin-bottom:16px}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.answer{min-height:74px;text-align:center;font-size:1rem}
.answer strong{color:var(--gold);margin-left:8px}
.timer{font-size:1.3rem;font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
.timer.low{color:var(--bad)}
.question-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.button-row>*{flex:1}
.reveal-answer{font-size:clamp(1.5rem,4vw,2.6rem);font-weight:900;color:var(--gold);text-align:center;margin:10px 0}
.answer-explain{text-align:center;color:var(--muted)}
.award{text-align:center;font-size:1.55rem;font-weight:900;color:var(--good);margin:16px 0}
.review-row{border:1px solid var(--line);border-radius:13px;padding:12px 15px;margin:10px 0;background:#0d1b31}
.review-row strong{display:block;color:var(--muted);font-size:.85rem}
.review-row span{overflow-wrap:anywhere}
.footer-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.footer-actions>*{flex:1}
.side-list{list-style:none;padding:0;margin:0}
.side-list li{padding:11px 0;border-bottom:1px solid #ffffff19;color:var(--muted)}
.side-list li:last-child{border:0}
.winner{text-align:center;font-size:clamp(2rem,6vw,3.8rem);font-weight:900;color:var(--gold);margin:30px 0 22px}
.intro-page{max-width:760px;margin:auto}
.intro-page h1{font-size:clamp(2rem,5vw,3rem);margin:4px 0 20px}
.intro-items{display:grid;gap:10px}
.intro-item{display:flex;align-items:flex-start;gap:14px;background:#0d1d34;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.intro-number{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);color:#172136;font-weight:900}
.intro-item h2{font-size:1.03rem;margin:0 0 2px}
.intro-item p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5}
.intro-start{margin-top:18px}
.callout{border-right:4px solid var(--gold);padding:10px 14px;background:#ffd16d12;border-radius:8px;color:#f2e6cc;margin:15px 0}
.rules-page{max-width:900px;margin:auto}
.rules-page h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:22px}
.rules-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:24px}
.rules-summary div{background:#0d1d34;border:1px solid var(--line);border-radius:13px;padding:12px;text-align:center}
.rules-summary strong{display:block;color:var(--gold);font-size:1.4rem;line-height:1.2}
.rules-summary span{display:block;color:var(--muted);font-size:.83rem;margin-top:4px}
.rules-section{margin:24px 0}
.rules-section h2{font-size:1.2rem;margin-bottom:12px}
.rules-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rule-step{border:1px solid var(--line);border-radius:14px;background:#0d1d34;padding:15px;font-size:.9rem;line-height:1.65}
.rule-step .number{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--gold);color:#172136;font-weight:900;margin-bottom:10px}
.rule-step strong{display:block;color:var(--text);margin-bottom:4px}
.rule-step p{color:var(--muted);margin:0}
.points-table{border-collapse:collapse;width:100%;font-size:.95rem;text-align:center;overflow:hidden;border-radius:12px}
.points-table th,.points-table td{padding:11px 8px;border:1px solid var(--line)}
.points-table th{background:#29405f;color:var(--text)}
.points-table td{background:#0d1d34}
.points-table td:first-child{color:var(--gold);font-weight:900}
.rules-note{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rules-note div{border:1px solid var(--line);border-radius:12px;padding:13px;background:#0d1d34;font-size:.87rem;color:var(--muted)}
.rules-note strong{display:block;color:var(--text);margin-bottom:4px}
.live-region{position:absolute;left:-9999px}
@media(max-width:800px){.layout,.home-layout{grid-template-columns:1fr}.app{padding:14px 12px 42px}.card{padding:20px}.hero{min-height:360px}.side-card{order:2}.home-showcase{min-height:auto}}
@media(max-width:500px){body{font-size:16px}.form-grid,.answers,.rules-steps,.rules-note{grid-template-columns:1fr}.question-text{min-height:130px}.tile{min-height:92px}.btn{padding:11px 13px}.topbar{align-items:flex-start}.top-actions{justify-content:flex-end}.rules-summary{gap:6px}.rules-summary div{padding:10px 4px}.rules-summary strong{font-size:1.1rem}.rules-summary span{font-size:.72rem}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
