/* Quiz (Slice 3) — activity styles.
   The leaderboard and podium blocks are copied verbatim from
   reflex.css (the reveal choreography is shared visual language);
   everything else is quiz-specific. */

/* ===================== copied verbatim from reflex.css ===================== */

/* The leaderboard and podium (C7/C8) live in css/base.css — one shared
   implementation for every activity's host screen (Slice 4). The shared
   down-arrow red is the value BOTH activities rendered at runtime (the
   source-level divergence was shadowed — see SLICE4_AUDIT §5.1). */

/* ===================== quiz-specific ===================== */

/* ---------- option letter badges (A-F, the answer identity) ----------
   The letter is the identity; the colour is decoration only — with
   colours suppressed every option is still identifiable by its letter.
   One badge palette, shared by every surface (editor, projector, phone,
   reveal); a future skin overrides these tokens and recolours for free. */

.opt-letter {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-letter);
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--color-on-primary);
}

.opt-letter-a { background: var(--answer-a); }
.opt-letter-b { background: var(--answer-b); }
.opt-letter-c { background: var(--answer-c); }
.opt-letter-d { background: var(--answer-d); }
.opt-letter-e { background: var(--answer-e); }
.opt-letter-f { background: var(--answer-f); }

/* ---------- host: question display ---------- */

.quiz-host {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.qh-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.qh-qno { font-size: 1.1rem; font-weight: 900; color: var(--color-text); }
.qh-podium-title { font-size: 1.35rem; font-weight: 900; color: var(--color-accent); }
.qh-top-controls { display: flex; gap: 0.6rem; }

.qh-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  overflow: hidden;
}

.qh-timer {
  flex: none;
  font-size: clamp(2.2rem, 9vh, 4.2rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--color-accent);
  line-height: 1;
}

.qh-timer.low { color: var(--color-danger); }

.qh-progress {
  flex: none;
  text-align: center;
  font-weight: 700;
  color: var(--color-text-soft);
}

.qh-text {
  flex: none;
  font-size: clamp(1.3rem, 4.5vh, 2rem);
  font-weight: 900;
  text-align: center;
  color: var(--color-text);
}

.qh-opts {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}

.qh-opt {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  background: var(--color-surface-control);
  border: var(--border-width-card) solid var(--color-border-row);
  border-radius: var(--radius-tile);
  padding: 0.55rem 0.9rem;
  overflow: hidden;
}

.qh-opt.correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.qh-opt-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-text);
  display: flex;
  justify-content: space-between;
}

.qh-opt-count {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.qh-opt-bar { height: 0.55rem; border-radius: var(--radius-pill); background: var(--color-surface-track); overflow: hidden; }
.qh-opt-fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-accent-2); transition: width 0.5s ease; }
.qh-opt.correct .qh-opt-fill { background: var(--color-success); }

.qh-ready {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  color: var(--color-text);
  background: var(--color-scrim-ink);
  border-radius: var(--radius-button);
  z-index: 5;
}

/* The shared bomb countdown plays over the question-read screen: the
   same overlay moment reflex-host has, with the question dimmed behind
   the 3-2-1 (kb-* styles live in css/base.css). */
.qh-bombbox {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--color-scrim-ink);
  border-radius: var(--radius-button);
  z-index: 5;
}

@keyframes qh-cd-pop {
  from { transform: scale(1.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* W5: TIME'S UP replaces the 0.0 in the timer slot itself. */
.qh-timer.timesup {
  font-size: clamp(1.8rem, 6vh, 3rem);
  color: var(--color-danger);
  white-space: nowrap;
}

/* ---------- screen 1: the countdown (owner fix) ----------
   The announce is the shared bomb's own moment — the question and the
   answers appear only AFTER the countdown, never behind it. */

/* ---------- player: nothing before GO (owner fix) ----------
   During the countdown the phone shows only the announce overlays: the
   question text and the answer tiles stay hidden until the GO flash,
   even when the visibility toggles would otherwise show them. */
.qz-stage.pre-go .qz-text,
.qz-stage.pre-go .qz-options { display: none; }

/* ---------- screen 3: reveal (W2) ----------
   Count pills row (✓ marks the correct answer), then the answer tiles:
   correct at full brightness with ✓, incorrect dimmed with ✗. */

.qh-pills {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.qh-pill {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-surface-control);
  border: var(--border-width-card) solid var(--color-border-row);
  border-radius: var(--radius-pill);
  padding: 0.25rem 0.6rem 0.25rem 0.3rem;
  font-weight: 800;
}

.qh-pill .opt-letter { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; }

.qh-pill-count {
  font-variant-numeric: tabular-nums;
  min-width: 2ch;
  text-align: center;
}

.qh-pill.correct {
  border-color: var(--color-success);
  background: var(--color-success-soft);
}

.qh-pill .qh-correct-mark { color: var(--color-success); font-weight: 900; }

.qh-opt.incorrect { opacity: 0.45; }

.qh-wrong-mark { color: var(--color-danger); font-weight: 900; }

.qh-opts-reveal {
  flex: none;
  gap: 0.35rem;
}

.qh-opts-reveal .qh-opt {
  padding: 0.35rem 0.7rem;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
}

.qh-opts-reveal .qh-opt-text { flex: 1; font-size: 1rem; }

.qh-opts-reveal .qh-opt-count { font-size: 0.85rem; min-width: 6rem; text-align: right; }

.qh-opts-reveal .qh-opt-bar { flex: 1.2; }

.qh-correct-mark { color: var(--color-success); font-weight: 900; }

/* The quiz's scoreboard shell (.qh-lb, .qh-lb-title, .qh-instruction,
   .qh-lb-rows, .qh-lb-empty) lives in css/base.css with the rest of the
   shared leaderboard rules (Slice 4) — one copy, used by every
   activity's host screen. */

/* ---------- host: setup / authoring ---------- */

.qz-setup {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qs-title { margin: 0; font-size: 1.4rem; font-weight: 900; color: var(--color-accent); }

.qs-list { display: flex; flex-direction: column; gap: 0.75rem; }

.qs-row {
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.qs-head { display: flex; align-items: center; gap: 0.5rem; }
.qs-label { font-weight: 900; color: var(--color-accent); flex: 1; }

.qs-btn {
  border: none;
  background: var(--color-surface-track);
  color: var(--color-text);
  width: 1.8rem;
  height: 1.8rem;
  border-radius: var(--radius-letter);
  font-weight: 900;
  cursor: pointer;
}

.qs-btn:hover { background: var(--color-surface-ctrl-hover); }

.qs-text {
  font-size: 1.05rem;
  font-weight: 700;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-tile-small);
  border: var(--border-width-card) solid var(--color-border-input);
  background: var(--color-surface-control);
  color: var(--color-text);
  width: 100%;
}

.qs-opts { display: flex; flex-direction: column; gap: 0.4rem; }

.qs-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.qs-opt input[type="checkbox"] { width: 1.3rem; height: 1.3rem; accent-color: var(--color-success); flex: none; }

.qs-opt-text {
  flex: 1;
  font-size: 0.95rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-input);
  border: var(--border-width-card) solid var(--color-border-muted);
  background: var(--color-surface-control);
  color: var(--color-text);
}

.qs-addopt { align-self: flex-start; }

/* Per-question warnings appear AT the question (owner fix): a quiet red
   line inside the card, never the bottom strip. */
.qs-row-error {
  margin: 0;
  color: var(--color-danger-soft);
  font-size: 0.85rem;
  font-weight: 700;
  min-height: 1.2em;
}

/* The quiz's own player-screen settings (owner change): a card at the
   bottom of the editor, after the add-question buttons. Saved with the
   quiz — every quiz can carry its own values. */
.qs-visibility {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--color-surface);
  border: var(--border-width-card) solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0.9rem 1rem;
}

.qs-visibility-title {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--color-text);
}

.qs-visibility-sub {
  font-size: 0.85rem;
  color: var(--color-text-quiet);
  margin-top: -0.35rem;
}

/* W4: Time limit and Points are each a labelled, full-width control with
   room around it — never cramped inline fields. */
.qs-foot {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-soft);
}

.qs-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.qs-field-label {
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-quiet);
}

.qs-field select {
  width: 100%;
  font-size: 1rem;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-tile-small);
  border: var(--border-width-card) solid var(--color-border-muted);
  background: var(--color-surface-control);
  color: var(--color-text);
  min-height: 2.9rem;
}

.qs-field select option { color: var(--color-on-primary); }

.qs-field .qs-applyall { align-self: flex-start; }

.qs-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.qs-error { margin: 0; color: var(--color-danger-soft); font-weight: 600; min-height: 1.4em; }

.qs-hint {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-quiet);
}

/* ---------- player ---------- */

.quiz-player {
  width: 100%;
  max-width: 24rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qz-top { display: flex; align-items: center; justify-content: space-between; }
.qz-question-no { font-weight: 900; color: var(--color-text); }
.qz-timer { font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--color-accent); }
.qz-timer.low { color: var(--color-danger); }

.qz-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.qz-text {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--color-text);
  text-align: center;
}

.qz-options { display: flex; flex-direction: column; gap: 0.6rem; }

.qz-option {
  font-size: 1.15rem;
  font-weight: 800;
  padding: 0.8rem 1rem;
  border: var(--border-width-input) solid var(--color-border-strong);
  border-radius: var(--radius-button);
  background: var(--color-surface-input);
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  transition: transform 0.06s ease, background 0.12s ease, border-color 0.12s ease;
}

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

.qz-option:active { transform: scale(0.98); }

.qz-option.selected {
  border-color: var(--color-focus);
  background: var(--color-selection-soft);
}

.qz-option:disabled { cursor: default; }

.qz-ready {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--color-text);
  background: var(--color-scrim-ink-soft);
  border-radius: var(--radius-button);
  z-index: 5;
}

.qz-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-scrim-ink-soft);
  border-radius: var(--radius-button);
  z-index: 5;
}

.qz-countdown b {
  font-size: 6rem;
  font-weight: 900;
  color: var(--color-accent);
  animation: qh-cd-pop 0.9s ease both;
}

.qz-go {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  font-weight: 900;
  color: var(--color-accent);
  z-index: 6;
  animation: qh-cd-pop 0.7s ease both;
  pointer-events: none;
}

.qz-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--color-scrim-ink-soft);
  border-radius: var(--radius-button);
  z-index: 5;
  text-align: center;
}

.qz-big { font-size: 1.7rem; font-weight: 900; color: var(--color-text); }
.qz-big.gold { color: var(--medal-gold); }
.qz-big.correct { color: var(--color-success); }
.qz-big.wrong { color: var(--color-danger); }
.qz-answer-text { font-size: 1.05rem; font-weight: 700; color: var(--color-text); overflow-wrap: anywhere; }
.qz-time { font-size: 1.3rem; font-weight: 900; color: var(--color-text); font-variant-numeric: tabular-nums; }
.qz-sub { font-size: 1rem; color: var(--color-text-muted); }