:root {
  --bg: #FBF7F0;
  --surface: #FFFFFF;
  --surface-2: #F3EBDA;
  --ink: #241C15;
  --ink-soft: #6B5D4F;
  --wood: #C97D3E;
  --wood-dark: #8B4A1F;
  --teal: #1F6F6B;
  --coral: #E4633F;
  --gold: #E8A33D;
  --green: #2E9E6D;
  --border: #E7DCC9;
  --radius: 16px;
  --radius-sm: 10px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1, h2, h3 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
p { margin: 0 0 12px; line-height: 1.5; }
button { font-family: inherit; }
input { font-family: inherit; }
img, svg { max-width: 100%; }
a { color: var(--wood-dark); }

button:focus-visible, input:focus-visible, .option-btn:focus-visible {
  outline: 2px solid var(--wood);
  outline-offset: 2px;
}

/* ---------- App shell ---------- */

#topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
#topbar[hidden] { display: none; }
.brand {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: none;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  padding: 6px 4px;
  cursor: pointer;
}
/* De bever uit het logo, zelfde tekening als het app-icoon (klasse heet nog brand-eekhoorn).
   Netjes gecentreerd zakte hij met zijn pootjes ruim onder de tekst door,
   waardoor het woord te hoog leek te zweven. Hij staat nu zo dat zijn
   pootjes vlak onder de basislijn van de tekst uitkomen — dezelfde grond
   dus. `top` verschuift alleen de tekening en niet de regelhoogte, zodat
   de balk even hoog blijft als hiervoor. */
.brand-eekhoorn {
  width: 24px; height: 24px; display: block; flex: 0 0 auto;
  position: relative; top: -4.5px;
}
.topbar-right { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 0 0 auto; }
#topbar .brand { min-width: 0; flex: 0 1 auto; }

/* XP-meter: het doel waar de muntjes naartoe vliegen. */
.xp-chip {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 3px;
  background: var(--surface-2);
  border-radius: 20px;
  padding: 4px 8px;
  font-size: 13px; font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.xp-chip-star { font-size: 12px; }
.xp-chip-unit { font-size: 10.5px; font-weight: 700; color: var(--ink-soft); }
.xp-chip-pending {
  position: absolute; right: -4px; top: -11px;
  background: var(--green); color: #fff;
  font-size: 10.5px; font-weight: 800;
  padding: 1px 6px; border-radius: 20px;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.xp-chip-pending.is-on { opacity: 1; transform: scale(1); }

/* Badge-teller in de kop, zelfde vorm als de XP-meter ernaast. */
.badge-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--surface-2); border: none; border-radius: 20px;
  padding: 4px 8px; font-size: 13px; font-weight: 700;
  color: var(--ink); white-space: nowrap; cursor: pointer;
}
.badge-chip-icon { font-size: 12px; }
.badge-chip:active { background: var(--border); }

/* Streak-meter, zelfde vorm als de twee ernaast. */
.streak-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: var(--surface-2); border-radius: 20px;
  padding: 4px 8px; font-size: 13px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
}
.streak-chip-icon { font-size: 12px; }

/* Waarschuwingsstip: staat er alleen als opslaan mislukt is. Gaat alles
   goed, dan is hij hidden en zie je hem niet. */
.sync-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral);
  flex: 0 0 auto;
}
.sync-dot[hidden] { display: none; }

/* Op hele smalle telefoons (iPhone SE en kleiner) staan de merknaam en
   drie tellers krap naast elkaar; een maatje kleiner houdt "CNC Academy"
   op één regel. */
@media (max-width: 379px) {
  #topbar { padding: 10px 12px; }
  .brand { font-size: 14px; gap: 6px; padding: 6px 0; }
  .brand-eekhoorn { width: 21px; height: 21px; top: -4px; }
  .topbar-right { gap: 6px; }
  .xp-chip, .badge-chip, .streak-chip { padding: 4px 8px; font-size: 12px; }
}

#appMain {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px calc(96px + var(--safe-bottom));
  min-height: 60vh;
}

#bottomNav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 6px 8px calc(6px + var(--safe-bottom));
}
#bottomNav[hidden] { display: none; }
#bottomNav button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 4px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  min-height: 48px;
}
#bottomNav button span { font-size: 11px; }
#bottomNav button.active { color: var(--wood-dark); background: var(--surface-2); }

/* ---------- Buttons ---------- */

.btn {
  min-height: 48px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.btn.primary { background: var(--wood); color: #fff; }
.btn.primary:active { background: var(--wood-dark); }
.btn.ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--border); }

/* ---------- Profile picker ---------- */

.profile-screen, .splash-screen {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 8px;
}
/* Logo van The Carving Beaver, in donkerbruin (#52341F, zit in de SVG zelf).
   Zelfde opzet als het logo van Het houten nest: de bever als beeldmerk,
   de letters de omtrekken van Bitter Bold. */
.profile-logo { display: block; width: min(78%, 260px); height: auto; margin: 0 auto; }
/* Dun streepje dat het logo van de app-naam scheidt: het logo is van het
   bedrijf, "CNC Academy" is de app. Ruim wit erboven en eronder, zodat de
   twee echt als losse dingen lezen. */
.profile-scheiding {
  display: block; width: 54px; height: 1px;
  background: var(--border);
  margin: 42px auto;
}
.profile-screen h1, .splash-screen h1 { font-size: 17px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px; }
/* Geen eigen ondermarge: het streepje eronder brengt zijn eigen witruimte
   mee, anders staat de afstand er twee keer in. */
.profile-tagline { color: var(--ink-soft); margin-bottom: 0; }
.profile-question { font-weight: 700; margin-bottom: 12px; }
/* Versienummer + releasemoment: klein en onopvallend, maar wel altijd te
   vinden — op de profielkeuze (geen check-knop nodig, zie hieronder). */
.versie-regel { font-size: 11px; color: var(--ink-soft); opacity: .65; margin: 28px 0 0; }
/* Alleen op de homepage: label + versienummer, het toestel-eigen
   controlemoment, en een knop om dat meteen te forceren in plaats van te
   wachten tot de app weer in beeld komt. */
.versie-footer { margin: 28px 0 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.versie-footer-label {
  font-size: 10.5px; font-weight: 700; color: var(--ink-soft); opacity: .6;
  margin: 0; text-transform: uppercase; letter-spacing: .05em;
}
.versie-footer-nummer { font-size: 12px; color: var(--ink-soft); margin: 0; }
.versie-footer-check { font-size: 11px; color: var(--ink-soft); opacity: .65; margin: 0; }
.versie-check-btn { min-height: 40px; padding: 8px 16px; font-size: 13px; margin-top: 2px; }
.profile-list { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 320px; }
/* Installatiescherm: dezelfde kop als de profielkeuze, maar met één knop
   in plaats van de profielenlijst — je kunt pas een profiel kiezen als de
   app op het beginscherm staat. */
.install-btn { width: 100%; max-width: 320px; font-size: 16px; }
.install-uitleg { color: var(--ink-soft); font-size: 13px; margin: 12px auto 0; max-width: 280px; }
.install-hint {
  margin: 20px auto 0; max-width: 300px; text-align: left;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.install-hint p { margin: 0 0 6px; font-size: 13.5px; }
.install-hint p:last-child { margin-bottom: 0; }
/* Popup met de installatiestappen (toonInstallUitleg in js/views.js): de
   opmaak van .melding-vraag, met genummerde stappen. */
.install-popup-icoon { width: 64px; height: 64px; border-radius: 15px; margin: 0 auto 10px; display: block; box-shadow: 0 2px 8px rgba(36, 28, 21, .2); }
.install-stappen { list-style: none; margin: 10px 0 14px; padding: 0; text-align: left; }
.install-stappen li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 14px; line-height: 1.45;
}
.install-stappen li + li { margin-top: 6px; }
.install-stap-nr {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--wood); color: #fff; font-size: 12.5px; font-weight: 700;
  margin-top: 1px;
}
.install-deel-icoon { display: inline-block; vertical-align: -3px; color: #0A84FF; }
.install-popup-voet { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; margin: -4px 0 14px; }
/* Op een computer: één blok met links de QR-code om met je telefoon te
   scannen en rechts de uitleg, het adres groot en een kopieerknop. De carrousel krijgt hier minder hoogte (het blok neemt meer ruimte
   in dan de installeerknop), zodat de QR-code ook op een laptopscherm zonder
   scrollen in beeld staat. */
.install-op-computer .install-carrousel { --tel-b: clamp(52px, calc((100svh - 600px) / 2.5), 140px); }
/* Laag laptopvenster (een 1366x768-scherm laat met de browserbalken zo'n
   650 px over): een kleiner logo en minder lucht erboven, anders valt de
   QR-code net onder de rand. */
@media (max-height: 760px) {
  .install-screen.install-op-computer { padding-top: 0; }
  .install-screen.install-op-computer .profile-logo { width: min(50%, 150px); }
  .install-screen.install-op-computer .profile-scheiding { margin: 10px auto; }
}
.install-desktop {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px;
  /* Links minder padding: de witte rand om de QR-code (vier modules, ~18 px)
     valt weg tegen het witte blok, en zo staat de zichtbare code even ver van
     de rand als de tekst rechts. */
  width: 100%; max-width: 500px; padding: 18px 24px 18px 6px;
}
.install-desktop-rechts { text-align: left; }
.install-hint .install-desktop-tekst {
  margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; line-height: 1.45;
}
.install-desktop-tekst strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 2px; }
.install-desktop .install-adres {
  font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
  margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all;
}
.install-desktop .btn { width: 100%; }
/* De QR-code: altijd zwart op wit, anders scant niet elke telefoon hem. */
.install-qr { display: block; width: 176px; height: 176px; border-radius: var(--radius-sm); }
@media (max-width: 420px) {
  .install-desktop { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 18px 20px; }
  .install-desktop-rechts { width: 100%; text-align: center; }
}
/* Carrousel op het installatiescherm (renderInstallGate): telefoons met echte
   schermen die langzaam van links naar rechts voorbijrijden. De breedte van
   een telefoon hangt af van de schermhoogte, zodat de knop en de uitleg er op
   een telefoon nog onder passen; tussen 84 en 140 px. Wat minder lucht rond
   het logo maakt daar ook ruimte voor. */
.install-screen { padding-top: 12px; }
.install-screen .profile-logo { width: min(64%, 220px); }
.install-screen .profile-scheiding { margin: 22px auto; }
@media (max-height: 620px) {
  .install-screen { padding-top: 0; }
  .install-screen .profile-logo { width: min(50%, 160px); }
  .install-screen .profile-scheiding { margin: 12px auto; }
}
.install-carrousel {
  --tel-b: clamp(80px, calc((100svh - 375px) / 2.4), 140px);
  /* Van rand tot rand: uit de padding van #appMain en .profile-screen. */
  width: calc(100% + 48px);
  /* De schaduw van de telefoons reikt zo'n 32 px omlaag en 12 px omhoog; de
     overflow knipt alles daarbuiten met een harde rand af. Dus binnen de
     carrousel ruimte genoeg, en die met de marge weer terugnemen zodat de
     rest van het scherm niet verschuift (samen nog 20 px boven, 32 onder). */
  margin: 4px -24px -4px;
  padding: 16px 0 36px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.install-carrousel-baan {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Het rijtje staat er twee keer in: van 0 naar -50% (van rechts naar links) schuift precies één
     rijtje op, en dan staat alles weer net als aan het begin. */
  animation: install-carrousel 31s linear infinite; /* 8 schermen, zelfde tempo als met 7 in 27s */
}
.install-carrousel:hover .install-carrousel-baan { animation-play-state: paused; }
@keyframes install-carrousel {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* De telefoon: een donkere rand, een statusbalk in de kleur van het scherm
   met een eilandje erin, en daaronder de schermafbeelding. Een marge in
   plaats van gap, anders klopt de -50% van de animatie niet. */
.install-tel {
  --rand: calc(var(--tel-b) * .04);
  --balk-h: calc(var(--tel-b) * .085);
  position: relative;
  flex: none;
  width: var(--tel-b);
  margin-right: calc(var(--tel-b) * .16);
  padding: var(--rand) var(--rand) var(--rand);
  border-radius: calc(var(--tel-b) * .17);
  background: #1E1611;
  box-shadow: 0 10px 22px rgba(70, 40, 15, .22), 0 2px 5px rgba(70, 40, 15, .18), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.install-tel .install-scherm {
  position: relative;
  border-radius: calc(var(--tel-b) * .13);
  overflow: hidden;
  background: var(--balk, #FBF8F0);
  padding-top: var(--balk-h);
}
.install-tel::after {
  content: '';
  position: absolute;
  top: calc(var(--rand) + var(--balk-h) * .22);
  left: 50%;
  width: 30%;
  height: calc(var(--balk-h) * .56);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0B0907;
}
.install-tel img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
}
/* Geen beweging gewenst: stilstaan, het dubbele rijtje weg, en zelf
   opzij kunnen vegen. */
@media (prefers-reduced-motion: reduce) {
  .install-carrousel { overflow-x: auto; scrollbar-width: none; }
  .install-carrousel::-webkit-scrollbar { display: none; }
  .install-carrousel-baan { animation: none; padding-inline: 10%; }
  .install-tel[aria-hidden="true"] { display: none; }
}
/* Bevestiging na een geslaagde installatie: zelfde groene stijl als een
   goed quizantwoord, op de plek waar eerst de installatieknop stond —
   de kop en tagline erboven blijven gewoon staan. */
.install-success-box {
  width: 100%; max-width: 300px; margin: 0 auto;
  background: #EAF7F0; border: 1px solid var(--green);
  border-radius: var(--radius); padding: 18px 20px; text-align: center;
}
.install-success-icon { display: block; font-size: 30px; line-height: 1; margin-bottom: 8px; }
.install-success-titel { font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.install-success-tekst { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 12px; }
.install-success-quote { font-size: 12.5px; font-style: italic; color: var(--ink-soft); margin: 0; }
/* Splashscherm: zelfde merklogo + naam als de profielkeuze, zodat de app
   direct herkenbaar oogt op het moment dat je hem vanaf het beginscherm
   opent — pas daaronder een spinner in plaats van de profielenlijst. */
.splash-screen h1 { margin-bottom: 0; }
.splash-screen .loading-spinner { margin: 42px auto 0; }
.profile-btn {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  min-height: 56px;
}
.profile-btn:active { background: var(--surface-2); }
.profile-emoji { font-size: 24px; }
.profile-name { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.profile-sub { font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }

/* ---------- Home ---------- */

/* Verschijnt boven alles op home zodra Robbin op je feedback heeft
   gereageerd; verdwijnt weer zodra je je berichten hebt geopend. */
.feedback-antwoord-banner {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--teal); color: #fff; border: none;
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; text-align: left;
}
.feedback-antwoord-banner:active { background: #185552; }
.feedback-antwoord-emoji { font-size: 18px; flex: 0 0 auto; }
.feedback-antwoord-banner span:not(.feedback-antwoord-emoji):not(.feedback-antwoord-pijl) { flex: 1; }
.feedback-antwoord-pijl { flex: 0 0 auto; }

.home-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.home-greeting { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; }
.home-stats { display: flex; gap: 8px; }
.stat { background: var(--surface-2); border-radius: 20px; padding: 5px 12px; font-size: 13px; font-weight: 700; }

.overall-progress-card, .route-complete-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.overall-progress-label { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 8px; }
.route-complete-title { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; margin-bottom: 4px; }
.route-complete-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }

.pbar-track { height: 10px; background: var(--surface-2); border-radius: 8px; overflow: hidden; flex: 1; }
.pbar-fill { height: 100%; background: linear-gradient(90deg, var(--wood), var(--gold)); border-radius: 8px; transition: width .3s ease; }
.pbar { display: flex; align-items: center; gap: 10px; }
.pbar-label { font-size: 12px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }

.next-lesson-card {
  display: block;
  width: 100%;
  text-align: left;
  background: linear-gradient(135deg, var(--wood), var(--wood-dark));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
  cursor: pointer;
  min-height: 48px;
}
.next-lesson-card.is-challenge { background: linear-gradient(135deg, var(--teal), #123f3d); }
.next-lesson-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 700; margin-bottom: 4px; }
.next-lesson-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.next-lesson-meta { font-size: 13px; opacity: .9; margin-bottom: 10px; }
.next-lesson-cta { font-weight: 700; font-size: 15px; }

.review-card {
  display: block; width: 100%; text-align: left;
  background: var(--surface-2);
  border: 1px dashed var(--wood);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 14px;
  cursor: pointer;
}
.review-card-title { font-weight: 700; margin-bottom: 2px; }
.review-card-sub { font-size: 12.5px; color: var(--ink-soft); }


/* Badges, XP en streak als grote knoppen onder de leerroute-balk. Zelfde
   vorm als de snelkoppelingen die hier eerder stonden, maar met het getal
   groot: dat is waar je op de homepage naar wilt kijken. */
.stat-knoppen { display: flex; gap: 8px; margin-bottom: 16px; }
.stat-knop {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 6px 10px;
  color: var(--ink); cursor: pointer; min-height: 84px;
}
.stat-knop:active { background: var(--surface-2); }
.stat-knop-icoon { font-size: 20px; line-height: 1.1; }
.stat-knop-getal { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; line-height: 1.15; }
.stat-knop-label {
  font-size: 11px; font-weight: 600; color: var(--ink-soft);
  text-align: center; line-height: 1.2;
}

.levels-overview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.levels-title { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 10px; }
.level-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.level-row:last-of-type { border-bottom: none; }

/* Beginner / advanced: twee blokken binnen het niveau-overzicht. */
/* Alleen wat lucht tussen Beginner en Advanced; een streep erbij maakt
   het rijtje onnodig zwaar. */
.stage-block + .stage-block { margin-top: 22px; }
.stage-head { display: flex; align-items: baseline; gap: 8px; }
.stage-icon { font-size: 15px; }
.stage-name { font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.stage-count { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.stage-sub { font-size: 11.5px; color: var(--ink-soft); margin: 2px 0 4px; }
.level-icon { font-size: 20px; width: 28px; text-align: center; }
.level-info { flex: 1; }
.level-name { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.level-count { font-size: 12px; color: var(--ink-soft); font-weight: 700; white-space: nowrap; }

/* Op de homepage is een niveaurij een knop: hij klapt open en laat de
   lessen zien die erin zitten. Op het profielscherm van een ander blijft
   het een gewone rij, want daar valt niets te openen. */
.level-row.is-toggle {
  width: 100%; background: none; border: none; border-bottom: 1px solid var(--border);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  padding: 8px 0; min-height: 52px;
}
.level-row.is-toggle .klap-pijl { width: 24px; height: 24px; }
.level-row.is-toggle .klap-pijl svg { width: 15px; height: 15px; }
.level-row.is-toggle.is-open .klap-pijl { transform: rotate(90deg); }
/* Staat er een lessenlijst open, dan hoort de streep onder de lijst,
   niet tussen de kop en de lijst in. */
.level-row.is-toggle.is-open { border-bottom-color: transparent; }
.level-lessen { padding: 2px 0 10px 34px; border-bottom: 1px solid var(--border); }
.levels-overview .level-lessen:last-child { border-bottom: none; }

.les-rij {
  display: flex; align-items: center; gap: 9px; width: 100%;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 11px; margin-top: 6px;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.les-rij:active { background: var(--border); }
.les-rij[disabled] { opacity: .5; cursor: default; background: none; border-color: var(--border); }
.les-rij.is-gedaan { background: #F1F8F4; }
.les-rij-status { font-size: 14px; flex: 0 0 auto; }
.les-rij-tekst { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.les-rij-naam { font-size: 13px; font-weight: 700; }
.les-rij-meta { font-size: 11px; color: var(--ink-soft); }
.les-rij-pijl { font-size: 13px; color: var(--wood-dark); font-weight: 700; flex: 0 0 auto; }

/* Bovenaan een les die je al eens gedaan hebt. */
.herhaal-melding {
  background: #F1F8F4; border: 1px solid #CDE7D8; border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 14px;
  font-size: 12.5px; color: var(--ink-soft); text-align: left; line-height: 1.4;
}
.upcoming-note { font-size: 11.5px; color: var(--muted, var(--ink-soft)); margin-top: 10px; opacity: .75; }

/* Tandwiel rechtsonder op de profielkiezer: rond knopje met daarachter
   het testprofiel. */
.gear-corner {
  position: fixed; right: 16px; bottom: calc(16px + var(--safe-bottom));
  z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.gear-btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
  box-shadow: 0 3px 12px rgba(60, 40, 20, .18);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.gear-btn:active { transform: rotate(45deg) scale(.94); }
.gear-corner .gear-menu { width: min(290px, calc(100vw - 32px)); }
.gear-menu {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px; text-align: left;
  box-shadow: 0 8px 24px rgba(60, 40, 20, .22);
}
.gear-menu-title {
  font-size: 11px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; margin: 2px 4px 8px;
}
.gear-item {
  width: 100%; display: flex; align-items: flex-start; gap: 10px;
  background: none; border: none; border-radius: 10px;
  padding: 9px 8px; text-align: left; cursor: pointer; font: inherit;
  color: var(--ink); font-size: 17px;
}
.gear-item + .gear-item { margin-top: 2px; }
.gear-item:active { background: var(--surface-2); }
.gear-item span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gear-item strong { font-size: 13.5px; font-weight: 600; }
.gear-item em { font-size: 11.5px; font-style: normal; color: var(--ink-soft); }

.recent-badges { margin-bottom: 28px; }
.recent-badges-title { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 10px; }
.badge-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.badge-row .badge-tile { flex: 0 0 auto; width: 120px; }
/* De laatste badges op home: altijd precies passend naast elkaar, hoeveel
   het er ook zijn. Met een vaste breedte van 120px viel er op een smalle
   telefoon net een paar pixels buiten en kreeg je een schuifbalk. */
.recent-badges .badge-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 8px; overflow-x: visible; padding-bottom: 0;
}
.recent-badges .badge-row .badge-tile { width: auto; min-width: 0; }

/* ---------- Badges ---------- */

.badges-screen h1 { margin-bottom: 4px; }
/* Voortgangsbalk bovenaan: dezelfde kaart als de leerroute op home. */
.badges-voortgang { margin: 10px 0 16px; }
.badge-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.badge-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; text-align: center;
}
.badge-tile.locked { opacity: .45; }
.badge-tile.earned { border-color: var(--gold); background: #FFF8EA; }
.badge-icon { font-size: 30px; margin-bottom: 6px; }
.badge-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.badge-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.35; }

/* ---------- Flow screens (lesson / quiz / result) ---------- */

.flow-screen { display: flex; flex-direction: column; min-height: 65vh; }
.dot-progress { display: flex; gap: 5px; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.dot.done { background: var(--wood); }
.dot.active { background: var(--wood-dark); transform: scale(1.3); }

.flow-body { flex: 1; }
.flow-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; }
.flow-actions .btn { flex: 1; }
.flow-actions.column { flex-direction: column; }

.lesson-intro { text-align: center; padding: 12px 0; }
.lesson-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--wood-dark); font-weight: 700; margin-bottom: 6px; }
.lesson-intro h1 { font-size: 26px; }
.lesson-subtitle { color: var(--ink-soft); font-size: 14.5px; margin-bottom: 14px; }
.lesson-intro-text { font-size: 15.5px; }
.lesson-meta { font-size: 13px; color: var(--ink-soft); margin-top: 8px; }

.theory-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.theory-card h2 { font-size: 18px; }
.theory-card p { margin: 0; font-size: 15px; }
/* Logo van een softwarepakket, klein bovenaan zijn kaart. Vaste hoogte, zodat
   een breed woordmerk en een vierkant icoon even zwaar ogen; max-width zorgt
   dat het op een smal scherm nooit buiten de kaart valt. */
.theory-card .sw-logo { display: block; height: 30px; width: auto; max-width: 62%; margin: 0 0 12px; object-fit: contain; object-position: left center; }
.theory-card .sw-logo-vierkant { height: 38px; }

.illustration { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; padding: 6px 6px 0; }
.illustration svg { border-radius: 10px; }
.illustration figcaption { font-size: 12.5px; color: var(--ink-soft); text-align: center; padding: 8px 10px 12px; }

/* ---------- Fotogalerij (achter de schematische tekening) ---------- */

.gallery { margin: 0 0 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px 12px; }
.gallery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gallery-title { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.gallery-hint { font-size: 11px; color: var(--ink-soft); opacity: .8; white-space: nowrap; }
.gallery-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.gallery-thumb {
  flex: 0 0 auto; width: 108px; height: 76px; padding: 0; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; background: var(--surface-2); cursor: pointer;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-thumb:active { border-color: var(--wood); }
.gallery-source { font-size: 10.5px; color: var(--ink-soft); opacity: .85; margin-top: 8px; }
.gallery-source a { color: var(--wood-dark); }

/* Eén grote schermafbeelding bij een tekstkaart (bv. per softwarepakket).
   Een duimnagel is te klein om een interface aan te herkennen, dus die gaat
   hier over de volle breedte. */
.shot { margin: 14px 0 0; }
.shot-img {
  display: block; width: 100%; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; background: var(--surface-2); cursor: zoom-in;
}
.shot-img { position: relative; }
.shot-img img { display: block; width: 100%; height: auto; }
.shot-hint {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(20, 15, 10, .62); color: #fff;
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px;
}
.shot-img:active { border-color: var(--wood); }
.shot-extra { margin-top: 8px; }
.shot figcaption { display: block; margin-top: 8px; }
.shot-caption { display: block; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.shot-source { display: block; font-size: 10.5px; color: var(--ink-soft); opacity: .85; margin-top: 5px; }
.shot-source a { color: var(--wood-dark); }

/* Schermvullende fotoviewer */
body.lightbox-open { overflow: hidden; }
.lightbox {
  position: fixed; inset: 0; z-index: 100; background: rgba(20, 15, 10, .94);
  display: flex; flex-direction: column; color: #fff;
  padding-bottom: var(--safe-bottom);
}
.lightbox[hidden] { display: none; }
.lightbox-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.lightbox-count { font-size: 13px; opacity: .8; font-weight: 600; }
.lightbox-close {
  background: rgba(255,255,255,.14); border: none; color: #fff; font-size: 16px;
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
}
.lightbox-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 12px; min-height: 0; }
.lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  /* Donkere knop met witte rand: blijft zichtbaar over zowel lichte
     productfoto's als donkere werkplaatsfoto's. */
  background: rgba(20, 15, 10, .62); border: 1px solid rgba(255,255,255,.5); color: #fff;
  width: 44px; height: 60px; border-radius: 12px; font-size: 26px; line-height: 1; cursor: pointer;
}
.lightbox-nav.prev { left: 8px; }
.lightbox-nav.next { right: 8px; }
.lightbox-nav[hidden] { display: none; }
.lightbox-info { padding: 14px 18px 18px; max-width: 560px; margin: 0 auto; text-align: center; }
.lightbox-caption { font-size: 14px; line-height: 1.45; margin: 0 0 6px; }
.lightbox-source { font-size: 11.5px; opacity: .7; margin: 0; }
.lightbox-source a { color: #fff; }

/* ---------- Testprofiel: alle lessen ---------- */

.all-lessons { background: var(--surface); border: 1px dashed var(--wood); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px; }
.all-lessons-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.all-lessons-hint { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.all-lessons-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-bottom: 8px; cursor: pointer; min-height: 48px;
}
.all-lessons-row.is-challenge { border-color: var(--teal); }
.all-lessons-order {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.all-lessons-info { display: flex; flex-direction: column; gap: 2px; }
.all-lessons-name { font-size: 13.5px; font-weight: 600; }
.all-lessons-meta { font-size: 11.5px; color: var(--ink-soft); }
.all-lessons .btn { width: 100%; margin-top: 4px; }
.all-lessons-hint.is-sneltoets { margin: 8px 0 10px; }
.all-lessons-hint kbd {
  display: inline-block;
  font-family: inherit; font-size: 11px; font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  color: var(--ink);
}

.term-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 18px 18px; }
.term-card .illustration { border: none; padding: 0; margin: 0 -18px 12px; border-radius: 0; }
.term-card .gallery { border: none; border-radius: 0; padding: 0 0 12px; margin: -4px 0 10px; border-bottom: 1px solid var(--border); }
.term-emoji { font-size: 44px; text-align: center; padding: 14px 0; }
.term-emoji.large { font-size: 64px; padding: 20px 0; }
.term-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.term-en { font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; color: var(--wood-dark); text-transform: uppercase; letter-spacing: .02em; }
.term-nl { font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.term-short { font-size: 15px; }
.term-where { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13.5px; }
.term-where-label { font-weight: 700; color: var(--teal); }
.term-why { font-size: 13.5px; color: var(--ink-soft); margin-top: 10px; margin-bottom: 0; }

.video-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.video-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); font-weight: 700; margin-bottom: 6px; }
.video-card h2 { font-size: 18px; }
.video-intro { font-size: 13.5px; color: var(--ink-soft); }
.video-list { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.video-item {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink);
  background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px; min-height: 48px;
}
.video-item:active { background: #EBE0C8; }
.video-thumb {
  position: relative; flex: 0 0 auto; width: 96px; height: 60px; border-radius: 8px; overflow: hidden;
  background: #DCD0B5; display: flex; align-items: center; justify-content: center;
}
.video-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play {
  position: relative; z-index: 1; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20,15,10,.55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.video-text { display: flex; flex-direction: column; gap: 3px; }
.video-title { font-weight: 700; font-size: 13.5px; }
.video-note { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* ---------- Quiz ---------- */

.quiz-question { text-align: center; margin-bottom: 16px; }
.quiz-count { font-size: 12px; color: var(--ink-soft); font-weight: 700; margin-bottom: 10px; }
.quiz-question h2 { font-size: 19px; }
.quiz-hint { font-size: 12.5px; color: var(--ink-soft); margin: 0; }

.term-focus { display: inline-block; background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 18px; margin-bottom: 14px; }
.term-focus-en { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; color: var(--wood-dark); text-transform: uppercase; }

.options { display: flex; flex-direction: column; gap: 10px; }
.option-btn {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 13px 14px; font-size: 15px; cursor: pointer; min-height: 48px;
  color: var(--ink);
}
.option-btn:active { background: var(--surface-2); }
.option-letter {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--surface-2); display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12.5px; color: var(--ink-soft);
}
.option-text { flex: 1; }
.option-btn.selected { border-color: var(--wood); background: #FFF3E7; }
.option-btn.correct { border-color: var(--green); background: #EAF7F0; }
.option-btn.correct .option-letter { background: var(--green); color: #fff; }
.option-btn.incorrect { border-color: var(--coral); background: #FDEEEA; }
.option-btn.incorrect .option-letter { background: var(--coral); color: #fff; }
.option-btn:disabled { cursor: default; }

.quiz-explain { border-radius: var(--radius-sm); padding: 12px 14px; margin-top: 14px; font-size: 14px; }
.quiz-explain p { margin: 0; }
.quiz-explain.is-correct { background: #EAF7F0; border: 1px solid var(--green); }
.quiz-explain.is-incorrect { background: #FDEEEA; border: 1px solid var(--coral); }
.quiz-explain-title { font-weight: 700; margin-bottom: 4px; }

/* ---------- Result ---------- */

.result-screen { text-align: center; align-items: center; padding-top: 24px; }
.result-emoji { font-size: 56px; margin-bottom: 8px; }
.result-screen h1 { font-size: 24px; }
.result-subtitle { color: var(--ink-soft); }
.result-score { font-size: 20px; font-weight: 700; margin: 10px 0 4px; }
.result-xp { color: var(--wood-dark); font-weight: 700; font-size: 16px; margin-bottom: 14px; }
.new-badges { margin: 10px 0 6px; }
.new-badges-title { font-weight: 700; margin-bottom: 8px; }
.result-outro { font-size: 13px; color: var(--ink-soft); background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 6px; }

/* ---------- Library ---------- */

.library-screen h1 { margin-bottom: 2px; }
.library-intro { color: var(--ink-soft); font-size: 14px; margin-bottom: 14px; }
.search-input {
  width: 100%; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 15px; background: var(--surface); margin-bottom: 14px; min-height: 48px;
}
.library-list { display: flex; flex-direction: column; gap: 8px; }
.library-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer; text-align: left; min-height: 48px;
}
.library-row-en { font-weight: 700; font-size: 14.5px; }
.library-row-nl { font-size: 12.5px; color: var(--ink-soft); }
.mastery-pill { font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--ink-soft); }

.term-detail-screen { padding-bottom: 8px; }
.back-link { background: none; border: none; color: var(--wood-dark); font-weight: 700; font-size: 14px; padding: 8px 0; margin-bottom: 8px; cursor: pointer; }
.term-detail-head { margin-bottom: 12px; }
.term-detail-head h1 { font-size: 26px; text-transform: uppercase; color: var(--wood-dark); }
.term-detail-nl { font-size: 14.5px; color: var(--ink-soft); font-weight: 600; margin-bottom: 8px; }
.term-detail-screen section { margin-bottom: 16px; }
.term-detail-screen h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-family: 'Inter', sans-serif; font-weight: 700; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink);
}
.chip.static { cursor: default; }

/* ---------- Empty / loading / error ---------- */

.empty-state { text-align: center; padding: 40px 16px; }
.empty-emoji { font-size: 40px; margin-bottom: 10px; }
.empty-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
.empty-body { color: var(--ink-soft); font-size: 13.5px; }

.loading-screen, .error-screen { text-align: center; padding: 60px 20px; }
.loading-spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid var(--surface-2); border-top-color: var(--wood);
  margin: 0 auto 14px; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (min-width: 640px) {
  #appMain { padding-top: 24px; }
}

/* Synoniemen: dezelfde machine, andere naam. In video's hoor je vaak een
   variant, dus die staat er expliciet bij. */
.library-row-alias { font-size: 11.5px; color: var(--ink-soft); opacity: .85; margin-top: 3px; }
.term-alias { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }
.term-detail-alias { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.term-detail-alias span {
  display: inline-block; background: var(--surface-2); border-radius: 20px;
  padding: 2px 9px; margin: 2px 2px 0 0; font-weight: 600; color: var(--ink);
}

/* ---------- Kennis Battle ---------- */
/* Zolang je in de battle zit staat de hele app in het donker: de balk
   boven, het vel eronder en de nav. Dat zet `battle-modus` op de body
   (js/app.js), zodat de battle echt een eigen wereld is. */

body.battle-modus {
  /* Kleur én verloop: doorscroll je voorbij de rand, dan blijft het donker. */
  background: #1A130E linear-gradient(180deg, #241A13 0%, #1A130E 55%, #140F0B 100%);
  background-attachment: fixed;
  color: #F6EEDF;
}
body.battle-modus #topbar {
  background: rgba(26, 19, 14, .92);
  border-bottom-color: rgba(232, 163, 61, .22);
  backdrop-filter: blur(6px);
}
body.battle-modus .brand { color: #F6EEDF; }
/* De bever is donkerbruin getekend; op dit doek maken we hem licht. */
body.battle-modus .brand-eekhoorn { filter: brightness(0) invert(1); opacity: .88; }
body.battle-modus .xp-chip,
body.battle-modus .badge-chip,
body.battle-modus .streak-chip {
  background: rgba(246, 238, 223, .10);
  color: #F6EEDF;
}
body.battle-modus .xp-chip-unit { color: rgba(246, 238, 223, .6); }
body.battle-modus .badge-chip:active { background: rgba(246, 238, 223, .18); }
body.battle-modus #bottomNav {
  background: rgba(26, 19, 14, .96);
  border-top-color: rgba(232, 163, 61, .22);
}
body.battle-modus #bottomNav button { color: rgba(246, 238, 223, .55); }
body.battle-modus #bottomNav button.active { color: var(--gold); background: rgba(232, 163, 61, .14); }
/* Het vel zelf hoeft geen eigen kader meer: de pagina is al donker. */
body.battle-modus .battle-scherm,
body.battle-modus .battle-screen {
  background: none;
  box-shadow: none;
}
body.battle-modus .battle-scherm { padding-left: 4px; padding-right: 4px; }
body.battle-modus .battle-scherm { border-color: transparent; }

/* Bewust een heel andere wereld dan de rest van de app: donker hout,
   goud en glow. Je moet meteen voelen dat dit geen gewone quiz is. */

.battle-kaart {
  display: block; width: 100%; text-align: left; position: relative; overflow: hidden;
  font: inherit; cursor: pointer;
  background: linear-gradient(150deg, #2B2018 0%, #3A2A1C 45%, #1C1510 100%);
  border: 1px solid rgba(232, 163, 61, .55);
  border-radius: var(--radius);
  padding: 15px 17px 16px;
  margin-bottom: 16px;
  color: #F6EEDF;
  box-shadow: 0 6px 20px rgba(43, 32, 24, .28), inset 0 0 30px rgba(232, 163, 61, .10);
}
/* Twee gekruiste zwaarden als watermerk rechts, hetzelfde beeld als op de
   badge "In het strijdperk". Ze hangen half buiten de kaart en worden door
   de overflow netjes afgesneden. */
.battle-kaart-zwaarden {
  position: absolute;
  right: -26px; top: 50%;
  width: 152px; height: 152px;
  transform: translateY(-50%) rotate(-8deg);
  opacity: .18;
  z-index: 0;
  pointer-events: none;
}
/* De inhoud moet er wél bovenop staan: zonder deze regel schuift een
   absoluut geplaatste SVG over gewone blokjes tekst heen. */
.battle-kaart > *:not(.battle-kaart-zwaarden) { position: relative; z-index: 1; }

/* Lichtstreep die er langzaam overheen trekt: net genoeg om op te vallen. */
.battle-kaart::after {
  content: ''; position: absolute; top: -60%; left: -40%; width: 40%; height: 220%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255, 233, 190, .16), rgba(255,255,255,0));
  transform: rotate(8deg);
  animation: battle-glans 4.5s ease-in-out infinite;
}
@keyframes battle-glans {
  0%, 62% { left: -45%; }
  92%, 100% { left: 115%; }
}
.battle-kaart:active { border-color: var(--gold); }
.battle-kaart.is-gedaan { opacity: .78; box-shadow: none; }
.battle-kaart.is-gedaan::after { display: none; }
.battle-kaart-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.battle-kaart-icoon { font-size: 18px; }
.battle-kaart-label {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.battle-kaart-reeks {
  margin-left: auto; font-size: 11.5px; font-weight: 800; color: #F6EEDF;
  background: rgba(232, 163, 61, .18); border: 1px solid rgba(232, 163, 61, .4);
  border-radius: 20px; padding: 2px 9px;
}
.battle-kaart-titel { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; margin-bottom: 3px; }
.battle-kaart-sub { font-size: 12.5px; color: rgba(246, 238, 223, .72); line-height: 1.4; }
.battle-kaart-cta { margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--gold); }

/* De battle-schermen zelf (intro, uitslag, vergrendeld). */
.battle-scherm {
  background: linear-gradient(165deg, #241A13 0%, #33251A 50%, #1A130E 100%);
  border: 1px solid rgba(232, 163, 61, .35);
  border-radius: var(--radius);
  padding: 22px 18px;
  color: #F6EEDF;
}
/* Koppen krijgen globaal de donkere inktkleur; op dit donkere doek moeten
   ze juist licht zijn. */
.battle-scherm h1, .battle-scherm h2, .battle-scherm h3,
.battle-screen h1, .battle-screen h2, .battle-screen h3 { color: #F6EEDF; }
.battle-scherm .btn.ghost { color: rgba(246, 238, 223, .8); border-color: rgba(246, 238, 223, .3); }
.battle-scherm .btn.ghost:active { background: rgba(246, 238, 223, .1); }
.battle-start {
  background: linear-gradient(120deg, var(--gold), #D2822F);
  color: #2B2018; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 4px 18px rgba(232, 163, 61, .35);
}
.battle-start:active { background: linear-gradient(120deg, #D2822F, var(--gold)); }

.battle-intro, .battle-uitslag, .battle-slot { text-align: center; padding: 6px 0 4px; }
.battle-kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 14px;
}
.battle-thema-ring {
  width: 96px; height: 96px; margin: 0 auto 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, rgba(232,163,61,.35), rgba(232,163,61,.06));
  border: 2px solid rgba(232, 163, 61, .6);
  box-shadow: 0 0 26px rgba(232, 163, 61, .35), inset 0 0 20px rgba(232, 163, 61, .2);
  animation: battle-puls 2.6s ease-in-out infinite;
}
@keyframes battle-puls {
  0%, 100% { transform: scale(1); box-shadow: 0 0 22px rgba(232,163,61,.3), inset 0 0 18px rgba(232,163,61,.18); }
  50% { transform: scale(1.045); box-shadow: 0 0 34px rgba(232,163,61,.5), inset 0 0 24px rgba(232,163,61,.28); }
}
.battle-thema-icoon { font-size: 42px; line-height: 1; }
.battle-thema-titel { font-family: 'Fraunces', serif; font-size: 26px; margin: 0 0 6px; }
.battle-thema-kicker { color: rgba(246, 238, 223, .75); font-size: 13.5px; margin: 0 0 16px; }
.battle-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.battle-meta span {
  font-size: 11.5px; font-weight: 700; color: rgba(246, 238, 223, .85);
  background: rgba(246, 238, 223, .08); border: 1px solid rgba(246, 238, 223, .16);
  border-radius: 20px; padding: 4px 11px;
}
.battle-reeks { font-size: 13px; font-weight: 800; color: var(--gold); }

.battle-slot h1 { font-family: 'Fraunces', serif; font-size: 24px; margin: 0 0 8px; }
.battle-slot p { color: rgba(246, 238, 223, .75); font-size: 14px; margin: 0 auto; max-width: 300px; }
.battle-slot-icoon { font-size: 42px; margin-bottom: 12px; }

.battle-uitslag-emoji { font-size: 54px; line-height: 1; margin-bottom: 8px; }
.battle-score { font-family: 'Fraunces', serif; font-size: 52px; font-weight: 700; line-height: 1; }
.battle-score span { font-size: 24px; color: rgba(246, 238, 223, .6); }
.battle-uitslag-thema { font-size: 13px; color: rgba(246, 238, 223, .75); margin-top: 6px; }
.battle-xp { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; color: var(--gold); margin: 12px 0 4px; }
.battle-morgen { font-size: 12.5px; color: rgba(246, 238, 223, .6); margin-top: 14px; }
.battle-niet-gewonnen {
  font-size: 12.5px; color: rgba(246, 238, 223, .8); margin-top: 10px;
  background: rgba(228, 99, 63, .14); border: 1px solid rgba(228, 99, 63, .35);
  border-radius: var(--radius-sm); padding: 8px 12px;
}
.battle-stats { display: flex; gap: 8px; justify-content: center; margin: 16px 0 4px; }
.battle-stat {
  flex: 1; max-width: 110px; display: flex; flex-direction: column; gap: 2px; align-items: center;
  background: rgba(246, 238, 223, .07); border: 1px solid rgba(246, 238, 223, .14);
  border-radius: var(--radius-sm); padding: 9px 6px;
}
.battle-stat-getal { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; }
.battle-stat-label { font-size: 10.5px; color: rgba(246, 238, 223, .65); text-align: center; line-height: 1.2; }
.battle-uitslag .new-badges-title { color: var(--gold); }
/* Badgetegels houden hun eigen lichte achtergrond, dus daar hoort de
   gewone donkere tekstkleur bij en niet het lichte van de battle. */
.battle-scherm .badge-tile { color: var(--ink); }

/* De quizvragen zelf, in battle-jasje. */
.battle-screen {
  background: linear-gradient(165deg, #241A13 0%, #33251A 55%, #1A130E 100%);
  border: 2px solid rgba(232, 163, 61, .35);
  border-radius: var(--radius);
  /* Ruim binnenwerk: de pulserende lijn hoort met wat lucht om de vraag
     en de antwoorden heen te vallen, niet er strak tegenaan. */
  padding: 18px 20px 22px;
  color: #F6EEDF;
}
/* Elke vraag zit in een zacht pulserende rand: alsof het scherm onder
   spanning staat zolang de klok loopt. */
.battle-screen { animation: battle-rand 2.2s ease-in-out infinite; }
@keyframes battle-rand {
  0%, 100% {
    border-color: rgba(232, 163, 61, .25);
    box-shadow: 0 0 0 rgba(232, 163, 61, 0), inset 0 0 16px rgba(232, 163, 61, .04);
  }
  50% {
    border-color: rgba(240, 180, 85, .85);
    box-shadow: 0 0 18px rgba(232, 163, 61, .36), 0 0 36px rgba(232, 163, 61, .15), inset 0 0 28px rgba(232, 163, 61, .1);
  }
}
.battle-balk { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.battle-balk-thema {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.battle-balk-combo {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: rgba(246, 238, 223, .6);
}
.battle-balk-combo.is-heet {
  color: #2B2018; background: var(--gold); border-radius: 20px; padding: 3px 10px;
  letter-spacing: .04em; text-transform: none;
}
.battle-screen .dot { background: rgba(246, 238, 223, .22); }
.battle-screen .dot.done { background: var(--gold); }
.battle-screen .dot.active { background: #FFF3D6; }
.battle-screen .quiz-count { color: rgba(246, 238, 223, .6); }
.battle-screen .quiz-hint { color: rgba(246, 238, 223, .6); }
.battle-screen .option-btn {
  background: rgba(246, 238, 223, .06);
  border-color: rgba(246, 238, 223, .18);
  color: #F6EEDF;
}
.battle-screen .option-btn .option-letter { background: rgba(246, 238, 223, .12); color: #F6EEDF; }
.battle-screen .option-btn:active { background: rgba(246, 238, 223, .12); }
.battle-screen .option-btn.selected { background: rgba(232, 163, 61, .2); border-color: var(--gold); }
.battle-screen .option-btn.correct {
  background: rgba(46, 158, 109, .22); border-color: var(--green);
  box-shadow: 0 0 22px rgba(46, 158, 109, .35);
}
.battle-screen .option-btn.incorrect { background: rgba(228, 99, 63, .2); border-color: var(--coral); }
.battle-screen .quiz-explain.is-correct { background: rgba(46, 158, 109, .16); border-color: var(--green); }
.battle-screen .quiz-explain.is-incorrect { background: rgba(228, 99, 63, .16); border-color: var(--coral); }
.battle-screen .term-focus { background: rgba(246, 238, 223, .08); border: 1px solid rgba(246, 238, 223, .16); }
.battle-screen .term-focus-en { color: var(--gold); }
.battle-screen .illustration { background: rgba(246, 238, 223, .92); border-radius: var(--radius-sm); padding: 6px; }

/* Het battle-strookje in de eregalerij en op een profiel: warm goud,
   zodat het herkenbaar bij de Kennis Battle hoort zonder dat de lichte
   pagina er donker van wordt. */
.battle-strip {
  margin-top: 12px;
  background: linear-gradient(160deg, #FFF6E6, #FDEFD6);
  border: 1px solid rgba(232, 163, 61, .45);
  border-radius: var(--radius-sm);
  padding: 9px 11px 10px;
}
.battle-strip-kop {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--wood-dark); margin-bottom: 8px;
}
.battle-strip-icoon { font-size: 13px; letter-spacing: 0; }
.battle-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.battle-strip-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid transparent;
  border-radius: 8px; padding: 6px 3px;
  text-align: center;
}
/* Wie hierin het verst is, krijgt een gouden randje. */
.battle-strip-stat.is-best { border-color: var(--gold); background: #FFF; }
.battle-strip-icon { font-size: 13px; line-height: 1; }
.battle-strip-value { font-weight: 800; font-size: 15px; }
.battle-strip-label { font-size: 9.5px; color: var(--ink-soft); line-height: 1.2; }
.battle-strip.is-leeg { background: var(--surface-2); border-color: var(--border); }
.battle-strip-leeg { font-size: 12px; color: var(--ink-soft); }
/* Op een profielpagina staat het strookje los, niet in een kaart. */
.profiel-scherm .battle-strip { margin-bottom: 16px; }

/* ---------- Challenge ---------- */
/* Zelfde donkere wereld als de Kennis Battle hierboven — bewust dezelfde
   opzet, maar met koraalrood in plaats van goud, zodat een challenge er
   spannend uitziet zónder met de Battle te verwarren (feedback: "geef de
   challenge een wat spannender uiterlijk waardoor je voelt met een
   challenge bezig te zijn"). Geldt alleen voor de intro en de vragen; het
   uitslagscherm erna gaat weer gewoon licht (zie zetChallengeSfeer in
   js/views.js). */

body.challenge-modus {
  background: #1A130E linear-gradient(180deg, #241A13 0%, #1A130E 55%, #140F0B 100%);
  background-attachment: fixed;
  color: #F6EEDF;
}
body.challenge-modus #topbar {
  background: rgba(26, 19, 14, .92);
  border-bottom-color: rgba(228, 99, 63, .28);
  backdrop-filter: blur(6px);
}
body.challenge-modus .brand { color: #F6EEDF; }
body.challenge-modus .brand-eekhoorn { filter: brightness(0) invert(1); opacity: .88; }
body.challenge-modus .xp-chip,
body.challenge-modus .badge-chip,
body.challenge-modus .streak-chip {
  background: rgba(246, 238, 223, .10);
  color: #F6EEDF;
}
body.challenge-modus .xp-chip-unit { color: rgba(246, 238, 223, .6); }
body.challenge-modus .badge-chip:active { background: rgba(246, 238, 223, .18); }
body.challenge-modus #bottomNav {
  background: rgba(26, 19, 14, .96);
  border-top-color: rgba(228, 99, 63, .28);
}
body.challenge-modus #bottomNav button { color: rgba(246, 238, 223, .55); }
body.challenge-modus #bottomNav button.active { color: var(--coral); background: rgba(228, 99, 63, .14); }
/* Het vel zelf hoeft geen eigen kader meer: de pagina is al donker. */
body.challenge-modus .challenge-scherm,
body.challenge-modus .challenge-screen {
  background: none;
  box-shadow: none;
}
body.challenge-modus .challenge-scherm { padding-left: 4px; padding-right: 4px; border-color: transparent; }

.challenge-scherm {
  background: linear-gradient(165deg, #241A13 0%, #33251A 50%, #1A130E 100%);
  border: 1px solid rgba(228, 99, 63, .35);
  border-radius: var(--radius);
  padding: 22px 18px;
  color: #F6EEDF;
}
.challenge-scherm h1, .challenge-scherm h2, .challenge-scherm h3 { color: #F6EEDF; }
.challenge-scherm .btn.ghost { color: rgba(246, 238, 223, .8); border-color: rgba(246, 238, 223, .3); }
.challenge-scherm .btn.ghost:active { background: rgba(246, 238, 223, .1); }
.challenge-start {
  background: linear-gradient(120deg, var(--coral), #C24E30);
  color: #FDEDE7; font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 4px 18px rgba(228, 99, 63, .35);
}
.challenge-start:active { background: linear-gradient(120deg, #C24E30, var(--coral)); }

.challenge-intro { text-align: center; padding: 6px 0 4px; }
.challenge-kicker {
  font-size: 11.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: var(--coral); margin-bottom: 14px;
}
.challenge-ring {
  width: 96px; height: 96px; margin: 0 auto 16px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, rgba(228,99,63,.35), rgba(228,99,63,.06));
  border: 2px solid rgba(228, 99, 63, .6);
  box-shadow: 0 0 26px rgba(228, 99, 63, .35), inset 0 0 20px rgba(228, 99, 63, .2);
  animation: challenge-puls 2.6s ease-in-out infinite;
}
@keyframes challenge-puls {
  0%, 100% { transform: scale(1); box-shadow: 0 0 22px rgba(228,99,63,.3), inset 0 0 18px rgba(228,99,63,.18); }
  50% { transform: scale(1.045); box-shadow: 0 0 34px rgba(228,99,63,.5), inset 0 0 24px rgba(228,99,63,.28); }
}
.challenge-ring-icoon { font-size: 42px; line-height: 1; }
.challenge-titel { font-family: 'Fraunces', serif; font-size: 26px; margin: 0 0 6px; }
.challenge-sub { color: rgba(246, 238, 223, .85); font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.challenge-tekst { color: rgba(246, 238, 223, .75); font-size: 13.5px; margin: 0 0 16px; }
.challenge-meta { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 4px; }
.challenge-meta span {
  font-size: 11.5px; font-weight: 700; color: rgba(246, 238, 223, .85);
  background: rgba(246, 238, 223, .08); border: 1px solid rgba(246, 238, 223, .16);
  border-radius: 20px; padding: 4px 11px;
}

/* De quizvragen zelf, in challenge-jasje. */
.challenge-screen {
  background: linear-gradient(165deg, #241A13 0%, #33251A 55%, #1A130E 100%);
  border: 2px solid rgba(228, 99, 63, .35);
  border-radius: var(--radius);
  padding: 18px 20px 22px;
  color: #F6EEDF;
  animation: challenge-rand 2.2s ease-in-out infinite;
}
@keyframes challenge-rand {
  0%, 100% {
    border-color: rgba(228, 99, 63, .25);
    box-shadow: 0 0 0 rgba(228, 99, 63, 0), inset 0 0 16px rgba(228, 99, 63, .04);
  }
  50% {
    border-color: rgba(235, 130, 100, .85);
    box-shadow: 0 0 18px rgba(228, 99, 63, .36), 0 0 36px rgba(228, 99, 63, .15), inset 0 0 28px rgba(228, 99, 63, .1);
  }
}
.challenge-balk { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.challenge-balk-titel {
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; color: var(--coral);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.challenge-balk-score {
  margin-left: auto; flex: 0 0 auto; font-size: 11px; font-weight: 800;
  color: rgba(246, 238, 223, .75);
}
.challenge-screen .dot { background: rgba(246, 238, 223, .22); }
.challenge-screen .dot.done { background: var(--coral); }
.challenge-screen .dot.active { background: #FFD9C9; }
.challenge-screen .quiz-count { color: rgba(246, 238, 223, .6); }
.challenge-screen .quiz-hint { color: rgba(246, 238, 223, .6); }
.challenge-screen .option-btn {
  background: rgba(246, 238, 223, .06);
  border-color: rgba(246, 238, 223, .18);
  color: #F6EEDF;
}
.challenge-screen .option-btn .option-letter { background: rgba(246, 238, 223, .12); color: #F6EEDF; }
.challenge-screen .option-btn:active { background: rgba(246, 238, 223, .12); }
.challenge-screen .option-btn.selected { background: rgba(228, 99, 63, .2); border-color: var(--coral); }
.challenge-screen .option-btn.correct {
  background: rgba(46, 158, 109, .22); border-color: var(--green);
  box-shadow: 0 0 22px rgba(46, 158, 109, .35);
}
.challenge-screen .option-btn.incorrect { background: rgba(228, 99, 63, .28); border-color: var(--coral); }
.challenge-screen .quiz-explain.is-correct { background: rgba(46, 158, 109, .16); border-color: var(--green); }
.challenge-screen .quiz-explain.is-incorrect { background: rgba(228, 99, 63, .16); border-color: var(--coral); }
.challenge-screen .term-focus { background: rgba(246, 238, 223, .08); border: 1px solid rgba(246, 238, 223, .16); }
.challenge-screen .term-focus-en { color: var(--coral); }
.challenge-screen .illustration { background: rgba(246, 238, 223, .92); border-radius: var(--radius-sm); padding: 6px; }

/* ---------- Ranglijst en profiel van een ander (vroeger Eregalerij) ---------- */

.board-screen h1 { font-size: 26px; margin-bottom: 4px; }
.board-intro { color: var(--ink-soft); margin-bottom: 18px; }
.board-you {
  background: var(--wood); color: #fff; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 20px; text-transform: uppercase; letter-spacing: .04em;
  line-height: 1.3;
}
.board-xp-unit { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-left: 3px; font-family: 'Inter', sans-serif; }

.board-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.board-stat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--radius-sm); padding: 8px 4px;
  text-align: center;
}
/* Wie hierin uitblinkt krijgt een groen randje. */
.board-stat.is-best { border-color: var(--green); background: #EAF6F0; }
.board-stat-icon { font-size: 14px; line-height: 1; }
.board-stat-value { font-weight: 800; font-size: 15px; }
.board-stat-label { font-size: 10px; color: var(--ink-soft); line-height: 1.2; }

.board-note { font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; }

/* Terug-linkje boven aan een scherm waar je naartoe geklikt bent. */
.terug-link {
  background: none; border: none; padding: 6px 0; margin-bottom: 6px;
  font: inherit; font-size: 13.5px; font-weight: 700; color: var(--wood-dark);
  cursor: pointer;
}

/* ---------- Profiel van één deelnemer ---------- */

.profiel-kop {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px;
}
.profiel-kop-emoji { font-size: 32px; flex: 0 0 auto; }
/* Je eigen avatar in Profiel & instellingen: groot. */
.acc-jij .profiel-kop-emoji { font-size: 64px; line-height: 0; }
.profiel-kop-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.profiel-kop-naam {
  display: flex; align-items: center; gap: 7px;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px;
}
.profiel-kop-sub { font-size: 12px; color: var(--ink-soft); }
.profiel-kop-xp { font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px; white-space: nowrap; }
.profiel-grid { margin-bottom: 16px; }

.profiel-blok {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.profiel-blok-kop {
  font-size: 12px; color: var(--ink-soft); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700; margin-bottom: 10px;
}
.profiel-blok-kop.is-sub { margin-top: 18px; }
/* De uitklapkop binnen een profielblok mag wat lucht boven zich hebben. */
.profiel-klap { margin-top: 14px; }
.profiel-stage { margin-top: 14px; }
.profiel-stage-kop {
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 700; font-size: 14px; margin-bottom: 2px;
}
.profiel-stage-telling { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.profiel-leeg { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* Wie het ingestuurd heeft, in het overzicht van alle feedback. */
.fb-van {
  font-size: 12px; font-weight: 800; color: var(--ink);
  background: var(--surface-2); border-radius: 20px; padding: 2px 9px;
}

/* ---------- Meldingen ---------- */

.melding-blok {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
}
.melding-blok.is-aan { border-color: rgba(46, 158, 109, .45); background: #F2FAF6; }
.melding-blok.is-uit { border-color: var(--border); background: var(--surface-2); }
.melding-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.melding-emoji { font-size: 17px; }
.melding-tekst { font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin: 0 0 10px; }
.melding-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.btn.klein { min-height: 40px; padding: 9px 14px; font-size: 13.5px; }
.melding-status { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; }
.melding-status[hidden] { display: none; }

/* Het scherm Meldingen (js/meldingen-view.js): per soort een schakelaar. */
.ml-soorten { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ml-soort {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); cursor: pointer;
}
.ml-soort-icoon { font-size: 20px; line-height: 1; flex: none; }
.ml-soort-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ml-soort-tekst strong { font-size: 14.5px; }
.ml-soort-tekst em { font-style: normal; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.ml-schakel {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 46px; height: 28px; margin: 0; border-radius: 999px;
  background: var(--border); position: relative; cursor: pointer;
  transition: background .2s ease;
}
.ml-schakel::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s ease;
}
.ml-schakel:checked { background: var(--green); }
.ml-schakel:checked::after { transform: translateX(18px); }
.ml-schakel:focus-visible { outline: 2px solid var(--wood); outline-offset: 2px; }
.ml-schakel:disabled { opacity: .6; }
.melding-knoppen a.btn { text-decoration: none; }
.melding-vraag-klein { font-size: 12.5px; color: var(--ink-soft); margin: -8px 0 14px; }

/* De eenmalige vraag na je eerste potje (js/melding-vraag.js). Boven het
   uitslagscherm van de spellen, onder #fxLayer (200). */
.melding-vraag {
  position: fixed; inset: 0; z-index: 180;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.melding-vraag-waas {
  position: absolute; inset: 0;
  background: rgba(20, 15, 10, .6);
  backdrop-filter: blur(2px);
  animation: mg-fade .3s ease-out both;
}
.melding-vraag-kaart {
  position: relative;
  width: 100%; max-width: 380px;
  max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 18px 16px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(36, 28, 21, .4);
  animation: melding-vraag-in .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes melding-vraag-in { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
.melding-vraag-bel { font-size: 34px; line-height: 1; margin-bottom: 8px; }
.melding-vraag-kaart h2 { margin: 0 0 6px; font-size: 20px; }
.melding-vraag-tekst { font-size: 14px; color: var(--ink-soft); line-height: 1.45; margin: 0 0 12px; }
.melding-vraag-lijst { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; }
.melding-vraag-lijst li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 14px; line-height: 1.4;
}
.melding-vraag-lijst li + li { margin-top: 6px; }
.melding-vraag-lijst span { font-size: 17px; line-height: 1.2; }
.melding-vraag-knoppen { display: flex; flex-direction: column; gap: 8px; }
.melding-vraag-knoppen .btn[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .melding-vraag-kaart, .melding-vraag-waas { animation: none; }
}

/* De battlekaart terwijl je nog op het vrijgavemoment wacht. */
.battle-kaart.is-wacht { opacity: .8; }
.battle-kaart.is-wacht::after { display: none; }

/* ---------- Feestjes ---------- */

/* Eén laag boven alles heen waarin muntjes, spaanders en confetti van
   boomstammetjes vliegen. Vangt geen kliks op en blokkeert dus niets. */
#fxLayer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  overflow: hidden;
}
.fx-piece { position: absolute; will-change: transform, opacity; line-height: 0; }
.fx-piece svg { display: block; }

/* Effecten die alleen in de Kennis Battle voorkomen. */
.fx-shockwave {
  position: absolute; border-radius: 50%;
  border: 5px solid var(--gold);
  box-shadow: 0 0 38px rgba(232, 163, 61, .9), 0 0 90px rgba(232, 163, 61, .45), inset 0 0 30px rgba(232, 163, 61, .5);
  will-change: transform, opacity;
}
/* De tweede, bredere ring die er net achteraan komt. */
.fx-shockwave.is-na {
  border-width: 2px;
  border-color: rgba(255, 240, 214, .85);
  box-shadow: 0 0 30px rgba(255, 233, 190, .55), inset 0 0 22px rgba(232, 163, 61, .25);
}
.fx-flash { position: absolute; inset: 0; }
.fx-flash.is-goed { background: radial-gradient(circle at 50% 45%, rgba(232,163,61,.85), rgba(232,163,61,0) 65%); }
.fx-flash.is-mis { background: radial-gradient(circle at 50% 45%, rgba(228,99,63,.8), rgba(228,99,63,0) 65%); }
.fx-combo {
  position: absolute; left: 50%; top: 38%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--gold); text-shadow: 0 2px 18px rgba(0,0,0,.55);
  will-change: transform, opacity;
}
.fx-combo-getal { font-family: 'Fraunces', serif; font-weight: 700; font-size: 64px; line-height: 1; }
.fx-combo-label { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }

/* Het goede antwoord veert even op, het foute schudt kort. Beide zitten
   al in .correct/.incorrect, dus dit werkt overal waar een quiz staat. */
@keyframes fx-correct-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
.option-btn.correct { animation: fx-correct-pop .42s cubic-bezier(.3,1.5,.5,1); }

/* De uitleg onder de vraag schuift rustig binnen. */
@keyframes fx-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.quiz-explain { animation: fx-slide-up .32s ease-out; }

/* Resultaatscherm: de score en de XP komen na elkaar binnenvallen. */
.result-screen .result-emoji { animation: fx-drop-in .55s cubic-bezier(.3,1.4,.5,1) both; }
.result-screen h1 { animation: fx-slide-up .45s ease-out .08s both; }
.result-screen .result-score { animation: fx-slide-up .45s ease-out .16s both; }
.result-screen .result-xp { animation: fx-pop-in .5s cubic-bezier(.3,1.6,.5,1) .26s both; }
.result-screen .new-badges { animation: fx-pop-in .55s cubic-bezier(.3,1.6,.5,1) .42s both; }
@keyframes fx-drop-in {
  from { opacity: 0; transform: translateY(-24px) scale(.7) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}
@keyframes fx-pop-in {
  from { opacity: 0; transform: scale(.72); }
  60% { opacity: 1; transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

/* Knoppen mogen even indrukken. */
.btn:active { transform: scale(.97); }
.btn { transition: transform .12s ease; }
.option-btn { transition: transform .12s ease; }
.option-btn:not([disabled]):active { transform: scale(.985); }

/* Nieuwe badge draait één keer rond als hij binnenkomt. */
@keyframes fx-badge-in {
  from { opacity: 0; transform: scale(.4) rotate(-180deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.new-badges .badge-tile { animation: fx-badge-in .7s cubic-bezier(.3,1.4,.5,1) both; }

@media (prefers-reduced-motion: reduce) {
  .option-btn.correct,
  .quiz-explain,
  .result-screen .result-emoji,
  .result-screen h1,
  .result-screen .result-score,
  .result-screen .result-xp,
  .result-screen .new-badges,
  .new-badges .badge-tile {
    animation: none;
  }
  .btn:active, .option-btn:not([disabled]):active { transform: none; }
  .battle-screen, .battle-kaart::after, .battle-thema-ring { animation: none; }
  .battle-screen { border-color: rgba(232, 163, 61, .6); }
  .challenge-screen, .challenge-ring { animation: none; }
  .challenge-screen { border-color: rgba(228, 99, 63, .6); }
}

/* ---------- Videobibliotheek ---------- */

.screen-head { margin-bottom: 16px; }
.screen-head h1 { font-size: 22px; margin-bottom: 6px; }
.screen-sub { color: var(--ink-soft); font-size: 13.5px; margin-bottom: 8px; }
.vid-teller {
  display: inline-block; background: var(--surface-2); border-radius: 20px;
  padding: 4px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
}

.vid-blok {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px;
}
.vid-blok-kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.vid-blok-kop h2 { font-size: 15.5px; margin: 0; }
.vid-aantal {
  margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface-2); border-radius: 20px; padding: 2px 9px;
}
.vid-blok-sub { font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 10px; }
.vid-leeg { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.vid-toevoeg-btn { width: 100%; margin: 4px 0 10px; }

.vid-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.vid-form input, .vid-form textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 12px; font-size: 14px; color: var(--ink); background: var(--bg);
  font-family: inherit; resize: vertical;
}
.vid-form input::placeholder, .vid-form textarea::placeholder { color: var(--ink-soft); opacity: .75; }
.vid-form button[type="submit"]:disabled { opacity: .7; cursor: default; }
.vid-form-fout {
  background: #FCEDE8; border: 1px solid #F0C4B5; color: #8B3A1F;
  border-radius: var(--radius-sm); padding: 9px 11px; font-size: 12.5px; font-weight: 600;
}

.vid-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.vid-row:last-child { border-bottom: none; }
.vid-row.is-watched .vid-title { color: var(--ink-soft); }
.vid-row.is-watched .vid-thumb img { opacity: .55; }
.vid-link { display: flex; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.vid-thumb {
  position: relative; flex: 0 0 auto; width: 92px; height: 62px;
  border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2);
}
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px; text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.vid-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.vid-title { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.vid-note { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
/* Wie de video gemaakt heeft. Handig om te leren welke kanalen je vaker
   tegenkomt, en om te zien of iets van de makers van onze machine komt. */
.vid-kanaal { font-size: 11.5px; font-weight: 600; color: var(--wood-dark); }
.vid-kanaal em {
  font-style: normal; font-weight: 500; color: var(--ink-soft);
}
.vid-kanaal em::before { content: ' · '; }
.vid-les { font-size: 11px; color: var(--ink-soft); opacity: .8; font-style: italic; }
.vid-acties { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.vid-check, .vid-weg {
  background: none; border: none; cursor: pointer; font-size: 17px;
  padding: 3px; line-height: 1; border-radius: 8px; min-width: 32px;
}
.vid-check:active, .vid-weg:active { background: var(--surface-2); }

/* Inklapbare secties op de videopagina */
.vid-blok-kop.is-toggle {
  width: 100%; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; margin-bottom: 0;
  display: flex; align-items: center; gap: 8px; min-height: 44px;
}
/* Uitklap-chevron. Groot en met een eigen vlakje, zodat je meteen ziet
   dat je hier kunt tikken — een klein pijltje leest niet als knop. */
.klap-pijl {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-2); color: var(--wood-dark);
  transition: transform .2s ease, background .15s ease;
}
.klap-pijl svg { width: 19px; height: 19px; display: block; }
.vid-blok-kop.is-toggle:active .klap-pijl { background: var(--border); }
.vid-blok-kop.is-open .klap-pijl { transform: rotate(90deg); }
.vid-klap { padding-top: 6px; }

/* Kanalen om te volgen */
.kanaal-rij {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.kanaal-rij:last-child { border-bottom: none; }
.kanaal-rij:active { background: var(--surface-2); }
.kanaal-avatar {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover; background: var(--surface-2);
}
.kanaal-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kanaal-naam { font-size: 14px; font-weight: 700; }
.kanaal-omschrijving { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.kanaal-pijl { flex: 0 0 auto; color: var(--ink-soft); font-size: 14px; }

/* ---------- Feedback ---------- */

.feedback-kaart {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 14px 16px; margin-bottom: 16px;
  cursor: pointer; text-align: left; font: inherit; color: inherit; min-height: 48px;
}
.feedback-kaart:active { background: var(--surface-2); }
.feedback-emoji { font-size: 22px; flex: 0 0 auto; }
.feedback-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.feedback-titel { font-size: 14.5px; font-weight: 700; }
.feedback-sub { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.feedback-pijl { color: var(--ink-soft); font-size: 15px; flex: 0 0 auto; }

.fb-bedankt {
  background: #E8F5EC; border: 1px solid #B9E0C6; color: #1C6B3C;
  border-radius: var(--radius-sm); padding: 11px 13px;
  font-size: 13.5px; font-weight: 600; margin-bottom: 14px;
}
.fb-form { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.fb-soorten { display: flex; flex-wrap: wrap; gap: 7px; }
.fb-soort input { position: absolute; opacity: 0; pointer-events: none; }
.fb-soort span {
  display: inline-block; border: 1px solid var(--border); border-radius: 20px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; background: var(--bg);
}
.fb-soort input:checked + span {
  background: var(--surface-2); border-color: var(--wood); color: var(--ink);
}
.fb-soort input:focus-visible + span { outline: 2px solid var(--wood); outline-offset: 2px; }
.fb-form textarea, .fb-form input[type="text"] {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 12px; font-size: 14px; color: var(--ink);
  background: var(--bg); font-family: inherit; resize: vertical;
}
.fb-form textarea::placeholder, .fb-form input::placeholder { color: var(--ink-soft); opacity: .75; }

.fb-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.fb-item:last-child { border-bottom: none; }
.fb-kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.fb-soort-tag { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.fb-datum { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); opacity: .8; }
.fb-tekst { font-size: 14px; margin: 0 0 4px; line-height: 1.45; }
.fb-waar { font-size: 11.5px; color: var(--ink-soft); font-style: italic; margin: 0 0 6px; }
.fb-wacht { font-size: 12px; color: var(--ink-soft); opacity: .8; }
.fb-antwoord {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13.5px; line-height: 1.45; margin-top: 6px;
}
.fb-antwoord-kop {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--ink-soft); margin-bottom: 4px;
}
.fb-reageer-btn {
  background: none; border: none; padding: 6px 0 0; margin-top: 4px;
  font-size: 12px; font-weight: 700; color: var(--wood-dark); cursor: pointer;
}
.fb-antwoord-form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.fb-antwoord-form[hidden] { display: none; }
.fb-antwoord-form textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 11px; font-size: 13.5px; color: var(--ink); background: var(--bg);
  font-family: inherit; resize: vertical;
}
.fb-antwoord-acties { display: flex; gap: 8px; justify-content: flex-end; }
.fb-antwoord-acties .btn { min-height: 40px; padding: 8px 16px; font-size: 13.5px; }

/* ---------- Bekijk versies ---------- */

.versie-status-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border);
}
.versie-status-item:last-child { border-bottom: none; }
.versie-status-profiel { font-weight: 700; font-size: 14px; }
.versie-status-badge {
  font-size: 11.5px; font-weight: 800; color: var(--ink);
  background: var(--surface-2); border-radius: 20px; padding: 2px 9px;
}
.versie-status-badge.is-actueel { background: #E8F5EC; color: #1C6B3C; }
.versie-status-badge.is-oud { background: #FCEDE8; color: #8B3A1F; }
.versie-status-badge.is-onbekend { opacity: .7; }
.versie-status-tijd { flex-basis: 100%; font-size: 12px; color: var(--ink-soft); }

.versie-geschiedenis-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.versie-geschiedenis-item:last-child { border-bottom: none; }
.versie-geschiedenis-kop { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.versie-geschiedenis-nummer { font-size: 12px; font-weight: 800; color: var(--wood-dark); }
.versie-geschiedenis-datum { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); opacity: .8; }
.versie-geschiedenis-wat { font-size: 13.5px; margin: 0; line-height: 1.45; color: var(--ink-soft); }

/* ==========================================================================
   Werkplaats Crush — de minigame
   ==========================================================================

   Een beloning moet aanvoelen als een beloning. Het spel neemt daarom het
   hele scherm over (body.minigame-modus haalt de balk boven en de nav
   onder weg), speelt zich af in een donkere werkplaats met warm licht, en
   is van boven tot onder aangekleed: een gefreesd naambordje, een frame
   van machineprofiel om het bord, en tegels die glanzen alsof je ze kunt
   oppakken.

   De maatvoering hangt aan één variabele: --mg-cel, de grootte van één
   vakje. Die wordt in JavaScript berekend uit de ruimte die er is, zodat
   het bord op elke telefoon zo groot mogelijk is. Alles hieronder rekent
   daar vanaf. */

body.minigame-modus #topbar,
body.minigame-modus #bottomNav { display: none; }
body.minigame-modus { overflow: hidden; overscroll-behavior: none; background: #4A2B12; }

.mg-scherm {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #FBF0DC;
  background: #4A2B12;
  padding: max(6px, env(safe-area-inset-top)) 0 max(6px, var(--safe-bottom));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.mg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- de omgeving ---------- */

.mg-achtergrond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.mg-wand { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Donkere hoeken houden de aandacht in het midden, waar het bord ligt.
   Niet te zwaar: de nerf van de plaat moet overal zichtbaar blijven. */
.mg-vignet {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 118% 76% at 50% 44%, transparent 24%, rgba(26, 12, 3, .62) 100%),
    linear-gradient(180deg, rgba(255, 220, 165, .09), transparent 28%);
}
/* Stofjes die in het licht blijven hangen. Traag, klein, nauwelijks
   opvallend — precies wat een werkplaats levend maakt. */
.mg-stofjes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* De laag die vóór de kaart langs drijft: groter, waziger, zwakker. */
.mg-stofjes.is-voor { z-index: 5; }
.mg-stofjes.is-voor span {
  filter: blur(2.5px);
  background: rgba(255, 232, 195, .5);
  box-shadow: 0 0 14px rgba(255, 214, 150, .55);
  transform-origin: center;
  scale: 2.4;
}
.mg-stofjes span {
  position: absolute;
  bottom: -14px;
  border-radius: 50%;
  background: rgba(255, 226, 180, .6);
  box-shadow: 0 0 8px rgba(255, 214, 150, .5);
  animation: mg-zweef var(--mg-duur, 12s) linear infinite;
}
@keyframes mg-zweef {
  0%   { transform: translate3d(0, 0, 0) scale(.6); opacity: 0; }
  10%  { opacity: var(--mg-dekking, .85); }
  82%  { opacity: calc(var(--mg-dekking, .85) * .6); }
  100% { transform: translate3d(var(--mg-drift, 26px), -104vh, 0) scale(1.2); opacity: 0; }
}

/* ---------- kop ---------- */

.mg-kop {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 44px 1fr 62px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 4px;
}
.mg-sluit {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 226, 180, .22);
  background: rgba(20, 12, 5, .55);
  color: rgba(251, 240, 220, .8);
  font-size: 16px; line-height: 1;
  cursor: pointer;
}
.mg-sluit:active { transform: scale(.92); }

/* Het naambordje: een stukje hout waar de titel in gefreesd is. De
   dubbele tekstschaduw (donker naar binnen, licht naar buiten) maakt de
   gravure. */
.mg-plaat {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #7A4F2A, #4A2E15);
  border: 1px solid rgba(255, 214, 150, .28);
  box-shadow: inset 0 2px 0 rgba(255, 226, 180, .22), inset 0 -3px 8px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .45);
}
.mg-plaat-titel {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; line-height: 1.1;
  color: #FFD98F;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 230, 190, .3);
}
.mg-plaat-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 217, 143, .55);
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* De zettenteller. Onder de vijf zetten wordt hij rood en gaat hij
   kloppen — precies het duwtje dat je nodig hebt om nog even door te gaan. */
.mg-zetten {
  display: flex; flex-direction: column; align-items: center;
  width: 58px; padding: 4px 0 5px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, #3B2913, #221507);
  border: 1px solid rgba(255, 214, 150, .28);
  box-shadow: inset 0 2px 0 rgba(255, 226, 180, .16), 0 4px 10px rgba(0, 0, 0, .4);
}
.mg-zetten-getal { font-family: 'Fraunces', serif; font-weight: 700; font-size: 26px; line-height: 1; color: #FFD98F; }
.mg-zetten-label { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 217, 143, .55); }
.mg-zetten.is-bijna { border-color: rgba(228, 99, 63, .7); box-shadow: inset 0 2px 0 rgba(255, 190, 160, .2), 0 0 18px rgba(228, 99, 63, .5); }
.mg-zetten.is-bijna .mg-zetten-getal { color: #FF9A78; animation: mg-klop 1s ease-in-out infinite; }
@keyframes mg-klop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }

/* ---------- score en sterren ---------- */

.mg-meters {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 14px 18px 6px;
}
.mg-score-blok { display: flex; flex-direction: column; }
.mg-score-label { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 217, 143, .5); }
.mg-score {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 34px; line-height: 1.05;
  color: #FFE7B4;
  text-shadow: 0 0 22px rgba(232, 163, 61, .55);
  font-variant-numeric: tabular-nums;
}
.mg-score.is-loopt { color: #FFF3D6; text-shadow: 0 0 30px rgba(255, 214, 120, .9); }

.mg-sterren { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.mg-ster { font-size: 27px; color: rgba(255, 226, 180, .2); transition: color .3s ease; }
.mg-ster.is-aan { color: #FFC94D; text-shadow: 0 0 16px rgba(255, 201, 77, .8); }
.mg-sterren-doel { width: 100%; text-align: right; font-size: 10px; color: rgba(255, 217, 143, .55); font-weight: 600; }

/* ---------- het bord ---------- */

.mg-veld {
  position: relative; z-index: 1;
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  padding: 6px 4px;
}
.mg-bord { position: relative; }
/* iOS: `touch-action: none` op .mg-scherm alleen is niet genoeg. De tegels
   zijn bewegende, geanimeerde lagen (translate3d plus het ademen), en Safari
   neemt de touch-action van een voorouder daar niet betrouwbaar in over: een
   veeg werd dan een scroll, de browser stuurde `pointercancel` en de ruil kwam
   nooit aan. Daarom staat hij hier op het bord en op álles erin zelf
   (touch-action erft niet). Dat bleek op iOS niet genoeg: de besturing zelf
   loopt daar nu via Touch Events (zie "Vegen en tikken" in
   js/minigame-view.js). Dit blijft staan tegen zoomen en selecteren. */
.mg-bord, .mg-bord * {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
/* Het diagnosestrookje van ?veegtest (maakVeegDebug in js/minigame-view.js). */
.mg-veegtest {
  position: absolute; left: 4px; right: 4px; top: max(4px, env(safe-area-inset-top));
  z-index: 50; margin: 0; padding: 4px 6px;
  font: 10px/1.3 ui-monospace, Menlo, monospace; white-space: pre-wrap;
  color: #E9FFE0; background: rgba(0, 0, 0, .78); border-radius: 6px;
  pointer-events: none;
}
.mg-veegtest[hidden] { display: none; }
.mg-veegtest-knop {
  position: absolute; left: 8px; bottom: max(8px, var(--safe-bottom));
  z-index: 50; width: 34px; height: 34px; padding: 0;
  border: 1px solid rgba(255, 226, 180, .3); border-radius: 50%;
  background: rgba(0, 0, 0, .45); font-size: 17px; line-height: 1;
  opacity: .7;
}
.mg-veegtest-knop[aria-pressed="true"] { opacity: 1; border-color: #9BE37A; }
.mg-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .6));
}
.mg-gaten, .mg-tegels, .mg-fx, .mg-fx-boven {
  position: absolute;
  left: var(--mg-rand); top: var(--mg-rand);
  right: var(--mg-rand); bottom: var(--mg-rand);
}
/* Scherven, vonken en ringen blijven binnen het bord — anders vliegen ze
   over de kop en de score heen en lijkt het een foutje. */
.mg-fx { pointer-events: none; overflow: hidden; z-index: 3; }
/* De puntentelling mag wél boven de rand uitkomen. */
.mg-fx-boven { pointer-events: none; overflow: visible; z-index: 4; }
.mg-tegels { z-index: 2; }

/* De offerplaat onder de tegels: een schaakbordje van gefreesde vakjes
   met in elk vakje een dog hole, net als op het echte bed van de machine. */
.mg-gat {
  position: absolute;
  width: var(--mg-cel); height: var(--mg-cel);
  transform: translate(calc(var(--k) * var(--mg-cel)), calc(var(--r) * var(--mg-cel)));
  background: rgba(255, 226, 180, .035);
  box-shadow: inset 0 0 0 1px rgba(255, 226, 180, .04);
}
.mg-gat.is-donker { background: rgba(0, 0, 0, .22); }
.mg-gat::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 16%; height: 16%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 226, 180, .08);
}

/* ---------- de tegels ---------- */

.mg-tegel {
  position: absolute;
  left: 0; top: 0;
  width: var(--mg-cel); height: var(--mg-cel);
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: cubic-bezier(.35, 1.35, .5, 1);
  /* Bewust géén will-change en geen translate3d (zie zetPlek): dat maakt van
     elk van de 88 tegels een eigen GPU-laag, ook als hij stilligt. Op een
     iPad liep het grafisch geheugen daarvan vol: het bord viel stukje voor
     stukje weg en aanraken reageerde pas na seconden. Nu krijgt een tegel
     alleen een laag zolang hij beweegt. Zie ook "Lichte stand" hieronder. */
}
/* Vallen mag een tikje doorveren aan het eind — dat is het verschil
   tussen "verplaatst" en "gevallen". */
.mg-tegel.is-valt { transition-timing-function: cubic-bezier(.34, .05, .38, 1.28); }
/* Bij het uitstorten aan het begin plet de tegel op zijn onderkant. */
.mg-tegel.is-kletter { transform-origin: 50% 100%; }
/* Eén set regels voor overal waar een symbool getekend wordt: op het bord,
   in de uitleg en op het introscherm. De tekening vult bijna het hele
   vakje — een snoepje dat verlegen in een hoekje zit voelt niet lekker. */
/* Let op: .mg-tegel staat hierboven al op absolute (hij wordt met een
   transform over het bord geschoven) — die mag hier niet overschreven
   worden. Alleen de losse plaatjes in de uitleg hebben relative nodig. */
.mg-mini, .mg-logo-tegel { position: relative; }
.mg-tegel .mg-art,
.mg-tegel .mg-ovl,
.mg-mini .mg-art,
.mg-mini .mg-ovl,
.mg-logo-tegel .mg-art,
.mg-logo-tegel .mg-ovl {
  position: absolute; inset: 3%;
  width: 94%; height: 94%;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .45));
  pointer-events: none;
}
.mg-tegel .mg-ovl,
.mg-mini .mg-ovl,
.mg-logo-tegel .mg-ovl { filter: drop-shadow(0 0 6px rgba(255, 243, 214, .8)); }
.mg-tegel .mg-eekhoorn,
.mg-mini .mg-eekhoorn,
.mg-logo-tegel .mg-eekhoorn {
  position: absolute;
  left: 31%; top: 26%;
  width: 40%; height: 40%;
  object-fit: contain;
  pointer-events: none;
}

/* Een héél licht ademen, met per tegel een ander ritme. Stilstaand ziet
   een bord er dood uit; dit houdt het levend zonder af te leiden. */
.mg-tegel .mg-art { animation: mg-adem 3.6s ease-in-out infinite; }
.mg-tegel:nth-child(6n + 2) .mg-art { animation-delay: -.5s; animation-duration: 4.1s; }
.mg-tegel:nth-child(6n + 3) .mg-art { animation-delay: -1.1s; animation-duration: 3.2s; }
.mg-tegel:nth-child(6n + 4) .mg-art { animation-delay: -1.8s; animation-duration: 4.4s; }
.mg-tegel:nth-child(6n + 5) .mg-art { animation-delay: -2.4s; animation-duration: 3.8s; }
.mg-tegel:nth-child(6n + 6) .mg-art { animation-delay: -3s; animation-duration: 4.7s; }
/* Lichte stand (data-grafisch="licht" of "minimaal" op <html>, gekozen in
   js/grafisch.js: iPhone/iPad, zwakke toestellen, een toestel dat bij het
   meten traag bleek, of zelf gekozen onder Profiel & instellingen). Safari
   rekent drop-shadow- en blur-filters zonder de grafische chip uit en houdt
   per eindeloos geanimeerd element een eigen laag bij; op een iPad viel het
   bord daardoor stukje voor stukje weg. Dus hier: geen ademen, geen
   schaduwfilters op de symbolen en scherven, geen voorgrondstof en maar een
   handvol stofjes. Via :where() zodat tijdelijke animaties (hint, nee, knal,
   schudden) met hun eigen, specifiekere regels gewoon blijven werken. */
:where(:root[data-grafisch="licht"], :root[data-grafisch="minimaal"]) .mg-tegel .mg-art { animation: none; }
:where(:root[data-grafisch="licht"], :root[data-grafisch="minimaal"]) .mg-tegel .mg-art,
:where(:root[data-grafisch="licht"], :root[data-grafisch="minimaal"]) .mg-tegel .mg-ovl { filter: none; }
:root:is([data-grafisch="licht"], [data-grafisch="minimaal"]) .mg-scherf { filter: none; }
:where(:root[data-grafisch="licht"], :root[data-grafisch="minimaal"]) .mg-stofjes span:nth-child(n + 7) { display: none; }
:where(:root[data-grafisch="licht"], :root[data-grafisch="minimaal"]) .mg-stofjes.is-voor { display: none; }
:root:is([data-grafisch="licht"], [data-grafisch="minimaal"]) .mg-uitslag { backdrop-filter: none; }
/* Ook in de lichte stand: de knal van een symbool zonder brightness-filter
   (dat zijn er bij een grote combo dertig tegelijk), en geen gloed om de
   ringen, banen en stofzuigerstralen. Die groeien en schuiven in deze stand
   via transform (groeiRing in js/minigame-view.js). */
:root:is([data-grafisch="licht"], [data-grafisch="minimaal"]) .mg-tegel.is-knal .mg-art,
:root:is([data-grafisch="licht"], [data-grafisch="minimaal"]) .mg-tegel.is-knal .mg-ovl,
:root:is([data-grafisch="licht"], [data-grafisch="minimaal"]) .mg-tegel.is-knal .mg-eekhoorn { animation-name: mg-knal-licht !important; }
@keyframes mg-knal-licht {
  0%   { transform: scale(1); opacity: 1; }
  35%  { transform: scale(1.42) rotate(6deg); opacity: 1; }
  100% { transform: scale(.1) rotate(24deg); opacity: 0; }
}
:root:is([data-grafisch="licht"], [data-grafisch="minimaal"]) :is(.mg-knalring, .mg-schok, .mg-baan, .mg-straal) {
  box-shadow: none;
  will-change: auto;
}
/* Minimale stand, bovenop de lichte: een effen achtergrond in plaats van de
   getekende houtplaat met vignet, geen stofjes, geen schaduw om het frame en
   combo-teksten zonder grote gloed. Scherven, stof en schudden laat
   js/minigame-view.js in deze stand zelf weg. */
:root[data-grafisch="minimaal"] .mg-wand,
:root[data-grafisch="minimaal"] .mg-vignet,
:root[data-grafisch="minimaal"] .mg-stofjes { display: none; }
:root[data-grafisch="minimaal"] .mg-frame { filter: none; }
:root[data-grafisch="minimaal"] .mg-banner-tekst .mg-banner-titel { text-shadow: 0 3px 0 #8B4A1F; }
@keyframes mg-adem {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.035) rotate(1.2deg); }
}

/* De cycloon in de stofzuiger draait rond. */
.mg-art-zuiger { animation: mg-draai 5s linear infinite !important; }
@keyframes mg-draai { to { transform: rotate(360deg); } }

/* Specials gloeien zachtjes op, zodat je ze op een vol bord meteen ziet. */
.mg-ovl-bom { animation: mg-gloed 1.5s ease-in-out infinite; }
.mg-ovl-streep-rij, .mg-ovl-streep-kolom { animation: mg-gloed 1.9s ease-in-out infinite; }
@keyframes mg-gloed { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

/* De noodstop wacht op een tik en zegt dat ook: hij klopt, en er loopt
   een ring omheen naar buiten. */
.mg-ovl-noodstop {
  transform-origin: 50% 47%;
  animation: mg-drukmij 1.15s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(216, 35, 28, .8)) !important;
}
@keyframes mg-drukmij {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.09); }
}
.mg-tegel[data-speciaal="noodstop"]::after {
  content: '';
  position: absolute; left: 50%; top: 47%;
  width: 60%; height: 60%;
  margin: -30% 0 0 -30%;
  border-radius: 50%;
  border: 2px solid rgba(255, 140, 120, .9);
  animation: mg-drukring 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes mg-drukring {
  0%   { transform: scale(.85); opacity: .9; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

.mg-tegel.is-gekozen { z-index: 5; }
.mg-tegel.is-gekozen::before {
  content: '';
  position: absolute; inset: 2%;
  border-radius: 26%;
  border: 3px solid #FFE7B4;
  box-shadow: 0 0 20px rgba(255, 214, 120, .9), inset 0 0 16px rgba(255, 214, 120, .55);
  animation: mg-kies 1s ease-in-out infinite;
}
@keyframes mg-kies { 0%, 100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.07); opacity: 1; } }

.mg-tegel.is-hint .mg-art { animation: mg-hint .9s ease-in-out infinite; }
@keyframes mg-hint {
  0%, 100% { transform: scale(1) translateY(0); }
  40%      { transform: scale(1.14) translateY(-9%); }
}

.mg-tegel.is-nee .mg-art { animation: mg-nee .32s ease-in-out; }
@keyframes mg-nee {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-9%) rotate(-6deg); }
  75%      { transform: translateX(9%) rotate(6deg); }
}

/* De klap zelf: even groter en spierwit, dan weg. */
.mg-tegel.is-knal { z-index: 4; pointer-events: none; }
.mg-tegel.is-knal .mg-art,
.mg-tegel.is-knal .mg-ovl,
.mg-tegel.is-knal .mg-eekhoorn { animation: mg-knal .32s cubic-bezier(.3, .9, .4, 1) forwards !important; }
@keyframes mg-knal {
  0%   { transform: scale(1); filter: brightness(1); opacity: 1; }
  35%  { transform: scale(1.42) rotate(6deg); filter: brightness(2.6) saturate(.4); opacity: 1; }
  100% { transform: scale(.1) rotate(24deg); filter: brightness(3); opacity: 0; }
}

.mg-tegels.is-schudden .mg-tegel .mg-art { animation: mg-schudden .38s ease-in-out; }
@keyframes mg-schudden {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-10%, 6%) rotate(-14deg); }
  75%      { transform: translate(10%, -6%) rotate(14deg); }
}

/* ---------- effecten op het bord ---------- */

.mg-spat {
  position: absolute;
  border-radius: 40% 60% 55% 45%;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Een wegvliegend kopietje van het symbool dat je net weggespeeld hebt. */
.mg-scherf {
  position: absolute;
  line-height: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.mg-scherf svg { display: block; width: 100%; height: 100%; }
.mg-scherf img {
  position: absolute;
  left: 31%; top: 26%;
  width: 40%; height: 40%;
  object-fit: contain;
}
/* De lichtring op de plek waar de combinatie viel. */
.mg-knalring {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid #FFF3D6;
  box-shadow: 0 0 30px rgba(255, 233, 190, .85), inset 0 0 20px rgba(255, 214, 120, .5);
  pointer-events: none;
  will-change: width, height, opacity;
}
.mg-punten {
  position: absolute;
  font-family: 'Fraunces', serif; font-weight: 700;
  color: #FFF3D6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8), 0 0 20px rgba(255, 201, 77, .9);
  white-space: nowrap; pointer-events: none;
  will-change: transform, opacity;
}
/* De freesbaan: een lichtbundel die over de rij of kolom veegt. */
.mg-baan {
  position: absolute;
  pointer-events: none;
  border-radius: 999px;
  will-change: transform, opacity;
}
.mg-baan.is-rij {
  background: linear-gradient(90deg, rgba(255, 243, 214, 0), rgba(255, 243, 214, .95) 45%, rgba(255, 201, 77, .95) 55%, rgba(255, 243, 214, 0));
  box-shadow: 0 0 26px rgba(255, 214, 120, .85);
  transform-origin: left center;
}
.mg-baan.is-kolom {
  background: linear-gradient(180deg, rgba(255, 243, 214, 0), rgba(255, 243, 214, .95) 45%, rgba(255, 201, 77, .95) 55%, rgba(255, 243, 214, 0));
  box-shadow: 0 0 26px rgba(255, 214, 120, .85);
  transform-origin: center top;
}
.mg-schok {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 4px solid #FFC94D;
  box-shadow: 0 0 34px rgba(255, 201, 77, .9), inset 0 0 26px rgba(255, 201, 77, .55);
  pointer-events: none;
  will-change: width, height, opacity;
}
.mg-straal {
  position: absolute;
  height: 3px;
  transform-origin: left center;
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(255, 243, 214, .9);
  pointer-events: none;
}
.mg-flits { position: absolute; inset: 0; z-index: 6; pointer-events: none; }

/* ---------- banners ---------- */

.mg-banner {
  position: absolute;
  left: 0; right: 0; top: 34%;
  z-index: 7;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 0 16px;
  pointer-events: none;
}
.mg-banner-tekst {
  display: flex; flex-direction: column; align-items: center;
  will-change: transform, opacity;
}
/* Lange kreten ("De frees staat te gloeien!") mogen over twee regels;
   liever een regel erbij dan tekst die van het scherm af loopt. */
.mg-banner-titel {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(24px, 7.2vw, 40px); line-height: 1.02;
  text-align: center; text-wrap: balance;
  color: #FFD98F;
  text-shadow: 0 3px 0 #8B4A1F, 0 5px 18px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 201, 77, .7);
}
.mg-banner-sub {
  font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255, 243, 214, .75);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
}
.mg-banner-tekst.is-combi .mg-banner-titel { color: #FFF3D6; text-shadow: 0 3px 0 #C0431D, 0 6px 22px rgba(0, 0, 0, .75), 0 0 52px rgba(255, 140, 90, .9); }
.mg-banner-tekst.is-special .mg-banner-titel { color: #B8FFDD; text-shadow: 0 3px 0 #0C6B45, 0 5px 18px rgba(0, 0, 0, .7), 0 0 40px rgba(53, 184, 122, .8); }
.mg-banner-tekst.is-finale .mg-banner-titel { font-size: clamp(30px, 10vw, 56px); }

/* ---------- de voet ---------- */

/* Onder het bord: een balk die door alle drie de sterdrempels heen loopt.
   Hij vult de ruimte die op een hoog scherm onder het bord overblijft, en
   geeft er meteen iets nuttigs te zien. */
.mg-voet {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  text-align: center;
  padding: 12px 22px 6px;
}
.mg-balk {
  position: relative;
  width: 100%; max-width: 340px; height: 9px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .45);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 226, 180, .1);
  overflow: hidden;
}
.mg-balk-vul {
  display: block; height: 100%; width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #C97D3E, #E8A33D 60%, #FFD98F);
  box-shadow: 0 0 14px rgba(255, 201, 77, .8);
  transition: width .5s cubic-bezier(.2, .9, .3, 1);
}
.mg-voet-tip { font-size: 11px; color: rgba(255, 226, 180, .45); font-weight: 600; }

/* ---------- het introscherm ---------- */

.mg-intro-scherm { justify-content: center; }
.mg-intro {
  position: relative; z-index: 2;
  margin: auto;
  width: min(420px, calc(100% - 32px));
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 20px 24px;
  text-align: center;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(58, 38, 19, .92), rgba(28, 17, 8, .95));
  border: 1px solid rgba(255, 214, 150, .22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 226, 180, .18);
}
.mg-intro-logo { display: flex; justify-content: center; align-items: center; gap: 4px; margin-bottom: 10px; }
.mg-logo-tegel { display: block; width: 62px; height: 62px; flex: 0 0 auto; }
.mg-logo-tegel:nth-child(1) { transform: rotate(-14deg) translateY(5px); animation: mg-adem 3.4s ease-in-out infinite; }
.mg-logo-tegel:nth-child(2) { transform: scale(1.18); animation: mg-adem 3.9s ease-in-out -1.2s infinite; }
.mg-logo-tegel:nth-child(3) { transform: rotate(14deg) translateY(5px); animation: mg-adem 4.3s ease-in-out -2.1s infinite; }
.mg-intro-kicker { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 201, 77, .8); }
.mg-titel {
  font-family: 'Fraunces', serif; font-size: 32px; line-height: 1.05; margin: 4px 0 8px;
  color: #FFD98F;
  text-shadow: 0 3px 0 #8B4A1F, 0 6px 22px rgba(0, 0, 0, .6);
}
.mg-intro-tekst { font-size: 14px; line-height: 1.5; color: rgba(251, 240, 220, .85); margin: 0 0 14px; }
.mg-intro-tekst strong { color: #FFD98F; }
.mg-intro-rijtje { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.mg-intro-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 226, 180, .06);
  border: 1px solid rgba(255, 226, 180, .1);
  text-align: left;
  font-size: 13px; color: rgba(251, 240, 220, .82);
}
.mg-intro-item strong { color: #FFE7B4; }
.mg-mini { display: block; width: 40px; height: 40px; flex: 0 0 auto; }
.mg-intro-xp {
  font-size: 12.5px; font-weight: 700; color: #FFC94D;
  background: rgba(232, 163, 61, .12);
  border: 1px solid rgba(232, 163, 61, .28);
  border-radius: 12px; padding: 8px 10px; margin-bottom: 8px;
}
.mg-intro-record { font-size: 12px; color: rgba(255, 226, 180, .7); margin-bottom: 12px; }
.mg-intro-knoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* De knoppen zijn houten plankjes: een verloop van licht naar donker
   hout, de nerf er als fijne streepjes overheen, een dikke donkere rand
   eronder waar hij op rust, en aan weerszijden een schroefje. Indrukken
   laat hem op die rand zakken. */
.mg-knop {
  position: relative;
  border: none; border-radius: 12px;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px;
  padding: 15px 34px;
  cursor: pointer;
  color: #FFEFCF;
  /* De nerf loopt in de lengte over het plankje, in drie lagen met
     verschillende afstanden — dat leest als hout in plaats van als een
     streepjespatroon. */
  background:
    repeating-linear-gradient(178deg, rgba(46, 27, 11, .12) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(181deg, rgba(46, 27, 11, .08) 0 2px, transparent 2px 17px),
    repeating-linear-gradient(176deg, rgba(255, 226, 180, .07) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #C08343 0%, #A0662B 48%, #7C4B1E 100%);
  box-shadow:
    0 5px 0 #4C2D11,
    0 12px 22px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 226, 180, .38),
    inset 6px 0 10px -6px rgba(46, 27, 11, .55),
    inset -6px 0 10px -6px rgba(46, 27, 11, .55),
    inset 0 -3px 8px rgba(46, 27, 11, .45);
  text-shadow: 0 1px 0 rgba(46, 27, 11, .65), 0 2px 10px rgba(0, 0, 0, .35);
  transition: transform .1s ease, box-shadow .1s ease;
}
/* De twee schroefjes waarmee het plankje vastzit. */
.mg-knop::before,
.mg-knop::after {
  content: '';
  position: absolute; top: 50%;
  width: 10px; height: 10px; margin-top: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #7A5228, #33200D 72%);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 226, 180, .22);
}
.mg-knop::before { left: 13px; }
.mg-knop::after { right: 13px; }
.mg-knop:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #4C2D11, 0 4px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 226, 180, .28), inset 0 -2px 6px rgba(46, 27, 11, .5);
}
.mg-knop-groot { font-size: 19px; padding: 17px 34px; }
/* Hetzelfde plankje, maar dan verweerd en onbehandeld. */
.mg-knop-stil {
  color: rgba(255, 239, 207, .82);
  font-size: 15px; padding: 12px 30px;
  background:
    repeating-linear-gradient(178deg, rgba(20, 11, 4, .22) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(181deg, rgba(20, 11, 4, .14) 0 2px, transparent 2px 17px),
    repeating-linear-gradient(176deg, rgba(255, 226, 180, .045) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #6A4420 0%, #533314 48%, #3E250E 100%);
  box-shadow:
    0 3px 0 #2A190A,
    0 8px 16px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 226, 180, .16),
    inset 6px 0 10px -6px rgba(20, 11, 4, .6),
    inset -6px 0 10px -6px rgba(20, 11, 4, .6),
    inset 0 -2px 6px rgba(20, 11, 4, .5);
}
.mg-knop-stil:active { transform: translateY(2px); box-shadow: 0 1px 0 #33200D, inset 0 1px 0 rgba(255, 226, 180, .16); }

/* ---------- uitslag ---------- */

.mg-uitslag {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(58, 38, 19, .72), rgba(10, 6, 2, .92));
  backdrop-filter: blur(3px);
  animation: mg-fade .4s ease-out both;
}
@keyframes mg-fade { from { opacity: 0; } to { opacity: 1; } }
.mg-uitslag-kaart {
  width: min(380px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 20px 22px;
  text-align: center;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(62, 41, 20, .96), rgba(26, 16, 7, .98));
  border: 1px solid rgba(255, 214, 150, .26);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 226, 180, .2);
  animation: mg-uitslag-in .55s cubic-bezier(.2, 1.5, .4, 1) both;
}
@keyframes mg-uitslag-in {
  from { transform: scale(.75) translateY(24px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.mg-uitslag-sterren { display: flex; justify-content: center; gap: 6px; margin-bottom: 6px; }
.mg-uitslag-ster { font-size: 42px; color: rgba(255, 226, 180, .16); }
.mg-uitslag-ster.is-aan { color: #FFC94D; text-shadow: 0 0 26px rgba(255, 201, 77, .9); }
.mg-uitslag-ster:nth-child(2) { font-size: 54px; margin-top: -8px; }
.mg-uitslag-titel {
  font-family: 'Fraunces', serif; font-size: 26px; margin: 2px 0 6px;
  color: #FFD98F; text-shadow: 0 3px 0 #8B4A1F, 0 6px 20px rgba(0, 0, 0, .6);
}
.mg-uitslag-record { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #FFC94D; margin-bottom: 6px; }
.mg-uitslag-score {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 46px; line-height: 1;
  color: #FFF3D6; text-shadow: 0 0 34px rgba(255, 201, 77, .7);
  font-variant-numeric: tabular-nums;
}
.mg-uitslag-punten-label { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 217, 143, .55); margin-bottom: 10px; }
.mg-uitslag-xp {
  display: inline-block;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px;
  color: #3A2210;
  background: linear-gradient(180deg, #F7D79B, #DB9F44);
  border-radius: 999px; padding: 6px 20px;
  box-shadow: 0 4px 0 #6B4020, 0 10px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .4);
}
.mg-uitslag-cap { font-size: 11.5px; line-height: 1.45; color: rgba(251, 240, 220, .6); margin: 10px 0 0; }
/* Een badge die je met dit potje verdiende, meteen op het uitslagscherm. */
.mg-uitslag-badges { margin: 14px 0 2px; }
.mg-uitslag-badges-titel {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #FFC94D; margin-bottom: 8px;
}
.mg-uitslag-badges .badge-row { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.mg-uitslag-badges .badge-tile {
  background: rgba(255, 226, 180, .08);
  border-color: rgba(255, 226, 180, .3);
  max-width: 130px;
}
.mg-uitslag-badges .badge-title { color: #FFEFCF; }
.mg-uitslag-badges .badge-desc { color: rgba(255, 243, 214, .68); }
.mg-uitslag-badges-rest { font-size: 11px; color: rgba(255, 243, 214, .6); margin-top: 6px; }
.mg-uitslag-stats { display: flex; justify-content: center; gap: 10px; margin: 16px 0 4px; }
.mg-uitslag-stats > div {
  flex: 1;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(255, 226, 180, .06);
  border: 1px solid rgba(255, 226, 180, .1);
}
.mg-uitslag-stats strong { font-family: 'Fraunces', serif; font-size: 20px; color: #FFE7B4; }
.mg-uitslag-stats span { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 217, 143, .55); }
.mg-uitslag-knoppen { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ---------- de kaart op home en het aanbod na een quiz ---------- */

/* De kaart op home is een houten bordje op de werkbank — van dezelfde
   plaat als de achtergrond van het spel, compleet met nerf, een knoest en
   vier schroefjes in de hoeken. Bewust een heel ander ding dan de Kennis
   Battle-kaart: die is een donkere plaquette met tekst, dit is een plank
   met echte speelstukken erop. */
.minigame-kaart {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  overflow: hidden;
  text-align: left;
  padding: 13px 11px;
  margin-bottom: 14px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  color: #FFF3D6;
  background: #6B4520;
  box-shadow:
    0 6px 0 #3E250E,
    0 14px 26px rgba(46, 27, 11, .4),
    inset 0 1px 0 rgba(255, 226, 180, .3),
    inset 6px 0 12px -8px rgba(28, 16, 6, .7),
    inset -6px 0 12px -8px rgba(28, 16, 6, .7);
  transition: transform .1s ease, box-shadow .1s ease;
}
.minigame-kaart:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #3E250E, 0 5px 12px rgba(46, 27, 11, .4), inset 0 1px 0 rgba(255, 226, 180, .22);
}
.minigame-kaart-hout {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Vier schroefjes waarmee het bordje op de werkbank zit. */
.minigame-kaart::before,
.minigame-kaart::after {
  content: '';
  position: absolute;
  left: 6px; right: 6px;
  height: 10px;
  background:
    radial-gradient(circle 5px at 50% 50%, #9A6A34 0 26%, #3A2410 32% 74%, rgba(28, 16, 6, .45) 80%, transparent 88%) left center / 10px 10px no-repeat,
    radial-gradient(circle 5px at 50% 50%, #9A6A34 0 26%, #3A2410 32% 74%, rgba(28, 16, 6, .45) 80%, transparent 88%) right center / 10px 10px no-repeat;
  pointer-events: none;
}
.minigame-kaart::before { top: 6px; }
.minigame-kaart::after { bottom: 6px; }
/* Een glans die er langzaam overheen loopt: dit is de kaart die je oog
   moet vangen tussen alle rustige lesblokken. */
.minigame-kaart-glans {
  position: absolute; top: -60%; bottom: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 243, 214, .2), transparent);
  transform: skewX(-18deg);
  animation: mg-veeg 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mg-veeg {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
/* Drie speelstukken die half over elkaar op de plank liggen. */
.minigame-kaart-stukken {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  margin-left: 9px;
  filter: drop-shadow(0 3px 5px rgba(28, 16, 6, .55));
}
.minigame-kaart-stukken .mg-mini { width: 34px; height: 34px; }
.minigame-kaart-stukken .mg-mini:nth-child(1) { transform: rotate(-13deg); }
.minigame-kaart-stukken .mg-mini:nth-child(2) { margin-left: -12px; transform: translateY(-3px) scale(1.14); z-index: 1; }
.minigame-kaart-stukken .mg-mini:nth-child(3) { margin-left: -12px; transform: rotate(13deg); }
/* Hoeveel potjes je er nog tegoed hebt, als muntje op de stapel. */
.minigame-kaart-aantal {
  position: absolute; right: -7px; top: -7px;
  min-width: 19px; height: 19px;
  display: grid; place-items: center;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #FFD98F, #E8A33D);
  color: #3A2210;
  font-size: 11px; font-weight: 800;
  box-shadow: 0 2px 0 #7A4A1F, 0 3px 6px rgba(0, 0, 0, .4);
}
.minigame-kaart-tekst { position: relative; flex: 1 1 auto; min-width: 0; }
.minigame-kaart-label {
  display: block;
  font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #FFC94D;
  text-shadow: 0 1px 0 rgba(46, 27, 11, .8);
}
.minigame-kaart-titel {
  display: block;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; line-height: 1.15;
  white-space: nowrap;
  color: #FFEFCF;
  text-shadow: 0 1px 0 rgba(46, 27, 11, .75), 0 2px 10px rgba(0, 0, 0, .35);
}
.minigame-kaart-sub {
  display: block;
  font-size: 11.5px; color: rgba(255, 243, 214, .72);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(46, 27, 11, .6);
  margin-top: 1px;
}
/* De CTA is een klein plankje op het bordje. */
.minigame-kaart-cta {
  position: relative;
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #FFEFCF;
  border-radius: 50%;
  background: linear-gradient(180deg, #C08343, #8E5A24);
  box-shadow: 0 3px 0 #3E250E, inset 0 1px 0 rgba(255, 226, 180, .4);
}
/* Een pijltje in plaats van het woord "Bestellingen": die tekst was zo breed
   dat de knop over de titel van de kaart heen viel. */
.kaart-chevron {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  margin-left: 3px;
  margin-top: -3px;
  text-shadow: 0 1px 0 rgba(46, 27, 11, .7);
}

.minigame-aanbod {
  margin: 18px 0 4px;
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  color: #FFF3D6;
  text-align: left;
  background: linear-gradient(135deg, #7A4F2A, #3E2711);
  box-shadow: 0 8px 22px rgba(46, 27, 11, .4), inset 0 1px 0 rgba(255, 226, 180, .22);
  animation: fx-pop-in .55s cubic-bezier(.3, 1.6, .5, 1) both;
}
.minigame-aanbod-kop { display: flex; align-items: center; gap: 7px; }
.minigame-aanbod-icoon { font-size: 16px; }
.minigame-aanbod-label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #FFC94D; }
.minigame-aanbod-titel { font-family: 'Fraunces', serif; font-weight: 700; font-size: 21px; margin-top: 3px; }
.minigame-aanbod-sub { font-size: 13px; line-height: 1.45; color: rgba(255, 243, 214, .75); margin-top: 3px; }
.minigame-aanbod-knoppen { display: flex; gap: 8px; margin-top: 12px; }
.minigame-aanbod-knoppen .btn { flex: 1; }
/* Op de donkere kaart heeft de gewone knopstijl te weinig contrast; hier
   krijgt hij hetzelfde gouden jasje als in het spel zelf. */
.minigame-aanbod-knoppen .btn.primary {
  color: #FFEFCF; font-weight: 700;
  text-shadow: 0 1px 0 rgba(46, 27, 11, .6);
  background:
    repeating-linear-gradient(178deg, rgba(46, 27, 11, .12) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(181deg, rgba(46, 27, 11, .08) 0 2px, transparent 2px 17px),
    repeating-linear-gradient(176deg, rgba(255, 226, 180, .07) 0 1px, transparent 1px 13px),
    linear-gradient(180deg, #C08343 0%, #A0662B 48%, #7C4B1E 100%);
  box-shadow: 0 3px 0 #4C2D11, inset 0 1px 0 rgba(255, 226, 180, .35), inset 0 -2px 6px rgba(46, 27, 11, .4);
}
.minigame-aanbod-knoppen .btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #4C2D11, inset 0 1px 0 rgba(255, 226, 180, .28); }
.minigame-aanbod-knoppen .btn.ghost {
  background: rgba(255, 226, 180, .1);
  color: rgba(255, 243, 214, .85);
  border-color: rgba(255, 226, 180, .35);
}
.minigame-aanbod-knoppen .btn.ghost:active { background: rgba(255, 226, 180, .18); }
.minigame-bewaard {
  margin: 18px 0 4px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 13px; text-align: center;
}

/* Wie weinig beweging wil krijgt hetzelfde spel, maar dan zonder alles wat
   los in het rond beweegt. De animaties die iets uitleggen (vallen,
   ruilen) blijven — die zijn de spelregels. */
@media (prefers-reduced-motion: reduce) {
  .mg-stofjes,
  .minigame-kaart-glans { display: none; }
  .mg-tegel .mg-art,
  .mg-art-zuiger,
  .mg-ovl-bom,
  .mg-ovl-noodstop,
  .mg-tegel[data-speciaal="noodstop"]::after,
  .mg-ovl-streep-rij,
  .mg-ovl-streep-kolom,
  .mg-zetten.is-bijna .mg-zetten-getal,
  .mg-tegel.is-gekozen::before { animation: none !important; }
}


/* ==========================================================================
   Freesdoolhof (js/doolhof-view.js)
   --------------------------------------------------------------------------
   De tweede bonusronde: je zet de machine aan, hangt de juiste frees in de
   spindel, zet het nulpunt en freest daarna een doolhof uit de plank. Hij
   deelt het jasje van Werkplaats Crush — hetzelfde volledige scherm
   (.mg-scherm), dezelfde houten knoppen, dezelfde intro- en uitslagkaart —
   zodat de twee spellen als één ding aanvoelen. Alles wat hieronder staat
   is wat er níét al was: de machine, de gereedschapswissel, de plank op het
   spoilboard en het jogpaneel eronder.

   De maatvoering van het speelveld hangt aan --dh-cel, de grootte van één
   vakje. Die wordt in JavaScript berekend uit de ruimte die er is. */

.dh-scherm { background: #14171A; }
/* De schermen vóór de job (machine aanzetten, gereedschap wisselen) hebben
   geen spoilboard nodig: daar gaat het om de machine, niet om de plank. Een
   rustige verloopachtergrond houdt de aandacht bij de knoppen. */
.dh-vlak {
  background:
    radial-gradient(ellipse 90% 60% at 50% 8%, rgba(120, 150, 172, .16), transparent 70%),
    linear-gradient(180deg, #222A31 0%, #171D23 45%, #0E1216 100%);
}
.dh-vlak::after { background: radial-gradient(ellipse 120% 70% at 50% 40%, transparent 40%, rgba(4, 8, 11, .55) 100%); }
.dh-bed { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.dh-scherm::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 120% 68% at 50% 42%, rgba(8, 12, 16, .18) 20%, rgba(4, 8, 11, .88) 100%);
}
/* Alles boven de vignettering; de overlays (countdown, banner, gcode) staan
   absoluut en houden dat, dus die krijgen hier geen position mee. */
.dh-scherm > *:not(.dh-bed) { z-index: 2; }
.dh-opstart-kop,
.dh-stappen,
.dh-opstart-voet,
.dh-toneel,
.dh-bank,
.dh-veld,
.dh-pendant { position: relative; }
.mg-kop-vak { width: 62px; }

/* ---------- het opstartscherm ---------- */

.dh-opstart, .dh-wissel { overflow-y: auto; }
.dh-opstart-kop { text-align: center; padding: 4px 18px 10px; }
.dh-opstart-kop h1 {
  font-family: 'Fraunces', serif; font-size: 24px; margin: 0 0 4px;
  color: #FFD98F; text-shadow: 0 3px 0 #6B4020, 0 6px 20px rgba(0, 0, 0, .6);
}
/* min-height is gemeten op de langste tekst die hier ooit komt te staan
   (zie "Testen" in docs/freesdoolhof.md) — anders springt .dh-stappen
   eronder een stukje op of neer zodra een langere/kortere regel verschijnt. */
.dh-opstart-kop p { font-size: 12.5px; line-height: 1.45; color: rgba(226, 238, 246, .75); margin: 0; min-height: 38px; }
.dh-opstart-kop strong { color: #FFD98F; }

.dh-stappen { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 14px; flex: 1; }
.dh-stap {
  display: grid;
  grid-template-columns: 22px minmax(72px, 1fr) minmax(84px, 1.2fr) 66px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(40, 50, 58, .92), rgba(20, 26, 31, .95));
  border: 1px solid rgba(180, 208, 226, .14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(226, 240, 250, .1);
  transition: opacity .3s ease, border-color .3s ease;
}
/* Wat nog niet aan de beurt is, staat op de achtergrond te wachten. */
.dh-stap.is-wacht { opacity: .42; }
.dh-stap.is-nu { border-color: rgba(255, 201, 77, .45); box-shadow: 0 10px 26px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 201, 77, .18); }
.dh-stap.is-aan { border-color: rgba(76, 224, 126, .35); }
.dh-stap-nr {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 15px;
  width: 22px; height: 22px; line-height: 22px; text-align: center;
  border-radius: 50%;
  color: #0E1418; background: rgba(226, 240, 250, .5);
}
.dh-stap.is-nu .dh-stap-nr { background: #FFC94D; animation: dh-klop 1.4s ease-in-out infinite; }
.dh-stap.is-aan .dh-stap-nr { background: #4CE07E; }
@keyframes dh-klop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.dh-stap-art { display: flex; align-items: center; justify-content: center; }
.dh-stap-art svg { width: 100%; height: auto; max-height: 80px; }
.dh-stap-art-cycloon svg { max-height: 96px; }
.dh-stap-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dh-stap-titel { font-size: 12.5px; font-weight: 700; color: #E6F1F8; }
.dh-stap-status {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(200, 220, 234, .5);
}
.dh-stap.is-aan .dh-stap-status { color: #7BE49C; }

/* De knoppen op het paneel: de tekening ís de knop, dus geen randje eromheen. */
.dh-aanknop, .dh-tuimel, .dh-camvac {
  border: none; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.dh-aanknop svg { width: 58px; height: auto; }
.dh-camvac svg { width: 46px; height: auto; }
.dh-tuimel svg { width: 34px; height: auto; }
.dh-aanknop:active, .dh-tuimel:active, .dh-camvac:active { transform: scale(.94); }
.dh-aanknop:disabled, .dh-tuimel:disabled, .dh-camvac:disabled { cursor: default; }
.dh-stap.is-nu .dh-aanknop:not(:disabled),
.dh-stap.is-nu .dh-tuimel:not(:disabled),
.dh-stap.is-nu .dh-camvac:not(:disabled) { animation: dh-wenk 1.6s ease-in-out infinite; }
@keyframes dh-wenk {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 201, 77, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 12px rgba(255, 201, 77, .65)); transform: scale(1.05); }
}

/* De lampjes op de kast en de VFD: donker tot er stroom op staat. */
.dh-led { fill: #1B2429; transition: fill .3s ease, filter .3s ease; }
.dh-kast-tekst { fill: #4A5A63; transition: fill .3s ease; }
.is-stroom .dh-led-stroom { fill: #4CE07E; filter: drop-shadow(0 0 6px rgba(76, 224, 126, .9)); }
.is-stroom .dh-kast-tekst { fill: #8FE0FF; }
/* De aanknop licht op zodra er stroom op staat — hij blijft ingedrukt. */
.dh-knop-kop { transition: fill .3s ease; }
.is-stroom .dh-knop-kop { fill: url(#dhKnopAan); }
.is-stroom .dh-aanknop { filter: drop-shadow(0 0 10px rgba(76, 224, 126, .55)); }
.is-spindel .dh-led-klaar { fill: #FFC94D; filter: drop-shadow(0 0 6px rgba(255, 201, 77, .9)); }
/* Het display van de VFD: donker tot hij stroom heeft, dan dat typische rood. */
.dh-vfd-getal { fill: #3A1512; transition: fill .3s ease; }
/* Aan maar nog niet aangestuurd: stand-by, knipperend op 0000 — precies wat
   de VFD in de werkplaats doet tot de besturing hem laat draaien. De RUN
   blijft daarom ook uit. */
.is-vfd .dh-vfd-getal {
  fill: #FF5A32;
  filter: drop-shadow(0 0 5px rgba(255, 90, 50, .85));
  animation: dh-vfd-knipper 1.1s steps(1, end) infinite;
}
@keyframes dh-vfd-knipper {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: .12; }
}
.dh-vfd-run { fill: #2A5A3A; transition: fill .3s ease; }
/* De tuimelschakelaar (sinds v185 die van de afzuiging) staat uit met de arm
   naar beneden en klapt omhoog als hij aangaat — dat is de kant op die een
   schakelaar in de werkplaats ook maakt. Hij deed het eerst andersom (arm boven in rust, omlaag bij aan), en
   dat leest als uitzetten. De arm is getekend met de punt omhoog vanaf het
   draaipunt, dus 168° is naar beneden en 0° naar boven. */
.dh-tuimel-arm {
  transform-box: view-box;
  transform-origin: 30px 52px;
  transform: rotate(168deg);
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1);
}
.is-afzuiging .dh-tuimel-arm { transform: rotate(0deg); }
/* De rode wip (sinds v185 die van de VFD) zakt aan de bovenkant in en licht op. */
.dh-wip { transform-box: view-box; transform-origin: 45px 55px; transition: transform .18s ease; }
.is-vfd .dh-wip-boven { fill: url(#dhWipAan); }
.is-vfd .dh-wip { transform: translateY(1.5px); }
.is-vfd .dh-camvac { filter: drop-shadow(0 0 10px rgba(245, 68, 42, .5)); }

/* De cycloon: pas als de afzuiging draait gaat er lucht doorheen. De
   slierten zakken door de kegel naar beneden, zoals het zaagsel doet. */
.dh-wervel path { stroke-opacity: 0; transform-box: view-box; }
.is-afzuiging .dh-wervel path {
  animation: dh-wervel 1.15s linear infinite;
  animation-delay: calc(var(--i) * -.16s);
}
@keyframes dh-wervel {
  0%   { stroke-opacity: 0; transform: translateY(-6px); }
  25%  { stroke-opacity: .75; }
  100% { stroke-opacity: 0; transform: translateY(30px); }
}
.dh-lucht { opacity: 0; transition: opacity .4s ease; }
.is-afzuiging .dh-lucht { opacity: .8; animation: dh-lucht 1.1s linear infinite; }
@keyframes dh-lucht {
  0% { transform: translateX(6px); opacity: 0; }
  40% { opacity: .8; }
  100% { transform: translateX(-8px); opacity: 0; }
}
.dh-damp { animation: dh-damp 2.6s ease-in-out infinite; }
@keyframes dh-damp { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }

/* De grote knop onderaan het opstart- en gereedschapsscherm. Hij blijft
   dood tot de stap ervoor klaar is; daarna is hij het enige wat licht geeft. */
.dh-opstart-voet { padding: 14px 16px max(16px, var(--safe-bottom)); }
.dh-grote-knop {
  width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 20px;
  border-radius: 16px;
  border: 1px solid rgba(180, 208, 226, .18);
  background: linear-gradient(180deg, rgba(46, 58, 66, .9), rgba(22, 30, 36, .95));
  color: rgba(200, 220, 234, .45);
  cursor: default;
  transition: all .3s ease;
}
.dh-grote-knop-label { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; }
.dh-grote-knop-sub { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dh-grote-knop.is-klaar {
  cursor: pointer;
  color: #0C1A10;
  border-color: rgba(124, 240, 160, .5);
  background: linear-gradient(180deg, #6FE79A, #2FAA5F);
  box-shadow: 0 6px 0 #17663A, 0 14px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation: dh-startklaar 1.8s ease-in-out infinite;
}
.dh-grote-knop.is-klaar:active { transform: translateY(4px); box-shadow: 0 2px 0 #17663A, 0 6px 14px rgba(0, 0, 0, .45); }
.dh-grote-knop.is-start .dh-grote-knop-label { font-size: 24px; }
@keyframes dh-startklaar {
  0%, 100% { box-shadow: 0 6px 0 #17663A, 0 14px 28px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
  50% { box-shadow: 0 6px 0 #17663A, 0 14px 34px rgba(76, 224, 126, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
}

/* ---------- gereedschapswissel en nulpunt ---------- */

/* De opdracht staat groot in beeld: welke frees moet erin? Dat is het enige
   wat je op dit scherm hoeft te weten. */
.dh-opdracht { text-align: center; padding: 2px 18px 8px; }
.dh-opdracht-kicker {
  font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 201, 77, .85);
}
.dh-opdracht-naam {
  font-family: 'Fraunces', serif; font-size: 27px; line-height: 1.1; margin: 2px 0 6px;
  color: #FFD98F; text-shadow: 0 3px 0 #6B4020, 0 6px 20px rgba(0, 0, 0, .6);
}

/* Zonder het "Freesdoolhof"-naambordje bovenaan komt de opdracht hoger
   te staan, met wat extra lucht tussen de kicker en de titel eronder. */
.dh-wissel-zonder-kop .mg-kop { padding-bottom: 0; }
.dh-wissel-zonder-kop .dh-opdracht { padding-top: 0; }
.dh-wissel-zonder-kop .dh-opdracht-naam { margin-top: 10px; }
/* min-height dekt de langste tekst die hier ooit komt te staan (gemeten op
   375px breed, zie "Testen" in docs/freesdoolhof.md) — dit blokje staat
   gedeeld boven de gereedschapsbank én het verplaatsscherm, en allebei
   krijgen ze weleens een tekst van drie regels (een misgreep die zowel de
   verkeerde als de gevraagde frees noemt, of een tussenstand bij het
   omspannen). Zonder deze marge schuift de bank/plank eronder een stukje
   op of neer zodra zo'n langere tekst verschijnt. */
.dh-opdracht-hint {
  font-size: 12.5px; line-height: 1.45; color: rgba(226, 238, 246, .78); margin: 0;
  min-height: 56px;
}
.dh-opdracht-hint strong { color: #FFD98F; }

/* Het toneel: de spindel van opzij, met onder hem de plank. Daar sleep je
   de frees in, en daar komt straks de touch plate onder. */
.dh-toneel {
  /* Hoog genoeg dat er lucht zit tussen de punt van de frees en de plank.
     Die ruimte is de zakbeweging van de probecyclus: ligt de plank er vlak
     tegenaan, dan valt er niets te zakken. */
  /* De hoogte staat in een variabele omdat de spindel eraan meeschaalt:
     hij moet passen mét de plank en de zakweg eronder. */
  --dh-toneel-h: min(392px, 50vh);
  height: var(--dh-toneel-h);
  /* Niet laten indrukken door de flexbox: op een kort scherm knijpt hij het
     toneel anders platter dan de spindel zelf, en dan ligt de plank ineens
     bóven de frees. Het scherm scrollt liever (dh-opstart/dh-wissel doen dat
     al) dan dat het toneel zichzelf in de knoop legt. */
  flex: 0 0 auto;
  width: 100%;
  display: flex; align-items: flex-start; justify-content: center;
  /* De plate wacht onder het toneel tot hij naar binnen schuift. */
  overflow: hidden;
}
/* De plank waar de frees straks in gaat, onderin het toneel. Daar ligt de
   touch plate straks op. */
.dh-werkstuk {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 34px;
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(46, 27, 11, .16) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #9A6C3D 0%, #7A4F26 55%, #4E3016 100%);
  box-shadow: inset 0 2px 0 rgba(255, 226, 180, .22), inset 0 -3px 8px rgba(30, 16, 5, .6), 0 -6px 16px rgba(0, 0, 0, .45);
}
.dh-spindel-zij {
  position: relative;
  /* Zo breed als het past. De punt van de frees hangt op 2,27 × de breedte
     van deze tekening; daaronder moet nog ruimte zijn voor het blokje, de
     zakweg en een streepje plank — samen zo'n 100px. Past dat niet, dan gaat
     de hele machine een maatje kleiner in plaats van dat de plank omhoog
     kruipt. */
  width: min(120px, calc((var(--dh-toneel-h, 392px) - 100px) / 2.27));
  transition: transform .85s cubic-bezier(.45, 0, .3, 1);
  z-index: 2;
}
.dh-spindel-zij > svg { position: relative; z-index: 1; }
.dh-spindel-zij svg { width: 100%; height: auto; display: block; }
/* De boring waar de frees in moet: het doelvak van het slepen. */
.dh-collet-doel {
  display: none;
  position: absolute; left: 50%; bottom: -6px;
  width: 54px; height: 54px; margin-left: -27px;
  border-radius: 10px;
  border: 2px dashed rgba(255, 201, 77, .5);
  background: rgba(255, 201, 77, .08);
  animation: dh-doel 1.6s ease-in-out infinite;
}
.is-leeg .dh-collet-doel { display: block; }
.is-gereedschap .dh-collet-doel { display: none; }
@keyframes dh-doel { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
/* De frees die erin zit: hij steekt onder de spanmoer uit. */
.dh-geplaatst {
  position: absolute; left: 50%; top: 84%;
  z-index: 0;
  width: 25%; margin-left: -12.5%;
  cursor: grab;
  touch-action: none;
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, 1.5, .4, 1);
}
.dh-geplaatst:empty { opacity: 0; }
.dh-geplaatst svg { width: 100%; height: auto; display: block; }
.dh-geplaatst.is-sleep { cursor: grabbing; transition: none; z-index: 6; }
/* De oude frees die eruit gehaald wordt, valt naar beneden uit beeld. */
.dh-geplaatst.is-uit { opacity: 0; transform: translateY(40px) rotate(14deg); }
.is-gereedschap .dh-geplaatst { animation: dh-erin .4s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes dh-erin {
  from { opacity: 0; transform: translateY(-14px) scale(.9); }
  to { opacity: 1; transform: none; }
}
/* De touch plate schuift van onderen in beeld en komt op de plank te liggen.
   Hoe hoog precies rekent legPlankKlaar() uit — die zet `bottom` en de dikte
   van de plank; wat hier staat is alleen wat er geldt tot dat gebeurd is. */
.dh-plate {
  position: absolute; left: 50%; bottom: 22px;
  width: 150px; margin-left: -75px;
  transform: translateY(150%);
  transition: transform .6s cubic-bezier(.3, 1.2, .4, 1);
  /* Onder de spindel, zodat de frees vóór het blokje blijft staan terwijl
     hij erop zakt. */
  z-index: 1;
}
.dh-plate svg { width: 100%; height: auto; display: block; }
.is-plate .dh-plate { transform: translateY(0); }
/* Het vonkje op het moment dat de frees de plate raakt. */
.dh-vonk {
  position: absolute; left: 50%; top: 50%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  z-index: 4;
  border-radius: 50%;
  background: #7BE49C;
  opacity: 0;
}
.is-contact .dh-vonk { animation: dh-vonk .7s ease-out 1 both; }
@keyframes dh-vonk {
  0% { opacity: 1; box-shadow: 0 0 0 0 rgba(123, 228, 156, .8); }
  100% { opacity: 0; box-shadow: 0 0 0 46px rgba(123, 228, 156, 0); }
}

/* Zolang de oude frees er nog in zit: een pijl ernaast die naar beneden
   wipt, en geen keuzes op de bank. Eerst die frees eruit. */
.dh-uitpijl {
  position: absolute; left: 50%; top: 88%;
  margin-left: 22px;
  display: none;
  flex-direction: column; align-items: center; gap: 2px;
  color: #FFC94D;
  pointer-events: none;
}
.is-uitnemen .dh-uitpijl { display: flex; animation: dh-uitpijl 1.1s ease-in-out infinite; }
.dh-uitpijl svg { width: 26px; height: 38px; display: block; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.dh-uitpijl-tekst {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .8);
}
@keyframes dh-uitpijl {
  0%, 100% { transform: translateY(-6px); opacity: .75; }
  50% { transform: translateY(8px); opacity: 1; }
}
/* De bank blijft weg tot de spanmoer leeg is. */
.is-uitnemen .dh-bank { opacity: 0; transform: translateY(16px); pointer-events: none; }
/* En de frees die eruit moet, wenkt zelf ook een beetje. */
.is-uitnemen .dh-geplaatst { animation: dh-wenk-frees 1.6s ease-in-out infinite; }
@keyframes dh-wenk-frees {
  0%, 100% { filter: none; }
  50% { filter: drop-shadow(0 0 10px rgba(255, 201, 77, .8)); }
}

/* De freesjes op de werkbank. Sleep er eentje in de spindel — of tik hem
   aan, dat werkt net zo goed. */
.dh-bank {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 10px 14px;
  flex: 1;
  transition: opacity .4s ease, transform .4s ease;
}
.dh-bank.is-weg { opacity: 0; transform: translateY(20px); pointer-events: none; }
.dh-bit {
  width: 62px; height: 108px;
  padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 12px;
  border: 1px solid rgba(180, 208, 226, .18);
  background: linear-gradient(180deg, rgba(46, 58, 66, .85), rgba(20, 27, 32, .9));
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(226, 240, 250, .1);
  cursor: grab;
  touch-action: none;
  transition: transform .18s ease, border-color .2s ease, box-shadow .2s ease;
}
.dh-bit-vorm { flex: 1; min-height: 0; width: 100%; display: block; }
.dh-bit svg { width: 100%; height: 100%; display: block; }
/* De naam onder het freesje. Staat er alleen als er om een toepassing wordt
   gevraagd; dan zoek je welke frees bij de klus hoort, en hoeft de naam er
   niet ook nog bij geraden te worden. */
.dh-bit-naam {
  flex: 0 0 auto;
  margin-top: 3px;
  font-size: 8.5px; line-height: 1.15; font-weight: 700;
  letter-spacing: .01em; text-align: center;
  color: rgba(226, 238, 246, .82);
  overflow-wrap: anywhere;
}
/* Met een naam eronder heeft het freesje zelf iets minder hoogte nodig, dus
   de knop wordt een maatje langer in plaats van de tekening kleiner. */
.dh-bank.is-benoemd .dh-bit { height: 126px; }
.dh-bit:active { border-color: rgba(255, 201, 77, .5); }
.dh-bit.is-sleep {
  cursor: grabbing;
  z-index: 6;
  border-color: rgba(255, 201, 77, .7);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .6);
  transition: none;
}
.dh-bit.is-fout { animation: dh-schud .45s ease-in-out; border-color: rgba(228, 99, 63, .7); }
@keyframes dh-schud {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-4px); }
}
.dh-bit.is-weg { opacity: 0; transform: scale(.5) translateY(-30px); pointer-events: none; }

/* ---------- gcode laden ---------- */

.dh-laad {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 10, 13, .88);
  backdrop-filter: blur(3px);
  animation: mg-fade .3s ease-out both;
  transition: opacity .25s ease;
}
.dh-laad.is-weg { opacity: 0; }
.dh-laad-kaart {
  width: min(340px, 100%);
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(34, 44, 52, .96), rgba(16, 22, 27, .98));
  border: 1px solid rgba(180, 208, 226, .2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}
.dh-laad-titel { font-family: 'Fraunces', serif; font-size: 18px; color: #E6F1F8; margin-bottom: 10px; }
.dh-laad-balk { height: 8px; border-radius: 4px; background: rgba(226, 240, 250, .12); overflow: hidden; }
.dh-laad-vul {
  display: block; height: 100%; width: 4%;
  border-radius: 4px;
  background: linear-gradient(90deg, #4CE07E, #8FE0FF);
  transition: width .9s ease;
}
.dh-laad-regels {
  margin: 12px 0 0;
  height: 108px; overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.5;
  color: #7BE49C;
  white-space: pre;
}
.dh-laad-naam { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(200, 220, 234, .45); margin-top: 6px; }

/* ---------- de kop van het spel ---------- */

.dh-klok {
  justify-self: end;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 22px;
  color: #FFD98F; font-variant-numeric: tabular-nums;
  padding: 4px 10px; border-radius: 12px;
  background: rgba(10, 16, 20, .5);
  border: 1px solid rgba(255, 214, 150, .2);
}
.dh-klok.is-over { color: #FF9A78; border-color: rgba(228, 99, 63, .5); }

/* ---------- de plank op het spoilboard ---------- */

.dh-veld { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 2px 10px; }
/* Zelfde iOS-valkuil als bij .mg-bord: het venster heeft overflow: hidden (voor
   WebKit telt dat als scrollcontainer, en daar stopt de touch-action van
   .mg-scherm) en de plank en de spindel zijn bewegende lagen. Een veeg over
   de plank kon dan een scroll worden met `pointercancel`. Dus hier zelf. */
.dh-veld, .dh-veld * { touch-action: none; -webkit-touch-callout: none; }
/* Het venster is de machine: het laat altijd precies één tegel van de plank
   zien, met zijn eigen rand, schaduw en afgeronde hoeken. Wat erin ligt
   (dh-plaat) is de hele plank in één stuk — bij een tiling-job dus langer
   dan het venster — die met een transform onder het venster vandaan
   geschoven wordt zodra je de naad passeert (zie schuifNaarTegel() in
   doolhof-view.js). Zo is er nooit een tweede, apart getekend stuk plank
   dat in kleur of houtnerf kan verschillen: het is letterlijk hetzelfde
   element, gewoon verschoven. */
.dh-venster { position: relative; flex: 0 0 auto; }
/* Het echte kijkgat. Géén overflow op .dh-venster zelf: de klemmen hangen
   daaraan (zie hieronder) en steken met opzet een stukje over de rand heen —
   die zouden anders afgesneden worden. Top en height komen van
   schuifNaarTegel() in doolhof-view.js: aan een náád tussen twee tegels
   steekt dit vlak verder uit dan .dh-venster zelf (zie .is-boven/onder-gluurt
   hieronder), aan een échte rand van de plank niet. */
.dh-venster-vlak {
  position: absolute;
  left: 0;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .6), 0 2px 0 rgba(255, 226, 180, .12);
}
.dh-plaat { position: absolute; left: 0; top: 0; }
.dh-plaat-hout { position: absolute; inset: 0; overflow: hidden; }
.dh-plaat-hout svg { width: 100%; height: 100%; display: block; }
.dh-tekening { position: absolute; left: 0; top: 0; }
/* Bij een náád (geen echte rand) laat het kijkgat een flink stuk van de
   vorige/volgende tegel doorschemeren in plaats van hem hard af te snijden
   — dat stuk plank ligt er nu eenmaal nog, alleen buiten het bereik van de
   machine. Het vervaagt naar donker toe, zodat het oogt alsof de plank
   doorloopt tot achter de kop/het jogpaneel, in plaats van dat het venster
   'm daar zomaar afknipt. */
.dh-venster-vlak.is-boven-gluurt::before,
.dh-venster-vlak.is-onder-gluurt::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
}
/* De vervaging zelf beslaat maar een klein stukje van de hele gluur (zie
   --dh-vervaag-boven/onder in meet(), doolhof-view.js) — precies het stuk
   dat je ook echt te zien krijgt, tot aan de rand van het scherm. De rest
   van de gluur (verder naar binnen toe) is gewoon onvervaagd hout: die ligt
   toch al buiten beeld, achter de kop of het jogpaneel. Zonder deze knip
   zou de vervaging over de hele (soms heel lange) gluur uitgesmeerd worden
   en op het zichtbare stukje amper opgevallen zijn. */
.dh-venster-vlak.is-boven-gluurt::before {
  top: calc(var(--dh-gluur, 0px) - var(--dh-vervaag-boven, 60%));
  height: var(--dh-vervaag-boven, 60%);
  background: linear-gradient(to bottom, rgba(8, 6, 4, .92), transparent);
}
.dh-venster-vlak.is-onder-gluurt::after {
  top: calc(100% - var(--dh-gluur, 0px));
  height: var(--dh-vervaag-onder, 60%);
  background: linear-gradient(to top, rgba(8, 6, 4, .92), transparent);
}

/* Steekt de plank naar bóven uit, dan komt hij achter de kop langs. Beide
   staan standaard op z-index 2 en het veld komt ná de kop in het document,
   dus zonder ingreep wint het veld die stapeling. De kop een stap hóger
   zetten lost dat op zonder het veld zelf aan te raken — het veld op
   z-index 1 zetten leek de voor de hand liggende oplossing, maar dat is
   precies het niveau van `.dh-scherm::after` (het vignet); bij een
   gelijke stand wint het vignet (laatst geschilderd) en overdekte dat het
   hele bord in bijna zwart. */
.dh-scherm > .mg-kop { z-index: 3; }

/* De klemmen die de plank op het spoilboard houden: twee boven, twee
   onder, met hun bout in de t-track eronder. Ze hangen aan het venster, niet
   aan de plank zelf: ze horen bij wat er nú op het bed ligt (de tegel die je
   ziet), niet bij de hele plank die er soms voor een deel onder vandaan
   steekt. */
.dh-klem {
  position: absolute;
  width: calc(var(--dh-cel, 38px) * 1.5);
  z-index: 5;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .55));
  pointer-events: none;
}
.dh-klem svg { width: 100%; height: auto; display: block; }
.dh-klem.is-linksboven, .dh-klem.is-rechtsboven { top: calc(var(--dh-cel, 38px) * -.42); transform: translateX(-50%); }
.dh-klem.is-linksonder, .dh-klem.is-rechtsonder { bottom: calc(var(--dh-cel, 38px) * -.42); transform: translateX(-50%) rotate(180deg); }
/* Recht boven de t-tracks in het spoilboard, want daar zit hun bout in. */
.dh-klem.is-linksboven, .dh-klem.is-linksonder { left: 25%; }
.dh-klem.is-rechtsboven, .dh-klem.is-rechtsonder { left: 75%; }

/* Op een tiling-plank kán dat niet: de tegel die je ziet is maar een stuk
   van de plank, dus boven en onder lopen de gangen gewoon door in plaats van
   dat daar een rand ligt om op te klemmen. Alle vier de klemmen gaan dan op
   de zijkanten — precies zoals je ze op het verplaatsscherm ook terugzet.
   De tekening staat met zijn "boven" van de plank af, dus een kwartslag
   draaien volstaat. */
.dh-venster.is-tiling .dh-klem { top: auto; bottom: auto; }
.dh-venster.is-tiling .dh-klem.is-linksboven { left: 0; top: 26%; transform: translate(-50%, -50%) rotate(-90deg); }
.dh-venster.is-tiling .dh-klem.is-linksonder { left: 0; top: 68%; transform: translate(-50%, -50%) rotate(-90deg); }
.dh-venster.is-tiling .dh-klem.is-rechtsboven { left: 100%; top: 26%; transform: translate(-50%, -50%) rotate(90deg); }
.dh-venster.is-tiling .dh-klem.is-rechtsonder { left: 100%; top: 68%; transform: translate(-50%, -50%) rotate(90deg); }

/* De aftekening: de gangen zoals ze op de plank staan voordat je begint.
   Een ondiepe donkere groef met de baan als streepjeslijn erin — de
   toolpath die de machine gaat volgen. Er is nog niets gefreesd. */
.dh-gang-groef { stroke: #24140A; stroke-opacity: .3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dh-gang-lijn { stroke: #FFE7B4; stroke-opacity: .22; fill: none; stroke-linecap: round; }

/* De vorm-doolhoven (`vormDoolhofVolledig()`, doolhof-vormen.js) tekenen hun
   eigen paden apart van het buitengebied, zodat de vorm afsteekt tegen de
   rest: een koele tint tegenover het warme bruin van de gewone groef. Geldt
   voor zowel het statische proefscherm (#/vormproef) als het echte potje
   (#/vormspel) — allebei hergebruiken dezelfde .dh-gang-* klassen. */
.dh-gang-groef.is-vorm-tint { stroke: #0F5C56; stroke-opacity: .45; }
.dh-gang-lijn.is-vorm-tint { stroke: #B9F5EC; stroke-opacity: .32; }

/* Wat je wél gefreesd hebt: een sleuf in het hout. De bodem is vers hout,
   en het filter in de tekening legt daar een zachte schaduw langs de
   binnenrand overheen — dat is wat een groef diep laat lijken. */
.dh-baan {
  stroke: #D9AE78;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#dhGroef);
}

/* Ook ná het frezen blijft de vorm afsteken: dezelfde teal als de aftekening
   hierboven, maar dan als "vers hout"-tint in plaats van een groef-tint. */
.dh-baan.is-vorm-tint { stroke: #7FD8C4; }

/* De bonussen en het uitgangsbordje liggen los op de plank. */
.dh-items { position: absolute; inset: 0; pointer-events: none; }
.dh-item {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.2, 1.6, .4, 1), opacity .35s ease;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
  animation: dh-dobber 2.8s ease-in-out infinite;
}
.dh-item svg { width: 100%; height: 100%; display: block; }
@keyframes dh-dobber {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -3px; }
}
.dh-item.is-gepakt { transform: translate(-50%, -160%) scale(1.5); opacity: 0; animation: none; }
/* Het wisselstation valt op: het is geen extraatje maar een stop in de job. */
.dh-item.is-wissel {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)) drop-shadow(0 0 8px rgba(143, 224, 255, .5));
  animation: dh-wisselklop 1.8s ease-in-out infinite;
}
@keyframes dh-wisselklop {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}
.dh-uitgang { position: absolute; transform: translate(-50%, -50%); opacity: .75; }
/* De pijl wijst van zichzelf naar rechts; op plank 1 en 2 kan de uitgang ook
   boven, onder of links liggen, dus draait de pijl los van de span zelf mee
   (--dh-uitgang-rot, gezet in doolhof-view.js) — dat laat de translate/scale
   van de span en zijn pulse-animatie hieronder met rust. */
.dh-uitgang svg { width: 100%; height: 100%; display: block; transform: rotate(var(--dh-uitgang-rot, 0deg)); }
.dh-uitgang.is-nu { opacity: 1; animation: dh-uitgang 1s ease-in-out infinite; }
@keyframes dh-uitgang {
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: none; }
  50% { transform: translate(-50%, -50%) scale(1.16); filter: drop-shadow(0 0 10px rgba(76, 224, 126, .8)); }
}
/* De poort naar de volgende tegel: net als de uitgang, maar blauw (zie
   doorgangSvg() in doolhof-art.js) en zonder gepulseer — je "arriveert"
   er niet in één climax-moment zoals bij de uitgang, hij ligt er gewoon. */
.dh-poort { position: absolute; transform: translate(-50%, -50%); opacity: .75; filter: drop-shadow(0 0 6px rgba(143, 224, 255, .5)); }
.dh-poort svg { width: 100%; height: 100%; display: block; }

/* De spindel zelf: hij staat boven de plank en schuift met een lineaire
   beweging naar het volgende vakje — een machine versnelt niet met een
   boogje. */
.dh-spindel {
  position: absolute; top: 0; left: 0;
  transition-property: transform;
  transition-timing-function: linear;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .6));
  z-index: 3;
}
.dh-spindel svg { width: 100%; height: 100%; display: block; }
.dh-spin { transform-box: fill-box; transform-origin: center; animation: dh-draai 1.1s linear infinite; }
@keyframes dh-draai { to { transform: rotate(360deg); } }
/* Onder het frezen draait hij op volle toeren. */
.dh-spindel.is-frezen .dh-spin { animation-duration: .32s; }
/* Tijdens een wissel staat de machine stil, dus de spindel ook. */
.dh-spindel.is-stil .dh-spin { animation-play-state: paused; }
.dh-spindel.is-vers { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .6)) drop-shadow(0 0 12px rgba(255, 201, 77, .45)); }

/* De spanen die van de frees af vliegen, en de punten die opploppen. */
.dh-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }
.dh-spaan {
  position: absolute;
  border-radius: 40%;
  background: #E8C79A;
  box-shadow: 0 0 4px rgba(255, 226, 180, .5);
}
/* Het fijne stof dat tussen de krullen door vliegt. */
.dh-spaan.is-stof {
  border-radius: 50%;
  background: rgba(255, 236, 205, .75);
  filter: blur(1px);
}
.dh-pop {
  position: absolute;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px;
  color: #FFE7B4;
  text-shadow: 0 2px 0 #6B4020, 0 0 14px rgba(255, 201, 77, .8);
  white-space: nowrap;
}
.dh-pop.is-straf { color: #FF9A78; text-shadow: 0 2px 0 #5C1B0C, 0 0 14px rgba(228, 99, 63, .8); }

/* ---------- het jogpaneel: het schermpje van gSender ---------- */

/* Een pendant aan de machine: zwarte rand, en daarin de lichte interface
   van gSender met de uitlezing, het jogwiel en de drie feeds. */
/* Bij de start komt het paneel van onder het scherm omhoog en veert het
   even na — alsof je het naar je toe trekt. */
.dh-pendant {
  animation: dh-pendant-in .8s cubic-bezier(.2, 1.45, .35, 1) .15s both;
  margin: 4px 10px max(8px, var(--safe-bottom));
  padding: 8px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2A2E31, #121517 60%, #0A0C0E);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(226, 240, 250, .12);
  border: 1px solid #05070A;
}
@keyframes dh-pendant-in {
  from { transform: translateY(135%); opacity: .3; }
  to { transform: none; opacity: 1; }
}
.dh-pendant-scherm {
  border-radius: 12px;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, #F7FAFC, #E7EDF3);
  box-shadow: inset 0 0 0 1px rgba(21, 45, 66, .12), inset 0 2px 10px rgba(21, 45, 66, .12);
}

/* De uitlezing, in de blauwe cijfers van gSender. */
/* Zes vaste vakjes in twee rijen. Vast, want een uitlezing die omklapt naar
   een extra regel duwt het bord erboven een stapje omhoog. */
.dh-dro {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.dh-dro-vak {
  display: flex; align-items: baseline; justify-content: center; gap: 4px;
  min-width: 0;
  padding: 2px 4px;
  border-radius: 6px;
  background: #FFFFFF;
  border: 1px solid rgba(21, 45, 66, .14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: #2F6FA8; font-variant-numeric: tabular-nums;
}
.dh-dro-as { font-size: 8.5px; font-weight: 800; letter-spacing: .08em; color: #93A8B8; }
.dh-dro-vak.is-feed { color: #2A8F5B; }
.dh-dro-vak.is-bonus { color: #B4731A; }
.dh-dro-vak.is-gereedschap { color: #6B4FA8; }
/* Het strafvakje houdt zijn plek bezet, ook als er nog niets te melden is. */
.dh-dro-vak.is-straf { color: #C4402B; border-color: rgba(196, 64, 43, .4); visibility: hidden; }
.dh-dro-vak.is-straf.is-aan { visibility: visible; }
.dh-dro-vak > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dh-jog { display: flex; align-items: center; justify-content: center; }
/* Het jogwiel: vier taartpunten voor X en Y, kleine schuine puntjes
   ertussen en een rode stopknop in het midden. */
.dh-jog-pie {
  position: relative;
  width: min(224px, 62vw);
  aspect-ratio: 1;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #DCE5EC;
}
.dh-pie-knop, .dh-pie-diagonaal {
  position: absolute; inset: 0;
  border: none;
  border-radius: 50%;
  background: #4A90D9;
  padding: 0;
}
.dh-pie-knop {
  cursor: pointer;
  color: #FFFFFF;
  touch-action: none;
  transition: background .12s ease, filter .12s ease;
}
.dh-pie-diagonaal { background: #A8C9E8; pointer-events: none; }
.dh-pie-knop.is-in, .dh-pie-knop:active { background: #1F6FBF; filter: brightness(1.1); }
.dh-pie-inhoud {
  position: absolute; left: 50%;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}
.dh-pie-label { font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.dh-pijl { width: 20px; height: 20px; }
.is-noord .dh-pie-inhoud { top: 7%; }
.is-zuid .dh-pie-inhoud { bottom: 7%; }
.is-west .dh-pie-inhoud { top: 50%; left: 15%; transform: translate(-50%, -50%); }
.is-oost .dh-pie-inhoud { top: 50%; left: 85%; transform: translate(-50%, -50%); }
/* De rode STOP in het hart van het wiel. */
.dh-stop {
  position: absolute; left: 50%; top: 50%;
  width: 36%; height: 36%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 3px solid #FFFFFF;
  background: radial-gradient(circle at 38% 32%, #FF7A5F, #D62F1C 62%, #97200F);
  color: #FFFFFF;
  font-size: 13px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35);
}
.dh-stop:active { transform: translate(-50%, -50%) scale(.94); }

/* ---------- de aankondiging van een wissel ---------- */

/* De machine staat midden in een snede stil, dus dat mag je weten. Een
   waarschuwingsplaat met de wisselstrepen erlangs, groot in beeld, voordat
   het wisselscherm komt. */
.dh-melding {
  position: absolute; inset: 0; z-index: 16;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(6, 10, 13, .72);
  backdrop-filter: blur(2px);
  animation: mg-fade .2s ease-out both;
  transition: opacity .3s ease;
}
.dh-melding.is-weg { opacity: 0; }
.dh-melding-kaart {
  position: relative;
  width: min(330px, 100%);
  padding: 22px 18px 20px;
  text-align: center;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(40, 52, 62, .97), rgba(14, 20, 25, .98));
  border: 2px solid rgba(143, 224, 255, .5);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), 0 0 40px rgba(143, 224, 255, .18);
  animation: dh-melding-in .55s cubic-bezier(.2, 1.6, .4, 1) both;
  overflow: hidden;
}
@keyframes dh-melding-in {
  from { transform: scale(.7) translateY(20px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* De schuine strepen boven en onder, zoals op een waarschuwingssticker. */
.dh-melding-kaart::before,
.dh-melding-kaart::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(45deg, #FFC94D 0 10px, #1B2228 10px 20px);
  animation: dh-strepen 1.1s linear infinite;
}
.dh-melding-kaart::before { top: 0; }
.dh-melding-kaart::after { bottom: 0; }
@keyframes dh-strepen {
  from { background-position: 0 0; }
  to { background-position: 28px 0; }
}
.dh-melding-icoon { width: 68px; height: 68px; margin: 4px auto 6px; }
.dh-melding-icoon svg { width: 100%; height: 100%; display: block; animation: dh-melding-icoon 1.4s ease-in-out infinite; }
@keyframes dh-melding-icoon {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.12); }
}
/* De plank van de tiling-melding wiebelt niet zoals het wisselicoon: die
   schuift op en neer, want dat is precies wat er staat te gebeuren. */
.dh-melding.is-verplaats .dh-melding-icoon svg { animation: dh-verplaats-icoon 1.6s ease-in-out infinite; }
@keyframes dh-verplaats-icoon {
  0%, 100% { transform: translateY(4px); }
  50% { transform: translateY(-4px); }
}
.dh-melding-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; font-weight: 700; letter-spacing: .2em;
  color: #8FE0FF;
}
.dh-melding-titel {
  font-family: 'Fraunces', serif; font-size: 27px; margin: 2px 0 4px;
  color: #FFD98F; text-shadow: 0 3px 0 #6B4020, 0 6px 20px rgba(0, 0, 0, .6);
}
.dh-melding-sub { font-size: 12.5px; color: rgba(226, 238, 246, .8); margin: 0; }

/* ---------- gereedschapswissel midden in de job ---------- */

/* Alles staat stil: de klok, de spindel en het bord. Je kunt alleen nog de
   frees wisselen en daarna zelf de job voortzetten. */
.dh-wisselronde {
  position: absolute; inset: 0; z-index: 14;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  background: radial-gradient(ellipse at 50% 40%, rgba(26, 38, 48, .78), rgba(6, 10, 13, .94));
  backdrop-filter: blur(3px);
  animation: mg-fade .3s ease-out both;
  transition: opacity .25s ease;
}
.dh-wisselronde.is-weg { opacity: 0; }
.dh-wissel-kaart {
  position: relative;
  width: min(390px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 14px 12px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(40, 52, 62, .96), rgba(16, 22, 27, .98));
  border: 1px solid rgba(143, 224, 255, .28);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(226, 240, 250, .12);
  animation: mg-uitslag-in .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
/* Ruim genoeg dat de frees onder de spanmoer helemaal in beeld staat — daar
   gaat het hier tenslotte om. */
.dh-wissel-kaart .dh-toneel { --dh-toneel-h: min(330px, 40vh); }
/* Kleinere spindel, dus ook een kleiner blokje. */
.dh-wissel-kaart .dh-plate { width: 132px; margin-left: -66px; }
.dh-wissel-kaart .dh-spindel-zij { width: min(100px, calc((var(--dh-toneel-h, 392px) - 100px) / 2.27)); }
/* Tijdens een wissel kijk je naar de spindel, niet naar de plank — en de
   frees hoort er niet dwars doorheen te steken. Zodra de goede frees erin
   zit schuift de plank van onderen terug in beeld, en pas daarna komt de
   touch plate erop. Twee losse bewegingen dus, in de volgorde waarin je ze
   in het echt ook zou zien; met display:none sprong hij er ineens in. */
.dh-wissel-kaart .dh-werkstuk {
  transform: translateY(150%);
  opacity: 0;
  transition: transform .55s cubic-bezier(.25, 1, .4, 1), opacity .35s ease;
}
.dh-wissel-kaart.is-plank .dh-werkstuk { transform: none; opacity: 1; }
.dh-wissel-kaart .dh-bank { flex: 0 0 auto; padding: 12px 4px 10px; }
.dh-wissel-kaart .dh-bit { width: 54px; height: 92px; }
.dh-wissel-kaart .dh-bank.is-benoemd .dh-bit { height: 110px; }
.dh-wissel-kaart .dh-opdracht-naam { font-size: 23px; }
/* De kaart is smaller dan het scherm, dus de opdrachtregel een maatje kleiner. */
.dh-wissel-kaart .dh-opdracht-kicker { font-size: 13px; letter-spacing: .1em; }
.dh-wissel-kaart .dh-grote-knop { margin-top: 4px; }


/* ---------- het werkstuk verplaatsen (tiling) ---------- */

/* Dezelfde kaart als de gereedschapswissel, want het is hetzelfde soort
   moment: de job staat stil en je moet met je handen aan de machine. Alleen
   kijk je hier van bóven op het bed in plaats van van opzij op de spindel. */
.dh-verplaats {
  position: absolute; inset: 0; z-index: 14;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  background: radial-gradient(ellipse at 50% 40%, rgba(26, 38, 48, .78), rgba(6, 10, 13, .94));
  backdrop-filter: blur(3px);
  animation: mg-fade .3s ease-out both;
  transition: opacity .25s ease;
}
.dh-verplaats.is-weg { opacity: 0; }
.dh-verplaats-kaart {
  position: relative;
  width: min(390px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 14px 12px 16px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(40, 52, 62, .96), rgba(16, 22, 27, .98));
  border: 1px solid rgba(143, 224, 255, .28);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(226, 240, 250, .12);
  animation: mg-uitslag-in .5s cubic-bezier(.2, 1.5, .4, 1) both;
}
.dh-verplaats-kaart .dh-opdracht-naam { font-size: 23px; }
.dh-verplaats-kaart .dh-opdracht-kicker { font-size: 13px; letter-spacing: .1em; }
.dh-verplaats-kaart .dh-grote-knop { margin-top: 10px; }

/* Het bed van bovenaf. Vaste hoogte en niet laten indrukken: de maten van
   de plank en de tegel worden hieruit gerekend, dus een flexbox die er nog
   een centimeter afknijpt zou de sleepafstand laten kloppen met niets. */
.dh-vp-toneel {
  --dh-vp-uit: 58px;
  position: relative;
  flex: 0 0 auto;
  height: min(330px, 46vh);
  margin: 6px 0 2px;
  border-radius: 14px;
  overflow: hidden;
  background: #10151A;
  border: 1px solid rgba(226, 240, 250, .1);
  touch-action: none;
}
/* Het spoilboard loopt tot de stippellijn (.dh-vp-rand, op 54%): verder
   reikt de machine niet. Naar boven toe loopt het gewoon door tot de rand
   van het toneel — dat is de machine zelf, niet het einde van iets, dus
   daar hoort geen harde overgang naar de kale achtergrond te zitten. */
.dh-vp-bed { position: absolute; left: 0; right: 0; top: 0; height: 54%; }
.dh-vp-bed::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 233, 198, .06), rgba(0, 0, 0, .18));
}
.dh-vp-rand {
  position: absolute; left: 0; right: 0; top: 54%;
  border-top: 2px dashed rgba(143, 224, 255, .45);
  text-align: right;
}
.dh-vp-rand span {
  display: inline-block;
  padding: 2px 6px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(143, 224, 255, .8);
}

/* De plank: twee tegels lang, dus precies half zo breed als hij hoog is.
   Zo blijft elke tegel vierkant, net als op het speelveld. */
.dh-vp-plank {
  position: absolute; left: 50%; top: 10%;
  height: 76%;
  aspect-ratio: 1 / 2;
  transform: translateX(-50%) translateY(var(--dh-vp-y, 0px));
  transition: transform .35s cubic-bezier(.25, 1, .4, 1), box-shadow .3s ease;
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
  cursor: grab;
  touch-action: none;
  z-index: 3;
}
.dh-vp-plank.is-sleep { transition: none; cursor: grabbing; }
.dh-vp-plank.is-bijna { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 0 2px rgba(255, 201, 77, .8); }
.dh-vp-plank.is-opzijnplek { box-shadow: 0 10px 26px rgba(0, 0, 0, .6), 0 0 0 2px rgba(76, 224, 126, .85); }
.dh-vp-hout { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; }
.dh-vp-hout svg { width: 100%; height: 100%; display: block; }
.dh-vp-deel { position: absolute; left: 0; right: 0; height: 50%; }
.dh-vp-deel.is-een { top: 0; }
.dh-vp-deel.is-twee { top: 50%; }
.dh-vp-baan { position: absolute; inset: 6%; width: 88%; height: 88%; }
.dh-vp-label {
  position: absolute; left: 0; right: 0; bottom: 4px;
  text-align: center;
  font-size: 8px; line-height: 1.15; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: rgba(255, 233, 198, .8);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
.dh-vp-naad {
  position: absolute; left: 0; right: 0; top: 50%;
  border-top: 2px dashed rgba(20, 10, 3, .6);
}
/* Tijdens het schuiven een pijl over de plank: dit ding moet omhoog. */
.dh-vp-plank::after {
  content: '↑';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 34px; line-height: 1;
  color: rgba(143, 224, 255, .95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
.dh-vp-toneel[data-fase="schuiven"] .dh-vp-plank::after { opacity: 1; animation: dh-vp-pijl 1.4s ease-in-out infinite; }

/* Waar deel 2 moet komen te liggen: precies de tegel die op het bed past. */
.dh-vp-doel {
  position: absolute; left: 50%; top: 10%;
  height: 38%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  border: 2px dashed rgba(255, 201, 77, .75);
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  /* Boven de plank, anders schuift die er precies overheen en zie je nooit
     waar hij naartoe moet. */
  z-index: 5;
}
.dh-vp-toneel[data-fase="schuiven"] .dh-vp-doel { opacity: 1; }
.dh-vp-doel span {
  position: absolute; left: 0; right: 0; top: 6px;
  text-align: center;
  font-size: 8.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 201, 77, .9);
}

/* De klemvakken liggen op dezelfde tegel als het doel: de plank schuift,
   de klemmen blijven waar ze zijn — die zitten immers aan het bed vast. */
.dh-vp-klemvak {
  position: absolute; left: 50%; top: 10%;
  height: 38%;
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 6;
}
.dh-vp-klem {
  position: absolute;
  width: 32%;
  padding: 0; border: 0; background: none;
  transform: translate(-50%, -50%) translateX(var(--dh-vp-x, 0px));
  transition: transform .3s cubic-bezier(.25, 1, .4, 1), opacity .3s ease;
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6));
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}
.dh-vp-klem.is-links { left: 0; }
.dh-vp-klem.is-rechts { left: 100%; }
.dh-vp-klem-vorm { display: block; }
.dh-vp-klem-vorm svg { width: 100%; height: auto; display: block; }
/* De tekening staat met zijn "boven" van het werkstuk af; een kwartslag
   draaien zet hem dus goed op de zijkant. */
.dh-vp-klem.is-links .dh-vp-klem-vorm { transform: rotate(-90deg); }
.dh-vp-klem.is-rechts .dh-vp-klem-vorm { transform: rotate(90deg); }
.dh-vp-klem.is-los { opacity: .72; }
.dh-vp-klem.is-los.is-links { --dh-vp-x: calc(var(--dh-vp-uit) * -1); }
.dh-vp-klem.is-los.is-rechts { --dh-vp-x: var(--dh-vp-uit); }
.dh-vp-klem.is-sleep { transition: none; cursor: grabbing; z-index: 6; }
/* Een zacht wenkje bij de klemmen die aan de beurt zijn. Alleen de gloed
   knippert: de transform is bezet door het slepen. */
.dh-vp-toneel[data-fase="los"] .dh-vp-klem:not(.is-los):not(.is-sleep),
.dh-vp-toneel[data-fase="vast"] .dh-vp-klem.is-los:not(.is-sleep) {
  animation: dh-vp-wenk 1.6s ease-in-out infinite;
}
@keyframes dh-vp-wenk {
  0%, 100% { filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6)); }
  50% { filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .6)) drop-shadow(0 0 9px rgba(255, 201, 77, .85)); }
}
@keyframes dh-vp-pijl {
  0%, 100% { transform: translate(-50%, -30%); }
  50% { transform: translate(-50%, -70%); }
}

/* De uitlezing van hoe ver de plank al opgeschoven is. Tiling draait om die
   ene maat, dus die hoort in beeld te staan. */
.dh-vp-maat {
  position: absolute; left: 8px; bottom: 8px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(8, 12, 16, .78);
  border: 1px solid rgba(226, 240, 250, .14);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
  color: #8FE0FF;
  z-index: 5;
}

/* ---------- tussen twee planken ---------- */

/* Wat deze plank opleverde, en wat er hierna komt. Dezelfde kaart als bij
   de gereedschapswissel, zodat het bij elkaar hoort. */
.dh-tussen {
  position: absolute; inset: 0; z-index: 15;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
  background: radial-gradient(ellipse at 50% 40%, rgba(58, 38, 19, .8), rgba(8, 6, 3, .94));
  backdrop-filter: blur(3px);
  animation: mg-fade .35s ease-out both;
  transition: opacity .25s ease;
}
.dh-tussen.is-weg { opacity: 0; }
.dh-tussen-kaart {
  width: min(370px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 16px 16px;
  text-align: center;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(62, 41, 20, .96), rgba(26, 16, 7, .98));
  border: 1px solid rgba(255, 214, 150, .26);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 226, 180, .2);
  animation: mg-uitslag-in .55s cubic-bezier(.2, 1.5, .4, 1) both;
}
.dh-tussen-punten {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 42px; line-height: 1;
  margin: 4px 0 0;
  color: #FFF3D6; text-shadow: 0 0 30px rgba(255, 201, 77, .7);
  font-variant-numeric: tabular-nums;
}
.dh-tussen-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255, 217, 143, .55); margin-bottom: 6px;
}
.dh-tussen-totaal {
  margin: 10px 0 2px;
  font-size: 12.5px; color: rgba(251, 240, 220, .8);
}
.dh-tussen-totaal strong { font-family: 'Fraunces', serif; font-size: 17px; color: #FFD98F; }
.dh-tussen-sub { font-size: 12px; line-height: 1.45; color: rgba(251, 240, 220, .65); margin: 6px 0 12px; }
.dh-tussen-kaart .dh-grote-knop { text-align: center; }

/* ---------- bannertje, countdown en uitslag ---------- */

.dh-banner {
  position: absolute; left: 0; right: 0; top: 38%;
  z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.dh-banner.is-aan { opacity: 1; animation: dh-banner .35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes dh-banner {
  from { transform: scale(.7); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.dh-banner-titel {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 26px;
  color: #FFD98F; text-shadow: 0 3px 0 #6B4020, 0 6px 22px rgba(0, 0, 0, .75);
}
.dh-banner-sub { font-size: 11.5px; font-weight: 700; color: rgba(255, 243, 214, .8); text-shadow: 0 2px 6px rgba(0, 0, 0, .85); }
.dh-banner.is-fout .dh-banner-titel { color: #FF9A78; }
.dh-banner.is-bonus .dh-banner-titel { color: #7BE49C; }
.dh-banner.is-uit .dh-banner-titel { color: #8FE0FF; }

.dh-countdown {
  position: absolute; inset: 0; z-index: 12;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6, 10, 13, .55);
  pointer-events: none;
}
.dh-countdown span {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 92px;
  color: #FFD98F;
  text-shadow: 0 6px 0 #6B4020, 0 12px 40px rgba(0, 0, 0, .8);
}
.dh-countdown span.is-go { font-size: 54px; color: #7BE49C; }

.dh-uitslag-tijd {
  display: flex; flex-direction: column; align-items: center;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 30px;
  color: #FFE7B4; font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.dh-uitslag-tijd span {
  font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 800;
  letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 217, 143, .55);
}
/* De regels waaruit de score is opgebouwd. */
.dh-uitslag-regels { margin: 12px 0 2px; display: flex; flex-direction: column; gap: 4px; }
.dh-uitslag-regels > div {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255, 226, 180, .06);
  font-size: 12px; color: rgba(251, 240, 220, .78);
  text-align: left;
}
.dh-uitslag-regels strong { font-family: 'Fraunces', serif; font-size: 15px; color: #7BE49C; }
.dh-uitslag-regels .is-min strong { color: #FF9A78; }
/* De looptijd is geen opbrengst, dus die krijgt niet het groen van punten. */
.dh-uitslag-regels .is-tijd strong { color: #FFE7B4; }

/* De spindel als logo op het introscherm. */
.dh-intro-logo { display: flex; justify-content: center; margin-bottom: 8px; }
.dh-intro-spindel { display: block; width: 72px; height: 72px; }
.dh-intro-icoon { font-size: 20px; flex: 0 0 auto; }

/* ---------- de kaart op home ---------- */

/* Een donkere plaat met de spindel erop — duidelijk een ander ding dan het
   houten bordje van Werkplaats Crush, zodat je ze niet verwisselt. */
.doolhof-kaart {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(180, 208, 226, .22);
  background: linear-gradient(180deg, #2C3A44 0%, #1B242B 100%);
  box-shadow: 0 10px 24px rgba(20, 30, 38, .35), inset 0 1px 0 rgba(226, 240, 250, .12);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.doolhof-kaart::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(226, 240, 250, .05) 0 1px, transparent 1px 14px);
  pointer-events: none;
}
.doolhof-kaart-spindel { display: block; width: 52px; height: 52px; }
.doolhof-kaart-aantal {
  position: absolute; top: 10px; left: 46px;
  min-width: 20px; height: 20px; line-height: 20px;
  border-radius: 10px;
  background: var(--coral); color: #fff;
  font-size: 11px; font-weight: 800; text-align: center;
}
.doolhof-kaart-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doolhof-kaart-label { font-size: 9.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #7BE49C; }
.doolhof-kaart-titel { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; color: #F0F6FA; }
.doolhof-kaart-sub { font-size: 12px; color: rgba(216, 232, 243, .65); }
.doolhof-kaart-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  width: 38px;
  height: 38px;
  color: #8FE0FF;
  border-radius: 50%;
  background: rgba(143, 224, 255, .14);
  box-shadow: inset 0 0 0 1.5px rgba(143, 224, 255, .35);
}
.doolhof-kaart-cta .kaart-chevron { text-shadow: none; }
.doolhof-kaart:active { transform: translateY(1px); }
/* Het aanbod na de battle draagt hetzelfde jasje als dat van Crush, maar
   met de kleur van deze kaart. */
.minigame-aanbod.is-doolhof { border-color: rgba(143, 224, 255, .3); }
.minigame-aanbod.is-doolhof .minigame-aanbod-titel { color: #CFE6F5; }

@media (prefers-reduced-motion: reduce) {
  .dh-spin,
  .dh-item,
  .dh-uitgang.is-nu,
  .dh-collet-doel,
  .dh-stap.is-nu .dh-stap-nr,
  .dh-stap.is-nu .dh-aanknop:not(:disabled),
  .dh-stap.is-nu .dh-tuimel:not(:disabled),
  .dh-stap.is-nu .dh-camvac:not(:disabled),
  .is-vfd .dh-vfd-getal,
  .dh-grote-knop.is-klaar,
  .dh-pendant,
  .dh-uitpijl,
  .is-uitnemen .dh-geplaatst,
  .dh-melding-icoon svg,
  .dh-melding-kaart::before,
  .dh-melding-kaart::after,
  .dh-damp,
  .is-afzuiging .dh-lucht { animation: none !important; }
  /* De wervel in de cycloon blijft wél zichtbaar staan: dat is het enige
     wat laat zien dát de afzuiging aan is. */
  .is-afzuiging .dh-wervel path { animation: none; stroke-opacity: .5; }
}

/* ---------- Gereedschapsjacht ---------- */
/* De omgevallen gereedschapskist: het glinsterende gereedschap dat door de
   app verspreid ligt, het vondstscherm, de kaart op home en de kist zelf.
   Alles met prefix `.jacht-` (het zoeken) of `.kist-` (het overzicht). */

/* Het element waar een stuk gereedschap tegenaan ligt, wordt zelf het
   referentiepunt. Meer dan dit heeft een schuilplaats niet nodig. */
.jacht-host { position: relative; }

/* Het gereedschap zelf ligt half over de rand van zijn kaart, alsof het er
   half achter is gerold. */
.jacht-item {
  position: absolute;
  width: 42px; height: 42px;
  margin: 0; padding: 0;
  transform: translate(-50%, -50%);
  background: none; border: none;
  cursor: pointer;
  z-index: 5;
  filter: drop-shadow(0 3px 5px rgba(36, 28, 21, .3));
  animation: jacht-wieg 3.4s ease-in-out infinite;
}
.jacht-item-tekening { display: block; width: 100%; height: 100%; }
.jacht-item-tekening svg, .jacht-item-tekening img { display: block; width: 100%; height: 100%; }
.jacht-item:active { animation: none; transform: translate(-50%, -50%) scale(.88); }

/* De glinster ligt over het gereedschap heen: drie sterretjes die om de
   beurt oplichten, plus een zachte gloed eromheen. */
.jacht-glinster {
  position: absolute;
  inset: -34%;
  width: auto; height: auto;
  pointer-events: none;
  overflow: visible;
}
.jacht-ster { transform-origin: center; transform-box: fill-box; }
.jacht-ster-1 { animation: jacht-fonkel 2.2s ease-in-out infinite; }
.jacht-ster-2 { animation: jacht-fonkel 2.2s ease-in-out .75s infinite; }
.jacht-ster-3 { animation: jacht-fonkel 2.2s ease-in-out 1.4s infinite; }

@keyframes jacht-fonkel {
  0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); }
  35% { opacity: .95; transform: scale(1) rotate(35deg); }
  60% { opacity: .2; transform: scale(.5) rotate(60deg); }
}
@keyframes jacht-wieg {
  0%, 100% { transform: translate(-50%, -50%) rotate(-4deg); }
  50% { transform: translate(-50%, -52%) rotate(4deg); }
}

/* ---------- Het vondstscherm ---------- */
/* Ligt onder de effectenlaag (#fxLayer, z-index 200), zodat de vonken en de
   confetti er overheen komen in plaats van eronder te verdwijnen. */
.jacht-vondst {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: pointer;
}
.jacht-vondst-waas {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(52, 34, 19, .975) 0%, rgba(13, 9, 5, .99) 68%);
  animation: mg-fade .3s ease-out;
}
.jacht-vondst-kaart {
  position: relative;
  width: 100%;
  max-width: 340px;
  text-align: center;
  color: #F7EFE1;
}
.jacht-vondst-item {
  width: 190px; height: 190px;
  margin: 0 auto 6px;
  will-change: transform;
}
.jacht-vondst-item svg, .jacht-vondst-item img { display: block; width: 100%; height: 100%; }
.jacht-vondst-kicker {
  font-size: 11px; font-weight: 800;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
.jacht-vondst-naam {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: 25px; line-height: 1.15;
  margin-bottom: 6px;
}
.jacht-vondst-uitroep { font-size: 14.5px; color: rgba(247, 239, 225, .78); margin-bottom: 12px; }
.jacht-vondst-xp {
  display: inline-block;
  font-size: 20px; font-weight: 800;
  color: #1F1409;
  background: linear-gradient(180deg, #F5CE7E 0%, var(--gold) 100%);
  border-radius: 999px;
  padding: 5px 18px;
}
.jacht-vondst-teller { font-size: 13px; color: rgba(247, 239, 225, .7); margin-top: 12px; }
.jacht-vondst-compleet {
  font-size: 14px; font-weight: 700; color: #FFE1A8;
  background: rgba(232, 163, 61, .16);
  border: 1px solid rgba(232, 163, 61, .4);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-top: 14px;
}
.jacht-vondst-badges { margin-top: 14px; display: flex; justify-content: center; gap: 8px; }
/* De badge houdt zijn eigen lichte jasje; zonder deze regel erft hij de
   crèmekleurige tekst van het donkere vondstscherm en valt hij weg. */
.jacht-vondst-badges .badge-tile { max-width: 170px; color: var(--ink); }
.jacht-vondst-badges .badge-desc { color: var(--ink-soft); }
.jacht-vondst-verder { font-size: 11.5px; color: rgba(247, 239, 225, .45); margin-top: 16px; }

/* Gereedschap dat door de lucht valt (gereedschapRegen() in jacht-view.js)
   in plaats van de gewone confetti — bij het omvallen van de kist en bij
   het grote feest hieronder. */
.jacht-fx-stuk { filter: drop-shadow(0 3px 5px rgba(36, 28, 21, .32)); }
.jacht-fx-stuk svg, .jacht-fx-stuk img { display: block; width: 100%; height: 100%; }

/* ---------- Het grote feest bij een complete kist ---------- */
.jacht-feest {
  position: fixed;
  inset: 0;
  z-index: 165; /* boven .jacht-vondst (150); #fxLayer zelf zit op 200, dus het vallende gereedschap komt er nog overheen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.jacht-feest-waas {
  position: absolute;
  inset: 0;
  /* Moet ondoorzichtig genoeg zijn om het scherm eronder helemaal af te
     dekken (renderKistFeest tekent daar zijn eigen titel en knop) —
     anders lopen die en de kaart hier overheen door elkaar. Zelfde
     opzet als .jacht-vondst-waas, met een warmere gouden gloed erin. */
  background: radial-gradient(circle at 50% 36%, rgba(72, 48, 22, .97) 0%, rgba(15, 10, 6, .99) 72%);
  animation: mg-fade .3s ease-out;
}
.jacht-feest-kaart {
  position: relative;
  width: 100%;
  max-width: 360px;
  text-align: center;
  color: #F7EFE1;
  /* Eigen, bijna dekkende achtergrond: wat er ook onder dit scherm zit
     (renderKistFeest tekent daar zijn eigen titel en knop), die mag
     nooit doorschijnen in de tekst hierboven. */
  background: linear-gradient(180deg, rgba(40, 26, 13, .94), rgba(18, 12, 6, .97));
  border: 1px solid rgba(232, 163, 61, .38);
  border-radius: var(--radius);
  padding: 30px 22px 24px;
}
.jacht-feest-kist { width: 150px; margin: 0 auto 12px; animation: jacht-feest-zweef 1.8s ease-in-out infinite; }
.jacht-feest-kist svg, .jacht-feest-kist img { display: block; width: 100%; height: auto; }
.jacht-feest-titel { font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; color: #FFE1A8; margin-bottom: 8px; }
.jacht-feest-tekst { font-size: 14.5px; color: rgba(247, 239, 225, .82); margin: 0 0 14px; }
.jacht-feest-xp {
  display: inline-block;
  font-size: 20px;
  font-weight: 800;
  color: #1F1409;
  background: linear-gradient(180deg, #F5CE7E 0%, var(--gold) 100%);
  border-radius: 999px;
  padding: 6px 20px;
  margin-bottom: 20px;
}
.jacht-feest-rij { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 22px; }
.jacht-feest-mini { width: 30px; height: 30px; opacity: .92; }
.jacht-feest-mini svg, .jacht-feest-mini img { display: block; width: 100%; height: 100%; }
.jacht-feest-kaart .btn { width: 100%; }

@keyframes jacht-feest-zweef {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}

/* ---------- De kaart op home ---------- */
.jacht-kaart {
  position: relative;
  display: grid;
  grid-template-columns: 66px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(139, 74, 31, .3);
  background: linear-gradient(180deg, #FFF8EC 0%, #F5E6CD 100%);
  box-shadow: 0 8px 18px rgba(101, 63, 27, .14), inset 0 1px 0 rgba(255, 255, 255, .7);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.jacht-kaart-kist { display: block; width: 66px; }
.jacht-kaart-kist svg, .jacht-kaart-kist img { display: block; width: 100%; height: auto; }
.jacht-kaart-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.jacht-kaart-label {
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--wood-dark);
}
.jacht-kaart-titel { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; color: var(--ink); }
.jacht-kaart-sub { font-size: 12px; color: var(--ink-soft); }
.jacht-kaart-balk { display: block; margin-top: 4px; }
.jacht-kaart-balk .pbar-track { height: 6px; }
.jacht-kaart-cta { font-size: 12px; font-weight: 700; color: var(--wood-dark); white-space: nowrap; }
.jacht-kaart:active { transform: translateY(1px); }
.jacht-kaart.is-compleet { border-color: rgba(46, 158, 109, .45); }
.jacht-kaart.is-compleet .jacht-kaart-label { color: var(--green); }

/* ---------- De aankondiging op het uitslagscherm ---------- */
.jacht-aankondiging {
  margin: 18px 0 4px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(139, 74, 31, .28);
  background: linear-gradient(180deg, #FFF8EC 0%, #F3E3C8 100%);
  text-align: center;
}
.jacht-aankondiging-kist { width: 132px; margin: 0 auto 6px; }
.jacht-aankondiging-kist svg, .jacht-aankondiging-kist img { display: block; width: 100%; height: auto; }
.jacht-aankondiging-kop {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px;
  color: var(--wood-dark); margin-bottom: 6px;
}
.jacht-aankondiging-tekst { font-size: 14px; color: var(--ink-soft); }

/* Het omvallen zelf: de kist kiepert opzij, botst en komt scheef tot rust.
   Draait één keer af, op het uitslagscherm van de laatste beginnerles en op
   het voorproefje (#/omvallen) van het testprofiel. */
.jacht-aankondiging-kist.is-omval {
  animation: jacht-omval 1.1s cubic-bezier(.3, .9, .4, 1) both;
  transform-origin: 50% 90%;
}
@keyframes jacht-omval {
  0% { transform: rotate(0deg) translateY(0); }
  22% { transform: rotate(-13deg) translateY(-8px); }
  48% { transform: rotate(16deg) translateY(2px); }
  66% { transform: rotate(-9deg) translateY(0); }
  84% { transform: rotate(6deg); }
  100% { transform: rotate(-4deg); }
}

/* Het voorproefje van het testprofiel: dezelfde kaart als op het
   uitslagscherm, met een regel eronder die zegt dat dit een oefenrondje is. */
.omval-screen { padding-top: 8px; }
.omval-notitie {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* ---------- Het kistscherm ---------- */
.kist-screen { padding-bottom: 8px; }
.kist-kop { width: 100%; max-width: 220px; margin: 0 auto 4px; }
.kist-kop svg, .kist-kop img { display: block; width: 100%; height: auto; }
.kist-screen h1 { text-align: center; }
.kist-verhaal { font-size: 14.5px; color: var(--ink-soft); text-align: center; }
.kist-voortgang {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px;
}
.kist-voortgang-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; text-align: center; }
.kist-compleet {
  background: rgba(46, 158, 109, .12);
  border: 1px solid rgba(46, 158, 109, .35);
  border-radius: var(--radius-sm);
  padding: 12px 14px; margin-bottom: 14px;
  font-size: 14px; font-weight: 700; color: #1E6B4A; text-align: center;
}

/* Het rooster met vakjes: gevonden gereedschap staat er in kleur in, wat
   nog zoek is als silhouet — je ziet dus wél wat je mist, niet waar het
   ligt. */
.kist-rooster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.kist-vak {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 8px 12px;
  text-align: center;
}
.kist-vak-beeld { width: 62px; height: 62px; margin: 0 auto 6px; }
.kist-vak-beeld svg, .kist-vak-beeld img { display: block; width: 100%; height: 100%; }
.kist-vak.is-zoek { background: var(--surface-2); border-style: dashed; }
.kist-vak.is-zoek .kist-vak-beeld { filter: brightness(0) opacity(.13); }
.kist-vak-naam { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.kist-vak.is-zoek .kist-vak-naam { color: var(--ink-soft); font-weight: 600; }
.kist-vak-onder { font-size: 11px; color: var(--ink-soft); margin-top: 4px; line-height: 1.3; }
.kist-vak-onder.is-hint { color: var(--ink); }

/* Wat voor uitdaging er bij dit stuk hoort. Dat verklapt niets over waar het
   ligt, en je weet graag vooraf of je een quiz of een potje krijgt. */
.kist-vak-uitdaging {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
}
.kist-vak-uitdaging.is-quiz { background: rgba(31, 111, 107, .12); color: var(--teal); }
.kist-vak-uitdaging.is-spel { background: rgba(201, 125, 62, .15); color: var(--wood-dark); }

/* De hint zit achter slot: een munt inzetten en één vraag goed beantwoorden
   zet hem open. Staat er geen munt klaar, dan is de knop uit — maar hij
   blijft staan, zodat duidelijk is dát er een hint te halen valt. */
.kist-vak-slot {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; margin-top: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 6px; cursor: pointer;
  text-align: center; color: var(--ink);
}
.kist-vak-slot:active { transform: translateY(1px); }
.kist-vak-slot[disabled] { opacity: .5; cursor: default; }
.kist-vak-slot-kop { font-size: 11px; font-weight: 700; }
.kist-vak-slot-sub { font-size: 10px; color: var(--ink-soft); line-height: 1.3; }

/* De muntenteller boven het rooster. */
.kist-munten {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 14px; margin-bottom: 14px;
}
.kist-munten.is-rijk { border-color: rgba(232, 163, 61, .55); background: rgba(232, 163, 61, .1); }
.kist-munten-getal { font-size: 17px; font-weight: 800; white-space: nowrap; }
.kist-munten-tekst { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }

/* Het spiekbriefje van het testprofiel: waar alles ligt, met een tik om er
   meteen heen te gaan. */
.kist-spiek {
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 10px;
  margin-bottom: 18px;
}
.kist-spiek-kop { font-weight: 800; font-size: 13px; margin-bottom: 4px; }
.kist-spiek-uitleg { font-size: 12px; color: var(--ink-soft); }
.kist-spiek-rij {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 48px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px; margin-bottom: 6px;
  text-align: left; cursor: pointer;
}
.kist-spiek-rij.is-gevonden { opacity: .55; }
.kist-spiek-status { font-size: 15px; }
.kist-spiek-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.kist-spiek-naam { font-size: 13px; font-weight: 700; }
.kist-spiek-naam em { font-style: normal; font-weight: 600; color: var(--ink-soft); }
.kist-spiek-plek { font-size: 11.5px; color: var(--ink-soft); }
.kist-spiek-pijl { color: var(--ink-soft); }

/* ---------- De uitdaging bij een vondst ---------- */
/* Tikken op glinsterend gereedschap geeft het niet meer cadeau: eerst dit
   scherm, met wat er van je gevraagd wordt. Zie js/jacht-uitdaging.js. */

.uitdaging-screen { text-align: center; padding-bottom: 8px; }
.uitdaging-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wood-dark); margin-bottom: 8px;
}
.uitdaging-beeld { width: 112px; height: 112px; margin: 0 auto 10px; }
.uitdaging-beeld svg, .uitdaging-beeld img { display: block; width: 100%; height: 100%; }
.uitdaging-mini { width: 46px; height: 46px; margin: 0 auto 10px; opacity: .8; }
.uitdaging-mini svg, .uitdaging-mini img { display: block; width: 100%; height: 100%; }
.uitdaging-naam { font-size: 22px; margin-bottom: 4px; }
.uitdaging-fase { font-size: 12px; color: var(--ink-soft); margin-bottom: 12px; }
.uitdaging-tekst { font-size: 14.5px; color: var(--ink-soft); }
.uitdaging-tekst strong { color: var(--ink); }
.uitdaging-waarschuwing {
  background: rgba(228, 99, 63, .1);
  border: 1px solid rgba(228, 99, 63, .32);
  border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 14px 0 4px;
  font-size: 12.5px; color: var(--ink); line-height: 1.4; text-align: left;
}
.uitdaging-hint {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px; margin: 12px 0 4px;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; text-align: left;
}
.uitdaging-screen.is-quiz { text-align: left; }
/* Op het "weggeglipt"-scherm vliegt de tekening uit beeld en blijft er een
   gat staan. Kleiner beginnen houdt dat gat klein. */
.uitdaging-screen.is-mislukt .uitdaging-beeld { width: 78px; height: 78px; }

/* De eisenlijst van een minigame-uitdaging. Staat op het uitdagingsscherm
   (licht) én op het uitslagscherm van het spel zelf (donker), vandaar de
   tweede set kleuren verderop. */
.jacht-eisen {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px; margin: 14px 0 0; text-align: left;
}
.jacht-eisen.is-goed { border-color: rgba(46, 158, 109, .45); background: rgba(46, 158, 109, .1); }
.jacht-eisen.is-mis { border-color: rgba(228, 99, 63, .4); background: rgba(228, 99, 63, .08); }
.jacht-eisen-kop { font-size: 12px; font-weight: 800; margin-bottom: 6px; }
.jacht-eisen-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.jacht-eisen-lijst li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.jacht-eisen-lijst li.is-gemist { color: var(--ink-soft); }
.jacht-eisen-bol { width: 16px; flex: none; text-align: center; font-weight: 800; color: var(--ink-soft); }
.jacht-eisen-lijst li.is-gehaald .jacht-eisen-bol { color: var(--green); }
.jacht-eisen-lijst li.is-gemist .jacht-eisen-bol { color: var(--coral); }

/* Dezelfde lijst, maar dan op de donkere uitslagkaart van een minigame. */
.mg-uitslag-kaart .jacht-eisen {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(247, 239, 225, .2);
  color: #F7EFE1;
}
.mg-uitslag-kaart .jacht-eisen.is-goed { background: rgba(46, 158, 109, .2); border-color: rgba(46, 158, 109, .5); }
.mg-uitslag-kaart .jacht-eisen.is-mis { background: rgba(228, 99, 63, .18); border-color: rgba(228, 99, 63, .45); }
.mg-uitslag-kaart .jacht-eisen-lijst li.is-gemist { color: rgba(247, 239, 225, .62); }
.mg-uitslag-kaart .jacht-eisen-bol { color: rgba(247, 239, 225, .6); }
.mg-uitslag-kaart .jacht-eisen-lijst li.is-gehaald .jacht-eisen-bol { color: #7BDCAE; }
.mg-uitslag-kaart .jacht-eisen-lijst li.is-gemist .jacht-eisen-bol { color: #FFA98E; }

/* ---------- De vragen van de jacht ---------- */
/* Zelfde knoppen en uitleg als een gewone quiz (.options, .option-btn,
   .quiz-explain zijn hierboven al gestyled); hier alleen de omlijsting. */

.jacht-vraag-kicker {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--wood-dark); margin-bottom: 4px;
}
.jacht-vraag-teller { font-size: 12px; color: var(--ink-soft); margin-bottom: 10px; }
.jacht-vraag-prompt { font-size: 18px; margin-bottom: 14px; }
.jacht-vraag-uitleg:empty { display: none; }

/* De hintvraag komt als laag over het kistscherm heen: je zet een munt in,
   beantwoordt één vraag en bent daarna weer terug waar je was. */
.hint-vraag {
  position: fixed; inset: 0; z-index: 170;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.hint-vraag-waas {
  position: absolute; inset: 0;
  background: rgba(36, 28, 21, .62);
  backdrop-filter: blur(2px);
}
.hint-vraag-kaart {
  position: relative;
  width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 16px 14px;
  box-shadow: 0 18px 40px rgba(36, 28, 21, .35);
}
.hint-vraag-munt {
  display: inline-block; margin-bottom: 10px;
  background: rgba(232, 163, 61, .16); color: var(--wood-dark);
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 800;
}
.hint-vraag-uitslag {
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 10px;
  font-size: 13px; line-height: 1.45; text-align: left;
}
.hint-vraag-uitslag.is-goed { background: rgba(46, 158, 109, .12); border: 1px solid rgba(46, 158, 109, .4); }
.hint-vraag-uitslag.is-mis { background: rgba(228, 99, 63, .1); border: 1px solid rgba(228, 99, 63, .35); }

@media (prefers-reduced-motion: reduce) {
  .jacht-item { animation: none; }
  .jacht-aankondiging-kist.is-omval { animation: none; }
  .jacht-ster { animation: none; opacity: .9; }
  .jacht-vondst-waas { animation: none; }
  .jacht-feest-waas { animation: none; }
  .jacht-feest-kist { animation: none; }
}
/* ---------- Feedback per pagina ---------- */
/* Het blokje onder elke lespagina, elk eindscherm en elke begripspagina.
   Dichtgeklapt is het één rustige regel, zodat het de les niet in de weg
   zit; opengeklapt is het hetzelfde formulier als op het feedbackscherm. */

.pf-blok {
  margin: 18px 0 4px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.pf-open {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; padding: 8px 2px; cursor: pointer;
  color: var(--ink-soft); font-size: 13px; font-weight: 600; text-align: left;
}
.pf-open:hover { color: var(--ink); }
.pf-open-emoji { font-size: 15px; }
.pf-open-tekst { flex: 1; }
.pf-open-pijl {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: var(--surface-2); color: var(--ink-soft);
  display: grid; place-items: center; font-size: 14px; font-weight: 700; line-height: 1;
}
.pf-blok.is-open .pf-open-pijl { background: var(--wood); color: #fff; }

.pf-paneel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px; margin-top: 6px;
  display: flex; flex-direction: column; gap: 10px;
}
.pf-paneel[hidden] { display: none; }
.pf-plek { font-size: 11.5px; color: var(--ink-soft); margin: 0; line-height: 1.4; }
.pf-plek strong { color: var(--ink); font-weight: 600; }

/* Wat je hier eerder al achterliet — zichtbaar zodra er iets is, zonder
   dat je eerst het formulier hoeft open te klikken. */
.pf-geschiedenis {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 10px 12px; margin-top: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.pf-geschiedenis-kop { font-size: 11.5px; font-weight: 700; color: var(--ink-soft); }
.pf-geschiedenis-item {
  font-size: 12.5px; line-height: 1.45; padding-top: 6px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
}
.pf-geschiedenis-item:first-of-type { padding-top: 0; border-top: none; }
.pf-geschiedenis-tekst { color: var(--ink); }
.pf-geschiedenis-antwoord { color: var(--teal); font-weight: 600; }
.pf-geschiedenis-wacht { color: var(--ink-soft); font-style: italic; opacity: .85; }
.pf-soorten { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-soort input { position: absolute; opacity: 0; pointer-events: none; }
.pf-soort span {
  display: inline-block; border: 1px solid var(--border); border-radius: 20px;
  padding: 6px 11px; font-size: 12px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; background: var(--bg);
}
.pf-soort input:checked + span {
  background: var(--surface-2); border-color: var(--wood); color: var(--ink);
}
.pf-soort input:focus-visible + span { outline: 2px solid var(--wood); outline-offset: 2px; }
.pf-paneel textarea {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 11px; font-size: 14px; color: var(--ink);
  background: var(--bg); font-family: inherit; resize: vertical;
}
.pf-paneel textarea::placeholder { color: var(--ink-soft); opacity: .75; }
.pf-fout { font-size: 12.5px; color: var(--coral); font-weight: 600; }
.pf-knoppen { display: flex; gap: 8px; justify-content: flex-end; }
.pf-knoppen .btn { flex: none; }
.btn.small { padding: 8px 14px; font-size: 13px; }

.pf-bedankt {
  background: var(--surface-2); border-radius: var(--radius-sm);
  padding: 11px 12px; font-size: 13px; line-height: 1.45; color: var(--ink);
}

/* Automatisch ingevulde herkomst, tegenover een handmatig getypte plek. */
.fb-waar.is-auto { font-style: normal; font-weight: 600; opacity: .9; }

/* ---------- Bestellingen: de levelbaan ---------- */
/*
   Een doorlopend pad dat van onder naar boven slingert, met een knop per level.
   De vorm komt van Candy Crush en doet precies één ding: duidelijk maken dat je
   vooruit gaat in plaats van uit een lijst kiest. Onderaan staat waar je begon,
   bovenaan waar het heen gaat.
*/

.ob-scherm { padding-bottom: 0; }
.ob-kop { text-align: center; margin-bottom: 12px; }
.ob-kop h1 { margin-bottom: 4px; }
.ob-slogan {
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0 auto 6px;
  max-width: 30rem;
}
.ob-spel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wood-dark);
  font-weight: 600;
  margin: 0;
}

.ob-samenvatting {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ob-sam-vak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ob-sam-waarde { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; color: var(--ink); }
.ob-sam-max { font-size: 14px; color: var(--ink-soft); font-weight: 400; }
.ob-sam-label { font-size: 11px; color: var(--ink-soft); text-align: center; }

.ob-weekbalk {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #2B2018, #3E2E22);
  color: #F6EEDF;
  border: none;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
}
.ob-weekbalk-icoon { font-size: 22px; }
.ob-weekbalk-tekst { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.ob-weekbalk-tekst strong { font-size: 14px; }
.ob-weekbalk-tekst span { font-size: 11px; opacity: .75; }
.ob-weekbalk-pijl { font-size: 18px; opacity: .7; }

/* Het kijkgat waarin de baan scrollt. Vaste hoogte, zodat de kop en de
   samenvatting blijven staan terwijl je de baan langsloopt. */
.ob-baan-venster {
  position: relative;
  height: 62vh;
  min-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  -webkit-overflow-scrolling: touch;
}
/* De ondergrond is een zonnige houtwerf, geen werkbank. Dat is bewust: een
   vlakke houttextuur wordt bruin-op-bruin en daar wordt niemand vrolijk van.
   Dit is gras met lichtplekken, en de baan loopt er als een houten vlonder
   doorheen — wél helemaal in thema, maar met lucht en kleur erin. Elke
   aflevering krijgt daarbovenop zijn eigen kleurband (zie .ob-zone), zodat je
   tijdens het scrollen ziet dat je ergens anders terechtkomt. */
.ob-baan-venster {
  background-color: #A8CC72;
  background-image:
    radial-gradient(ellipse 70% 22% at 18% 12%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 60% 18% at 82% 44%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #B6D67F 0%, #A3CA6C 100%);
}
.ob-crush .ob-baan-venster {
  background-color: #BCD98A;
  background-image:
    radial-gradient(ellipse 70% 22% at 22% 16%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 60% 18% at 78% 52%, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #C8E296 0%, #B2D47E 100%);
}

.ob-baan { position: relative; width: 100%; }

/* De kleurband van een aflevering. Zacht ingevlochten met maskers boven en
   onder, zodat de overgang geen harde lijn is maar een verloop. */
.ob-zone {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0) 0%,
    var(--ob-zone-kleur) 14%,
    var(--ob-zone-kleur) 86%,
    rgba(255, 255, 255, 0) 100%);
  opacity: .55;
}

/* Zaagsel dat in de lucht hangt. Puur sfeer, maar het maakt het verschil
   tussen "een plaatje" en "een plek". */
.ob-zaagsel { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ob-zaagsel span {
  position: absolute;
  border-radius: 50%;
  background: #FFFBF0;
  animation: obDwarrelt 11s linear infinite;
}
@keyframes obDwarrelt {
  0% { transform: translate(0, 0); }
  50% { transform: translate(9px, 16px); }
  100% { transform: translate(0, 0); }
}

.ob-pad { position: absolute; left: 0; top: 0; pointer-events: none; }
/* De baan is een houten vlonder met een uitgefreesde groef erin. Vijf lagen:
   de slagschaduw op het gras, de rand van de plank, het plankhout zelf, de
   donkere groefwand en de lichte bodem waar vers hout bloot ligt. Daaroverheen
   loopt de streepjeslijn van de toolpath. */
.ob-pad-schaduw {
  fill: none;
  stroke: rgba(50, 70, 25, .34);
  stroke-width: 40;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(5px);
  transform: translateY(6px);
}
.ob-pad-rand { fill: none; stroke: #7A5327; stroke-width: 38; stroke-linecap: round; stroke-linejoin: round; }
.ob-pad-plank { fill: none; stroke: #D7A768; stroke-width: 33; stroke-linecap: round; stroke-linejoin: round; }
.ob-pad-groef { fill: none; stroke: #9A6B37; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.ob-pad-bodem { fill: none; stroke: #F0CE9A; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.ob-pad-toolpath {
  fill: none;
  stroke: rgba(120, 78, 34, .55);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 8 10;
  animation: obToolpath 3.4s linear infinite;
}
@keyframes obToolpath { to { stroke-dashoffset: -36; } }

/* De rekwisieten langs de kant. Groot genoeg om te herkennen: kleiner dan dit
   worden het vlekjes. */
.ob-decor {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 4px 3px rgba(50, 70, 25, .4));
}
.ob-decor-svg { width: 100%; height: 100%; display: block; }

.ob-level {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.ob-level[disabled] { cursor: default; }

/* De schijf: een knop met dikte, zoals een drop op de kaart. */
.ob-level-schijf {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff55, #ffffff00 55%),
              var(--ob-serie-kleur, var(--wood));
  box-shadow:
    0 4px 0 rgba(0, 0, 0, .28),
    0 7px 12px rgba(0, 0, 0, .22),
    inset 0 0 0 3px rgba(255, 255, 255, .55);
  color: #fff;
}
.ob-level-nr {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 19px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}
.ob-level.is-dicht .ob-level-schijf {
  background: radial-gradient(circle at 34% 28%, #ffffff33, #ffffff00 55%), #8E8478;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .26), inset 0 0 0 3px rgba(255, 255, 255, .3);
}
.ob-level.is-dicht { cursor: pointer; }
.ob-level.is-dicht .ob-slot { width: 22px; height: 22px; }
.ob-level.is-gehaald .ob-level-schijf { box-shadow: 0 4px 0 rgba(0,0,0,.28), 0 7px 12px rgba(0,0,0,.22), inset 0 0 0 3px #FFE49B; }
.ob-level.is-eindklus .ob-level-schijf { width: 62px; height: 62px; }
.ob-level.is-eindklus .ob-level-nr { font-size: 22px; }

/* Waar je nu bent: dat moet je vinden zonder te zoeken. */
.ob-level.is-nu .ob-level-schijf {
  animation: obKlopt 1.6s ease-in-out infinite;
  box-shadow: 0 4px 0 rgba(0,0,0,.3), 0 0 0 6px rgba(255, 255, 255, .55), 0 10px 18px rgba(0,0,0,.28);
}
@keyframes obKlopt {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.09); }
}

.ob-level-sterren {
  display: flex;
  gap: 1px;
  padding: 2px 5px;
  border-radius: 999px;
  /* Zonder achtergrondje vallen drie kleine sterretjes helemaal weg tegen het
     gras en de plank. */
  background: rgba(43, 32, 24, .58);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .25);
}
.ob-level-sterren .ob-ster { width: 13px; height: 13px; }
.ob-level-vlag {
  position: absolute;
  top: -6px;
  right: -8px;
  font-size: 15px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* Het lint dat een nieuwe aflevering aankondigt. */
.ob-banner {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
/* Een plank aan twee touwtjes, zoals er bij ons ook eentje boven de werkbank
   hangt. De tekst ligt er als aparte laag overheen, zodat het bordje zelf kan
   meerekken met de naam. */
.ob-banner-bord {
  position: relative;
  display: inline-block;
  min-width: 160px;
  filter: drop-shadow(0 4px 5px rgba(60, 33, 10, .4));
}
.ob-bord-svg { display: block; width: 100%; height: 54px; }
.ob-banner-tekst {
  position: absolute;
  left: 0;
  right: 0;
  top: 16px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  padding: 0 26px;
}
.ob-banner-icoon { font-size: 15px; }
.ob-banner-slot { font-size: 11px; opacity: .85; }
.ob-banner.is-dicht .ob-banner-bord { filter: drop-shadow(0 4px 5px rgba(60, 33, 10, .4)) saturate(.55); }

/* Waar iedereen staat. Jouw eigen marker krijgt een accent. Wie op hetzelfde
   level staat hangt in een waaier om de knoop (schikMarkers() in
   js/bestellingen.js); left/top is het midden van het bolletje, vandaar de
   -15px (half bolletje) in de transform. */
.ob-marker {
  position: absolute;
  transform: translate(-50%, -15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  pointer-events: none;
  z-index: 2;
}
.ob-marker-bel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  font-size: 17px;
  background: var(--surface);
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .2);
  border: 2px solid #fff;
}
.ob-marker.is-ik .ob-marker-bel,
.ob-marker-bel.is-ik { border-color: var(--green); }
/* Maximaal 60 px breed (MARKER_HALF in bestellingen.js rekent daarmee): een
   lange naam wordt afgekapt in plaats van over zijn buurman heen te lopen. */
.ob-marker-naam {
  max-width: 60px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, .82);
  padding: 1px 5px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Te veel mensen op één level: één bundel met een stapeltje avatars en "+N".
   Een echte knop, want je tikt erop voor de hele lijst. */
.ob-bundel {
  position: absolute;
  transform: translate(-50%, -15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ob-bundel-stapel { display: flex; align-items: center; }
.ob-bundel-stapel > * + * { margin-left: -11px; }
.ob-bundel-meer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 2px solid #fff;
  background: #2B2018;
  color: #FFE49B;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .2), 0 4px 8px rgba(0, 0, 0, .2);
  position: relative;
}
.ob-bundel .ob-marker-naam { max-width: 60px; }
.ob-bundel.is-ik .ob-marker-naam { box-shadow: inset 0 0 0 1.5px var(--green); }
.ob-bundel:focus-visible { outline: none; }
.ob-bundel:focus-visible .ob-bundel-stapel {
  border-radius: 999px;
  box-shadow: 0 0 0 3px #FFE49B;
}
.ob-bundel[aria-expanded="true"] .ob-bundel-meer { background: var(--green); color: #fff; }

/* Het lijstje achter een bundel. In de kleuren van de werkplaats, zoals de
   slotmelding: donker hout met lichte tekst, leesbaar op het avondgras. */
.ob-wie {
  position: absolute;
  z-index: 6;
  width: min(232px, calc(100% - 16px));
  box-sizing: border-box;
  padding: 8px 6px 6px 12px;
  background: rgba(43, 32, 24, .96);
  color: #F6EEDF;
  border: 1px solid rgba(255, 228, 155, .35);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  animation: obWieIn .16s ease-out;
}
@keyframes obWieIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ob-wie { animation: none; } }
.ob-wie-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  font-family: 'Fraunces', serif;
}
.ob-wie-dicht {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #F6EEDF;
  font-size: 14px;
  cursor: pointer;
}
.ob-wie-dicht:focus-visible { outline: 2px solid #FFE49B; outline-offset: 1px; }
.ob-wie-lijst {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 6px 0 0;
  max-height: 216px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ob-wie-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
  font-weight: 600;
  min-width: 0;
}
.ob-wie-rij + .ob-wie-rij { border-top: 1px solid rgba(255, 255, 255, .08); }
.ob-wie-avatar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid #fff;
  overflow: hidden;
}
.ob-wie-rij.is-ik .ob-wie-avatar { border-color: var(--green); }
.ob-wie-naam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Een dicht level dat je toch aantikt schudt van nee. Een knop die helemaal
   niet reageert voelt als een bug; dit vertelt je dat je eerst verder moet. */
.ob-level.is-nee .ob-level-schijf { animation: obNee .46s ease-in-out; }
@keyframes obNee {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-7px) rotate(-6deg); }
  32% { transform: translateX(6px) rotate(5deg); }
  50% { transform: translateX(-5px) rotate(-4deg); }
  68% { transform: translateX(4px) rotate(3deg); }
  85% { transform: translateX(-2px) rotate(-1deg); }
}

.ob-slotmelding {
  position: absolute;
  transform: translate(-50%, -168%);
  padding: 5px 11px;
  background: rgba(43, 32, 24, .92);
  color: #F6EEDF;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  animation: obSlotMelding 1.6s ease-out forwards;
  z-index: 4;
}
@keyframes obSlotMelding {
  0% { opacity: 0; transform: translate(-50%, -140%) scale(.9); }
  14% { opacity: 1; transform: translate(-50%, -168%) scale(1); }
  78% { opacity: 1; transform: translate(-50%, -168%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -186%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ob-level.is-nu .ob-level-schijf { animation: none; }
  .ob-pad-toolpath { animation: none; }
  .ob-zaagsel span { animation: none; }
  .ob-level.is-nee .ob-level-schijf { animation: none; outline: 3px solid var(--coral); border-radius: 50%; }
}

/* ---------- Het klusblad ---------- */

.ob-terug {
  background: none;
  border: none;
  padding: 4px 0;
  margin-bottom: 8px;
  color: var(--wood-dark);
  font-size: 13px;
  cursor: pointer;
}
.ob-blad-kop { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.ob-blad-merk { flex: 0 0 52px; color: var(--wood-dark); }
.ob-blad-merk .ob-merk { width: 52px; height: 52px; }
.ob-blad-titel { flex: 1; min-width: 0; }
.ob-blad-nr {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin-bottom: 2px;
}
.ob-blad-titel h1 { margin: 0 0 4px; font-size: 22px; }
.ob-blad-titel p { margin: 0; font-size: 13px; color: var(--ink-soft); }

.ob-nieuw {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 13px;
  margin-bottom: 12px;
  background: #FFF6E2;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
}
.ob-nieuw-vlag {
  align-self: flex-start;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  background: var(--gold);
  color: #3A2708;
  padding: 2px 7px;
  border-radius: 999px;
}
.ob-nieuw strong { font-size: 14px; }
.ob-nieuw span { font-size: 12px; color: var(--ink-soft); }

.ob-opdracht {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.ob-opdracht-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
}
.ob-opdracht strong { font-family: 'Fraunces', serif; font-size: 17px; }

.ob-kop { font-size: 14px; margin: 16px 0 8px; }

.ob-stercrits { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ob-stercrit {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.ob-stercrit.is-gehaald { color: var(--ink); border-color: var(--green); }
.ob-vink { width: 19px; height: 19px; flex: 0 0 19px; display: block; }
.ob-stercrit-tekst { flex: 1; font-size: 13px; }
.ob-stercrit-ster .ob-ster { width: 16px; height: 16px; }

.ob-eigen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ob-eigen-vak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}
.ob-eigen-waarde { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 700; }
.ob-eigen-label { font-size: 10px; color: var(--ink-soft); }

.ob-rang { margin-bottom: 16px; }

.ob-geen-potje {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  text-align: center;
}
.ob-geen-potje strong { font-size: 14px; }
.ob-geen-potje span { font-size: 12px; color: var(--ink-soft); }

/* ---------- Weekklassement ---------- */

.kl-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.kl-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.kl-tab.is-actief { background: var(--ink); color: #F6EEDF; border-color: var(--ink); }
.kl-tab-icoon { font-size: 15px; }

.kl-champ {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #FFF0C8, #F2CE7E);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
}
.kl-champ.is-open { background: var(--surface-2); border-color: var(--border); }
.kl-champ-kroon { font-size: 28px; }
.kl-champ-tekst { display: flex; flex-direction: column; flex: 1; gap: 2px; }
.kl-champ-tekst strong { font-family: 'Fraunces', serif; font-size: 16px; }
.kl-champ-tekst span { font-size: 11px; color: var(--ink-soft); }
.kl-champ-emoji { font-size: 26px; }

.kl-strip {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.kl-strip.is-leeg { background: var(--surface-2); }
.kl-strip-kop {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.kl-strip-sub { font-size: 10px; font-weight: 400; opacity: .8; }
.kl-strip-leeg { font-size: 12px; color: var(--ink-soft); }

.kl-rijen { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kl-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.kl-rij.is-ik { background: #EAF4EF; box-shadow: inset 0 0 0 1px var(--green); }
.kl-rij.is-eerste .kl-score { color: var(--wood-dark); font-weight: 700; }
.kl-plaats {
  flex: 0 0 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.kl-plaats.is-medaille { font-size: 16px; }
.kl-plaats.is-leeg { opacity: .4; }
.kl-emoji { font-size: 17px; }
.kl-naam { flex: 1; font-size: 13px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.kl-jij {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--green);
  color: #fff;
  padding: 1px 5px;
  border-radius: 999px;
}
.kl-score { font-family: 'Fraunces', serif; font-size: 15px; font-weight: 700; }

.kl-aansporing { font-size: 12px; color: var(--ink-soft); margin: 0 0 16px; }
.kl-vorige {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
}
.kl-kop { font-size: 15px; margin: 20px 0 8px; }
.kl-spel + .kl-spel { margin-top: 26px; padding-top: 6px; border-top: 1px solid var(--border); }

/* De naam met een regeltje eronder: op welk level die score gehaald is, of hoe
   vaak er geprobeerd is. */
.kl-naam-rij { display: flex; align-items: center; gap: 6px; }
.kl-naam-sub { font-size: 10px; color: var(--ink-soft); }
.kl-rij .kl-naam { flex-direction: column; align-items: flex-start; gap: 0; }

.kl-historie-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 14px;
  margin: 22px 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.kl-historie-pijl { color: var(--ink-soft); }

.kl-erelijst-week { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.kl-erelijst-kop { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-bottom: 5px; }

.kl-klus-leeg, .kl-erelijst-leeg {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
}

.kl-erelijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.kl-erelijst-rij {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.kl-erelijst-week { flex: 0 0 44px; color: var(--ink-soft); font-size: 11px; }
.kl-erelijst-spel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-erelijst-naam { font-weight: 600; }
.kl-erelijst-score { color: var(--ink-soft); font-size: 11px; }

/* ---------- Klusinformatie op de spelschermen zelf ---------- */
/* Deze staan binnen .mg-scherm / .dh-scherm, dus op de donkere achtergrond
   van de spellen in plaats van op de gewone app-opmaak hierboven. */

.mg-klus-doel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  margin: 0 0 10px;
  background: rgba(0, 0, 0, .22);
  border-radius: var(--radius-sm);
}
.mg-klus-doel-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  opacity: .7;
}
.mg-klus-doel strong { font-family: 'Fraunces', serif; font-size: 16px; }

.mg-klus-sterren { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mg-klus-sterren li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  opacity: .62;
}
.mg-klus-sterren li.is-gehaald { opacity: 1; }
.mg-klus-ster { color: #8A7A63; }
.mg-klus-sterren li.is-gehaald .mg-klus-ster { color: var(--gold); }

/* ---------- De drie sterrenbadges tijdens het spelen ---------- */
/* Zie js/klus-hud.js. In allebei de spellen boven het speelveld, en altijd
   alle drie in beeld: uitklappen was tijdens een potje met iets achter je aan
   precies één handeling te veel. Elke badge is een balkje dat volloopt, met de
   teller erin en waar het over gaat eronder. */

.kh-badges {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 0 14px 2px;
  flex: 0 0 auto;
}
/* Het Freesdoolhof legt al zijn schermlagen op z-index 2 (.dh-scherm >
   *:not(.dh-bed) hierboven), en die regel is specifieker dan .kh-badges. Zonder
   deze komen de klemmen van het venster over de onderrand van de badges heen.
   Diezelfde regel drukt ook de overlays die er later bij komen terug naar 2 —
   die redden het normaal op DOM-volgorde, maar niet meer tegen een badgerij op
   6. Ze staan hier dus mee, met hun eigen laag uit de regels hierboven. */
.dh-scherm > .kh-badges, .mg-scherm > .kh-badges { z-index: 6; }
.dh-scherm > .mg-uitslag { z-index: 10; }
.dh-scherm > .dh-tussen { z-index: 15; }
.dh-scherm > .dh-verplaats { z-index: 14; }
.dh-scherm > .dh-wisselronde { z-index: 14; }
.dh-scherm > .dh-melding { z-index: 16; }

.kh-badge {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 6px 4px;
  border-radius: 10px;
  /* Stevig ondoorzichtig: hieronder ligt de houtnerf van het spoilboard, en
     die heeft lichte en donkere plekken. Bij een transparantere badge lijken
     de drie onderling van kleur te verschillen. */
  background: rgba(24, 15, 8, .82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  color: rgba(246, 238, 223, .8);
  line-height: 1.15;
}
/* Het balkje zit áchter de tekst, over de volle hoogte van de badge: zo loopt
   de badge zelf vol in plaats van dat er een streepje onder hangt. */
.kh-badge-vul {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(232, 163, 61, .3);
  transition: width .25s ease;
}
.kh-badge > *:not(.kh-badge-vul) { position: relative; }

.kh-badge-merk { display: block; width: 15px; height: 15px; opacity: .75; }
.kh-badge-merk .ob-merk { display: block; width: 100%; height: 100%; }
/* Het vlakje achter de merktekening hoort bij de klusknop op de levelbaan;
   hier zou het een tweede, donkerder blokje in de badge zijn. */
.kh-badge-merk .ob-merk > rect:first-child { display: none; }

.kh-badge-regel { display: flex; align-items: baseline; gap: 3px; }
.kh-badge-ster { font-size: 10px; color: #8A7A63; }
.kh-badge-stand {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #F6EEDF;
}
.kh-badge-label {
  max-width: 100%;
  font-size: 9px;
  letter-spacing: .01em;
  opacity: .65;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kh-badge.is-klaar {
  background: rgba(46, 158, 109, .26);
  box-shadow: inset 0 0 0 1px rgba(123, 220, 174, .55);
  color: #EAFBF2;
}
.kh-badge.is-klaar .kh-badge-vul { background: rgba(46, 158, 109, .32); }
.kh-badge.is-klaar .kh-badge-ster { color: var(--gold); text-shadow: 0 0 10px rgba(255, 201, 77, .7); }
.kh-badge.is-klaar .kh-badge-stand { color: #9BEFC6; }

/* Een tijdsdoel dat verlopen is: die ster is weg, en een volle gouden balk zou
   het tegenovergestelde zeggen. */
.kh-badge.is-verlopen .kh-badge-vul { background: rgba(228, 99, 63, .3); }
.kh-badge.is-verlopen .kh-badge-stand { color: #FFA98E; }

/* ---------- De drie sterren op een eindscherm ---------- */
/* Welke ster je gehaald hebt, en waar hij voor stond. Staat op de donkere
   uitslagschermen van beide spellen en op het voortgangsscherm erna. */

.ks-eisen {
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, .22);
  text-align: left;
}
.ks-eisen-kop {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
  margin-bottom: 5px;
}
.ks-eisen-lijst { list-style: none; margin: 0; padding: 0; }
.ks-eis {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  opacity: .62;
}
.ks-eis + .ks-eis { border-top: 1px solid rgba(255, 255, 255, .07); }
.ks-eis.is-gehaald { opacity: 1; }
.ks-eis-ster { color: #8A7A63; font-size: 14px; }
.ks-eis.is-verdiend .ks-eis-ster { color: var(--gold); }
.ks-eis-tekst { flex: 1 1 auto; min-width: 0; }
.ks-eis-vink { font-weight: 800; color: var(--coral); }
.ks-eis.is-gehaald .ks-eis-vink { color: var(--green); }

/* Op de donkere uitslagkaart moeten de twee kleuren wat meer geven. */
.mg-uitslag-kaart .ks-eisen { background: rgba(0, 0, 0, .25); }
.mg-uitslag-kaart .ks-eis-vink { color: #FFA98E; }
.mg-uitslag-kaart .ks-eis.is-gehaald .ks-eis-vink { color: #7BDCAE; }

/* En op het lichte voortgangsscherm juist andersom: daar staat hij op papier. */
.vg .ks-eisen { background: rgba(0, 0, 0, .05); }
.vg .ks-eis + .ks-eis { border-top-color: rgba(0, 0, 0, .08); }

.mg-uitslag-nieuwe-ster { font-size: 13px; color: var(--gold); font-weight: 600; margin-bottom: 4px; }
.mg-uitslag-rang { margin: 12px 0 4px; text-align: left; }
.mg-uitslag-rang .kl-strip { background: rgba(0, 0, 0, .2); border-color: rgba(255, 255, 255, .12); }
.mg-uitslag-rang .kl-strip-kop { color: rgba(255, 255, 255, .72); }
.mg-uitslag-rang .kl-rij { background: rgba(0, 0, 0, .22); }
.mg-uitslag-rang .kl-rij.is-ik { background: rgba(46, 158, 109, .22); box-shadow: inset 0 0 0 1px var(--green); }
.mg-uitslag-rang .kl-plaats, .mg-uitslag-rang .kl-strip-leeg { color: rgba(255, 255, 255, .6); }
/* Naam en score wit op de donkere kaart, ook op plek 1 (anders wint daar het donkere hout). */
.mg-uitslag-rang .kl-naam, .mg-uitslag-rang .kl-rij .kl-score, .mg-uitslag-rang .kl-rij.is-eerste .kl-score { color: #fff; }
.mg-uitslag-rang .kl-aansporing { color: rgba(255, 255, 255, .72); margin-bottom: 0; }

/* ---------- Freesdoolhof: de doorlopende machine ---------- */
/*
   De spindel rijdt nu door in plaats van per vakje te springen, en er komt
   iets achter je aan. Deze regels horen bij die laag: het statusstrookje, de
   achtervolgers en de afzuiging.
*/

.dh-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 14px 2px;
}
.dh-status.is-kaal { display: none; }

.dh-status-vak {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  color: #F6EEDF;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}
.dh-status-vak small { font-size: 10px; opacity: .65; }
.dh-status-vak.is-bits { letter-spacing: 1px; }
/* Nog één frees over: dat moet je zien zonder te tellen. */
.dh-status-vak.is-bits[data-over="1"] {
  background: rgba(228, 99, 63, .3);
  box-shadow: inset 0 0 0 1px var(--coral);
}
.dh-status-vak.is-combo { min-width: 0; padding: 4px 0; background: none; font-weight: 700; color: var(--gold); }
.dh-status-vak.is-combo.is-aan { padding: 4px 10px; background: rgba(232, 163, 61, .22); }

.dh-spoken {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.dh-spook {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  /* Geen transitie: de loop zet elke frame zelf de plek. Een transitie zou het
     beeld laten naslepen op waar de motor het spook denkt te hebben, en dan
     klopt de botsing niet met wat je ziet. */
  will-change: transform;
}
.dh-spook-svg { width: 100%; height: 100%; display: block; }
.dh-spook-svg .dh-spook-bang,
.dh-spook-svg .dh-spook-weg { display: none; }
.dh-spook.is-kwetsbaar .dh-spook-romp { display: none; }
.dh-spook.is-kwetsbaar .dh-spook-bang { display: block; }
.dh-spook.is-opgezogen .dh-spook-romp,
.dh-spook.is-opgezogen .dh-spook-bang { display: none; }
.dh-spook.is-opgezogen .dh-spook-weg { display: block; }
.dh-spook.is-opgezogen { opacity: .55; }
.dh-spook.is-bijna { animation: dhSpookKnippert .34s steps(1) infinite; }
@keyframes dhSpookKnippert {
  0%, 49% { filter: none; }
  50%, 100% { filter: brightness(2.4) saturate(.3); }
}

/* Het icoon komt uit Werkplaats Crush en is daar een donkere bol op een licht
   bord; hier ligt hij op donker hout en valt hij dus veel minder op. Een ring
   eromheen houdt hem vindbaar zonder aan de tekening zelf te komen — en je
   moet hem kúnnen vinden, want zonder cycloon kun je alleen maar wegrijden. */
.dh-item.is-afzuiging .dh-afzuigpunt-svg {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(95, 200, 216, .7), 0 0 10px 2px rgba(95, 200, 216, .45);
}
.dh-item.is-afzuiging:not(.is-gepakt) { animation: dhAfzuigPols 1.6s ease-in-out infinite; }
@keyframes dhAfzuigPols {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.12); }
}

/* Zolang de afzuiging op vol vermogen staat kleurt de hele plank mee: je moet
   in één oogopslag zien dat de machtsverhouding nu omgedraaid is. */
.dh-spel.is-afzuiging .dh-venster-vlak {
  box-shadow: 0 0 0 3px rgba(95, 200, 216, .55), 0 18px 40px rgba(0, 0, 0, .45);
}

.dh-punten-pop.is-combo { color: var(--gold); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .dh-item.is-afzuiging:not(.is-gepakt) { animation: none; }
  .dh-spook.is-bijna { animation: none; outline: 2px solid #FFF8EC; border-radius: 50%; }
}
.mg-uitslag-stats.is-tweede { margin-top: 6px; opacity: .85; }

/* ---------- Weekstand in de Eregalerij ---------- */
.ere-week-meer {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: var(--surface-2);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--wood-dark);
  cursor: pointer;
}
.ob-decor.is-groot { filter: drop-shadow(0 6px 5px rgba(50, 70, 25, .42)); }
.ob-plukje {
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
  pointer-events: none;
  opacity: .92;
}
.ob-plukje-svg { width: 100%; height: 100%; display: block; }

/* ---------- Bestellingen: het scherm is de baan ---------- */
/*
   De drie samenvattingskaarten zijn weg: wat erin stond (waar je bent, hoeveel
   sterren) lees je van de baan zelf af, en ze aten het halve scherm op. Wat
   overblijft is een slanke kop en daaronder zoveel mogelijk pad.
*/
.ob-vol {
  display: flex;
  flex-direction: column;
  /* De topbalk en de onderbalk zijn samen ongeveer 150 px; de rest is baan. */
  height: calc(100dvh - 150px);
  min-height: 420px;
  position: relative;
}
.ob-vol .ob-kop { margin-bottom: 10px; flex: 0 0 auto; }
.ob-vol .ob-kop h1 { font-size: 25px; margin-bottom: 2px; }
.ob-vol .ob-slogan { font-size: 11.5px; margin: 0; }
.ob-vol .ob-baan-venster { height: auto; min-height: 0; }

/* De badge met het beste potje van de week, over de baan heen. Wie hem heeft
   staat erbij: alleen een getal vertelt je de helft. */
/* De baan scrollt, de badge niet. Vandaar een wrapper die het positievlak is:
   de scroller ligt erin, de overlay eroverheen. Zou de badge in de scroller
   zelf staan, dan scrolde hij mee weg. */
.ob-baan-wrap { position: relative; flex: 1 1 auto; min-height: 0; }
.ob-baan-wrap > .ob-baan-venster { position: absolute; inset: 0; }
.ob-overlay { position: absolute; inset: 0; pointer-events: none; }
.ob-weekbadge {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px 7px 9px;
  background: linear-gradient(135deg, rgba(43, 32, 24, .93), rgba(62, 46, 34, .93));
  color: #F6EEDF;
  border: 2px solid rgba(255, 214, 138, .5);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
}
.ob-weekbadge.is-ik { border-color: var(--green); }
.ob-weekbadge-kroon { font-size: 17px; }
.ob-weekbadge-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 15px;
  background: rgba(255, 255, 255, .14);
  border-radius: 50%;
}
.ob-weekbadge-tekst { display: flex; flex-direction: column; line-height: 1.2; }
.ob-weekbadge-tekst strong { font-family: 'Fraunces', serif; font-size: 15px; }
.ob-weekbadge-tekst span { font-size: 10px; opacity: .75; }
.ob-weekbadge.is-leeg .ob-weekbadge-tekst strong { font-size: 12px; font-family: inherit; }

/* ---------- Het bestelbriefje: donker, en tegelijk de intro van het spel ---------- */
/*
   Was twee schermen achter elkaar (een licht briefje, dan het uitlegscherm van
   het spel). Dat is er nu één: de sterrenvoorwaarden groot in beeld met de
   startknop er direct onder, en de uitleg met icoontjes ingeklapt eronder.
*/
.ob-blad { padding: 0; }
/* De achtergrond (spoilboard of werkplaats) mag sfeer geven maar niet dwars
   door de tekst heen schijnen. Vandaar een donkere sluier eroverheen en een
   eigen paneel voor de inhoud. */
.ob-blad::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 18%, rgba(70, 48, 28, .72), rgba(24, 17, 11, .93) 72%);
  z-index: 1;
}
.ob-blad-kaart {
  position: relative;
  z-index: 2;
  max-width: 30rem;
  margin: 10px auto;
  padding: 12px 18px calc(26px + var(--safe-bottom));
  color: #F6EEDF;
  background: linear-gradient(180deg, rgba(88, 58, 32, .96), rgba(58, 38, 22, .97));
  border: 1px solid rgba(255, 214, 138, .22);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

/* De kop van het briefje staat gecentreerd en gestapeld. Zonder deze regel
   erft hij de horizontale opzet van het oude, lichte briefje. */
.ob-blad .ob-blad-kop {
  display: block;
  text-align: center;
  gap: 0;
}
.ob-blad .ob-terug {
  color: #E8C99A;
  font-size: 13px;
  padding: 6px 0;
  margin-bottom: 4px;
}
.ob-blad-kop { text-align: center; margin-bottom: 14px; }
.ob-blad-merk {
  display: inline-flex;
  width: 54px;
  height: 54px;
  color: #E8C99A;
  margin-bottom: 4px;
}
.ob-blad-merk .ob-merk { width: 54px; height: 54px; }
.ob-blad .ob-blad-nr {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #E8A33D;
  font-weight: 700;
  margin-bottom: 2px;
}
.ob-blad-titel {
  font-size: 27px;
  margin: 0;
  color: #FFE8C4;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .5);
}

.ob-blad .ob-opdracht {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
  text-align: center;
  padding: 11px 14px;
  margin-bottom: 14px;
  background: rgba(0, 0, 0, .26);
  border-radius: var(--radius-sm);
}
.ob-blad .ob-opdracht-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .65;
}
.ob-blad .ob-opdracht strong { font-family: 'Fraunces', serif; font-size: 20px; color: #FFE8C4; }
.ob-opdracht-sub { font-size: 12px; opacity: .72; }

/* De sterrenvoorwaarden: hier kom je voor terug, dus groot. */
.ob-ster-eisen { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ob-ster-eis {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 15px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.ob-ster-eis.is-gehaald { background: rgba(46, 158, 109, .2); border-color: rgba(46, 158, 109, .7); }
.ob-ster-eis-ster { display: flex; flex: 0 0 auto; }
.ob-ster-eis-ster .ob-ster { width: 24px; height: 24px; }
.ob-ster-eis-tekst { flex: 1; }
.ob-ster-eis-vink { color: #74D6A4; font-size: 17px; font-weight: 700; }

.ob-blad-knoppen { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }

.ob-blad .ob-nieuw {
  background: rgba(232, 163, 61, .16);
  border-color: rgba(232, 163, 61, .6);
  color: #F6EEDF;
  margin-bottom: 12px;
}
.ob-blad .ob-nieuw span:not(.ob-nieuw-vlag) { color: rgba(246, 238, 223, .8); }

.ob-uitleg-knop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: rgba(0, 0, 0, .2);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-sm);
  color: #F6EEDF;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.ob-uitleg-pijl { opacity: .6; }
.ob-uitleg { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ob-uitleg li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 13px;
  background: rgba(0, 0, 0, .18);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.45;
}
.ob-uitleg-icoon { font-size: 16px; flex: 0 0 auto; }

.ob-blad .ob-eigen { margin-bottom: 10px; }
.ob-blad .ob-eigen-vak { background: rgba(0, 0, 0, .22); }
.ob-blad .ob-eigen-waarde { color: #FFE8C4; }
.ob-blad .ob-eigen-label { color: rgba(246, 238, 223, .6); }

.ob-xp {
  padding: 9px 13px;
  margin-bottom: 14px;
  background: rgba(232, 163, 61, .14);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: #F2C98A;
  text-align: center;
}

.ob-blad .ob-geen-potje { background: rgba(0, 0, 0, .26); color: #F6EEDF; }
.ob-blad .ob-geen-potje span { color: rgba(246, 238, 223, .72); }

/* De records en de weekstand op de donkere kaart. */
.ob-blad .kl-strip { background: rgba(0, 0, 0, .22); border-color: rgba(255, 255, 255, .1); }
.ob-blad .kl-strip.is-leeg { background: rgba(0, 0, 0, .16); }
.ob-blad .kl-strip-kop, .ob-blad .kl-strip-leeg { color: rgba(246, 238, 223, .72); }
.ob-blad .kl-rij { background: rgba(0, 0, 0, .22); }
.ob-blad .kl-rij.is-ik { background: rgba(46, 158, 109, .22); box-shadow: inset 0 0 0 1px var(--green); }
.ob-blad .kl-naam, .ob-blad .kl-score, .ob-blad .kl-rij.is-eerste .kl-score { color: #F6EEDF; }
.ob-blad .kl-naam-sub, .ob-blad .kl-plaats { color: rgba(246, 238, 223, .6); }
.ob-blad .kl-aansporing { color: rgba(246, 238, 223, .72); }

/* ---------- Na afloop: je schuift een stukje op ---------- */
/*
   Een uitsnede van de levelbaan op het uitslagscherm: het level dat je net
   deed, je sterren die erin ploffen, het pad dat doorloopt en het slot dat van
   het volgende level af springt. Zo eindigt een potje waar het volgende begint.
*/
.vg {
  margin: 16px 0 6px;
  padding: 14px 10px 12px;
  background: rgba(0, 0, 0, .24);
  border-radius: var(--radius);
}
.vg-pad {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px;
  padding: 0 6px 34px;
}
/* De baan tussen de knopen. De gevulde helft groeit aan zodra je gehaald bent. */
.vg-lijn {
  position: absolute;
  left: 30px;
  right: 30px;
  top: 23px;
  height: 9px;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  overflow: hidden;
}
.vg-lijn-vol {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #D7A768, #F0CE9A);
  border-radius: 999px;
  transition: width .75s cubic-bezier(.3, .8, .4, 1);
}
.vg.is-door .vg-lijn-vol { width: 100%; }

.vg-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1 1 0;
}
.vg-node.is-leeg { visibility: hidden; }
.vg-schijf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffffff55, #ffffff00 55%), var(--vg-kleur, #b08356);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 0 0 2.5px rgba(255, 255, 255, .5);
  color: #fff;
}
.vg-nr { font-family: 'Fraunces', serif; font-weight: 700; font-size: 17px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.vg-slot { display: none; width: 20px; height: 20px; }
.vg-node.is-dicht .vg-schijf { background: #8E8478; }
.vg-node.is-dicht .vg-nr { display: none; }
.vg-node.is-dicht .vg-slot { display: block; }
.vg-node.is-vorige .vg-schijf { width: 36px; height: 36px; opacity: .65; }
.vg-node.is-vorige .vg-nr { font-size: 13px; }
.vg-node.is-nu .vg-schijf { width: 54px; height: 54px; box-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 0 4px rgba(255,255,255,.35), inset 0 0 0 2.5px #FFE49B; }
.vg-node.is-nu .vg-nr { font-size: 20px; }
/* Het slot springt eraf: even groot worden, dan terug. */
.vg-node.is-open .vg-schijf { animation: vgOpen .5s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes vgOpen {
  0% { transform: scale(1); }
  45% { transform: scale(1.28) rotate(-7deg); }
  100% { transform: scale(1); }
}

.vg-sterren { display: flex; gap: 2px; height: 15px; }
.vg-ster { display: flex; opacity: 0; transform: scale(.3) rotate(-70deg); }
.vg-ster.is-aan { animation: vgSter .55s cubic-bezier(.2, 1.7, .4, 1) forwards; }
@keyframes vgSter {
  0% { opacity: 0; transform: scale(.3) rotate(-70deg); }
  60% { opacity: 1; transform: scale(1.5) rotate(10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.vg-sterren .ob-ster { width: 14px; height: 14px; }
.vg-sterren.is-stil { opacity: .7; }
.vg-sterren.is-stil .ob-ster { width: 11px; height: 11px; }

/* Je eigen poppetje schuift van het gespeelde level naar het volgende. */
/* Onder de schijven, niet erop: anders staat je poppetje over het nummer van
   het level dat je net hebt vrijgespeeld. */
.vg-marker {
  position: absolute;
  left: 50%;
  top: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  font-size: 15px;
  background: var(--surface);
  border: 2px solid var(--green);
  border-radius: 50%;
  transform: translateX(-50%);
  /* `left` wordt in JS op het midden van de juiste knop gezet; een vaste
     afstand in vw klopt maar op één schermbreedte. */
  transition: left .8s cubic-bezier(.3, .8, .4, 1) .35s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
}

.vg-tekst { font-size: 13px; text-align: center; margin: 6px 0 0; color: #F6EEDF; opacity: .88; }
.vg-knop { margin-top: 11px; width: 100%; }
.vg-potje {
  margin-top: 10px;
  padding: 9px 12px;
  background: rgba(232, 163, 61, .16);
  border-radius: var(--radius-sm);
  font-size: 12px;
  text-align: center;
  color: #F2C98A;
}

@media (prefers-reduced-motion: reduce) {
  .vg-lijn-vol { transition: none; }
  .vg-marker { transition: none; }
  .vg-ster.is-aan { animation: none; opacity: 1; transform: none; }
  .vg-node.is-open .vg-schijf { animation: none; }
}

/* Een kaart zonder potje op de teller: hij staat er nog steeds, want hij is nu
   ook de ingang naar je levelbaan. Wel wat rustiger, zodat een kaart mét een
   potje er nog steeds uitspringt. */
.minigame-kaart.is-rust, .doolhof-kaart.is-rust { opacity: .86; }
.minigame-kaart.is-rust .minigame-kaart-glans { display: none; }

/* Het bestelbriefje leent het donkere jasje van .mg-scherm, maar niet zijn
   gedrag: dat is `position: fixed` met `overflow: hidden` en `touch-action:
   none`, want het is gemaakt voor een spelbord dat niet hoort te scrollen. Op
   een blad met tekst betekende dat: je kunt niet naar beneden. Hier dus terug
   naar gewone pagina-flow, zodat #appMain gewoon scrollt en de onderbalk
   bruikbaar blijft. */
.ob-blad.mg-scherm {
  position: relative;
  inset: auto;
  z-index: 0;
  overflow: visible;
  touch-action: auto;
  user-select: auto;
  -webkit-user-select: auto;
  display: block;
  /* Uit de padding van #appMain trekken zodat het donker van rand tot rand loopt. */
  margin: -16px -16px calc(-96px - var(--safe-bottom));
  padding: 16px 16px calc(100px + var(--safe-bottom));
  min-height: calc(100dvh - 56px);
}

/* ---------- De levelbaan in hetzelfde jasje als de rest van het spel ---------- */
/*
   De baan stond op de lichte app-achtergrond terwijl alles eromheen (het
   bestelbriefje, het uitslagscherm) donker hout is. Daardoor viel hij eruit.
   Nu deelt hij de achtergrond, de koptypografie en de knopstijl met de rest.

   Het gras zelf blijft groen — dat was de vorige wens en het is wat de baan
   vrolijk houdt — maar het is avondlicht geworden in plaats van middaglicht,
   zodat het in het donkere frame past in plaats van als sticker te liggen.
*/
.ob-vol {
  margin: -16px -16px calc(-96px - var(--safe-bottom));
  padding: 14px 14px calc(100px + var(--safe-bottom));
  height: auto;
  min-height: calc(100dvh - 56px);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(96, 64, 36, .85), rgba(28, 19, 12, .96) 70%),
    #241811;
  color: #F6EEDF;
}
.ob-vol .ob-kop h1 { color: #FFE8C4; text-shadow: 0 2px 5px rgba(0, 0, 0, .45); }
.ob-vol .ob-slogan { color: rgba(246, 238, 223, .74); }
.ob-vol .ob-spel { color: #E8A33D; }

/* Het venster wordt een ingelijst kijkgat, net als het bord in de spellen. */
.ob-vol .ob-baan-venster {
  border: 3px solid #6E4620;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 2px rgba(255, 226, 180, .16),
    inset 0 14px 26px rgba(0, 0, 0, .3),
    0 10px 26px rgba(0, 0, 0, .45);
}

/* Avondlicht op het gras: dezelfde scene, een paar uur later. */
.ob-vol .ob-baan-venster {
  background-color: #7FA455;
  background-image:
    radial-gradient(ellipse 70% 22% at 18% 10%, rgba(255, 236, 190, .26), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 60% 18% at 82% 46%, rgba(255, 236, 190, .16), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #8EB162 0%, #79A052 55%, #64874A 100%);
}
.ob-vol.ob-crush .ob-baan-venster {
  background-color: #93B25E;
  background-image:
    radial-gradient(ellipse 70% 22% at 22% 14%, rgba(255, 240, 200, .3), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 60% 18% at 78% 52%, rgba(255, 240, 200, .18), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, #A2BF6C 0%, #8CAD5C 55%, #76984E 100%);
}
/* Een warme vignettering langs de randen, zodat het kijkgat diepte krijgt en
   naadloos in het donkere frame overloopt. */
.ob-baan-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: inset 0 0 46px rgba(40, 26, 14, .5);
}

/* ---------- Bestellingen: het hele scherm, zonder app eromheen ---------- */
/*
   De levelbaan is geen pagina in de app maar een wereld op zichzelf. De balk
   boven en de nav onder zijn weg (setBestellingenModus in js/app.js), dus de
   baan loopt van de statusbalk tot de onderrand door en er zit een eigen
   sluitknop op om terug naar home te gaan — precies zoals de spellen zelf dat
   doen. Zonder die knop zou je er niet meer uit komen.

   Let op: dit mag níét `overflow: hidden` op de body zetten zoals
   `minigame-modus` doet. De baan is juist een scroller, en die zou dan
   vastzitten.
*/
body.bestellingen-modus { background: #241811; }

/* Het bestelbriefje trekt dezelfde marges recht: zonder shell moet het donker
   ook de statusbalk en de onderrand vullen, en hoeft er onderaan geen ruimte
   meer vrij te blijven voor een nav die er niet is. */
body.bestellingen-modus .ob-blad.mg-scherm {
  margin: calc(-16px - env(safe-area-inset-top)) -16px calc(-16px - var(--safe-bottom));
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(24px + var(--safe-bottom));
  min-height: 100dvh;
}

body.bestellingen-modus .ob-vol {
  /* De negatieve marges van .ob-vol compenseren de padding van #appMain; nu
     de shell weg is moet de baan ook de ruimte van de statusbalk vullen. */
  margin-top: calc(-16px - env(safe-area-inset-top));
  margin-bottom: calc(-16px - var(--safe-bottom));
  padding-top: calc(10px + env(safe-area-inset-top));
  padding-bottom: calc(14px + var(--safe-bottom));
  min-height: 100dvh;
}

/* De kop is nu het enige wat boven de baan staat, dus hij mag krap. De knop
   ligt erover in plaats van ernaast: de titel blijft zo gecentreerd op het
   scherm en niet op de ruimte die de knop overlaat. */
.ob-vol .ob-kop { position: relative; }
/* Let op: .ob-terug bestaat al — dat is de tekstknop op het klusblad. Deze
   ronde knop heeft daarom een eigen naam; anders erft die tekstknop de
   absolute positionering en schuift hij het scherm af. Dat is precies één
   keer gebeurd. */
.ob-home {
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 226, 180, .28);
  background: rgba(255, 255, 255, .07);
  color: #F6EEDF;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .12s ease;
}
.ob-home:active { background: rgba(255, 255, 255, .16); transform: scale(.92); }

/* Op een smal scherm zou de titel onder de knop door lopen. */
@media (max-width: 360px) {
  .ob-vol .ob-kop h1 { font-size: 22px; padding: 0 44px; }
}

/* ---------- Hoeveel potjes staan er klaar ---------- */
/*
   Rechtsboven in de baan, tegenover de weekbadge links. Op de baan zie je
   waar je heen kunt; dit zegt of je er nú iets kunt. Zonder ticket blijft hij
   staan maar dooft hij uit — dat je er geen hebt is ook informatie, en een
   verdwijnende badge zou je alleen maar laten zoeken.
*/
.ob-tickets {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px 7px 10px;
  background: linear-gradient(135deg, rgba(43, 32, 24, .93), rgba(62, 46, 34, .93));
  color: #F6EEDF;
  border: 2px solid rgba(255, 214, 138, .5);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
  pointer-events: none;
}
.ob-tickets-merk { font-size: 16px; line-height: 1; }
.ob-tickets-getal { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ob-tickets.is-leeg {
  border-color: rgba(255, 214, 138, .22);
  color: rgba(246, 238, 223, .55);
}
.ob-tickets.is-leeg .ob-tickets-merk { filter: grayscale(1); opacity: .6; }

/* ---------- "Wat is er nieuw" ---------- */
/*
   Eén keer per profiel, vóór home. Het staat op zichzelf (geen balk, geen nav,
   zie setShellVisible in js/app.js), dus het mag de volle hoogte hebben en zijn
   eigen ritme: kop, drie punten, één knop.
*/
.nieuws-scherm {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 100dvh;
  margin: calc(-16px - env(safe-area-inset-top)) -16px calc(-16px - var(--safe-bottom));
  padding: calc(28px + env(safe-area-inset-top)) 20px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(ellipse at 50% 0%, rgba(96, 64, 36, .85), rgba(28, 19, 12, .96) 70%),
    #241811;
  color: #F6EEDF;
}
.nieuws-kop { text-align: center; }
.nieuws-kicker {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(232, 163, 61, .18);
  border: 1px solid rgba(255, 214, 138, .4);
  color: #F2C27B;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.nieuws-kop h1 {
  margin: 0 0 10px;
  font-size: 27px;
  line-height: 1.15;
  color: #FFE8C4;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}
.nieuws-intro { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(246, 238, 223, .78); }

.nieuws-punten { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.nieuws-punt {
  display: flex;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 214, 138, .16);
}
.nieuws-punt-icoon { flex: 0 0 auto; font-size: 24px; line-height: 1.1; }
.nieuws-punt-tekst { min-width: 0; }
.nieuws-punt-tekst strong { display: block; margin-bottom: 4px; font-size: 15px; color: #FFE8C4; }
.nieuws-punt-tekst p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(246, 238, 223, .76); }

/* Onderaan, en met marge erboven zodat hij bij weinig tekst niet tegen het
   laatste blok aan plakt. */
.nieuws-knop { margin-top: auto; width: 100%; }

/* ---------- Vegen of knoppen ---------- */
/*
   Twee manieren om te sturen die elkaar in de weg zaten: met de knoppen én
   vegen tegelijk actief tikte je tijdens een veeg per ongeluk een richting aan.
   Er is er nu één aan, met deze schakelaar boven de taart.
*/
.dh-besturing-keuze {
  display: flex;
  gap: 2px;
  margin: 0 auto 6px;
  padding: 2px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(90, 102, 112, .1);
  border: 1px solid rgba(90, 102, 112, .16);
}
.dh-keuze-knop {
  border: 0;
  border-radius: 999px;
  padding: 3px 10px;
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #8A949C;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, color .15s ease;
}
/* De aan-stand is een tintje donkerder en verder niets: dit is een instelling
   die je één keer zet, geen knop waar je naar moet kijken tijdens het spelen. */
.dh-keuze-knop.is-aan { background: rgba(255, 255, 255, .9); color: #4B5760; }
.dh-keuze-knop:not(.is-aan):active { background: rgba(0, 0, 0, .06); }

/* In veegstand is de taart helemaal weg — niet gedoofd maar verdwenen. Een
   uitgegrijsde knop blijft eruitzien als iets wat kapot is; wat er staat hoort
   te kloppen met wat je kunt. Op zijn plek komt een aanwijzing. */
.dh-jog-pie.is-veegstand { display: none; }

.dh-veeg-wenk { display: none; }
.dh-jog-pie.is-veegstand + .dh-veeg-wenk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: min(224px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px dashed rgba(90, 102, 112, .28);
  color: #5A6670;
  text-align: center;
  user-select: none;
}
.dh-veeg-hand { font-size: 34px; line-height: 1; animation: dhVeegWuif 2.4s ease-in-out infinite; }
/* Heb je één keer geveegd, dan weet je het. De beweging in je ooghoek is daarna
   alleen nog afleiding terwijl er iets achter je aan zit, dus dan gaat het
   handje weg. De pijlen en de regel eronder blijven: die zijn stil. */
.dh-veeg-wenk.is-geleerd .dh-veeg-hand { display: none; }
.dh-veeg-tekst strong { display: block; font-size: 14px; font-weight: 800; color: #46525B; }
.dh-veeg-tekst span { font-size: 11px; color: #7C8891; }

/* De vier richtingen langs de rand, zodat je ziet welke kanten het op kan. */
.dh-veeg-pijl {
  position: absolute;
  width: 20px; height: 20px;
  color: rgba(90, 102, 112, .32);
}
.dh-veeg-pijl.is-noord { top: 10%; left: 50%; transform: translateX(-50%); }
.dh-veeg-pijl.is-zuid { bottom: 10%; left: 50%; transform: translateX(-50%); }
.dh-veeg-pijl.is-west { left: 10%; top: 50%; transform: translateY(-50%); }
.dh-veeg-pijl.is-oost { right: 10%; top: 50%; transform: translateY(-50%); }
.dh-veeg-pijl .dh-pijl { width: 20px; height: 20px; }

@keyframes dhVeegWuif {
  0%, 100% { transform: translateX(-14px) rotate(-8deg); }
  50% { transform: translateX(14px) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dh-veeg-hand { animation: none; }
}

/* ---------- Vormdoolhof: het proefscherm (testprofiel, #/vormproef) ----------
   Een proefstuk, geen spelscherm: het staat in het gewone lichte jasje van
   de app (het spel zelf is donker) met platte kaartjes, zodat je acht
   vormen in één blik kunt vergelijken. De plank gebruikt bewust dezelfde
   .dh-gang-* als het echte doolhof — anders beoordeel je een tekening die
   er in het spel toch anders uit gaat zien. */
.dhv-scherm { max-width: 760px; margin: 0 auto; }
.dhv-kop { margin-bottom: 14px; }
.dhv-kicker { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.dhv-scherm h1 { margin: 4px 0 8px; color: var(--ink); font-size: 22px; }
.dhv-uitleg, .dhv-notitie, .dhv-variant-uitleg { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.dhv-variant-uitleg { margin: -2px 0 12px; }
.dhv-notitie { margin: 10px 0 16px; }

.dhv-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dhv-rij-label { font-size: 12.5px; color: var(--ink-soft); min-width: 74px; }
.dhv-knoppen { display: flex; gap: 6px; flex-wrap: wrap; }
.dhv-keuze {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.dhv-keuze.is-aan { background: var(--wood-dark); border-color: var(--wood-dark); color: #FFF6E8; }

.dhv-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 14px;
  margin: 6px 0 16px;
}
.dhv-kaart {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.dhv-kaart.is-ja { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.dhv-kaart.is-nee { opacity: .5; }
/* De plank: hout eronder, de aftekening erop. Allebei vullen ze dit vakje
   helemaal, net als .dh-plaat/.dh-tekening in het spel. De maat komt van
   de kaart (of van de grote weergave) en de verhouding van aspect-ratio;
   de tekening zelf rekent in vaste eenheden en schaalt gewoon mee.
   Let op de expliciete width/height op de svg's: een absoluut geplaatste
   svg mét viewBox houdt met alleen inset:0 zijn eigen verhouding aan en
   laat onderin een strook leeg. */
.dhv-plank { position: relative; width: 100%; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 10px rgba(60, 35, 10, .25); }
.dhv-plank > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.dhv-groot-knop { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* De spindel op zijn startvak, en het puntje waar je de plank uit rijdt. */
.dhv-start { fill: #7FB6E6; stroke: rgba(10, 20, 30, .6); stroke-width: 1; }
.dhv-uit { fill: #8CD28C; stroke: rgba(10, 30, 10, .6); stroke-width: 1; }

.dhv-naam { font-size: 14px; font-weight: 700; color: var(--ink); }
.dhv-stats { font-size: 11px; color: var(--ink-soft); text-align: center; line-height: 1.35; }
.dhv-duimen { display: flex; gap: 6px; }
.dhv-duim {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  border-radius: 20px;
  padding: 4px 9px;
  font-size: 11px;
  cursor: pointer;
}
.dhv-duim.is-aan { background: rgba(46, 158, 109, .16); border-color: var(--green); }
.dhv-duim[data-oordeel="nee"].is-aan,
.dhv-duim[data-groot-oordeel="nee"].is-aan { background: rgba(228, 99, 63, .14); border-color: var(--coral); }

.dhv-samenvatting { font-size: 13.5px; line-height: 1.5; margin: 0 0 14px; color: var(--ink); }
.dhv-samenvatting.is-leeg { color: var(--ink-soft); }

/* De grote weergave: één plank zo groot als hij in het spel op een telefoon
   staat. Dat is de maat waarop je er echt iets van kunt vinden. */
.dhv-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(30, 20, 10, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  overflow: auto;
}
.dhv-overlay-kaart {
  width: min(480px, 100%);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   Het Academy-certificaat
   ==========================================================================
   Drie bedrijven in één wereld (#/certificaat): het feest, de credits en het
   plankje dat de spindel uitfreest. Daarnaast de uitlegpagina
   (#/certificaat-frezen) en de kaart die daarna op home blijft staan.

   Alles met prefix .cert-. De donkere wereld is dezelfde als die van de
   levelbaan en het scherm na een potje — geen vierde kleurwereld erbij. */

body.certificaat-modus { background: #1A130E; }

/* Zonder shell moet het donker ook de statusbalk en de onderrand vullen, en
   hoeft er onderaan geen ruimte vrij te blijven voor een nav die er niet is.
   Zelfde correctie als bij .bestellingen-modus hierboven. */
body.certificaat-modus #appMain {
  max-width: none;
  padding: 0;
  min-height: 100dvh;
}

.cert-akte {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(18px + env(safe-area-inset-top)) 16px calc(20px + var(--safe-bottom));
  color: #F3E4C6;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(232, 163, 61, .1), rgba(26, 19, 14, 0) 62%),
    #1A130E;
}

.cert-akte .btn.ghost { color: #CBB59A; border-color: rgba(243, 228, 198, .22); }
.cert-akte .btn.primary { background: var(--gold); color: #241C15; }
.cert-akte .btn.primary:active { background: #C9861F; }
.cert-klein { min-height: 40px; padding: 8px 14px; font-size: 13px; }

/* ---------- 1. het feest ---------- */

.cert-akte.is-feest { justify-content: center; align-items: center; text-align: center; gap: 28px; }

.cert-feest-midden { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.cert-feest-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.cert-feest-titel {
  font-family: 'Fraunces', serif;
  font-size: clamp(38px, 13vw, 76px);
  line-height: .96;
  margin: 0;
  color: #FBEFD8;
  /* Een gouden gloed eromheen: dit is het enige moment in de app waar dat mag. */
  text-shadow: 0 0 34px rgba(232, 163, 61, .55), 0 6px 0 rgba(0, 0, 0, .35);
}

.cert-feest-naam {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 6vw, 30px);
  color: var(--gold);
}

.cert-verder { min-width: 180px; }

/* De vuurpijl die omhoog gaat: een streepje licht met een gloed eromheen.
   Zit in de effectenlaag (#fxLayer), net als de confetti. */
.fx-vuurpijl {
  position: absolute;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  transform-origin: 50% 100%;
  box-shadow: 0 0 10px currentColor;
  filter: blur(.2px);
}

/* ---------- 2. de credits ---------- */

.cert-akte.is-credits { padding-left: 0; padding-right: 0; }

.cert-credits-venster {
  position: relative;
  flex: 1;
  overflow: hidden;
  /* Boven en onder vervaagt de tekst, zodat de regels in en uit beeld drijven
     in plaats van tegen een rand aan te stoppen. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* Verminderde beweging: geen rollende tekst maar een lijst om zelf door te
   scrollen. Dan mag het masker ook weg. */
.cert-credits-venster.is-stil {
  overflow-y: auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.cert-credits-venster.is-stil .cert-credits-rol { transform: none !important; }

.cert-credits-rol {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 0 24px;
  text-align: center;
  will-change: transform;
}
.cert-credits-venster.is-stil .cert-credits-rol { position: static; }

.cert-credits-opening { padding: 40px 0 56px; }
.cert-credits-kicker {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #A8917A;
  font-weight: 800;
}
.cert-credits-hoofdrol {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 10vw, 52px);
  color: #FBEFD8;
  margin-top: 10px;
}
.cert-credits-rolnaam { font-size: 13px; color: #A8917A; margin-top: 4px; }

.cert-credits-blok { padding: 0 0 44px; }
.cert-credits-kop {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.cert-credits-regel { margin-bottom: 20px; }
.cert-credits-waarde {
  display: block;
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 8vw, 40px);
  line-height: 1.05;
  color: #FBEFD8;
}
.cert-credits-label { display: block; font-size: 14px; font-weight: 600; color: #DCC9AB; margin-top: 2px; }
.cert-credits-feit { display: block; font-size: 12px; color: #A8917A; margin-top: 4px; font-style: italic; }

.cert-credits-dank { font-size: 15px; color: #DCC9AB; margin-bottom: 8px; }

.cert-credits-einde { padding: 30px 0 90px; }
.cert-credits-einde-kop { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #A8917A; }
.cert-credits-einde-titel {
  font-family: 'Fraunces', serif;
  font-size: clamp(28px, 9vw, 46px);
  color: var(--gold);
  margin-top: 6px;
}

.cert-credits-balk {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 0;
}
.cert-credits-balk .btn.primary { flex: 1; }

/* ---------- 3. het plankje ---------- */

.cert-akte.is-plank { justify-content: flex-start; gap: 16px; }

.cert-plank-kop { text-align: center; }
.cert-plank-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #A8917A;
}
.cert-plank-titel { font-family: 'Fraunces', serif; color: #FBEFD8; margin: 4px 0 0; font-size: 24px; }

/* De werkbank: het spoilboard eronder, de plank erop, de klemmen erover. */
.cert-werkbank {
  position: relative;
  width: 100%;
  /* Staand is het certificaat ruim anderhalf keer zo hoog als breed (170 bij
     270). Zonder deze grens duwt het op een telefoon de kop en de knoppen van
     het scherm af. */
  max-width: min(100%, calc((100dvh - 320px) * 0.63));
  margin: 0 auto;
  border-radius: 14px;
  padding: 16px;
  background: #14100C;
  box-shadow: inset 0 0 0 1px rgba(243, 228, 198, .08);
}
/* Bewust géén overflow:hidden op de werkbank: de spindel komt van bóven de
   plank invliegen en zou daar afgesneden worden. Het afronden gebeurt op het
   spoilboard zelf. */
.cert-spoilboard {
  position: absolute;
  inset: 0;
  opacity: .85;
  border-radius: 14px;
  overflow: hidden;
}
.cert-spoilboard svg { width: 100%; height: 100%; }

.cert-plank {
  position: relative;
  /* De maat ná het uitzagen: het certificaat zelf, niet de plank waar het uit
     komt. De afronding is die van de zaagsnede — 8 mm op 170 bij 270, in
     procenten zodat beide hoekstralen even groot blijven als het meeschaalt. */
  aspect-ratio: 170 / 270;
  border-radius: 4.7% / 2.96%;
  overflow: visible;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 2px 0 rgba(0, 0, 0, .4);
}
.cert-plank .cert-hout {
  position: absolute;
  inset: 0;
  border-radius: 4.7% / 2.96%;
  overflow: hidden;
}
.cert-hout svg { width: 100%; height: 100%; display: block; }

.cert-freeswerk {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}


/* De spindel hangt boven de plank en beweegt op procenten, zodat hij
   meeschaalt met het scherm. --cert-hef loopt van 0 (in het hout) tot 1
   (opgetrokken): hoger is groter, met een grotere en zachtere schaduw. */
.cert-spindel {
  position: absolute;
  left: 8%;
  top: -4%;
  width: 15%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(calc(1 + var(--cert-hef, 1) * .16));
  filter: drop-shadow(
    0 calc(3px + var(--cert-hef, 1) * 9px) calc(4px + var(--cert-hef, 1) * 12px)
    rgba(0, 0, 0, calc(.6 - var(--cert-hef, 1) * .22))
  );
  pointer-events: none;
  z-index: 3;
}
.cert-spindel svg { width: 100%; height: 100%; display: block; }
/* .dh-spin draait al (zie het Freesdoolhof hierboven); hier alleen sneller,
   want deze spindel staat op volle toeren te graveren. */
.cert-spindel .dh-spin { animation-duration: .34s; }
.cert-spindel.is-geparkeerd { opacity: 0; transition: opacity .5s ease .2s; }

.cert-spanen { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.cert-spaander {
  position: absolute;
  width: 5px;
  height: 3px;
  border-radius: 2px;
  background: #E8C79A;
  transform: translate(-50%, -50%);
}

.cert-klem {
  position: absolute;
  width: 21%;
  z-index: 4;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .5));
  pointer-events: none;
}
.cert-klem svg { width: 100%; display: block; }
/* Ze grijpen met opzet een stukje over de rand van de plank heen — dat is
   precies wat een low-profile klem doet. */
.cert-klem.is-lb { left: -9%; top: -6%; }
.cert-klem.is-rb { right: -9%; top: -6%; transform: scaleX(-1); }
.cert-klem.is-lo { left: -9%; bottom: -6%; transform: scaleY(-1); }
.cert-klem.is-ro { right: -9%; bottom: -6%; transform: scale(-1, -1); }

.cert-overslaan { align-self: center; margin-top: 4px; }

.cert-plank-onder { display: flex; flex-direction: column; gap: 10px; }
/* De browserregel [hidden] { display: none } wint het niet van de klasse
   hierboven; zonder dit staan de downloadknoppen er al terwijl de frees nog
   bezig is. */
.cert-plank-onder[hidden] { display: none; }
.cert-downloads[hidden] { display: none; }
.cert-plank-tekst { font-size: 14px; color: #DCC9AB; text-align: center; margin: 0; }

/* ---------- de downloadknoppen ---------- */

.cert-downloads { display: flex; flex-direction: column; gap: 10px; }

.cert-download {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  min-height: 60px;
}
.cert-download.is-klein { display: block; text-align: center; min-height: 44px; font-size: 13px; font-weight: 600; }
.cert-download-icoon { font-size: 22px; line-height: 1; }
.cert-download-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cert-download-titel { font-size: 15px; font-weight: 700; }
.cert-download-sub { font-size: 12px; font-weight: 500; opacity: .8; }
.cert-download[disabled] { opacity: .6; }

.cert-download-status { font-size: 13px; text-align: center; margin: 0; min-height: 18px; color: #A8917A; }
.cert-download-status.is-fout { color: var(--coral); }

/* ---------- de aankondiging op het uitslagscherm ---------- */

.cert-aankondiging {
  width: 100%;
  margin: 18px 0 4px;
  padding: 18px 16px;
  border-radius: var(--radius);
  text-align: center;
  color: #FBEFD8;
  background: linear-gradient(160deg, #3A2A17, #241A10);
  box-shadow: inset 0 0 0 1px rgba(232, 163, 61, .4), 0 8px 18px rgba(0, 0, 0, .18);
}
.cert-aankondiging-kop { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cert-aankondiging-icoon { font-size: 20px; }
.cert-aankondiging-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.cert-aankondiging-titel { font-family: 'Fraunces', serif; font-size: 22px; margin-top: 8px; }
.cert-aankondiging-tekst { font-size: 13px; color: #DCC9AB; margin: 4px 0 0; }

/* ---------- de kaart op home ---------- */

.cert-kaart {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 14px;
  padding: 12px;
  border: none;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  color: #F3E4C6;
  background: linear-gradient(150deg, #3A2A17, #221810);
  box-shadow: inset 0 0 0 1px rgba(232, 163, 61, .3), 0 6px 14px rgba(0, 0, 0, .16);
}
.cert-kaart:active { transform: scale(.99); }

/* Een klein plankje met de letters erop — geen icoon maar het ding zelf. */
.cert-kaart-plankje {
  position: relative;
  flex: 0 0 auto;
  width: 46px;
  aspect-ratio: 170 / 270;
  border-radius: 4.7% / 2.96%;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}
.cert-kaart-hout { position: absolute; inset: 0; }
.cert-kaart-hout svg { width: 100%; height: 100%; display: block; }
.cert-kaart-letters {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 9px;
  line-height: 1.1;
  text-align: center;
  /* Donker op licht hout, net als op het echte certificaat: een uitgefreesde
     groef ligt in de schaduw. */
  color: #45280F;
  text-shadow: 0 1px 0 rgba(247, 226, 188, .45);
}

.cert-kaart-tekst { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cert-kaart-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.cert-kaart-titel { font-family: 'Fraunces', serif; font-size: 15px; line-height: 1.2; }
.cert-kaart-sub { font-size: 12px; color: #B8A388; }
.cert-kaart-pijl { font-size: 22px; color: #8E7A63; }

/* ---------- de uitlegpagina ---------- */

.cert-uitleg-kop { text-align: center; margin-bottom: 18px; }
.cert-uitleg-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--wood);
}
.cert-uitleg-kop h1 { margin: 6px 0 8px; }
.cert-uitleg-intro { color: var(--ink-soft); font-size: 14px; }

.cert-voorbeeld { margin-bottom: 16px; }
.cert-plank.is-klein {
  /* Staand vult het certificaat anders het halve scherm van de uitlegpagina;
     het is hier een voorbeeld, niet het hoofdgerecht. */
  width: min(100%, 230px);
  margin: 0 auto;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
  border-radius: 8px;
}
.cert-voorbeeld-bij {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-soft);
}
.cert-voorbeeld-maat { font-variant-numeric: tabular-nums; }

.cert-uitleg .cert-downloads { margin-bottom: 22px; }
.cert-uitleg .cert-download.primary,
.cert-uitleg .cert-download.btn.primary { color: #fff; }

.cert-uitleg-blok {
  margin: 0 0 22px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.cert-uitleg-blok h2 { font-size: 18px; margin-bottom: 10px; }
.cert-uitleg-blok p { font-size: 14px; color: var(--ink-soft); }
.cert-uitleg-blok p:last-child { margin-bottom: 0; }
.cert-uitleg-let {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: #FBF1E2;
  border-left: 3px solid var(--coral);
  color: var(--ink) !important;
}

.cert-stappen { list-style: none; margin: 0 0 22px; padding: 0; }
.cert-stap {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.cert-stap:last-child { border-bottom: none; }
.cert-stap-nr {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  background: var(--wood);
}
.cert-stap-tekst { min-width: 0; }
.cert-stap-tekst h3 { font-size: 16px; margin: 2px 0 6px; }
.cert-stap-tekst p { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
.cert-stap-les {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  background: rgba(31, 111, 107, .08);
  border-radius: 999px;
  padding: 3px 10px;
}

.cert-misgaan { margin-bottom: 14px; }
.cert-misgaan:last-child { margin-bottom: 0; }
.cert-misgaan-vraag { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.cert-misgaan-antwoord { font-size: 14px; color: var(--ink-soft); margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .cert-spindel .dh-spin { animation: none; }
}

/* ---------------------------------------------------------------------------
   Accounts (fase 5, PLAN-publieke-academy.md §5): welkomstscherm, Profiel &
   instellingen, privacy, bronnen en beheer. Alleen aanvullingen op de
   bestaande blokken (profile-screen, vid-blok, fb-form, btn); de rest van de
   styling hierboven is niet aangeraakt.
   --------------------------------------------------------------------------- */
.acc-welkom { position: relative; }
.acc-form { width: 100%; max-width: 320px; margin: 0 auto; text-align: left; }
.vid-blok .acc-form { max-width: none; }
/* fb-form is display:flex; dan wint dat het van het hidden-attribuut. */
.acc-form[hidden], .acc-form [hidden] { display: none !important; }
.fb-form input[type="email"],
.fb-form input[type="password"] {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font: inherit; background: var(--surface); color: var(--ink);
}
.acc-code { font-size: 24px !important; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.acc-uitleg { font-size: 13px; color: var(--ink-soft); line-height: 1.45; margin: 2px 0; }
.acc-uitleg a, .acc-links a, .acc-tekst a { color: var(--wood-dark); }
.acc-honing { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.acc-melding {
  max-width: 320px; margin: 0 auto 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink); font-size: 14px;
}
.acc-links { font-size: 13px; color: var(--ink-soft); margin: 22px 0 0; }
.acc-naam-status { font-size: 13px; min-height: 18px; margin: 0; color: var(--ink-soft); }
.acc-naam-status.is-vrij { color: var(--green); }
.acc-naam-status.is-bezet { color: var(--coral); }

/* Taalkeuze rechtsboven op het welkomstscherm. */
.acc-taal { position: absolute; top: 0; right: 0; z-index: 5; text-align: right; }
.acc-taal-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  border-radius: 20px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer;
}
.acc-taal-menu { position: absolute; right: 0; top: calc(100% + 6px); width: 180px; }

/* Rijen in Profiel & instellingen: label links, knop rechts. */
.acc-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.vid-blok-kop + .acc-rij { border-top: 0; }
.acc-rij > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-rij em { font-style: normal; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }
.btn.acc-klein { min-height: 36px; padding: 7px 12px; font-size: 14px; flex: 0 0 auto; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.acc-rood { color: var(--coral) !important; border-color: var(--coral) !important; }
.acc-rood-vol { background: var(--coral) !important; border-color: var(--coral) !important; }
.acc-jij { margin: 4px 0 6px; }
/* De kaart "Jij" is een link naar je eigen spelersprofiel: met pijltje. */
a.acc-jij { color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
a.acc-jij:hover { border-color: var(--wood-dark); }
a.acc-jij:active { background: var(--surface-2); }
a.acc-jij:focus-visible { outline: 2px solid var(--wood-dark); outline-offset: 2px; }
.acc-jij-pijl { flex: 0 0 auto; font-size: 30px; line-height: 1; color: var(--ink-soft); padding-left: 4px; }
.acc-knoppen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.acc-tekst ul { margin: 6px 0; padding-left: 20px; line-height: 1.5; }
.acc-tekst li + li { margin-top: 6px; }
.acc-tel { color: var(--ink-soft); font-size: 13px; }
.acc-beheer .board-grid { margin-bottom: 14px; }
/* Nationaliteit (v152): keuzelijst bij aanmelden en in Profiel & instellingen. */
.acc-veld-label { font-size: 13px; font-weight: 700; color: var(--ink); margin: 6px 0 -2px; }
select.acc-land {
  width: 100%; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font: inherit; font-size: 15px; background: var(--surface); color: var(--ink);
}
.acc-land-rij { padding-bottom: 6px; }
.acc-land-status { min-height: 18px; }
.acc-instellingen .vlag, .acc-welkom .vlag { font-size: .95em; line-height: 1; vertical-align: baseline; }
.acc-update-status { margin: -4px 0 8px; }

/* ---------------------------------------------------------------------------
   Gebruiksdashboard voor beheer (#/beheer/dashboard, PLAN §6c). Eigen
   SVG-grafiekjes; de kleuren van de reeksen staan in js/dashboard-view.js.
   --------------------------------------------------------------------------- */
.db-scherm { max-width: 960px; }
.db-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.db-knoppen { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.db-periode { border: 0; background: transparent; padding: 7px 12px; font: inherit; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.db-periode + .db-periode { border-left: 1px solid var(--border); }
.db-periode.is-actief { background: var(--ink); color: #fff; }
.db-filters select {
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 14px;
  background: var(--surface); color: var(--ink); max-width: 100%;
}
.db-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-blok .board-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin: 8px 0 12px; }
.db-sub { font-size: 14px; font-weight: 700; margin: 14px 0 4px; }
.db-sub-klein { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin: 10px 0 2px; }
.db-noot, .db-leeg { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 6px; }
.db-grafiek { position: relative; width: 100%; }
.db-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.db-as { font-size: 10px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; }
.db-label { font-size: 11px; fill: var(--ink); font-weight: 600; }
.db-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--ink-soft); margin: 2px 0 6px; }
.db-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.db-trap { gap: 2px 6px; margin-top: 6px; }
.db-vlak { display: inline-block; width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.db-tip {
  position: absolute; z-index: 10; pointer-events: none; min-width: 120px; max-width: 240px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 4px 14px rgba(36, 28, 21, .12); padding: 8px 10px; font-size: 13px; color: var(--ink);
  display: flex; flex-direction: column; gap: 3px;
}
.db-tip[hidden] { display: none; }
.db-tip span { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.db-tip b { color: var(--ink); font-variant-numeric: tabular-nums; }
.db-balken { display: flex; flex-direction: column; gap: 6px; }
.db-balk { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.db-balk.is-klik { cursor: pointer; border-radius: 6px; }
.db-balk.is-klik:hover .db-balk-naam { text-decoration: underline; }
.db-balk-naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-balk-baan { height: 12px; background: #F4EEE4; border-radius: 4px; overflow: hidden; }
.db-balk-vul { display: block; height: 100%; background: #2a78d6; border-radius: 0 4px 4px 0; }
.db-balk-getal { font-variant-numeric: tabular-nums; color: var(--ink-soft); min-width: 40px; text-align: right; }
.db-tabelhouder { overflow-x: auto; margin: 0 -2px; }
.db-tabel { border-collapse: separate; border-spacing: 2px; font-size: 13px; width: 100%; font-variant-numeric: tabular-nums; }
.db-tabel th, .db-tabel td { padding: 6px 8px; text-align: right; white-space: nowrap; }
.db-lijst { margin: 4px 0 8px; padding-left: 20px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.db-sleutel { display: block; width: 100%; box-sizing: border-box; margin: 4px 0 10px; padding: 8px 10px; font: 13px/1.4 ui-monospace, Menlo, Consolas, monospace; border: 1px solid #E8DFD2; border-radius: 8px; background: #fff; color: inherit; }
.db-tabel thead th { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.db-tabel tbody th { text-align: left; font-weight: 600; }
.db-cohort td { border-radius: 4px; min-width: 52px; text-align: center; }
.db-cel-leeg { color: var(--ink-soft); }
.db-lessen tbody th { white-space: normal; min-width: 160px; }
.db-lessen tr.is-opvallend th { color: var(--coral); }
.db-mini { display: inline-block; width: 48px; height: 8px; background: #F4EEE4; border-radius: 3px; margin-right: 6px; vertical-align: middle; overflow: hidden; }
.db-mini span { display: block; height: 100%; background: #2a78d6; }
.db-klein-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 4px 18px; }
.db-kaart path.is-klik { cursor: pointer; }
.db-kaart path:hover { stroke: var(--ink); stroke-width: 1; }
/* Zoombare kaart: de viewBox schuift, het vak knipt af. Niet ingezoomd scrolt
   één vinger de pagina (pan-y); ingezoomd sleept hij de kaart. */
.db-kaart-vak { position: relative; overflow: hidden; border-radius: var(--radius-sm); background: #FBF8F3; }
.db-kaart-vak .db-kaart { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.db-kaart-vak.is-ingezoomd .db-kaart { touch-action: none; }
.db-kaart-vak.is-slepen .db-kaart, .db-kaart-vak.is-slepen .db-kaart path { cursor: grabbing; }
.db-zoom {
  position: absolute; right: 6px; bottom: 6px; display: flex;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 2px 8px rgba(36, 28, 21, .12); overflow: hidden;
}
.db-zoom button {
  width: 34px; height: 34px; border: 0; background: none; color: var(--ink);
  font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.db-zoom button + button { border-left: 1px solid var(--border); }
@media (hover: hover) { .db-zoom button:hover:not(:disabled) { background: var(--surface-2); } }
.db-zoom button:disabled { color: var(--ink-soft); opacity: .4; cursor: default; }
.db-kaart-en-tabel { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 8px; }
@media (min-width: 760px) {
  .db-kaart-en-tabel { grid-template-columns: 3fr 2fr; align-items: start; }
}
.db-tabel thead th:first-child { text-align: left; }
.db-lessen td.is-laag { color: var(--coral); font-weight: 700; }
/* Toestellen per platform (v1.96): per platform een gestapelde balk, met een
   eigen kleurstreep bij de naam zodat iOS en Android direct te herkennen zijn. */
.db-inhoud:has(.db-stapels) { position: relative; }
.db-stapels { display: grid; gap: 10px; margin: 4px 0 8px; }
.db-stapel-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13px; margin-bottom: 3px; }
.db-platform { font-weight: 700; border-left: 4px solid var(--ink-soft); padding-left: 7px; }
.db-platform-ios .db-platform { border-left-color: #2a78d6; }
.db-platform-android .db-platform { border-left-color: #1baf7a; }
.db-platform-desktop .db-platform { border-left-color: #eb6834; }
.db-platform-totaal { border-top: 1px solid #EFE7DA; padding-top: 8px; }
.db-platform-totaal .db-platform { border-left-color: transparent; padding-left: 0; }
.db-stapel-info { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.db-stapel { display: flex; gap: 2px; height: 26px; }
.db-stapel-vlak {
  display: flex; align-items: center; justify-content: center; min-width: 3px; overflow: hidden;
  font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; cursor: default;
}
.db-stapel-vlak.is-donker { color: #fff; }
.db-stapel-vlak:first-child { border-radius: 4px 0 0 4px; }
.db-stapel-vlak:last-child { border-radius: 0 4px 4px 0; }
.db-stapel-vlak:only-child { border-radius: 4px; }
.db-stapel-leeg { flex: 1; background: #F4EEE4; border-radius: 4px; }

/* ---------------------------------------------------------------------------
   Avatar (fase 5b, PLAN §6a). Het rondje neemt de plek in van de emoji die er
   eerst stond: 1.25em, dus even groot als die emoji op elke plek.
   --------------------------------------------------------------------------- */
.av { display: block; width: 100%; height: 100%; }
.av-rond {
  display: inline-block; width: 1.25em; height: 1.25em; border-radius: 50%; overflow: hidden;
  vertical-align: middle; background: #F3E6D3; flex: 0 0 auto; line-height: 0;
}
.avatar-btn {
  border: 0; padding: 0; background: none; cursor: pointer; font-size: 28px; line-height: 0;
  border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--border);
}
.avatar-btn[hidden] { display: none; }
.av-bouwer .screen-sub { font-size: 14px; color: var(--ink-soft); }
.av-voorbeeld { display: flex; justify-content: center; margin: 4px 0 14px; }
/* Het voorbeeld is hetzelfde rondje als overal in de app, alleen groter. */
.av-rond-groot { width: min(200px, 52vw); height: auto; aspect-ratio: 1; box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border); }
.av-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.av-tabs::-webkit-scrollbar { display: none; }
.av-tab {
  flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 14px; cursor: pointer;
}
.av-tab.is-actief { background: var(--ink); border-color: var(--ink); color: #fff; }
.av-paneel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; }
.av-rij { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.av-keuze {
  flex: 0 0 auto; width: 84px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 2px solid transparent; background: none; border-radius: var(--radius-sm); padding: 4px; cursor: pointer; font: inherit;
}
.av-keuze.is-gekozen { border-color: var(--wood); background: #FBF1E4; }
.av-keuze.is-slot { cursor: not-allowed; opacity: .55; }
.av-keuze-beeld { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: #F3E6D3; }
.av-keuze-beeld.is-los { border-radius: 12px; padding: 6px; box-sizing: border-box; }
.av-keuze-naam { font-size: 12px; line-height: 1.2; text-align: center; color: var(--ink); }
.av-keuze-badge { font-size: 11px; line-height: 1.2; text-align: center; color: var(--ink-soft); }
.av-kleuren { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.av-kleuren-label { font-size: 13px; color: var(--ink-soft); width: 100%; }
.av-kleur { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); cursor: pointer; padding: 0; }
.av-kleur.is-gekozen { box-shadow: 0 0 0 3px var(--ink); }
.av-knoppen { justify-content: center; margin-top: 14px; }
/* Met het avatarrondje erbij past de balk op een smal scherm net niet: de
   naam op één regel houden en de chips iets dichter op elkaar. */
#topbar .brand span { white-space: nowrap; }
@media (max-width: 420px) {
  .topbar-right:has(.avatar-btn:not([hidden])) { gap: 6px; }
  .avatar-btn { font-size: 26px; }
}
/* Op 320px bleef de avatar daarna nog 4px buiten beeld hangen. */
@media (max-width: 340px) {
  #topbar { padding: 10px 8px; }
  .topbar-right:has(.avatar-btn:not([hidden])) { gap: 4px; }
  .xp-chip, .badge-chip, .streak-chip { padding: 4px 6px; }
}

/* ---------- Losse beheerpagina (v129, beheer-<code>.html) ---------- */
.bh-kop {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.bh-kop[hidden] { display: none; }
.bh-titel { display: flex; align-items: center; gap: 8px; font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; }
.bh-titel img { width: 28px; height: 28px; }
.bh-nav { display: flex; gap: 6px; flex: 1 1 auto; flex-wrap: wrap; }
.bh-nav a {
  border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; color: var(--ink-soft);
  text-decoration: none; font-size: 14px; font-weight: 600;
}
.bh-nav a.is-actief { background: var(--ink); border-color: var(--ink); color: #fff; }
.beheer-pagina #appMain { max-width: 960px; }
.fb-email { font-weight: 500; font-size: 13px; color: var(--teal); word-break: break-all; }
.db-intern { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); }

/* ---------- Tabblad Ranglijst (v129, js/ranglijst-view.js) ---------- */
.rl-chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.rl-chips::-webkit-scrollbar { display: none; }
.rl-chip {
  flex: 0 0 auto; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.rl-chip.is-actief { background: var(--ink); border-color: var(--ink); color: #fff; }
.rl-uitleg { font-size: 13px; color: var(--ink-soft); margin: 4px 0 12px; }
.rl-ik {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 16px;
  background: linear-gradient(180deg, #FFF9F0, var(--surface)); border: 1px solid var(--wood); border-radius: var(--radius);
}
.rl-ik p { margin: 0; font-size: 14px; color: var(--ink-soft); }
.rl-ik-plek { font-family: 'Fraunces', serif; font-weight: 700; font-size: 30px; color: var(--wood-dark); min-width: 2.2em; text-align: center; }
.rl-ik-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 14px; }
.rl-ik-tekst span { font-size: 12.5px; color: var(--ink-soft); }
.rl-ik-waarde, .rl-waarde { font-family: 'Fraunces', serif; font-weight: 700; font-size: 20px; white-space: nowrap; }
.rl-eenheid { font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-left: 4px; }

.rl-podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; margin: 8px 0 14px; }
.rl-podium-plek { flex: 1 1 0; max-width: 150px; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.rl-podium-avatar { font-size: 56px; line-height: 1; }
.rl-p1 .rl-podium-avatar { font-size: 72px; }
.rl-podium-naam { font-weight: 700; font-size: 13.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-podium-waarde { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.rl-podium-blok {
  width: 100%; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; font-size: 24px;
  border-radius: 10px 10px 0 0; background: var(--surface-2); border: 1px solid var(--border); border-bottom: none;
}
.rl-p1 .rl-podium-blok { height: 78px; background: linear-gradient(180deg, #FBE7B8, var(--surface-2)); }
.rl-p2 .rl-podium-blok { height: 58px; }
.rl-p3 .rl-podium-blok { height: 42px; }
.rl-podium-plek.is-ik .rl-podium-naam { color: var(--wood-dark); }

.rl-lijst { list-style: none; margin: 0 0 16px; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rl-rij { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--border); }
.rl-rij:first-child { border-top: none; }
.rl-rij.is-ik { background: #FFF6E9; }
.rl-plek { width: 2em; text-align: center; font-weight: 800; color: var(--ink-soft); font-size: 15px; flex: 0 0 auto; }
.rl-avatar { font-size: 44px; line-height: 1; flex: 0 0 auto; }
.rl-naam { flex: 1; min-width: 0; font-weight: 700; display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-rij .rl-waarde { font-size: 17px; }
.rl-tussen { text-align: center; color: var(--ink-soft); padding: 2px 0; border-top: 1px solid var(--border); letter-spacing: .2em; }
.rl-links { display: flex; flex-direction: column; gap: 0; }

/* Ranglijst-overzicht (v131): per klassement een kaart met de top 5. */
.rl-tabs { margin: 4px 0 6px; }
/* De volle naam van het open tabblad (de tabbladen zelf zijn afgekort). */
.rl-groep-titel { font-family: 'Fraunces', serif; font-size: 21px; line-height: 1.2; margin: 20px 0 12px; overflow-wrap: break-word; }
.rl-groep { font-family: 'Fraunces', serif; font-size: 19px; margin: 18px 0 10px; }
.rl-kaarten { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px) { .rl-kaarten { grid-template-columns: 1fr 1fr; } }
.rl-kaart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.rl-kaart-kop {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px;
  color: var(--ink); text-decoration: none; font-weight: 800; font-size: 15.5px;
}
.rl-kaart-icoon { font-size: 20px; }
.rl-kaart-naam { flex: 1; min-width: 0; }
.rl-reset {
  flex: none; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px;
}
.rl-reset-regel { margin: -4px 0 12px; display: flex; justify-content: flex-start; }
.rl-stand-kop { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 0; }
.rl-stand-nu .rl-podium { margin: 26px 0 28px; }
/* Nog maar één speler deze week: geen podium, wel dezelfde lucht (v2.26). */
.rl-stand-een { margin: 22px 0 28px; }
.rl-kaart-ik { font-size: 12px; font-weight: 800; color: #fff; background: var(--wood); border-radius: 999px; padding: 2px 8px; }
.rl-kaart .rl-lijst { margin: 0; border: none; border-radius: 0; border-top: 1px solid var(--border); }
.rl-kaart .rl-rij { padding: 7px 14px; }
.rl-kaart .rl-avatar { font-size: 40px; }
.rl-kaart .rl-rij .rl-waarde { font-size: 15px; }
.rl-kaart-leeg { margin: 0; padding: 10px 14px 12px; color: var(--ink-soft); font-size: 13.5px; border-top: 1px solid var(--border); }
.rl-kaart-meer {
  display: block; padding: 9px 14px; border-top: 1px solid var(--border); background: var(--surface-2);
  color: var(--wood-dark); font-weight: 700; font-size: 13.5px; text-decoration: none;
}
.rl-scherm .terug-link { display: inline-block; margin-bottom: 8px; text-decoration: none; }
.rl-naam-dubbel { flex-direction: column; align-items: flex-start; gap: 0; }
.rl-naam-dubbel em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--ink-soft); }

/* Vlaggetje (nationaliteit) naast een naam, v152 (js/landen.js vlagHtml). */
.vlag { display: inline-block; flex: 0 0 auto; font-size: 1em; line-height: 1; font-weight: 400; }
.rl-naam-tekst { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rl-naam-regel { display: flex; align-items: center; gap: 6px; max-width: 100%; }

/* Badges bij een avatar (js/avatar.js avatarMetBadges): rechtsonder het
   vlaggetje van het land, linksonder het Sienci Labs-logo. Rond, half over de
   rand, met een ring in de kleur van de achtergrond (--av-ring) en een zachte
   schaduw. In em, dus ze schalen mee met de avatar (die is 1.25em). */
.av-met-badges { position: relative; display: inline-block; line-height: 1; vertical-align: middle; --av-ring: var(--surface); }
.av-met-badges > .av-rond { display: block; }
.av-badge {
  position: absolute; bottom: -.04em; font-size: clamp(11px, .32em, 34px); width: 1em; height: 1em;
  display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%;
  background: var(--surface-2); line-height: 1; font-weight: 400;
  box-shadow: 0 0 0 max(1.5px, .09em) var(--av-ring), 0 1px 3px max(1.5px, .1em) rgba(43, 31, 20, .22);
}
.av-badge-vlag { right: -.06em; }
.av-badge-sienci { left: -.06em; background: #fff; }
/* De vlag-emoji iets groter dan het rondje, zodat de vlag het hele rondje vult. */
.av-badge-emoji { font-size: 1.45em; line-height: 1; flex: 0 0 auto; }
/* Geen vlag-emoji op dit apparaat (Windows): de landcode. */
.av-badge-code { font-family: 'Inter', sans-serif; font-size: .42em; font-weight: 800; letter-spacing: .02em; color: var(--ink); }
.av-badge-sienci img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Ring in de kleur van een rij of kaart die niet wit is. */
.rl-rij.is-ik .av-met-badges { --av-ring: #FFF6E9; }
.rl-kampioen-held .av-met-badges { --av-ring: #FCEFD0; }
.rl-podium-plek .av-met-badges, .sp-avatar .av-met-badges { --av-ring: var(--bg); }

/* "Werkt bij Sienci Labs" met het logo, op een profiel. */
.av-sienci-regel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.av-sienci-regel img { width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--border); object-fit: contain; }
.sp-sienci { margin: 2px 0 0; }
.profiel-kop-sienci { margin-top: 2px; }

/* Rijen zijn klikbaar: tik op iemand voor zijn profiel (#/speler/<id>, v152). */
.rl-rij.is-klik { padding: 0; }
.rl-rij-link { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 10px 14px; color: inherit; text-decoration: none; }
.rl-kaart .rl-rij.is-klik { padding: 0; }
.rl-kaart .rl-rij-link { padding: 7px 14px; }
.rl-rij-link:active { background: var(--surface-2); }
/* Je eigen rij onderaan als je niet in de top staat: een streepjeslijn erboven. */
.rl-rij.is-los { border-top: 2px dashed var(--border); }
a.rl-podium-plek { color: inherit; text-decoration: none; }
.rl-podium-naam { display: flex; align-items: center; justify-content: center; gap: 4px; }

/* De Weekly Champion van vorige week, bovenaan het tabblad van een spel. */
.rl-kampioen-held {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 12px; border-top: 1px solid var(--border);
  color: inherit; text-decoration: none; background: linear-gradient(180deg, #FBE7B8, var(--surface));
}
.rl-kampioen-avatar { font-size: 60px; line-height: 1; flex: 0 0 auto; }
.rl-kampioen-tekst { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.rl-kampioen-naam { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 17px; min-width: 0; }
.rl-kampioen-week { font-size: 12px; color: var(--ink-soft); }
/* De huidige Champion (v2.10, sinds v2.12 zonder kopje) op de gele achtergrond. */
.rl-kampioen-nu { background: linear-gradient(180deg, #FBE7B8, var(--surface)); }
.rl-kampioen-nu .rl-kampioen-held { background: none; }
/* De Champion van vorige week (v2.18): wit, met een duidelijke scheidslijn
   naar de stand van deze week erboven. */
.rl-kampioen-vorige { border-top: 3px solid var(--border); }
.rl-kampioen-vorige .rl-lijst { border-top: none; }

/* Het profiel van een speler (#/speler/<id>, v152). */
.sp-kop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin: 4px 0 16px; }
.sp-avatar { font-size: 120px; line-height: 1; }
.sp-naam { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 0; max-width: 100%; overflow-wrap: anywhere; }
.sp-sub { margin: 0; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 8px; }
.sp-xp { margin: 2px 0 0; font-family: 'Fraunces', serif; font-weight: 700; font-size: 24px; }
.sp-grid { margin-bottom: 6px; }
.sp-spellen { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .sp-spellen { grid-template-columns: 1fr 1fr; } }
.sp-spel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; }
.sp-spel-kop { font-weight: 800; font-size: 15.5px; margin-bottom: 6px; }
.sp-spel-regel { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-top: 1px solid var(--border); font-size: 14px; }
.sp-spel-regel span { color: var(--ink-soft); }
.sp-badges { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sp-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 6px; font-size: 26px; line-height: 1; }
.sp-badge-naam { font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.sp-leeg { color: var(--ink-soft); font-size: 14px; }

/* Tekstkaarten met alinea's en opsommingen (v139). */
.theory-card p + p, .theory-card p + .theory-lijst, .theory-card .theory-lijst + p { margin-top: 10px; }
.theory-lijst { margin: 8px 0 0; padding-left: 20px; font-size: 15px; }
.theory-lijst li { margin: 4px 0; }
.theory-card > .illustration:first-child, .theory-card > .shot:first-child { margin: 0 0 12px; }

/* Eén losse foto bovenaan een begripskaart (v140, fotoBoven). */
.shot-los { margin: 0 0 14px; }

/* ---------- Welkom van Robbin (v153, js/welkom-view.js) ---------- */
/*
   Eén keer, vóór home, en net als het nieuwsscherm zonder balk en nav. Geen
   donkere werkplaats maar een brief op papier: dit is een persoonlijk woordje,
   geen aankondiging. De Sienci-varianten krijgen er een ondertekening, twee
   polaroids en de mailadressen bij.
*/
.wk-scherm {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100dvh;
  margin: calc(-16px - env(safe-area-inset-top)) -16px calc(-16px - var(--safe-bottom));
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(ellipse at 50% -10%, rgba(232, 163, 61, .22), rgba(232, 163, 61, 0) 60%),
    var(--bg);
}
.wk-voorbeeld {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #FFF4D6;
  border: 1px dashed var(--gold);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  color: var(--wood-dark);
}
.wk-kop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.wk-logo { width: 150px; height: auto; margin-bottom: 4px; }
.wk-sienci-logo { width: 64px; height: 64px; filter: drop-shadow(0 3px 6px rgba(27, 79, 140, .25)); }
.wk-kicker {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(201, 125, 62, .12);
  border: 1px solid rgba(201, 125, 62, .35);
  color: var(--wood-dark);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.wk-kop h1 { margin: 2px 0 0; font-size: 27px; line-height: 1.15; }

.wk-brief {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 20px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(66, 40, 18, .08), 0 2px 4px rgba(66, 40, 18, .05);
}
/* Een houten strookje bovenaan, zoals de rand van een plank. */
.wk-brief::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--wood), var(--gold), var(--wood));
}
.wk-brief p { font-size: 15.5px; line-height: 1.6; margin: 0 0 12px; overflow-wrap: anywhere; }
.wk-aanhef { font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px !important; }

.wk-ondertekening { margin-top: 18px; }
.wk-groet { margin: 0 0 2px !important; color: var(--ink-soft); }
.wk-naam { font-family: 'Fraunces', serif; font-style: italic; font-weight: 700; font-size: 22px !important; color: var(--wood-dark); margin: 0 !important; }

/* Twee polaroids die elkaar een beetje overlappen. */
.wk-fotos { display: flex; justify-content: center; align-items: flex-start; margin: 18px 0 8px; padding: 0 8px; }
.wk-foto {
  flex: 0 1 46%;
  max-width: 200px;
  margin: 0;
  padding: 8px 8px 26px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(36, 28, 21, .18), 0 1px 3px rgba(36, 28, 21, .12);
}
.wk-foto img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; background: var(--surface-2); }
.wk-foto-1 { transform: rotate(-4deg); z-index: 1; }
.wk-foto-2 { transform: rotate(3.5deg) translateY(14px); margin-left: -14%; z-index: 2; }
.wk-foto:only-child { transform: rotate(-2deg); margin-left: 0; }

.wk-contact { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border); }
.wk-contact p { font-size: 14px !important; color: var(--ink-soft); margin-bottom: 6px !important; }
.wk-contact ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.wk-contact a { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }

.wk-knoppen { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 560px; margin: auto auto 0; }
.wk-knop { width: 100%; }

/* De keuze "laat zien dat ik bij Sienci Labs werk", ook in de instellingen. */
.wk-vinkje {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 14px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}
.wk-vinkje input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: #1B4F8C; }
.wk-veilig { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(46, 158, 109, .09); border: 1px solid rgba(46, 158, 109, .3); font-size: 14.5px !important; }
.wk-later { font-size: 13.5px !important; color: var(--ink-soft); margin-bottom: 0 !important; }
.wk-instelling-logo { width: 18px; height: 18px; vertical-align: -3px; }

/* De voorbeeldknoppen voor het testaccount. */
.wk-test { margin-top: 12px; }
.wk-test-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }

/* v154: drie polaroids in een rij (vervangt de twee van v153), en de contactkaart van Robbin. */
.wk-fotos { padding: 0 4px 14px; }
.wk-foto { flex: 0 1 36%; max-width: 160px; padding: 5px 5px 18px; }
.wk-foto + .wk-foto { margin-left: -5%; }
.wk-foto-1 { transform: rotate(-5deg) translateY(6px); z-index: 1; }
.wk-foto-2 { transform: rotate(2.5deg) translateY(-6px); margin-left: -5%; z-index: 3; }
.wk-foto-3 { transform: rotate(-3deg) translateY(10px); z-index: 2; }
.wk-foto:only-child { transform: rotate(-2deg); margin-left: 0; }
@media (min-width: 480px) { .wk-foto { padding: 7px 7px 24px; } }

.wk-kaart { margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.wk-kaart p { margin: 0; }
.wk-kaart-titel { font-weight: 700; font-size: 15px; }
.wk-kaart-tekst { font-size: 14px; color: var(--ink-soft); margin: 2px 0 8px !important; }
.wk-kaart-naam { font-family: 'Fraunces', serif; font-style: italic; font-weight: 700; font-size: 18px; color: var(--wood-dark); margin-bottom: 4px !important; }
.wk-kaart ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.wk-kaart a { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
.wk-foto img { height: auto; }

/* v154: een vriend uitnodigen (js/uitnodigen-view.js) en de kaart op home. */
.uitnodig-kaart { margin-bottom: 10px; }
.uitnodig-intro { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 4px 0 12px; }
.uitnodig-form textarea { min-height: 84px; resize: vertical; }
.uitnodig-teller { align-self: flex-end; margin-top: -4px; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.uitnodig-klaar { text-align: center; padding: 8px 0 4px; }
.uitnodig-klaar-emoji { font-size: 56px; line-height: 1; margin: 6px 0 8px; }
.uitnodig-klaar h2 { font-size: 24px; margin-bottom: 6px; }
.uitnodig-klaar p { overflow-wrap: anywhere; }
.uitnodig-klaar .result-xp { font-size: 22px; margin: 10px 0 14px; }
.uitnodig-klaar .new-badges { display: flex; flex-direction: column; align-items: center; }
.uitnodig-klaar .new-badges .badge-row { justify-content: center; overflow: visible; }
.uitnodig-klaar .flow-actions { margin-top: 18px; }
#uitnodigVoorbeeldBtn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* Swipen tussen de tabbladen van de ranglijst: verticaal scrollen blijft gewoon werken. */
.rl-scherm { touch-action: pan-y; }

/* ---------- Geschilderde plaatjes op de bestellingenbaan (v167) ----------
   De sterren, het slot, de merkjes, het decor en de bordjes zijn plaatjes uit
   assets/bestellingen/ (zie klussen-art.js). Ze dragen dezelfde klassen als de
   SVG's die ze vervangen, dus de maten hierboven gelden nog; hier staat alleen
   wat voor een <img> anders moet. Bewust onderaan, zodat het de oudere regels
   (.ob-decor.is-groot, .vg-node.is-dicht …) overschrijft. */
/* De sterren staan naast elkaar, ook nu het blokjes zijn in plaats van inline SVG. */
.ob-sterren { display: inline-flex; align-items: center; gap: 1px; }
img.ob-ster, img.ob-slot, img.ob-vink, img.ob-merk,
img.ob-decor-svg, img.ob-plukje-svg {
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Het decor heeft zijn eigen schaduw al ingebakken; een tweede eronder maakt
   er een vlek van. Onderkant op de grond, niet zwevend in het midden. */
.ob-decor, .ob-decor.is-groot { filter: none; }
img.ob-decor-svg { object-position: 50% 100%; }
/* Aan het slot hangt rechts een labeltje; de slotbody zelf staat daardoor op
   een derde van het plaatje. Een zesde opschuiven zet de body in het midden
   van de knop (het labeltje steekt dan rechts uit, zoals het hoort). En een
   tikje omhoog: de zware body onderin laat het slot anders laag ogen. */
img.ob-slot { transform: translate(17%, -8%); }
.ob-plukje { opacity: 1; }

/* De adressen van de plaatjes (--ob-knop-beeld, --ob-knop-finale-beeld) zet
   klussen-art.js, met het versienummer erachter; zie beeldUrl() daar.
   De levelknop is een houten schijf met een ingefreesde rand; de eindklus
   ligt in een gouden ring met een lauwerkrans. Het plaatje heeft zijn eigen
   dikte en schaduw, dus geen box-shadow meer, behalve de halo van "hier ben
   je" (.is-nu). */
.ob-level-schijf,
.vg-schijf {
  background: var(--ob-knop-beeld) center / contain no-repeat;
  box-shadow: none;
  border-radius: 50%;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
  color: #4A2C14;
  padding-bottom: 3px;
}
.ob-level-schijf { width: 56px; height: 56px; }
.ob-level-nr, .vg-nr { text-shadow: 0 1px 0 rgba(255, 236, 196, .7); }
.ob-level.is-dicht .ob-level-schijf,
.vg-node.is-dicht .vg-schijf {
  background: var(--ob-knop-beeld) center / contain no-repeat;
  box-shadow: none;
  filter: grayscale(.8) brightness(.78) drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
}
.ob-level.is-dicht .ob-slot { width: 26px; height: 26px; filter: grayscale(0) brightness(1.25); }
.ob-level.is-gehaald .ob-level-schijf {
  box-shadow: none;
  filter: drop-shadow(0 0 5px rgba(255, 211, 107, .85)) drop-shadow(0 3px 3px rgba(0, 0, 0, .3));
}
.ob-level.is-eindklus .ob-level-schijf {
  width: 70px;
  height: 70px;
  background:
    var(--ob-knop-finale-beeld) center / contain no-repeat,
    var(--ob-knop-beeld) center / 86% no-repeat;
}
.ob-level.is-eindklus.is-dicht .ob-level-schijf { filter: grayscale(.5) brightness(.85) drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.ob-level.is-nu .ob-level-schijf { box-shadow: 0 0 0 5px rgba(255, 255, 255, .5), 0 8px 16px rgba(0, 0, 0, .25); }
.vg-node.is-nu .vg-schijf { box-shadow: 0 0 0 4px rgba(255, 255, 255, .35); }

/* Het bord per aflevering: een plank in het eigen materiaal van die
   aflevering, aan twee touwtjes. De plank zelf begint op een kwart van de
   hoogte; daar ligt de tekst overheen. */
.ob-banner-bord.is-beeld { width: calc(172px * var(--ob-bord-s, 1)); min-width: 0; filter: none; }
/* Aan de kant waar de baan niet is (zie de banners in klussen-view.js). */
.ob-banner.is-rechts:has(.is-beeld) { justify-content: flex-end; padding-right: 8px; }
.ob-banner.is-links:has(.is-beeld) { justify-content: flex-start; padding-left: 8px; }
.ob-bord-svg.is-beeld { width: 100%; height: auto; }
/* De tekst ligt midden op het platte vlak van de plank. Waar dat vlak zit
   verschilt per bord (de touwtjes erboven, de dikte en soms een versiering
   eronder); bordTekstStijl() in klussen-art.js zet top en height per bord. De
   lettergrootte hangt af van de lengte van de naam (lengteKlasse()), en een
   lange naam mag over twee regels in plaats van afgekapt te worden. */
.ob-banner-bord.is-beeld .ob-banner-tekst {
  top: 22%;
  height: 69%;
  padding: 0 12px;
  gap: 5px;
  letter-spacing: .01em;
  line-height: 1.05;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 7px rgba(0, 0, 0, .5);
}
.ob-banner-bord.is-beeld .ob-banner-naam { min-width: 0; text-align: center; overflow-wrap: normal; hyphens: manual; }
.ob-banner-bord.is-beeld .ob-banner-tekst.is-kort { font-size: calc(21px * var(--ob-bord-s, 1)); }
.ob-banner-bord.is-beeld .ob-banner-tekst.is-middel { font-size: calc(17px * var(--ob-bord-s, 1)); }
.ob-banner-bord.is-beeld .ob-banner-tekst.is-lang { font-size: calc(15px * var(--ob-bord-s, 1)); }
/* Het geschilderde bord laat zijn thema al zien (een eikel, een zaagblad);
   het emoji-icoontje ernaast zou over dat plaatje heen vallen. */
.ob-banner-bord.is-beeld .ob-banner-icoon { display: none; }
.ob-banner.is-dicht .ob-banner-bord.is-beeld { filter: saturate(.55) brightness(.9); }

/* Het merkje in de klusbalk is een houten penning en geen half doorzichtig
   lijntje meer; die mag dus vol in beeld. */
.kh-badge-merk { width: 17px; height: 17px; opacity: 1; }