/**
 * gamification-games.css — the two classroom games.
 *
 *   🎯 QUESTLET LIVE — the teacher's launcher and the projected streak board, plus the
 *      student's own question pad.
 *   🃏 MATCH — the tile grid the student plays on, and the class leaderboard.
 *
 * Same palette story as gamification-quests.css / gamification-boss.css: it borrows the
 * Ancients custom properties (--cq-gold, --cq-ink, --cq-text …) so a panel looks like the
 * tab it sits in, and every rule is namespaced (.lg-* / .mq-* / .cq-streak / .cq-lg-*) so it
 * cannot leak into the classroom or grades screens.
 */

/* ═══ 🎯 QUESTLET LIVE — the teacher's panel ═════════════════════════════ */

.lg-panel {
  padding: 18px 22px 26px;
  color: var(--cq-text);
}

.lg-lead,
.lg-hint {
  margin: 6px 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cq-muted);
  max-width: 76ch;
}

.lg-hint {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--cq-gold-dim);
  font-size: 12px;
}

.lg-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 8px;
  background: rgba(214, 184, 108, .08);
  font-size: 12.5px;
  color: var(--cq-text);
}

.lg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  margin: 6px 0 4px;
}

.lg-controls--end {
  justify-content: flex-end;
  margin-top: 18px;
}

.lg-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cq-muted);
}

.lg-field select {
  min-width: 220px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cq-text);
  background: rgba(20, 16, 12, .78);
  border: 1px solid var(--cq-gold-dim);
  border-radius: 8px;
}

.lg-field select:focus-visible {
  outline: 2px solid var(--cq-gold);
  outline-offset: 2px;
}

/* ── The board ── */

.lg-panel--board { padding-top: 14px; }

.lg-board__head .cq-h { margin-bottom: 2px; }

.lg-winner {
  margin: 10px 0 14px;
  padding: 10px 14px;
  font-size: 18px;
  font-weight: 800;
  color: #0b0a08;
  background: linear-gradient(180deg, #f0d99a, #d6b86c);
  border-radius: 10px;
}

.lg-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.lg-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(0, 3fr) 44px minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 10px;
  background: rgba(20, 16, 12, .55);
}

.lg-row.is-winner {
  border-color: var(--cq-gold);
  background: rgba(214, 184, 108, .16);
  box-shadow: 0 0 18px var(--cq-gold-glow);
}

.lg-row__name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .02em;
}

.lg-row__num {
  font-size: 20px;
  font-weight: 800;
  text-align: center;
  color: var(--cq-gold);
}

.lg-row__sub,
.lg-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-row__sub { font-size: 12px; color: var(--cq-muted); }

.lg-said {
  font-size: 12.5px;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg-said--yes { color: #6fce7a; }
.lg-said--no { color: #e06a5c; }
.lg-said--wait { color: var(--cq-muted); }

.lg-empty-line {
  margin: 14px 0;
  font-size: 13px;
  color: var(--cq-muted);
}

/* ── The streak strip: one pip per correct answer needed ── */

.lg-streak,
.cq-streak {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}

.lg-pip,
.cq-streak__pip {
  display: inline-block;
  width: 10px;
  height: 18px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 3px;
  background: rgba(20, 16, 12, .6);
}

.lg-pip.is-on,
.cq-streak__pip.is-on {
  background: linear-gradient(180deg, #f0d99a, #d6b86c);
  border-color: var(--cq-gold);
  box-shadow: 0 0 8px var(--cq-gold-glow);
}

.lg-streak { flex: 1; min-width: 0; overflow: hidden; }

.cq-streak { margin: 4px 0 12px; }

.cq-streak__num {
  margin-left: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--cq-gold);
}

/* ═══ 🎯 QUESTLET LIVE — the student's pad ══════════════════════════════ */

.cq-lg-verdict {
  margin: 10px 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
}

.cq-lg-verdict.is-right {
  color: #0b0a08;
  background: linear-gradient(180deg, #a9e6ae, #6fce7a);
}

.cq-lg-verdict.is-wrong {
  color: #fff;
  background: linear-gradient(180deg, #d4635a, #b03a30);
}

.cq-lg-board,
.cq-mq-board { margin-top: 16px; }

/* ═══ 🃏 MATCH — the teacher's panel ════════════════════════════════════ */

.mq-panel {
  padding: 18px 22px 26px;
  color: var(--cq-text);
}

.mq-lead,
.mq-hint,
.mq-open {
  margin: 6px 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cq-muted);
  max-width: 76ch;
}

.mq-hint { margin: 10px 0 12px; font-size: 12px; }
.mq-open { color: var(--cq-text); }

.mq-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 8px;
  background: rgba(214, 184, 108, .08);
  font-size: 12.5px;
  color: var(--cq-text);
}

.mq-sub {
  margin: 20px 0 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cq-gold);
}

.mq-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.mq-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cq-muted);
}

.mq-field select {
  min-width: 200px;
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cq-text);
  background: rgba(20, 16, 12, .78);
  border: 1px solid var(--cq-gold-dim);
  border-radius: 8px;
}

.mq-empty-line { margin: 10px 0; font-size: 13px; color: var(--cq-muted); }

/* The leaderboard rows (the teacher's list; the student's is a .cq-lb table). */
.mq-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mq-score {
  display: grid;
  grid-template-columns: 34px minmax(120px, 1.4fr) 72px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 8px;
  background: rgba(20, 16, 12, .5);
}

.mq-score__pos { font-weight: 800; color: var(--cq-gold); text-align: center; }
.mq-score__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-score__time { font-weight: 800; text-align: right; color: var(--cq-gold); }
.mq-score__sub { font-size: 12px; color: var(--cq-muted); }

/* ── The tile grid the student plays on ── */

.mq-board__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mq-tile {
  position: relative;
  min-height: 84px;
  padding: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cq-text);
  background: rgba(20, 16, 12, .72);
  border: 1px solid var(--cq-gold-dim);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  overflow: hidden;
  word-break: break-word;
}

.mq-tile:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--cq-gold);
}

.mq-tile:focus-visible { outline: 2px solid var(--cq-gold); outline-offset: 2px; }

/* Face down: the text is present but hidden, and the `?` shows instead. */
.mq-tile__text { display: none; }
.mq-tile__back {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 26px;
  font-weight: 800;
  color: var(--cq-gold-dim);
}

.mq-tile.is-up .mq-tile__text,
.mq-tile.is-matched .mq-tile__text { display: block; }
.mq-tile.is-up .mq-tile__back,
.mq-tile.is-matched .mq-tile__back { display: none; }

.mq-tile.is-up {
  background: rgba(214, 184, 108, .18);
  border-color: var(--cq-gold);
}

.mq-tile.is-wrong {
  background: rgba(176, 58, 48, .28);
  border-color: #d4635a;
  animation: mq-shake .28s ease;
}

.mq-tile.is-matched {
  background: rgba(111, 206, 122, .2);
  border-color: #6fce7a;
  cursor: default;
  opacity: .85;
}

.mq-tile--answer .mq-tile__text { font-style: italic; font-weight: 600; }

@keyframes mq-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.mq-board__meta {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--cq-gold);
}

.mq-board.is-done .mq-board__meta { color: #6fce7a; }

/* Phones and narrow projector windows: two columns rather than a squeeze. */
@media (max-width: 640px) {
  .mq-board__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mq-tile { min-height: 74px; font-size: 13px; }
  .lg-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'name num' 'streak streak' 'sub said';
    gap: 6px 10px;
  }
  .lg-row__name { grid-area: name; }
  .lg-row__num { grid-area: num; }
  .lg-streak { grid-area: streak; }
  .lg-row__sub { grid-area: sub; }
  .lg-said { grid-area: said; }
}

/* Respect a reduced-motion preference: the shake is decoration, not information. */
@media (prefers-reduced-motion: reduce) {
  .mq-tile { transition: none; }
  .mq-tile.is-wrong { animation: none; }
}

/* ═══ 🗂️ QUESTION SETS — the library tab ═══════════════════════════════ */

.qs-panel {
  padding: 18px 22px 26px;
  color: var(--cq-text);
}

.qs-lead {
  margin: 6px 0 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--cq-muted);
  max-width: 76ch;
}

.qs-note {
  margin: 12px 0 0;
  padding: 8px 12px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 8px;
  background: rgba(214, 184, 108, .08);
  font-size: 12.5px;
  color: var(--cq-text);
}

.qs-sub {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cq-muted);
}

.qs-group { margin: 0 0 18px; }

.qs-group__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--cq-gold);
}

.qs-group__count {
  padding: 1px 7px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 999px;
  font-size: 11px;
  color: var(--cq-muted);
}

/* One row plus, when open, the question editor that belongs to it. The wrapper carries the
   spacing so an open editor sits tight against its own row and not against the next set. */
.qs-item { margin-bottom: 8px; }

.qs-row {
  display: grid;
  /* title · year · size · Save · Edit questions · Delete */
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr) auto auto auto auto;
  align-items: end;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(20, 16, 12, .55);
  border: 1px solid var(--cq-gold-dim);
  border-radius: 10px;
}

.qs-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cq-muted);
}

.qs-input,
.qs-select {
  padding: 8px 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cq-text);
  background: rgba(20, 16, 12, .78);
  border: 1px solid var(--cq-gold-dim);
  border-radius: 8px;
}

.qs-input { width: 100%; box-sizing: border-box; }

.qs-input:focus-visible,
.qs-select:focus-visible {
  outline: 2px solid var(--cq-gold);
  outline-offset: 2px;
}

.qs-count {
  align-self: center;
  font-size: 12px;
  color: var(--cq-muted);
  white-space: nowrap;
}

.qs-empty-line {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--cq-muted);
}

/* ── The inline question editor ─────────────────────────────────────────── */

.qs-editor {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--cq-gold-dim);
  border-radius: 10px;
  background: rgba(20, 16, 12, .35);
}

.qs-editor__lead,
.qs-editor__note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cq-muted);
}

.qs-editor__note { margin: 0; }

.qs-cards { display: flex; flex-direction: column; gap: 8px; }

.qs-card {
  display: grid;
  grid-template-columns: auto minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}

.qs-card__n {
  min-width: 1.6em;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
  color: var(--cq-muted);
}

.qs-editor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* ── Classes — year groups ──────────────────────────────────────────────── */

.qs-classes { margin: 0 0 20px; }

.qs-class-row {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(20, 16, 12, .55);
  border: 1px solid var(--cq-gold-dim);
  border-radius: 10px;
}

.qs-class__name {
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--cq-text);
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .qs-row { grid-template-columns: 1fr; }
  .qs-count { align-self: start; }
  .qs-card { grid-template-columns: auto minmax(0, 1fr); }
  .qs-class-row { grid-template-columns: 1fr; }
}