/* Page-specific styles for /learn. Split out of learn.html when that page became a
   generated artifact — the generator renders content, and code lives in files. */
.stages{counter-reset:stage;list-style:none;padding:0;margin:1.2rem 0 0;display:grid;
  gap:.9rem;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.stages li{counter-increment:stage;position:relative;background:var(--paper);
  border:1px solid var(--rule);border-radius:var(--radius);padding:1.1rem 1.2rem 1.1rem 3.3rem;
  box-shadow:var(--shadow)}
.stages li::before{content:counter(stage);position:absolute;left:1.1rem;top:1.05rem;
  width:1.65rem;height:1.65rem;border-radius:50%;background:var(--drop);color:#06304a;
  font-family:"Fredoka",sans-serif;font-weight:700;font-size:.92rem;
  display:grid;place-items:center}
.stages h3{margin:0 0 .25rem;font-size:1.02rem}
.stages p{margin:0;font-size:.94rem;color:var(--ink-soft)}

/* ---- trivia cards ---- */
.quiz{margin-top:1.3rem}
/* ⚠️ A GRID, not a scroll rail. It was a horizontal rail with overflow-x:auto and no
   visible scrollbar: measured, 2582px of 3062px was hidden and exactly ONE of eight cards
   was fully visible. That does not read as "scroll me", it reads as "the last card is cut
   off" — which is exactly how it was reported. Nothing is hidden now, and it matches how
   every other card section on the site behaves. */
.quizRail{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  padding:.35rem 0 .4rem}
.qCard{background:var(--quiz-card);
  border:1px solid var(--rule);border-radius:var(--radius-lg);padding:1.25rem 1.3rem;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.7rem}
.qTopic{font-family:"Fredoka",sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--teal)}
.qText{font-weight:800;font-size:1.04rem;line-height:1.4;margin:0}
.qOpts{display:flex;flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none}
.qOpt{width:100%;text-align:left;font:inherit;font-size:.95rem;cursor:pointer;
  background:var(--paper-sunk);color:var(--ink);border:2px solid transparent;
  border-radius:10px;padding:.55rem .75rem;transition:background .14s,border-color .14s}
.qOpt:hover:not([disabled]){background:var(--rule)}
.qOpt[disabled]{cursor:default}
/* ⚠️ Never colour alone — the ✓ / ✗ carry the same information, matching how the game
   signals storm drops by shape as well as hue. */
.qOpt.right{border-color:#1a9c5b;background:rgba(26,156,91,.14);font-weight:800}
.qOpt.wrong{border-color:#c0392b;background:rgba(192,57,43,.12)}
.qOpt .mark{float:right;font-weight:800}
.qWhy{margin:0;font-size:.93rem;color:var(--ink-soft);border-left:3px solid var(--drop);
  padding-left:.75rem}
.qWhy[hidden]{display:none}
.quizNote{font-size:.88rem;color:var(--ink-faint);margin-top:.2rem}