/* OffensiveRamen — quiz player styles. Uses the shared design tokens so it
   follows the site's light/dark palette automatically. */

/* ---- landing grid ---- */
.quiz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.quiz-tile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--cream-dark);
  border: 1px solid var(--cream-darker);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, transform .15s ease;
}
.quiz-tile:hover { border-color: var(--red); transform: translateY(-2px); }
.quiz-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.quiz-tile h2 { margin: 0; font-size: 1.05rem; }
.quiz-tile p { margin: 0; color: var(--ink-muted); font-size: 0.86rem; line-height: 1.5; }
.quiz-tile .quiz-tile-meta { margin-top: auto; font-size: 0.78rem; color: var(--ink-faint); }
.quiz-tile--soon { opacity: 0.72; cursor: default; }
.quiz-tile--soon:hover { border-color: var(--cream-darker); transform: none; }
.quiz-badge {
  align-self: flex-start;
  font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.12rem 0.5rem; border-radius: 999px;
  background: var(--red-dim); color: var(--red); border: 1px solid var(--red);
}
.quiz-badge--soon { background: var(--wash); color: var(--ink-muted); border-color: var(--cream-darker); }

/* ---- app shell ---- */
#quiz-app { max-width: 760px; margin: 0 auto; }
.quiz-loading, .quiz-error { padding: 2rem 0; color: var(--ink-muted); }
.quiz-head .back-link, .quiz-runhead + .quiz-card { margin-top: 0.5rem; }

/* ---- setup ---- */
.quiz-setup .quiz-head h1 { margin: 0.4rem 0 0.3rem; }
.quiz-form { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.4rem; }
.quiz-fieldset {
  border: 1px solid var(--cream-darker); border-radius: 10px;
  padding: 0.8rem 1rem 1rem; margin: 0;
}
.quiz-fieldset legend { padding: 0 0.4rem; font-weight: 700; color: var(--ink-light); font-size: 0.9rem; }
.quiz-radios { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.quiz-radio {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.8rem; border: 1px solid var(--cream-darker); border-radius: 8px;
  cursor: pointer; font-size: 0.9rem; min-height: 44px;
}
.quiz-radio:hover { border-color: var(--red); }
.quiz-radio input { accent-color: var(--red); width: 1.05rem; height: 1.05rem; }
.quiz-radio:focus-within { outline: 2px solid var(--red); outline-offset: 2px; }
.quiz-select {
  width: 100%; padding: 0.55rem 0.7rem; min-height: 44px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: 8px; font: inherit;
}
.quiz-select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.quiz-start { align-self: flex-start; min-width: 160px; }
.quiz-best { color: var(--ink-muted); font-size: 0.85rem; margin: 0; }

/* ---- progress ---- */
.quiz-runhead { margin: 0.5rem 0 1rem; }
.quiz-progress { display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-progress-label { font-size: 0.85rem; color: var(--ink-muted); font-weight: 600; }
.quiz-bar { height: 6px; background: var(--cream-darker); border-radius: 999px; overflow: hidden; }
.quiz-bar span { display: block; height: 100%; background: var(--red); transition: width .25s ease; }

/* ---- question card ---- */
.quiz-card {
  background: var(--cream-dark); border: 1px solid var(--cream-darker);
  border-radius: 12px; padding: 1.3rem 1.3rem 1.5rem;
}
.quiz-qtext { font-size: 1.08rem; line-height: 1.5; margin: 0 0 1.1rem; font-weight: 600; }
.quiz-options { display: flex; flex-direction: column; gap: 0.6rem; }
.quiz-opt {
  display: flex; align-items: flex-start; gap: 0.7rem; width: 100%; text-align: left;
  padding: 0.8rem 0.9rem; min-height: 44px;
  background: var(--cream); color: var(--ink);
  border: 1px solid var(--border-control); border-radius: 9px;
  font: inherit; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.quiz-opt:hover:not(:disabled) { border-color: var(--red); }
.quiz-opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.quiz-opt:disabled { cursor: default; }
.quiz-opt-key {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wash); color: var(--ink-muted); font-size: 0.8rem; font-weight: 700;
}
.quiz-opt-text { flex: 1; line-height: 1.45; }
.quiz-opt.is-correct { border-color: var(--color-success); background: var(--sev-good-bg); }
.quiz-opt.is-correct .quiz-opt-key { background: var(--color-success); color: var(--on-accent); }
.quiz-opt.is-wrong { border-color: var(--color-error); background: var(--sev-critical-bg); }
.quiz-opt.is-wrong .quiz-opt-key { background: var(--color-error); color: var(--on-accent); }

/* ---- feedback ---- */
.quiz-feedback { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--cream-darker); }
.quiz-verdict { font-weight: 700; margin: 0 0 0.5rem; }
.quiz-verdict.ok { color: var(--color-success); }
.quiz-verdict.no { color: var(--color-error); }
.quiz-expl { margin: 0 0 0.6rem; line-height: 1.55; color: var(--ink-light); }
.quiz-src { margin: 0; font-size: 0.82rem; color: var(--ink-muted); }
.quiz-src a { color: var(--red); }
.quiz-next { margin-top: 1.1rem; }

/* ---- flashcards ---- */
.quiz-flash .quiz-qtext { font-size: 1.15rem; }
.quiz-flash-ans {
  font-size: 1.15rem; font-weight: 700; color: var(--red);
  margin: 0 0 0.8rem; padding: 0.6rem 0.8rem;
  background: var(--red-dim); border-radius: 8px; border: 1px solid var(--red);
}
.quiz-reveal { margin-top: 0.4rem; }

/* ---- results ---- */
.quiz-results { text-align: center; }
.quiz-score { font-size: 2rem; font-weight: 800; color: var(--red); margin: 0.5rem 0 1.2rem; }
.quiz-score.is-perfect { color: var(--color-success); }
.quiz-perfect { color: var(--color-success); font-weight: 700; margin: -0.8rem 0 1.2rem; letter-spacing: 0.02em; }
.quiz-breakdown { text-align: left; max-width: 520px; margin: 0.6rem auto 1.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.quiz-brow { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.7rem; background: var(--cream-dark); border: 1px solid var(--cream-darker); border-radius: 8px; font-size: 0.88rem; }
.quiz-bname { color: var(--ink-light); }
.quiz-bscore { color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.quiz-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 0.5rem; }

@media (max-width: 480px) {
  .quiz-radios { gap: 0.5rem; }
  .quiz-card { padding: 1.1rem 1rem 1.3rem; }
  .quiz-score { font-size: 1.6rem; }
}