/* Quiz activity: the blocks, the shared game chrome and the twelve interfaces.
   Every token below is derived from the app theme, so the games follow the
   light/dark switch without carrying a palette of their own. */

.learn-quiz-body {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-5);
}

.learn-quiz-instructions {
  color: var(--theme-text-secondary);
  line-height: 1.6;
}

.learn-quiz-empty {
  color: var(--theme-text-tertiary);
}

/* The blocks live in their own wrapper so restarting can rebuild just them,
   leaving the instructions and the summary in place. */
.learn-quiz-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-5);
}

.learn-quiz-blk {
  display: flex;
  justify-content: center;
}

/* ---- Progress summary ---- */

.learn-quiz-summary {
  display: flex;
  align-items: center;
  gap: var(--theme-space-3);
}

.learn-quiz-summary-label {
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  color: var(--theme-text-secondary);
  white-space: nowrap;
}

.learn-quiz-summary-bar {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--theme-bg-tertiary);
  overflow: hidden;
}

.learn-quiz-summary-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--theme-color-primary);
  transition: width 0.3s ease;
}

/* ---- Shared stage ---- */

.learn-quiz-engine {
  width: 100%;
  display: grid;
  place-items: center;

  --learn-quiz-accent: var(--theme-color-primary);
  --learn-quiz-correct: var(--theme-color-success);
  --learn-quiz-wrong: var(--theme-color-danger);
  --learn-quiz-gold: var(--theme-color-warning);
  --learn-quiz-surface: var(--theme-surface-raised);
  --learn-quiz-surface-2: var(--theme-bg-secondary);
  --learn-quiz-border: var(--theme-border-subtle);
  --learn-quiz-text: var(--theme-text-primary);
  --learn-quiz-dim: var(--theme-text-secondary);
  --learn-quiz-w1: var(--theme-color-primary);
  --learn-quiz-w2: var(--theme-color-warning);
  --learn-quiz-w3: var(--theme-color-success);
  --learn-quiz-w4: var(--theme-color-info);
}

/* The playfield keeps a portrait ratio, but height wins over it: the stage has
   to fit the detail panel without scrolling, so on short viewports the box
   simply gets squarer instead of pushing the summary off screen. */
.learn-quiz-game {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 3 / 4;
  max-height: min(56vh, 440px);
  min-height: 320px;
  background: linear-gradient(180deg, var(--learn-quiz-surface-2), var(--learn-quiz-surface));
  border: 1px solid var(--learn-quiz-border);
  border-radius: var(--theme-radius-lg, 18px);
  box-shadow: var(--theme-shadow-md);
  color: var(--learn-quiz-text);
  overflow: hidden;
  user-select: none;
  touch-action: none;
}

.learn-quiz-game--static {
  aspect-ratio: auto;
  max-height: none;
  min-height: 0;
  touch-action: manipulation;
}

/* ---- HUD ---- */

.learn-quiz-hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-2);
  padding: var(--theme-space-3) var(--theme-space-4);
  background: linear-gradient(180deg, var(--learn-quiz-surface) 62%, transparent);
  pointer-events: none;
}

.learn-quiz-game--static .learn-quiz-hud {
  position: static;
  background: none;
}

.learn-quiz-hud-row {
  display: flex;
  align-items: center;
  gap: var(--theme-space-3);
}

.learn-quiz-tally {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 5px;
  color: var(--learn-quiz-correct);
  font-variant-numeric: tabular-nums;
  font-weight: var(--theme-font-weight-bold, 700);
  font-size: var(--theme-font-base);
}

.learn-quiz-tally svg {
  width: 17px;
  height: 17px;
  display: block;
}

.learn-quiz-score {
  font-variant-numeric: tabular-nums;
  font-weight: var(--theme-font-weight-bold, 700);
  font-size: var(--theme-font-lg);
  color: var(--learn-quiz-gold);
}

.learn-quiz-pips {
  display: flex;
  flex: 1;
  gap: 5px;
}

.learn-quiz-pip {
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--learn-quiz-border);
  transition: background 0.3s;
}

.learn-quiz-pip.is-correct { background: var(--learn-quiz-correct); }
.learn-quiz-pip.is-wrong { background: var(--learn-quiz-wrong); }
.learn-quiz-pip.is-active { box-shadow: 0 0 0 2px color-mix(in srgb, var(--learn-quiz-accent) 55%, transparent); }
.learn-quiz-pip.is-active:not(.is-correct):not(.is-wrong) { background: var(--learn-quiz-accent); }

/* Navigation: the HUD is click-through, so only the buttons take pointers. */
.learn-quiz-nav {
  display: flex;
  gap: 4px;
  pointer-events: auto;
}

.learn-quiz-navbtn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--learn-quiz-border);
  border-radius: 50%;
  background: var(--learn-quiz-surface);
  color: var(--learn-quiz-text);
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s, transform 0.12s;
}

.learn-quiz-navbtn svg { width: 17px; height: 17px; }
.learn-quiz-navbtn:hover:not(:disabled) { background: var(--learn-quiz-surface-2); }
.learn-quiz-navbtn:active:not(:disabled) { transform: scale(0.92); }
.learn-quiz-navbtn:disabled { opacity: 0.3; cursor: default; }

.learn-quiz-navbtn.is-finish:not(:disabled) {
  background: var(--learn-quiz-correct);
  border-color: var(--learn-quiz-correct);
  color: var(--theme-text-inverse);
}

.learn-quiz-counter {
  font-variant-numeric: tabular-nums;
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  color: var(--learn-quiz-dim);
}

.learn-quiz-prompt {
  font-size: var(--theme-font-base);
  font-weight: var(--theme-font-weight-bold, 700);
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

.learn-quiz-prompt.is-hidden { display: none; }

/* ---- Playfield ---- */

.learn-quiz-field {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 6px var(--theme-space-4) var(--theme-space-4);
}

.learn-quiz-game--static .learn-quiz-field {
  position: relative;
  padding: var(--theme-space-2) var(--theme-space-4) var(--theme-space-4);
}

.learn-quiz-spark {
  position: absolute;
  z-index: 6;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.learn-quiz-flash {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: 44px;
  font-weight: 900;
  opacity: 0;
  pointer-events: none;
}

.learn-quiz-flash.is-shown { animation: learn-quiz-flash-up 0.7s forwards; }

@keyframes learn-quiz-flash-up {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.6); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -64%) scale(1); }
}

.learn-quiz-hint {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  color: var(--learn-quiz-dim);
  pointer-events: none;
  opacity: 0.9;
  animation: learn-quiz-pulse 1.4s ease-in-out infinite;
}

.learn-quiz-hint.is-hidden { display: none; }
.learn-quiz-hint svg { width: 120px; height: 32px; }

.learn-quiz-hint-split {
  display: flex;
  gap: 120px;
}

.learn-quiz-hint-split svg { width: 26px; height: 26px; }
.learn-quiz-hint-no { color: var(--learn-quiz-wrong); }
.learn-quiz-hint-yes { color: var(--learn-quiz-correct); }

@keyframes learn-quiz-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ---- Overlay ---- */

.learn-quiz-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--theme-space-4);
  padding: var(--theme-space-6);
  text-align: center;
  background: color-mix(in srgb, var(--learn-quiz-surface) 86%, transparent);
  backdrop-filter: blur(3px);
}

.learn-quiz-overlay.is-hidden { display: none; }

/* A static stage has no fixed aspect ratio: it is only as tall as its content,
   and once the playfield is emptied at the end of the run an absolutely
   positioned overlay would be clipped by it. In flow, the stage grows to fit
   the result instead. */
.learn-quiz-game--static .learn-quiz-overlay {
  position: relative;
  inset: auto;
  min-height: 320px;
  border-radius: inherit;
}

.learn-quiz-emoji { font-size: 56px; line-height: 1; }

.learn-quiz-ring { position: relative; width: 130px; height: 130px; }
.learn-quiz-ring svg { transform: rotate(-90deg); }
.learn-quiz-ring-track { stroke: var(--learn-quiz-border); }

.learn-quiz-ring-value {
  stroke: var(--learn-quiz-accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.learn-quiz-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.learn-quiz-ring-pct { font-size: 28px; font-weight: 800; }
.learn-quiz-ring-frac { font-size: var(--theme-font-sm); color: var(--learn-quiz-dim); font-weight: 600; }

.learn-quiz-ring-score {
  margin-top: var(--theme-space-2);
  font-size: var(--theme-font-lg);
  font-weight: 800;
  color: var(--learn-quiz-gold);
  font-variant-numeric: tabular-nums;
}

/* ---- Shared entity chrome ---- */

.learn-quiz-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--learn-quiz-accent);
  color: var(--theme-text-inverse);
  font-size: 12px;
  font-weight: 800;
}

@keyframes learn-quiz-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

/* ---- Review card (an item already answered, any interface) ---- */

.learn-quiz-review {
  display: flex;
  height: 100%;
  align-items: center;
  overflow-y: auto;
}

.learn-quiz-review-list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--theme-space-2);
}

.learn-quiz-review-row {
  display: flex;
  align-items: center;
  gap: var(--theme-space-3);
  padding: var(--theme-space-3);
  border: 2px solid var(--learn-quiz-border);
  border-radius: var(--theme-radius-md);
  background: var(--learn-quiz-surface);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  opacity: 0.75;
}

.learn-quiz-review-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--learn-quiz-border);
  color: var(--learn-quiz-text);
  font-size: var(--theme-font-xs);
  font-weight: 800;
}

.learn-quiz-review-text { flex: 1; }

.learn-quiz-review-row.is-correct {
  border-color: var(--learn-quiz-correct);
  color: var(--learn-quiz-correct);
  opacity: 1;
}

.learn-quiz-review-row.is-correct .learn-quiz-review-badge {
  background: var(--learn-quiz-correct);
  color: var(--theme-text-inverse);
}

.learn-quiz-review-row.is-wrong {
  border-color: var(--learn-quiz-wrong);
  color: var(--learn-quiz-wrong);
  opacity: 1;
}

.learn-quiz-review-row.is-wrong .learn-quiz-review-badge {
  background: var(--learn-quiz-wrong);
  color: var(--theme-text-inverse);
}

.learn-quiz-review-row.is-pair { opacity: 1; }

.learn-quiz-review-row.is-pair .learn-quiz-review-badge {
  background: transparent;
  border: 2px solid currentColor;
  color: inherit;
}

/* The answer left standing on a playfield once the item is resolved. */
.learn-quiz-block.is-answer,
.learn-quiz-gate.is-answer {
  border-color: var(--learn-quiz-correct);
  color: var(--learn-quiz-correct);
  animation: learn-quiz-glow 1.1s ease-in-out infinite;
}

.learn-quiz-gate.is-answer .learn-quiz-badge,
.learn-quiz-block.is-answer .learn-quiz-badge { background: var(--learn-quiz-correct); }

/* ---- quiz_classic ---- */

.learn-quiz-options {
  display: flex;
  flex-direction: column;
  gap: var(--theme-space-2);
}

.learn-quiz-option {
  display: flex;
  align-items: center;
  gap: var(--theme-space-3);
  width: 100%;
  padding: var(--theme-space-3) var(--theme-space-4);
  border: 2px solid var(--learn-quiz-border);
  border-radius: var(--theme-radius-md);
  background: var(--learn-quiz-surface);
  color: var(--learn-quiz-text);
  font-size: var(--theme-font-base);
  font-weight: var(--theme-font-weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.12s;
}

.learn-quiz-option:hover:not(:disabled) { border-color: var(--learn-quiz-accent); }
.learn-quiz-option:active:not(:disabled) { transform: scale(0.99); }
.learn-quiz-option:disabled { cursor: default; }

.learn-quiz-option.is-correct {
  border-color: var(--learn-quiz-correct);
  color: var(--learn-quiz-correct);
}

.learn-quiz-option.is-correct .learn-quiz-option-badge { background: var(--learn-quiz-correct); }

.learn-quiz-option.is-wrong {
  border-color: var(--learn-quiz-wrong);
  color: var(--learn-quiz-wrong);
  opacity: 0.65;
  animation: learn-quiz-shake 0.35s;
}

.learn-quiz-option.is-wrong .learn-quiz-option-badge { background: var(--learn-quiz-wrong); }

.learn-quiz-option-badge {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--learn-quiz-accent);
  color: var(--theme-text-inverse);
  font-size: var(--theme-font-sm);
  font-weight: 800;
}

/* ---- truefalse_classic ---- */

.learn-quiz-verdicts {
  display: flex;
  gap: var(--theme-space-4);
  justify-content: center;
}

.learn-quiz-verdict {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--theme-space-2);
  min-width: 120px;
  padding: var(--theme-space-4);
  border: 2px solid var(--learn-quiz-border);
  border-radius: var(--theme-radius-md);
  background: var(--learn-quiz-surface);
  font-weight: var(--theme-font-weight-semibold);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.12s;
}

.learn-quiz-verdict:active:not(:disabled) { transform: scale(0.97); }
.learn-quiz-verdict:disabled { cursor: default; }
.learn-quiz-verdict-icon svg { width: 28px; height: 28px; display: block; }
.learn-quiz-verdict--no { color: var(--learn-quiz-wrong); }
.learn-quiz-verdict--yes { color: var(--learn-quiz-correct); }
.learn-quiz-verdict--no:hover:not(:disabled) { border-color: var(--learn-quiz-wrong); }
.learn-quiz-verdict--yes:hover:not(:disabled) { border-color: var(--learn-quiz-correct); }
.learn-quiz-verdict.is-correct { border-color: var(--learn-quiz-correct); }
.learn-quiz-verdict.is-wrong { border-color: var(--learn-quiz-wrong); animation: learn-quiz-shake 0.35s; }
.learn-quiz-verdict-label { color: var(--learn-quiz-text); font-size: var(--theme-font-sm); }

/* ---- match_classic ---- */

.learn-quiz-board {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--theme-space-3);
  height: 100%;
}

.learn-quiz-game--static .learn-quiz-board,
.learn-quiz-game--static .learn-quiz-grid {
  height: auto;
}

.learn-quiz-game--static .learn-quiz-cell,
.learn-quiz-game--static .learn-quiz-wirenode {
  min-height: 52px;
}

.learn-quiz-column {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--theme-space-2);
}

.learn-quiz-node {
  padding: var(--theme-space-3);
  border: 2px solid var(--learn-quiz-border);
  border-radius: var(--theme-radius-md);
  background: var(--learn-quiz-surface);
  color: var(--learn-quiz-text);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.12s;
}

.learn-quiz-node:hover:not(:disabled) { border-color: var(--learn-quiz-accent); }
.learn-quiz-node.is-selected { border-color: var(--learn-quiz-accent); transform: translateY(-2px); }
.learn-quiz-node.is-matched { cursor: default; opacity: 0.85; }
.learn-quiz-node.is-wrong { border-color: var(--learn-quiz-wrong); animation: learn-quiz-shake 0.35s; }

/* ---- quiz_blaster ---- */

.learn-quiz-block {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--theme-space-2);
  max-width: 74%;
  padding: 9px 12px;
  border: 1.5px solid var(--learn-quiz-border);
  border-radius: 12px;
  background: var(--learn-quiz-surface-2);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  box-shadow: var(--theme-shadow-sm);
  will-change: transform;
}

.learn-quiz-block.is-armed { opacity: 0; visibility: hidden; }
.learn-quiz-block.is-gone { animation: learn-quiz-boom 0.3s forwards; }
.learn-quiz-block.is-gone-bad { animation: learn-quiz-boom-bad 0.3s forwards; }

@keyframes learn-quiz-boom {
  to { transform: scale(1.6); opacity: 0; filter: brightness(1.8); }
}

@keyframes learn-quiz-boom-bad {
  to { transform: scale(1.4) rotate(8deg); opacity: 0; }
}

.learn-quiz-ship {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 52px;
  height: 52px;
  will-change: transform;
}

.learn-quiz-ship svg { width: 100%; height: 100%; }

.learn-quiz-bullet {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  background: var(--learn-quiz-gold);
  box-shadow: 0 0 10px var(--learn-quiz-gold);
  will-change: transform;
}

/* ---- quiz_runner ---- */

.learn-quiz-lanes, .learn-quiz-dashes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.learn-quiz-laneline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--learn-quiz-border);
}

.learn-quiz-dash {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 26px;
  border-radius: 3px;
  background: var(--learn-quiz-border);
  opacity: 0.6;
}

.learn-quiz-gate {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 6px;
  border: 2px solid var(--learn-quiz-border);
  border-radius: 12px;
  background: var(--learn-quiz-surface-2);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  text-align: center;
  box-shadow: var(--theme-shadow-sm);
  will-change: transform;
}

.learn-quiz-gate.is-armed { opacity: 0; visibility: hidden; }
.learn-quiz-gate.is-pass { animation: learn-quiz-gate-pass 0.3s forwards; }
.learn-quiz-gate.is-fail { animation: learn-quiz-gate-fail 0.3s forwards; }

@keyframes learn-quiz-gate-pass {
  0% { background: var(--learn-quiz-correct); border-color: var(--learn-quiz-correct); }
  to { transform: scale(1.25); opacity: 0; }
}

@keyframes learn-quiz-gate-fail {
  0% { background: var(--learn-quiz-wrong); border-color: var(--learn-quiz-wrong); }
  to { transform: scale(0.85) rotate(-4deg); opacity: 0; }
}

.learn-quiz-runner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 44px;
  height: 44px;
  will-change: transform;
}

/* ---- quiz_claw ---- */

.learn-quiz-rail {
  position: absolute;
  left: 10px;
  right: 10px;
  z-index: 2;
  height: 8px;
  border-radius: 6px;
  background: var(--learn-quiz-border);
}

.learn-quiz-trolley {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 40px;
  height: 18px;
  border-radius: 6px;
  background: var(--learn-quiz-dim);
  will-change: transform;
}

.learn-quiz-cable {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 4px;
  border-radius: 2px;
  background: var(--learn-quiz-dim);
  will-change: transform, height;
}

.learn-quiz-claw {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 52px;
  height: 46px;
  will-change: transform;
}

.learn-quiz-claw svg { width: 100%; height: 100%; overflow: visible; }
.learn-quiz-claw-hub { fill: var(--learn-quiz-dim); }

.learn-quiz-claw-arm {
  fill: none;
  stroke: var(--learn-quiz-dim);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.learn-quiz-capsule {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 8px;
  border: 2px solid var(--learn-quiz-border);
  border-radius: 16px;
  background: var(--learn-quiz-surface-2);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  text-align: center;
  box-shadow: var(--theme-shadow-sm);
  will-change: transform;
}

.learn-quiz-capsule .learn-quiz-badge { border-radius: 50%; }
.learn-quiz-capsule.is-correct { border-color: var(--learn-quiz-correct); color: var(--learn-quiz-correct); }
.learn-quiz-capsule.is-wrong { border-color: var(--learn-quiz-wrong); color: var(--learn-quiz-wrong); }
.learn-quiz-capsule.is-reveal { animation: learn-quiz-glow 1.1s ease-in-out infinite; }

@keyframes learn-quiz-glow {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--learn-quiz-correct) 30%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--learn-quiz-correct) 45%, transparent); }
}

.learn-quiz-drop {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  transform: translateX(-50%);
  border: none;
  border-radius: 50%;
  background: var(--learn-quiz-accent);
  color: var(--theme-text-inverse);
  cursor: pointer;
  box-shadow: var(--theme-shadow-md);
}

.learn-quiz-drop svg { width: 22px; height: 22px; }
.learn-quiz-drop:active { transform: translateX(-50%) scale(0.94); }

/* ---- truefalse_meteor ---- */

.learn-quiz-base {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -46px;
  z-index: 2;
  height: 156px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: var(--learn-quiz-surface-2);
  border-top: 2px solid var(--learn-quiz-border);
}

.learn-quiz-cannon {
  position: absolute;
  bottom: 20px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 60px;
  height: 58px;
  border: 2px solid var(--learn-quiz-border);
  border-radius: 16px;
  background: var(--learn-quiz-surface);
  cursor: pointer;
  box-shadow: var(--theme-shadow-sm);
  transition: transform 0.1s;
}

.learn-quiz-cannon svg { width: 28px; height: 28px; }
.learn-quiz-cannon--no { left: 9%; color: var(--learn-quiz-wrong); border-color: color-mix(in srgb, var(--learn-quiz-wrong) 45%, var(--learn-quiz-border)); }
.learn-quiz-cannon--yes { right: 9%; color: var(--learn-quiz-correct); border-color: color-mix(in srgb, var(--learn-quiz-correct) 45%, var(--learn-quiz-border)); }
.learn-quiz-cannon:active { transform: translateY(2px) scale(0.96); }
.learn-quiz-cannon.is-firing { animation: learn-quiz-recoil 0.18s ease; }

@keyframes learn-quiz-recoil {
  40% { transform: translateY(4px) scale(0.94); }
}

.learn-quiz-cannon-barrel {
  position: absolute;
  top: -10px;
  width: 14px;
  height: 14px;
  border-radius: 4px 4px 0 0;
  background: currentColor;
  opacity: 0.85;
}

.learn-quiz-beam {
  position: absolute;
  z-index: 3;
  height: 6px;
  border-radius: 4px;
  transform-origin: left center;
  pointer-events: none;
  animation: learn-quiz-beam 0.22s ease-out forwards;
}

@keyframes learn-quiz-beam {
  0% { opacity: 0; }
  20% { opacity: 1; }
  100% { opacity: 0; }
}

.learn-quiz-meteor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--learn-quiz-gold), var(--learn-quiz-wrong));
  box-shadow: 0 0 22px 4px color-mix(in srgb, var(--learn-quiz-gold) 45%, transparent);
  color: #3a2400;
  font-weight: 900;
  will-change: transform;
}

.learn-quiz-meteor-mark { font-size: 24px; }

.learn-quiz-meteor-tail {
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 60%;
  height: 60px;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--learn-quiz-gold) 70%, transparent), transparent);
  filter: blur(2px);
}

.learn-quiz-meteor.is-boom { animation: learn-quiz-meteor-good 0.32s forwards; }
.learn-quiz-meteor.is-boom-bad { animation: learn-quiz-meteor-bad 0.32s forwards; }

@keyframes learn-quiz-meteor-good {
  40% { transform: scale(1.3); }
  to { transform: scale(0); opacity: 0; }
}

@keyframes learn-quiz-meteor-bad {
  to { transform: scale(0.7) rotate(10deg); opacity: 0; }
}

/* ---- truefalse_platform ---- */

.learn-quiz-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 74px;
  background: var(--learn-quiz-surface-2);
  border-top: 3px solid var(--learn-quiz-border);
}

.learn-quiz-hero {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  width: 50px;
  height: 56px;
  will-change: transform;
}

.learn-quiz-hero-shadow {
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 40px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.22);
  filter: blur(2px);
}

.learn-quiz-orb {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--learn-quiz-w4), var(--learn-quiz-accent));
  color: var(--theme-text-inverse);
  will-change: transform;
}

.learn-quiz-orb-mark { font-size: 22px; font-weight: 900; }
.learn-quiz-orb.is-waiting { animation: learn-quiz-glow 2s ease-in-out infinite; }
.learn-quiz-orb.is-caught { animation: learn-quiz-orb-caught 0.34s forwards; }
.learn-quiz-orb.is-missed { animation: learn-quiz-orb-missed 0.34s forwards; }

@keyframes learn-quiz-orb-caught {
  40% { transform: scale(1.35); }
  to { transform: scale(0); opacity: 0; }
}

@keyframes learn-quiz-orb-missed {
  to { transform: scale(0.7) rotate(-8deg); opacity: 0; }
}

.learn-quiz-answer {
  position: absolute;
  bottom: 16px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 62px;
  height: 58px;
  border: 2px solid var(--learn-quiz-border);
  border-radius: 16px;
  background: var(--learn-quiz-surface);
  cursor: pointer;
  box-shadow: var(--theme-shadow-sm);
  transition: transform 0.1s, opacity 0.2s;
}

.learn-quiz-answer svg { width: 28px; height: 28px; }
.learn-quiz-answer--no { left: 6%; color: var(--learn-quiz-wrong); border-color: color-mix(in srgb, var(--learn-quiz-wrong) 45%, var(--learn-quiz-border)); }
.learn-quiz-answer--yes { right: 6%; color: var(--learn-quiz-correct); border-color: color-mix(in srgb, var(--learn-quiz-correct) 45%, var(--learn-quiz-border)); }
.learn-quiz-answer:active { transform: translateY(2px) scale(0.96); }
.learn-quiz-answer.is-off { opacity: 0.45; pointer-events: none; }

/* ---- truefalse_swipe ---- */

.learn-quiz-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 46%;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.18s;
}

.learn-quiz-zone--no {
  left: 0;
  justify-content: flex-start;
  padding-left: 6%;
  background: linear-gradient(90deg, color-mix(in srgb, var(--learn-quiz-wrong) 16%, transparent), transparent);
}

.learn-quiz-zone--yes {
  right: 0;
  justify-content: flex-end;
  padding-right: 6%;
  background: linear-gradient(270deg, color-mix(in srgb, var(--learn-quiz-correct) 16%, transparent), transparent);
}

.learn-quiz-zone-mark { font-size: 56px; font-weight: 900; opacity: 0.16; }
.learn-quiz-zone--no .learn-quiz-zone-mark { color: var(--learn-quiz-wrong); }
.learn-quiz-zone--yes .learn-quiz-zone-mark { color: var(--learn-quiz-correct); }
.learn-quiz-zone.is-hot { opacity: 1; }
.learn-quiz-zone.is-hot .learn-quiz-zone-mark { opacity: 0.5; }

.learn-quiz-card {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--theme-space-6);
  border: 1px solid var(--learn-quiz-border);
  border-radius: 22px;
  background: var(--learn-quiz-surface);
  box-shadow: var(--theme-shadow-lg);
  text-align: center;
  cursor: grab;
  will-change: transform;
}

.learn-quiz-card:active { cursor: grabbing; }
.learn-quiz-card.is-snapping { transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.25, 1); }
.learn-quiz-card.is-gone { transition: transform 0.34s ease-in, opacity 0.34s ease-in; }

.learn-quiz-card-text {
  font-size: var(--theme-font-lg);
  font-weight: var(--theme-font-weight-bold, 700);
  line-height: 1.35;
  text-wrap: balance;
}

.learn-quiz-card-swatch {
  position: absolute;
  top: 16px;
  left: 50%;
  width: 42px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--learn-quiz-accent);
  opacity: 0.5;
}

.learn-quiz-stamp {
  position: absolute;
  top: 24px;
  padding: 4px 14px;
  border: 4px solid currentColor;
  border-radius: 12px;
  font-size: 28px;
  font-weight: 900;
  opacity: 0;
}

.learn-quiz-stamp--yes { right: 18px; transform: rotate(14deg); color: var(--learn-quiz-correct); }
.learn-quiz-stamp--no { left: 18px; transform: rotate(-14deg); color: var(--learn-quiz-wrong); }

/* ---- match_wire ---- */

.learn-quiz-wires {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.learn-quiz-wires path { fill: none; stroke-linecap: round; }

.learn-quiz-game:not(.learn-quiz-game--static) .learn-quiz-board { position: relative; z-index: 3; }

.learn-quiz-wirenode {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 14px;
  border: 2px solid var(--learn-quiz-border);
  border-radius: 14px;
  background: var(--learn-quiz-surface);
  color: var(--learn-quiz-text);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--theme-shadow-sm);
  transition: border-color 0.2s, transform 0.12s;
}

.learn-quiz-column--right .learn-quiz-wirenode { justify-content: flex-end; text-align: right; }
.learn-quiz-wirenode.is-selected { border-color: var(--learn-quiz-accent); transform: translateY(-2px); }
.learn-quiz-wirenode.is-wrong { border-color: var(--learn-quiz-wrong); animation: learn-quiz-shake 0.35s; }
.learn-quiz-wirenode.is-done { cursor: default; opacity: 0.8; }

.learn-quiz-anchor {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border: 2px solid var(--learn-quiz-surface);
  border-radius: 50%;
  background: var(--learn-quiz-border);
  box-shadow: 0 0 0 2px var(--learn-quiz-border);
}

.learn-quiz-column--left .learn-quiz-anchor { right: -7px; }
.learn-quiz-column--right .learn-quiz-anchor { left: -7px; }
.learn-quiz-wirenode.is-done .learn-quiz-anchor { background: currentColor; }

.learn-quiz-wirenode-check {
  position: absolute;
  top: -8px;
  display: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--theme-text-inverse);
  font-size: 12px;
  font-weight: 900;
}

.learn-quiz-column--left .learn-quiz-wirenode-check { right: -6px; }
.learn-quiz-column--right .learn-quiz-wirenode-check { left: -6px; }
.learn-quiz-wirenode.is-done .learn-quiz-wirenode-check { display: grid; }

/* ---- match_drag ---- */

.learn-quiz-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--theme-space-2);
  min-height: 52px;
  padding: 10px 12px;
  border: 2px solid var(--learn-quiz-border);
  border-radius: 13px;
  background: var(--learn-quiz-surface);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-bold, 700);
  box-shadow: var(--theme-shadow-sm);
  cursor: grab;
  touch-action: none;
  transition: border-color 0.2s, opacity 0.2s;
}

.learn-quiz-grip { flex: 0 0 auto; color: var(--learn-quiz-dim); opacity: 0.55; }
.learn-quiz-grip svg { width: 16px; height: 16px; display: block; }
.learn-quiz-tile.is-dragging { opacity: 0.35; }
.learn-quiz-tile.is-selected { border-color: var(--learn-quiz-accent); }
.learn-quiz-tile.is-locked { cursor: default; }
.learn-quiz-tile.is-locked .learn-quiz-grip { display: none; }
.learn-quiz-tile.is-wrong { border-color: var(--learn-quiz-wrong); animation: learn-quiz-shake 0.35s; }

.learn-quiz-tile.is-lifted {
  position: fixed;
  z-index: 3000;
  margin: 0;
  cursor: grabbing;
  border-color: var(--learn-quiz-accent);
  box-shadow: var(--theme-shadow-lg);
  transform: scale(1.05) rotate(-1.5deg);
  pointer-events: none;
}

.learn-quiz-slot {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--theme-space-2);
  min-height: 52px;
  padding: 10px 12px;
  border: 2px dashed var(--learn-quiz-border);
  border-radius: 13px;
  background: var(--learn-quiz-surface-2);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-semibold);
  transition: border-color 0.18s, background 0.18s, transform 0.12s;
}

.learn-quiz-dock {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 2px dashed var(--learn-quiz-border);
  border-radius: 7px;
  color: var(--theme-text-inverse);
  font-size: 12px;
  font-weight: 900;
}

.learn-quiz-slot-text { flex: 1; }
.learn-quiz-slot.is-hot { border-color: var(--learn-quiz-accent); transform: scale(1.03); }
.learn-quiz-slot.is-matched, .learn-quiz-slot.is-matched .learn-quiz-dock { border-style: solid; }
.learn-quiz-slot.is-wrong { border-color: var(--learn-quiz-wrong); animation: learn-quiz-shake 0.35s; }

/* ---- match_pairs ---- */

.learn-quiz-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--theme-space-2);
  height: 100%;
}

.learn-quiz-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border: 2px solid var(--learn-quiz-border);
  border-radius: 14px;
  background: var(--learn-quiz-surface);
  color: var(--learn-quiz-text);
  font-size: var(--theme-font-sm);
  font-weight: var(--theme-font-weight-bold, 700);
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--theme-shadow-sm);
  transition: transform 0.12s, border-color 0.2s, opacity 0.3s;
}

.learn-quiz-cell:active:not(:disabled) { transform: scale(0.97); }
.learn-quiz-cell.is-selected { border-color: var(--learn-quiz-accent); transform: translateY(-2px); }
.learn-quiz-cell.is-good { animation: learn-quiz-pop 0.3s; }
.learn-quiz-cell.is-wrong { border-color: var(--learn-quiz-wrong); animation: learn-quiz-shake 0.35s; }

.learn-quiz-cell.is-gone {
  opacity: 0;
  transform: scale(0.4);
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
}

@keyframes learn-quiz-pop {
  40% { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .learn-quiz-hint,
  .learn-quiz-block.is-answer,
  .learn-quiz-gate.is-answer,
  .learn-quiz-orb.is-waiting,
  .learn-quiz-capsule.is-reveal {
    animation: none;
  }
}