/* Marquee skin — Know-It-All (owner 2026-09-08).
 *
 * Restyles the SHARED PracticeKit shell's own components (question card,
 * options, scoreboard, header, tabs) into the quiz-show "stage" aesthetic —
 * but every rule is scoped under .mq-stage, so the shell and every
 * other theme are completely untouched. This is what makes the whole app read
 * as its own product (not just recoloured), the App Store 4.3(a) fix.
 *
 * The token palette lives in themes.css (.mq-stage); this file is
 * pure PRESENTATION on top of it — display type, the bulb motif, spotlight-lit
 * answers, mono A/B/C/D keys, the scoreboard. Offline note: Fraunces is loaded
 * from Google Fonts in index.html (web); the Capacitor bundle falls back to the
 * serif stack until the woff2 is embedded here as a data-URI.
 */

/* Self-hosted Fraunces (variable, weight axis) so the display face ships INSIDE
   the offline Capacitor bundle — the Google Fonts <link> in index.html only
   works on the web. Until static/fonts/Fraunces.woff2 exists the stack falls
   back to Newsreader/serif (see download command in the repo notes). */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root { --mq-display: "Fraunces", "Newsreader", Georgia, serif;
        --mq-mono: ui-monospace, "SF Mono", "DM Mono", Menlo, monospace; }

/* ── Stage: a soft spotlight from top-centre over the whole app ─────────── */
.mq-stage body { position: relative; }
.mq-stage body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 70% at 50% -8%,
    color-mix(in srgb, var(--accent) 16%, transparent) 0%,
    transparent 46%);
}
.mq-stage .pk-app { position: relative; z-index: 1; }

/* ── Header: Fraunces title framed by a marquee bulb strip ──────────────── */
.mq-stage .pk-title {
  font-family: var(--mq-display); font-weight: 600; font-size: 30px;
  letter-spacing: -.01em; margin: 10px 0 6px;
}
.mq-stage .pk-topbar {
  position: relative; padding-top: 12px;
}
/* a lit-bulb strip along the top edge of the stage */
.mq-stage .pk-topbar::before {
  content: ""; display: block; height: 8px; margin: 0 auto 12px; max-width: 460px;
  background-image: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 92%, #fff) 0 2.4px, transparent 3px);
  background-size: 26px 8px; background-position: center; background-repeat: repeat-x;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 55%, transparent));
  opacity: .9;
}

/* ── Tabs: full-strength inactive labels (as bright as the category tiles) ── */
.mq-stage .pk-tab { color: var(--ink); }
.mq-stage .pk-tab.is-active {
  color: var(--accent-strong); border-bottom-color: var(--accent);
}
/* the Solo / Game Night pill sits in the tab row — keep its inactive label
   just as bright as the real tabs (it's set to a dimmer token inline). */
.mq-stage #mode-toggle button { color: var(--ink); }
.mq-stage #mode-toggle button.on { color: var(--on-accent); }

/* ── The clue: a staged question card ───────────────────────────────────── */
.mq-stage .pk-prompt {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--surface) 82%, transparent),
    color-mix(in srgb, var(--q-bg) 88%, transparent));
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 16px; padding: 30px 24px;
  box-shadow: 0 18px 40px -26px rgba(0,0,0,.75),
              inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
/* a small "CLUE" eyebrow above the question, drawn in, costs no markup */
.mq-stage .pk-prompt::before {
  content: "CLUE"; display: block; font-family: var(--mq-mono);
  font-size: 10px; letter-spacing: .28em; color: var(--accent);
  margin-bottom: 12px; opacity: .85;
}
:root[data-qfont="newsreader"].mq-stage .pk-prompt {
  font-size: 21px; line-height: 1.4;
}

/* ── Options: mono A/B/C/D keys, spotlight-lit correct, coral wrong ──────── */
.mq-stage #pk-options { counter-reset: mqopt; gap: 10px; }
.mq-stage #pk-options
  .pk-option:not(.pk-selfscore):not(.pk-start-gate):not(.pk-order-opt) {
  counter-increment: mqopt;
  position: relative; text-align: left; padding: 14px 15px 14px 46px;
  border-radius: 12px; border-width: 1px;
  background: var(--surface);
  transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease;
}
/* the lettered key chip */
.mq-stage #pk-options
  .pk-option:not(.pk-selfscore):not(.pk-start-gate):not(.pk-order-opt)::before {
  content: counter(mqopt, upper-alpha);
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mq-mono); font-size: 12px; font-weight: 600;
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.mq-stage #pk-options .pk-option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--opt-border));
  box-shadow: 0 8px 22px -14px rgba(0,0,0,.6);
}
/* correct answer — a green spotlight (semantic stays green, glow is the drama) */
.mq-stage .pk-option.correct {
  background: color-mix(in srgb, var(--a-border) 15%, var(--surface));
  border-color: var(--a-border); color: var(--ink);
  box-shadow: 0 0 0 1px var(--a-border),
              0 0 26px -4px color-mix(in srgb, var(--a-border) 70%, transparent);
}
.mq-stage .pk-option.correct::before {
  color: #06231a; background: var(--a-border); border-color: var(--a-border);
}
.mq-stage .pk-option.wrong {
  background: color-mix(in srgb, var(--danger) 13%, var(--surface));
  border-color: var(--danger); color: var(--ink);
}
.mq-stage .pk-option.wrong::before {
  color: #fff; background: var(--danger); border-color: var(--danger);
}

/* Start gate — a lit marquee button rather than a plain option */
.mq-stage .pk-start-gate {
  font-family: var(--mq-display); font-weight: 600; font-size: 20px;
  background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: 0 0 30px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}
.mq-stage .pk-start-gate::before { content: none; }

/* ── Feedback verdict in the display face ───────────────────────────────── */
.mq-stage .pk-feedback { font-family: var(--mq-display); font-size: 18px; }

/* ── Scoreboard: the running score restyled as a lit scoreboard pill ─────── */
.mq-stage .pk-scorebar {
  display: inline-block; margin: 20px auto 4px;
  font-family: var(--mq-mono); font-size: 13px; letter-spacing: .04em;
  color: var(--accent-strong);
  background: color-mix(in srgb, #000 22%, var(--surface));
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 16px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}
.mq-stage #pk-quiz { text-align: center; }
.mq-stage #pk-quiz .pk-bar,
.mq-stage #pk-quiz .pk-board { text-align: initial; }

/* ── Home wordmark upgraded to the display face under Marquee ────────────── */
.mq-stage #mq-word { font-family: var(--mq-display); }
.mq-stage #mq-lead { font-family: var(--mq-display); }

/* ── Reduced-motion: nothing here animates, but keep the glow static ─────── */