/* ================================================================
   Hosted games — shared design system
   Loaded by trivia.html, acronym-game.html and feedback-loop.html.

   This is the static-page twin of app/styles.css: the same token names,
   the same class names (panel/card, pub-btn, pub-pill, pub-icon, a.alt,
   p.secondary) and the same type/spacing scale, so a game page reads as
   the same product as the public catalogue and the admin console.

   Tokens below are fallbacks. Every one of them is overridden at runtime
   by /api/public/theme-tokens, which serves the palette an admin edits in
   Settings -> Appearance. Verdania keeps its own style and loads none of this.
   ================================================================ */
/* Inter, served by us rather than imported from Google, and the variable
   font rather than a list of static weights. The import named 400, 600, 700,
   800 and 900 but not 500, so anything set at 500 was faked by the browser —
   differently in each engine. It is also the same file app/styles.css loads, so
   a game page and the catalogue are set in the same face. See
   public/fonts/README.md. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Dark is the default here (games open dark unless the visitor has chosen
   otherwise) so there is no flash of light before the theme script runs. */
:root {
  /* Named families only, no `ui-sans-serif`/`system-ui`: each engine resolves
     those for itself (Firefox does not implement `ui-sans-serif` at all), so a
     chain built on them can hand a noticeably lighter face to one browser than
     to the next. Matches --font-sans in app/styles.css. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --bg: #0b1220;
  --panel: #131c2e;
  --panel-soft: #1b2740;
  --panel-accent: #182a45;
  --ink: #f1f5f9;
  --muted: #94a3b8;
  --line: rgba(255, 255, 255, .14);
  --line-input: rgba(255, 255, 255, .18);

  --heading: #f1f5f9;
  --p-primary: #f1f5f9;
  --p-secondary: #94a3b8;
  --a-primary: #3b82f6;
  --a-secondary: #e7e5e4;
  --a-alt: #dbe4ee;

  --brand: #3b82f6;
  --brand-strong: #60a5fa;
  --brand-glow: rgba(59, 130, 246, .25);
  --secondary: #2dd4bf;

  --success: #4ade80;
  --warn: #fbbf24;
  --bad: #f87171;

  --pub-btn-primary-bg: #38bdf8;
  --pub-btn-primary-text: #0f172a;
  --pub-btn-secondary-bg: #2dd4bf;
  --pub-btn-secondary-text: #062b2c;
  --pub-btn-alt-bg: transparent;
  --pub-btn-alt-text: #f1f5f9;

  --pill-primary-bg: rgba(250, 204, 21, .15);
  --pill-primary-text: #fef08a;
  --pill-secondary-bg: rgba(59, 130, 246, .16);
  --pill-secondary-text: #93c5fd;

  --tile-primary: #131c2e;
  --tile-secondary: #131c2e;
  --icon-primary: #3b82f6;
  --icon-secondary: #3b82f6;

  /* pub-section.alternative — the game page backdrop */
  --game-bg-1: #117a2f;
  --game-bg-2: #0b6f9b;

  /* Question & answer */
  --qa-question-text: #f1f5f9;
  --qa-option-bg: #0b223f;
  --qa-option-text: #e2e8f0;
  --qa-correct: #86efac;
  --qa-incorrect: #fca5a5;

  /* Shared radii / shadows / sizes — mirrors app/styles.css */
  --radius: 18px;
  --r-sm: .5rem;
  --r: .75rem;
  --r-lg: 1rem;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, .35), 0 10px 30px rgba(0, 0, 0, .45);

  --toggle-bg: rgba(15, 23, 42, .92);
  --toggle-text: #f8fafc;
  --toggle-border: rgba(255, 255, 255, .25);

  --summary-logo-filter: grayscale(1) brightness(0) invert(1);
  --summary-requirement-mobile-size: .74rem;
}

:root[data-theme='light'] {
  --bg: #f7f9fb;
  --panel: #f8fbff;
  --panel-soft: #eef6ff;
  --panel-accent: #e9f0fd;
  --ink: #0f172a;
  --muted: #334155;
  --line: #cfe0ec;
  --line-input: #d6d3d1;

  --heading: #0f172a;
  --p-primary: #0f172a;
  --p-secondary: #334155;
  --a-primary: #1d4ed8;
  --a-secondary: #e7e5e4;
  --a-alt: #334155;

  --brand: #1d4ed8;
  --brand-strong: #1e40af;
  --brand-glow: rgba(29, 78, 216, .15);
  --secondary: #0b7b7f;

  --success: #0d7752;
  --warn: #b45309;
  --bad: #c2410c;

  --pub-btn-primary-bg: #38bdf8;
  --pub-btn-primary-text: #0f172a;
  --pub-btn-secondary-bg: #0b7b7f;
  --pub-btn-secondary-text: #ffffff;
  --pub-btn-alt-bg: transparent;
  --pub-btn-alt-text: #0f172a;

  --pill-primary-bg: rgba(30, 64, 175, .1);
  --pill-primary-text: #1e3a8a;
  --pill-secondary-bg: rgba(30, 64, 175, .1);
  --pill-secondary-text: #1e3a8a;

  --tile-primary: #f8fbff;
  --tile-secondary: #f8fbff;
  --icon-primary: #1d4ed8;
  --icon-secondary: #1d4ed8;

  --game-bg-1: #d5ecdf;
  --game-bg-2: #d5e5f8;

  --qa-question-text: #0f172a;
  --qa-option-bg: #ffffff;
  --qa-option-text: #0f172a;
  --qa-correct: #166534;
  --qa-incorrect: #991b1b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .07);
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 4px 16px rgba(0, 0, 0, .06);
  --shadow-lg: 0 4px 6px rgba(0, 0, 0, .07), 0 10px 30px rgba(0, 0, 0, .10);

  --toggle-bg: rgba(255, 255, 255, .94);
  --toggle-text: #0f172a;
  --toggle-border: rgba(15, 23, 42, .2);

  --summary-logo-filter: grayscale(1) brightness(0);
}

/* No-JS / pre-script fallback for visitors whose system prefers light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --panel: #f8fbff;
    --panel-soft: #eef6ff;
    --panel-accent: #e9f0fd;
    --ink: #0f172a;
    --muted: #334155;
    --line: #cfe0ec;
    --line-input: #d6d3d1;
    --heading: #0f172a;
    --p-primary: #0f172a;
    --p-secondary: #334155;
    --a-primary: #1d4ed8;
    --a-alt: #334155;
    --brand: #1d4ed8;
    --pub-btn-secondary-bg: #0b7b7f;
    --pub-btn-secondary-text: #ffffff;
    --pub-btn-alt-text: #0f172a;
    --pill-primary-bg: rgba(30, 64, 175, .1);
    --pill-primary-text: #1e3a8a;
    --pill-secondary-bg: rgba(30, 64, 175, .1);
    --pill-secondary-text: #1e3a8a;
    --tile-primary: #f8fbff;
    --tile-secondary: #f8fbff;
    --icon-primary: #1d4ed8;
    --icon-secondary: #1d4ed8;
    --game-bg-1: #d5ecdf;
    --game-bg-2: #d5e5f8;
    --qa-question-text: #0f172a;
    --qa-option-bg: #ffffff;
    --qa-option-text: #0f172a;
    --qa-correct: #166534;
    --qa-incorrect: #991b1b;
    --toggle-bg: rgba(255, 255, 255, .94);
    --toggle-text: #0f172a;
    --toggle-border: rgba(15, 23, 42, .2);
    --summary-logo-filter: grayscale(1) brightness(0);
  }
}

/* ---- Base ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  /* Painted across the body box (not viewport-fixed) so the gradient still
     covers pages far taller than the viewport, e.g. the session summary. */
  background: linear-gradient(140deg, var(--game-bg-1), var(--game-bg-2));
  background-repeat: no-repeat;
  min-height: 100vh;
  line-height: 1.55;
}

/* Matches .pub-section-inner in app/styles.css */
#app {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: grid;
  gap: 1.5rem;
  align-content: start;
}

/* ---- Headings ---- */
h1, h2, h3 { color: var(--heading); }
h1 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; line-height: 1.2; }
h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; }
h3 { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; }

/* ---- Paragraphs ---- */
p { color: var(--p-primary); }
p.primary { color: var(--p-primary); font-size: .95rem; line-height: 1.6; }
p.secondary, .text-secondary { color: var(--p-secondary); font-size: .875rem; line-height: 1.55; }

/* ---- Links ---- */
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
a.primary { color: var(--a-primary); }
a.secondary { color: var(--a-secondary); }
a.secondary:hover { text-decoration: none; }
a.alt {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--a-alt); font-size: .85rem; font-weight: 600;
}
a.alt:hover { color: var(--ink); text-decoration: none; }

/* ---- Panels / cards ---- */
.panel, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

/* Vertical rhythm inside a panel.
   One consistent step between direct children (the "owl" pattern) means new
   markup picks up correct spacing without bespoke per-element margins; a
   heading and the paragraph right under it stay visually paired. */
.panel > * + *, .card > * + * { margin-top: 1.25rem; }
.panel > h1, .panel > h2, .panel > h3,
.card > h1, .card > h2, .card > h3 { margin-bottom: 0; }
.panel > h1 + p, .panel > h2 + p, .panel > h3 + p,
.card > h1 + p, .card > h2 + p, .card > h3 + p { margin-top: .4rem; }
.panel.secondary, .card.secondary {
  background: var(--panel-soft);
  box-shadow: none;
  border-radius: var(--r);
}

/* ---- Buttons ---- */
.pub-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.2;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: filter .15s, background .15s;
  min-height: 44px;
}
.pub-btn:hover { text-decoration: none; }
.pub-btn:disabled { opacity: .45; cursor: not-allowed; }
.pub-btn i { line-height: 1; }
.pub-btn.primary { background: var(--pub-btn-primary-bg); color: var(--pub-btn-primary-text); }
.pub-btn.primary:hover { filter: brightness(.92); }
.pub-btn.secondary { background: var(--pub-btn-secondary-bg); color: var(--pub-btn-secondary-text); }
.pub-btn.secondary:hover { filter: brightness(.92); }
.pub-btn.alt {
  background: var(--pub-btn-alt-bg);
  color: var(--pub-btn-alt-text);
  border: 1.5px solid color-mix(in srgb, var(--pub-btn-alt-text) 35%, transparent);
}
.pub-btn.alt:hover { background: color-mix(in srgb, var(--pub-btn-alt-text) 10%, transparent); }
.pub-btn.sm { padding: 6px 14px; font-size: .78rem; min-height: 32px; }

/* ---- Pills ---- */
.pub-pill {
  display: inline-flex; align-items: center; width: fit-content; min-height: 26px;
  border-radius: 999px; padding: .25rem .65rem;
  font-size: .75rem; font-weight: 700;
}
.pub-pill.primary {
  background: var(--pill-primary-bg); color: var(--pill-primary-text);
  border: 1px solid color-mix(in srgb, var(--pill-primary-text) 40%, transparent);
}
.pub-pill.secondary {
  background: var(--pill-secondary-bg); color: var(--pill-secondary-text);
  border: 1px solid color-mix(in srgb, var(--pill-secondary-text) 35%, transparent);
}

/* ---- Icons ---- */
.pub-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.pub-icon.primary { color: var(--icon-primary); font-size: 2.5rem; }
.pub-icon.secondary { color: var(--icon-secondary); font-size: 1.6rem; }

/* ---- Forms ---- */
.input {
  flex: 1;
  min-width: 190px;
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  padding: .55rem .75rem;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

/* ---- Layout helpers ---- */
.grid { display: grid; gap: .75rem; }
.levels { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.status { min-height: 1.2em; margin-top: .5rem; color: var(--p-secondary); font-size: .875rem; }

/* A short call-to-action panel reads better centred than left-aligned in a
   wide, otherwise-empty panel. */
.game-intro { text-align: center; }
.game-intro > * + * { margin-top: 1.25rem; }
.game-intro .pub-btn { min-width: 200px; }

/* Back / cross-game links above the first panel */
.top-links { display: flex; justify-content: space-between; gap: .75rem; }

/* End-of-run actions. The run is over, so there is no forward step to weight
   to the right — these are two equal exits, centred like the hero CTA that
   started the run. Leaving comes first and replaying second, so the reading
   order matches the flow out of the game. */
.end-actions {
  justify-content: center;
  margin-top: 0;
}
.end-actions .pub-btn { min-width: 180px; }

/* ---- HUD ---- */
.hud { display: grid; gap: .75rem; grid-template-columns: repeat(3, 1fr); }
.hud-chip {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .6rem .75rem;
  text-align: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink);
  transition: background-color .15s ease, color .15s ease;
}
.hud-chip.timer-warn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); }
.hud-chip.timer-danger { background: color-mix(in srgb, var(--bad) 22%, transparent); color: var(--bad); }

/* ---- Question & answer ---- */
/* The question reads as the panel's own content rather than a boxed callout;
   its colour stays admin-editable via --qa-question-text. */
.question-text {
  color: var(--qa-question-text);
  line-height: 1.5;
}
.question-text h2 { color: var(--qa-question-text); }

.option {
  width: 100%;
  text-align: left;
  background: var(--qa-option-bg);
  color: var(--qa-option-text);
  border: 1px solid var(--line-input);
  border-radius: var(--r-sm);
  padding: .85rem 1rem;
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.option:hover { border-color: var(--brand); }
.option.correct {
  border-color: color-mix(in srgb, var(--qa-correct) 45%, transparent);
  background: color-mix(in srgb, var(--qa-correct) 16%, transparent);
}
.option.incorrect {
  border-color: color-mix(in srgb, var(--qa-incorrect) 45%, transparent);
  background: color-mix(in srgb, var(--qa-incorrect) 16%, transparent);
}
.option.dimmed { opacity: .55; }

.answer-status { color: var(--ink); font-weight: 700; font-size: .9rem; }
.answer-status.timeout { color: var(--warn); }

/* Running score / round readout under the question. */
.game-score {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--p-secondary);
}
.game-score strong { color: var(--ink); font-size: .95rem; }

/* Progression row. In a linear, stepper-style flow the forward action sits
   furthest right and secondary actions to its left — the convention used by
   Material, Carbon and Fluent for wizards. (Page-level forms keep their submit
   on the left, in the reading path; hero CTAs are centred.) */
.meta-row {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}
.meta-row .pub-btn { flex: 0 1 auto; min-width: 180px; max-width: 320px; }
.meta-row .report-toggle-btn { flex: 0 0 auto; min-width: auto; max-width: none; }
.report-toggle-btn {
  border-style: dashed;
  font-size: .8rem;
  font-weight: 700;
}
.report-toggle-btn.has-review { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 60%, transparent); }

/* ---- Flag-for-review panel ---- */
.issue-panel { margin-top: .75rem; display: none; }
.issue-panel.active { display: block; }
.issue-help { margin-bottom: .5rem; }
.issue-text {
  width: 100%;
  min-height: 88px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-input);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
  padding: .6rem .75rem;
  resize: vertical;
}
.issue-text:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

/* ---- Summary ----
   One row per question: result mark on the left, the question and answers in
   the middle, the CHS reference on the right. */
.summary-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-soft);
}
.summary-item.correct {
  background: color-mix(in srgb, var(--qa-correct) 12%, transparent);
  border-color: color-mix(in srgb, var(--qa-correct) 30%, transparent);
}
.summary-item.incorrect {
  background: color-mix(in srgb, var(--qa-incorrect) 12%, transparent);
  border-color: color-mix(in srgb, var(--qa-incorrect) 30%, transparent);
}
/* The mark alone carries the result — no filled block behind it. */
.summary-icon {
  font-size: 1.3rem;
  line-height: 1.45;
}
.summary-item.correct .summary-icon { color: var(--qa-correct); }
.summary-item.incorrect .summary-icon { color: var(--qa-incorrect); }
.summary-content { display: grid; gap: .3rem; min-width: 0; }
.summary-content h3 { margin-bottom: 0; }
.summary-meta {
  justify-self: end;
  text-align: right;
  font-size: .75rem;
  font-weight: 700;
  color: var(--p-secondary);
  white-space: nowrap;
}

/* ---- Feedback / subscribe ---- */
/* A short prompt and its controls waste a whole row each on wide screens;
   pair them until there is no longer room. */
.inline-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.inline-prompt > h2 { margin-bottom: 0; }
.inline-prompt > .row { flex: 0 1 auto; margin-top: 0; }
@media (max-width: 640px) {
  .inline-prompt > .row { flex: 1 1 100%; }
}

.like-btn { flex: 1 1 auto; min-width: 150px; max-width: 260px; }
.like-btn .fa-solid { margin-right: .4rem; }
/* A selected reaction must not fall back to the generic .alt hover wash, which
   greyed the fill and muted the label; keep the state colour and darken slightly. */
.like-btn.active-up,
.like-btn.active-up:hover { background: var(--success); color: #fff; border-color: transparent; }
.like-btn.active-down,
.like-btn.active-down:hover { background: var(--bad); color: #fff; border-color: transparent; }
.like-btn.active-up:hover,
.like-btn.active-down:hover { filter: brightness(.92); }
.subscribe-copy { margin-bottom: .85rem; }

/* ---- Share ---- */
.share-heading { font-size: .95rem; font-weight: 700; margin-bottom: .75rem; color: var(--heading); }
.share-row { display: flex; gap: .75rem; flex-wrap: wrap; }
.share-btn { flex: 1; min-width: 130px; color: #fff; }
.share-btn:hover { filter: brightness(.92); }
.share-native { background: #6366f1; }
.share-twitter { background: #000; }
.share-whatsapp { background: #25d366; }
.share-linkedin { background: #0a66c2; }
.share-facebook { background: #1877f2; }
.share-status { font-size: .8rem; color: var(--p-secondary); margin-top: .5rem; min-height: 1.2em; }

/* ---- Floating theme toggle — matches .theme-toggle-float in app/styles.css ---- */
.theme-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 1000;
  border: 1px solid var(--toggle-border);
  border-radius: 999px;
  width: 46px;
  height: 46px;
  font-size: 1.1rem;
  background: var(--toggle-bg);
  color: var(--toggle-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .2);
}

/* ---- Responsive ---- */
@media (max-width: 760px) {
  #app { padding: 2rem 1rem; }
  .panel, .card { padding: 1.25rem; }
  .hud { grid-template-columns: 1fr; }
  .row > .pub-btn,
  .row > .input,
  .feedback-row .like-btn,
  .share-row .share-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
  .meta-row .pub-btn { min-width: 0; max-width: none; flex: 1 1 100%; }
  .summary-item { grid-template-columns: auto minmax(0, 1fr); gap: .75rem; }
  .summary-meta { grid-column: 2; justify-self: start; text-align: left; white-space: normal; }
}