/* ==========================================================================
   BASIS
   Kleuren, reset, body en algemene hulpklassen (alle pagina's).
   ========================================================================== */

:root {
  /* Stijl "Neon" (standaard). Andere stijlen: [data-theme="…"] hieronder.
     De *-rgb-variabelen zijn er voor doorschijnende varianten: rgba(var(--accent-rgb), 0.3) */
  --bg-dark: #0a0f1d;
  --bg-image: none;
  --card-bg: rgba(30, 41, 59, 0.9);
  --card-border: rgba(255, 255, 255, 0.15);
  --surface: #0f172a;      /* invulvelden, tegels, knoppen */
  --surface-2: #1e293b;    /* vensters */
  --surface-3: #334155;    /* neutrale knoppen */
  --surface-rgb: 15, 23, 42;
  --backdrop-rgb: 6, 9, 19; /* achter een open venster */
  --shadow-rgb: 0, 0, 0;
  --accent-primary: #38bdf8;
  --accent-secondary: #818cf8;
  --accent-rgb: 56, 189, 248;
  --accent2-rgb: 129, 140, 248;
  --accent-gradient: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
  --on-accent: #0f172a;    /* tekst op een gekleurde knop */
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --highlight-text: #fef08a;
  --success: #38bdf8;     /* Blauw i.p.v. fel groen */
  --gold: #f59e0b;        /* Goud voor Highlights, Beurt & Volgende */
  --gold-rgb: 245, 158, 11;
  --purple-glow: #a855f7;   /* Paars voor Geraden & Finale */
  --purple-rgb: 168, 85, 247;
  --correct: #22c55e;     /* groene "juist"-overlay */
  --correct-rgb: 34, 197, 94;
  --danger: #ef4444;
  --danger-rgb: 239, 68, 68;
  --warning: #f59e0b;
}

/* Stijl "Kerst": donker dennengroen met goud en kerstrood, sneeuw en lichtjes (zie onderaan).
   Juist (groen) en fout (rood) blijven duidelijk anders dan de stijlkleuren. */
:root[data-theme="kerst"] {
  --bg-dark: #0a1813;
  --bg-image: radial-gradient(ellipse at 50% -10%, rgba(232, 87, 74, 0.16) 0%, transparent 55%), radial-gradient(ellipse at 50% 110%, rgba(245, 196, 81, 0.1) 0%, transparent 60%);
  --card-bg: rgba(16, 38, 29, 0.9);
  --card-border: rgba(245, 196, 81, 0.22);
  --surface: #0f241c;
  --surface-2: #153126;
  --surface-3: #21473a;
  --surface-rgb: 15, 36, 28;
  --backdrop-rgb: 5, 14, 10;
  --shadow-rgb: 0, 0, 0;
  --accent-primary: #f5c451;
  --accent-secondary: #e8574a;
  --accent-rgb: 245, 196, 81;
  --accent2-rgb: 232, 87, 74;
  --on-accent: #1b130a;
  --text-main: #fbf7ef;
  --text-muted: #a9bfb3;
  --highlight-text: #ffe08a;
  --success: #f5c451;
  --gold: #6fdc94;        /* hulstgroen: Beurt, Volgende, PAS, sneltoetsen, gevonden trefwoorden */
  --gold-rgb: 111, 220, 148;
  --purple-glow: #dfe9f2; /* zilver/sneeuw: Geraden & Finale */
  --purple-rgb: 223, 233, 242;
  --correct: #4ade80;
  --correct-rgb: 74, 222, 128;
  --danger: #ff4d4d;
  --danger-rgb: 255, 77, 77;
  --warning: #f5c451;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-dark);
  background-image: var(--bg-image);
  color: var(--text-main);
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 0.6rem 1.25rem;
  overflow: hidden;
  position: relative;
}

.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.footer-bar { margin-top: 1rem; display: flex; justify-content: center; }
.back-link { color: var(--text-muted); text-decoration: none; font-size: 0.85rem; }
.hidden { display: none !important; }

/* Vangnet voor kleine schermen (gsm): de quiz is gemaakt voor laptop + TV, maar wie
   toch op een gsm doorgaat, moet kunnen scrollen i.p.v. vast te zitten */
@media (max-width: 800px) {
  body {
    height: auto;
    min-height: 100vh;
    overflow-y: auto;
  }
  .container { height: auto; }
}

/* Knoppen: rustige standaard voor hover, klik en toetsenbordfocus (zonder beweging).
   Alles in :where() = geen specificiteit, dus elke knop met een eigen hover of schaduw
   houdt die gewoon. De inset-schaduw kleurt elke achtergrond mee, ook donkere en verlopen. */
:where(button, .mk-btn, .small-screen-btn) {
  transition: box-shadow 0.15s ease;
}
:where(button:not(:disabled), .mk-btn, .small-screen-btn) {
  cursor: pointer;
}
:where(button:not(:disabled):hover, .mk-btn:hover, .small-screen-btn:hover) {
  box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.07);
}
:where(button:not(:disabled):active, .mk-btn:active, .small-screen-btn:active) {
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, 0.14);
  transition-duration: 0s;
}
:where(button, a, select, input, textarea, .mk-btn):focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Keuzelijsten (foutmelding, themaformulier, inschrijven): eigen pijltje, mooi gecentreerd met ruimte rechts.
   Getekend met twee gradiënten, zodat de kleur de stijl volgt. */
/* :not([multiple]) maakt de regel sterker dan de opmaak in modals.css / creator.css (die later laden) */
:is(.report-field, .mk-field, .lp-field) select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.3rem) 50%,
    calc(100% - 1.3rem + 5px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Stijlkeuze Neon / Kerst (js/theme.js vult elk [data-style-toggle]) */
.style-toggle {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: blur(8px);
}
.style-toggle button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
}
.style-toggle button:hover { color: var(--text-main); }
.style-toggle button[aria-pressed="true"] { background: var(--accent-gradient); color: var(--on-accent); }
.style-toggle-corner { position: fixed; top: 0.75rem; right: 1rem; z-index: 40; }

/* ==========================================================================
   KERST: vallende sneeuw, sneeuwlaagjes, ijspegels en lichtjes
   Alles met CSS (geen extra foto's) en pointer-events: none, zodat niets een klik
   tegenhoudt. Tekst blijft leesbaar: de versiering zit enkel op de randen.
   ========================================================================== */

/* Achtergrond op html i.p.v. body, anders schildert body over de sneeuw heen */
:root[data-theme="kerst"] {
  background-color: var(--bg-dark);
  background-image: var(--bg-image);
}
:root[data-theme="kerst"] body {
  background: transparent;
}

/* --- Vallende sneeuw ---------------------------------------------------- */
:root[data-theme="kerst"] body::before,
:root[data-theme="kerst"] body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: -600px;
  bottom: 0;
  pointer-events: none;
  background-size: 300px 300px;
  animation: kerstSneeuw 30s linear infinite;
}
/* Achter de inhoud: veel kleine vlokjes */
:root[data-theme="kerst"] body::before {
  z-index: -1;
  opacity: 0.8;
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 100%),
    radial-gradient(2px 2px at 90px 140px, #fff 50%, transparent 100%),
    radial-gradient(3px 3px at 160px 60px, #fff 50%, transparent 100%),
    radial-gradient(2px 2px at 230px 210px, #fff 50%, transparent 100%),
    radial-gradient(3px 3px at 270px 100px, #fff 50%, transparent 100%),
    radial-gradient(2px 2px at 50px 250px, #fff 50%, transparent 100%),
    radial-gradient(3px 3px at 130px 280px, #fff 50%, transparent 100%),
    radial-gradient(2px 2px at 200px 170px, #fff 50%, transparent 100%);
}
/* Vóór de inhoud: enkele grotere, zachte vlokken (ijl, zodat tekst leesbaar blijft) */
:root[data-theme="kerst"] body::after {
  z-index: 150;
  opacity: 0.7;
  background-size: 600px 600px;
  top: -1200px;
  animation: kerstSneeuwVoor 24s linear infinite;
  background-image:
    radial-gradient(4px 4px at 80px 120px, #fff 40%, transparent 100%),
    radial-gradient(5px 5px at 380px 60px, #fff 40%, transparent 100%),
    radial-gradient(4px 4px at 250px 420px, #fff 40%, transparent 100%),
    radial-gradient(5px 5px at 520px 300px, #fff 40%, transparent 100%),
    radial-gradient(3px 3px at 150px 540px, #fff 40%, transparent 100%);
}
@keyframes kerstSneeuw {
  from { transform: translateY(0); }
  to { transform: translateY(600px); }   /* veelvoud van de tegelhoogte: naadloze lus */
}
@keyframes kerstSneeuwVoor {
  from { transform: translateY(0); }
  to { transform: translateY(1200px); }
}

/* --- Sneeuwlaagje bovenop kaders ---------------------------------------- */
/* Tekeningen (SVG) als variabelen: sneeuwrand, maretak en kerstmuts */
:root[data-theme="kerst"] {
  --kerst-sneeuw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='22' viewBox='0 0 260 22'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.6' stop-color='%23eef4fa'/%3E%3Cstop offset='1' stop-color='%23c6d7e7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 8 C3.5 8.0 14.2 8.7 21.2 8.2 C28.3 7.6 34.9 5.5 42.5 4.9 C50.0 4.2 59.8 4.8 66.5 4.4 C73.3 4.1 76.2 3.0 82.8 2.6 C89.4 2.2 98.4 2.0 106.3 2.2 C114.3 2.3 123.5 3.2 130.3 3.5 C137.1 3.8 141.3 4.3 147.4 4.1 C153.4 4.0 159.3 2.3 166.6 2.8 C173.8 3.2 182.7 7.1 190.8 7.0 C198.9 6.9 207.0 2.5 215.3 2.2 C223.6 1.9 234.8 5.0 240.6 5.0 C246.4 5.1 246.8 2.2 250.0 2.7 C253.2 3.2 258.3 7.1 260.0 8.0 L260 12.5 C256.9 12.5 247.8 11.2 241.7 12.3 C235.6 13.4 228.8 18.9 223.4 19.1 C218.0 19.3 213.2 14.5 209.2 13.5 C205.2 12.4 203.0 13.1 199.4 12.8 C195.8 12.5 192.7 11.1 187.4 11.7 C182.2 12.3 172.8 16.5 167.8 16.5 C162.9 16.5 161.2 12.3 157.7 11.6 C154.2 11.0 150.4 11.5 146.8 12.6 C143.1 13.7 139.2 17.4 135.7 18.1 C132.1 18.7 130.4 17.4 125.4 16.6 C120.4 15.8 112.1 13.9 105.7 13.1 C99.3 12.3 93.2 10.9 87.0 11.9 C80.8 13.0 73.5 19.4 68.6 19.5 C63.6 19.5 61.2 12.6 57.2 12.0 C53.2 11.4 49.3 15.9 44.6 15.9 C39.9 15.9 33.9 12.6 29.2 12.0 C24.4 11.4 19.6 12.3 16.1 12.4 C12.6 12.5 10.7 12.6 8.0 12.6 C5.3 12.7 1.3 12.5 0.0 12.5 Z' fill='%238ea7bd' fill-opacity='.38' transform='translate(0 1.6)'/%3E%3Cpath d='M0 8 C3.5 8.0 14.2 8.7 21.2 8.2 C28.3 7.6 34.9 5.5 42.5 4.9 C50.0 4.2 59.8 4.8 66.5 4.4 C73.3 4.1 76.2 3.0 82.8 2.6 C89.4 2.2 98.4 2.0 106.3 2.2 C114.3 2.3 123.5 3.2 130.3 3.5 C137.1 3.8 141.3 4.3 147.4 4.1 C153.4 4.0 159.3 2.3 166.6 2.8 C173.8 3.2 182.7 7.1 190.8 7.0 C198.9 6.9 207.0 2.5 215.3 2.2 C223.6 1.9 234.8 5.0 240.6 5.0 C246.4 5.1 246.8 2.2 250.0 2.7 C253.2 3.2 258.3 7.1 260.0 8.0 L260 12.5 C256.9 12.5 247.8 11.2 241.7 12.3 C235.6 13.4 228.8 18.9 223.4 19.1 C218.0 19.3 213.2 14.5 209.2 13.5 C205.2 12.4 203.0 13.1 199.4 12.8 C195.8 12.5 192.7 11.1 187.4 11.7 C182.2 12.3 172.8 16.5 167.8 16.5 C162.9 16.5 161.2 12.3 157.7 11.6 C154.2 11.0 150.4 11.5 146.8 12.6 C143.1 13.7 139.2 17.4 135.7 18.1 C132.1 18.7 130.4 17.4 125.4 16.6 C120.4 15.8 112.1 13.9 105.7 13.1 C99.3 12.3 93.2 10.9 87.0 11.9 C80.8 13.0 73.5 19.4 68.6 19.5 C63.6 19.5 61.2 12.6 57.2 12.0 C53.2 11.4 49.3 15.9 44.6 15.9 C39.9 15.9 33.9 12.6 29.2 12.0 C24.4 11.4 19.6 12.3 16.1 12.4 C12.6 12.5 10.7 12.6 8.0 12.6 C5.3 12.7 1.3 12.5 0.0 12.5 Z' fill='url(%23g)'/%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='50' cy='6.6' r='1.0'/%3E%3Ccircle cx='210' cy='7.0' r='0.6'/%3E%3Ccircle cx='190' cy='9.8' r='0.6'/%3E%3Ccircle cx='243' cy='9.5' r='0.8'/%3E%3Ccircle cx='110' cy='6.4' r='0.5'/%3E%3Ccircle cx='247' cy='7.0' r='0.9'/%3E%3Ccircle cx='69' cy='9.3' r='0.8'/%3E%3Ccircle cx='78' cy='6.7' r='0.9'/%3E%3Ccircle cx='21' cy='6.9' r='0.8'/%3E%3Ccircle cx='219' cy='8.5' r='0.6'/%3E%3C/g%3E%3C/svg%3E");
  --kerst-maretak: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 74'%3E%3Cpath d='M30 0v18' stroke='%23b9a37a' stroke-width='1.4'/%3E%3Cpath d='M30 18c-6-4-12-4-14 0 4 4 10 4 14 0Zm0 0c6-4 12-4 14 0-4 4-10 4-14 0Z' fill='%23d42a33'/%3E%3Ccircle cx='30' cy='18' r='2.6' fill='%23a61d26'/%3E%3Cpath d='M29 20c-1 3-4 5-6 6M31 20c1 3 4 5 6 6' stroke='%23a61d26' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M30 22v24' stroke='%235b7d3a' stroke-width='2'/%3E%3Cpath d='M30 30C18 26 9 30 5 38c10 3 19 0 25-8Z' fill='%234f8a3c'/%3E%3Cpath d='M30 30c12-4 21 0 25 8-10 3-19 0-25-8Z' fill='%233f7531'/%3E%3Cpath d='M30 40c-10-1-17 5-19 13 9 1 16-3 19-13Z' fill='%235d9a46'/%3E%3Cpath d='M30 40c10-1 17 5 19 13-9 1-16-3-19-13Z' fill='%234b8239'/%3E%3Cpath d='M30 30C18 26 9 30 5 38M30 30c12-4 21 0 25 8' stroke='%232f5a25' stroke-width='.8' fill='none' opacity='.6'/%3E%3Cg fill='%23f7fbff' stroke='%23c9d6e2' stroke-width='.6'%3E%3Ccircle cx='27' cy='47' r='3.4'/%3E%3Ccircle cx='33.5' cy='48' r='3.4'/%3E%3Ccircle cx='30' cy='53' r='3.4'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='26' cy='46' r='1'/%3E%3Ccircle cx='32.5' cy='47' r='1'/%3E%3Ccircle cx='29' cy='52' r='1'/%3E%3C/g%3E%3C/svg%3E");
  --kerst-muts: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 52'%3E%3Cpath d='M7 40C10 24 20 10 36 6c9-2 17 1 21 8 2 3 2 7 0 9-3-4-8-6-13-4-6 2-9 9-9 21Z' fill='%23c8262f'/%3E%3Cpath d='M36 6c9-2 17 1 21 8 2 3 2 7 0 9-3-4-8-6-13-4-3 1-5 3-6 6-2-7-3-13-2-19Z' fill='%239e1b24'/%3E%3Cpath d='M4 40c7-3 24-4 34-1 3 1 4 4 3 7s-3 4-6 4c-9-2-21-1-29 1-3 1-5-1-5-4s1-6 3-7Z' fill='%23f6f9fc'/%3E%3Cpath d='M8 45c8-2 19-2 28 0' stroke='%23d7e2ec' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3Ccircle cx='57' cy='24' r='6.5' fill='%23f6f9fc'/%3E%3Ccircle cx='55.5' cy='22.5' r='2' fill='%23ffffff'/%3E%3C/svg%3E");
}
:root[data-theme="kerst"] :is(.setup-card, .how-to, .theme-card, .level-modal-card,
  .r3-media-card, .mk-intro, .mk-card, .credits-intro, .lp-card) {
  position: relative;
}
:root[data-theme="kerst"] :is(.setup-card, .how-to, .theme-card, .level-modal-card,
  .r3-media-card, .mk-intro, .mk-card, .credits-intro, .lp-card)::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 4px;
  right: 4px;
  height: 22px;
  z-index: 3;
  pointer-events: none;
  /* Onregelmatige sneeuwlaag met hoopjes en druppels; loopt zacht uit aan de uiteinden */
  background: var(--kerst-sneeuw) 0 0 / 260px 22px repeat-x;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
/* (Niet op de teamkaartjes: daar hangen de ijspegels van de kop al boven) */

/* --- Maretak en kerstmutsjes (hier en daar, niet overal) ---------------- */
/* Maretak hangt aan de bovenrand, rechts in het kader */
:root[data-theme="kerst"] :is(.lp-highlight, .lp-signup, .how-to, .setup-card, .mk-intro,
  .theme-card:nth-child(3n+2))::after,
:root[data-theme="kerst"] .welcome-banner-fullscreen .arena-tag::before {
  content: '';
  position: absolute;
  top: 4px;
  right: 2rem;
  width: 58px;
  height: 72px;
  z-index: 4;
  pointer-events: none;
  background: var(--kerst-maretak) center top / contain no-repeat;
  transform-origin: 50% 0;
  animation: kerstSchommel 3.5s ease-in-out infinite alternate;
}
/* Waar rechtsboven al iets staat: links (themakaart: label "Speelbaar") of tussen de kolommen */
:root[data-theme="kerst"] :is(.theme-card:nth-child(3n+2), .setup-card)::after { right: auto; left: 1.5rem; }
:root[data-theme="kerst"] .lp-signup::after { right: auto; left: calc(47.6% - 29px); }
@keyframes kerstSchommel {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}

/* Kerstmuts: schuin op het logo en op de klok (quizmaster + tv) */
:root[data-theme="kerst"] :is(.lp-logo, .center-clock-box) { position: relative; }
:root[data-theme="kerst"] :is(.lp-logo, .center-clock-box)::after {
  content: '';
  position: absolute;
  pointer-events: none;
  background: var(--kerst-muts) center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35));
}
:root[data-theme="kerst"] .lp-logo::after {
  top: -0.55em;
  left: -0.45em;
  width: 1.05em;
  height: 0.85em;
  transform: rotate(-24deg);
}
:root[data-theme="kerst"] .center-clock-box::after {
  top: -6px;
  right: -26px;
  width: 30px;
  height: 25px;
  transform: rotate(20deg);
}

/* --- Kop: lichtjes bovenaan, ijspegels onderaan ------------------------- */
:root[data-theme="kerst"] :is(.qm-arena-header, .compact-arena-header,
  .rules-modal-content, .leaderboard-card-fullscreen) {
  position: relative;
}
:root[data-theme="kerst"] :is(.qm-arena-header, .compact-arena-header,
  .rules-modal-content, .leaderboard-card-fullscreen)::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 14px;
  right: 14px;
  height: 14px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12px 9px, #ff4d4d 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 36px 9px, #ffd34d 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 60px 9px, #4dd88a 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 84px 9px, #6fc3ff 0 3.5px, transparent 4.5px),
    linear-gradient(transparent 4px, #3d6b52 4px 5px, transparent 5px);
  background-size: 96px 14px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 3px rgba(255, 214, 120, 0.7));
  animation: kerstLichtjes 1.6s ease-in-out infinite alternate;
}
/* IJspegels die onder de kop hangen */
:root[data-theme="kerst"] :is(.qm-arena-header, .compact-arena-header)::before {
  content: '';
  position: absolute;
  top: calc(100% - 1px);
  left: 18px;
  right: 18px;
  height: 14px;
  pointer-events: none;
  background:
    radial-gradient(ellipse 2.5px 14px at 50% 0, rgba(220, 238, 250, 0.95) 70%, transparent 72%) 0 0 / 23px 14px repeat-x,
    radial-gradient(ellipse 2px 9px at 50% 0, rgba(235, 245, 252, 0.9) 70%, transparent 72%) 11px 0 / 31px 10px repeat-x,
    radial-gradient(ellipse 1.5px 6px at 50% 0, rgba(240, 248, 255, 0.85) 70%, transparent 72%) 5px 0 / 17px 7px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3));
}
@keyframes kerstLichtjes {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="kerst"] body::before,
  :root[data-theme="kerst"] body::after,
  :root[data-theme="kerst"] :is(.qm-arena-header, .compact-arena-header,
    .rules-modal-content, .leaderboard-card-fullscreen)::after,
  :root[data-theme="kerst"] :is(.lp-highlight, .lp-signup, .how-to, .setup-card, .mk-intro,
    .theme-card:nth-child(3n+2))::after,
  :root[data-theme="kerst"] .welcome-banner-fullscreen .arena-tag::before {
    animation: none;
  }
}

/* Juridische regel onderaan (© en merken) */
.legal-note {
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  opacity: 0.8;
}