/* =========================================================
   WP Modern Roulette — quiz trainer. v0.10.1
   Roots: .wpmr-trainer[data-wpmr-theme] and .wpmr-tlb[data-wpmr-theme].

   The quiz FOLLOWS the game's light/dark choice: SSR emits the
   site default / member favourite, an inline script applies a
   guest's localStorage choice pre-paint, trainer.js applies the
   member favourite. Palettes mirror game.css exactly.

   RULE 23a: theme blocks contain CUSTOM PROPERTIES ONLY — all
   rules read tokens, never theme literals. Dark is the base
   token set (site default); [data-wpmr-theme="light"] overrides
   tokens only.

   These blocks render inside the WP theme's own page template,
   so selectors are doubled and interactive elements carry
   explicit resets (appearance/margins/shadows) to win over
   theme CSS without !important.
   ========================================================= */

/* ── Theme tokens (dark = base) ── */
.wpmr-trainer.wpmr-trainer,
.wpmr-tlb.wpmr-tlb {
  --wpmrq-bg: #0b0d0f;
  --wpmrq-panel: #191d21;
  --wpmrq-cell: #23282d;
  --wpmrq-line: #2e3439;
  --wpmrq-cell-line: #3a4147;
  --wpmrq-text: #ece9e3;
  --wpmrq-muted: #8d94a0;
  --wpmrq-gold: #e6c479;
  --wpmrq-gold-ink: #1a1408;
  --wpmrq-gold-rgb: 230, 196, 121;
  --wpmrq-ok: #59c98b;
  --wpmrq-ok-rgb: 18, 134, 78;
  --wpmrq-bad: #e06258;
  --wpmrq-bad-rgb: 171, 42, 34;
  --wpmrq-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.35);
}
.wpmr-trainer.wpmr-trainer[data-wpmr-theme="light"],
.wpmr-tlb.wpmr-tlb[data-wpmr-theme="light"] {
  --wpmrq-bg: #f1eee7;
  --wpmrq-panel: #ffffff;
  --wpmrq-cell: #faf8f4;
  --wpmrq-line: #e3ded3;
  --wpmrq-cell-line: #e3ded3;
  --wpmrq-text: #16181a;
  --wpmrq-muted: #8b8578;
  --wpmrq-gold: #b98a2c;
  --wpmrq-gold-ink: #ffffff;
  --wpmrq-gold-rgb: 185, 138, 44;
  --wpmrq-ok: #0e6b3d;
  --wpmrq-ok-rgb: 14, 107, 61;
  --wpmrq-bad: #b3261e;
  --wpmrq-bad-rgb: 179, 38, 30;
  --wpmrq-shadow: 0 1px 2px rgba(20, 22, 24, 0.06), 0 12px 28px rgba(20, 22, 24, 0.07);
}

/* ── Quiz root ── */
.wpmr-trainer.wpmr-trainer {
  position: relative; /* anchors the toast */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--wpmrq-text);
  background: var(--wpmrq-bg);
  border: 1px solid var(--wpmrq-line);
  border-radius: 16px;
  box-shadow: var(--wpmrq-shadow);
  padding: 20px;
  width: 100%;
  margin: 0 0 1.5em;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: wpmrq;
}
.wpmr-trainer.wpmr-trainer *,
.wpmr-tlb.wpmr-tlb * { box-sizing: border-box; }

/* Headings inside the theme's page template need explicit resets. */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-title {
  font-family: inherit;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
  padding: 0;
  color: var(--wpmrq-text);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-sub {
  margin: 0 0 16px;
  color: var(--wpmrq-muted);
  font-size: 14px;
  max-width: 62ch;
}

/* ── Stage: layered card with a gold sheen, like the wheel card ── */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage {
  position: relative;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(var(--wpmrq-gold-rgb), 0.09), transparent 55%),
    var(--wpmrq-panel);
  border: 1px solid var(--wpmrq-line);
  border-radius: 14px;
  padding: 20px;
  overflow: hidden;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--wpmrq-gold-rgb), 0.55), transparent);
  pointer-events: none;
}
.wpmr-trainer.wpmr-trainer.is-loading .wpmr-trainer-stage { opacity: 0.85; }

/* ── Idle intro: category chips + suit mark (never an empty box) ── */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-intro { display: none; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="idle"] .wpmr-trainer-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 10px 0 20px;
  text-align: center;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-suit {
  font-size: 34px;
  line-height: 1;
  color: var(--wpmrq-gold);
  text-shadow: 0 0 22px rgba(var(--wpmrq-gold-rgb), 0.45);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-intro-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-intro-chips span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wpmrq-muted);
  background: var(--wpmrq-cell);
  border: 1px solid var(--wpmrq-cell-line);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

/* The question block and options only exist while playing. */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-q,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-options { display: none; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="question"] .wpmr-trainer-q,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="feedback"] .wpmr-trainer-q,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="question"] .wpmr-trainer-options,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="feedback"] .wpmr-trainer-options { display: grid; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-q { display: none; gap: 8px; margin-bottom: 16px; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="question"] .wpmr-trainer-q,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="feedback"] .wpmr-trainer-q { display: block; }

.wpmr-trainer.wpmr-trainer .wpmr-trainer-kind {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wpmrq-gold);
  border: 1px solid rgba(var(--wpmrq-gold-rgb), 0.55);
  background: rgba(var(--wpmrq-gold-rgb), 0.08);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 0 10px;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-prompt {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  min-height: 2.6em;
}

/* ── Options — four permanent slots ── */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-options {
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
@container wpmrq (max-width: 480px) {
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="question"] .wpmr-trainer-options,
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-stage[data-wpmr-phase="feedback"] .wpmr-trainer-options { grid-template-columns: 1fr; }
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 12px 16px;
  font: inherit;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
  text-decoration: none;
  color: var(--wpmrq-text);
  background: var(--wpmrq-cell);
  border: 1px solid var(--wpmrq-cell-line);
  border-radius: 12px;
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt:not(:disabled):hover,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt:focus-visible {
  border-color: var(--wpmrq-gold);
  box-shadow: 0 0 0 3px rgba(var(--wpmrq-gold-rgb), 0.22);
  transform: translateY(-1px);
  outline: none;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt:disabled { cursor: default; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt kbd {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font: 800 12px/1 inherit;
  font-family: inherit;
  color: var(--wpmrq-muted);
  border: 1px solid var(--wpmrq-cell-line);
  border-radius: 50%;
  background: var(--wpmrq-panel);
  box-shadow: inset 0 0 0 2px var(--wpmrq-bg);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt.is-correct {
  border-color: var(--wpmrq-ok);
  background: rgba(var(--wpmrq-ok-rgb), 0.14);
  box-shadow: 0 0 0 3px rgba(var(--wpmrq-ok-rgb), 0.18);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt.is-correct kbd { color: var(--wpmrq-ok); border-color: var(--wpmrq-ok); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt.is-wrong {
  border-color: var(--wpmrq-bad);
  background: rgba(var(--wpmrq-bad-rgb), 0.14);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-opt.is-wrong kbd { color: var(--wpmrq-bad); border-color: var(--wpmrq-bad); }

/* ── Primary button (start / next / new round) ── */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-primary {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  margin: 0;
  color: var(--wpmrq-gold-ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 45%), var(--wpmrq-gold);
  border: 0;
  border-radius: 12px;
  padding: 14px 26px;
  box-shadow: 0 6px 18px rgba(var(--wpmrq-gold-rgb), 0.3);
  cursor: pointer;
  text-transform: none;
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(var(--wpmrq-gold-rgb), 0.4);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-start { text-align: center; padding: 4px 0 6px; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-keys { margin: 12px 0 0; font-size: 12px; color: var(--wpmrq-muted); }

/* ── Feedback / done ── */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-feedback,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-done {
  background: var(--wpmrq-cell);
  border: 1px solid var(--wpmrq-cell-line);
  border-left-width: 4px;
  border-radius: 12px;
  padding: 14px 16px;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-feedback.is-right { border-left-color: var(--wpmrq-ok); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-feedback.is-wrong { border-left-color: var(--wpmrq-bad); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-done { border-left-color: var(--wpmrq-gold); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-verdict {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 4px;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-feedback.is-right .wpmr-trainer-verdict { color: var(--wpmrq-ok); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-feedback.is-right .wpmr-trainer-verdict::before { content: "✓ "; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-feedback.is-wrong .wpmr-trainer-verdict { color: var(--wpmrq-bad); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-feedback.is-wrong .wpmr-trainer-verdict::before { content: "✗ "; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-verdict.is-done { color: var(--wpmrq-gold); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-answer { margin: 0 0 2px; font-weight: 700; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-exp { margin: 0 0 12px; color: var(--wpmrq-muted); font-size: 14px; max-width: 70ch; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-summary { margin: 0 0 12px; color: var(--wpmrq-muted); }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-flow { display: flex; gap: 10px; }

/* ── Stats strip ── */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stats {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 8px 22px;
  align-items: center;
  margin-top: 14px;
  padding: 12px 16px;
  background: var(--wpmrq-panel);
  border: 1px solid var(--wpmrq-line);
  border-radius: 12px;
}
@container wpmrq (max-width: 480px) {
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-stats { grid-template-columns: 1fr 1fr; }
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-stat--set { grid-column: 1 / -1; }
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stat { display: flex; flex-direction: column; gap: 2px; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stat-l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--wpmrq-muted);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-stat-v {
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--wpmrq-text);
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-bar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--wpmrq-cell);
  border: 1px solid var(--wpmrq-cell-line);
  overflow: hidden;
  margin-top: 5px;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(var(--wpmrq-gold-rgb), 0.75), var(--wpmrq-gold));
  border-radius: 4px;
  transition: width 0.25s ease;
}

/* ── All-time line / guest CTA / toast / noscript ── */
.wpmr-trainer.wpmr-trainer .wpmr-trainer-alltime,
.wpmr-trainer.wpmr-trainer .wpmr-trainer-cta { margin: 12px 0 0; font-size: 13px; color: var(--wpmrq-muted); }
.wpmr-trainer.wpmr-trainer .wpmr-link { color: var(--wpmrq-gold); text-decoration: none; }
.wpmr-trainer.wpmr-trainer .wpmr-link:hover { text-decoration: underline; }
.wpmr-trainer.wpmr-trainer .wpmr-trainer-toast {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--wpmrq-panel);
  color: var(--wpmrq-text);
  border: 1px solid var(--wpmrq-gold);
  border-radius: 10px;
  box-shadow: var(--wpmrq-shadow);
  padding: 9px 18px;
  font-size: 14px;
  white-space: nowrap;
  z-index: 5;
}
.wpmr-trainer.wpmr-trainer .wpmr-trainer-noscript { margin: 12px 0 0; color: var(--wpmrq-muted); }

@media (prefers-reduced-motion: reduce) {
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-opt,
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-primary,
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-bar-fill { transition: none; }
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-opt:not(:disabled):hover,
  .wpmr-trainer.wpmr-trainer .wpmr-trainer-primary:hover { transform: none; }
}

/* =========================================================
   Quiz rankings [wpmr_trainer_leaderboard]
   Same tokens (defined above), CSS-only tabs.
   ========================================================= */
.wpmr-tlb.wpmr-tlb {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--wpmrq-text);
  background: var(--wpmrq-bg);
  border: 1px solid var(--wpmrq-line);
  border-radius: 16px;
  box-shadow: var(--wpmrq-shadow);
  padding: 18px 20px;
  width: 100%;
  margin: 0 0 1.5em;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: wpmrtlb;
}
.wpmr-tlb.wpmr-tlb .wpmr-tlb-title {
  font-family: inherit;
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
  padding: 0;
  color: var(--wpmrq-text);
}
.wpmr-tlb.wpmr-tlb .wpmr-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--wpmrq-line); margin-bottom: 10px; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-tab {
  padding: 9px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--wpmrq-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  user-select: none;
}
.wpmr-tlb.wpmr-tlb .wpmr-tlb-tab:hover { color: var(--wpmrq-text); }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-radio:focus-visible ~ .wpmr-tlb-tabs .wpmr-tlb-tab { outline: 1px dashed var(--wpmrq-gold); }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-panel { display: none; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-radio[value="week"]:checked  ~ .wpmr-tlb-panel[data-period="week"],
.wpmr-tlb.wpmr-tlb .wpmr-tlb-radio[value="month"]:checked ~ .wpmr-tlb-panel[data-period="month"],
.wpmr-tlb.wpmr-tlb .wpmr-tlb-radio[value="all"]:checked   ~ .wpmr-tlb-panel[data-period="all"] { display: block; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-radio[value="week"]:checked  ~ .wpmr-tlb-tabs .wpmr-tlb-tab[data-period="week"],
.wpmr-tlb.wpmr-tlb .wpmr-tlb-radio[value="month"]:checked ~ .wpmr-tlb-tabs .wpmr-tlb-tab[data-period="month"],
.wpmr-tlb.wpmr-tlb .wpmr-tlb-radio[value="all"]:checked   ~ .wpmr-tlb-tabs .wpmr-tlb-tab[data-period="all"] { color: var(--wpmrq-gold); border-bottom-color: var(--wpmrq-gold); }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-table th {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wpmrq-muted);
  padding: 7px 8px;
  text-align: left;
  border-bottom: 1px solid var(--wpmrq-line);
  background: none;
}
.wpmr-tlb.wpmr-tlb .wpmr-tlb-table td { padding: 10px 8px; border-bottom: 1px solid var(--wpmrq-line); background: none; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-table tbody tr:nth-child(even) td { background: var(--wpmrq-cell); }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-table tr:last-child td { border-bottom: 0; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-pos { width: 2.4em; font-weight: 800; color: var(--wpmrq-muted); font-variant-numeric: tabular-nums; }
.wpmr-tlb.wpmr-tlb tr.is-top .wpmr-tlb-pos { color: var(--wpmrq-gold); }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wpmr-tlb.wpmr-tlb th.wpmr-tlb-num { text-align: right; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-name a { color: var(--wpmrq-text); text-decoration: none; font-size: inherit; font-family: inherit; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-name a:hover { color: var(--wpmrq-gold); text-decoration: underline; }
.wpmr-tlb.wpmr-tlb tr.is-me td { background: rgba(var(--wpmrq-gold-rgb), 0.1); }
.wpmr-tlb.wpmr-tlb tr.is-me .wpmr-tlb-name { color: var(--wpmrq-gold); font-weight: 700; }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-empty, .wpmr-tlb.wpmr-tlb .wpmr-tlb-you, .wpmr-tlb.wpmr-tlb .wpmr-tlb-note { margin: 10px 0 0; font-size: 13px; color: var(--wpmrq-muted); }
.wpmr-tlb.wpmr-tlb .wpmr-tlb-you { color: var(--wpmrq-gold); }
@container wpmrtlb (max-width: 420px) {
  .wpmr-tlb.wpmr-tlb .wpmr-tlb-opt { display: none; }
  .wpmr-tlb.wpmr-tlb .wpmr-tlb-tab { padding: 8px 10px; font-size: 13px; }
}