/*  Zelqo Quiz – fælles tema for alle sider (storskærm, telefon, fjernbetjening, forside og admin).
 *  Én kilde til farver, skrift og former, så alt ser ud som samme produkt.
 *
 *  Udtryk: en mørk scene med ét roligt lys foroven, hvide tal og tekster, og guld som den ene signalfarve
 *  (det vigtigste på skærmen: Start-knappen, det rigtige svar, vinderen). De fire svarfarver er de eneste andre stærke farver.
 */
@font-face{font-family:"Outfit";src:url(/fonts/outfit-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  /* skrift */
  --f-display:"Outfit","Segoe UI",system-ui,sans-serif;   /* overskrifter, tal, knapper, alt på storskærmen */
  --f-body:"Inter","Segoe UI",system-ui,Roboto,sans-serif; /* løbende tekst og formularer */

  /* scenen (mørk) */
  --bg:#070b16;            /* bagvæggen */
  --bg-2:#0d1426;          /* bund af forløbet */
  --glow:#1c2c63;          /* lyset foroven */
  --surface:#111a2e;       /* kort og paneler */
  --surface-2:#18233d;     /* hævet / hover */
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --text:#f3f6fc;
  --muted:#9aa7c2;
  --faint:#6b7894;

  /* signalfarve */
  --gold:#ffc53d;
  --gold-2:#ffab1a;        /* forløbets anden ende */
  --gold-ink:#1d1400;      /* tekst på guld */
  --gold-soft:rgba(255,197,61,.14);

  /* svarfarver (A, B, C, D) – altid sammen med hver sin figur */
  --a:#e5484d; --b:#2f7df6; --c:#e0a100; --d:#1fa15a;

  /* tilstande */
  --ok:#34d399; --ok-soft:rgba(52,211,153,.16);
  --bad:#ff6b6b; --bad-soft:rgba(255,107,107,.16);
  --info:#7aa2ff;

  /* former */
  --r-s:10px; --r-m:16px; --r-l:24px; --r-pill:999px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

/* Scenens baggrund: bruges på body af de mørke sider */
.scene{background:
  radial-gradient(120% 70% at 50% -18%,var(--glow) 0%,rgba(28,44,99,0) 62%),
  linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%);
  background-color:var(--bg);background-attachment:fixed;color:var(--text)}

/* Mærket: guld-Q + navn. <span class="brandmark"><svg class="qmark" …/><b>Zelqo</b> Quiz</span> */
.brandmark{display:inline-flex;align-items:center;gap:.45em;font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;color:var(--text);white-space:nowrap}
.brandmark .qmark{width:1.25em;height:1.25em;flex:none}

/* ─────────────── Juletema ───────────────
   Slås til af serveren (<html data-tema="jul">) i juletiden eller fra admin. Kun farver og pynt – ingen layout ændres,
   så intet i spillet kan gå i stykker af det: varmt rødt lys foroven i stedet for blåt, en slikstok-stribe øverst og let snefald (jul.js). */
html[data-tema="jul"]{--glow:#7a1a2c;--bg:#0b0810;--bg-2:#150c15;--surface:#1b1322;--surface-2:#271b2f}
html[data-tema="jul"] body::before{content:"";position:fixed;top:0;left:0;right:0;height:5px;z-index:2147483000;pointer-events:none;
  background:repeating-linear-gradient(135deg,#d7263d 0,#d7263d 14px,#f7f3ea 14px,#f7f3ea 28px)}
.sne{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;overflow:hidden}
.sne i{position:absolute;top:-14px;border-radius:50%;background:#fff;animation:snefald linear infinite;will-change:transform}
@keyframes snefald{to{transform:translate3d(var(--dx,20px),106vh,0)}}
@media (prefers-reduced-motion:reduce){.sne{display:none}}