/* QuizBlitz — gold accent from base.css. */
/* The hero sits inside .wrap, so break it out to full width. */
.hero--bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:max(40px,calc(50vw - var(--max)/2 + 40px));
  padding-right:max(40px,calc(50vw - var(--max)/2 + 40px))}
.hero--bleed .wrap{padding:0;max-width:none}

.row{display:grid;gap:14px;margin-bottom:14px}
.row--2{grid-template-columns:1fr 1fr}
@media(max-width:640px){.row--2{grid-template-columns:1fr}}

.setup-card{max-width:560px;margin:0 auto;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:26px}
.btn--big{padding:15px;font-size:1rem;margin-top:8px}
.hint{font-size:.82rem;color:var(--tx-3);text-align:center;margin:12px 0 0;min-height:1.2em}

.best{max-width:560px;margin:26px auto 0}
.best__row{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:7px;font-size:.9rem}
.best__row b{color:var(--accent)}
.best h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.11em;
  color:var(--tx-3);margin-bottom:12px;text-align:center}

/* ---- HUD ---- */
.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:26px 0 10px}
.hud__item{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px;text-align:center}
.hud__l{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--tx-3)}
.hud__v{display:block;font-size:1.25rem;font-weight:800;margin-top:2px}
.hud__item--time .hud__v{color:var(--accent-2)}
.hud__item--time.warn .hud__v{color:var(--bad)}
.timebar{height:5px;background:var(--bg-3);border-radius:99px;overflow:hidden;margin-bottom:22px}
.timebar__f{height:100%;width:100%;background:var(--gold);
  border-radius:99px;transition:width .2s linear}
.timebar__f.warn{background:var(--bad)}

/* ---- Question ---- */
.q-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px}
@media(max-width:640px){.q-card{padding:20px}}
.q-tags{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.q-tag{font-size:.7rem;font-weight:600;padding:4px 10px;border-radius:999px;
  background:var(--bg-3);border:1px solid var(--line);color:var(--tx-2)}
.q-tag--easy{color:var(--ok);border-color:rgba(52,211,153,.35)}
.q-tag--medium{color:var(--warn);border-color:rgba(251,191,36,.35)}
.q-tag--hard{color:var(--bad);border-color:rgba(248,113,113,.35)}
.q-text{font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.4;margin:0 0 24px}

.answers{display:grid;gap:11px}
.ans{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 17px;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--r-sm);color:var(--tx);font-size:.98rem;font-weight:500;
  cursor:pointer;transition:.14s}
.ans:hover:not(:disabled){border-color:var(--accent);background:var(--line)}
.ans:disabled{cursor:default}
.ans__k{width:28px;height:28px;border-radius:7px;background:var(--bg);
  border:1px solid var(--line-2);display:grid;place-items:center;font-size:.8rem;
  font-weight:700;flex:none;color:var(--tx-2)}
.ans--right{border-color:var(--ok);background:rgba(52,211,153,.13)}
.ans--right .ans__k{background:var(--ok);color:#04231a;border-color:var(--ok)}
.ans--wrong{border-color:var(--bad);background:rgba(248,113,113,.12)}
.ans--wrong .ans__k{background:var(--bad);color:#2b0808;border-color:var(--bad)}
.ans--dim{opacity:.45}

.q-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.verdict{font-weight:700}
.verdict--ok{color:var(--ok)}
.verdict--no{color:var(--bad)}
.quit{display:block;margin:20px auto 0;color:var(--tx-3)}

/* ---- Results ---- */
.result-card{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px;text-align:center;margin-top:30px}
.result__ring{width:132px;height:132px;border-radius:50%;margin:0 auto 18px;
  display:grid;place-items:center;font-size:1.7rem;font-weight:800;
  background:conic-gradient(var(--gold) 0deg,var(--bg-3) 0deg);position:relative}
.result__ring::before{content:'';position:absolute;inset:11px;border-radius:50%;
  background:var(--bg-2)}
.result__ring span{position:relative}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;
  margin:24px 0}
.stat{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.stat__n{font-size:1.5rem;font-weight:800;line-height:1.1;
  color:var(--gold)}
.stat__l{font-size:.68rem;color:var(--tx-3);text-transform:uppercase;
  letter-spacing:.08em;margin-top:4px}
.acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.review-h{margin:34px 0 14px;font-size:1.1rem}
.rev{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--bad);
  border-radius:var(--r-sm);padding:15px 18px;margin-bottom:9px}
.rev--ok{border-left-color:var(--ok)}
.rev__q{font-weight:600;margin-bottom:7px;font-size:.95rem}
.rev__a{font-size:.85rem;color:var(--tx-2)}
.rev__a b{color:var(--ok)}
.rev__a i{color:var(--bad);font-style:normal;text-decoration:line-through}

.seo{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);
  color:var(--tx-2);max-width:760px;margin-left:auto;margin-right:auto}
.seo h2{color:var(--tx);font-size:1.25rem;margin-top:26px}
.seo strong{color:var(--tx)}