/* Quiz styles shared by the live quiz (quiz.html) and practice at home (practice.html). */
:root { --brand: #7b3fe4; --brand-soft: #ece3fc; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #a77bff; --brand-ink: #1b0a3a; --brand-soft: #251a3d; } }
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px 32px; }
header.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
header.top .wrap { padding-top: calc(10px + env(safe-area-inset-top)); padding-bottom: 10px; }
.tbar { height: 8px; border-radius: 99px; background: var(--card2); overflow: hidden; margin-top: 8px; }
.tbar i { display: block; height: 100%; background: var(--brand); transition: width .25s linear; }
.tbar.low i { background: var(--bad); }
main { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.qtext { font-size: 1.35rem; font-weight: 700; line-height: 1.3; }
.situation { background: var(--brand-soft); border-radius: 12px; padding: 10px 12px; font-weight: 600; }
.big2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vbtn { border: 2px solid var(--line); background: var(--card); border-radius: 16px; padding: 16px 10px; font-size: 1.15rem; font-weight: 800; cursor: pointer; color: var(--ink); }
.vbtn.on.scam { border-color: #e53935; background: #ffe2e2; color: #8e1b1b; }
.vbtn.on.legit { border-color: #2e7d32; background: #e1f5e3; color: #1b5e20; }
.bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bet { border: 2px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 6px; cursor: pointer; text-align: center; color: var(--ink); }
.bet b { display: block; font-size: 1.3rem; }
.bet span { font-size: .72rem; color: var(--muted); }
.bet.on { border-color: var(--brand); background: var(--brand-soft); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { border: 0; border-radius: 16px; padding: 18px 12px; font-size: 1.05rem; font-weight: 700; color: #fff; cursor: pointer; min-height: 84px; text-align: left; }
.opt:nth-child(1) { background: #e53935; } .opt:nth-child(2) { background: #1e88e5; } .opt:nth-child(3) { background: #f9a825; color: #1a1300; } .opt:nth-child(4) { background: #43a047; }
.opt.dim { opacity: .35; } .opt.right { outline: 4px solid var(--ink); }
.result { text-align: center; padding: 22px 16px; border-radius: 20px; }
.result.good { background: #e1f5e3; color: #1b5e20; } .result.bad { background: #ffe2e2; color: #8e1b1b; } .result.none { background: var(--card2); }
.result .e { font-size: 3.4rem; line-height: 1; }
.result h2 { font-size: 1.6rem; margin-top: 6px; }
.flags li { margin: 4px 0; }
.join { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.join .card { width: min(100%, 420px); text-align: center; }
.join h1 { font-size: 2.3rem; letter-spacing: -.03em; }
.code-in { text-align: center; font-size: 2rem; font-weight: 800; letter-spacing: .35em; text-transform: uppercase; }
.code-chip { font-size: 1.05rem; letter-spacing: .15em; color: var(--brand); }
.lb > div { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 8px 6px; }
.lb .me { background: var(--brand-soft); border-radius: 10px; }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.12); } }
@media (prefers-color-scheme: dark) { .result.good, .result.bad { color: #111; } .vbtn.on.scam, .vbtn.on.legit { color: #111; } }