/* ══════════════════════════════════════════════════════════════════════
   gamification-quests.css — the Quest tab: the teacher's four-step builder
   and the Quest Map (golden trail + glowing checkpoint nodes).

   Every rule here is scoped under `.cq-quest-*` / `.cq-node` / `.cq-trail`
   and the roots carry `.theme-ancients`, so the tab inherits the same
   --cq-gold / --cq-ink / --cq-text palette as the Avatar and Boss tabs and
   therefore stays dark in LIGHT mode too. Nothing here overrides a global
   class, so light/dark classroom chrome is untouched.
   ══════════════════════════════════════════════════════════════════════ */

#gpanel-quests .cq-quest-shell,
#gpanel-quests .cq-quest-list {
  color: var(--cq-text);
  font-family: var(--cq-font-body);
}

/* ── Layout: builder on the left, the live map on the right ─────────── */
.cq-quest-shell {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.85fr);
  gap: 18px;
  padding: 18px;
  align-items: start;
}
@media (max-width: 980px) { .cq-quest-shell { grid-template-columns: 1fr; } }

.cq-quest-builder {
  background: linear-gradient(180deg, var(--cq-ink), var(--cq-ink-2));
  border: 1px solid rgba(214, 184, 108, .45);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .45);
}
.cq-builder__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px 10px; border-bottom: 1px solid rgba(214, 184, 108, .22);
}
.cq-builder__head h3 {
  margin: 0; font-family: var(--cq-font-display); font-weight: 600;
  font-size: 19px; letter-spacing: .1em; text-transform: uppercase; color: var(--cq-gold);
}
.cq-builder__mode { font-size: 12px; color: var(--cq-muted); }

/* ── The four step chips ───────────────────────────────────────────── */
.cq-builder__steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px 16px 0; }
.cq-step {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font: inherit; font-size: 13px; color: var(--cq-muted);
  background: transparent; border: 1px solid transparent; border-radius: 999px;
  padding: 4px 10px;
}
.cq-step:hover { border-color: var(--cq-gold-dim); color: var(--cq-text); }
.cq-step.is-current { border-color: var(--cq-gold); color: var(--cq-gold); background: rgba(214, 184, 108, .12); }
.cq-step.is-done .cq-step__no { color: #0b0a08; background: var(--cq-gold); }
.cq-step__no {
  display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  font-size: 11px; font-weight: 800; border: 1px solid var(--cq-gold-dim); color: var(--cq-gold);
}

/* ── Controls ──────────────────────────────────────────────────────── */
.cq-builder__body { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px; min-height: 190px; }
.cq-field { display: flex; flex-direction: column; gap: 5px; }
.cq-field--inline { flex: 1 1 160px; }
.cq-field__label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--cq-muted);
}
.cq-field__hint { font-size: 12px; color: var(--cq-muted); }
.cq-input, .cq-quest-shell .cq-select {
  font: inherit; font-size: 14px; color: var(--cq-text);
  background: rgba(0, 0, 0, .38); border: 1px solid var(--cq-gold-dim); border-radius: 4px;
  padding: 8px 10px; width: 100%;
}
.cq-input:focus-visible, .cq-quest-shell .cq-select:focus-visible {
  outline: 2px solid var(--cq-gold); outline-offset: 1px;
}
.cq-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.cq-seg__opt {
  cursor: pointer; font: inherit; font-size: 13px; color: var(--cq-text);
  background: rgba(0, 0, 0, .32); border: 1px solid var(--cq-gold-dim); border-radius: 4px;
  padding: 8px 14px;
}
.cq-seg__opt:hover { border-color: var(--cq-gold); color: var(--cq-gold); }
.cq-seg__opt.is-on { border-color: var(--cq-gold); background: rgba(214, 184, 108, .18); color: var(--cq-gold); }
.cq-seg--count .cq-seg__opt { min-width: 46px; text-align: center; font-weight: 700; }

/* ── One checkpoint being described (steps 3 and 4) ────────────────── */
.cq-cp-list { display: flex; flex-direction: column; gap: 10px; }
.cq-cp-edit {
  border: 1px solid rgba(214, 184, 108, .28); background: rgba(0, 0, 0, .26);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 9px;
}
.cq-cp-edit__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cq-cp-edit__no {
  font-family: var(--cq-font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cq-gold);
}
.cq-cp-edit__frame { font-size: 12px; font-style: italic; color: var(--cq-muted); text-align: right; }
.cq-reward { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.cq-field--tiny { flex: 0 0 84px; }
.cq-field--tiny .cq-input { padding: 6px 8px; }
.cq-reward__note { flex: 1 1 180px; font-size: 12px; color: var(--cq-muted); padding-bottom: 6px; }

/* The Ambush Boss switch. A real checkbox, re-skinned — a label+div would need
   its own keyboard handling and this is one control, not a pattern. */
.cq-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.cq-switch input { width: 18px; height: 18px; accent-color: var(--cq-gold); cursor: pointer; }
.cq-ambush__body { display: flex; flex-direction: column; gap: 9px; padding-left: 28px; }
.cq-ambush__warn {
  margin: 0; font-size: 12px; color: #e0a52b; border-left: 2px solid #8a7340; padding-left: 8px;
}

/* The inline "paste a list" importer. A <details> so it costs nothing until a
   teacher needs it, and styled with a gold summary so it reads as an action. */
.cq-paste summary {
  cursor: pointer; font-size: 13px; color: var(--cq-gold); list-style: none;
}
.cq-paste summary::-webkit-details-marker { display: none; }
.cq-paste summary::before { content: '▸ '; color: var(--cq-gold-dim); }
.cq-paste[open] summary::before { content: '▾ '; }
.cq-paste summary:hover { text-decoration: underline; }
.cq-paste__body {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px;
  border: 1px solid rgba(214, 184, 108, .28); background: rgba(0, 0, 0, .3);
}
.cq-paste__text { resize: vertical; min-height: 70px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
/* The spreadsheet half of the same importer, set off by a rule so the two ways in read
   as alternatives rather than one long form. */
.cq-paste__upload {
  display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding-top: 8px;
  border-top: 1px dashed rgba(214, 184, 108, .28);
}
/* The third way in: a Google link whose text Gemini turns into questions. Same rule-and-
   stack treatment as the upload, so the three routes read as peers. */
.cq-paste__link {
  display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding-top: 8px;
  border-top: 1px dashed rgba(214, 184, 108, .28);
}
/* The AI draft awaiting a verdict. Gold-tinted and separate from the form above it,
   because approving it arms a classroom gate. */
.cq-paste__preview {
  display: flex; flex-direction: column; gap: 6px; margin-top: 2px; padding: 8px 10px;
  border: 1px solid rgba(214, 184, 108, .45); background: rgba(214, 184, 108, .08);
}
/* Why a Generate click produced no draft, said where the teacher clicked — the toast in the
   corner can be missed, and a silent refusal reads as "the button does nothing". */
.cq-paste__error {
  margin-top: 6px; padding: 8px 10px;
  border: 1px solid rgba(224, 138, 128, .5); background: rgba(224, 100, 90, .12);
  font-size: 12px; line-height: 1.45; color: #e08a80;
}
/* Capped height: a 20-question draft must not push the stop's own settings off screen. */
.cq-paste__list {
  margin: 0; padding-left: 18px; max-height: 220px; overflow: auto;
  font-size: 12px; line-height: 1.45;
}
.cq-paste__list li { margin-bottom: 3px; }

/* ── The optional-guard explainer (step 4) ─────────────────────────────
   A quiet panel, not a warning stripe: it explains a step a teacher is allowed to
   skip entirely, so it must not read as an error. */
.cq-note {
  border: 1px solid rgba(214, 184, 108, .28); border-left: 3px solid var(--cq-gold-dim);
  background: rgba(0, 0, 0, .22); padding: 10px 12px;
}
.cq-note p { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--cq-muted); }
.cq-note p:last-child { margin-bottom: 0; }
.cq-note p.cq-note__title { font-size: 13px; font-weight: 700; color: var(--cq-gold); }

/* ── Footer: Back / Next, and the publish gate ─────────────────────── */
.cq-builder__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid rgba(214, 184, 108, .22);
}
.cq-builder__nav { display: flex; gap: 8px; }
.cq-gate { display: flex; flex-direction: column; gap: 8px; }
.cq-gate__ok { margin: 0; font-size: 13px; color: #8fd6ab; }
.cq-gate__list { margin: 0; padding-left: 18px; font-size: 13px; color: #e08a80; }
.cq-gate__busy { margin: 0; font-size: 13px; color: var(--cq-muted); font-style: italic; }
.cq-builder__note { font-size: 13px; color: var(--cq-gold); }

/* ── The live preview column ───────────────────────────────────────── */
.cq-quest-preview {
  background: linear-gradient(180deg, var(--cq-ink), var(--cq-ink-2));
  border: 1px solid rgba(214, 184, 108, .45);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 12px;
}
.cq-prev__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cq-prev__head .cq-h { margin: 0; font-size: 15px; }
.cq-prev__target { font-size: 12px; color: var(--cq-muted); }
.cq-prev__title {
  margin: 0; font-family: var(--cq-font-display); font-size: 17px; color: var(--cq-text);
}
.cq-prev__totals { margin: 0; font-size: 13px; color: var(--cq-gold); }
.cq-bg-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.cq-bg-chip {
  cursor: pointer; font: inherit; text-align: left; padding: 0; overflow: hidden;
  background: rgba(0, 0, 0, .3); border: 1px solid var(--cq-gold-dim); border-radius: 4px;
  color: var(--cq-text); display: flex; flex-direction: column;
}
.cq-bg-chip:hover { border-color: var(--cq-gold); }
.cq-bg-chip.is-on { border-color: var(--cq-gold); box-shadow: 0 0 0 1px var(--cq-gold) inset; }
.cq-bg-chip__swatch {
  height: 44px; background-color: #0b0a08; background-size: cover; background-position: center;
  border-bottom: 1px solid rgba(214, 184, 108, .3);
}
.cq-bg-chip__name { font-size: 11px; padding: 5px 7px; color: var(--cq-muted); }
.cq-bg-chip.is-on .cq-bg-chip__name { color: var(--cq-gold); }


/* ══ The Quest Map ════════════════════════════════════════════════════
   Layers, bottom to top: scene photo → dark scrim (so the gold reads) → the
   SVG trail → the node pins and their labels.
   ═══════════════════════════════════════════════════════════════════ */
.cq-quest-map {
  position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 200px;
  overflow: hidden; border: 1px solid rgba(214, 184, 108, .45);
  background: linear-gradient(180deg, #24303b, #0d1216);
}
.cq-quest-map--empty { display: grid; place-items: center; padding: 16px; }
.cq-quest-map__scene {
  position: absolute; inset: 0;
  background-image: var(--cq-map-bg, none);
  background-size: cover; background-position: center;
  filter: saturate(.92) brightness(.82);
}
.cq-quest-map__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, .68) 100%);
}
.cq-quest-map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* The golden trail. `--cq-trail-w` is the ONE weight to tune: it is a stroke on a
   stretched 0–100 viewBox, so vector-effect (set in the markup) keeps it equal in
   both directions whatever the panel's real aspect ratio is. */
.cq-quest-map { --cq-trail-w: 3px; }
.cq-trail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.cq-trail--ahead {
  stroke: rgba(214, 184, 108, .55);
  stroke-width: var(--cq-trail-w);
  stroke-dasharray: 7 7;
  animation: cq-trail-crawl 14s linear infinite;
}
.cq-trail--walked {
  stroke: var(--cq-gold);
  stroke-width: calc(var(--cq-trail-w) + 1px);
  filter: drop-shadow(0 0 4px var(--cq-gold-glow));
}
/* A slow crawl on the un-walked road: it reads as weather, not as a spinner. */
@keyframes cq-trail-crawl { to { stroke-dashoffset: -84; } }
@media (prefers-reduced-motion: reduce) {
  .cq-trail--ahead { animation: none; }
}
.cq-trail__bead { fill: rgba(214, 184, 108, .7); stroke: none; }

/* ── Nodes ─────────────────────────────────────────────────────────── */
.cq-quest-map__nodes { position: absolute; inset: 0; }
.cq-node {
  position: absolute; left: var(--nx, 50%); top: var(--ny, 50%);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  width: 30%; max-width: 160px; min-width: 76px;
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: var(--cq-text); text-align: center;
}
.cq-quest-map--live .cq-node { cursor: pointer; }
.cq-quest-map--live .cq-node:hover .cq-node__pin { border-color: var(--cq-gold); }
.cq-node__pin {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px; font-weight: 700;
  background: rgba(8, 6, 4, .88); border: 2px solid var(--cq-gold-dim);
  color: var(--cq-muted); box-shadow: 0 2px 10px rgba(0, 0, 0, .7);
}
.cq-node__label {
  font-size: 11px; line-height: 1.25; color: var(--cq-text);
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
  overflow-wrap: anywhere;
}
.cq-node__no {
  display: inline-block; min-width: 14px; font-weight: 800; color: var(--cq-gold);
}
.cq-node__reward {
  font-size: 10px; color: var(--cq-gold); text-shadow: 0 1px 3px #000;
  white-space: nowrap;
}


/* ── Node states: the whole point of the map, readable at a glance ─── */
/* Done — solid gold, a tick, and the label confirmed. */
.cq-node--approved .cq-node__pin {
  border-color: var(--cq-gold); background: var(--cq-gold); color: #0b0a08;
  box-shadow: 0 0 12px var(--cq-gold-glow);
}
.cq-node--approved .cq-node__reward { color: #b7a98a; }
/* Handed in — amber, pulsing gently: "with the teacher", not "yours to act on". */
.cq-node--pending .cq-node__pin {
  border-color: #e0a52b; color: #e0a52b; background: rgba(224, 165, 43, .18);
  animation: cq-node-breathe 2.6s ease-in-out infinite;
}
/* Live now — the ONLY node a student can act on, so it gets the halo. */
.cq-node--active .cq-node__pin {
  border-color: var(--cq-gold); color: var(--cq-gold); background: rgba(214, 184, 108, .22);
  box-shadow: 0 0 0 4px rgba(214, 184, 108, .16), 0 0 16px var(--cq-gold-glow);
}
.cq-node--active .cq-node__label { color: #fff; font-weight: 700; }
/* Sent back — red, and the arrow says which way it went. */
.cq-node--returned .cq-node__pin {
  border-color: #8B2626; color: #e08a80; background: rgba(139, 38, 38, .22);
}
/* Locked — dimmed, no reward line (the render drops it), labels muted. */
.cq-node--locked .cq-node__pin { opacity: .62; }
.cq-node--locked .cq-node__label { color: var(--cq-muted); opacity: .8; }
@keyframes cq-node-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 165, 43, .0); }
  50%      { box-shadow: 0 0 0 5px rgba(224, 165, 43, .18); }
}
@media (prefers-reduced-motion: reduce) {
  .cq-node--pending .cq-node__pin { animation: none; }
}

/* ══ The saved-quest list ═════════════════════════════════════════════ */
.cq-quest-list { padding: 4px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.cq-quest-list__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(214, 184, 108, .22); padding-top: 14px;
}
.cq-quest-list__head h4 {
  margin: 0; font-family: var(--cq-font-display); font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--cq-gold);
}
.cq-quest-card {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
  border: 1px solid rgba(214, 184, 108, .28); background: rgba(0, 0, 0, .26);
  padding: 12px 14px;
}
.cq-quest-card.is-live { border-color: var(--cq-gold); background: rgba(214, 184, 108, .1); }
.cq-quest-card__title {
  margin: 0 0 4px; font-family: var(--cq-font-display); font-size: 16px; color: var(--cq-text);
}
.cq-quest-card__meta { margin: 0; font-size: 12px; color: var(--cq-muted); }
.cq-quest-card__meta strong { color: var(--cq-gold); font-weight: 700; }
.cq-quest-card__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.cq-quest-tag {
  display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  border: 1px solid var(--cq-gold-dim); color: var(--cq-gold);
  padding: 1px 7px; border-radius: 999px; margin-left: 6px;
}
.cq-quest-tag--live { border-color: var(--cq-gold); background: rgba(214, 184, 108, .2); }
.cq-quest-empty { padding: 18px; text-align: center; font-size: 14px; color: var(--cq-muted); }


/* ══ The student's Adventure pane ═════════════════════════════════════
   The map is the centrepiece here too (same markup as the teacher's preview,
   with interactive:true), so only the frame around it is new. Scoped under
   .cq-quest-student so nothing here can leak into the builder.
   ═══════════════════════════════════════════════════════════════════ */
.cq-quest-student__bar { margin: 10px 0 6px; }
.cq-quest-student__strip {
  margin: 0 0 10px; font-size: 17px; letter-spacing: .14em; line-height: 1;
  overflow: hidden; white-space: nowrap;
}
.cq-quest-student__stop {
  margin-top: 12px; padding: 12px 14px;
  border: 1px solid rgba(214, 184, 108, .3); background: rgba(0, 0, 0, .3);
  display: flex; flex-direction: column; gap: 8px;
}
.cq-quest-student__stop[data-stop-state="active"] { border-color: var(--cq-gold); }
.cq-quest-student__stop[data-stop-state="returned"] { border-color: #c8746a; }
.cq-quest-student__stop.is-complete { border-color: var(--cq-gold); background: rgba(214, 184, 108, .12); }
.cq-quest-student__stophead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap;
}
.cq-quest-student__stoptitle {
  margin: 0; font-family: var(--cq-font-display); font-size: 17px; color: var(--cq-text);
}
.cq-quest-student__frame { margin: 0; font-size: 12px; color: var(--cq-gold); letter-spacing: .06em; }
.cq-quest-student__stopline { margin: 0; font-size: 14px; color: var(--cq-muted); }
.cq-quest-student__guard {
  margin: 0; font-size: 14px; color: #e8cf94;
  border-left: 2px solid var(--cq-gold); padding-left: 10px;
}

/* ══ The Ambush Boss ══════════════════════════════════════════════════
   Its own overlay, above the student view: the fight must not be
   interruptible by anything behind it.
   ═══════════════════════════════════════════════════════════════════ */
.cq-ambush {
  width: min(680px, 94vw); margin: 0 auto;
  background: linear-gradient(180deg, #14100b, #060504);
  border: 1px solid var(--cq-gold);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .8);
}
.cq-ambush__card { padding: 18px 20px 22px; }
.cq-ambush__eyebrow {
  margin: 0 0 12px; font-family: var(--cq-font-display); font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cq-muted);
}
.cq-ambush__boss {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  padding: 12px; border: 1px solid rgba(214, 184, 108, .3); background: rgba(0, 0, 0, .38);
}
.cq-ambush__boss.is-defeated { border-color: var(--cq-gold); background: rgba(214, 184, 108, .12); }
.cq-ambush__boss.is-defeated .cq-ambush__crest { filter: grayscale(.6) brightness(.7); }
.cq-ambush__crest {
  width: 76px; height: 76px; display: grid; place-items: center; font-size: 44px;
  border: 2px solid var(--cq-gold-dim); border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, rgba(214, 184, 108, .22), rgba(0, 0, 0, .9));
}
.cq-ambush__bossname { margin: 0 0 2px; font-family: var(--cq-font-display); font-size: 18px; color: var(--cq-text); }
.cq-ambush__bosstag { margin: 0 0 8px; font-size: 12px; color: var(--cq-muted); }
.cq-ambush__guard {
  position: relative; height: 16px; overflow: hidden;
  border: 1px solid var(--cq-gold-dim); background: rgba(0, 0, 0, .6);
}
.cq-ambush__guardfill {
  display: block; height: 100%; background: linear-gradient(90deg, #8a2f28, #c8746a);
  transition: width .25s ease;
}
.cq-ambush__guardlabel {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  text-shadow: 0 1px 3px #000;
}
.cq-ambush__warn { margin-top: 14px; }
.cq-ambush__warnline {
  margin: 0 0 8px; font-family: var(--cq-font-display); font-size: 22px; color: #e8cf94;
  animation: cq-ambush-flash .6s steps(1) 3;
}
@keyframes cq-ambush-flash { 50% { color: #fff; text-shadow: 0 0 14px var(--cq-gold); } }
@media (prefers-reduced-motion: reduce) { .cq-ambush__warnline { animation: none; } }
.cq-ambush__warntext { margin: 0 0 8px; font-size: 14px; color: var(--cq-muted); }
.cq-ambush__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.cq-ambush__q { margin-top: 14px; }
.cq-ambush__qhead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cq-muted);
}
.cq-ambush__pager { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.cq-ambush__hint { margin: 8px 0 0; font-size: 12px; color: var(--cq-muted); }
.cq-ambush__error {
  margin: 12px 0 0; padding: 8px 10px; font-size: 14px;
  color: #f2b8b0; border: 1px solid #c8746a; background: rgba(200, 116, 106, .14);
}
.cq-ambush__result { margin-top: 14px; }
.cq-ambush__verdict {
  margin: 0 0 6px; font-family: var(--cq-font-display); font-size: 20px; color: var(--cq-text);
}
.cq-ambush__result.is-pass .cq-ambush__verdict { color: var(--cq-gold); }
.cq-ambush__resultline { margin: 0; font-size: 14px; color: var(--cq-muted); }


/* ══ The teacher's Pending Review panel (Dashboard) ════════════════════
   Lives on the ordinary Dashboard rather than the Gamified tab, so it paints its
   OWN dark card: .theme-ancients supplies the tokens and the type, not a
   background. Ancients-skinned on purpose — it is the same quest feature the
   teacher built in the Quests tab.
   ═══════════════════════════════════════════════════════════════════ */
.cq-review {
  background: linear-gradient(180deg, #16120c, #0a0806);
  border: 1px solid rgba(214, 184, 108, .45);
  padding: 14px 16px 8px; margin: 0 0 16px;
}
.cq-review__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cq-review__title {
  margin: 0; font-family: var(--cq-font-display); font-size: 19px;
  letter-spacing: .06em; color: var(--cq-gold);
}
.cq-review__count { flex: 1 1 auto; font-size: 13px; color: var(--cq-muted); }
.cq-review__clear { margin: 10px 0; font-size: 14px; color: var(--cq-muted); }
.cq-review__err {
  margin: 10px 0; padding: 8px 10px; font-size: 14px;
  color: #f2b8b0; border: 1px solid #c8746a; background: rgba(200, 116, 106, .14);
}
.cq-review__quest { margin-top: 12px; border-top: 1px solid rgba(214, 184, 108, .22); padding-top: 10px; }
.cq-review__questtitle {
  margin: 0 0 6px; font-family: var(--cq-font-display); font-size: 16px; color: var(--cq-text);
}
.cq-review__stop { margin: 10px 0 4px; }
.cq-review__stophead {
  margin: 0 0 8px; font-size: 13px; letter-spacing: .04em; color: var(--cq-gold);
}
.cq-review__stopcount {
  margin-left: 8px; font-size: 11px; color: var(--cq-muted);
  border: 1px solid var(--cq-gold-dim); border-radius: 999px; padding: 1px 7px;
}
.cq-review__teams { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.cq-review__teamcount { opacity: .75; font-size: 11px; }
.cq-review__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cq-review__row {
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; background: rgba(0, 0, 0, .34);
  border: 1px solid rgba(214, 184, 108, .22);
}
/* A failed Ambush Boss is the one a teacher should walk over to. */
.cq-review__row.is-failed { border-color: #c8746a; background: rgba(200, 116, 106, .12); }
.cq-review__who { display: flex; flex-direction: column; gap: 2px; }
.cq-review__name { font-size: 15px; color: var(--cq-text); font-weight: 700; }
.cq-review__worth { font-size: 12px; color: var(--cq-gold); }
.cq-review__why { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: var(--cq-muted); }
.cq-review__reason { color: #e8cf94; }
.cq-review__score { color: #f2b8b0; }
.cq-review__work { font-style: italic; }
.cq-review__when { font-size: 11px; opacity: .8; }
.cq-review__acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ══ The student's Side Quest board ═══════════════════════════════════ */
.cq-side-board { margin-top: 18px; border-top: 1px solid rgba(214, 184, 108, .22); padding-top: 12px; }
.cq-side-board__count {
  margin-left: 8px; font-size: 11px; letter-spacing: 0; color: var(--cq-muted);
}
.cq-side-board__lead { margin: 0 0 10px; font-size: 13px; color: var(--cq-muted); }
.cq-side-board__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cq-side-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px; background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(214, 184, 108, .28);
}
.cq-side-card[data-side-state="active"] { border-color: var(--cq-gold); }
.cq-side-card[data-side-state="pending"] { border-color: var(--cq-gold-dim); }
.cq-side-card[data-side-state="returned"] { border-color: #c8746a; }
.cq-side-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cq-side-card__title { font-size: 14px; font-weight: 700; color: var(--cq-text); }
.cq-side-card__meta { margin: 0; font-size: 12px; color: var(--cq-muted); }
.cq-side-card__status { margin: 0; font-size: 12px; color: #e8cf94; }
.cq-side-card .cq-btn { align-self: flex-start; }