/* =====================================================================
   The Sprint.

   The animation budget for the whole product is spent in two places: the
   streak feedback here, and the hit-stop in the arena. Everything else on
   this screen is deliberately still — a question that moves is a question
   that is harder to read.
   ===================================================================== */

/* ---------------------------------------------------------- pick screen */
.pick-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}
.pick {
  appearance: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 12px 14px;
  min-height: 64px;
  border: 1px solid var(--edge2);
  border-radius: var(--r-sm);
  background: var(--well);
  color: var(--paper);
  font-family: var(--sans);
  transition: border-color .12s ease, background .12s ease;
}
.pick:hover { border-color: var(--lantern); }
.pick b { font-size: 15px; font-weight: 600; }
.pick small { font-size: 12px; color: var(--dim); }
.pick.sel {
  border-color: var(--lantern);
  background: color-mix(in srgb, var(--lantern) 14%, var(--well));
}
.pick.is-locked { opacity: .45; }
.pick.is-locked:hover { border-color: var(--edge2); }

.pick.belt { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; }
.pick.belt .swatch {
  width: 12px; height: 26px; border-radius: 3px;
  border: 1px solid var(--edge); flex: none;
}
.pick.belt b { flex: 1; }
.pick.belt small { flex-basis: 100%; }

/* 44px is the touch-target floor, not a suggestion: this is played by
   children on tablets and shared Chromebooks, whose aim is worse than an
   adult's. These rules previously set 34-36px and, loading after app.css,
   quietly won. */
.btn.small-btn { min-height: 44px; padding: 8px 14px; font-size: 13px; }
.btn.small-btn.sel { border-color: var(--lantern); color: var(--paper); }

/* ----------------------------------------------------------- run screen */
.sprint-shell { display: flex; flex-direction: column; gap: 14px; }

.sprint-clock {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  align-items: baseline;
}
.clock-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dim);
}
.clock-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .01em;
  justify-self: start;
}
.sprint-clock .bar-track { grid-column: 1 / -1; }

.sprint-hud {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sprint-stat {
  background: var(--well);
  border: 1px solid var(--edge2);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  display: flex;
  flex-direction: column;
}
.sprint-stat i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.sprint-stat b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sprint-stat.gold b { color: var(--gold); }
.sprint-stat.cyan b { color: var(--cyan); }

/* --------------------------------------------------------- the question */
.q-panel { display: flex; flex-direction: column; gap: 16px; }

.q-prompt {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 9vw, 66px);
  line-height: 1.06;
  letter-spacing: .01em;
  text-align: center;
  padding: 18px 8px 6px;
  min-height: 1.2em;
  word-break: break-word;
}

.q-answers.mc {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.q-opt {
  appearance: none;
  cursor: pointer;
  min-height: 68px;
  padding: 12px 16px;
  border: 1px solid var(--edge);
  border-radius: var(--r-md);
  background: var(--raise);
  color: var(--paper);
  font-family: var(--display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  transition: background .1s ease, border-color .1s ease, transform .06s ease;
}
.q-opt:hover:not(:disabled) { background: var(--raise2); border-color: var(--lantern); }
.q-opt:active:not(:disabled) { transform: translateY(1px); }
.q-opt:disabled { cursor: default; }
.q-opt.right {
  background: color-mix(in srgb, var(--jade) 22%, var(--raise));
  border-color: var(--jade);
  opacity: 1;
}
.q-opt.wrong {
  background: color-mix(in srgb, var(--coral) 20%, var(--raise));
  border-color: var(--coral);
  opacity: 1;
}

.typed-row { flex-wrap: nowrap; }
.q-input {
  flex: 1;
  min-height: 68px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 32px;
  text-align: center;
  letter-spacing: .02em;
}
.typed-row .btn { min-height: 68px; }

/* ------------------------------------------------------------ feedback */
.q-feedback {
  min-height: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  font-size: 15px;
  border-radius: var(--r-sm);
  padding: 6px 10px;
}
.q-feedback.right {
  color: var(--jade);
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .02em;
  text-transform: uppercase;
  animation: pop .28s cubic-bezier(.2, 1.5, .4, 1);
}
/* A wrong answer names the misconception and shows the answer. It shows no
   score, and nothing flashes: the moment of failure is not a moment for
   feedback theatre. */
.q-feedback.wrong { color: var(--soft); }
.q-feedback.wrong b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  color: var(--paper);
}
.q-feedback.wrong span { font-size: 13.5px; color: var(--dim); max-width: 46ch; }

@keyframes pop {
  from { transform: scale(.86); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* -------------------------------------------------------------- result */
.result-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: start;
}
.panel.headline {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-left: 3px solid var(--gold);
}
.headline-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.headline-value {
  font-family: var(--display);
  font-weight: 700;
  font-size: 76px;
  line-height: .95;
  margin: 2px 0 6px;
  font-variant-numeric: tabular-nums;
}
.headline-note { margin: 0; color: var(--soft); font-size: 14px; }

@media (max-width: 700px) {
  .result-grid { grid-template-columns: 1fr; }
  .sprint-hud { grid-template-columns: repeat(3, 1fr); }
  .sprint-stat b { font-size: 21px; }
  .q-opt { font-size: 25px; min-height: 60px; }
}

/* --------------------------------------------------------- true/false */
/* Reuses the exact same generator and tagged distractors as multiple
   choice (see api/sprint.php's sprint_issue_question()) -- only the
   presentation differs, so it gets its own pair of large, unmistakable
   buttons rather than reusing the numeric .q-opt grid. */
.q-answers.truefalse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.tf-opt {
  appearance: none;
  cursor: pointer;
  min-height: 84px;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: background .1s ease, border-color .1s ease, transform .06s ease;
}
.tf-opt:active:not(:disabled) { transform: translateY(1px); }
.tf-opt:disabled { cursor: default; }
.tf-true {
  background: color-mix(in srgb, var(--jade) 14%, var(--raise));
  border: 1px solid color-mix(in srgb, var(--jade) 50%, var(--edge));
  color: var(--jade);
}
.tf-true:hover:not(:disabled) { background: color-mix(in srgb, var(--jade) 22%, var(--raise)); }
.tf-false {
  background: color-mix(in srgb, var(--coral) 14%, var(--raise));
  border: 1px solid color-mix(in srgb, var(--coral) 50%, var(--edge));
  color: var(--coral);
}
.tf-false:hover:not(:disabled) { background: color-mix(in srgb, var(--coral) 22%, var(--raise)); }
.tf-opt.right { outline: 3px solid var(--jade); outline-offset: -3px; }
.tf-opt.wrong { outline: 3px solid var(--dim); outline-offset: -3px; opacity: .7; }


/* --------------------------------------------------------------- order */
/* Same drag pattern as the Brain's rule list (js/scenes/brain.js /
   css/brain.css) on purpose -- a student who has learned one already knows
   the other. Submission is explicit (a button), unlike mc/true-false's
   tap-to-answer, since arranging four items takes several moves. */
.q-answers.order { display: flex; flex-direction: column; gap: 12px; }
.order-hint { margin: 0; text-align: center; }
.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--well);
  border: 1px solid var(--edge2);
  border-radius: var(--r-md);
  cursor: grab;
}
.order-chip:active { cursor: grabbing; }
.order-chip.dragging { opacity: .4; }
.order-chip.drop-target { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, var(--well)); }
.order-pos {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--raise);
  border: 1px solid var(--edge2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cyan);
}
.order-value {
  flex: 1;
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
}
.order-tools { display: flex; gap: 3px; flex: none; }

/* --------------------------------------------------------------- match */
/* Two fixed columns rather than free dragging between them -- a mis-drop
   between two distant columns is a much easier miss-click than a mis-drop
   within one ordered list, so tap-to-pair (prompt, then its answer) is the
   more reliable interaction here. */
.q-answers.match { display: flex; flex-direction: column; gap: 12px; }
.match-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.match-col { display: flex; flex-direction: column; gap: 8px; }
.match-chip {
  appearance: none;
  cursor: pointer;
  min-height: 56px;
  padding: 10px 14px;
  border: 1px solid var(--edge2);
  border-radius: var(--r-md);
  background: var(--well);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.match-chip.prompt { font-family: var(--display); font-weight: 700; font-size: 20px; }
.match-chip.choice {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  align-items: center;
}
.match-chip:hover:not(:disabled) { border-color: var(--cyan); }
.match-chip.active { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, var(--well)); }
.match-chip.paired { border-color: var(--jade); background: color-mix(in srgb, var(--jade) 10%, var(--well)); }
.match-chip.used { opacity: .35; cursor: not-allowed; }
.match-arrow { font-family: var(--mono); font-size: 13px; color: var(--jade); }