/* Examnië — ontwerpsysteem. Donker "nachtelijk rijk" met glaspanelen; per vak een accentkleur (--accent). */

@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel"; src: url("../assets/fonts/cinzel-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
/* Koppen: Cinzel Decorative (stijlgids 2026-09-30, "Koninkrijk"); gewone Cinzel blijft voor de examenspeler (--display-rustig) */
@font-face { font-family: "Cinzel Decorative"; src: url("../assets/fonts/cinzel-decorative-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel Decorative"; src: url("../assets/fonts/cinzel-decorative-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/nunito.woff2") format("woff2"); font-weight: 200 1000; font-display: swap; }

:root {
  --bg: #0d0f24;
  --bg-2: #161a3a;
  --panel: rgba(22, 25, 56, 0.72);
  --panel-solid: #1a1e42;
  --panel-2: rgba(255, 255, 255, 0.05);
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #eef0ff;
  --muted: #a6abd6;
  --faint: #7479a8;
  --gold: #f5c451;
  --gold-2: #e09b2d;
  --ok: #4fd18b;
  --bad: #ff6b7a;
  --info: #6bb8ff;
  --accent: #8f7bff;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Cinzel Decorative", "Cinzel", Georgia, serif;
  --display-rustig: "Cinzel", Georgia, serif;          /* grondregel: in de examenspeler geen sierletters */
  --wallpaper: none;
  /* Themabare extra tokens (zie css/themes.css) */
  --bg-rgb: 13, 15, 36;
  --gold-rgb: 245, 196, 81;
  --gold-hi: #ffe7a3;
  --on-gold: #2b1d02;
  --glow-1: rgba(143, 123, 255, 0.28);
  --glow-2: rgba(43, 179, 163, 0.18);
  --stage: #2a2f6b;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
/* Achtergrond: sterrenhemel met gloed, of een wallpaper-thema met donkere waas erover. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, var(--glow-2), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(var(--gold-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, rgba(var(--bg-rgb), 0.66), rgba(var(--bg-rgb), 0.88)),
    var(--wallpaper) center / cover no-repeat,
    var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff8, transparent), radial-gradient(1px 1px at 70% 20%, #fff6, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff5, transparent), radial-gradient(1px 1px at 85% 65%, #fff7, transparent),
    radial-gradient(1px 1px at 10% 85%, #fff5, transparent), radial-gradient(1.5px 1.5px at 55% 45%, #fff4, transparent);
  background-size: 480px 480px;
}
html[data-theme="aarde"] { --wallpaper: url("../assets/wallpapers/aarde.jpg"); }
html[data-theme="ontdekker"] { --wallpaper: url("../assets/wallpapers/ontdekker.jpg"); }
html[data-theme="oceaan"] { --wallpaper: url("../assets/wallpapers/oceaan.jpg"); }
html[data-theme="piraat"] { --wallpaper: url("../assets/wallpapers/piraat.jpg"); }
html[data-theme="vulkaan"] { --wallpaper: url("../assets/wallpapers/vulkaan.jpg"); }
html[data-theme="poolijs"] { --wallpaper: url("../assets/wallpapers/poolijs.jpg"); }
html:not([data-theme="nacht"]) body::after, html[data-wallpaper] body::after { display: none; }

a { color: var(--gold); text-decoration: none; }
/* Links: onderlijnen alleen bij hover (ook in de HUD). Kaarten, knoppen en tabs niet: die hebben een eigen hover-effect. */
a:hover { text-decoration: underline; }
.btn:hover, .realm:hover, .exam-card:hover, .topic-row:hover, .tabs a:hover, .topnav a:hover, .brand:hover, .hero-link:hover, .badge-shelf:hover, .hud-avatar:hover, .clip-btn:hover, .topic-tag:hover { text-decoration: none; }
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
.display { font-family: var(--display); letter-spacing: .04em; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* ---------- Topbar & HUD ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px clamp(12px, 3vw, 28px);
  background: rgba(var(--bg-rgb), 0.78);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand-mark { color: var(--gold); font-size: 1.3rem; filter: drop-shadow(0 0 8px rgba(var(--gold-rgb), .6)); }
.brand-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.topnav { display: flex; gap: 4px; }
.topnav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.topnav a:hover { color: var(--text); background: var(--panel-2); }
.topnav a.active { color: var(--text); background: rgba(255, 255, 255, .1); }
.hud { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hud-streak { font-weight: 800; display: flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; padding: 5px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.hud-streak.cold { filter: grayscale(1); opacity: .6; }
/* Reeks herstellen: valt op zonder te schreeuwen, want het kost munten. */
.hud-streak.herstel {
  cursor: var(--wijs, pointer); font: inherit; font-weight: 800; color: var(--gold);
  background: rgba(var(--gold-rgb), .14); border-color: rgba(var(--gold-rgb), .55);
  animation: herstel-pols 2.4s ease-in-out infinite;
}
.hud-streak.herstel:hover { background: rgba(var(--gold-rgb), .26); border-color: var(--gold); }
@keyframes herstel-pols { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb), .5); }
  50% { box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0); } }
.hud-music { font-size: 1rem; line-height: 1; cursor: var(--wijs, pointer); padding: 6px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); color: inherit; }
.hud-music:hover { border-color: var(--accent); }
.hud-music.off { filter: grayscale(1); opacity: .6; }
/* muziek uit: doorgestreepte muzieknoot (wens gebruiker 2026-10-06; 🔇 leek op de effectenknop) */
.noot-uit { position: relative; display: inline-block; }
.noot-uit::after { content: ""; position: absolute; left: -15%; right: -15%; top: 50%; height: 2px; margin-top: -1px;
  background: currentColor; border-radius: 1px; transform: rotate(-45deg); box-shadow: 0 0 0 1px var(--panel, #222); }
.hud-music-wrap { position: relative; display: inline-flex; }
.music-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 245px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 12px;
  background: var(--panel-solid); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.music-menu .track {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: var(--wijs, pointer); white-space: nowrap;
}
.music-menu .track:hover { background: var(--panel-2); }
.music-menu .track.on { color: var(--accent); font-weight: 700; }
.music-menu .track-geluid { display: none; }
@media (max-width: 640px) { .music-menu .track-geluid { display: flex; } }
.music-menu .track.locked { cursor: var(--pijl, default); opacity: .5; }
.music-menu .track.locked:hover { background: none; }
.music-menu .track small { margin-left: auto; opacity: .8; }
.track-sep { height: 1px; margin: 4px 6px; background: var(--line); }
/* Vuurwerkfabriek (schatkamer scheikunde) */
.vw-kop { display: flex; justify-content: flex-end; margin: 12px 0 0; }
.vw-ouverture {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: linear-gradient(135deg, rgba(255,210,63,.16), rgba(255,166,43,.10));
  border: 1px solid rgba(255,210,63,.45); color: var(--gold, #ffd23f); font: inherit; font-weight: 700; cursor: var(--wijs, pointer);
}
.vw-ouverture:hover:not(:disabled) { border-color: rgba(255,210,63,.9); }
.vw-ouverture.aan { background: rgba(255,210,63,.22); border-color: rgba(255,210,63,.9); }
.vw-ouverture:disabled { opacity: .45; cursor: var(--pijl, default); }
.vw-lucht {
  position: relative; height: 420px; margin: 12px 0 14px; border-radius: 14px; overflow: hidden;
  background: url("../assets/vuurwerk-nacht.jpg") center bottom / cover no-repeat, #05070f;
  border: 1px solid var(--line); cursor: crosshair;
}
.vw-doek { display: block; width: 100%; height: 100%; }
.vw-balk { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.vw-knop {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line); color: inherit; font: inherit; cursor: var(--wijs, pointer);
}
.vw-knop:hover:not(:disabled) { border-color: var(--vw); }
.vw-knop.aan { border-color: var(--vw); box-shadow: 0 0 0 1px var(--vw), 0 0 18px -6px var(--vw); }
.vw-knop.op-slot { opacity: .55; cursor: var(--pijl, default); }
/* De cel uit het periodiek systeem */
.vw-cel {
  flex: none; width: 58px; height: 58px; display: grid; grid-template-rows: auto 1fr auto;
  padding: 4px 5px; border-radius: 8px; background: rgba(0, 0, 0, .35);
  border: 2px solid var(--vw); box-shadow: inset 0 0 18px -8px var(--vw);
}
.vw-knop.op-slot .vw-cel { border-color: var(--faint); box-shadow: none; }
.vw-nr { font-size: .62rem; line-height: 1; opacity: .8; }
.vw-sym {
  place-self: center; font-size: 1.5rem; font-weight: 800; line-height: 1; color: var(--vw);
  font-family: Georgia, "Times New Roman", serif;
}
.vw-knop.op-slot .vw-sym { color: var(--faint); }
.vw-massa { font-size: .55rem; line-height: 1; opacity: .7; text-align: right; }
.vw-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vw-naam { font-weight: 700; }
.vw-zout { font-size: .8em; opacity: .7; }
.vw-tekst { margin: 12px 0 0; min-height: 2.4em; }
@media (max-width: 640px) { .vw-lucht { height: 300px; } }
/* krimpt mee (titel met …) zodat de bovenbalk op 1280 breed met schuifbalk niet 20 px over de rand liep (held-icoon half weg) */
.hud { min-width: 0; }
.hud-avatar { flex: none; }
.hud-xp { display: flex; align-items: center; gap: 10px; flex: 0 1 200px; min-width: 150px; cursor: var(--wijs, pointer); background: none; border: 0; color: inherit; font: inherit; padding: 0; }
.lvl-gem {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-2));
  box-shadow: 0 0 18px rgba(var(--gold-rgb), .45), inset 0 -3px 0 rgba(0, 0, 0, .2);
}
.lvl-gem span { transform: rotate(-45deg); font-weight: 900; color: var(--on-gold); font-size: 1rem; }
.xp-meta { flex: 1; min-width: 0; text-align: left; }
.xp-title { font-size: .78rem; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-bar { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 3px 0 1px; }
.xp-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8f7bff, #6bb8ff 50%, #4fd18b); box-shadow: 0 0 12px rgba(107, 184, 255, .6); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.xp-num { font-size: .74rem; color: var(--muted); }
.hud-avatar { font-size: 1.5rem; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-strong); text-decoration: none; }

/* ---------- Layout ---------- */
main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: clamp(16px, 3vw, 32px) clamp(12px, 3vw, 28px) 48px; outline: none; }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 26px);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: var(--shadow);
}
.stack > * + * { margin-top: 18px; }
.grid { display: grid; gap: 16px; }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
/* Examenkaarten zijn breder dan de opgavekaarten: drie op een rij, zodat de band groot genoeg is om examens uit elkaar te houden. */
.grid-examens { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .grid-examens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid-examens { grid-template-columns: 1fr; } }
.site-footer { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; padding: 18px; font-size: .78rem; color: var(--faint); text-align: center; }
.site-footer a { color: var(--muted); }
.page-title { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: .03em; }
.eyebrow { text-transform: uppercase; font-weight: 800; letter-spacing: .14em; font-size: .75rem; color: var(--accent); }

/* ---------- Rijk-ornament (stijlgids, richting B) ----------
   Gezellige RPG-laag bovenop de huisstijl; zie stijlgids.html (staging). Alles via --gold/--gold-rgb/--accent,
   zodat elk thema meekleurt. GRONDREGEL: nooit in de examenspeler (daar alleen rust en leesbaarheid).
   .sierhoek   paneel met gouden sierhoeken (linksboven, rechtsonder) en een fijne binnenrand
   .sierkop    kop in de sierletter met een ruitje ervoor en een uitlopende gouden lijn erachter
   .vakje      inventarisvakje voor een item; --r = zeldzaamheidskleur (rand + gloed)
   .rondknop   ronde gouden actieknop (draaien, aanvallen, juichen …) */
:root { --sierhoek-vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23000'%3E%3Cpath d='M2 62V26C2 12 12 2 26 2h36' stroke-width='3'/%3E%3Cpath d='M9 62V30C9 18 18 9 30 9h32' stroke-width='1.4' opacity='.55'/%3E%3Cpath d='M15 21c6-2 8-8 6-14M21 15c-6 2-8 8-6 14' stroke-width='2.2'/%3E%3C/g%3E%3Ccircle cx='15' cy='15' r='3.4'/%3E%3C/svg%3E"); }
/* Toepassing in de site (stap 2): de sierhoeken ook op welkomstpaneel, inlogkaart, heldkaart en dialogen (niet de
   mediaviewer .modal-wide); rijkbanners niet (hun ::before is de textuur, ze hebben al een gekleurde rand). */
.sierhoek, .welcome, .auth-card, .hero-link, .modal:not(.modal-wide) { position: relative; border-color: rgba(var(--gold-rgb), .35);
  box-shadow: var(--shadow), inset 0 0 0 4px rgba(0, 0, 0, .12), inset 0 0 0 5px rgba(var(--gold-rgb), .12); }
.panel.sierhoek, .panel.welcome, .panel.auth-card, .panel.hero-link { padding: clamp(24px, 2.8vw, 32px) clamp(26px, 3vw, 36px); }   /* ruimte voor de hoeken */
.modal:not(.modal-wide) { padding: 28px 30px; }
.sierhoek::before, .sierhoek::after, .welcome::before, .welcome::after, .auth-card::before, .auth-card::after, .hero-link::before, .hero-link::after,
.modal-kader::before, .modal-kader::after { content: ""; position: absolute; width: 30px; height: 30px; pointer-events: none; z-index: 1;
  background: var(--gold); -webkit-mask: var(--sierhoek-vorm) center / contain no-repeat; mask: var(--sierhoek-vorm) center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), .35)); }
.sierhoek::before, .welcome::before, .auth-card::before, .hero-link::before, .modal-kader::before { left: 6px; top: 6px; }
.sierhoek::after, .welcome::after, .auth-card::after, .hero-link::after, .modal-kader::after { right: 6px; bottom: 6px; transform: rotate(180deg); }
/* Dialoog: de hoeken op een kader dat niet scrolt (.modal zelf scrolt bij lange inhoud; een absolute hoek scrolde mee
   en stond dan halverwege, gemeld 2026-10-04). Het kader is precies zo groot als de dialoog. */
/* Profiel: veer naast de weergavenaam (wijzigen), 2026-10-04 */
.naam-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.naam-pen { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.3rem; cursor: var(--wijs, pointer); border-radius: 12px;
  background: var(--panel-2); border: 1px solid rgba(var(--gold-rgb), .35); color: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.naam-pen:hover, .naam-pen:focus-visible { transform: rotate(-12deg) scale(1.08); border-color: var(--gold); box-shadow: 0 0 12px rgba(var(--gold-rgb), .35); }
@media (prefers-reduced-motion: reduce) { .naam-pen:hover, .naam-pen:focus-visible { transform: none; } }
.modal-kader { position: relative; width: min(560px, 100%); }
.modal-kader:has(> .eed-modal) { width: min(480px, 100%); }
.modal-kader:has(> .speler-modal) { width: min(620px, 100%); }
.modal-kader > .modal { width: 100%; max-width: none; }
/* Sierkop, ook op de paneelkoppen van de site (h2.display in een paneel, quest-hub, dialogen); niet in de examenspeler
   (.opgave-head, .leestekst). */
.sierkop, .panel:not(.opgave-head):not(.leestekst) > h2.display, .hub-kop h2, .modal:not(.modal-wide) > h2 {
  display: flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 700; color: var(--gold); letter-spacing: .05em; }
.sierkop::before, .panel:not(.opgave-head):not(.leestekst) > h2.display::before, .hub-kop h2::before, .modal:not(.modal-wide) > h2::before {
  content: ""; flex: none; width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), .6); }
.sierkop::after, .panel:not(.opgave-head):not(.leestekst) > h2.display::after, .hub-kop h2::after, .modal:not(.modal-wide) > h2::after {
  content: ""; flex: 1; min-width: 24px; height: 1px; background: linear-gradient(90deg, rgba(var(--gold-rgb), .6), transparent); }
.vakje { --r: var(--line-strong); border-radius: var(--radius-sm);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 16%, transparent), rgba(0, 0, 0, .25) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--r) 55%, transparent), inset 0 -12px 22px rgba(0, 0, 0, .35); transition: box-shadow .2s, transform .15s; }
.vakje:hover, .vakje:focus-visible { box-shadow: inset 0 0 0 2px var(--r), 0 0 18px color-mix(in srgb, var(--r) 40%, transparent); }
.rondknop { width: 38px; height: 38px; border-radius: 50%; border: 0; padding: 0; cursor: var(--wijs, pointer); display: grid; place-items: center; color: var(--gold-hi);
  background: radial-gradient(circle at 35% 30%, var(--bg-2), var(--bg) 75%); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 4px 10px rgba(0, 0, 0, .45);
  transition: transform .15s, box-shadow .2s; }
.rondknop:hover, .rondknop:focus-visible { transform: translateY(-2px); color: #fff; outline: none;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-hi), 0 0 14px rgba(var(--gold-rgb), .5); }
.rondknop svg { width: 18px; height: 18px; }@media (prefers-reduced-motion: reduce) { .vakje, .rondknop { transition: none; } }

/* Munt (js/util.js goudenMunten vervangt elke 🪙): altijd goud, ook in thema's met een andere --gold (oceaan = blauw),
   want munten zijn munten. Op iOS was de emoji zilver. */
.munt { display: inline-block; position: relative; width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: -.16em; flex: none; font-style: normal;
  background: radial-gradient(circle at 34% 28%, #fff6c4 0 10%, #ffd84f 32%, #e8a91f 68%, #a86a0c 100%);
  box-shadow: inset 0 0 0 .075em #9a6208, inset 0 0 0 .15em rgba(255, 236, 160, .55), 0 .06em .1em rgba(0, 0, 0, .4); }
.munt::after { content: "✦"; position: absolute; inset: 0; display: grid; place-items: center; font-size: .56em; line-height: 1; font-style: normal;
  color: #9a6208; text-shadow: 0 .05em 0 rgba(255, 240, 180, .7); }

/* ---------- Knoppen & formulieren ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 800;
  border: 1px solid var(--line-strong);
  background: var(--panel-2);
  color: var(--text);
  padding: 10px 18px;
  border-radius: 12px;
  cursor: var(--wijs, pointer);
  text-decoration: none;
  transition: transform .12s, background .15s, box-shadow .15s, border-color .15s;
}
.btn:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.btn:active { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary {
  border: 0;
  color: var(--on-gold);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-2));
  box-shadow: 0 6px 18px rgba(var(--gold-rgb), .3), inset 0 -2px 0 rgba(0, 0, 0, .15);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-2)); box-shadow: 0 8px 24px rgba(var(--gold-rgb), .45); }
.btn-accent { border: 0; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 85%, white), var(--accent)); box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-danger { color: var(--bad); border-color: rgba(255, 107, 122, .4); }
.btn-sm { padding: 6px 12px; font-size: .88rem; border-radius: 10px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

label.field { display: block; font-weight: 700; font-size: .92rem; }
label.field > span { display: block; margin-bottom: 6px; color: var(--muted); }
input[type=text], input[type=password], textarea, select {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 11px 14px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .2); }
select { width: auto; min-width: 140px; cursor: var(--wijs, pointer); }
select option { background: var(--panel-solid); }
textarea { min-height: 96px; resize: vertical; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; cursor: var(--wijs, pointer); }
.check input { width: 20px; height: 20px; accent-color: var(--gold); margin-top: 2px; flex: none; }
.form-error { color: var(--bad); font-weight: 700; min-height: 1.4em; font-size: .92rem; }
.tabs { display: flex; gap: 6px; padding: 5px; background: rgba(0, 0, 0, .25); border-radius: 14px; border: 1px solid var(--line); overflow-x: auto; }
.tabs button, .tabs a {
  flex: 1;
  font: inherit;
  font-weight: 800;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: var(--wijs, pointer);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.tabs .active { color: var(--text); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ---------- Inloggen ---------- */
.auth { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; min-height: min(calc(100vh - 190px), 720px); }
.auth-hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  letter-spacing: .1em;
  margin: 0;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 30px rgba(var(--gold-rgb), .35));
}
.auth-hero .tagline { font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; margin: 6px 0 22px; }
/* rijken als net raster van 5 per rij (15 = 3 × 5, wens gebruiker 2026-10-11), even breed als het zegel eronder (geen gat rechts) */
.realm-orbit { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 560px; }
.realm-orbit .realm-orb { font-size: clamp(1.6rem, 4.2vw, 2.6rem); border-radius: 24px; }
/* echtheidszegel in de hero: échte CvTE-examens (2026-10-11) */
.echt-zegel { display: flex; gap: 12px; align-items: flex-start; max-width: 560px; margin: 22px 0 0; padding: 12px 16px;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--gold); backdrop-filter: blur(10px); text-align: left; }
.echt-zegel .ez-ico { font-size: 1.8rem; line-height: 1; }
.echt-zegel .ez-kop { display: block; color: var(--gold); font-size: 1.02rem; margin-bottom: 2px; }
.echt-zegel .ez-tekst { font-size: .9rem; }
.realm-orb {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-size: 1.9rem; border-radius: 20px;
  background: color-mix(in srgb, var(--c) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--c) 30%, transparent);
  animation: float 5s ease-in-out infinite;
}
.realm-orb:nth-child(2) { animation-delay: -1s; } .realm-orb:nth-child(3) { animation-delay: -2s; }
.realm-orb:nth-child(4) { animation-delay: -3s; } .realm-orb:nth-child(5) { animation-delay: -4s; }
@keyframes float { 50% { transform: translateY(-8px); } }
.auth-card { max-width: 460px; width: 100%; justify-self: center; }
.auth-card form { display: grid; gap: 14px; margin-top: 18px; }
.auth-knoppen { margin-top: 24px; }

/* Eed van Examnië (registratie + eenmalig venster voor bestaande spelers) */
.eed-blok { border: 1px solid rgba(var(--gold-rgb), .35); background: rgba(var(--gold-rgb), .07); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; }
.eed-blok p { margin: 0; color: var(--muted); }
.eed-kop { font-weight: 900; color: var(--gold); letter-spacing: .02em; }
.eed-modal { max-width: 480px; text-align: left; }
.eed-schild { font-size: 3rem; line-height: 1; filter: drop-shadow(0 4px 14px rgba(var(--gold-rgb), .5)); margin-bottom: 6px; }

/* Landingspagina onder de hero */
.land { display: grid; gap: 22px; margin: 10px 0 30px; }
.land-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.land-stats > div { text-align: center; padding: 14px 8px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.land-stats b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem); color: var(--gold); line-height: 1.1; }
.land-stats span { font-size: .78rem; color: var(--muted); }
.land-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.land-card { display: flex; flex-direction: column; gap: 6px; }
.land-card h3 { margin: 2px 0 4px; font-size: 1.15rem; }
.land-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.land-baas { grid-column: span 2; display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; align-items: center; }
.land-txt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.land-txt .btn { margin-top: 6px; }
.land-arena { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000 center / cover no-repeat;
  image-rendering: pixelated; border: 1px solid color-mix(in srgb, var(--c, #f5c451) 55%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--c, #f5c451) 25%, transparent); transition: opacity .35s; }
.land-arena.wissel { opacity: 0; }
.land-arena::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.55)); pointer-events: none; }
.la-held { position: absolute; left: -4%; bottom: -22%; height: 95%; aspect-ratio: 1; background: 0 0 / 200% 100% no-repeat; image-rendering: pixelated;
  animation: la-idle .84s steps(1) infinite; z-index: 1; }
@keyframes la-idle { 50% { background-position: 100% 0; } }
.la-baas { position: absolute; right: 7%; bottom: 9%; height: 62%; image-rendering: pixelated; transform: scaleX(1); z-index: 1;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); animation: la-baas 2.6s ease-in-out infinite; }
@keyframes la-baas { 50% { transform: translateY(-4%); } }
.la-naam { position: absolute; right: 10px; top: 8px; text-align: right; z-index: 2; text-shadow: 0 2px 6px #000; }
.la-naam b { display: block; font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.la-naam small { color: rgba(255,255,255,.75); font-size: .72rem; }
.land-helden { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.land-av { width: 96px; height: 96px; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.land-helden .land-av:nth-child(2) { transform: translateY(-6px); }
/* hi-bit (staging): tempeldecor van de editor met een voorbeeldheld op de sokkel; wisselt om de 4 s met een vervaging */
.land-podium { margin: -4px 0 12px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(var(--gold-rgb), .45), 0 10px 24px rgba(0, 0, 0, .45); }
.land-podium canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; transition: opacity .35s, filter .35s; }
.land-podium canvas.wissel { opacity: .15; filter: brightness(1.8) saturate(.6); }
@media (prefers-reduced-motion: reduce) { .land-podium canvas { transition: none; } }
.land-badges { display: flex; justify-content: center; gap: 12px; margin-bottom: 10px; }
.land-badges .patch { width: 74px; height: 88px; border-width: 4px; }
.land-badges .patch-inner { padding-bottom: 18px; }
.land-badges .patch-icon { font-size: 2.1rem; transform: none; }
.land-badges .patch-ribbon { bottom: 7px; padding: 3px; }
.land-badges .patch-ribbon span { font-size: .45rem; }
.land-rijk-lijst { display: grid; gap: 8px; margin-top: 4px; }
.land-rijk { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent); border-left: 3px solid var(--c); }
.land-rijk .lr-ic { font-size: 1.4rem; }
.land-rijk small { display: block; color: var(--muted); font-size: .75rem; }
.land-breed { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.4fr; gap: 20px; align-items: center; }
/* Gids-kaart (landing.js gidsDemo): Malachai met stijgende damp en hamster, een ballon met zijn verhaalboog */
.land-gids { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.lg-toneel { display: flex; align-items: center; gap: 14px; }
.lg-vex { position: relative; flex: none; width: 232px; aspect-ratio: 1; }
.lg-img { display: block; width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(181,140,255,.35));
  animation: vex-adem 5s ease-in-out infinite; }
.lg-damp { position: absolute; display: none; overflow: hidden; pointer-events: none; animation: vex-adem 5s ease-in-out infinite; }
.lg-vex.rust .lg-damp { display: block; }
.lg-damp img { display: block; height: 100%; max-width: none; image-rendering: pixelated; animation: vex-damp 2.3s steps(24) infinite; }
.lg-ballon { position: relative; flex: 1; min-height: 110px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, #2b2253, #19153a);
  border: 2px solid #b58cff; line-height: 1.45; transition: opacity .3s; }
.lg-ballon::before { content: ""; position: absolute; left: -10px; top: 42%; width: 16px; height: 16px; background: #2b2253;
  border-left: 2px solid #b58cff; border-bottom: 2px solid #b58cff; transform: rotate(45deg); }
.lg-ballon.wissel { opacity: 0; }
.lg-ballon b { color: var(--gold); }
.lg-ballon i { color: #e9dcff; }
.lg-lv { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #c9a4ff; }
.lg-tekst { margin: 4px 0 0; }
.land-themas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }   /* 12 voorbeelden = 3 volle rijen van 4 (2026-10-11) */
.land-themas img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-strong); box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.land-themas img:nth-child(odd) { transform: translateY(6px); }
.land-verz { grid-column: 1 / -1; }
.land-quests { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.lq-gids { display: flex; gap: 16px; align-items: center; }
.lq-gids > img { width: 128px; height: 128px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 8px 14px rgba(0,0,0,.5)); }
.lq-gids p { margin: 4px 0 0; }
.lq-quote { font-style: italic; color: #c9a4ff !important; }
.lq-regels { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; color: var(--muted); line-height: 1.45; }
.lq-regels b { color: var(--text); }
.lq-poses { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 4px; }
.lq-poses img { width: 44px; height: 44px; image-rendering: pixelated; }
.lq-podium { --c: #b58cff; display: grid; gap: 12px; }
.lq-uitgelicht { display: flex; gap: 14px; align-items: flex-end; min-height: 150px; }
.lq-groot { width: 150px; height: 150px; flex: none; image-rendering: pixelated; filter: drop-shadow(0 8px 12px rgba(0,0,0,.55)); }
.lq-ballon { position: relative; flex: 1; padding: 12px 14px; border-radius: 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 22%, rgba(0,0,0,.35)), rgba(0,0,0,.3)); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.lq-ballon::before { content: ""; position: absolute; left: -8px; bottom: 20px; width: 14px; height: 14px; transform: rotate(45deg);
  background: color-mix(in srgb, var(--c) 22%, rgb(14,14,34)); border-left: 1px solid color-mix(in srgb, var(--c) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.lq-naam { display: block; font-weight: 900; }
.lq-rijk { color: var(--muted); font-size: .75rem; }
.lq-teaser { margin: 6px 0 0; font-style: italic; line-height: 1.45; }
.lq-podium.wissel .lq-uitgelicht { animation: lq-in .45s ease-out; }
@keyframes lq-in { from { opacity: 0; transform: translateY(6px); } }
.lq-cast { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.lq-cast button { padding: 2px; border: 1px solid transparent; border-radius: 10px; background: none; cursor: var(--wijs, pointer); transition: transform .2s, border-color .2s, background .2s; }
.lq-cast button:hover { transform: translateY(-3px); }
.lq-cast button.actief { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.lq-cast img { width: 100%; aspect-ratio: 1; display: block; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.lq-haak { margin: 0; font-size: .85rem; color: #c9a4ff; font-style: italic; text-align: center; }
.land-verz-rij { display: grid; grid-template-columns: repeat(var(--kol, 4), 1fr); gap: 14px; margin-top: 6px; }
.verz-tegel { display: flex; flex-direction: column; gap: 2px; }
.verz-tegel p { font-size: .88rem; margin-top: 4px; }
.verz-tegel small { color: var(--muted); font-size: .75rem; }
.verz-beeld { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; margin-bottom: 8px; background: #000;
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--c) 22%, transparent); }
.verz-beeld img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.verz-tegel:hover .verz-beeld img { transform: scale(1.06); }
.verz-plaat .verz-beeld img { object-position: center 30%; filter: sepia(.25); }
.verz-sketches .verz-beeld { background: #e3b33c; }
.verz-sketches .verz-beeld img { object-fit: contain; padding: 8px 8px 0; }
.verz-beeld .pin { position: absolute; font-style: normal; font-size: 1.4rem; transform: translate(-50%, -100%); filter: drop-shadow(0 3px 3px rgba(0,0,0,.6)); animation: pin-val 3s ease-in-out infinite; }
.verz-beeld .pin:nth-of-type(2) { animation-delay: .4s; } .verz-beeld .pin:nth-of-type(3) { animation-delay: .8s; }
@keyframes pin-val { 0%, 60%, 100% { transform: translate(-50%, -100%); } 30% { transform: translate(-50%, -125%); } }
.verz-vuur { position: absolute; inset: 0; }
.verz-vuur canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 0.8.0 (landing.js): bazen op heldmaat, Mijn vakken, slim nakijken (formule-editor + tabel), geluid */
.land-card { position: relative; }
.land-nieuw { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 2px 9px; border-radius: 999px; font-size: .68rem; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bg, #120f2a); background: var(--gold); box-shadow: 0 0 14px rgba(var(--gold-rgb), .45); }
/* Rij "eindbazen in HD" over de volle breedte; daaronder niveau (2) + pakket (1), zodat geen kaart alleen op een rij staat (0.17.1). */
.land-hd { grid-column: 1 / -1; }
.land-niveau { grid-column: span 2; }
.land-grid:has(.land-niveau[hidden]) .land-vakken, .land-grid:not(:has(.land-vakken)) .land-niveau { grid-column: 1 / -1; }
.lh-rij { display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; min-height: 150px; margin-bottom: 6px; padding: 8px 6px 0;
  border-radius: 12px; background: radial-gradient(ellipse at 50% 100%, rgba(var(--gold-rgb), .18), transparent 70%); }
.lh-rij img { flex: 0 1 auto; min-width: 0; max-width: 24%; max-height: 170px; object-fit: contain; image-rendering: pixelated;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)) drop-shadow(0 0 14px color-mix(in srgb, var(--c) 40%, transparent)); animation: la-baas 2.6s ease-in-out infinite; animation-delay: var(--r, 0s); }
.lv-pakket { padding: 10px 12px; margin-bottom: 6px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.lv-pakket small { display: block; margin-bottom: 6px; color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-chips span { padding: 3px 9px; border-radius: 999px; font-size: .8rem; font-weight: 800;
  background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.land-nakijk { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; align-items: center; }
.land-nakijk p + p { margin-top: 8px; }
/* The Casebook (landing.js casebookKaart): schermafbeelding + legenda + mini-ranglijst links, uitleg rechts; vol breed, dus geen gaten */
.land-casebook { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.lcb-links { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lcb-beeld { display: block; width: 100%; border-radius: 10px; box-shadow: 0 0 0 1px rgba(var(--gold-rgb), .35), 0 10px 26px rgba(0, 0, 0, .35); }
.lcb-uitleg { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: .8rem; color: var(--muted); }
.lcb-uitleg span { display: inline-flex; align-items: center; gap: 6px; }
.lcb-uitleg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.lcb-uitleg .lcb-g { background: #b8341f; box-shadow: 0 0 0 1px #8a2414; }
.lcb-uitleg .lcb-e { width: 14px; height: 14px; border: 2px dashed #6f9bd1; }
.lcb-uitleg s { font: 700 .8rem/1 "Special Elite", "Courier New", monospace; opacity: .75; }
.lcb-txt { display: flex; flex-direction: column; gap: 8px; }
.lcb-kop { margin: 8px 0 -2px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lcb-rang { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.lcb-rang li { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 8px; background: rgba(var(--gold-rgb), .07); border: 1px solid rgba(var(--gold-rgb), .18); }
.lcb-rang b { color: var(--muted); } .lcb-rang em { font-style: normal; font-weight: 800; color: rgb(var(--gold-rgb)); }
.lcb-rang img, .lcb-ic { width: 1.25em; vertical-align: -.25em; image-rendering: pixelated; }
.lcb-txt { min-width: 0; }
/* Woordspellen van de dag (landing.js woordspellenKaart): The Casebook + De Troonrede in één paneel, kop over de volle breedte,
   twee schermafbeeldingen naast elkaar (smal: onder elkaar), per spel naam, legenda en de nummer 1 van vandaag */
.land-woorden { grid-column: 1 / -1; display: grid; gap: 14px; }
.lw-kop { display: grid; gap: 6px; max-width: 72ch; }
.lw-kop h3, .lw-kop p { margin: 0; }
.lw-spellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.lw-spel { margin: 0; display: grid; gap: 8px; min-width: 0; }
.lw-spel figcaption { display: grid; gap: 4px; }
.lw-spel figcaption b { font-size: .95rem; }
.lw-eerste { font-size: .82rem; color: var(--muted); }
.lw-eerste img { width: 1.15em; vertical-align: -.2em; image-rendering: pixelated; }
/* De Troonrede (landing.js woordspellenKaart): zelfde kaart als The Casebook; legenda = de achterkanten van de kleppen */
.lcb-uitleg .ltr-g { width: 12px; height: 15px; border-radius: 3px; background: linear-gradient(#fff1b8, #e2b54e 55%, #a8761f); box-shadow: 0 0 0 1px #8c5f17; }
.lcb-uitleg .ltr-e { width: 12px; height: 15px; border-radius: 3px; background: linear-gradient(#6d4864, #3c2437); box-shadow: 0 0 0 1px #b98bb0; }
.lcb-uitleg .ltr-n { width: 12px; height: 15px; border-radius: 3px; background: #2a3150; box-shadow: 0 0 0 1px #151a33; }
.ln-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ln-demo { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); }
.ln-demo small { display: block; margin-bottom: 8px; color: var(--muted); font-size: .75rem; font-weight: 800; }
.ln-stappen { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ln-stappen li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
  font-family: "Times New Roman", serif; font-style: italic; font-size: 1.05rem; background: rgba(0,0,0,.22); border: 1px solid var(--line); }
.ln-stappen i, .ln-score { color: var(--ok, #6fd08c); font-style: normal; font-family: inherit; font-weight: 900; }
.ln-score { display: block; margin-top: 8px; font-size: .85rem; }
.ln-rooster { border-collapse: separate; border-spacing: 4px; margin: 0 auto; }
.ln-rooster th, .ln-rooster td { width: 46px; height: 38px; text-align: center; font-weight: 800; border-radius: 8px; }
.ln-rooster th { background: rgba(var(--gold-rgb), .14); color: var(--gold); }
.ln-rooster th:empty { background: none; }
.ln-rooster td { background: color-mix(in srgb, var(--ok, #6fd08c) 18%, transparent); border: 1px solid var(--ok, #6fd08c); }
.ln-teken { display: block; width: 100%; max-width: 240px; margin: 0 auto 6px; color: var(--muted); }   /* natuurkunde: raaklijn op de uitwerkbijlage */
.land-geluid { margin-top: 8px !important; }
@media (max-width: 900px) { .land-hd { grid-column: 1 / -1; } .land-nakijk, .land-casebook { grid-template-columns: 1fr; } .lh-rij { min-height: 110px; } }
.land-cta { text-align: center; }
.land-cta .btn { font-size: 1.1rem; padding: 14px 28px; }
.avatar-pick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.avatar-pick button {
  font-size: 1.7rem; aspect-ratio: 1; border-radius: 14px; cursor: var(--wijs, pointer);
  background: var(--panel-2); border: 2px solid var(--line); transition: transform .12s, border-color .15s;
}
.avatar-pick button:hover { transform: translateY(-2px); }
.avatar-pick button.active { border-color: var(--gold); background: rgba(var(--gold-rgb), .14); box-shadow: 0 0 16px rgba(var(--gold-rgb), .3); }
.recovery-code { font-family: ui-monospace, Consolas, monospace; font-size: 1.6rem; font-weight: 800; letter-spacing: .12em; text-align: center; padding: 16px; border-radius: 14px; background: rgba(0, 0, 0, .35); border: 1px dashed var(--gold); color: var(--gold); user-select: all; }

/* ---------- Rijken (vakkeuze) ---------- */
.welcome { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; }
.welcome h1 { font-family: var(--display); font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: 0; }
.stat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-weight: 800; font-size: .92rem; }
.realms { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.realm {
  --c: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 250px;
  padding: 22px;
  border-radius: 22px;
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background:
    radial-gradient(420px 220px at 100% 0%, color-mix(in srgb, var(--c) 45%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, var(--bg-2)), var(--bg) 80%);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s;
}
.realm:hover { transform: translateY(-4px); box-shadow: 0 26px 50px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent), 0 0 40px color-mix(in srgb, var(--c) 30%, transparent); }
.realm-icon { position: absolute; right: -10px; top: -14px; font-size: 8.5rem; opacity: .22; transform: rotate(-12deg); z-index: -1; transition: transform .4s; }
.realm:hover .realm-icon { transform: rotate(-4deg) scale(1.08); opacity: .32; }
.realm-badge { font-size: 2.2rem; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--c) 28%, transparent); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); margin-bottom: 14px; }
.realm-name { font-family: var(--display); font-weight: 900; font-size: 1.35rem; letter-spacing: .02em; }
.realm-vak { font-weight: 800; color: var(--c); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }
.realm-motto { color: var(--muted); font-size: .92rem; margin: 6px 0 16px; }
.realm-foot { margin-top: auto; }
.progress { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.progress > i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--accent)) 70%, white), var(--c, var(--accent))); box-shadow: 0 0 10px color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); }
.progress-label { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); font-weight: 700; margin-top: 6px; }
.realm.locked { cursor: var(--pijl, default); filter: saturate(.35); }
.realm.locked:hover { transform: none; box-shadow: var(--shadow); }
.realm.locked::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), .55) 100%), repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px);
}
.fog-tag { position: relative; z-index: 2; display: inline-flex; gap: 6px; align-items: center; font-weight: 800; font-size: .85rem; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-strong); }

/* ---------- Vak-pagina ---------- */
.realm-banner {
  --c: var(--accent);
  position: relative;
  overflow: hidden;
  padding: clamp(20px, 3vw, 32px);
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: radial-gradient(600px 260px at 100% 0%, color-mix(in srgb, var(--c) 40%, transparent), transparent 70%), linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, var(--bg-2)), rgba(16, 18, 44, .9));
  box-shadow: var(--shadow);
}
.realm-banner .realm-icon { font-size: 11rem; right: 10px; top: -30px; }
/* Textuur per rijk (tools/banner-texturen.py): een tegel als masker, ingekleurd met de rijkkleur en naar links
   weggevaagd zodat de tekst leesbaar blijft. isolation maakt de banner een eigen laag: de textuur zit dan tussen
   de achtergrond (z -1) en de inhoud. */
.realm-banner[data-vak] { isolation: isolate; }
.realm-banner[data-vak]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--c) 60%, #fff); opacity: var(--tex-o, .2);
  -webkit-mask-image: var(--tex), linear-gradient(90deg, transparent 12%, #000 70%);
  -webkit-mask-size: var(--tex-size), 100% 100%; -webkit-mask-repeat: repeat, no-repeat; -webkit-mask-composite: source-in;
  mask-image: var(--tex), linear-gradient(90deg, transparent 12%, #000 70%);
  mask-size: var(--tex-size), 100% 100%; mask-repeat: repeat, no-repeat; mask-composite: intersect; }
.realm-banner[data-vak="aardrijkskunde"] { --tex: url("../assets/banners/aardrijkskunde.svg"); --tex-size: 480px 320px; --tex-o: .26; }
.realm-banner[data-vak="biologie"] { --tex: url("../assets/banners/biologie.svg"); --tex-size: 240px 120px; --tex-o: .22; }
.realm-banner[data-vak="scheikunde"] { --tex: url("../assets/banners/scheikunde.svg"); --tex-size: 360px 260px; --tex-o: .28; }
.realm-banner[data-vak="engels"] { --tex: url("../assets/banners/engels.svg"); --tex-size: 36px 36px; --tex-o: .16; }
.realm-banner[data-vak="nederlands"] { --tex: url("../assets/banners/nederlands.svg"); --tex-size: 120px 120px; --tex-o: .24; }   /* Delfts blauwe tegels */
.realm-banner[data-vak="wiskundea"] { --tex: url("../assets/banners/wiskundea.svg"); --tex-size: 480px 240px; --tex-o: .24; }   /* ruitjespapier met klokkromme, boxplot en Penrose-driehoek */
.realm-banner[data-vak="kunst"] { --tex: url("../assets/banners/kunst.svg"); --tex-size: 480px 240px; --tex-o: .22; }   /* linnen doek met kwaststreken */
.realm-banner[data-vak="muziek"] { --tex: url("../assets/banners/muziek.svg"); --tex-size: 480px 240px; --tex-o: .22; }   /* bladmuziek: Ode an die Freude */
.realm-banner[data-vak="geschiedenis"] { --tex: url("../assets/banners/geschiedenis.svg"); --tex-size: 480px 240px; --tex-o: .24; }   /* tijdlijn 1500-2000 met tekeningetjes */
.realm-banner[data-vak="natuurkunde"] { --tex: url("../assets/banners/natuurkunde.svg"); --tex-size: 480px 240px; --tex-o: .24; }   /* schakelschema met meters en een sinus */
.realm-banner[data-vak="economie"] { --tex: url("../assets/banners/economie.svg"); --tex-size: 480px 240px; --tex-o: .24; }   /* koersgrafiek met kaarsen en een voortschrijdend gemiddelde */
.realm-banner[data-vak="duits"] { --tex: url("../assets/banners/duits.svg"); --tex-size: 480px 240px; --tex-o: .26; }   /* vakwerk: Andreaskruisen, schoren en raampjes */
.realm-banner[data-vak="frans"] { --tex: url("../assets/banners/frans.svg"); --tex-size: 480px 240px; --tex-o: .24; }   /* lelies: ruitjesnet met fleur-de-lis */
.realm-banner[data-vak="wiskundeb"] { --tex: url("../assets/banners/wiskundeb.svg"); --tex-size: 480px 240px; --tex-o: .26; }   /* eenheidscirkel met sinus, cosinus en het √2-vierkant */
.realm-banner[data-vak="filosofie"] { --tex: url("../assets/banners/filosofie.svg"); --tex-size: 480px 240px; --tex-o: .26; }   /* schaduwspel: poppen langs de muur, vuur eronder */
.crumbs { font-size: .88rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); }
.exam-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.exam-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.exam-card.met-beeld { padding-top: 0; overflow: hidden; }
.exam-band { position: relative; display: block; margin: 0 -18px 8px; aspect-ratio: 3 / 1; background: #101223; overflow: hidden; }
.exam-band img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.exam-card:hover .exam-band img { transform: scale(1.04); }
.exam-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(var(--bg-rgb), .9)); }
.exam-card h3 { font-family: var(--display); font-size: 1.2rem; margin: 0; }
.exam-card .sub { color: var(--muted); font-size: .9rem; }
/* Examenthema (filosofie: het CE wisselt van onderwerp) op examenkaart, spelerkop en onderwerpen; "jouw examen" in goud. */
.thema-chip { display: inline-flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; margin: 4px 0;
  padding: 2px 10px; border-radius: 999px; font-family: var(--body, inherit); font-size: .78rem; font-weight: 700; line-height: 1.5;
  color: var(--muted); background: color-mix(in srgb, var(--c, var(--accent)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 45%, var(--line)); vertical-align: middle; }
.thema-chip.nu { color: var(--gold-hi, var(--gold)); border-color: rgba(var(--gold-rgb), .7); background: rgba(var(--gold-rgb), .12); }
.thema-chip.oud { color: var(--faint); border-style: dashed; border-color: var(--line-strong); background: transparent; }   /* oud examenonderwerp (filosofie VWO 2020-2023) */
.thema-chip b { font-weight: 800; }
h3 > .thema-chip { margin: 0 0 0 8px; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; width: fit-content; }
.status-done { color: #0e2d1d; background: var(--ok); }
.status-busy { color: #10223a; background: var(--info); }
.status-new { color: var(--muted); background: var(--panel-2); border: 1px solid var(--line); }
.card-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Tweelingpil naast .status: zelfde vorm en maat, maar ingetogen tot je erover gaat. */
.card-reset {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 999px;   /* gelijk aan .status */
  font: inherit; font-size: 1rem; line-height: 1;
  color: var(--faint); background: var(--panel-2); border: 1px solid var(--line);
  cursor: var(--wijs, pointer); transition: color .15s, border-color .15s, background .15s;
}
.card-reset:hover { color: var(--text); border-color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); }
.topic-row {
  --c: var(--accent);
  display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center;
  padding: 14px 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s;
}
.topic-row:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateX(3px); }
.topic-icon { font-size: 2rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: color-mix(in srgb, var(--c) 18%, transparent); }
.topic-row h3 { margin: 0; font-size: 1.05rem; }
.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .big { font-size: 3rem; }

/* ---------- Speler (examenvragen) ---------- */
.exam-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.exam-head h1 { font-family: var(--display-rustig); font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0; }
.score-pill { font-weight: 900; padding: 8px 16px; border-radius: 999px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line-strong); }
.score-pill b { color: var(--gold); }
.opgave-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.opgave-nav button {
  flex: none; font: inherit; font-weight: 800; font-size: .88rem; color: var(--muted); cursor: var(--wijs, pointer);
  padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line);
}
.opgave-nav button.done { color: var(--ok); border-color: rgba(79, 209, 139, .4); }
.opgave-nav button.active { color: var(--on-gold); background: var(--gold); border-color: var(--gold); }
.opgave-nav button.buiten:not(.active) { opacity: .4; border-style: dashed; }   /* hoort niet bij het gekozen hoofdstuk/onderwerp */
.opgave-head h2 { font-family: var(--display-rustig); font-size: 1.35rem; }
.topic-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.topic-tag { font-size: .78rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c, var(--accent)) 20%, transparent); color: color-mix(in srgb, var(--c, var(--accent)) 60%, white); }
.media-strip { display: flex; align-items: start; gap: 12px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.media-thumb { flex: none; display: flex; flex-direction: column; width: 190px; cursor: zoom-in; background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: .8rem; text-align: left; }
.media-thumb img { width: 190px; height: 130px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-strong); background: #fff; transition: transform .15s; }
.media-thumb:hover img { transform: scale(1.03); }
.media-thumb span { display: block; margin-top: 5px; line-height: 1.3; min-height: 2.6em; }
.media-av { background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.media-av .label { font-weight: 800; font-size: .88rem; margin-bottom: 6px; }
.media-av audio { width: 100%; }
.media-av video { width: 100%; border-radius: 10px; background: #000; }
.vraag {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(16px, 2.4vw, 24px);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.vraag.answered { border-color: rgba(79, 209, 139, .35); }
.vraag-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.vraag-nr { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; font-weight: 900; background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); color: #fff; }
.vraag-pt { font-size: .82rem; font-weight: 800; color: var(--muted); padding: 3px 10px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }
.vraag-got { margin-left: auto; font-weight: 900; color: var(--ok); }
/* Kennisclips vóór het nakijken: klein en gedempt (eerst zelf proberen), klapt de clips uit onder de kop */
.vraag-clip { margin-left: auto; font: inherit; font-size: .78rem; font-weight: 700; color: var(--muted); background: transparent; cursor: var(--wijs, pointer);
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; opacity: .75; transition: opacity .15s, border-color .15s, color .15s; }
.vraag-clip:hover, .vraag-clip:focus-visible, .vraag-clip[aria-expanded="true"] { opacity: 1; color: var(--text); border-color: #b58cff; }
.vraag:not(.answered) .vraag-clip + .vraag-got { margin-left: 0; }
.vraag-clips { display: none; margin: -2px 0 12px; padding: 10px 12px; border-radius: 12px; background: rgba(181,140,255,.07); border: 1px dashed rgba(181,140,255,.35); }
.vraag-clips.open { display: block; }
.vraag-clips .label { margin-top: 0; }
.vraag.answered .vraag-clip, .vraag.answered .vraag-clips { display: none; }   /* daarna staan ze in de feedback */
.vraag-tekst { font-size: 1.02rem; }
.vraag-tekst table { border-collapse: collapse; margin: 8px 0; }
.vraag-tekst td, .vraag-tekst th { border: 1px solid var(--line-strong); padding: 4px 10px; }
.vraag-tekst blockquote { margin: 0 0 8px; padding: 6px 12px; border-left: 3px solid var(--accent); background: var(--panel-2); border-radius: 0 10px 10px 0; font-style: italic; }
.vraag-type { font-size: .78rem; font-weight: 700; color: var(--muted); padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line-strong); white-space: nowrap; }
.nr-link { color: var(--accent); font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Leestekst (Engels): tekst links, blijft staan onder de topbalk; vragen rechts. Onder 980 px onder elkaar. */
.lees-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.leestekst { position: sticky; top: var(--kop, 84px); max-height: calc(100dvh - var(--kop, 84px) - 14px); overflow: auto; overscroll-behavior: contain; }
.lees-vragen { min-width: 0; }
.lt-titel { font-family: var(--display-rustig); font-size: 1.3rem; margin: 0 0 4px; }
.lt-onder { font-size: .88rem; color: var(--muted); font-style: italic; margin-bottom: 12px; }
.lt-tekst { font-size: 1.03rem; line-height: 1.68; }
.lt-tekst p { margin: 0 0 .85em; }
.lt-tekst h4 { font-size: 1.02rem; margin: 1.1em 0 .35em; }
.lt-tekst p.sig { text-align: right; margin-top: -.35em; font-size: .95rem; }
.lt-tekst.m-alinea p[data-nr] { position: relative; padding-left: 2.2em; }
.lt-tekst.m-alinea p[data-nr]::before { content: attr(data-nr); position: absolute; left: 0; width: 1.5em; text-align: right; font-weight: 900; color: var(--accent); }
.lt-tekst.m-regel { padding-left: 2.6em; }
/* alinearegel (Nederlands): doorlopende alinea's ("(1)" staat al in de tekst); elke oorspronkelijke regel is een inline
   <span class="rg">, het regelnummer een klein grijs cijfertje, zodat "regels 6-7" nog steeds precies dat stuk laat oplichten */
.lt-tekst.m-alinearegel .rg { display: inline; }
.lt-tekst.m-alinearegel .rg[data-nr]::before { position: static; display: inline; width: auto; margin: 0 .2em 0 .1em; font-size: .62em;
  vertical-align: .45em; font-weight: 700; color: var(--faint); opacity: .8; }
.lt-tekst .rg { display: block; position: relative; }
.lt-tekst .rg.pa { margin-top: .7em; }
.lt-tekst .rg[data-nr]::before { content: attr(data-nr); position: absolute; left: -2.6em; width: 2em; text-align: right; font-size: .76em; color: var(--faint); top: .25em; }
.lt-tekst.m-beeld img { display: block; width: 100%; border-radius: 10px; background: #fff; }
.lt-tekst .gap { display: inline-block; min-width: 3.4em; padding: 0 .45em; text-align: center; font-weight: 900; font-size: .88em; color: var(--accent); border-bottom: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 5px 5px 0 0; }
.lt-tekst .flits, .lt-onder.flits { animation: ltFlits 1.8s ease-out; border-radius: 6px; }
@keyframes ltFlits { 0%, 35% { background: color-mix(in srgb, var(--accent) 30%, transparent); } 100% { background: transparent; } }
.lt-noten, .lt-bron { font-size: .8rem; color: var(--faint); margin-top: 10px; }
.lt-bron { text-align: right; font-style: italic; }
.leestekst .media-grid, .leestekst .media { margin-top: 14px; }
@media (max-width: 980px) {
  .lees-layout { grid-template-columns: 1fr; }
  .leestekst { position: static; max-height: none; }
  .leestekst .lt-titel { display: none; }                /* staat al in de opgavekop erboven */
}
.vraag-imgs { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.vraag-imgs img { max-height: 280px; border-radius: 12px; background: #fff; cursor: zoom-in; border: 1px solid var(--line-strong); }
/* Notenbeeld (muziek): ware grootte, wit papier; past het niet (telefoon), dan schuift het vel horizontaal i.p.v. te krimpen. */
.noten-fig { margin: 12px 0; min-width: 0; max-width: 100%; }
.noten-rol { max-width: 100%; min-width: 0; box-sizing: border-box; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; background: #fff; border-radius: 12px;
  border: 1px solid var(--line-strong); padding: 6px; line-height: 0; }
.noten-rol img.noten { display: block; max-width: none; height: auto; cursor: zoom-in; }
.noten-rol.schuift, .schuift > .noten-rol { box-shadow: inset -18px 0 14px -14px rgba(0, 0, 0, .35); }   /* er is meer naar rechts */
.noten-fig figcaption { margin-top: 4px; font-size: .85em; color: var(--muted); }
.noten-fig.schuift figcaption::after { content: " · ↔ veeg om te schuiven, tik om te vergroten"; }
.tk.schuift .tk-uitleg::after { content: " ↔ Zonder gereedschap kun je het vel opzij vegen."; }
.tk .noten-rol { padding: 0; }
.tk .noten-rol .tk-vel { border-radius: 0; }
.feedback .noten-rol { margin: 6px 0; }
.part { margin-top: 14px; }
.part-label { font-weight: 800; margin-bottom: 6px; }
.mc-options { display: grid; gap: 8px; }
.mc-option {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit; color: var(--text); cursor: var(--wijs, pointer);
  padding: 11px 14px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line-strong); transition: border-color .15s, background .15s;
}
.mc-option:hover:not(:disabled) { border-color: var(--gold); }
.mc-option .key { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-weight: 900; background: var(--panel-2); border: 1px solid var(--line-strong); }
.mc-option.chosen { border-color: var(--gold); background: rgba(var(--gold-rgb), .1); }
.mc-option.chosen .key { background: var(--gold); color: var(--on-gold); }
.mc-option.right { border-color: var(--ok); background: rgba(79, 209, 139, .12); }
.mc-option.right .key { background: var(--ok); color: #0e2d1d; }
.mc-option.wrong { border-color: var(--bad); background: rgba(255, 107, 122, .1); }
.mc-option:disabled { cursor: var(--pijl, default); }
.match-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.match-row .name { flex: 1 1 220px; }
.mark { font-size: .84rem; font-weight: 800; }
/* Ordenvraag (part-type volgorde, geschiedenis): kaartjes slepen of met ▲▼ verschuiven */
.vg-lijst { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 6px; }
.vg-kaart { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line-strong); cursor: grab; user-select: none; }
.vg-kaart.sleept { cursor: grabbing; border-color: var(--gold); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); position: relative; z-index: 2; }
.vg-kaart .key { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; font-weight: 900; background: var(--panel); border: 1px solid var(--line-strong); }
.vg-greep { flex: none; color: var(--muted); font-size: 1.2rem; touch-action: none; cursor: grab; padding: 4px 2px; }
.vg-tekst { flex: 1; line-height: 1.35; }
.vg-knoppen { flex: none; display: flex; flex-direction: column; gap: 2px; }
.vg-knoppen button { font: inherit; font-size: .7rem; width: 30px; height: 22px; border-radius: 6px; cursor: var(--wijs, pointer); color: var(--text); background: var(--panel); border: 1px solid var(--line-strong); }
.vg-knoppen button:hover:not(:disabled) { border-color: var(--gold); }
.vg-knoppen button:disabled { opacity: .35; cursor: var(--pijl, default); }
.vg-kaart.right { border-color: var(--ok); background: rgba(79, 209, 139, .12); }
.vg-kaart.wrong { border-color: var(--bad); background: rgba(255, 107, 122, .1); }
@media (max-width: 560px) {
  .vg-kaart { gap: 6px; padding: 6px 6px 6px 4px; }
  .vg-kaart .key { width: 24px; height: 24px; font-size: .85rem; }
  .vg-tekst { font-size: .86rem; line-height: 1.3; }
}
/* Tabel-invuller (part-type rooster, js/rooster.js, docs/rooster.md): rustig, alleen thema-tokens; velden ≥ 16 px (iOS zoomt anders in) */
.rs-rol { overflow-x: auto; margin: 4px 0 6px; }   /* géén -webkit-overflow-scrolling: daarmee kregen velden op iOS geen toetsenbord */
.rs-tabel { border-collapse: separate; border-spacing: 4px; margin: 0 auto 0 0; }
.rs-tabel th, .rs-tabel td { padding: 6px 10px; border-radius: 8px; text-align: center; vertical-align: middle; border: 1px solid var(--line-strong); background: var(--panel-2); font-size: 1rem; line-height: 1.3; }
.rs-tabel th { font-weight: 800; background: var(--panel); }
.rs-tabel th.rs-hoek { background: transparent; border-color: transparent; color: var(--muted); font-weight: 700; font-size: .85rem; }
.rs-tabel .rs-in { padding: 3px; background: transparent; border-style: dashed; }
.rs-veld { font: inherit; font-size: 16px; width: 5.2em; min-width: 3.4em; padding: 6px 6px; text-align: center; color: var(--text); background: rgba(0, 0, 0, .22); border: 1px solid var(--line-strong); border-radius: 6px; }
.rs-kruising .rs-veld { width: 4.6em; }
.rs-veld:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .35); }
.rs-veld:disabled { opacity: 1; color: var(--text); -webkit-text-fill-color: var(--text); }
.rs-tabel .right, .rs-extra-rij.right { border-color: var(--ok); background: rgba(79, 209, 139, .12); }
.rs-tabel .wrong, .rs-extra-rij.wrong { border-color: var(--bad); background: rgba(255, 107, 122, .1); }
.rs-tabel .zelf, .rs-extra-rij.zelf { border-color: var(--muted); }
.rs-extra { display: grid; gap: 6px; margin: 6px 0; }
.rs-extra-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; }
.rs-extra-rij > span { flex: 1 1 200px; }
.rs-extra-rij .rs-veld { width: auto; flex: 1 1 10em; max-width: 24em; text-align: left; }
.rs-tip { margin: 2px 0 4px; }
.rs-modelblok { margin-top: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(79, 209, 139, .35); background: rgba(79, 209, 139, .06); }
.rs-kop { font-weight: 800; margin-bottom: 2px; }
.rs-model .rs-in { border-style: solid; border-color: rgba(79, 209, 139, .5); }
.rs-modelwaarde { display: inline-block; min-width: 3em; font-weight: 800; color: var(--ok); }
@media (max-width: 560px) {
  .rs-tabel { border-spacing: 3px; }
  .rs-tabel th, .rs-tabel td { padding: 4px 5px; }
  .rs-tabel .rs-in { padding: 2px; }
  .rs-veld, .rs-kruising .rs-veld { width: 3.4em; min-width: 3em; padding: 6px 2px; }
}
.good { color: var(--ok); } .bad { color: var(--bad); } .neutral { color: var(--muted); }
.self-score { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--gold-rgb), .08); border: 1px solid rgba(var(--gold-rgb), .3); }
.self-score .q { font-weight: 800; font-size: .9rem; margin-right: 4px; }
.pt-btn { font: inherit; font-weight: 900; width: 42px; height: 42px; border-radius: 12px; cursor: var(--wijs, pointer); color: var(--text); background: var(--panel-2); border: 1px solid var(--line-strong); transition: transform .1s; }
.pt-btn:hover { transform: translateY(-2px); border-color: var(--gold); }
.pt-btn.selected { background: var(--gold); color: var(--on-gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(var(--gold-rgb), .45); }
.vraag-actions { margin-top: 16px; }
.feedback { display: none; margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); animation: rise .35s ease; }
.feedback.show { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.feedback h4 { margin: 0 0 6px; color: var(--ok); }
.feedback .label { display: block; font-weight: 900; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin: 14px 0 4px; }
.clips { display: flex; flex-wrap: wrap; gap: 8px; }
.clip-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: .9rem; color: var(--text); background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 14px 6px 6px; cursor: var(--wijs, pointer); text-decoration: none; }
.clip-btn:hover { border-color: var(--gold); }
.clip-btn .play { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #ff4e45; color: #fff; font-size: .75rem; }
.clip-btn .play.link { background: var(--info); }
.end-card { text-align: center; }
.end-card .big { font-family: var(--display); font-weight: 900; font-size: 3rem; color: var(--gold); }

/* ---------- Modals, lightbox, toasts, confetti ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(5, 6, 18, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 20px; padding: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal h2 { font-family: var(--display); }
/* Welkomstscherm: korte terugblik bij het opstarten. */
.wk-kop { text-align: center; margin-bottom: 4px; }
.wk-rang { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.wk-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 18px 0 14px; }
@media (max-width: 480px) { .wk-tegels { grid-template-columns: repeat(2, 1fr); } }
.wk-tegel { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: 14px;
  background: var(--panel-2); border: 1px solid var(--line); text-align: center; }
.wk-ico { font-size: 1.4rem; line-height: 1; }
.wk-groot { font-family: var(--display); font-size: 1.3rem; font-weight: 900; }
.wk-klein { font-size: .72rem; color: var(--muted); line-height: 1.2; }
/* Terugblik en vooruitblik: twee identieke blokken onder elkaar, zodat ze bij elkaar horen. */
.wk-blok { padding: 12px 14px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.wk-blok + .wk-blok, .wk-blok + .wk-herstel { margin-top: 8px; }
.wk-blok { padding: 13px 15px; }
.wk-zin { margin: 6px 0 0; }
.wk-zin:first-of-type { margin-top: 4px; }
/* Per rijk een regel: icoon, naam, en rechts uitgelijnd de XP. */
.wk-rijken { list-style: none; margin: 8px 0 2px; padding: 0; display: grid; gap: 5px; }
.wk-rijken li { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: 9px;
  background: rgba(255, 255, 255, .04); }
.wk-rijk-ico { font-size: 1.05rem; line-height: 1; }
.wk-rijk-naam { flex: 1; min-width: 0; }
.wk-unlock { display: flex; align-items: flex-start; gap: 10px; margin: 5px 0 0; }
.wk-unlock-ico { font-size: 1.3rem; line-height: 1.2; flex: none; }
.wk-blok-kop { font-size: .72rem; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); }
.wk-herstel { padding: 14px; border-radius: 14px; background: rgba(var(--gold-rgb), .10);
  border: 1px solid rgba(var(--gold-rgb), .4); }
.modal-wide { width: min(960px, 100%); padding: 14px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lightbox { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center; background: rgba(5, 6, 18, .94); overflow: hidden; }
.lightbox.show { display: flex; }
.lightbox img { max-width: 94vw; max-height: 90vh; background: #fff; border-radius: 6px; user-select: none; transition: transform .08s; cursor: zoom-in; }
.lightbox img.zoomed { cursor: grab; transition: none; }
.lightbox img.kwart { max-width: 90vh; max-height: 94vw; }   /* 90° gedraaid: breedte en hoogte wisselen */
.lightbox img.draait { transition: transform .25s ease; }
.lb-knoppen { position: absolute; top: 14px; right: 18px; z-index: 2; display: flex; gap: 8px; }
.lb-hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: .82rem; background: rgba(0, 0, 0, .5); padding: 6px 14px; border-radius: 999px; }
.toasts { position: fixed; z-index: 120; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; gap: 12px; align-items: center; max-width: 360px; padding: 12px 16px; border-radius: 16px; background: var(--panel-solid); border: 1px solid var(--gold); box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 24px rgba(var(--gold-rgb), .25); font-weight: 700; animation: toast-in .45s cubic-bezier(.2, 1.4, .4, 1); }
.toast .ico { font-size: 1.8rem; }
.toast.klik { pointer-events: auto; cursor: var(--wijs, pointer); transition: transform .15s; }   /* .toasts zelf laat klikken door */
.toast.klik:hover, .toast.klik:focus-visible { transform: translateY(-2px); outline: none; box-shadow: 0 14px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(var(--gold-rgb), .5); }
.toast-bekijk { display: block; margin-top: 2px; color: var(--gold); font-size: .78em; }
.toast.out { animation: toast-out .35s forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(20px) scale(.9); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(40px); } }
.xp-float { position: fixed; z-index: 130; pointer-events: none; font-weight: 900; font-size: 1.3rem; color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .6); animation: xp-up 1.1s ease-out forwards; }
@keyframes xp-up { to { opacity: 0; transform: translateY(-60px) scale(1.3); } }
.confetti { position: fixed; top: -12px; z-index: 125; width: 10px; height: 14px; pointer-events: none; border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(720deg); opacity: .8; } }
@keyframes pop { from { transform: rotate(45deg) scale(0); } }

/* ---------- Badges (scouting-patches) ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 14px; justify-items: center; }
.badge-item { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 170px; text-align: center; }
/* tabblad Badges met de baas-etalage eronder (gevecht.css .baas-etalage): bredere kolommen, telefoon 2 naast elkaar */
.badges.met-baas { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 26px 16px; }
.badges.met-baas .badge-item { max-width: 240px; }
@media (max-width: 560px) { .badges.met-baas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 10px; } }
.patch {
  --rim: #d9b968; --fill-a: #cdbb8c; --fill-b: #8a7241; --ribbon-a: #ecc873; --ribbon-b: #c99c3e; --ink: #5c3a12;
  position: relative; width: 140px; height: 164px;
  border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%;
  background: radial-gradient(ellipse at 35% 25%, rgba(255, 255, 255, .35), transparent 45%), linear-gradient(160deg, var(--fill-a), var(--fill-b));
  border: 8px solid var(--rim);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(255, 255, 255, .18), inset 0 3px 8px rgba(0, 0, 0, .3);
  transition: transform .2s;
}
.badge-item:hover .patch { transform: scale(1.06) rotate(-2deg); }
.patch::before { content: ""; position: absolute; inset: 5px; border-radius: inherit; border: 2px dashed rgba(255, 255, 255, .45); pointer-events: none; z-index: 1; }
.patch-inner { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; padding-bottom: 30px; overflow: hidden; }
.patch-icon { font-size: 5rem; line-height: 1; transform: scale(1.2); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
.patch-ribbon { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); width: 96%; z-index: 2; padding: 5px; background: linear-gradient(180deg, var(--ribbon-a), var(--ribbon-b)); clip-path: polygon(3% 0, 97% 0, 100% 50%, 97% 100%, 3% 100%, 0 50%); }
.patch-ribbon span { display: block; font-size: .6rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; line-height: 1.2; color: var(--ink); }
.patch.brons { --rim: #c98a55; --fill-a: #d9ab85; --fill-b: #8d5a36; --ribbon-a: #e7b58a; --ribbon-b: #b0703f; --ink: #4a260d; }
.patch.zilver { --rim: #c9d2dc; --fill-a: #dfe6ee; --fill-b: #7f8b99; --ribbon-a: #eef2f6; --ribbon-b: #a8b3bf; --ink: #2e3945; }
.patch.goud { --rim: #f2c94c; --fill-a: #f6dc86; --fill-b: #b98a1f; box-shadow: 0 10px 20px rgba(0, 0, 0, .45), 0 0 28px rgba(var(--gold-rgb), .55), inset 0 0 0 3px rgba(255, 255, 255, .25); }
.patch.locked { --rim: #5b5f80; --fill-a: #4a4e6e; --fill-b: #2b2e4a; --ribbon-a: #6a6e90; --ribbon-b: #4a4e6e; --ink: #c9cce6; }
.patch.locked .patch-icon { opacity: .4; filter: grayscale(1); }
.tier { font-size: .78rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.badge-item .progress { width: 100%; }

/* ---------- Schatkamer: wereldkaart, thema's, weetjes ---------- */
.world { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); }
.world img { display: block; width: 100%; }
.pin { position: absolute; transform: translate(-50%, -100%); font-size: 1.8rem; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .6)); animation: drop .6s cubic-bezier(.2, 1.4, .4, 1) both; cursor: var(--pijl, default); }
.pin:hover::after { content: attr(data-name); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 8px; background: var(--panel-solid); border: 1px solid var(--line-strong); }
@keyframes drop { from { transform: translate(-50%, -300%); opacity: 0; } }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.theme-card { font: inherit; color: var(--text); text-align: left; cursor: var(--wijs, pointer); padding: 8px; border-radius: 14px; background: var(--panel-2); border: 2px solid var(--line); }
.theme-card .pv { height: 80px; border-radius: 10px; background: var(--bg-2) center / cover; margin-bottom: 6px; }
.theme-card.active { border-color: var(--gold); }
.theme-card:disabled { cursor: not-allowed; opacity: .45; }
.theme-card .nm { font-weight: 800; font-size: .9rem; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.facts li { padding: 12px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.facts li.locked { color: var(--faint); border-style: dashed; }

/* ---------- Ranglijst ---------- */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; max-width: 620px; margin: 0 auto; }
.podium-spot { text-align: center; padding: 18px 10px 14px; border-radius: 18px 18px 8px 8px; background: var(--panel); border: 1px solid var(--line); }
.podium-spot .av { font-size: 2.6rem; }
.podium-spot .nm { font-weight: 900; word-break: break-all; }
.podium-spot .xp { color: var(--gold); font-weight: 900; }
.podium-spot.p1 { padding-top: 30px; border-color: var(--gold); box-shadow: 0 0 30px rgba(var(--gold-rgb), .25); }
.podium-spot.p2 { border-color: #c9d2dc; } .podium-spot.p3 { border-color: #c98a55; }
.medal { font-size: 1.6rem; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board li { display: grid; grid-template-columns: 44px 40px 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.board li.me { border-color: var(--gold); background: rgba(var(--gold-rgb), .1); }
.board .rank { font-weight: 900; color: var(--muted); text-align: center; }
.board .av { font-size: 1.5rem; text-align: center; }
.board .nm { font-weight: 800; word-break: break-all; }
.board .lv { font-size: .8rem; color: var(--muted); font-weight: 700; }
.board .xp { font-weight: 900; color: var(--gold); }

/* ---------- Responsief ---------- */
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; min-height: auto; }
  .auth-hero { text-align: center; }
  .realm-orbit { justify-content: center; }
  .echt-zegel, .realm-orbit { margin-inline: auto; }
  .auth-knoppen { justify-content: center; }
  .land-grid { grid-template-columns: 1fr 1fr; }
  .land-verz-rij { grid-template-columns: 1fr 1fr; }
  .land-stats { grid-template-columns: repeat(3, 1fr); }
  .hud-xp { min-width: 0; }
  .xp-meta { display: none; }
  .topnav a span { display: none; }
  .topnav a { font-size: 1.2rem; padding: 5px 12px; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar { gap: 10px; flex-wrap: wrap; }
  .topnav { order: 3; width: 100%; justify-content: space-around; }
  .topnav a span { display: none; }
  .topnav a { font-size: 1.3rem; padding: 4px 16px; }
  .hud-streak { padding: 4px 8px; }
  .hud-music { padding: 4px 7px; }
  .hud-geluid { display: none; }              /* telefoon: de effectenschakelaar staat dan in het 🎵-menu (.track-geluid) */
  /* telefoon: de balk valt op een eigen regel en begon dan links, onder Malachai (🎵 onbereikbaar op iOS, gemeld 2026-10-04):
     begin rechts van hem, en loop zo nodig over twee regels (rechts uitgelijnd) */
  .hud { flex: 1 1 auto; margin-left: calc(var(--vex) - 18px); gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .hud-xp { flex: 0 0 auto; }                  /* zonder titel/balk (verborgen) alleen het level-steentje, geen lege 200 px */
  .patch { width: 118px; height: 138px; border-width: 6px; }
  .patch-icon { font-size: 4rem; }
  .board li { grid-template-columns: 34px 32px 1fr auto; }
  .board .lv { display: none; }
  .podium { gap: 6px; }
  .podium-spot .av { font-size: 2rem; }
}
/* Geen globale 'beweging beperken'-regel meer (wens gebruiker 2026-09-30): .01ms liet oneindige animaties razendsnel draaien
   en liet de gevechtsachtergrond (parallax, transition .3s) verspringen. Losse onderdelen regelen het zelf. */

/* ---------- Pixel-avatars, Mijn held & winkel ---------- */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
/* Onder de helft: rond afgeknipt; erboven mag de held uitsteken (hoge hoed, tovenaarshoed, afro). */
.hud-avatar { position: relative; overflow-x: clip; clip-path: inset(-24px 0 0 0 round 0 0 21px 21px); }   /* overflow-x: anders telt de brede sprite mee voor de paginabreedte */
.hud-avatar .av-img { position: absolute; width: 96px; height: 96px; max-width: none; left: 50%; top: -19px; transform: translateX(-50%); }
/* hi-bit held (staging): portret kop tot schouders, onder rond afgeknipt, hoed/afro mag er bovenuit */
/* hoger dan het rondje en even breed (object-fit: cover): hoofd/hoed steekt er 10 px bovenuit (= de ruimte boven het rondje in
   de balk; meer viel boven het venster weg), de zijkanten blijven binnen de cirkelbreedte, dus geen extra paginabreedte
   (overflow-x: clip hoeft niet; Safari knipte daarmee ook de bovenkant af) */
.hud-avatar:has(.held-portret) { overflow: visible; clip-path: inset(-12px 0 0 0 round 0 0 21px 21px); }
.hud-avatar .held-portret { position: absolute; left: 0; bottom: 0; width: 100%; height: 52px; max-width: none; object-fit: cover; object-position: 50% 100%; }
/* close-up als icoon (staging, heldnieuw.heldIcoon): het beeld is al op device-pixels gemaakt (width/height inline = 1:1), onder
   rond in de cirkel, hoed/hoorns steken er tot 16 px bovenuit; even breed als de cirkel, dus geen extra paginabreedte */
.hud-avatar:has(.held-icoon) { overflow: visible; clip-path: inset(-16px 0 0 0 round 0 0 21px 21px);
  background: radial-gradient(circle at 50% 70%, rgba(var(--gold-rgb), .22), transparent 70%), var(--panel-2); }
.hud-avatar .held-icoon { position: absolute; left: 0; bottom: 0; max-width: none; image-rendering: pixelated; }
.board .av .av-img { width: 40px; height: 40px; display: block; margin: -6px auto -4px; }
/* hi-bit held (staging, heldnieuw.spelerAvatar): portret/hele held vult zijn vak, dus zonder de LPC-marges */
/* zo groot mogelijk (wens gebruiker): het portret vult de hele rijhoogte, van rand tot rand (negatieve marge = padding) */
.board li:has(.held-mini) { grid-template-columns: 44px 64px 1fr auto auto; }
.board .av .held-mini { width: 64px; height: 64px; margin: -10px auto; display: block;
  background: radial-gradient(ellipse at 50% 85%, rgba(var(--gold-rgb), .28), transparent 65%); }
/* Telefoon (melding gebruiker 2026-10-13: naam brak per letter, "D/ul/in…"): de naam krijgt de hele breedte, de score eronder,
   held 48 px, geen level. Zelfde opzet als de lijst onder de woordspellen (casebook.css .cb-anderen). */
@media (max-width: 640px) {
  .board li, .board li:has(.held-mini) { grid-template-columns: 30px 48px minmax(0, 1fr); column-gap: 8px; row-gap: 0; padding: 8px 10px; }
  .board .rank, .board .av { grid-row: span 2; }
  .board .av .held-mini { width: 48px; height: 48px; margin: -6px auto; }
  .board .lv { display: none; }
  .board .nm { word-break: normal; overflow-wrap: anywhere; }
  .board .xp { grid-column: 3; font-size: .85em; }
}
.podium-spot .av-podium.held-mini { margin: 0 auto 4px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.hero-link-av .held-mini { border-radius: 18px; background: radial-gradient(circle at 50% 75%, rgba(var(--gold-rgb), .3), transparent 65%), var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.podium-spot .av-lg { width: 96px; height: 96px; display: block; margin: 0 auto; }
.hero-link { display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; color: var(--text); text-decoration: none; }
.hero-link-av .av-lg { width: 96px; height: 96px; display: block; }
.held { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 20px; align-items: start; }
.held-stage-wrap { position: sticky; top: 84px; text-align: center; }
.held-stage {
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong);
  background: radial-gradient(circle at 50% 78%, rgba(var(--gold-rgb), .28), transparent 55%), linear-gradient(180deg, var(--stage), var(--bg-2));
}
.held-stage canvas { width: 100%; height: 100%; }
.held-name { font-weight: 900; font-size: 1.4rem; margin-top: 10px; }
.opts { display: grid; gap: 10px; }
.opt { display: grid; grid-template-columns: 100px 1fr; gap: 10px; align-items: center; }
.opt > b { font-size: .88rem; color: var(--muted); }
.cycler { display: flex; align-items: center; gap: 8px; }
.cycler button { width: 38px; height: 38px; flex: none; border-radius: 10px; font: inherit; font-weight: 900; cursor: var(--wijs, pointer); color: var(--text); background: var(--panel-2); border: 1px solid var(--line-strong); }
.cycler button:hover { border-color: var(--gold); }
.cycler .val { flex: 1; text-align: center; font-weight: 800; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatches button { width: 26px; height: 26px; border-radius: 50%; cursor: var(--wijs, pointer); border: 2px solid rgba(255, 255, 255, .2); padding: 0; transition: transform .1s; }
.swatches button.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .4); transform: scale(1.15); }
.slot-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip-item { --r: var(--line-strong); font: inherit; font-weight: 700; font-size: .9rem; color: var(--text); cursor: var(--wijs, pointer); padding: 7px 14px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--r); }
.chip-item.active { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
/* Ranglijst > Spellen: woordlengte als pills vlak boven de lijst (0.17.8) */
.lengte-pills { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.lengte-pills .chip-item { min-width: 2.6em; text-align: center; text-decoration: none; padding: 5px 12px; }
/* Snelknop naar het spel boven een spel-ranglijst (Ranglijst › Spellen, wens gebruiker 2026-10-13; stijlgids "Mijn vakken") */
.spel-snel { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px;
  border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line-strong); color: inherit; text-decoration: none;
  transition: border-color .15s, transform .15s; }
/* artwork van het spel als achtergrond (wens gebruiker 2026-10-13): .ss-bg met inline beeld (geen url() in een CSS-variabele: die lost op
   vanaf css/), links donker voor de tekst, rechts helder */
.spel-snel .ss-bg { position: absolute; inset: 0; z-index: -2; background: none right center / cover no-repeat;
  image-rendering: pixelated; transition: transform .5s ease; transform-origin: right center; }
.spel-snel::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--panel-solid) 0 18%, color-mix(in srgb, var(--panel-solid) 78%, transparent) 42%, color-mix(in srgb, var(--panel-solid) 20%, transparent) 100%); }
.spel-snel:hover, .spel-snel:focus-visible { border-color: var(--gold); transform: translateY(-1px); }
.spel-snel:hover .ss-bg, .spel-snel:focus-visible .ss-bg { transform: scale(1.06); }
.spel-snel .ss-tekst small { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .spel-snel .ss-bg { transition: none; } .spel-snel:hover .ss-bg { transform: none; } }
.spel-snel .ss-beeld { position: relative; flex: none; width: 168px; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden;
  background: var(--panel-2) center / cover no-repeat; box-shadow: inset 0 0 0 1px var(--line); }
.spel-snel .ss-baas { position: absolute; left: 50%; bottom: 4%; height: 82%; transform: translateX(-50%); image-rendering: pixelated; }
.spel-snel .ss-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spel-snel .ss-tekst b { font-family: var(--display); font-size: 1.1rem; letter-spacing: .02em; }
.spel-snel .ss-tekst small { color: var(--muted); }
.spel-snel .ss-speel { margin-left: auto; flex: none; pointer-events: none; }
@media (max-width: 520px) { .spel-snel { gap: 10px; } .spel-snel .ss-beeld { width: 92px; } .spel-snel .ss-tekst small { display: none; } }
.shop-intro .coins { color: var(--gold); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.shop-card {
  --r: #a6abd6; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; cursor: var(--wijs, pointer);
  padding: 10px 10px 12px; border-radius: 16px; background: linear-gradient(180deg, color-mix(in srgb, var(--r) 16%, transparent), rgba(0, 0, 0, .2));
  border: 1px solid color-mix(in srgb, var(--r) 55%, transparent); transition: transform .15s, box-shadow .15s;
}
.shop-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35), 0 0 18px color-mix(in srgb, var(--r) 35%, transparent); }
.shop-card.trying { outline: 2px solid var(--gold); }
.shop-card.owned { opacity: .75; }
.shop-av { width: 96px; height: 96px; border-radius: 12px; background: radial-gradient(circle at 50% 75%, color-mix(in srgb, var(--r) 30%, transparent), transparent 65%); }
.shop-av img { width: 100%; height: 100%; }
.shop-rar { font-size: .7rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--r); }
.deal { color: var(--ok); }
.shop-name { font-weight: 800; font-size: .92rem; line-height: 1.2; min-height: 2.4em; }
.shop-act { margin-top: auto; }
.tag-own { font-size: .82rem; font-weight: 800; color: var(--ok); }
.tag-lock { font-size: .78rem; font-weight: 800; color: var(--faint); }
@media (max-width: 900px) {
  .held { grid-template-columns: 1fr; }
  .held-stage-wrap { position: static; max-width: 340px; margin: 0 auto; width: 100%; }
}

/* Pixel-art-wallpapers scherp houden bij het schalen. */
html[data-pixel] body::before { image-rendering: pixelated; }

/* Verdiende badges in de titelbalk van een rijk */
.badge-shelf { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; text-decoration: none; color: var(--muted); width: fit-content; }
.patch.patch-mini { width: 46px; height: 54px; border-width: 3px; box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .2); transition: transform .15s; }
.patch.patch-mini::before { inset: 2px; border-width: 1px; }
.patch-mini .patch-inner { padding-bottom: 0; }
.patch-mini .patch-icon { font-size: 1.55rem; transform: none; }
.patch.patch-mini.goud { box-shadow: 0 4px 10px rgba(0, 0, 0, .45), 0 0 14px rgba(245, 196, 81, .55); }
.badge-shelf:hover .patch-mini { transform: translateY(-2px) rotate(-3deg); }
.badge-count { font-size: .82rem; font-weight: 800; }

/* ---------- Schatkamer: anatomieplaat (klassieke illustraties) ---------- */
.poster {
  position: relative; padding: clamp(14px, 3vw, 36px); border-radius: 6px; color: #3a2a12;
  background: radial-gradient(ellipse at 50% 40%, #f3e6c4, #e2cc98 70%, #c9ad72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 0 90px rgba(120, 80, 20, .45), inset 0 0 0 10px #6b4a1f, inset 0 0 0 13px #c9a24b;
}
.poster-title { text-align: center; font-family: var(--display); font-weight: 900; font-size: clamp(1.4rem, 4vw, 2.6rem); letter-spacing: .12em; text-transform: uppercase; color: #4a2f0d; }
.poster-sub { text-align: center; font-family: var(--display); font-size: .8rem; letter-spacing: .3em; color: #7a5a2a; margin-bottom: 18px; }
.poster-grid { display: grid; grid-template-columns: 1fr 2.6fr 1fr; gap: clamp(8px, 1.4vw, 16px); align-items: start; }
.poster-col { display: grid; gap: clamp(8px, 1.4vw, 16px); }
.poster .plate { position: relative; display: block; overflow: hidden; aspect-ratio: 1; background: #d9c38f; border: 3px solid #6b4a1f; box-shadow: inset 0 0 0 2px #e8d6a6, 0 4px 10px rgba(60, 40, 10, .35); }
.poster .plate img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .8s ease; }
.poster .plate.torso { aspect-ratio: auto; }
.poster .plate.torso img { height: auto; }
.poster .plate.torso .region { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster .plate.torso .base { filter: grayscale(1) brightness(.4) contrast(.9); }
.plate-cap {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%); white-space: nowrap; z-index: 3;
  font-family: var(--display); font-weight: 900; font-size: clamp(.55rem, 1vw, .74rem); letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 10px; color: #4a2f0d; background: linear-gradient(180deg, #f3e2b3, #d8bb7a); border: 1px solid #6b4a1f;
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
}
.poster a.plate:hover { transform: translateY(-2px); text-decoration: none; }
/* Trappen */
.poster [data-tier="geen"] img, .poster .region[data-tier="geen"] { filter: grayscale(1) brightness(.35) contrast(.9) blur(1.5px); }
.poster [data-tier="brons"] img, .poster .region[data-tier="brons"] { filter: grayscale(1) sepia(.85) brightness(.92) contrast(1.05); }
.poster [data-tier="zilver"] img, .poster .region[data-tier="zilver"] { filter: none; }
.poster [data-tier="goud"] img, .poster .region[data-tier="goud"] { filter: saturate(1.15) contrast(1.05); }
/* Zwart-wit gravures krijgen bij zilver/goud een warme inkleuring, zodat ze zich onderscheiden van brons. */
.poster .lijn[data-tier="zilver"] img { filter: sepia(.45) saturate(1.6) hue-rotate(-8deg); }
.poster .lijn[data-tier="goud"] img { filter: sepia(.6) saturate(2.2) hue-rotate(-12deg) contrast(1.05); }
.poster .plate[data-tier="geen"]::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font-family: var(--display); font-size: 2.6rem; font-weight: 900; color: rgba(243, 226, 179, .55); }
.poster .plate[data-tier="zilver"] { border-color: #9aa6b3; }
.poster .plate[data-tier="goud"] { border-color: #c9a24b; box-shadow: inset 0 0 0 2px #fff0bf, 0 0 20px rgba(245, 196, 81, .75), 0 4px 10px rgba(60, 40, 10, .35); }
.poster .plate[data-tier="goud"]::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-size: 250% 100%;
  background-image: linear-gradient(115deg, transparent 35%, rgba(255, 240, 190, .45) 50%, transparent 65%); animation: shimmer 3.5s ease-in-out infinite;
}
@keyframes shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.poster .region[data-tier="goud"] { animation: glowpulse 2.6s ease-in-out infinite; }
@keyframes glowpulse { 50% { filter: saturate(1.25) brightness(1.12) drop-shadow(0 0 6px rgba(255, 220, 120, .9)); } }
/* Voortgangscartouche */
.cartouche { aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: 3px double #6b4a1f; border-radius: 50% / 18%; background: radial-gradient(circle, #f6ead0, #e3cd9c); color: #4a2f0d; }
.cart-title { font-family: var(--display); font-weight: 900; letter-spacing: .15em; text-transform: uppercase; font-size: .72rem; }
.cart-num { font-family: var(--display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.1; }
.cart-num small { font-size: .5em; }
.cart-sub { font-size: .72rem; font-weight: 700; }
.cart-row { display: flex; gap: 10px; justify-content: center; margin-top: 4px; font-weight: 900; font-size: .8rem; }
.c-zilver { color: #6f7b88; } .c-goud { color: #a8781a; }
@media (max-width: 700px) {
  .poster-grid { grid-template-columns: 1fr 1fr; }
  .poster .plate.torso { grid-column: 1 / -1; order: -1; }
}
@media (prefers-reduced-motion: reduce) { .poster .plate[data-tier="goud"]::before, .poster .region[data-tier="goud"] { animation: none; } }

/* Ranglijst: grotere podium-avatars, klikbare spelers, mini-profiel */
.podium-spot { font: inherit; color: inherit; cursor: var(--wijs, pointer); width: 100%; transition: transform .15s, box-shadow .15s; }
.podium-spot:hover { transform: translateY(-3px); }
.podium-spot .av-podium { width: 132px; height: 132px; display: block; margin: -8px auto -6px; }
.podium-spot.p1 .av-podium { width: 176px; height: 176px; }
.board li[data-speler] { cursor: var(--wijs, pointer); transition: border-color .15s, transform .15s; }
.board li[data-speler]:hover, .board li[data-speler]:focus-visible { border-color: var(--gold); transform: translateX(3px); }
.speler-modal { position: relative; width: min(620px, 100%); }
.sp-close { position: absolute; top: 12px; right: 12px; }
.sp-head { display: flex; gap: 18px; align-items: center; margin-bottom: 8px; }
.sp-av { flex: none; width: 128px; height: 128px; border-radius: 20px; overflow: hidden; background: radial-gradient(circle at 50% 75%, rgba(var(--gold-rgb), .3), transparent 60%), var(--bg-2); border: 1px solid var(--line-strong); }
.sp-av .av-podium { width: 100%; height: 100%; display: block; }
.sp-gem { width: 22px; height: 22px; border-radius: 6px; margin-right: 2px; }
.sp-gem span { font-size: .7rem; }
.sp-h { font-family: var(--display); font-size: 1rem; margin: 18px 0 8px; }
.sp-realm { padding: 10px 12px; border-radius: 12px; background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); margin-bottom: 8px; }
.sp-realm-head { display: flex; justify-content: space-between; font-weight: 800; font-size: .92rem; margin-bottom: 6px; }
.sp-realm-head b { color: var(--gold); }
.sp-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-badges .patch-mini { width: 38px; height: 45px; }
.sp-badges .patch-mini .patch-icon { font-size: 1.25rem; }
@media (max-width: 640px) {
  .podium-spot .av-podium { width: 92px; height: 92px; }
  .podium-spot.p1 .av-podium { width: 118px; height: 118px; }
  .sp-head { flex-direction: column; text-align: center; }
}

/* Ranglijst-podium (2026-09-30, wens gebruiker: top drie flink groter op een fantasy-podium). Het podium is één
   PixelLab-beeld (bron/ranglijst/podium-pl1.png, bijgesneden 282×168); alles in procenten van de breedte, dus het
   schaalt mee. Alleen de bovenste 110 px, naar onder vervaagd (sokkels waren veel te groot naast de helden). Voetpunten per sokkel (x, y in beeldpixels): 2 = (47, 46), 1 = (142, 12), 3 = (228, 75). */
.podium-fantasy { max-width: 700px; margin: 0 auto 18px; }
.pf-steen { position: relative; margin-top: 49%; aspect-ratio: 282 / 110; }
.pf-steen::before { content: ""; position: absolute; inset: 0; image-rendering: pixelated;
  background: url("../assets/ranglijst-podium.png?v=1") top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent); mask-image: linear-gradient(180deg, #000 62%, transparent); filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .5)); }
.pf-held { position: absolute; transform: translateX(-50%); width: 44%; padding: 0; border: 0; background: none; cursor: var(--wijs, pointer); line-height: 0; }
.pf-held .av-podium { width: 100%; height: auto; aspect-ratio: 1; display: block; transition: transform .2s; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .55)); }
.pf-held:hover .av-podium, .pf-held:focus-visible .av-podium { transform: translateY(-4%); }
.pf-held.p1 { width: 52%; z-index: 1; left: calc(142 / 282 * 100%); bottom: calc((110 - 12) / 110 * 100%); }
.pf-held.p2 { left: calc(47 / 282 * 100%); bottom: calc((110 - 46) / 110 * 100%); }
.pf-held.p3 { left: calc(228 / 282 * 100%); bottom: calc((110 - 75) / 110 * 100%); }
.pf-held::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 30%; z-index: -1;
  background: radial-gradient(ellipse at 50% 100%, rgba(var(--m-rgb), .5), transparent 70%); filter: blur(6px); }
.pf-held.p1, .pf-naam.p1 { --m: var(--gold); --m-rgb: var(--gold-rgb); }
.pf-held.p2, .pf-naam.p2 { --m: #cfd8e3; --m-rgb: 207, 216, 227; }
.pf-held.p3, .pf-naam.p3 { --m: #d08a52; --m-rgb: 208, 138, 82; }
.pf-namen { display: grid; grid-template-columns: 34% 38% 28%; margin-top: -4px; position: relative; }
.pf-naam { font: inherit; color: inherit; background: none; border: 0; cursor: var(--wijs, pointer); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px; min-width: 0; }
.pf-naam b { font-weight: 900; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-naam .medal { font-size: 1.4rem; line-height: 1; }
.pf-naam .xp { color: var(--m); font-weight: 900; font-size: .9rem; }
.pf-naam .xp-sub { display: block; color: var(--muted); font-weight: 700; font-size: .75rem; white-space: nowrap; }   /* The Casebook: ⌀ pogingen · zegel */
.pf-naam.p1 b { color: var(--gold); font-size: 1.15rem; }
@media (max-width: 640px) { .pf-naam b { font-size: .8rem; } .pf-naam.p1 b { font-size: .9rem; } .pf-naam .xp { font-size: .75rem; } .pf-naam .medal { font-size: 1.1rem; } }
.sp-slot { margin-top: 10px; }
.sp-slot-label { font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.sp-items { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-item { --r: var(--line-strong); font-size: .8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--r) 16%, transparent); border: 1px solid color-mix(in srgb, var(--r) 55%, transparent); color: var(--text); }
/* Hoofdstukken uit de leermethode */
.book-title { font-family: var(--display); font-size: 1.05rem; margin: 6px 0 0; }
.hfd-nr { font-family: var(--display); font-weight: 900; font-size: 1.5rem; color: var(--gold); }
.par-head { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: space-between; align-items: baseline; }

/* Opgavekaart met miniatuur (onderwerp- en hoofdstukpagina's) */
.opg-card { --c: var(--accent); display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); color: var(--text); text-decoration: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .15s, border-color .15s, box-shadow .15s; }
.opg-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 14px 30px rgba(0, 0, 0, .35); }
.opg-thumb { position: relative; display: block; aspect-ratio: 40 / 26; background: #f2efe6; overflow: hidden; }
.opg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.opg-card:hover .opg-thumb img { transform: scale(1.05); }
.opg-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(var(--bg-rgb), .85)); }
.opg-icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; opacity: .35; }
.opg-nr { position: absolute; left: 10px; bottom: 8px; z-index: 1; font-family: var(--display); font-weight: 900; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 40%, rgba(0, 0, 0, .55)); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); }
.opg-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px 16px; }
.opg-body h3 { font-family: var(--display); font-size: 1.05rem; margin: 0; }
.opg-body .status { margin-top: 2px; }

/* Hersteltijd van eindbazen in de statusbalk: bij meerdere bazen een lijstje bij hover/tik */
.hud-herstel { position: relative; display: inline-flex; }
.hud-herstel small { font-size: .75em; opacity: .8; }
.hud-herstel-lijst { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 250px; padding: 8px;
  border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--line-strong); box-shadow: var(--shadow); }
.hud-herstel:hover .hud-herstel-lijst, .hud-herstel:focus-within .hud-herstel-lijst { display: grid; gap: 4px; }
.hud-herstel-lijst::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }  /* hover-brug */
.hud-herstel-lijst .kop { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding: 2px 6px 4px; }
.hud-herstel-lijst a { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; color: var(--text); text-decoration: none; }
.hud-herstel-lijst a:hover { background: var(--panel-2); }
.hud-herstel-lijst img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.hud-herstel-lijst span { display: grid; line-height: 1.2; }
.hud-herstel-lijst b { font-family: var(--display); font-size: 14px; }
.hud-herstel-lijst small { color: var(--muted); font-size: 12px; }
.hud-herstel-lijst em { font-style: normal; font-weight: 800; color: #ffb46b; white-space: nowrap; }
/* Extra chip (hersteltijd) in de statusbalk: op middelgrote schermen de navigatie compacter, anders past het niet */
@media (max-width: 1250px) {
  #topbar:has(.hud-herstel) .topnav a span, #topbar:has(.hud-herstel) .xp-meta { display: none; }
  #topbar:has(.hud-herstel) .topnav a { font-size: 1.2rem; padding: 5px 12px; }
}

/* The Flying Circus (schatkamer Engels): Monty Python-sketches in een Terry Gilliam-decor (js/sketches.js).
   Mosterdgele lucht, uitgeknipt Londen op de horizon, groene plankenvloer in perspectief, rode gaten waar de prenten uit
   omhoog steken (tools/sketches.py). Op slot = grijze, gedempte prent zonder titel. De voet stampt: iedereen duikt weg. */
.panel.mp { position: relative; overflow: hidden; color: #2b1d14; border-color: #c9b48a;
  background: linear-gradient(180deg, #f5e9cc, #e9d7ae); }
.mp-kop { text-align: center; padding: 4px 8px 10px; }
.mp-titel small { display: block; font-family: var(--display); font-style: italic; font-size: .95rem; letter-spacing: .08em; color: #6b4a2b; }
.mp-titel h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(1.8rem, 4.6vw, 3rem); letter-spacing: .06em;
  color: #b3261e; text-shadow: 2px 2px 0 #f5e9cc, 4px 4px 0 #2b1d14; text-transform: uppercase; line-height: 1.05; }
.mp-sub { max-width: 640px; margin: 8px auto 0; font-size: .92rem; color: #4a3423; }

.mp-podium { --hor: 36%; position: relative; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  border: 2px solid #2b1d14; border-radius: 6px;
  background: radial-gradient(ellipse at 70% 10%, #f6df86, transparent 60%), linear-gradient(180deg, #e9cf6a, #efd98a var(--hor)); }
.mp-stad { position: absolute; left: 0; right: 0; bottom: calc(100% - var(--hor)); width: 100%; height: 30%; z-index: 1; }
.mp-vloer { position: absolute; left: 0; right: 0; top: var(--hor); bottom: 0; width: 100%; height: calc(100% - var(--hor)); z-index: 0; }
.mp-ufo { position: absolute; top: 7%; left: 30%; width: 11cqw; z-index: 2; animation: mpZweef 14s steps(28) infinite alternate; }
.mp-appel { position: absolute; top: calc(var(--hor) - 9.2cqw); right: 21%; width: 8cqw; z-index: 2; transform: rotate(6deg); }
.mp-ufo svg, .mp-appel svg, .mp-voet svg { display: block; width: 100%; height: auto; }
@keyframes mpZweef { 0% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(18cqw, 3cqw) rotate(4deg); } 100% { transform: translate(40cqw, -1cqw) rotate(-3deg); } }

/* Een plek = een rood gat op (x, y). Wat eruit groeit staat in .mp-vak, dat alleen ónder de middellijn van het gat afknipt
   (zijwaarts en naar boven mag alles eruit steken). Zo kan een prent echt het gat in duiken; de voorrand ligt eroverheen. */
.mp-plek { --w: calc(var(--s) * 15cqw); position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: var(--z); }
.mp-gat, .mp-lip { position: absolute; left: calc(var(--w) * -.62); top: calc(var(--w) * -.14); width: calc(var(--w) * 1.24); height: calc(var(--w) * .28); border-radius: 50%; }
.mp-gat { background: radial-gradient(ellipse at 50% 38%, #120403 0 42%, #6a0f0c 60%, #c0201a 78%); box-shadow: 0 2px 0 rgba(43, 29, 20, .35); }
.mp-lip { clip-path: inset(50% 0 0 0); background: radial-gradient(ellipse at 50% 0%, transparent 0 58%, #c0201a 60%, #8d1511 100%); pointer-events: none; }
.mp-vak { position: absolute; left: 0; top: 0; width: 0; height: 0; clip-path: inset(-400cqw -400cqw 0 -400cqw); pointer-events: none; }
.mp-groei { position: absolute; left: 0; bottom: 0; width: 0; height: 0; animation: mpOp var(--d) steps(3) var(--vt) infinite; }
@keyframes mpOp { 0%, 100% { transform: translateY(calc(var(--w) * .1)) rotate(-2deg); } 50% { transform: translateY(0) rotate(2deg); } }
.mp-knip { position: absolute; left: calc(var(--w) * -.5); bottom: 0; width: var(--w); padding: 0; border: 0; background: none; color: inherit; font: inherit;
  display: block; transform-origin: 50% 100%; filter: drop-shadow(2px 3px 0 rgba(43, 29, 20, .3)); pointer-events: auto; transition: transform .2s steps(2); }
.mp-knip img { display: block; width: 100%; height: auto; }
button.mp-knip { cursor: var(--wijs, pointer); }
button.mp-knip:hover, button.mp-knip:focus-visible { transform: translateY(-10%) scale(1.1) rotate(-3deg); }
.mp-plek:has(button.mp-knip:hover), .mp-plek:has(button.mp-knip:focus-visible) { z-index: 150; }
.mp-knip.dicht { transform: translateY(26%); }
.mp-knip.dicht img { filter: grayscale(1) contrast(.7) brightness(1.12) sepia(.15); opacity: .85; }
.mp-lint { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 30%) rotate(-3deg); padding: 3px 10px; opacity: 0;
  background: var(--c); color: #2b1d14; font-family: var(--display); font-weight: 800; font-size: .78rem; line-height: 1.2; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, 97% 50%, 100% 100%, 0 100%, 3% 50%); transition: opacity .15s steps(2); pointer-events: none; }
button.mp-knip:hover .mp-lint, button.mp-knip:focus-visible .mp-lint { opacity: 1; }

/* Onderstel: een stengel met blaadjes of een spiraalveer tussen gat en prent. */
.mp-steel, .mp-veer { position: absolute; left: calc(var(--w) * -.1); bottom: 0; width: calc(var(--w) * .2); }
.mp-steel { height: calc(var(--w) * .72); }
.mp-veer { height: calc(var(--w) * .5); }
.op-steel .mp-knip { bottom: calc(var(--w) * .64); }
.op-veer .mp-knip { bottom: calc(var(--w) * .44); }
.op-veer .mp-groei { animation-name: mpVeer; animation-timing-function: steps(4); }
@keyframes mpVeer { 0%, 100% { transform: translateY(calc(var(--w) * .12)); } 35% { transform: translateY(calc(var(--w) * -.22)); } 55% { transform: translateY(calc(var(--w) * -.12)); } }

.mp-hand-plek { --x: 57%; --y: 76%; --s: .38; --z: 76; --mx: 88%; --my: 63%; --ms: .35; --mz: 63; }
.mp-hoed-plek { --x: 92%; --y: 75%; --s: .55; --z: 75; --mx: 40%; --my: 77%; --ms: .4; --mz: 77; }
.mp-hand, .mp-hoed { pointer-events: none; }
.mp-hand svg, .mp-hoed svg { position: absolute; left: calc(var(--w) * -.5); bottom: 0; width: var(--w); }
.mp-hand { animation: mpZwaai 3s steps(4) infinite; transform-origin: 0 0; }
@keyframes mpZwaai { 0%, 100% { transform: translateY(calc(var(--w) * .5)) rotate(-8deg); } 30% { transform: translateY(0) rotate(6deg); } 60% { transform: translateY(calc(var(--w) * .1)) rotate(-4deg); } }
.mp-hoed { animation: mpHoed 4.2s steps(5) infinite; }
@keyframes mpHoed { 0%, 60%, 100% { transform: translateY(calc(var(--w) * .7)); } 72% { transform: translateY(calc(var(--w) * -.35)) rotate(-12deg); }
  82% { transform: translateY(calc(var(--w) * -.1)) rotate(8deg); } 90% { transform: translateY(0); } }
.mp-theepot { position: absolute; top: 14%; left: 4%; width: 10cqw; z-index: 2; animation: mpVlieg 9s steps(18) infinite alternate; }
.mp-theepot svg { display: block; width: 100%; height: auto; }
@keyframes mpVlieg { 0% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(8cqw, -4cqw) rotate(6deg); } 100% { transform: translate(15cqw, 1cqw) rotate(-2deg); } }

/* De voet hangt in de lucht; klik = stampen, het podium schudt en iedereen duikt zijn gat in. */
.mp-voet { position: absolute; top: 4%; right: 3%; width: 9cqw; padding: 0; border: 0; background: none; cursor: var(--wijs, pointer); z-index: 200;
  transform: rotate(14deg); filter: drop-shadow(3px 4px 0 rgba(43, 29, 20, .3)); transition: transform .2s steps(3); }
.mp-voet:hover { transform: rotate(6deg) translateY(4%); }
.mp-podium.stamp .mp-voet { animation: mpStamp 1.1s steps(11) both; }
.mp-podium.stamp { animation: mpSchud 1.1s steps(11) both; }
.mp-podium.stamp .mp-groei { animation: mpDuik 1.1s steps(6) both; }
@keyframes mpStamp { 0% { transform: rotate(14deg); } 30% { transform: rotate(0) translate(-420%, 330%) scale(2.2); }
  55% { transform: rotate(0) translate(-420%, 320%) scale(2.2); } 100% { transform: rotate(14deg); } }
@keyframes mpSchud { 30%, 40% { transform: translate(-4px, 3px); } 35%, 45% { transform: translate(4px, -2px); } 50% { transform: none; } }
@keyframes mpDuik { 0% { transform: translateY(calc(var(--w) * .1)); } 25%, 70% { transform: translateY(calc(var(--w) * 2.2)); } 100% { transform: translateY(calc(var(--w) * .1)); } }

.mp-tip { color: #6b4a2b !important; text-align: center; margin: 8px 0 0; }
.mp-woord { padding: 8px 12px; border-left: 3px solid #b3261e; background: var(--panel-2); border-radius: 0 10px 10px 0; }
.mp-woord span { display: inline-block; margin-right: 8px; font-size: .78rem; font-weight: 800; color: var(--muted); }

/* Telefoon: hoger podium, andere plekken en grotere prenten. */
@media (max-width: 640px) {
  .mp-podium { --hor: 30%; aspect-ratio: 3 / 4; }
  .mp-stad { height: 20%; }
  .mp-plek { --w: calc(var(--ms) * 30cqw); left: var(--mx); top: var(--my); z-index: var(--mz); }
  .mp-ufo { width: 20cqw; left: 8%; }
  .mp-appel { width: 13cqw; top: calc(var(--hor) - 14.6cqw); right: 30%; }
  .mp-theepot { width: 18cqw; top: 6%; left: 40%; }
  .mp-voet { width: 16cqw; }
}

@media (max-width: 640px) {
  .land-grid, .land-baas { grid-template-columns: 1fr; }
  .land-baas { grid-column: auto; }
  .land-breed, .land-gids { grid-template-columns: 1fr; }
  .lg-vex { width: 174px; }
  .land-quests { grid-template-columns: 1fr; }
  .lq-gids { flex-direction: column; text-align: center; }
  .land-verz-rij { grid-template-columns: 1fr 1fr; }
  .land-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Quests: hub (rijkenpagina), questlog, Malachai en het dialoogvenster ---------- */
.hub { margin-top: 18px; display: grid; gap: 14px; }
.hub:empty { display: none; }
.hub-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hub-kop h2 { margin: 0; font-size: 1.3rem; }
.hub-kop h2 small { color: var(--muted); font-size: .85rem; margin-left: 6px; }
.hub-quests, .ql-lijst { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.qk { display: flex; gap: 14px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(0,0,0,.18));
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); transition: transform .15s; }
.qk:hover { transform: translateY(-2px); }
.qk.klaar { border-color: var(--gold); box-shadow: 0 0 18px rgba(var(--gold-rgb), .35); animation: qk-gloed 2.4s ease-in-out infinite; }
@keyframes qk-gloed { 50% { box-shadow: 0 0 28px rgba(var(--gold-rgb), .55); } }
.qk.leeg { --c: #8890c0; border-style: dashed; background: rgba(0,0,0,.12); }
.qk.leeg .qk-zin { color: var(--muted); }
.qk-portret { width: 112px; height: 112px; flex: none; image-rendering: pixelated; align-self: center; filter: drop-shadow(0 5px 8px rgba(0,0,0,.5)); }
.qk-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.qk-kop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.qk-kop small { color: var(--muted); font-size: .72rem; }
.qk-zin { margin: 0; font-size: .9rem; line-height: 1.45; color: var(--text); }
.qk-stand { display: flex; align-items: center; gap: 8px; }
.qk-stand .progress { flex: 1; }
.qk-stand small { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.qk-actie { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.qk-loon { color: var(--gold); font-weight: 800; font-size: .85rem; }
.qk-weiger { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--faint);
  font-size: .7rem; line-height: 1; cursor: var(--wijs, pointer); opacity: .6; transition: opacity .15s, color .15s, border-color .15s; }
.qk-weiger:hover, .qk-weiger:focus-visible { opacity: 1; color: #ff6b7a; border-color: #ff6b7a; }
.hud-quest { position: relative; cursor: var(--wijs, pointer); font: inherit; }
.hud-tel { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: #2a1a00;
  font-size: .7rem; font-weight: 900; display: grid; place-items: center; box-shadow: 0 0 10px rgba(var(--gold-rgb), .6); }
.ql-vrienden { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ql-vriend { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: rgba(0,0,0,.2); }
.ql-vriend img { width: 128px; height: 128px; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.45)); }
.ql-vriend small { font-size: .8rem !important; }
.ql-lijst .qk-portret { width: 150px; height: 150px; }
.ql-lijst { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
@media (max-width: 640px) { .ql-lijst { grid-template-columns: 1fr; } .ql-lijst .qk-portret { width: 100px; height: 100px; } .ql-vrienden { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } .ql-vriend img { width: 96px; height: 96px; } }
.ql-vriend small { font-size: .72rem; font-weight: 700; line-height: 1.2; }
.ql-vriend span { font-size: .72rem; }
.ql-vriend.nieuw img { filter: grayscale(.8) brightness(.7); }
button.ql-vriend { border: 1px solid transparent; color: inherit; font: inherit; cursor: var(--wijs, pointer); transition: transform .15s, border-color .15s; }
button.ql-vriend:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.ql-boek { color: var(--muted); font-size: .7rem; }
.dlg-tekst i { color: #e9dcff; }

/* Malachai in de bovenbalk: over het einde van "Examnië" heen, hangt onder de balk uit en kijkt mee (poses: js/vex.js) */
.brand { position: relative; z-index: 1; margin-left: var(--vex-ruimte); }   /* ruimte linksboven voor Malachai */
:root { --vex: 230px; --vex-ruimte: 150px; }   /* 2x zijn pixels; kleiner op smallere schermen (zie media queries) */
.gids-knop { position: absolute; z-index: 3; left: 0; top: 10px; width: var(--vex); height: var(--vex); padding: 0; border: 0; background: none;
  cursor: var(--wijs, pointer); pointer-events: none; }
.gids-knop img { display: block; width: 100%; height: 100%; max-width: none; image-rendering: pixelated; pointer-events: auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(181,140,255,.35)); transition: filter .15s; }
/* Valt hij over de inhoud (js/vex.js pasGrootteAan, hotfix 2026-10-15), dan zo hoog als de balk: niet meer eronder uit */
.gids-knop.klein { width: var(--vex-klein, 64px); height: var(--vex-klein, 64px); top: 4px; }
.gids-knop { transition: width .25s, height .25s, top .25s; }
@media (max-width: 1500px) { :root { --vex: 173px; --vex-ruimte: 110px; } }
@media (max-width: 1000px) { :root { --vex: 115px; --vex-ruimte: 64px; } }
.gids-knop:hover img { filter: drop-shadow(0 3px 4px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(181,140,255,.8)); }
.gids-knop img[data-pose="basis"] { animation: vex-adem 5s ease-in-out infinite; }   /* rustig ademen als er niets gebeurt */
@keyframes vex-adem { 50% { transform: translateY(-2px); } }
.gids-knop.wip img { animation: vex-wip .35s ease-out; }
@keyframes vex-wip { 40% { transform: translateY(-4px) scale(1.04); } }
/* Stijgende theedamp in rust (js/vex.js, tools/malachai-damp.py): strip van 24 frames; ademt mee met het portret.
   Staat ná de algemene .gids-knop img-regels: die (vullen, schaduw, hupje) mogen dit plaatje niet raken. */
.vex-damp { position: absolute; display: none; overflow: hidden; pointer-events: none; }
.gids-knop.rust .vex-damp { display: block; animation: vex-adem 5s ease-in-out infinite; }
.gids-knop .vex-damp img { display: block; height: 100%; max-width: none; image-rendering: pixelated; filter: none; pointer-events: none;
  animation: vex-damp 2.3s steps(24) infinite; }
@keyframes vex-damp { to { transform: translateX(-100%); } }
.gids-roep { position: absolute; top: 8%; right: 14%; pointer-events: none; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; z-index: 2;
  background: var(--gold); color: #2a1a00; font-weight: 900; font-size: .85rem; box-shadow: 0 0 10px rgba(var(--gold-rgb), .7); animation: roep 1.2s ease-in-out infinite; }
.gids-knop.roept .gids-roep { display: grid; }
/* Vraagteken: er staat een ongelezen bladzijde in zijn handboek */
.gids-hulp { position: absolute; top: 8%; left: 14%; pointer-events: none; width: 22px; height: 22px; border-radius: 50%; display: none; place-items: center; z-index: 2;
  background: #b58cff; color: #1a0f33; font-weight: 900; font-size: .85rem; box-shadow: 0 0 10px rgba(181,140,255,.8); animation: roep 1.4s ease-in-out infinite; }
.gids-knop.hulp-nieuw .gids-hulp { display: grid; }

/* Malachai zegt: tekstballon onder hem (js/malachai.js) */
.vex-ballon { --links: max(12px, calc(var(--pijl, 80px) - 70px)); position: fixed; z-index: 780; top: var(--top, 200px); left: var(--links);
  width: min(430px, calc(100vw - 24px)); padding: 14px 34px 12px 16px; border-radius: 14px; color: var(--text); font-size: .98rem; line-height: 1.5;
  background: linear-gradient(180deg, #2b2253, #19153a); border: 2px solid #b58cff; box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 18px rgba(181,140,255,.3);
  opacity: 0; transform: translateY(-8px) scale(.97); transform-origin: 40px 0; transition: opacity .2s, transform .2s; }
.vex-ballon::before { content: ""; position: absolute; top: -10px; left: clamp(14px, calc(var(--pijl, 80px) - var(--links) - 9px), 60%); width: 16px; height: 16px;
  background: #2b2253; border-left: 2px solid #b58cff; border-top: 2px solid #b58cff; transform: rotate(45deg); }
.vex-ballon.in { opacity: 1; transform: none; }
.vex-ballon.weg { opacity: 0; transform: translateY(-8px); }
.vex-ballon.klik { cursor: var(--wijs, pointer); }
.vex-ballon.klik:hover { border-color: #d6bdff; }
.vex-ballon.groot { width: min(500px, calc(100vw - 24px)); }
.vex-ballon b { color: var(--gold); }
.vex-ballon i { color: #e9dcff; }
.vb-dicht { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: var(--faint); cursor: var(--wijs, pointer); font-size: .8rem; padding: 4px 6px; }
.vb-dicht:hover { color: var(--text); }
.vb-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vb-knoppen:empty { display: none; }
.vb-bekijk { display: block; margin-top: 6px; color: #c9a4ff; font-weight: 700; }
.vb-intro { color: #c9a4ff; font-style: italic; }
.vb-level { display: flex; gap: 14px; align-items: flex-start; }
.vb-level .lvl-gem { flex: none; width: 54px; height: 54px; border-radius: 14px; margin: 4px 4px 0; animation: pop .7s cubic-bezier(.2, 1.6, .4, 1); }
.vb-level .lvl-gem span { font-size: 1.5rem; }
.vb-level p { margin: 8px 0 0; }
.vb-fase { font-style: italic; color: #e9dcff; }

/* Meneer Bartholomeus (js/hamster.js): strips van PixelLab-frames, 2x zijn pixels. steps() kent geen var(): aantal frames per soort. */
.hamster-ren, .hamster-zit { padding: 0; border: 0; background-color: transparent; background-repeat: no-repeat; image-rendering: pixelated; cursor: var(--wijs, pointer);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); animation-name: hamster-strip; animation-iteration-count: infinite; }
@keyframes hamster-strip { from { background-position-x: 0; } to { background-position-x: var(--eind); } }
.hamster-ren { position: fixed; z-index: 60; left: -120px; animation-timing-function: steps(6); }
.hamster-ren.links { transform: scaleX(-1); }
.hamster-ren.gevangen { animation-play-state: paused; translate: 0 -10px; scale: 1.15; transition: translate .2s, scale .2s; }
.hamster-zit { position: absolute; right: 18px; bottom: calc(100% - 10px); animation-timing-function: steps(4); }
.hamster-zit.hop { translate: 0 -8px; transition: translate .15s; }
.vex-ballon.met-hamster { padding-right: 34px; }

/* Handboek: het oplichtende onderdeel, de rest donker */
.vex-spot { position: fixed; z-index: 790; border-radius: 12px; pointer-events: none; transition: left .15s, top .15s;
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px 6px rgba(var(--gold-rgb), .6), 0 0 0 100vmax rgba(5, 6, 18, .6); animation: vex-spot 1.3s ease-in-out infinite; }
@keyframes vex-spot { 50% { box-shadow: 0 0 0 5px var(--gold), 0 0 32px 10px rgba(var(--gold-rgb), .85), 0 0 0 100vmax rgba(5, 6, 18, .6); } }
.hb-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.hb-item { position: relative; display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 12px; cursor: var(--wijs, pointer);
  border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; font-weight: 700; transition: border-color .15s, transform .1s; }
.hb-item:hover { border-color: #b58cff; transform: translateY(-1px); }
.hb-ico { font-size: 1.3rem; }
.hb-item.nieuw::after, .dlg-nieuw { content: "nieuw"; position: absolute; top: -7px; right: 8px; font-size: .62rem; background: var(--gold); color: #2a1a00;
  padding: 1px 6px; border-radius: 99px; font-weight: 900; text-transform: uppercase; }
.dlg-nieuw { position: static; margin-left: 4px; vertical-align: middle; }
@keyframes roep { 50% { transform: translateY(-3px); } }

/* JRPG-dialoogvenster onderin */
.dlg { position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: flex; justify-content: center; padding: 0 16px 18px; pointer-events: none; }
.dlg-box { pointer-events: auto; position: relative; width: min(920px, 100%); min-height: 150px; padding: 18px 22px 16px 230px; cursor: var(--wijs, pointer);
  background: linear-gradient(180deg, rgba(18,16,44,.97), rgba(10,9,28,.98)); border: 2px solid color-mix(in srgb, var(--c) 70%, #fff 10%);
  border-radius: 14px; box-shadow: 0 0 0 4px rgba(0,0,0,.55), 0 0 30px color-mix(in srgb, var(--c) 35%, transparent), 0 18px 40px rgba(0,0,0,.6);
  transform: translateY(30px); opacity: 0; transition: transform .22s ease-out, opacity .22s; }
.dlg.in .dlg-box { transform: none; opacity: 1; }
.dlg.weg .dlg-box { transform: translateY(30px); opacity: 0; }
.dlg-portret { position: absolute; left: 12px; bottom: 6px; width: 208px; height: 208px; image-rendering: pixelated; filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.dlg-naam { position: absolute; top: -16px; left: 230px; padding: 3px 14px; border-radius: 8px; background: color-mix(in srgb, var(--c) 45%, #120f2c);
  border: 2px solid color-mix(in srgb, var(--c) 70%, #fff 10%); font-weight: 900; letter-spacing: .03em; font-size: .95rem; }
.dlg-naam small { font-weight: 600; color: rgba(255,255,255,.7); margin-left: 4px; }
.dlg-tekst { font-size: 1.08rem; line-height: 1.55; min-height: 3.1em; margin-top: 6px; }
.dlg-tekst b { color: var(--gold); }
.dlg-doel { display: inline-block; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.07); font-size: .95rem; }
.dlg-keuzes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dlg-keuzes kbd { opacity: .6; font-size: .72rem; margin-right: 2px; }
.dlg-verder { position: absolute; right: 16px; bottom: 8px; color: var(--c); display: none; animation: roep 1s ease-in-out infinite; }
/* Malachai: bovenin, onder zijn portret in de balk, met een pijltje naar hem */
.dlg.boven { top: var(--top, 90px); bottom: auto; justify-content: flex-start; padding: 0 16px; }
.dlg.boven .dlg-box { width: min(640px, calc(100vw - 32px)); min-height: 0; padding: 20px 20px 14px; margin-left: max(0px, calc(var(--pijl, 60px) - 70px)); transform: translateY(-20px); }
.dlg.boven.in .dlg-box { transform: none; }
.dlg.boven.weg .dlg-box { transform: translateY(-20px); }
.dlg.boven .dlg-naam { left: 18px; }
.dlg.boven .dlg-box::before { content: ""; position: absolute; top: -11px; left: clamp(20px, calc(var(--pijl, 60px) - max(0px, calc(var(--pijl, 60px) - 70px)) - 16px - 10px), 90%);
  width: 18px; height: 18px; background: rgb(18,16,44); border-left: 2px solid color-mix(in srgb, var(--c) 70%, #fff 10%);
  border-top: 2px solid color-mix(in srgb, var(--c) 70%, #fff 10%); transform: rotate(45deg); }
.dlg.wacht .dlg-verder { display: block; }
@media (max-width: 640px) {
  .dlg { padding: 0 8px 10px; }
  .dlg-box { padding: 20px 14px 14px 14px; margin-top: 110px; }
  .dlg-portret { width: 128px; height: 128px; left: 6px; bottom: auto; top: -118px; }
  /* onderkant vast (12 px over de rand), zodat een naam over twee regels naar boven groeit i.p.v. over de tekst */
  .dlg-naam { left: 140px; top: auto; bottom: calc(100% - 12px); max-width: calc(100% - 150px); }
  .dlg-tekst { font-size: 1rem; }
  .qk-portret { width: 80px; height: 80px; }
  :root { --vex: 84px; --vex-ruimte: 46px; }
  .dlg.boven .dlg-box { margin-left: 0; }
  .dlg.boven .dlg-naam { max-width: calc(100% - 36px); }       /* Malachai-ballon: geen portret links */
}

/* Het Nest (verzameling biologie, js/nest.js) */
.nest-scene { position: relative; aspect-ratio: 688 / 384; border-radius: 14px; overflow: hidden; background: #26311f url("../assets/nest/scene.png") center / 100% 100% no-repeat;
  image-rendering: pixelated; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.nest-ei, .nest-wezen { position: absolute; padding: 0; border: 0; background: none; cursor: var(--wijs, pointer); }
.nest-ei img { display: block; width: 100%; image-rendering: pixelated; transform-origin: 50% 90%; filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)); }
.nest-ei.koud img { filter: drop-shadow(0 3px 2px rgba(0,0,0,.5)) saturate(.8) brightness(.9); }
.nest-ei.warm img { animation: ei-gloed 2.2s ease-in-out infinite, ei-wiebel 4.5s var(--r) infinite; }
.nest-ei:hover img { filter: drop-shadow(0 0 7px rgba(255,236,160,.95)); }
@keyframes ei-gloed { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255,220,120,.6)); } 50% { filter: drop-shadow(0 0 9px rgba(255,236,160,1)); } }
@keyframes ei-wiebel { 0%, 84%, 100% { rotate: 0deg; } 87% { rotate: -7deg; } 90% { rotate: 6deg; } 93% { rotate: -4deg; } 96% { rotate: 2deg; } }
.nest-ei.tik img { animation: ei-tik .35s; }
@keyframes ei-tik { 30% { rotate: -4deg; } 65% { rotate: 3deg; } }
/* Openen in drie tikken: barst1 (klein barstje, schok) -> barst2 (grote barst, blijft trillen) -> uit (zwelt op, flits) */
.nest-ei.barst1 img { animation: ei-schok1 .4s ease-out, ei-gloed 2.2s .4s ease-in-out infinite; }
.nest-ei.barst2 img { animation: ei-schok2 .45s ease-out, ei-tril .5s .45s linear infinite, ei-gloed 1.2s ease-in-out infinite; }
.nest-ei.uit img { animation: ei-uit .22s ease-in forwards; }
@keyframes ei-schok1 { 20% { rotate: -6deg; scale: 1.04; } 50% { rotate: 5deg; } 75% { rotate: -2deg; } }
@keyframes ei-schok2 { 15% { rotate: -11deg; scale: 1.08; } 40% { rotate: 10deg; } 65% { rotate: -6deg; } 85% { rotate: 3deg; } }
@keyframes ei-tril { 0%, 100% { rotate: 0deg; } 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } }
@keyframes ei-uit { to { scale: 1.18; rotate: 0deg; } }
.nest-ei.barst1::after, .nest-ei.barst2::after { content: ""; position: absolute; inset: 18% 14% 20%; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath d='M4 22 L10 18 L14 25 L19 16 L24 24 L29 17 L34 23 L37 20' fill='none' stroke='%23fff8d8' stroke-width='2.4'/%3E%3Cpath d='M19 16 L17 9 M24 24 L27 32 M10 18 L8 12' fill='none' stroke='%23fff8d8' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(255,240,180,.9)); animation: barst .25s both; }
/* eerste tik: alleen het middenstuk van de barst (clip), tweede tik: de hele barst met meer gloed */
.nest-ei.barst1::after { clip-path: inset(0 38% 0 30%); }
.nest-ei.barst2::after { filter: drop-shadow(0 0 5px rgba(255,240,180,1)) drop-shadow(0 0 2px #fff); }
@keyframes barst { from { opacity: 0; } to { opacity: 1; } }
.nest-flits { position: absolute; z-index: 1000; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, #fff6c8 35%, rgba(255,220,120,0) 70%); animation: nest-flits .85s ease-out forwards; }
@keyframes nest-flits { 0% { transform: scale(1); opacity: 1; } 60% { opacity: .95; } 100% { transform: scale(40); opacity: 0; } }
.nest-wezen span { display: block; width: 100%; background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.45)); transition: filter .15s; }
.nest-wezen span.anim, .nk-beeld span.anim { background-size: calc(var(--n) * 100%) 100%; animation: wezen-anim 1.6s steps(8, jump-none) var(--r, 0s) infinite; }   /* 8 frames (tools/nest.py, PixMiniMax 0-7); steps() kent geen var() */
@keyframes wezen-anim { from { background-position-x: 0%; } to { background-position-x: 100%; } }
.nest-wezen:hover span { filter: drop-shadow(0 0 7px rgba(255,255,255,.9)); }
.nest-wezen.nieuw { animation: wezen-pop .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes wezen-pop { from { transform: scale(.2) translateY(20%); opacity: 0; } }
.nest-warm { color: var(--gold); }
.nest-kaart { text-align: center; }
.nk-beeld { display: flex; justify-content: center; margin: 4px 0 10px; }
.nk-beeld span { display: block; width: min(288px, 70vw); background-size: 100% 100%; background-repeat: no-repeat; image-rendering: pixelated;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.nk-soort { margin: 2px 0 10px; font-style: italic; color: var(--muted); }

/* Landingspagina: mini-nest in de verzamelingen-tegel (16:9-scène in een 4:3-vak, ingezoomd op het nest) */
.verz-minest { position: absolute; inset: 0; overflow: hidden; }
.vn-binnen { position: absolute; top: -44%; height: 160%; aspect-ratio: 688 / 384; left: 50%; transform: translateX(-50%);
  background: url("../assets/nest/scene.png") center / 100% 100% no-repeat; image-rendering: pixelated; }
.vn-binnen .nest-ei, .vn-binnen .nest-wezen { position: absolute; cursor: var(--pijl, default); }
.verz-beeld:has(.verz-minest) > img { visibility: hidden; }

/* ---------- De Kaasplank (verzameling Nederlands, js/kaasplank.js) ---------- */
.kp-plank { position: relative; aspect-ratio: 688 / 384; border-radius: 14px; overflow: hidden;
  background: url("../assets/kaas/plank.png") center / cover; image-rendering: pixelated; container-type: inline-size; }
.kp-blok { position: absolute; left: var(--x); top: var(--y); z-index: var(--z); width: calc(6.2cqw * var(--k, 1)); transform: translate(-50%, -100%); }
.kp-kaas { display: block; width: 100%; image-rendering: pixelated; transform: scaleX(var(--m, 1)); filter: drop-shadow(0 .5cqw .4cqw rgba(60, 30, 10, .45)); }
/* prikker + vlag samen, scheef gezet om het insteekpunt (midden van het bovenvlak van het blokje) */
.kp-steek { position: absolute; left: 50%; bottom: 76%; width: 0; height: 0; z-index: 1; transform: rotate(var(--r, 0deg)); transform-origin: 0 100%; }
/* satéstokje in pixelstijl: donkere randen, licht en schaduw; onderaan een donker randje = het gaatje in de kaas */
.kp-prikker { position: absolute; left: -.3cqw; bottom: -.2cqw; width: .6cqw; height: var(--h, 12cqw);
  background: linear-gradient(90deg, #2b1d14 0 22%, #e9d3a6 22% 50%, #c7a36a 50% 78%, #2b1d14 78%);
  box-shadow: 0 .15cqw 0 .1cqw rgba(90, 60, 10, .55); }
/* vlaggetje = pixel-art van tools/kaas.py (70x46: omlijning, licht, plooien; vrijgespeeld = de hele thumbnail, gerekt) */
.kp-vlag { position: absolute; left: .3cqw; bottom: calc(var(--h, 12cqw) - 6.9cqw); width: 10.2cqw; aspect-ratio: 70 / 46; padding: 0; border: 0; background: none;
  cursor: var(--wijs, pointer); transform-origin: 0 50%; animation: kp-wapper 2.6s var(--w) ease-in-out infinite, kp-in .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.kp-doek { position: absolute; inset: 0; background: center / 100% 100% no-repeat; image-rendering: pixelated; filter: drop-shadow(0 .4cqw .3cqw rgba(40, 20, 5, .35)); }
.kp-vlag:hover, .kp-vlag:focus-visible { animation-play-state: paused; outline: none; }
/* op slot: een gewone Nederlandse vlag die stilstaat */
.kp-vlag.dicht { cursor: var(--pijl, default); animation: none; }
/* er valt iets te kiezen: de Nederlandse vlaggetjes wiebelen en gloeien een beetje, klik = omdraaien */
.kp-vlag.dicht.kiesbaar { cursor: var(--wijs, pointer); animation: kp-kies 1.6s var(--w) ease-in-out infinite; }
.kp-vlag.dicht.kiesbaar .kp-doek { filter: drop-shadow(0 0 .5cqw rgba(255, 220, 120, .9)); }
.kp-vlag.dicht.kiesbaar:hover { animation-play-state: paused; transform: scale(1.12); }
.kp-vlag.draait { animation: kp-draai .45s ease-in forwards !important; }
@keyframes kp-kies { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-2deg); } }
@keyframes kp-draai { to { transform: scaleX(0); } }
.kp-keus { margin: 6px 0 0; padding: 6px 12px; border-radius: 10px; display: inline-block; font-weight: 700;
  background: rgba(var(--gold-rgb), .14); border: 1px solid rgba(var(--gold-rgb), .5); animation: kp-in .5s both; }
.kp-vlag.dicht .kp-doek { background-image: url("../assets/kaas/vlag-nl.png"); }
button.kp-vlag:hover .kp-doek, button.kp-vlag:focus-visible .kp-doek { filter: drop-shadow(0 0 .5cqw var(--gold)) drop-shadow(0 0 1.2cqw rgba(var(--gold-rgb), .7)); }
@keyframes kp-wapper { 0%, 100% { transform: skewY(0) scaleX(1); } 30% { transform: skewY(-4deg) scaleX(.96); } 65% { transform: skewY(3deg) scaleX(.98); } }
@keyframes kp-in { from { opacity: 0; translate: 0 2cqw; } }
@media (max-width: 560px) { .kp-blok { width: calc(7.5cqw * var(--k, 1)); } .kp-vlag { width: 12cqw; bottom: calc(var(--h, 12cqw) - 8.1cqw); } .kp-prikker { width: .8cqw; left: -.4cqw; } }

/* ---------- Ontgrendeld (profiel, js/unlocks.js): alle unlocks in uitklapbare blokken ---------- */
.unl-blokken { display: flex; flex-direction: column; gap: 10px; }
.unl { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .03); }
.unl > summary { display: grid; grid-template-columns: auto 1fr auto 120px; align-items: center; gap: 12px; padding: 12px 16px; cursor: var(--wijs, pointer); list-style: none; }
.unl > summary::-webkit-details-marker { display: none; }
.unl > summary::after { content: "▸"; grid-column: 5; color: var(--faint); transition: transform .2s; }
.unl[open] > summary::after { transform: rotate(90deg); }
.unl > summary:hover { background: rgba(255, 255, 255, .04); border-radius: 14px; }
.unl-ico { font-size: 1.3rem; }
.unl-tel { font-weight: 800; color: var(--gold); font-size: .9rem; }
.unl-balk { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.unl-balk i { display: block; height: 100%; background: var(--gold); }
.unl-body { padding: 0 16px 16px; }
.unl-lijst { display: flex; flex-direction: column; gap: 4px; }
.unl-regel { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 9px; color: var(--text); text-decoration: none;
  background: rgba(255, 255, 255, .03); border: 0; font: inherit; text-align: left; cursor: var(--wijs, pointer); }
.unl-regel:hover { background: rgba(255, 255, 255, .08); }
.unl-regel.dicht { color: var(--faint); }
.unl-regel.actief { box-shadow: inset 0 0 0 1px var(--gold); }
.unl-r { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.unl-npcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.unl-npc { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); cursor: var(--wijs, pointer); color: var(--text); }
.unl-npc img { width: 64px; height: 64px; image-rendering: pixelated; }
.unl-npc.dicht img { filter: grayscale(1) brightness(.6); }
@media (max-width: 560px) { .unl > summary { grid-template-columns: auto 1fr auto; } .unl-balk { display: none; } .unl > summary::after { grid-column: 4; } .unl-regel { flex-direction: column; gap: 0; } }

/* Spelersnamen altijd in het gewone lettertype, met de hoofd-/kleine letters zoals de speler ze koos (wens gebruiker
   2026-09-30): Cinzel heeft alleen hoofdletters, en dan leek elke naam in ALL CAPS. */
.spelernaam { font-family: var(--font) !important; text-transform: none !important; letter-spacing: normal !important; font-variant: normal !important; }

/* Held-editor: klein winkelhoekje onderin het paneel (heldnieuw.js winkelStrook): munt + wisselende aanbieding */
.hc .winkelhoek { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: -4px; min-height: 34px; }
.hc .wh-munt { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .3);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(var(--gold-rgb), .5); transition: transform .15s, box-shadow .2s; }
.hc .wh-munt .munt { width: 20px; height: 20px; }
.hc .wh-munt:hover { transform: translateY(-2px) rotate(-12deg); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 14px rgba(var(--gold-rgb), .5); }
.hc .wh-deal { display: flex; align-items: center; gap: 6px; max-width: 220px; text-decoration: none; color: inherit; opacity: .8; transition: opacity .2s; }
.hc .wh-deal:hover { opacity: 1; }
.hc .wh-deal.in { animation: wh-in .5s ease-out; }
@keyframes wh-in { from { opacity: 0; transform: translateY(4px); } }
.hc .wh-beeld { width: 28px; height: 28px; display: grid; place-items: center; flex: none; }
.hc .wh-beeld canvas { max-width: 28px; max-height: 28px; image-rendering: pixelated; }
.hc .wh-deal span { display: grid; line-height: 1.15; min-width: 0; }
.hc .wh-deal small { font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.hc .wh-deal b { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Winkel: klein linkje terug naar de held-editor onderin het heldpaneel (tegenhanger van het winkelhoekje in de editor) */
.hc .w-naareditor { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 2px; font-size: .78rem; font-weight: 800;
  color: var(--muted); text-decoration: none; opacity: .85; transition: opacity .2s, color .2s; }
.hc .w-naareditor:hover { opacity: 1; color: var(--gold); }
.hc .w-naareditor .wn-portret { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .3); image-rendering: pixelated;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(var(--gold-rgb), .5); transition: transform .15s; }
.hc .w-naareditor:hover .wn-portret { transform: translateY(-2px) rotate(-8deg); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 12px rgba(var(--gold-rgb), .5); }

.hc .w-paskoop { display: flex; justify-content: center; margin-top: 10px; }
.hc .w-koop.groot { width: 100%; padding: 9px 12px; font-size: .95rem; }

/* Landing: eindbaaskaart met de arena groot bovenaan (was veel loze ruimte naast een kleine arena) en een grotere held */
.land-baas { grid-template-columns: 1fr; align-items: start; }
.land-baas .la-held { height: 150%; bottom: -44%; left: -22%; }
/* Landing: kaart 'Je eigen profiel' met een demo-prikbord (js/landing.js profielDemo; briefjes uit css/profiel.css) */
.land-profiel { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 22px; align-items: center; }
.land-profiel .lp-txt { display: flex; flex-direction: column; gap: 8px; }
.land-profiel .lp-groeten { margin-top: 4px; }
.lp-bord { padding: 16px 12px; border-radius: 14px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35), inset 0 0 30px rgba(0, 0, 0, .45);
  background: radial-gradient(circle at 20% 30%, #b88a55 0 1px, transparent 2px) 0 0 / 9px 11px, radial-gradient(circle at 70% 60%, #8a5f33 0 1px, transparent 2px) 0 0 / 13px 7px, #a7773f; }
.lp-bord .pm-briefjes { grid-template-columns: repeat(3, 1fr); }
.lp-bord .pm-briefje p { min-height: 4.1em; }
.lp-nieuw { animation: lp-nieuw .6s ease-out; }
@keyframes lp-nieuw { from { transform: rotate(var(--r)) translateY(-10px) scale(1.06); opacity: .3; } }
@media (max-width: 900px) { .land-profiel { grid-template-columns: 1fr; } .lp-bord .pm-briefjes { grid-template-columns: 1fr; } }
/* heldkaart naast de (hogere) eindbaaskaart: tempelbeeld groeit mee i.p.v. lege ruimte onderin */
.land-grid > .land-card:has(.land-podium) .land-podium { flex: 1; min-height: 0; display: flex; }
.land-grid > .land-card:has(.land-podium) .land-podium canvas { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }

/* ---------- Formulevragen (wiskunde, js/formulewerk.js): werkblad met MathLive + stappenlijst. Examenspeler: rustig, geen ornament ---------- */
math-field {
  font-size: 20px; color: var(--text); background: transparent; border: 0;
  --caret-color: var(--gold); --selection-background-color: rgba(var(--gold-rgb), .3);
  --contains-highlight-background-color: rgba(var(--gold-rgb), .08);
  --smart-fence-color: var(--muted); --placeholder-color: var(--muted);
}
math-field::part(menu-toggle) { display: none; }
math-field.fx { font-size: 1.05em; display: inline-block; vertical-align: middle; padding: 0; min-width: 0; }
math-field.fx::part(virtual-keyboard-toggle) { display: none; }
.fw { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(var(--bg-rgb), .35); border: 1px solid var(--line); }
.fw-kop { font-weight: 900; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); margin: 4px 0 8px; }
.fw-kop:not(:first-child) { margin-top: 16px; }
.fw-regels { list-style: none; margin: 0 0 8px; padding: 0; }
.fw-regel { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.fw-regel math-field, .fw-antw math-field { width: 100%; padding: 6px 8px; border-radius: 10px; }
.fw-regel math-field:focus-within, .fw-antw math-field:focus-within { background: rgba(var(--gold-rgb), .06); outline: 1px solid rgba(var(--gold-rgb), .35); }
.fw-lees { color: var(--muted); font-size: .88rem; white-space: nowrap; }
.fw-nee { color: var(--bad); }
.fw-weg { font: inherit; font-size: 1.2rem; line-height: 1; width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--muted); cursor: var(--wijs, pointer); }
.fw-weg:hover, .fw-weg:focus-visible { color: var(--text); border-color: var(--line-strong); }
.fw-antw { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 2px 10px 2px 2px; }
.fw-eenheid { color: var(--muted); font-weight: 700; order: 2; }
/* wiskunde B: antwoordsoort, vakje per parameter (a, b, c, d), conclusie-knoppen (pt-btn) */
.fw-soort { text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--muted); }
.fw-params { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.fw-param { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 2px 4px 2px 12px; font-weight: 700; }
.fw-param i { font-family: "Times New Roman", serif; font-size: 1.15em; }
.fw-param math-field { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 10px; }
.fw-param math-field:focus-within { background: rgba(var(--gold-rgb), .06); outline: 1px solid rgba(var(--gold-rgb), .35); }
.fw-keuze { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fw-keuze span { margin-right: 6px; }
.fw-tip { margin-top: 10px; font-size: .8rem; color: var(--muted); }
.fw-tip kbd { font: inherit; font-weight: 800; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--text); }
.fw-nakijk { margin-top: 12px; }
.fw-melding { padding: 10px 12px; border-radius: 10px; background: rgba(var(--gold-rgb), .08); border: 1px solid rgba(var(--gold-rgb), .3); }
.fw-stappen { list-style: none; margin: 0; padding: 0; }
.fw-stappen li { border-bottom: 1px solid var(--line); }
.fw-stappen label { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 0; cursor: var(--wijs, pointer); }
.fw-stappen input { width: 20px; height: 20px; accent-color: var(--ok); }
.fw-pt { font-weight: 900; color: var(--muted); }
.fw-tag { grid-column: 2 / 4; font-size: .78rem; font-weight: 800; color: var(--muted); }
.fw-tag.ja { color: var(--ok); }
.fx-formule { display: flex; align-items: center; gap: 14px; padding-left: 24px; }
.fx-formule span { color: var(--muted); font-size: .9rem; }
@media (max-width: 520px) { .fx-formule { padding-left: 0; flex-wrap: wrap; } .fw-lees { display: none; } }

/* ---------- Tekenvragen (js/tekenen.js): tekenen op de uitwerkbijlage. Het vel is altijd wit papier, dus inkt en model
   hebben een eigen vaste kleur (component-tokens), de balk volgt het thema ---------- */
.tk { --tk-inkt: #1f5fd6; --tk-model: #0f9d58; margin: 14px 0 0; }
.tk-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.tk-knop { font: inherit; font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--text); cursor: var(--wijs, pointer); }
.tk-knop:hover, .tk-knop:focus-visible { border-color: rgba(var(--gold-rgb), .6); }
.tk-knop[aria-pressed="true"] { background: rgba(var(--gold-rgb), .18); border-color: var(--gold); }
.tk-door { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; }
.tk-rechts { margin-left: auto; display: inline-flex; gap: 6px; }
.tk-vel { position: relative; background: #fff; border-radius: 12px; overflow: hidden; line-height: 0; }
.tk-vel img { width: 100%; height: auto; display: block; }
.tk-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tk-actief .tk-svg { pointer-events: auto; touch-action: none; cursor: crosshair; }
.tk[data-tool="gum"] .tk-svg { cursor: var(--wijs, pointer); }
.tk-svg line, .tk-svg polyline { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.tk-svg .tk-streep { stroke: var(--tk-inkt); stroke-width: 2.5; pointer-events: none; }
.tk-svg .tk-raak { stroke: transparent; stroke-width: 18; pointer-events: stroke; }
.tk-svg .tk-punt { fill: var(--tk-inkt); }
.tk-svg .tk-bezig .tk-streep { stroke-opacity: .7; }
.tk-svg .tk-model .tk-streep { stroke: var(--tk-model); stroke-width: 3; stroke-dasharray: 10 6; }
.tk-svg .tk-model .tk-raak { pointer-events: none; }
.tk-svg .tk-model .tk-punt { fill: var(--tk-model); }
.tk-uitleg { margin-top: 6px; font-size: .8rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 520px) { .tk-knop span { display: none; } }
/* Tekenwerk natuurkunde (js/tekenen.js extra gereedschap + js/tekenwerk.js, docs/natuurkunde.md): op het vel vaste inkt/model-kleur. */
.tk-svg .tk-kop { fill: var(--tk-inkt); }
.tk-svg .tk-model .tk-kop { fill: var(--tk-model); }
.tk-svg .tk-letter { fill: var(--tk-inkt); font-family: var(--font, sans-serif); font-weight: 800; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.tk-svg .tk-model .tk-letter { fill: var(--tk-model); }
.tk-svg .tk-raakvlak { fill: transparent; pointer-events: all; }
.tk-svg .tk-model .tk-raakvlak { pointer-events: none; }
.tk-svg .tk-vlak { fill: var(--tk-inkt); fill-opacity: .14; pointer-events: all; }
.tk-svg .tk-model .tk-vlak { fill: var(--tk-model); pointer-events: none; }
.tk-svg .tk-greep { fill: #fff; stroke: var(--tk-inkt); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.tk-svg .tk-klem { fill: #fff; stroke: var(--tk-inkt); stroke-width: 2; vector-effect: non-scaling-stroke; }
.tk-svg .tk-klem.tk-gekozen { fill: var(--tk-inkt); }
.tk-svg .tk-maat { fill: var(--tk-inkt); font-family: var(--font, sans-serif); font-weight: 800; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4px; pointer-events: none; }
.tk-letters { display: inline-flex; gap: 4px; }
.tk-letters .tk-l { min-width: 2.2em; justify-content: center; }
.tk-dicht .tk-balk [data-tool], .tk-dicht .tk-letters, .tk-dicht .tk-door { opacity: .45; }
.tw .tk-vel { width: fit-content; max-width: 100%; margin-inline: auto; }   /* hoge figuur (schip) past dan in beeld: van D tot B in één sleep */
.tw .tk-vel img { width: auto; max-width: 100%; max-height: 72vh; }
.tw-taken { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.tw-taken li { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); }
.tw-taken li.right { border-color: var(--ok); background: rgba(79, 209, 139, .12); }
.tw-taken li.wrong { border-color: var(--bad); background: rgba(255, 107, 122, .1); }
.tw-vink { display: inline-block; width: 1.2em; font-weight: 900; }
.tw-taken .right .tw-vink { color: var(--ok); }
.tw-taken .wrong .tw-vink { color: var(--bad); }
.tw-melding:empty { display: none; }
.tw-melding { margin: 2px 0 0 1.2em; color: var(--muted); }
/* Omcirkelen/aankruisen: keuzes als op de uitwerkbijlage, de gekozen keuze krijgt een ring. */
.oc { margin: 6px 0 4px; }
.oc-rol { overflow-x: auto; }
.oc-tabel { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.oc-tabel th, .oc-tabel td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; line-height: 1.45; }
.oc-tabel tr:last-child > * { border-bottom: 0; }
.oc-tabel th { font-weight: 800; background: var(--panel); }
.oc-tabel td { background: var(--panel-2); }
.oc-tabel td:first-child { width: 45%; }
.oc-tabel th.oc-kol, .oc-tabel td.oc-vak { text-align: center; width: 6.5em; }
.oc-zin { line-height: 2.1; margin: 4px 0; }
.oc-plek { white-space: normal; }
.oc-schuin { color: var(--muted); margin: 0 1px; }
.oc-keuze { font: inherit; font-weight: 800; color: var(--text); background: none; border: 2px solid transparent; border-radius: 999px; padding: 1px 8px; cursor: var(--wijs, pointer); min-height: 34px; }
.oc-keuze:hover:not(:disabled), .oc-keuze:focus-visible { border-color: var(--line-strong); }
.oc-keuze[aria-checked="true"] { border-color: var(--accent); background: rgba(var(--gold-rgb), .1); }
.oc-kruis { width: 34px; height: 34px; border-radius: 8px; border: 2px solid var(--line-strong); background: rgba(0, 0, 0, .18); cursor: var(--wijs, pointer); font: inherit; font-weight: 900; font-size: 1.15rem; color: var(--text); }
.oc-kruis[aria-checked="true"]::after { content: "✕"; }
.oc-kruis[aria-checked="true"] { border-color: var(--accent); }
.oc button:disabled { cursor: var(--pijl, default); }
.oc .right[aria-checked="true"] { border-color: var(--ok); background: rgba(79, 209, 139, .14); }
.oc .wrong[aria-checked="true"] { border-color: var(--bad); background: rgba(255, 107, 122, .12); }
.oc .oc-model:not(.right) { outline: 2px dashed var(--ok); outline-offset: 1px; }
@media (max-width: 560px) { .oc-tabel th, .oc-tabel td { padding: 6px 7px; } .oc-tabel td:first-child { width: auto; } }
/* Tabellenboek natuurkunde (js/tabellen.js): rustig, alleen tokens; de rijen van de vraag staan bovenaan in een getint blok. */
.tb-titel { margin: 0; font-family: var(--display-rustig, var(--display)); }
.tb-hier { margin: 10px 0 12px; padding: 8px 10px; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .08); }
.tb-kop { font-weight: 800; margin: 2px 0 4px; }
.tb-zoek { font: inherit; font-size: 16px; width: 100%; padding: 8px 12px; margin: 4px 0 10px; color: var(--text); background: rgba(0, 0, 0, .22); border: 1px solid var(--line-strong); border-radius: 10px; }
.tb-zoek:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .35); }
.tb-boek { display: grid; gap: 10px; }
.tb-tabel { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tb-tabel td { padding: 5px 8px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.tb-tabel tr:last-child td { border-bottom: 0; }
.tb-waarde { white-space: nowrap; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.tb-eenheid { white-space: nowrap; color: var(--muted); }
.tb-bron { margin-top: 10px; }
.tb-sd { font-size: .78rem; font-weight: 600; color: var(--muted); }

/* ---------- De Fractaltuin (verzameling wiskunde A, js/fractaltuin.js): sneeuwbollen op een bergplateau. De tuin is decor
   (eigen schemerkleuren, zoals een arena); knoppen, labels en venster via thema-tokens ---------- */
.ft-balk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 12px; }
.ft-balk .ft-paletten { margin: 0; }
.ft-tuin { position: relative; aspect-ratio: 16 / 8; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.ft-lucht, .ft-laag { position: absolute; inset: 0; width: 100%; height: 100%; }
.ft-laag { z-index: 1; pointer-events: none; }
.ft-geengl { position: absolute; left: 12px; bottom: 8px; z-index: 3; color: var(--muted); font-size: .8rem; }

/* sneeuwbol op sokkel; de shader tekent in de laag eronder, de bol (glas) ligt erbovenop */
.ft-plek { position: absolute; z-index: 2; transform: translate(-50%, -100%); padding: 0; border: 0; background: none; cursor: var(--wijs, pointer);
  display: flex; flex-direction: column; align-items: center; color: var(--text); font: inherit; }
.ft-bol { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(220, 235, 255, .35), inset 0 -10px 24px rgba(160, 200, 255, .18), 0 0 22px rgba(150, 190, 255, .18);
  transition: transform .3s ease, box-shadow .3s ease; }
.ft-bol::after { content: ""; position: absolute; left: 16%; top: 10%; width: 34%; height: 22%; border-radius: 50%; transform: rotate(-25deg);
  background: radial-gradient(ellipse, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%); pointer-events: none; }
.ft-bol canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ft-plek:hover .ft-bol, .ft-plek:focus-visible .ft-bol { transform: translateY(-4px) scale(1.04); box-shadow: inset 0 0 0 1px rgba(220, 235, 255, .55), 0 0 30px rgba(var(--gold-rgb), .35); }
.ft-plek:focus-visible { outline: none; }
.ft-plek:focus-visible .ft-naam { border-color: var(--gold); }
.ft-sokkel { width: 70%; height: 10%; margin-top: -3%; border-radius: 50%; background: radial-gradient(ellipse at 50% 35%, #8a86a8, #4a4668 60%, #2a2742); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.ft-naam { margin-top: 4px; font-size: clamp(.55rem, 1.05vw, .8rem); font-weight: 800; white-space: nowrap; padding: 1px 8px; border-radius: 999px;
  background: rgba(var(--bg-rgb), .72); border: 1px solid var(--line); }
/* bevroren: berijpt glas over wat erachter beweegt */
.ft-plek.dicht { cursor: var(--pijl, default); }
.ft-plek.dicht .ft-bol { backdrop-filter: blur(3px) saturate(.4); -webkit-backdrop-filter: blur(3px) saturate(.4); background: rgba(210, 225, 255, .18); }
.ft-plek.dicht .ft-naam { color: var(--muted); }
.ft-bol canvas.grijs { filter: grayscale(1) brightness(.7); opacity: .6; }
.ft-plek.nieuw .ft-bol { box-shadow: inset 0 0 0 2px var(--gold), 0 0 40px rgba(var(--gold-rgb), .8); }
.ft-plek.nieuw .ft-naam { border-color: var(--gold); color: var(--gold); }

.ft-detail { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.ft-vel { background: #0b0a18; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }
.ft-groot { display: block; width: 100%; aspect-ratio: 1; touch-action: none; cursor: grab; }
.ft-groot:active { cursor: grabbing; }
.ft-schuif { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; font-weight: 800; }
.ft-schuif input { flex: 1; accent-color: var(--gold); }
.ft-teller { font-weight: 800; color: var(--gold); min-height: 3em; }
@media (max-width: 700px) {
  .ft-detail { grid-template-columns: 1fr; }
  .ft-tuin { aspect-ratio: 4 / 3; }
}

/* kleurpaletten (boven de tuin en in het venster) */
.ft-palkop { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ft-info .ft-palkop { margin-top: 10px; }
.ft-paletten { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.ft-palet { width: 34px; height: 22px; border-radius: 999px; border: 2px solid var(--line-strong); cursor: var(--wijs, pointer); padding: 0; }
.ft-palet:hover, .ft-palet:focus-visible { border-color: rgba(var(--gold-rgb), .7); }
.ft-palet[aria-pressed="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb), .35); }

/* Beschermde media (kunst, api/media.php; js/beschermd.js): niet selecteren, slepen of via lang indrukken opslaan (iOS). */
.beschermd { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }

/* Landing (2026-10-02): Badges en Echt examenwerk onder elkaar, De rijken twee kolommen breed met de rijken in twee rijtjes.
   Eerder werden die twee kaarten even hoog getrokken als de rijkenkaart, met ~450 px lege ruimte. */
.land-stapel { display: flex; flex-direction: column; gap: 16px; }
.land-stapel > .land-card { flex: 1; }
.land-rijken { grid-column: span 2; }
.land-rijken .land-rijk-lijst { flex: 1; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; }
.land-rijken .land-rijk:last-child:nth-child(odd) { grid-column: span 2; }
@media (max-width: 900px) {
  .land-stapel { grid-column: 1 / -1; flex-direction: row; }
  .land-rijken { grid-column: 1 / -1; }
  .land-baas + .land-card { grid-column: 1 / -1; }   /* anders staat hij alleen naast een gat (stapel is hier vol breed) */
  .land-niveau { grid-column: auto; }
}
@media (max-width: 640px) {
  .land-stapel { flex-direction: column; }
  .land-rijken .land-rijk-lijst { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .land-rijken .land-rijk:last-child:nth-child(odd) { grid-column: auto; }
}
/* Feedback naar de ontwikkelaar (js/feedback.js, docs/feedback.md): rustige link in de voettekst, formulier, inbox in Beheer. Alles via tokens. */
.link-knop { font: inherit; background: none; border: 0; padding: 0; color: var(--muted); cursor: var(--wijs, pointer); text-decoration: underline; text-underline-offset: 3px; }
.link-knop:hover, .link-knop:focus-visible { color: var(--text); }
.topnav a { position: relative; }
.nav-teller { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); font-size: .72rem; font-weight: 900; line-height: 1; box-shadow: 0 0 0 2px var(--bg); }
.fb-soorten { margin: 14px 0 10px; }
.fb-tekst-in { width: 100%; }
.fb-regel { display: flex; justify-content: space-between; gap: 12px; margin-top: 4px; }
.fb-privacy { margin: 10px 0 4px; }
.fb-item { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.fb-item.nieuw { border-color: rgba(var(--gold-rgb), .55); }
.fb-item.afgehandeld { opacity: .65; }
.fb-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.fb-status { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.fb-item.nieuw .fb-status { color: var(--gold); }
.fb-meta { margin-left: auto; }
.fb-meta code { font-family: ui-monospace, Consolas, monospace; font-size: .78rem; }
.fb-tekst { white-space: pre-wrap; overflow-wrap: anywhere; margin: 10px 0; }
.fb-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.fb-acties .btn.active { border-color: var(--gold); color: var(--gold); }
/* Feedback-draadje: speler links, ontwikkelaar rechts in goud; "ik" = de lezer. */
.fb-tabs { margin: 4px 0 12px; overflow: visible; }
.fb-tabs button { flex: 1; }
.fb-draad { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
/* 💬 Mijn feedback in het profiel (hotfix 2026-10-15), zelfde vorm als 📚 Mijn aangeleverde boeken (boeken.css) */
.fb-profiel-lijst { display: flex; flex-direction: column; gap: 8px; }
.fb-profiel-rij { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 14px; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); color: var(--text); font: inherit; cursor: var(--wijs, pointer); }
.fb-profiel-rij:hover, .fb-profiel-rij.nieuw { border-color: rgba(var(--gold-rgb), .55); }
.fb-profiel-titel { display: flex; flex-direction: column; min-width: 0; }
.fb-profiel-titel small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-nieuw { color: var(--on-gold); background: var(--gold); border-radius: 999px; padding: 0 7px; font-size: .72rem; }
@media (max-width: 560px) { .fb-profiel-rij { grid-template-columns: 1fr auto; } }
.fb-draadje { display: grid; gap: 8px; margin: 0 0 10px; }
.fb-draad .fb-bericht + .fb-bericht, .fb-draad .fb-kop + .fb-bericht { margin-top: 8px; }
.fb-bericht { max-width: 88%; padding: 8px 12px; border-radius: 12px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); }
.fb-bericht .fb-tekst { margin: 2px 0 0; }
.fb-bericht.dev { margin-left: auto; border-color: rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .08); }
.fb-bericht.dev .fb-van { color: var(--gold); }
.fb-van { font-weight: 800; color: var(--muted); }
.fb-reageer { display: grid; gap: 6px; margin-top: 10px; }
.fb-reageer textarea { min-height: 64px; }
/* Feedback-bijlagen (2026-10-14): sleepvak (keuze gebruiker: vorm B) met voorbeeldjes en ✕; in de inbox met ⬇. */
.fb-bijl { display: grid; gap: 6px; margin-top: 10px; }
.fb-bijl-vak { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; text-align: center;
  border: 2px dashed rgba(var(--gold-rgb), .5); background: rgba(var(--gold-rgb), .06); cursor: var(--wijs, pointer); transition: background .15s, border-color .15s; }
.fb-bijl-vak:hover, .fb-bijl-vak:focus-within, .fb-bijl.sleep .fb-bijl-vak { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); }
.fb-bijl-tekst b { color: var(--gold-hi, var(--gold)); }
.fb-bijl-vol { display: none; }
.fb-bijl-vak.vol { cursor: default; }
.fb-bijl-vak.vol .fb-bijl-tekst { display: none; }
.fb-bijl-vak.vol .fb-bijl-vol { display: block; }
.fb-bijl-vak .fb-bijl-duimen { justify-content: center; }
.fb-reageer .fb-bijl-vak { padding: 8px; }
.fb-bijl-fout:empty { display: none; }
.fb-bijl-duimen { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-bijl-duimen:empty { display: none; }
.fb-bijl-duim { position: relative; display: grid; place-items: center; width: 96px; height: 68px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--panel-solid); color: var(--muted); text-align: center; font-size: .75rem; }
.fb-bijl-duim img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fb-bijl-duim > a:first-child { display: grid; place-items: center; width: 100%; height: 100%; color: inherit; }
.fb-bijl-duim.beheer { width: 132px; height: 92px; }
.fb-bijl-weg, .fb-bijl-dl { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: rgba(var(--bg-rgb), .8); color: var(--text); font-size: .8rem; line-height: 1; text-decoration: none; cursor: var(--wijs, pointer); }
.fb-bijl-weg:hover, .fb-bijl-dl:hover, .fb-bijl-dl:focus-visible { border-color: var(--gold); color: var(--gold); }
.fb-bericht .fb-bijl-duimen, .fb-item > .fb-bijl-duimen { margin: 6px 0 10px; }
.fb-bijl-telling { margin-top: 4px; }

/* CURSORS:BEGIN — gegenereerd door tools/cursors.py, niet met de hand bewerken (docs/site.md "Cursors") */
:root[data-cursor] {
  --c-pijl-goud: url(../assets/cursor/pijl-goud.png?v=2) 1 1, auto;
  --c-pijl-nacht: url(../assets/cursor/pijl-nacht.png?v=2) 1 1, auto;
  --c-pijl-perkament: url(../assets/cursor/pijl-perkament.png?v=2) 1 1, auto;
  --c-pijl-ruit: url(../assets/cursor/pijl-ruit.png?v=2) 1 1, auto;
  --c-wijs-handschoen: url(../assets/cursor/wijs-handschoen.png?v=2) 7 1, pointer;
  --c-wijs-goud: url(../assets/cursor/wijs-goud.png?v=2) 7 1, pointer;
  --c-wijs-leer: url(../assets/cursor/wijs-leer.png?v=2) 7 1, pointer;
  --c-wijs-fonkel: url(../assets/cursor/wijs-fonkel.png?v=2) 1 1, pointer;
  --c-gv-zwaard: url(../assets/cursor/gv-zwaard.png?v=2) 1 1, auto;
  --c-gv-zwaard-wijs: url(../assets/cursor/gv-zwaard-wijs.png?v=2) 1 1, pointer;
  --c-gv-vuurzwaard: url(../assets/cursor/gv-vuurzwaard.png?v=2) 1 1, auto;
  --c-gv-vuurzwaard-wijs: url(../assets/cursor/gv-vuurzwaard-wijs.png?v=2) 1 1, pointer;
  --c-gv-handschoen: url(../assets/cursor/gv-handschoen.png?v=2) 7 1, pointer;
  --c-gv-vizier: url(../assets/cursor/gv-vizier.png?v=2) 15 15, crosshair;
  --c-gv-vizier-goud: url(../assets/cursor/gv-vizier-goud.png?v=2) 15 15, crosshair;
  --c-r-kompas: url(../assets/cursor/r-kompas.png?v=2) 1 1, auto;
  --c-r-kompas-wijs: url(../assets/cursor/r-kompas-wijs.png?v=2) 7 1, pointer;
  --c-r-blad: url(../assets/cursor/r-blad.png?v=2) 1 1, auto;
  --c-r-blad-wijs: url(../assets/cursor/r-blad-wijs.png?v=2) 7 1, pointer;
  --c-r-toverstok: url(../assets/cursor/r-toverstok.png?v=2) 1 1, auto;
  --c-r-toverstok-wijs: url(../assets/cursor/r-toverstok-wijs.png?v=2) 7 1, pointer;
  --c-r-vergrootglas: url(../assets/cursor/r-vergrootglas.png?v=2) 8 8, auto;
  --c-r-vergrootglas-wijs: url(../assets/cursor/r-vergrootglas-wijs.png?v=2) 7 1, pointer;
  --c-r-veer: url(../assets/cursor/r-veer.png?v=2) 1 1, auto;
  --c-r-veer-wijs: url(../assets/cursor/r-veer-wijs.png?v=2) 7 1, pointer;
  --c-r-passer: url(../assets/cursor/r-passer.png?v=2) 1 1, auto;
  --c-r-passer-wijs: url(../assets/cursor/r-passer-wijs.png?v=2) 7 1, pointer;
  --c-r-penseel: url(../assets/cursor/r-penseel.png?v=2) 1 1, auto;
  --c-r-penseel-wijs: url(../assets/cursor/r-penseel-wijs.png?v=2) 7 1, pointer;
  --c-r-stemvork: url(../assets/cursor/r-stemvork.png?v=2) 6 1, auto;
  --c-r-stemvork-wijs: url(../assets/cursor/r-stemvork-wijs.png?v=2) 7 1, pointer;
  --c-r-zandloper: url(../assets/cursor/r-zandloper.png?v=2) 1 1, auto;
  --c-r-zandloper-wijs: url(../assets/cursor/r-zandloper-wijs.png?v=2) 7 1, pointer;
  --c-r-bliksem: url(../assets/cursor/r-bliksem.png?v=2) 1 1, auto;
  --c-r-bliksem-wijs: url(../assets/cursor/r-bliksem-wijs.png?v=2) 7 1, pointer;
  --c-r-munt: url(../assets/cursor/r-munt.png?v=2) 9 9, auto;
  --c-r-munt-wijs: url(../assets/cursor/r-munt-wijs.png?v=2) 7 1, pointer;
  --c-r-sleutel: url(../assets/cursor/r-sleutel.png?v=2) 1 1, auto;
  --c-r-sleutel-wijs: url(../assets/cursor/r-sleutel-wijs.png?v=2) 7 1, pointer;
  --c-r-degen: url(../assets/cursor/r-degen.png?v=2) 1 1, auto;
  --c-r-degen-wijs: url(../assets/cursor/r-degen-wijs.png?v=2) 7 1, pointer;
  --c-r-geodriehoek: url(../assets/cursor/r-geodriehoek.png?v=2) 1 1, auto;
  --c-r-geodriehoek-wijs: url(../assets/cursor/r-geodriehoek-wijs.png?v=2) 7 1, pointer;
  --c-r-fakkel: url(../assets/cursor/r-fakkel.png?v=2) 1 1, auto;
  --c-r-fakkel-wijs: url(../assets/cursor/r-fakkel-wijs.png?v=2) 7 1, pointer;
  --c-r-vlam: url(../assets/cursor/r-vlam.png?v=2) 1 1, auto;
  --c-r-vlam-wijs: url(../assets/cursor/r-vlam-wijs.png?v=2) 7 1, pointer;
  --c-r-kristal: url(../assets/cursor/r-kristal.png?v=2) 1 1, auto;
  --c-r-kristal-wijs: url(../assets/cursor/r-kristal-wijs.png?v=2) 7 1, pointer;
  --c-r-ster: url(../assets/cursor/r-ster.png?v=2) 2 2, auto;
  --c-r-ster-wijs: url(../assets/cursor/r-ster-wijs.png?v=2) 7 1, pointer;
  --c-r-komeet: url(../assets/cursor/r-komeet.png?v=2) 4 4, auto;
  --c-r-komeet-wijs: url(../assets/cursor/r-komeet-wijs.png?v=2) 7 1, pointer;
  --c-r-klauw: url(../assets/cursor/r-klauw.png?v=2) 1 1, auto;
  --c-r-klauw-wijs: url(../assets/cursor/r-klauw-wijs.png?v=2) 7 1, pointer;
  --c-r-scepter: url(../assets/cursor/r-scepter.png?v=2) 1 1, auto;
  --c-r-scepter-wijs: url(../assets/cursor/r-scepter-wijs.png?v=2) 7 1, pointer;
}
@supports (cursor: image-set(url("../assets/cursor/pijl-goud.png") 1x) 1 1, auto) {
  :root[data-cursor] {
    --c-pijl-goud: image-set(url(../assets/cursor/pijl-goud.png?v=2) 1x, url(../assets/cursor/pijl-goud@2x.png?v=2) 2x) 1 1, auto;
    --c-pijl-nacht: image-set(url(../assets/cursor/pijl-nacht.png?v=2) 1x, url(../assets/cursor/pijl-nacht@2x.png?v=2) 2x) 1 1, auto;
    --c-pijl-perkament: image-set(url(../assets/cursor/pijl-perkament.png?v=2) 1x, url(../assets/cursor/pijl-perkament@2x.png?v=2) 2x) 1 1, auto;
    --c-pijl-ruit: image-set(url(../assets/cursor/pijl-ruit.png?v=2) 1x, url(../assets/cursor/pijl-ruit@2x.png?v=2) 2x) 1 1, auto;
    --c-wijs-handschoen: image-set(url(../assets/cursor/wijs-handschoen.png?v=2) 1x, url(../assets/cursor/wijs-handschoen@2x.png?v=2) 2x) 7 1, pointer;
    --c-wijs-goud: image-set(url(../assets/cursor/wijs-goud.png?v=2) 1x, url(../assets/cursor/wijs-goud@2x.png?v=2) 2x) 7 1, pointer;
    --c-wijs-leer: image-set(url(../assets/cursor/wijs-leer.png?v=2) 1x, url(../assets/cursor/wijs-leer@2x.png?v=2) 2x) 7 1, pointer;
    --c-wijs-fonkel: image-set(url(../assets/cursor/wijs-fonkel.png?v=2) 1x, url(../assets/cursor/wijs-fonkel@2x.png?v=2) 2x) 1 1, pointer;
    --c-gv-zwaard: image-set(url(../assets/cursor/gv-zwaard.png?v=2) 1x, url(../assets/cursor/gv-zwaard@2x.png?v=2) 2x) 1 1, auto;
    --c-gv-zwaard-wijs: image-set(url(../assets/cursor/gv-zwaard-wijs.png?v=2) 1x, url(../assets/cursor/gv-zwaard-wijs@2x.png?v=2) 2x) 1 1, pointer;
    --c-gv-vuurzwaard: image-set(url(../assets/cursor/gv-vuurzwaard.png?v=2) 1x, url(../assets/cursor/gv-vuurzwaard@2x.png?v=2) 2x) 1 1, auto;
    --c-gv-vuurzwaard-wijs: image-set(url(../assets/cursor/gv-vuurzwaard-wijs.png?v=2) 1x, url(../assets/cursor/gv-vuurzwaard-wijs@2x.png?v=2) 2x) 1 1, pointer;
    --c-gv-handschoen: image-set(url(../assets/cursor/gv-handschoen.png?v=2) 1x, url(../assets/cursor/gv-handschoen@2x.png?v=2) 2x) 7 1, pointer;
    --c-gv-vizier: image-set(url(../assets/cursor/gv-vizier.png?v=2) 1x, url(../assets/cursor/gv-vizier@2x.png?v=2) 2x) 15 15, crosshair;
    --c-gv-vizier-goud: image-set(url(../assets/cursor/gv-vizier-goud.png?v=2) 1x, url(../assets/cursor/gv-vizier-goud@2x.png?v=2) 2x) 15 15, crosshair;
    --c-r-kompas: image-set(url(../assets/cursor/r-kompas.png?v=2) 1x, url(../assets/cursor/r-kompas@2x.png?v=2) 2x) 1 1, auto;
    --c-r-kompas-wijs: image-set(url(../assets/cursor/r-kompas-wijs.png?v=2) 1x, url(../assets/cursor/r-kompas-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-blad: image-set(url(../assets/cursor/r-blad.png?v=2) 1x, url(../assets/cursor/r-blad@2x.png?v=2) 2x) 1 1, auto;
    --c-r-blad-wijs: image-set(url(../assets/cursor/r-blad-wijs.png?v=2) 1x, url(../assets/cursor/r-blad-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-toverstok: image-set(url(../assets/cursor/r-toverstok.png?v=2) 1x, url(../assets/cursor/r-toverstok@2x.png?v=2) 2x) 1 1, auto;
    --c-r-toverstok-wijs: image-set(url(../assets/cursor/r-toverstok-wijs.png?v=2) 1x, url(../assets/cursor/r-toverstok-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-vergrootglas: image-set(url(../assets/cursor/r-vergrootglas.png?v=2) 1x, url(../assets/cursor/r-vergrootglas@2x.png?v=2) 2x) 8 8, auto;
    --c-r-vergrootglas-wijs: image-set(url(../assets/cursor/r-vergrootglas-wijs.png?v=2) 1x, url(../assets/cursor/r-vergrootglas-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-veer: image-set(url(../assets/cursor/r-veer.png?v=2) 1x, url(../assets/cursor/r-veer@2x.png?v=2) 2x) 1 1, auto;
    --c-r-veer-wijs: image-set(url(../assets/cursor/r-veer-wijs.png?v=2) 1x, url(../assets/cursor/r-veer-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-passer: image-set(url(../assets/cursor/r-passer.png?v=2) 1x, url(../assets/cursor/r-passer@2x.png?v=2) 2x) 1 1, auto;
    --c-r-passer-wijs: image-set(url(../assets/cursor/r-passer-wijs.png?v=2) 1x, url(../assets/cursor/r-passer-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-penseel: image-set(url(../assets/cursor/r-penseel.png?v=2) 1x, url(../assets/cursor/r-penseel@2x.png?v=2) 2x) 1 1, auto;
    --c-r-penseel-wijs: image-set(url(../assets/cursor/r-penseel-wijs.png?v=2) 1x, url(../assets/cursor/r-penseel-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-stemvork: image-set(url(../assets/cursor/r-stemvork.png?v=2) 1x, url(../assets/cursor/r-stemvork@2x.png?v=2) 2x) 6 1, auto;
    --c-r-stemvork-wijs: image-set(url(../assets/cursor/r-stemvork-wijs.png?v=2) 1x, url(../assets/cursor/r-stemvork-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-zandloper: image-set(url(../assets/cursor/r-zandloper.png?v=2) 1x, url(../assets/cursor/r-zandloper@2x.png?v=2) 2x) 1 1, auto;
    --c-r-zandloper-wijs: image-set(url(../assets/cursor/r-zandloper-wijs.png?v=2) 1x, url(../assets/cursor/r-zandloper-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-bliksem: image-set(url(../assets/cursor/r-bliksem.png?v=2) 1x, url(../assets/cursor/r-bliksem@2x.png?v=2) 2x) 1 1, auto;
    --c-r-bliksem-wijs: image-set(url(../assets/cursor/r-bliksem-wijs.png?v=2) 1x, url(../assets/cursor/r-bliksem-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-munt: image-set(url(../assets/cursor/r-munt.png?v=2) 1x, url(../assets/cursor/r-munt@2x.png?v=2) 2x) 9 9, auto;
    --c-r-munt-wijs: image-set(url(../assets/cursor/r-munt-wijs.png?v=2) 1x, url(../assets/cursor/r-munt-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-sleutel: image-set(url(../assets/cursor/r-sleutel.png?v=2) 1x, url(../assets/cursor/r-sleutel@2x.png?v=2) 2x) 1 1, auto;
    --c-r-sleutel-wijs: image-set(url(../assets/cursor/r-sleutel-wijs.png?v=2) 1x, url(../assets/cursor/r-sleutel-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-degen: image-set(url(../assets/cursor/r-degen.png?v=2) 1x, url(../assets/cursor/r-degen@2x.png?v=2) 2x) 1 1, auto;
    --c-r-degen-wijs: image-set(url(../assets/cursor/r-degen-wijs.png?v=2) 1x, url(../assets/cursor/r-degen-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-geodriehoek: image-set(url(../assets/cursor/r-geodriehoek.png?v=2) 1x, url(../assets/cursor/r-geodriehoek@2x.png?v=2) 2x) 1 1, auto;
    --c-r-geodriehoek-wijs: image-set(url(../assets/cursor/r-geodriehoek-wijs.png?v=2) 1x, url(../assets/cursor/r-geodriehoek-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-fakkel: image-set(url(../assets/cursor/r-fakkel.png?v=2) 1x, url(../assets/cursor/r-fakkel@2x.png?v=2) 2x) 1 1, auto;
    --c-r-fakkel-wijs: image-set(url(../assets/cursor/r-fakkel-wijs.png?v=2) 1x, url(../assets/cursor/r-fakkel-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-vlam: image-set(url(../assets/cursor/r-vlam.png?v=2) 1x, url(../assets/cursor/r-vlam@2x.png?v=2) 2x) 1 1, auto;
    --c-r-vlam-wijs: image-set(url(../assets/cursor/r-vlam-wijs.png?v=2) 1x, url(../assets/cursor/r-vlam-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-kristal: image-set(url(../assets/cursor/r-kristal.png?v=2) 1x, url(../assets/cursor/r-kristal@2x.png?v=2) 2x) 1 1, auto;
    --c-r-kristal-wijs: image-set(url(../assets/cursor/r-kristal-wijs.png?v=2) 1x, url(../assets/cursor/r-kristal-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-ster: image-set(url(../assets/cursor/r-ster.png?v=2) 1x, url(../assets/cursor/r-ster@2x.png?v=2) 2x) 2 2, auto;
    --c-r-ster-wijs: image-set(url(../assets/cursor/r-ster-wijs.png?v=2) 1x, url(../assets/cursor/r-ster-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-komeet: image-set(url(../assets/cursor/r-komeet.png?v=2) 1x, url(../assets/cursor/r-komeet@2x.png?v=2) 2x) 4 4, auto;
    --c-r-komeet-wijs: image-set(url(../assets/cursor/r-komeet-wijs.png?v=2) 1x, url(../assets/cursor/r-komeet-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-klauw: image-set(url(../assets/cursor/r-klauw.png?v=2) 1x, url(../assets/cursor/r-klauw@2x.png?v=2) 2x) 1 1, auto;
    --c-r-klauw-wijs: image-set(url(../assets/cursor/r-klauw-wijs.png?v=2) 1x, url(../assets/cursor/r-klauw-wijs@2x.png?v=2) 2x) 7 1, pointer;
    --c-r-scepter: image-set(url(../assets/cursor/r-scepter.png?v=2) 1x, url(../assets/cursor/r-scepter@2x.png?v=2) 2x) 1 1, auto;
    --c-r-scepter-wijs: image-set(url(../assets/cursor/r-scepter-wijs.png?v=2) 1x, url(../assets/cursor/r-scepter-wijs@2x.png?v=2) 2x) 7 1, pointer;
  }
}
/* vrij te spelen cursors (js/cursor.js): html[data-cursor="<id>"]; html:root wint van de standaardregel hieronder */
html:root[data-cursor="kompas"] { --pijl: var(--c-r-kompas); --wijs: var(--c-r-kompas-wijs); }
html:root[data-cursor="blad"] { --pijl: var(--c-r-blad); --wijs: var(--c-r-blad-wijs); }
html:root[data-cursor="toverstok"] { --pijl: var(--c-r-toverstok); --wijs: var(--c-r-toverstok-wijs); }
html:root[data-cursor="vergrootglas"] { --pijl: var(--c-r-vergrootglas); --wijs: var(--c-r-vergrootglas-wijs); }
html:root[data-cursor="veer"] { --pijl: var(--c-r-veer); --wijs: var(--c-r-veer-wijs); }
html:root[data-cursor="passer"] { --pijl: var(--c-r-passer); --wijs: var(--c-r-passer-wijs); }
html:root[data-cursor="penseel"] { --pijl: var(--c-r-penseel); --wijs: var(--c-r-penseel-wijs); }
html:root[data-cursor="stemvork"] { --pijl: var(--c-r-stemvork); --wijs: var(--c-r-stemvork-wijs); }
html:root[data-cursor="zandloper"] { --pijl: var(--c-r-zandloper); --wijs: var(--c-r-zandloper-wijs); }
html:root[data-cursor="bliksem"] { --pijl: var(--c-r-bliksem); --wijs: var(--c-r-bliksem-wijs); }
html:root[data-cursor="munt"] { --pijl: var(--c-r-munt); --wijs: var(--c-r-munt-wijs); }
html:root[data-cursor="sleutel"] { --pijl: var(--c-r-sleutel); --wijs: var(--c-r-sleutel-wijs); }
html:root[data-cursor="degen"] { --pijl: var(--c-r-degen); --wijs: var(--c-r-degen-wijs); }
html:root[data-cursor="geodriehoek"] { --pijl: var(--c-r-geodriehoek); --wijs: var(--c-r-geodriehoek-wijs); }
html:root[data-cursor="fakkel"] { --pijl: var(--c-r-fakkel); --wijs: var(--c-r-fakkel-wijs); }
html:root[data-cursor="vlam"] { --pijl: var(--c-r-vlam); --wijs: var(--c-r-vlam-wijs); }
html:root[data-cursor="kristal"] { --pijl: var(--c-r-kristal); --wijs: var(--c-r-kristal-wijs); }
html:root[data-cursor="ster"] { --pijl: var(--c-r-ster); --wijs: var(--c-r-ster-wijs); }
html:root[data-cursor="komeet"] { --pijl: var(--c-r-komeet); --wijs: var(--c-r-komeet-wijs); }
html:root[data-cursor="klauw"] { --pijl: var(--c-r-klauw); --wijs: var(--c-r-klauw-wijs); }
html:root[data-cursor="scepter"] { --pijl: var(--c-r-scepter); --wijs: var(--c-r-scepter-wijs); }
/* CURSORS:END */

/* Cursors toepassen (alleen met html[data-cursor]; zonder blijft alles systeem). Keuze per rol: --pijl (gewoon) en
   --wijs (knoppen/links). Elders staat `cursor: var(--wijs, pointer)` / `var(--pijl, default)`, dus zonder data-cursor
   gewoon pointer/default. Tekstvelden, MathLive en het tekenvel (crosshair) houden hun eigen cursor.
   Let op: cursor-regels met var(--c-…) alleen in css/ zetten (url() is relatief aan css/). */
:root[data-cursor] { --pijl: var(--c-pijl-nacht); --wijs: var(--c-wijs-handschoen); cursor: var(--pijl); }
:root[data-cursor] .gv { --pijl: var(--c-gv-zwaard); --wijs: var(--c-gv-handschoen); cursor: var(--pijl); }
/* examenspeler: altijd de rustige nachtpijl, ook met een vrijgespeelde cursor (.opgave-nav bestaat alleen in de speler) */
:root[data-cursor] #app:has(.opgave-nav) { --pijl: var(--c-pijl-nacht); --wijs: var(--c-wijs-handschoen); cursor: var(--pijl); }
.unl-cursor { width: 32px; height: 32px; vertical-align: middle; margin-right: 4px; }
/* wachtcursor (js/cursor.js wachtStart): hamsterwiel op de muisplek na stilstand; animatie is het doel, dus geen
   prefers-reduced-motion-stop (docs/stijlgids.md) */
html.cur-wacht, html.cur-wacht * { cursor: none !important; }
.wacht-hamster { position: fixed; z-index: 9999; pointer-events: none; width: 68px; height: 76px; image-rendering: pixelated;
  background: url(../assets/cursor/wacht-hamster.png?v=2) 0 0 / 408px 76px no-repeat; animation: wacht-wiel .6s steps(6) infinite;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
@keyframes wacht-wiel { to { background-position-x: -408px; } }
:where(:root[data-cursor]) :where(a[href], button:not(:disabled), select:not(:disabled), summary, label:has(input:not(:disabled)),
  [role="button"], input:is([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"]):not(:disabled)) { cursor: var(--wijs); }
:where(:root[data-cursor]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="submit"], [type="button"]),
  textarea, [contenteditable]:not([contenteditable="false"]), math-field) { cursor: text; }
:where(:root[data-cursor]) :where(:disabled) { cursor: var(--pijl); }
/* voorbeeldvak (stijlgids, later Profiel → Ontgrendeld): zet --pijl/--wijs op het vak, dan toont het die cursors */
.cur-proef { cursor: var(--pijl); }
.cur-proef :is(a[href], button) { cursor: var(--wijs); }
/* Beheer → Accounts op een smal scherm (hotfix 2026-10-12): de naam werd letter voor letter onder elkaar gezet
   (vier kolommen + break-all); nu staan XP en de knoppen onder de naam. !important wint van de kolommen die views.js inline zet. */
@media (max-width: 640px) {
  #adm-list .board li { grid-template-columns: 64px 1fr !important; row-gap: 6px; }
  #adm-list .board .av { grid-row: span 3; align-self: start; }
  #adm-list .board .nm { word-break: normal; overflow-wrap: anywhere; }
  #adm-list .board .xp, #adm-list .board .btn-row { grid-column: 2; }
}