/* Styles for the ten-level quiz.
 *
 * Loaded by /quiz/ on top of page.css. It is its own file rather than part of
 * style.css because the quiz no longer lives on the map page -- the home page
 * carries only a teaser card, whose styles stay in style.css with the rest of
 * that page's furniture.
 *
 * page.css defines --panel, --panel-border, --panel-border-strong, --text,
 * --muted and --accent but not --accent-2, so that one is declared here. Every
 * other colour is inherited, which is what keeps this consistent with the prose
 * pages it now sits alongside. */

:root {
  --accent-2: #5e5ce6;
  --quiz-right: #6fcf97;
  --quiz-wrong: #e5534b;
}

.quiz-section {
  margin: 28px 0 0;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  padding: 26px 28px;
}

/* ---- Level header and progress ---- */

.quiz-progress {
  margin-bottom: 20px;
}

.quiz-level-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.quiz-level-num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The level name is the joke and the reward, so it gets real size rather than
   sitting in the label row as small print. */
.quiz-level-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* One pip per question. Colour alone would not say which were right -- the same
   red/green pairing the option states avoid relying on -- so a wrong pip is also
   hollow and a right one solid. */
.quiz-pips {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}

.quiz-pip {
  width: 22px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid transparent;
}

.quiz-pip.is-current {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.quiz-pip.is-right {
  background: var(--quiz-right);
}

.quiz-pip.is-wrong {
  background: transparent;
  border-color: var(--quiz-wrong);
}

/* ---- The question ---- */

/* The period is the question. Without it "which two happened in the same
   period" has no single answer, so it gets the same weight as the year badge on
   the map rather than being tucked into the body text. */
.quiz-period {
  margin: 0 0 16px;
  font-size: clamp(1.1rem, 2.4vw, 1.45rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  align-items: stretch;
}

/* Always a column: the statement row, the dateless description under it, and
   after grading a link out to Wikipedia. is-clickable marks the ungraded state,
   which is the only one that should look interactive. */
.quiz-option {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.quiz-option.is-clickable {
  cursor: pointer;
}

.quiz-option.is-clickable:hover {
  border-color: var(--panel-border-strong);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-1px);
}

.quiz-option.is-clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.quiz-option.is-picked {
  border-color: var(--accent);
  background: rgba(41, 151, 255, 0.14);
}

/* Hovering a selected option used to wipe its blue border. `.is-clickable:hover`
   is three selectors to `.is-picked`'s two, so it won the border-colour outright
   and the card looked deselected under the cursor -- exactly where the user is
   looking when deciding whether their pick registered. This restates the
   selected border at a higher specificity and brightens the fill instead, so
   hover still responds without contradicting the selection. */
.quiz-option.is-clickable.is-picked:hover {
  border-color: var(--accent);
  background: rgba(41, 151, 255, 0.22);
}

/* The row of dot, statement, and -- once graded -- year and mark. */
.quiz-option-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}

/* Graded state. The colours carry meaning, so each also gets a tick or a cross
   -- red and green alone are the one pairing a large minority of people cannot
   separate. */
.quiz-option.is-correct {
  border-color: var(--quiz-right);
  background: rgba(111, 207, 151, 0.14);
}

.quiz-option.is-wrong {
  border-color: var(--quiz-wrong);
  background: rgba(229, 83, 75, 0.14);
}

/* The mark is a flex item rather than an absolutely-positioned corner badge.
   Positioned, it sat on top of the year that appears in the same corner once
   the answer is revealed, printing "86 BC✓" over itself; in the flow the two
   simply sit side by side and the row cannot overlap whatever its width. It
   hangs off the head rather than the option so it stays on the statement line
   instead of dropping below the description. */
.quiz-option.is-correct .quiz-option-head::after,
.quiz-option.is-wrong .quiz-option-head::after {
  margin-top: 1px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
  flex-shrink: 0;
}

.quiz-option.is-correct .quiz-option-head::after {
  content: "✓";
  color: var(--quiz-right);
}

.quiz-option.is-wrong .quiz-option-head::after {
  content: "✕";
  color: var(--quiz-wrong);
}

/* Category colour, matching the marker on the map. */
.quiz-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}

.quiz-option-text {
  flex: 1;
}

.quiz-option-year {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 4px;
  margin-top: 1px;
}

/* Revealed detail. Indented to clear the category dot so it lines up with the
   statement above it rather than the edge of the card. */
.quiz-option-desc {
  margin: 0 0 0 20px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* margin-top:auto pushes the link to the bottom of the card. The grid stretches
   options in a row to equal height, so without it the links sit at whatever
   height the description happened to end, and a row of four looks ragged. */
.quiz-option-link {
  margin: auto 0 0 20px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  align-self: flex-start;
}

.quiz-option-link:hover {
  text-decoration: underline;
}

/* ---- Actions ---- */

.quiz-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
}

.quiz-primary {
  height: 40px;
  padding: 0 22px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.quiz-primary:hover:not(:disabled) {
  filter: brightness(1.12);
}

.quiz-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: none;
}

.quiz-secondary {
  color: var(--muted);
  font-size: 0.88rem;
  text-decoration: none;
  font-weight: 500;
}

.quiz-secondary:hover {
  color: var(--text);
}

.quiz-feedback {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.quiz-feedback.is-right { color: var(--quiz-right); font-weight: 600; }
.quiz-feedback.is-wrong { color: var(--quiz-wrong); }

.quiz-loading {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- End of run ---- */

.quiz-result {
  text-align: center;
  padding: 8px 0 4px;
}

.quiz-result-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.quiz-result-title {
  margin: 8px 0 4px;
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.quiz-result-score {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.quiz-result .quiz-pips {
  justify-content: center;
  margin: 16px 0;
}

.quiz-result-note {
  margin: 0 auto;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.9rem;
}

.quiz-result .quiz-actions {
  justify-content: center;
}

@media (max-width: 640px) {
  .quiz-section {
    padding: 22px 18px;
    border-radius: 20px;
  }

  /* Four options side by side become unreadable slivers well before anything
     else breaks, so they stack early. */
  .quiz-options {
    grid-template-columns: 1fr;
  }
}