/* Reconstructie (tot 2026-11-13 Het Vierde Spoor).
   Een ontwerpsysteem in plaats van losse opmaak.

   2026-11-10: de ingetogen versie (crème papier, één gouden accent) was
   "gewoon niet zo leuk" voor de speler voor wie dit gemaakt is. Het palet is
   nu vrolijk: roze is de klikkleur, en vijf andere felle kleuren (--pop-*)
   mogen versieren. Zie specs/visual-liveliness.md. Wat hieronder over goud
   en crème staat is de geschiedenis van die keuze; de regel "de pagina
   neemt de kleur van de wereld aan" geldt nog steeds.

   Oorspronkelijk:
   - EEN accentkleur (goud), uitsluitend voor dingen waar je op klikt
   - een vaste ruimtemaat en een vaste letterschaal
   - de hele pagina neemt de kleur van de wereld aan zodra je een zaak
     opent: in het woud is de site een nachtbos, in Regenstad een natte
     straat. Dat is een omkering van een eerdere keuze - toen kreeg elke
     wereld alleen een accentkleur, en dat gaf zes kleuren die elkaar
     beconcurreerden op een crème pagina. Het verschil zit hem erin dat
     het nu niet een accent is maar het hele palet: achtergrond, vlak,
     tekst en lijn verschuiven samen, dus er valt niets te beconcurreren.
     De lijst en de bibliotheek blijven crème; daar staan alle werelden
     naast elkaar en zou een kleur partij kiezen.
   - serif voor koppen en verhalende tekst, schreefloos voor bediening */

:root {
  color-scheme: light;

  /* Crème papier in plaats van zwart: een puzzelboek dat open op tafel ligt.
     De tekeningen draaien mee - silhouetten staan nu tegen een lichte lucht,
     wat ze eerder helderder maakt dan minder. */
  --bg: #fff8f0;
  --surface: #ffffff;
  --surface-2: #f7f0ff;
  --surface-3: #ece1ff;
  --line: #e5d5f5;
  --line-soft: #f1e8fa;

  --text: #2a1b3d;
  --text-2: #5b4a72;
  --text-3: #8a7ca0;

  --accent: #e8337f;
  --accent-soft: #ffe2ef;
  --accent-ink: #ffffff;
  --good: #1f9d63;
  --bad: #d7263d;

  /* De vrolijke kleuren. Roze is ook --accent; de rest versiert. */
  --pop-1: #ff4f9a;
  --pop-2: #ff9f1c;
  --pop-3: #ffcf33;
  --pop-4: #18c3a8;
  --pop-5: #3a86ff;
  --pop-6: #8b4dff;
  --regenboog: linear-gradient(90deg, var(--pop-1), var(--pop-2), var(--pop-3), var(--pop-4), var(--pop-5), var(--pop-6));
  --schaduw-pop: 0 4px 0 rgba(42, 27, 61, 0.14), 0 10px 24px rgba(139, 77, 255, 0.12);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

  --t-xs: 0.75rem; --t-sm: 0.86rem; --t-base: 0.95rem;
  --t-md: 1.06rem; --t-lg: 1.3rem; --t-xl: 1.75rem; --t-2xl: 2.4rem;

  --r-sm: 10px; --r: 16px; --r-lg: 22px;

  --serif: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Een geschreven letter voor wat op het bord staat, en een ronde
     displayletter voor de koppen. Beide met een systeemletter erachter,
     zodat de site het zonder netwerk net zo goed doet. */
  --schrift: "Patrick Hand", "Bradley Hand", "Segoe Print", cursive;
  --display: "Fredoka", "Avenir Next", var(--sans);

  /* Hoe hoog de kop is. De namenbalk plakt hieronder vast. */
  --kop-hoogte: 53px;

  /* Was 1080 en 62 tekens: op een groot scherm stond alles in een smalle
     strook in het midden. 74 tekens leest nog prettig en vult meer. */
  --page: 1240px;
  --prose: 74ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--t-base)/1.6 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button { font-family: inherit; }

/* ============================================================ koptekst */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--line);
  background: color-mix(in oklab, var(--surface) 80%, var(--bg));
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(8px);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-md);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand-mark { display: inline-flex; color: var(--accent); }
.brand-mark svg { display: block; }
.brand-mark .r-muur {
  fill: none; stroke: currentColor; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.brand-mark .r-figuur { fill: #2a1b3d; }

.nav { display: flex; gap: var(--s1); }

.nav a {
  white-space: nowrap;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text-2);
  font-size: var(--t-sm);
}

.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); background: var(--surface-2); }

main {
  flex: 1;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: var(--s7) var(--s5) var(--s8);
}

.foot {
  border-top: 1px solid var(--line);
  padding: var(--s5);
  color: var(--text-3);
  font-size: var(--t-xs);
  text-align: center;
}

.foot p { max-width: 58ch; margin: 0 auto; line-height: 1.7; }

/* =============================================================== tekst */

/* Koppen in de displayletter: rond en stevig, zoals op een speldoos. De
   lopende tekst blijft schreef, want daar lees je hele alinea's in. */
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }

h1 {
  font-size: var(--t-2xl);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--s4);
}

h2 {
  font-size: var(--t-lg);
  line-height: 1.25;
  margin: 0 0 var(--s4);
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 var(--s3);
  font-weight: 600;
}

.label {
  font-family: var(--sans);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 var(--s3);
}

.lede { color: var(--text-2); max-width: var(--prose); margin: 0 0 var(--s5); font-size: var(--t-md); line-height: 1.65; }
.prose { max-width: var(--prose); color: var(--text-2); }
.prose p { margin: 0 0 var(--s4); }
.prose strong, .prose b { color: var(--text); font-weight: 600; }

/* Een sectie met een hairline erboven: rustiger dan kaders om alles heen. */
.section { margin-top: var(--s8); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s5);
  flex-wrap: wrap;
}
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--text-3); font-size: var(--t-sm); }

/* Een stuk lopende tekst onder een kop (de uitleg): op een breed scherm de
   kop als smalle kolom links en de tekst ernaast. Eerst stond de tekst in
   een strook links en het halve scherm ernaast was leeg; breder zetten
   maakt regels van honderd tekens, en die lees je niet. */
@media (min-width: 1100px) {
  .section:has(> .section-head + .prose) {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: var(--s7);
    align-items: start;
  }
  .section:has(> .section-head + .prose) > .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s2);
    padding-bottom: var(--s3);
    position: sticky;
    top: calc(var(--kop-hoogte) + var(--s5));
  }
  .section:has(> .section-head + .prose) > .prose { max-width: var(--prose); }
}

/* =============================================================== hero */

.hero {
  display: grid;
  gap: var(--s5);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--line);
}

.hero h1 { max-width: 16ch; }

/* Op de voordeur ligt een echte plattegrond, een slag gedraaid, alsof het
   spel open op tafel ligt. Op een smal scherm gaat hij eronder. */
@media (min-width: 900px) {
  .hero-met-bord {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
    column-gap: var(--s7);
    align-items: center;
  }
  /* Zes niveaus als drie en drie, niet als vier en een losse twee. */
  .hero-met-bord .niveaukiezer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-met-bord > :first-child { grid-column: 1; }
  .hero-met-bord .hero-actions,
  .hero-met-bord .hero-note { grid-column: 1; }
  .hero-bord { grid-column: 2; grid-row: 1 / span 3; }
}

/* Op een smaller scherm stond de plattegrond onderaan, achter de knoppen en
   het bijschrift - dus zag je op de voordeur alleen tekst en lege vakjes.
   Nu staat hij meteen onder de inleiding, waar hij hoort: eerst zien waar
   het over gaat, dan kiezen hoe zwaar. */
@media (max-width: 899px) {
  .hero-met-bord > :first-child { order: 1; }
  /* Wel in beeld, niet het hele scherm: een voorproefje hoort naast de
     keuze te passen, niet ervoor. */
  .hero-met-bord .hero-bord { order: 2; margin: 0 auto; max-width: 340px; }
  .hero-met-bord .label { order: 3; }
  .hero-met-bord .niveaukiezer { order: 4; }
  .hero-met-bord .hero-actions { order: 5; }
  .hero-met-bord .hero-note { order: 6; }
}

.hero-bord {
  position: relative;
  display: block;
  margin-top: var(--s5);
  transform: rotate(-2deg);
  transition: transform 0.18s ease;
  text-decoration: none;
}

.hero-bord:hover { transform: rotate(-1deg) translateY(-3px); }
.hero-bord .kamerbord { max-width: 100%; }

.hero-bord-label {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translateX(-50%) rotate(1.5deg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--text);
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(90, 68, 34, 0.18);
}
.hero .lede { margin: 0; }

.hero-actions { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; }

.hero-note { color: var(--text-3); font-size: var(--t-sm); margin: 0; }

/* ============================================================= knoppen */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 10px var(--s4);
  cursor: pointer;
  font-size: var(--t-base);
  text-decoration: none;
  white-space: nowrap;
}

.btn:hover { border-color: #c3b393; background: var(--surface-3); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}
.btn-primary:hover { background: #b96327; border-color: #b96327; }

.btn-quiet { background: transparent; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

.btn-sm { padding: 6px var(--s3); font-size: var(--t-sm); }

.link-more {
  color: var(--accent);
  text-decoration: none;
  font-size: var(--t-sm);
  white-space: nowrap;
}
.link-more:hover { text-decoration: underline; }

/* ======================================================= stappen (hoe) */

.steps { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.step { display: grid; gap: var(--s2); align-content: start; }
.step-n {
  font-family: var(--serif);
  font-size: var(--t-lg);
  color: var(--accent);
  line-height: 1;
}
.step h3 { font-family: var(--sans); font-size: var(--t-base); margin: 0; font-weight: 600; }
.step p { margin: 0; color: var(--text-2); font-size: var(--t-sm); line-height: 1.6; }

/* =============================================================== lijst */

/* Puzzels als rijen in plaats van losse kaarten: rustiger, even hoog,
   en je kunt titels naast elkaar lezen. */
/* De bibliotheek: kaarten in plaats van regels. Elke kaart draagt de kleur
   en de sfeertekening van zijn genre, zodat je ziet waar je terechtkomt
   voordat je klikt. */
.kaarten {
  display: grid;
  gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}

.kaart {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 0 rgba(90, 68, 34, 0.12);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}

.kaart:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(90, 68, 34, 0.2);
  border-color: var(--line);
}

.kaart-beeld {
  position: relative;
  display: block;
  height: 104px;
  overflow: hidden;
  background: var(--genre-diep, #3a2e22);
  border-bottom: 2px solid var(--genre-diep, #3a2e22);
}

.kaart-beeld .scene { width: 100%; height: 100%; display: block; }

/* Het teken van het speltype als penning op de rand van de tekening. */
.kaart-merk {
  position: absolute;
  left: var(--s4);
  bottom: -15px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 2px solid var(--genre-diep, #3a2e22);
  font-size: 15px;
  line-height: 1;
}

.kaart-tekst { padding: var(--s5) var(--s4) var(--s4); display: grid; gap: 5px; align-content: start; }
.kaart-titel { font-family: var(--display); font-weight: 600; font-size: var(--t-md); line-height: 1.25; }
.kaart-sub { color: var(--text-2); font-size: var(--t-sm); line-height: 1.45; }
.kaart-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: 4px;
  color: var(--text-3);
  font-size: var(--t-xs);
}

/* Opgelost is een stempel, geen vinkje in een kolom. */
.kaart-stempel {
  position: absolute;
  right: 10px;
  top: 10px;
  transform: rotate(-7deg);
  border: 2px solid #3f7d4f;
  color: #3f7d4f;
  border-radius: 5px;
  padding: 2px 7px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 253, 247, 0.88);
}

.kaart-stempel-grijs { border-color: var(--text-3); color: var(--text-3); }

.rows { border-top: 1px solid var(--line-soft); }

.row-item {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
}

/* Zonder volgnummer (de bibliotheek) vervalt de linkerkolom; anders staat
   daar een lege inspringing die op een fout lijkt. */
.row-item.plain { grid-template-columns: 1fr auto; }

.row-item {
  align-items: baseline;
  gap: var(--s4);
  padding: var(--s4) var(--s3);
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
  color: inherit;
}

.row-item:hover { background: var(--surface); }

.row-n {
  font-family: var(--serif);
  color: var(--text-3);
  font-size: var(--t-base);
  font-variant-numeric: tabular-nums;
}

.row-body { display: grid; gap: 3px; min-width: 0; }
.row-title { font-family: var(--display); font-weight: 600; font-size: var(--t-md); line-height: 1.3; }
.row-sub { color: var(--text-2); font-size: var(--t-sm); line-height: 1.5; }

.row-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text-3);
  font-size: var(--t-xs);
  white-space: nowrap;
}

.dots { display: inline-flex; gap: 3px; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--surface-3); }
.dot.on { background: var(--accent); }

.done-mark { color: var(--good); font-size: var(--t-sm); }
.bekeken-mark { color: var(--text-3); font-size: var(--t-xs); font-style: italic; }

@media (max-width: 640px) {
  /* Titel en zwaarte naast elkaar wordt te krap; de zwaarte zakt eronder. */
  .row-item { grid-template-columns: 1.6rem 1fr; }
  .row-item.plain { grid-template-columns: 1fr; }
  .row-meta { grid-column: 2; padding-top: var(--s2); }
  .row-item.plain .row-meta { grid-column: 1; }
}

/* ============================================================== tegels */

.tiles { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

/* Elke wereld krijgt zijn eigen sfeertekening als kop van de tegel. Dat is
   wat een decor tot de verbeelding laat spreken; een pictogram alleen niet. */
.tile {
  display: grid;
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.tile:hover { border-color: #c3b393; }
.tile:hover .tile-scene .scene { transform: scale(1.04); }

.tile-scene {
  display: block;
  height: 96px;
  overflow: hidden;
  position: relative;
  background: var(--bg);
}

.tile-scene .scene { height: 96px; transition: transform 0.25s ease; }

.tile-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--surface) 100%);
}

.tile-body { display: grid; gap: var(--s2); padding: var(--s4); }
.tile-name { font-family: var(--display); font-weight: 600; font-size: var(--t-md); }
.tile-sub { color: var(--text-2); font-size: var(--t-sm); line-height: 1.5; }
.tile-count { color: var(--text-3); font-size: var(--t-xs); }

/* ============================================================= filters */

.filters + .section { margin-top: var(--s5); }

.filters {
  display: flex;
  gap: var(--s3);
  align-items: center;
  flex-wrap: wrap;
  padding: var(--s3) 0 var(--s5);
}

.select-wrap { position: relative; display: inline-flex; align-items: center; }

select {
  appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 8px 30px 8px var(--s3);
  font: inherit;
  font-size: var(--t-sm);
  cursor: pointer;
}

select:hover { border-color: #c3b393; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 11px;
  width: 6px; height: 6px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.filter-count { color: var(--text-3); font-size: var(--t-sm); margin-left: auto; }

.empty {
  color: var(--text-3);
  padding: var(--s7) 0;
  text-align: center;
}

/* ============================================================ formulier */

.form { display: grid; gap: var(--s6); max-width: 760px; }
.field { display: grid; gap: var(--s3); }

.options { display: flex; gap: var(--s2); flex-wrap: wrap; }

.opt {
  flex: 1 1 180px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--r);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-size: var(--t-sm);
  display: grid;
  gap: 3px;
}

.opt small { color: var(--text-3); font-size: var(--t-xs); line-height: 1.5; }
.opt:hover { border-color: #c3b393; }
.opt[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.opt[disabled] { opacity: 0.35; cursor: not-allowed; }
.opt-name { font-weight: 600; font-size: var(--t-base); }

.levels { display: flex; gap: var(--s2); flex-wrap: wrap; }
.level-btn { flex: 1 1 100px; text-align: center; justify-items: center; }
.level-btn b { font-family: var(--display); font-size: var(--t-md); color: var(--accent); }

/* Het plattegrondje op de niveauknop. Zie bordminiatuur.js: geen versiering
   maar het bord zelf, zodat "zestien bij zestien" iets betekent. */
.minibord {
  width: 100%;
  max-width: 92px;
  aspect-ratio: 1;
  margin-bottom: var(--s1);
  border-radius: 4px;
  overflow: hidden;
}
.mini-vloer { fill: color-mix(in srgb, var(--surface-2) 70%, var(--accent) 8%); }
.mini-ruit { stroke: color-mix(in srgb, var(--line) 55%, transparent); stroke-width: 0.5; fill: none; }
.mini-muur { stroke: color-mix(in srgb, var(--text) 62%, var(--surface)); stroke-width: 1.8; fill: none; stroke-linecap: square; }
.mini-omtrek { stroke-width: 2.4; }
.mini-meubel { fill: color-mix(in srgb, var(--text) 34%, var(--surface)); }
.mini-figuur { fill: var(--accent); }
.level-btn[aria-pressed="true"] .mini-vloer { fill: color-mix(in srgb, var(--surface) 60%, var(--accent) 16%); }
.mini-kruis { stroke: color-mix(in srgb, var(--text) 45%, var(--surface)); stroke-width: 2.6; stroke-linecap: round; fill: none; }
/* Het plaatje bij een stap: even breed als de tekst eronder, en niet groter
   dan een postzegel - het hoort de stap te tonen, niet te vervangen. */
.stapbeeld { width: 72px; height: 72px; border-radius: 6px; margin-bottom: var(--s2); display: block; }

.row-inline { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }

input[type="text"] {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--r-sm);
  padding: 9px var(--s3);
  font: inherit;
  font-size: var(--t-sm);
  min-width: 180px;
}

input[type="text"]:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* =============================================================== speler */

/* De sfeertekening loopt van rand tot rand en vervaagt naar de paginakleur,
   zodat hij een decor is en geen plaatje in een lijstje. */
.scene-wrap {
  margin: calc(var(--s7) * -1) calc(var(--s5) * -1) var(--s5);
  position: relative;
  overflow: hidden;
  height: 150px;
}

.scene-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, var(--bg) 100%);
  pointer-events: none;
}

.scene { width: 100%; height: 150px; display: block; }

/* De dieptelagen zijn geen kleuren meer maar verlopen: naar de horizon toe
   lichter, want daar hangt de nevel. De verlopen zelf staan in scenes.js en
   halen hun kleur hier op, zodat donker en licht allebei kloppen. */
:root {
  /* Was grijsblauw: alle dertien tekeningen dezelfde mistige middag. Nu een
     schemering in lila en paars, zodat de wereldkleur erover kan gloeien. */
  --sc-ver-top: #c9bff5;   --sc-ver-voet: #ffd9ec;
  --sc-mid-top: #9f8de6;   --sc-mid-voet: #c2b0f2;
  --sc-near-top: #6f58c9;  --sc-near-voet: #8f78dc;
  --sc-diep-top: #45309a;  --sc-diep-voet: #6249b8;
  --sc-grond-top: #523aa8; --sc-grond-voet: #7058c4;
  --sc-boom-top: #1f8f6a;  --sc-boom-voet: #3dbb86;
  --sc-gloed: #ffc93c;
  --sc-nevel: #ffffff;
}
.sc-ver { fill: url(#sc-v-ver); }
.sc-mid { fill: url(#sc-v-mid); }
.sc-near { fill: url(#sc-v-near); }
.sc-diep { fill: url(#sc-v-diep); }
.sc-korrel { opacity: 0.1; mix-blend-mode: overlay; pointer-events: none; }
/* De kant van een silhouet die van het licht af ligt. */
.sc-flank { fill: #0b1018; opacity: 0.16; }
.sc-tint { opacity: 0.6; mix-blend-mode: soft-light; pointer-events: none; }
body[data-thema="donker"] .sc-tint { opacity: 0.3; }
.sc-planeet { fill: #cfd6e2; }
.sc-horizon { fill: none; stroke: #aab3c3; stroke-width: 1.5; }
.sc-lijn { fill: none; stroke: #7b8599; stroke-width: 2; }
.sc-grond { fill: url(#sc-v-grond); }
.sc-deur { fill: #4b5365; }
.sc-raam { fill: #f3e3bb; }
.sc-ster { fill: #b7bfcd; }
.sc-maan { fill: #fff6dd; opacity: 0.95; }
.sc-mist { fill: #ffffff; opacity: 0.5; }
.sc-nat { fill: #7b8599; }
.sc-weerschijn { fill: #d99a28; opacity: 0.35; }
.sc-regenlijn { stroke: #94a0b2; stroke-width: 1; opacity: 0.5; }
.sc-sneeuw { fill: #ffffff; opacity: 0.85; }
.sc-boom { fill: url(#sc-v-boom); }
.sc-takken { stroke: #5b5146; stroke-width: 2.5; fill: none; stroke-linecap: round; }
.sc-pompoen { fill: #c9731f; }
.sc-licht { fill: #d99a28; }
.sc-schijn { fill: #d99a28; opacity: 0.3; }

@media (max-width: 640px) {
  .scene-wrap { margin: calc(var(--s5) * -1) calc(var(--s4) * -1) var(--s4); height: 110px; }
  .scene { height: 110px; }
}

.puzzle-head { max-width: var(--prose); }

.crumbs {
  display: flex;
  gap: var(--s3);
  align-items: center;
  font-size: var(--t-xs);
  color: var(--text-3);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}

.crumbs a { text-decoration: none; color: var(--text-2); }
.crumbs a:hover { color: var(--text); }
.crumbs .sep { color: var(--line); }

.puzzle-head h1 { font-size: var(--t-xl); margin-bottom: var(--s4); }

.intro {
  font-family: var(--serif);
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 var(--s5);
  padding-left: var(--s4);
  border-left: 2px solid var(--accent);
}

/* Een lang verhaal staat ingeklapt op drie regels, met Lees verder eronder.
   Op een telefoon was het tien regels proza voordat je de vraag zag. De
   knop staat er alleen als er echt iets is weggevallen (zie head()). */
.intro-dicht {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.intro-verder {
  display: block;
  margin: calc(var(--s4) * -1) 0 var(--s5);
  padding: var(--s1) 0 var(--s1) var(--s4);
  border: 0;
  background: none;
  color: var(--accent);
  font: 600 var(--t-sm)/1.4 var(--sans);
  cursor: pointer;
}
.intro-verder[hidden] { display: none; }

.puzzel-ondertitel {
  margin: calc(var(--s2) * -1) 0 var(--s4);
  color: var(--text-3);
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
}

.question {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: var(--s6);
}

.question .label { margin: 0; }
.question b { font-family: var(--display); font-size: var(--t-md); font-weight: 600; }

/* De spelregels bij de puzzel: dichtgeklapt, maar altijd binnen handbereik. */
.spelregels {
  /* Onder de vraag, maar los ervan: tegen elkaar aan lazen de twee als
     één blok met een knop die nergens bij hoorde. */
  margin: calc(var(--s6) * -1 + var(--s3)) 0 var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2, var(--surface));
}
.spelregels > summary {
  cursor: pointer;
  padding: var(--s3) var(--s4);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
}
.spelregels > summary::-webkit-details-marker { display: none; }
.spelregels > summary::before { content: '▸ '; color: var(--text-3); }
.spelregels[open] > summary::before { content: '▾ '; }
.spelregels[open] > summary { border-bottom: 1px solid var(--line-soft); }
.regellijst {
  margin: 0;
  padding: var(--s3) var(--s4) var(--s3) calc(var(--s4) + 16px);
  display: grid;
  gap: 6px;
  font-size: var(--t-sm);
  color: var(--text-2);
  line-height: 1.5;
}

/* De blokken tussen twee categorieën onderling zijn kladpapier: ze staan
   onder de blokken die er echt toe doen, en dragen een rustiger kop. */
.blok-kop { margin-top: var(--s6); }
.blok-paar .label { color: var(--text-3); }

.play { display: grid; gap: var(--s6); align-items: start; }
/* Op een smal scherm één kolom: bord, legenda, aanwijzingen, knoppen. Op
   een telefoon zag je anders eerst veertien zinnen voordat je het bord vond.
   Het blad met de zwevende knop (aanwijzingenKnop in player.js) haalt ze
   daar naar boven zonder te scrollen. */
.play > *, .boards > * { min-width: 0; }

/* De vraag staat twee keer in de pagina (zie vraagBlok in player.js): in
   de kop en boven aan de aanwijzingen. Standaard alleen die in de kop. */
.aanwijzingen-vraag { display: none; }
.vraagblok .spelregels { margin-bottom: 0; }

/* Op een breed scherm twee kolommen. Bovenaan het verhaal links en de
   vraag met de regels rechts. Daaronder links de namenrij, het bord en de
   knoppen, en rechts de aanwijzingen: ze beginnen naast de puzzel en
   lopen mee terwijl je scrolt. Een versie waarin de kolom al naast de
   titel begon, liet de aanwijzingen hoger staan dan het bord waar ze over
   gaan; dat las niet als een paar. De pagina mag breder; het bord niet
   (zie .kamerbord). */
@media screen and (min-width: 1100px) {
  main:has(> .play) { max-width: 1360px; }
  .play {
    /* Links zo breed als het bord (680) plus wat lucht; alles wat er
       overblijft gaat naar de aanwijzingen, die er dan naast elkaar in
       passen (zie de containerregel hieronder). */
    grid-template-columns: minmax(0, 720px) minmax(340px, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: var(--s7);
    row-gap: var(--s5);
  }
  .play > .boards, .play > .aanwijzingen-kolom + * { grid-column: 1; }
  /* De kop over beide kolommen, met dezelfde kolomgrenzen als eronder. */
  .play > .puzzle-head {
    grid-column: 1 / -1;
    max-width: none;
    display: grid;
    grid-template-columns: subgrid;
    align-items: end;
  }
  .play > .puzzle-head .puzzle-verhaal { grid-column: 1; }
  .play > .puzzle-head .puzzle-zijkant { grid-column: 2; }
  .play > .puzzle-head .intro { margin-bottom: 0; }
  /* Op een breed scherm is het verhaal drie of vier regels: niet inklappen. */
  .play .intro-dicht { display: inline; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  .play > .aanwijzingen-kolom {
    grid-column: 2;
    grid-row: 2 / -1;
    position: sticky;
    top: calc(var(--kop-hoogte) + var(--s4));
    max-height: calc(100vh - var(--kop-hoogte) - 2 * var(--s4));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    container-type: inline-size;
  }
  .aanwijzingen-kolom > .paneel { margin-top: 0; }
  .aanwijzingen-knop { display: none; }

  /* Compacter, zodat een lijst van zeventien zinnen past zonder dat de
     kolom zelf hoeft te scrollen. */
  .aanwijzingen-kolom .clue { padding: 6px var(--s2); line-height: 1.4; }
  .aanwijzingen-kolom .clue-groep { margin-bottom: var(--s2); }
  .aanwijzingen-kolom .clue-kop { margin-bottom: 0; }
  .aanwijzingen-kolom .clue-ook { margin: 0 0 0 var(--s2); }
}

/* Is de kolom breed genoeg, dan de groepen per naam in twee kolommen: een
   lijst die half zo hoog is, past meestal zonder scrollen naast het bord. */
@container (min-width: 520px) {
  .aanwijzingen-kolom .paneel-binnen { columns: 2; column-gap: var(--s5); }
  .aanwijzingen-kolom .clue-groep,
  .aanwijzingen-kolom .clue,
  .aanwijzingen-kolom .clue-feit { break-inside: avoid; }
  .aanwijzingen-kolom .paneel-binnen .legend,
  .aanwijzingen-kolom .paneel-binnen .feiten,
  .aanwijzingen-kolom .paneel-binnen > div > .label { column-span: all; }
}

@media screen and (min-width: 1100px) {

  /* Namenrij en bord samen in beeld: minder lucht ertussen. */
  .play > .boards { gap: var(--s4); }
  .play .palet { margin-bottom: 0; }

  /* De sfeerplaat lager, zodat het bord eerder in beeld komt. */
  main:has(> .play) .scene-wrap,
  main:has(> .play) .scene-wrap .scene { height: 120px; }
  .play > .puzzle-head h1 { margin-bottom: var(--s2); }
}

/* De zwevende knop en het blad, alleen op een smal scherm. */
.aanwijzingen-sluit { display: none; }
@media screen and (max-width: 1099px) {
  .aanwijzingen-knop {
    position: fixed;
    right: var(--s4);
    bottom: calc(var(--s4) + env(safe-area-inset-bottom));
    z-index: 30;
    padding: var(--s3) var(--s5);
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: 600 var(--t-sm)/1.2 var(--sans);
    box-shadow: 0 6px 18px rgba(36, 22, 58, 0.28);
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .aanwijzingen-knop-weg { opacity: 0; transform: translateY(8px); pointer-events: none; }

  /* Het blad bedekt de onderste helft; het bord blijft erboven bespeelbaar.
     De ruimte onder de pagina zorgt dat je ook de onderkant van het bord
     boven het blad kunt scrollen. */
  .aanwijzingen-kolom.aanwijzingen-blad {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    max-height: 55vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--s4) calc(var(--s4) + env(safe-area-inset-bottom));
    background: var(--bg);
    border-top: 2px solid var(--accent);
    border-radius: var(--r) var(--r) 0 0;
    box-shadow: 0 -8px 24px rgba(36, 22, 58, 0.25);
  }
  /* In het blad alleen de vraag, klein: de regels staan in de kop, en het
     blad is er voor de aanwijzingen. */
  .aanwijzingen-blad > .aanwijzingen-vraag { display: block; margin-top: var(--s3); }
  .aanwijzingen-blad > .aanwijzingen-vraag .spelregels { display: none; }
  .aanwijzingen-blad > .aanwijzingen-vraag .question { margin-bottom: 0; padding: var(--s2) var(--s3); }
  .aanwijzingen-blad > .aanwijzingen-vraag .question b { font-size: var(--t-base); }
  .aanwijzingen-blad > .paneel { margin-top: var(--s3); border: 0; background: transparent; }
  .aanwijzingen-blad > .paneel > summary { pointer-events: none; padding-left: 0; }
  .aanwijzingen-blad > .paneel > summary::before { display: none; }
  .aanwijzingen-blad > .paneel > .paneel-binnen { padding: 0; }
  .aanwijzingen-blad > .aanwijzingen-sluit {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 calc(-1 * var(--s4));
    width: calc(100% + 2 * var(--s4));
    padding: var(--s3) var(--s4);
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: var(--bg);
    color: var(--accent);
    font: 600 var(--t-sm)/1.2 var(--sans);
    text-align: right;
    cursor: pointer;
  }
  main:has(.aanwijzingen-blad) { padding-bottom: 55vh; }
}

/* Wat vaststaat staat boven de aanwijzingen, en ziet er anders uit: je kunt
   het niet wegstrepen, want het is geen stap maar een gegeven. */
.feiten { margin-bottom: var(--s5); }
.clue-feit {
  display: grid;
  grid-template-columns: 2.2rem 1fr;
  gap: var(--s2);
  align-items: baseline;
  padding: var(--s3);
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  color: var(--text-2);
}
.clue-feit .clue-n { color: var(--accent); font-weight: 600; }

.clues { border-top: 1px solid var(--line-soft); }

.clue {
  display: flex;
  gap: var(--s3);
  width: 100%;
  padding: var(--s3) var(--s2);
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  cursor: pointer;
  font-size: var(--t-sm);
  line-height: 1.55;
  text-align: left;
  color: var(--text);
}

.clue:hover { background: var(--surface); }
.clue-n { color: var(--text-3); font-variant-numeric: tabular-nums; min-width: 1.3em; }
.clue[aria-pressed="true"] { color: var(--text-3); }
.clue[aria-pressed="true"] .clue-text { text-decoration: line-through; }

.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}
.toolbar .btn { justify-content: center; }

.note {
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  border: 1px solid var(--line);
  background: var(--surface);
}
.note-good { border-color: color-mix(in oklab, var(--good) 45%, var(--line)); color: var(--good); }
.note-bad { border-color: color-mix(in oklab, var(--bad) 45%, var(--line)); color: var(--bad); }

.legend { font-size: var(--t-xs); color: var(--text-3); margin: var(--s3) 0 0; line-height: 1.6; }

/* =============================================================== borden */

.boards { display: grid; gap: var(--s6); }
.board-wrap { overflow-x: auto; padding-bottom: var(--s1); }

table.grid { border-collapse: collapse; font-size: var(--t-sm); }
table.grid th, table.grid td { border: 1px solid var(--line); padding: 0; }
table.grid th {
  font-weight: 500;
  color: var(--text-2);
  text-align: left;
  padding: var(--s2) var(--s3);
  background: var(--surface);
  white-space: nowrap;
  font-size: var(--t-xs);
}
table.grid th.corner { background: transparent; border: 0; }
table.grid th.col-head { vertical-align: bottom; text-align: center; max-width: 92px; white-space: normal; line-height: 1.3; padding-top: var(--s3); }

.kop-staand { display: flex; flex-direction: column; align-items: center; gap: var(--s2); color: var(--text-2); }
.kop-liggend { display: flex; align-items: center; gap: var(--s2); color: var(--text-2); }
.kop-staand .glyph, .kop-liggend .glyph { color: var(--accent); opacity: 0.75; }
table.grid td.cell { width: 42px; height: 40px; text-align: center; }

.mark {
  width: 100%; height: 100%;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--t-md);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.mark:hover { background: var(--surface-2); }
.mark[data-state="yes"] { color: var(--good); background: color-mix(in oklab, var(--good) 13%, transparent); font-weight: 700; }
.mark[data-state="no"] { color: var(--bad); opacity: 0.7; }
.mark[data-wrong="1"] { outline: 2px solid var(--bad); outline-offset: -2px; }

/* De plattegrond. Muren hebben dikte, buitenmuren meer dan binnenmuren, en
   een doorgang is een gat in de muur met een deurblad en een draaicirkel -
   precies zoals op een bouwtekening. */
.map-figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s4);
  margin: 0;
}
.map-figure svg { width: 100%; height: auto; display: block; }

.vloerbasis { fill: #efe8da; }
.vloerlijn { fill: none; stroke: #ddd2bf; stroke-width: 1; }
.vloer { fill: url(#vloertegels); }

.muur { stroke: #6f6454; stroke-width: 3; stroke-linecap: square; }
.muur-buiten { stroke: #4a4134; stroke-width: 6; }

/* Een doorgang ligt nu op een gekleurde vloer in plaats van op wit. Een
   lichte lijn eronder houdt hem leesbaar op elke vloer, en valt weg op
   papier omdat hij daar dezelfde kleur heeft als het blad. */
.deur-onder {
  stroke: rgba(255, 249, 234, 0.75);
  stroke-width: 5.5;
  fill: none;
  stroke-linecap: round;
}
.deurblad { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.deurboog {
  stroke: color-mix(in oklab, var(--accent) 40%, transparent);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 3;
}

.kamer-glyph path {
  fill: none;
  stroke: var(--text-2);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.38;
}
.kamer-bol { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.kamer-nr { fill: var(--accent); font: 700 12px var(--serif); }
.kamer-naam {
  fill: rgba(48, 34, 20, 0.78);
  font: 700 12.5px var(--schrift, var(--sans));
  letter-spacing: 0.04em;
  paint-order: stroke;
  stroke: rgba(255, 249, 234, 0.72);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.kompas circle { fill: none; stroke: var(--line); stroke-width: 1; }
.kompas-naald { fill: var(--accent); }
.kompas-n { fill: var(--text-3); font: 600 8px var(--sans); }

.plan-titel { fill: var(--text-3); font: 600 10px var(--sans); letter-spacing: 0.14em; }
.plan-legenda { fill: var(--text-3); font: 400 10px var(--sans); }

/* Losse iconen naast tekst (kolomkoppen, rijlabels). */
.glyph { flex: none; }
.glyph path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

table.latin { border-collapse: collapse; }
table.latin th {
  font-size: var(--t-xs); color: var(--text-2); font-weight: 500;
  padding: var(--s2) var(--s3); background: var(--surface);
  border: 1px solid var(--line); white-space: nowrap;
}
table.latin td { border: 1px solid var(--line); padding: 0; }
table.latin td.cell { width: 78px; height: 46px; }
.latin-cell {
  width: 100%; height: 100%;
  border: 0; background: transparent; color: var(--text);
  cursor: pointer; font-size: var(--t-xs); line-height: 1.25; padding: 2px 4px;
}
.latin-cell:hover { background: var(--surface-2); }
.latin-cell[data-locked="1"] { background: var(--surface); color: var(--text-2); cursor: default; }
.latin-cell[data-target="1"] { box-shadow: inset 0 0 0 2px var(--accent); }
.latin-cell[data-wrong="1"] { outline: 2px solid var(--bad); outline-offset: -2px; }

.swatches { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); font-size: var(--t-xs); color: var(--text-2); }
.swatch { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid var(--line); border-radius: 99px; padding: 4px var(--s3); }
.swatch .glyph { color: var(--accent); opacity: 0.8; }

.spinner { color: var(--text-3); padding: var(--s7) 0; }

/* ============================================================== tabellen */

.deftable { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.deftable th, .deftable td { text-align: left; padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.deftable th { color: var(--text); font-weight: 600; white-space: nowrap; width: 1%; padding-right: var(--s5); font-family: var(--sans); }
.deftable td { color: var(--text-2); }

@media (max-width: 640px) {
  main { padding: var(--s5) var(--s4) var(--s7); }
  h1 { font-size: 1.9rem; }

  /* Naam en menu passen niet op een regel. In plaats van het menu te laten
     afbreken krijgt het een eigen rij - en dan mag de balk niet meer blijven
     plakken, want twee rijen koptekst eten te veel van een telefoonscherm. */
  .top {
    position: static;
    flex-wrap: wrap;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
  }
  .nav { width: 100%; }
  .nav a { padding: var(--s2) var(--s2); }

  .section { margin-top: var(--s6); }
  .hero { padding-bottom: var(--s5); }
}

/* ======================================================== kamerraster */

/* Een licht speelbord op een donkere pagina: het ligt als het ware voor je
   op tafel. Dit is bewust het enige lichte vlak in de site. */
/* De lijst om het bord krijgt de kleur van het genre. Een zaak in Regenstad
   hoort er anders uit te zien dan een kerstavond, ook als je alleen het bord
   ziet. --genre wordt per puzzel gezet; zonder dat blijft het bruin. */
.kamerbord {
  width: 100%;
  height: auto;
  /* Nooit breder dan 680 pixels, en bij een klein bord niet breder dan
     vakjes van 72 pixels (--bordmax, gezet in board-rooms.js). Toen de
     lijst dunner werd, zouden de vakjes anders vanzelf groter worden. */
  max-width: min(680px, var(--bordmax, 680px), 100%);
  display: block;
  /* Geen achtergrond en geen schaduw meer op de svg zelf: die vullen ook de
     lucht om het bord, en dan kan er niets meer buiten het bord uitsteken.
     Het blad en zijn schaduw worden nu in de tekening gezet. */
}

.bordblad { fill: var(--genre-diep, #3a2e22); }

.dessinlijn { fill: none; stroke: rgba(90, 70, 45, 0.34); stroke-width: 1.1; }
.dessinvlak { fill: rgba(255, 252, 240, 0.42); }

.vloervlek { fill: rgba(90, 70, 45, 0.11); }
.dessinnerf { fill: none; stroke: rgba(70, 48, 22, 0.30); stroke-width: 0.9; }
.dessinspijker { fill: rgba(60, 44, 24, 0.33); }
.dessinplank-licht { fill: rgba(255, 246, 222, 0.13); }
.dessinplank-donker { fill: rgba(72, 48, 20, 0.11); }
.dessinnoest { fill: rgba(92, 62, 26, 0.34); }
.dessinnoest-kern { fill: rgba(62, 40, 16, 0.5); }
.dessinvoeg { stroke: rgba(70, 52, 30, 0.34); stroke-width: 1.1; fill: none; }
.dessinglans { stroke: rgba(255, 253, 240, 0.55); stroke-width: 1.2; fill: none; stroke-linecap: round; }
.dessinruit { fill: none; stroke: rgba(70, 52, 30, 0.50); stroke-width: 1.4; }
.dessinscheur { fill: none; stroke: rgba(50, 40, 28, 0.38); stroke-width: 0.9; stroke-linecap: round; }
.dessinspikkel { fill: rgba(50, 40, 28, 0.32); }
.dessingras { fill: none; stroke: rgba(42, 78, 32, 0.50); stroke-width: 1.2; stroke-linecap: round; }
.dessingras-dik { stroke: rgba(28, 62, 22, 0.58); stroke-width: 1.9; }
.dessinbloem { fill: rgba(246, 230, 128, 0.78); }
.dessinpol { fill: rgba(60, 104, 44, 0.16); }
.dessinweefsel { stroke: rgba(80, 40, 30, 0.30); stroke-width: 1.6; fill: none; }
.dessindraad { stroke: rgba(255, 248, 235, 0.30); stroke-width: 0.8; fill: none; }

/* Het vakjesraster is de belangrijkste lijn op het bord: zonder dat weet je
   niet waar je mag klikken. Het vloerpatroon moet daar dus onder blijven. */
.vakjeslijn { stroke: rgba(70, 52, 30, 0.42); stroke-width: 1.4; fill: none; stroke-linecap: round; }
/* Muren met dikte: een donkere voet, een lichter bovenvlak en een streepje
   licht op de rand. Zo kijk je van schuin boven op een maquette. */
.muurvoet { stroke: #3b2e21; stroke-width: 11; stroke-linecap: round; fill: none; }
.muurtop { stroke: #8a6f52; stroke-width: 6; stroke-linecap: round; fill: none; }
.muurglans { stroke: #bda07d; stroke-width: 1.6; stroke-linecap: round; fill: none; }
.muurnerf { stroke: rgba(70, 48, 26, 0.45); stroke-width: 1; stroke-linecap: round; fill: none; }
.kleed { opacity: 0.94; stroke: rgba(40, 28, 18, 0.6); stroke-width: 1.4; }
.kleedschaduw { fill: rgba(44, 30, 16, 0.26); }
.kleedrand { stroke: rgba(255, 248, 232, 0.52); stroke-width: 1.2; fill: none; }
.kleeddraad { stroke: rgba(255, 250, 238, 0.14); stroke-width: 1.6; fill: none; }
.kleedfranje { stroke: rgba(50, 36, 24, 0.45); stroke-width: 1.1; stroke-linecap: round; }
.blad { fill: #8aa84a; stroke: rgba(50, 68, 24, 0.75); stroke-width: 1; }
.kei { fill: #b0b0a2; stroke: rgba(70, 70, 60, 0.7); stroke-width: 1.1; }
.putdeksel { fill: #8d8d87; stroke: rgba(50, 50, 46, 0.8); stroke-width: 1.3; }
.putrooster { stroke: rgba(40, 40, 36, 0.5); stroke-width: 1.2; }
.losseTegel { fill: rgba(255, 250, 235, 0.3); stroke: rgba(80, 62, 38, 0.28); stroke-width: 1; }
.versierlijn { stroke: rgba(50, 36, 24, 0.5); stroke-width: 0.9; opacity: 0.8; }
.waslaag { fill: rgba(255, 246, 219, 0.55); stroke: rgba(120, 98, 60, 0.3); stroke-width: 0.8; }
.voetspoor { fill: rgba(72, 54, 34, 0.3); }
.web { fill: none; stroke: rgba(255, 253, 248, 0.75); stroke-width: 1.2; }
.plas { fill: rgba(126, 170, 194, 0.55); stroke: rgba(60, 100, 124, 0.6); stroke-width: 1.1; }
.plasglans { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; stroke-linecap: round; }
.paddenhoed { fill: rgba(176, 82, 60, 0.75); stroke: rgba(90, 40, 28, 0.5); stroke-width: 0.8; }
.paddensteel { fill: rgba(246, 238, 220, 0.85); stroke: rgba(90, 76, 50, 0.4); stroke-width: 0.7; }
.olie { fill: rgba(42, 38, 34, 0.46); }
.bout { fill: rgba(120, 126, 132, 0.8); stroke: rgba(60, 64, 68, 0.5); stroke-width: 0.7; }
.scherf { fill: rgba(205, 217, 224, 0.75); stroke: rgba(90, 110, 120, 0.5); stroke-width: 0.7; }
.chemie { fill: rgba(111, 154, 90, 0.35); }
.meelvlek { fill: rgba(255, 253, 247, 0.75); }
.kruimel { fill: rgba(140, 108, 64, 0.6); }
.papier { fill: rgba(252, 248, 238, 0.8); stroke: rgba(110, 92, 62, 0.45); stroke-width: 0.8; }
.papierlijn { stroke: rgba(110, 92, 62, 0.5); stroke-width: 0.8; fill: none; }
.grafscheur { fill: none; stroke: rgba(40, 36, 30, 0.4); stroke-width: 1.4; stroke-linecap: round; }
.kaarsje { fill: rgba(250, 244, 230, 0.9); stroke: rgba(110, 92, 62, 0.45); stroke-width: 0.8; }
/* Stof en krasjes op een vakje waar verder niets ligt. Nauwelijks te zien,
   maar zonder dit valt zo'n vakje op als een gat in de vloer. */
.kras { fill: none; stroke: rgba(60, 44, 26, 0.26); stroke-width: 0.9; stroke-linecap: round; }

/* De voorwerpen die in een kamer staan zonder dat de puzzel erover gaat.
   Elk ding heeft een contour, een vlak en een glans: zonder die drie blijft
   het een silhouet, en daar kwam "te strak" vandaan. */
.propschaduw { fill: rgba(44, 30, 16, 0.22); }
.propblad { fill: #4e7f3c; stroke: #2d4f21; stroke-width: 1; }
.proppot { fill: #b26a42; stroke: #6b3a20; stroke-width: 1.2; }
.proprand { stroke: #8a4f2d; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.propglans { fill: none; stroke: rgba(255, 252, 240, 0.5); stroke-width: 1.4; stroke-linecap: round; }
.prophout { fill: #a9733f; stroke: #5e3a1c; stroke-width: 1.2; }
.proppoot { fill: none; stroke: #6b4323; stroke-width: 2.6; stroke-linecap: round; }
.proppapier { fill: #f1e6cd; stroke: #8d7549; stroke-width: 1.1; }
.proplijn { fill: none; stroke: rgba(110, 88, 52, 0.7); stroke-width: 1.1; }
.propletter { fill: none; stroke: rgba(110, 88, 52, 0.45); stroke-width: 1.4; }
.propstof { fill: #b4607a; stroke: #6d2f42; stroke-width: 1.2; }
.propkwast { fill: #e8c870; stroke: #8d6f28; stroke-width: 0.7; }
.propglas { fill: rgba(176, 206, 198, 0.62); stroke: rgba(70, 104, 96, 0.8); stroke-width: 1; }
.propjute { fill: #c0a068; stroke: #6f5a2e; stroke-width: 1.2; }
.proptouw { fill: none; stroke: #6f5a2e; stroke-width: 2; stroke-linecap: round; }
.propnaad { fill: none; stroke: rgba(111, 90, 46, 0.6); stroke-width: 0.9; }
.propmetaal { fill: #8e98a0; stroke: #4b545b; stroke-width: 1.2; }
.propmetaal-licht { fill: #aab4bb; stroke: #4b545b; stroke-width: 1.1; }
.propbeugel { fill: none; stroke: #4b545b; stroke-width: 1.6; }
.propsteel { fill: none; stroke: #8a5c30; stroke-width: 3.4; stroke-linecap: round; }
.propsleutel { fill: #99a2a9; stroke: #4b545b; stroke-width: 1.1; }
.propgat { fill: rgba(40, 46, 50, 0.8); }
.propvaren { fill: none; stroke: #3f7334; stroke-width: 1.5; stroke-linecap: round; }
.propwortel { fill: none; stroke: rgba(92, 62, 32, 0.6); stroke-width: 2.6; stroke-linecap: round; }
.propsteeltje { fill: none; stroke: #43702f; stroke-width: 1.3; stroke-linecap: round; }
.propbloem-a { fill: #e8738c; stroke: #96364c; stroke-width: 0.6; }
.propbloem-b { fill: #c79be0; stroke: #6f4489; stroke-width: 0.6; }
.prophart { fill: #f4d96a; stroke: #9b7c20; stroke-width: 0.6; }
.propstruik { fill: #487f38; stroke: #27511d; stroke-width: 1.1; }
.propstruik-licht { fill: rgba(126, 176, 86, 0.75); stroke: none; }
.propstruikblad { fill: #5d9342; stroke: #2b5520; stroke-width: 0.8; }
.proptak { fill: none; stroke: #5b3f22; stroke-width: 1.6; stroke-linecap: round; }
.propbot { fill: none; stroke: #ece2cc; stroke-width: 2.4; stroke-linecap: round; }
.propsteen { fill: #9a968b; stroke: #5d5a52; stroke-width: 1.2; }
.propsteen-licht { fill: #b0aca0; stroke: #5d5a52; stroke-width: 1.1; }
.propstamper { fill: none; stroke: #7e7a70; stroke-width: 3.2; stroke-linecap: round; }
.propvocht-a { fill: rgba(196, 92, 72, 0.8); }
.propvocht-b { fill: rgba(96, 150, 92, 0.8); }
.proprol { fill: #ddcba6; stroke: #8d7549; stroke-width: 1; }
.stofje { fill: rgba(60, 44, 26, 0.18); }
.vlammetje { fill: #d9a235; }
.buitenmuur-voet { fill: none; stroke: #3b2e21; stroke-width: 13; stroke-linecap: round; }
.buitenmuur-top { fill: none; stroke: #8a6f52; stroke-width: 6; stroke-linecap: round; transform: translate(0, 2.5px); }

/* De meubels staan als getekende voorwerpen op de vloer, niet als pictogram
   in een blokje. Een dunne donkere omlijning houdt ze leesbaar op elke vloer. */
.meubelkunst path {
  stroke: rgba(44, 32, 18, 0.5);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
/* Onderdelen die als lijn getekend zijn houden hun eigen kleur en dikte. */
.meubelkunst path.meubellijn { stroke-width: 2; }
.meubelschaduw { fill: rgba(60, 45, 25, 0.16); }

.meubelglyph path {
  fill: none;
  stroke: #4a3b2c;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.krijtlijn {
  fill: none;
  stroke: #fbf6ec;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.85;
  stroke-dasharray: 7 4;
}

/* De verdachten zijn portretjes in dezelfde stijl als het meubilair. */
.persoonkunst path, .persoonkunst rect, .persoonkunst circle {
  stroke: rgba(30, 22, 12, 0.45);
  stroke-width: 0.8;
  stroke-linejoin: round;
}
.portretvlak { stroke-width: 1.2; }
.portretletter {
  fill: #2b241c;
  font: 700 10px var(--sans);
  stroke: none;
}
.letterbadge { stroke-width: 1; }

.palet-portret { display: inline-flex; flex: none; }
.palet-portret svg { display: block; border-radius: 50%; }

.penningvlak { stroke: rgba(0, 0, 0, 0.35); stroke-width: 2; }
.lijkvlak { fill: rgba(40, 30, 18, 0.72); stroke: rgba(255, 255, 255, 0.35); stroke-width: 2; }
.penningkop { fill: rgba(255, 255, 255, 0.9); }
.penningletter {
  fill: #fff;
  font: 700 17px var(--serif);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 2px;
}
.penningfout { fill: none; stroke: #ff5a5a; stroke-width: 3; }
/* Groen om wat goed staat. Dunner en rustiger dan het rood: fout is wat je
   moet zien, goed is wat je mag overslaan. */
.penninggoed { fill: none; stroke: #2fa86a; stroke-width: 2.6; opacity: 0.85; }

/* Een schetsletter is een potloodnotitie, maar hij moet wel te lezen zijn.
   Hij stond op lichtbruin met doorzichtigheid 0.72 en verdween daarmee in
   een tegelvloer of een stuk gras. Nu met dezelfde truc als de kruisjes: een
   lichte baan achter de letter, zodat de letter zelf diep mag zijn. */
.schetsletter {
  fill: #2d2013;
  font: 700 14px var(--sans);
  paint-order: stroke;
  stroke: rgba(255, 250, 238, 0.85);
  stroke-width: 3.5;
  stroke-linejoin: round;
}

.palet-schets .palet-fiche { background: var(--surface-3); color: var(--text-2); }

/* Een kruisje moet je zien op een tegelvloer, op gras en op parket. Het was
   lichtbruin op 0.8 en verdween in alle drie. Nu staat er een lichte baan
   onder, zodat het kruis zelf diep mag zijn zonder dat het vuil wordt. */
.kruisbaan { stroke: #fff6e4; stroke-width: 7.5; stroke-linecap: round; opacity: 0.6; fill: none; }
.kruisbaan-vanzelf { opacity: 0.4; stroke-width: 6.5; }
.kruisje { stroke: #3a2516; stroke-width: 4; stroke-linecap: round; opacity: 0.95; fill: none; }
/* Kruisjes die het bord zelf zet staan er lichter in dan die van jezelf,
   maar nog altijd zo dat je ze in een oogopslag ziet. */
.kruisje-vanzelf { opacity: 0.55; stroke-width: 3.2; }

.randletter { fill: #6b5a42; font: 600 11px var(--sans); }
.kompasnaald { fill: #a3551f; }
.kompasletter { fill: #6b5a42; font: 700 8px var(--sans); }

/* De kamernaam ligt op de vloer, met een lichte gloed eronder zodat hij op
   een donkere en op een lichte vloer leesbaar blijft. paint-order zet die
   gloed achter de letters in plaats van eroverheen. */
.kamernaam {
  fill: rgba(48, 34, 20, 0.62);
  font-family: var(--schrift);
  font-weight: 700;
  letter-spacing: 0.1em;
  paint-order: stroke;
  stroke: rgba(255, 249, 234, 0.6);
  stroke-width: 4;
  stroke-linejoin: round;
}
.klikvak { fill: transparent; cursor: pointer; }
.klikvak:hover { fill: rgba(255, 255, 255, 0.14); }
.klikvak-dicht { cursor: default; pointer-events: none; }

.legenda {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: var(--s2) var(--s4);
  margin-bottom: var(--s4);
}

.legenda-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  color: var(--text-2);
}

.legenda-item svg { flex: none; }

/* het palet met verdachten
   Twee rijen: de namen boven, de twee standen (Uitsluiten, Schetsen)
   eronder. En hij plakt vast onder de kop, zodat de namen en het bord
   altijd samen op één scherm staan - op een telefoon stond je anders
   steeds te scrollen tussen de naam die je wilt pakken en het vakje waar
   hij moet komen. */
/* 2026-11-10: niet meer plakkend. De balk lag bij het scrollen over het bord
   heen, en dat bleef de klacht ook nadat hij lager was gemaakt. Hij staat nu
   gewoon boven het bord. */
.palet {
  position: static;
  /* Onder de kop, niet eronder vandaan: die plakt zelf ook bovenaan (zie
     .top). Met top:0 schoof de namenrij er precies achter weg en zag je
     alleen Uitsluiten en Schetsen nog staan. */
  top: var(--kop-hoogte);
  z-index: 5;
  margin-bottom: var(--s4);
  padding: var(--s2) 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.palet-namen { display: flex; gap: var(--s2); flex-wrap: wrap; }
.palet-standen {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s2);
  padding-top: var(--s2);
  border-top: 1px dashed var(--line-soft);
}

/* Op een telefoon nemen zestien verdachten het halve scherm. Eén rij die je
   opzij schuift laat het bord heel; de twee standen eronder schuiven niet
   mee, want die moet je blind kunnen vinden. */
@media (max-width: 680px) {
  .palet-namen {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding-bottom: var(--s1);
    -webkit-overflow-scrolling: touch;
  }
  .palet-namen .palet-knop { flex: none; scroll-snap-align: start; }
}

.palet-knop {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 99px;
  padding: 5px var(--s3) 5px 5px;
  font-size: var(--t-sm);
  cursor: pointer;
}

.palet-knop:hover { border-color: #c3b393; }
.palet-knop[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.palet-knop[data-geplaatst="1"] { opacity: 0.55; }

.palet-fiche {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: #fff;
  background: var(--surface-3);
  flex: none;
}

.palet-kruis .palet-fiche { background: var(--surface-3); color: var(--text-2); }
.palet-lijk .palet-fiche { background: #3a2e22; color: #f6efe2; }

/* ============================================================== afdrukken */

/* Een puzzel hoort ook op papier te kunnen. Wat op het scherm hoort maar niet
   op papier gaat eruit: de navigatie, de sfeertekening, de knoppen. Wat
   blijft is wat je nodig hebt om hem met een potlood te maken: de inleiding,
   de vraag, de aanwijzingen en het bord. */
@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #fff;
    --surface-3: #f2f2f2;
    --line: #999;
    --line-soft: #ccc;
    --text: #000;
    --text-2: #333;
    --text-3: #555;
    --accent: #000;
    --accent-soft: #fff;
  }

  @page { margin: 14mm; }

  body { background: #fff; color: #000; }

  .top,
  .foot,
  .scene-wrap,
  .toolbar,
  .note,
  .crumbs a,
  .legend,
  .palet-kruis,
  .palet-schets { display: none !important; }

  main { max-width: none; padding: 0; }

  /* Het bord op het eerste vel, de aanwijzingen op het tweede. Naast
     elkaar scheelde het een vel, maar dan werd het bord te klein om op te
     tekenen. Een proefdruk als pdf gaf eerst vijf vellen: het bord paste
     niet onder de kop en schoof door, en de klepjes en schakelaars eronder
     kwamen als losse lege koppen mee. Wat je op papier niet kunt bedienen,
     gaat eruit; de namen staan al bij de aanwijzingen. */
  .play { display: block; }
  .play > .boards { break-inside: avoid; }
  .play > .aanwijzingen-kolom { break-before: page; }
  .palet,
  .bordschakelaars,
  .paneel[data-paneel="uitleg"],
  .boards .paneel:not([open]) { display: none !important; }
  .crumbs .sep:first-of-type { display: none; }
  /* De aanwijzingen in twee kolommen en dichter op elkaar: zo past een
     lijst van zeventien op één vel. */
  .aanwijzingen-kolom .paneel { border: 0; background: none; }
  .aanwijzingen-kolom .paneel > summary { padding: 0 0 2mm; background: none; }
  .aanwijzingen-kolom .paneel-binnen { padding: 0; columns: 2; column-gap: 8mm; }
  .aanwijzingen-kolom .clue-groep, .aanwijzingen-kolom .clue { break-inside: avoid; }
  .aanwijzingen-kolom .legend, .aanwijzingen-kolom .feiten { column-span: all; }
  .aanwijzingen-kolom .clue-groep { margin-bottom: 2mm; }
  .aanwijzingen-kolom .clue-kop { margin: 0; }
  .intro-dicht { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
  .intro-verder { display: none !important; }
  .aanwijzingen-knop, .aanwijzingen-sluit { display: none !important; }
  /* Vel 1: zaak, vraag en bord. Vel 2: de regels en de aanwijzingen. */
  .puzzle-head .spelregels,
  .aanwijzingen-vraag .question { display: none !important; }
  .aanwijzingen-vraag { display: block !important; }
  .aanwijzingen-kolom .paneel > summary::before { display: none !important; }
  .aanwijzingen-kolom .paneel > summary { display: block; }

  .puzzle-head { max-width: none; }
  .puzzle-head h1 { font-size: 16pt; margin-bottom: 4mm; }
  .intro { font-size: 10pt; border-left: 2px solid #000; padding: 2mm 4mm; margin-bottom: 3mm; }
  /* De kop zo kort als het kan: alles wat hij hoger is, gaat van het bord
     af, en bord en kop moeten samen op het eerste vel. */
  .puzzel-ondertitel { margin: -2mm 0 2mm; }
  .crumbs { margin-bottom: 2mm; }
  .spelregels { break-inside: avoid; margin: 2mm 0 4mm; }
  .spelregels > summary { font-weight: 700; padding: 1.5mm 3mm; }
  .spelregels > summary::before { content: none; }
  .regellijst { columns: 2; column-gap: 6mm; display: block; font-size: 8.5pt; padding: 1.5mm 3mm 2mm 7mm; }
  .regellijst li { break-inside: avoid; margin-bottom: 1mm; }
  .question { border: 1px solid #000; padding: 2mm 4mm; margin-bottom: 5mm; }
  .question b { font-size: 11pt; }
  .aanwijzingen-kolom .paneel[open] > summary { background: none; }

  .clue { font-size: 9.5pt; padding: 1.5mm 0; border-bottom: 1px solid #ddd; }
  .clue[aria-pressed="true"] { color: #000; }
  .clue[aria-pressed="true"] .clue-text { text-decoration: none; }

  .kamerbord {
    /* Met de kop erboven moet het bord op het eerste vel passen; een A4
       heeft na de marges zo'n 27 cm hoogte. */
    max-width: min(100%, 160mm);
    margin: 0 auto;
    box-shadow: none;
    background: #fff;
    border: 1px solid #000;
  }

  .palet { gap: 2mm; }
  .palet-knop { border-color: #000; font-size: 9pt; }
  .palet-knop[aria-pressed="true"] { background: #fff; }

  table.grid th, table.grid td, table.latin th, table.latin td { border-color: #000; }
  .map-figure { border: 1px solid #000; background: #fff; }

  /* Kruisjes en vinkjes die je zelf hebt gezet horen niet op een lege
     afdruk, maar als je halverwege bent wil je ze juist wel. Ze blijven dus
     staan; alleen de kruisjes die het bord zelf zet gaan eruit, want die
     zet je op papier zelf. */
  .kruisje-vanzelf,
  .kruisbaan-vanzelf { display: none; }
  .kruisbaan { display: none; }

  /* De sfeer is voor het scherm. Op papier wordt elk verloop grijs en elk
     plantje een vlek, en dan kun je er niet meer in schrijven. De vloer, de
     meubels en de namen blijven; het licht, de schaduw en de aankleding
     gaan eruit. */
  .aankleding,
  .wandschaduw,
  .kamerlicht,
  .bordvignet,
  .meubelschaduw { display: none; }

  /* De meubels blijven, maar als lijntekening. Een geschilderd meubelstuk is
     op papier een grijze klodder waar je niet meer in kunt schrijven, terwijl
     elk onderdeel al zijn eigen omtrek heeft - haal het licht, de schaduw, de
     textuur en de vulling weg en er staat precies de prent die je op papier
     wilt. */
  .geschilderd .gs-contact,
  .geschilderd .gs-diepte,
  .geschilderd .gs-glans,
  .geschilderd .gs-textuur,
  .geschilderd .gs-draadglans { display: none; }

  .geschilderd .gs-vlak { fill: #fff; }
  .geschilderd .gs-omtrek { stroke: #000; opacity: 1; }
  .geschilderd .gs-draad { stroke: #000; }

  .plan-vloer rect { fill: #fff; }

  /* De lijst om het speurdokubord is sfeer en verder niets: op papier is het
     een brede donkere balk die alleen inkt kost. De rij- en kolomaanduiding
     staat erbinnen en blijft dus gewoon staan. */
  .bordrand,
  .bordhoeken,
  .bordschijn,
  .bordhangers { display: none; }

  /* Zonder lijst hoeft het bord ook niet op een blad te liggen. */
  .bordblad { fill: #fff; }
}


/* ===================================================== de wereld als thema
   Zodra er een zaak openstaat, neemt de pagina de kleur van die wereld aan.
   Niet als accentje erbij maar als heel palet: de crème ondergrond wordt
   nacht, de vlakken worden dieper, de tekst draait mee naar licht. Het bord
   zelf blijft licht - dat is bewust, want daar moet je op kunnen lezen en
   schrijven, en een gloed telt alleen op bij donker eromheen.

   De tokens hieronder zijn dezelfde namen als in :root, dus alles wat al
   netjes van de tokens gebruikmaakt kleurt vanzelf mee. */

/* Donker zonder zaak: de voorpagina en de uitleg.
   Hiervoor gold het donker alleen binnen een zaak, omdat de wereld de kleur
   gaf. Nu de speler zelf kiest, moet de hele site mee kunnen - anders klik
   je op "altijd donker" en blijft de voordeur crème. Neutrale inkt, want
   buiten een zaak hoort geen enkele wereld partij te krijgen. */
body[data-thema="donker"] {
  color-scheme: dark;
  --bg: #170e2e; --surface: #22163f; --surface-2: #2c1d52; --surface-3: #392764;
  --line: #4a3683; --line-soft: #30215a;
  --text: #f6f0ff; --text-2: #cbbde8; --text-3: #9888bb;
  --accent: #ff5fa8; --accent-soft: #3a1a44; --accent-ink: #1a0b22;
  --good: #5ff0a8; --bad: #ff7b8b;
  --schaduw-pop: 0 4px 0 rgba(0, 0, 0, 0.35), 0 10px 26px rgba(255, 95, 168, 0.14);
}

/* Licht mét een zaak open.
   Niet acht lichte paletten met de hand, maar één dat de wereldkleur als
   --wkleur meekrijgt (gezet in main.js) en er een vleugje van neemt. Zo
   blijft Regenstad blauwig en het woud groenig, terwijl je op papier leest.
   De tekst houdt bewust de donkere inkt van :root: dat is het contrast
   waar het om begonnen was. */
body[data-thema="licht"][data-wereld] {
  color-scheme: light;
  /* Sterker dan eerst (9% werd 18%): je moet zien in welke wereld je bent.
     Het accent is de wereldkleur zelf, verdiept tot er witte letters op
     kunnen - niet langer een vleugje ervan op roestbruin. */
  --bg: color-mix(in srgb, var(--wkleur, #e8337f) 18%, #fffaf4);
  --surface: color-mix(in srgb, var(--wkleur, #e8337f) 5%, #ffffff);
  --surface-2: color-mix(in srgb, var(--wkleur, #e8337f) 14%, #ffffff);
  --surface-3: color-mix(in srgb, var(--wkleur, #e8337f) 26%, #ffffff);
  --line: color-mix(in srgb, var(--wkleur, #e8337f) 45%, #e5d5f5);
  --line-soft: color-mix(in srgb, var(--wkleur, #e8337f) 22%, #f6f0fb);
  --accent: color-mix(in oklab, var(--wkleur, #e8337f) 62%, #2a1060);
  --accent-soft: color-mix(in srgb, var(--wkleur, #e8337f) 24%, #ffffff);
}

body[data-thema="donker"][data-wereld] {
  color-scheme: dark;
  --surface-3: color-mix(in srgb, var(--surface-2) 70%, #ffffff 8%);
  --line-soft: color-mix(in srgb, var(--line) 60%, var(--bg) 40%);
  --accent-ink: #120d08;
  --good: #6fdc9a;
  --bad: #ff7b6b;
}

/* Nachtbos: diep groen met warm lantaarnlicht. */
body[data-thema="donker"][data-wereld="woud"] {
  --bg: #0c1a13; --surface: #14271c; --surface-2: #1b3324; --line: #2f5338;
  --text: #e9f2de; --text-2: #b4c9a8; --text-3: #7e967a;
  --accent: #ffc168; --accent-soft: #23402a;
}
/* Regenstad: nat asfalt en neon. */
body[data-thema="donker"][data-wereld="noir"] {
  --bg: #0a0f17; --surface: #121b27; --surface-2: #192536; --line: #2c3f58;
  --text: #e2ecf7; --text-2: #a9bed6; --text-3: #74889f;
  --accent: #ff4fa3; --accent-soft: #221a2c;
}
/* Huize Valkenhorst: donker hout bij kaarslicht. */
body[data-thema="donker"][data-wereld="landhuis"] {
  --bg: #15100b; --surface: #211811; --surface-2: #2d2016; --line: #4b3824;
  --text: #f3e7d3; --text-2: #cdb795; --text-3: #94806a;
  --accent: #ffbe63; --accent-soft: #2e2113;
}
/* Ruimtestation Meridiaan: bijna zwart met neon en nevel. */
body[data-thema="donker"][data-wereld="station"] {
  --bg: #070b14; --surface: #0f1726; --surface-2: #162134; --line: #2a3f5e;
  --text: #dff0ff; --text-2: #9fc0dd; --text-3: #6b88a6;
  --accent: #2fd9ff; --accent-soft: #10263a;
}
/* De Catacomben: steen, aarde en kaarsvlam. */
body[data-thema="donker"][data-wereld="catacomben"] {
  --bg: #100d15; --surface: #1a1622; --surface-2: #241f2e; --line: #3c3448;
  --text: #e8e0d2; --text-2: #bcb09e; --text-3: #867c6e;
  --accent: #ffb84d; --accent-soft: #2a2032;
}
/* Academie Morgenstond: sterrennacht en tovenaarspaars. */
body[data-thema="donker"][data-wereld="academie"] {
  --bg: #0c0a1b; --surface: #15122a; --surface-2: #1d1938; --line: #342c58;
  --text: #e8e2ff; --text-2: #b7aede; --text-3: #817aa8;
  --accent: #b58cff; --accent-soft: #221c3e;
}
/* Kerstavond: dennengroen met gekleurde lampjes. */
body[data-thema="donker"][data-wereld="kerst"] {
  --bg: #091710; --surface: #11241a; --surface-2: #173022; --line: #2b5038;
  --text: #ecf5ec; --text-2: #b6cdb9; --text-3: #7e9a84;
  --accent: #ff6b6b; --accent-soft: #2a1d1d;
}
/* Halloweennacht: pompoenoranje tegen paarsbruin. */
body[data-thema="donker"][data-wereld="halloween"] {
  --bg: #130b11; --surface: #1f141c; --surface-2: #2a1b25; --line: #44293a;
  --text: #f4e6da; --text-2: #c9ab9c; --text-3: #917a70;
  --accent: #ff8a1f; --accent-soft: #2c1a14;
}

/* Het Rietveld College: schemer buiten, tl binnen. */
body[data-thema="donker"][data-wereld="school"] {
  --bg: #0b1218; --surface: #121c25; --surface-2: #1a2834; --line: #2c4254;
  --text: #e3eef5; --text-2: #a9c2d2; --text-3: #74909f;
  --accent: #ffd166; --accent-soft: #1f2a33;
}
/* Sint-Joris: nachtgroen vinyl en één lamp die aanblijft. */
body[data-thema="donker"][data-wereld="ziekenhuis"] {
  --bg: #08130f; --surface: #0f1f1a; --surface-2: #152b24; --line: #26473c;
  --text: #e2f2ec; --text-2: #a5c9bd; --text-3: #6f8f85;
  --accent: #49e0b4; --accent-soft: #0f2a22;
}
/* De Spiegeltoren: glas, nacht, en het blauwe schijnsel van een scherm. */
body[data-thema="donker"][data-wereld="kantoor"] {
  --bg: #0c0c14; --surface: #15151f; --surface-2: #1d1d2b; --line: #343447;
  --text: #e9e8f2; --text-2: #b2b0c6; --text-3: #7d7b92;
  --accent: #a78bfa; --accent-soft: #1f1b30;
}

/* Het Openluchtbad: chloorblauw en wit, ook in het donker nog zomers. */
body[data-thema="donker"][data-wereld="zwembad"] {
  --bg: #07161c; --surface: #0e2229; --surface-2: #142e38; --line: #245263;
  --text: #ddf2f8; --text-2: #a2c9d6; --text-3: #6f93a0;
  --accent: #3fd0f0; --accent-soft: #0f2c38;
}
/* Dierenpark De Wildhoek: bladgroen en zand. */
body[data-thema="donker"][data-wereld="dierentuin"] {
  --bg: #0b1409; --surface: #142010; --surface-2: #1c2d16; --line: #2f4a26;
  --text: #e8f3e0; --text-2: #b4caa6; --text-3: #7f9a74;
  --accent: #9ede6a; --accent-soft: #1b2c14;
}

/* Wat er in het donker nog bijgeregeld moet worden. */
body[data-thema="donker"] .kop,
body[data-thema="donker"] header { background: color-mix(in srgb, var(--surface) 86%, transparent); }
body[data-thema="donker"] .btn { border-color: var(--line); }
body[data-thema="donker"] .btn-hoofd { color: #120d08; }
body[data-thema="donker"] .inleiding { border-left-color: var(--accent); }
/* De namen op het bord en de legenda houden hun eigen licht; het bord is
   met opzet geen onderdeel van het thema. */
body[data-thema="donker"] .kamerbord,
body[data-thema="donker"] .legenda-tegel { color: initial; }

/* De sfeertekening boven de puzzel hoort bij de wereld, dus die draait mee
   naar nacht. De lagen keren om: in daglicht is de verste laag het lichtst
   omdat hij in de nevel staat, 's nachts is hij dat ook - maar dan omdat de
   lucht erachter oplicht en de voorgrond zwart is. Elk lichtpunt krijgt de
   kleur van de wereld, want dat is het enige warme in het beeld. */
body[data-thema="donker"] {
  --sc-ver-top: color-mix(in srgb, var(--line) 62%, var(--bg));
  --sc-ver-voet: color-mix(in srgb, var(--line) 88%, var(--bg));
  --sc-mid-top: color-mix(in srgb, var(--line) 40%, var(--bg));
  --sc-mid-voet: color-mix(in srgb, var(--line) 62%, var(--bg));
  --sc-near-top: color-mix(in srgb, var(--line) 18%, var(--bg));
  --sc-near-voet: color-mix(in srgb, var(--line) 36%, var(--bg));
  --sc-diep-top: color-mix(in srgb, var(--bg) 88%, #000000);
  --sc-diep-voet: color-mix(in srgb, var(--bg) 72%, #000000);
  --sc-grond-top: color-mix(in srgb, var(--bg) 96%, #000000);
  --sc-grond-voet: color-mix(in srgb, var(--bg) 84%, #000000);
  --sc-boom-top: color-mix(in srgb, var(--line) 24%, var(--bg));
  --sc-boom-voet: color-mix(in srgb, var(--line) 42%, var(--bg));
  --sc-nevel: var(--accent);
}
body[data-thema="donker"] .sc-deur { fill: color-mix(in srgb, var(--bg) 80%, #000000); }

body[data-thema="donker"] .sc-planeet { fill: color-mix(in srgb, var(--line) 70%, var(--bg)); }
body[data-thema="donker"] .sc-horizon { stroke: color-mix(in srgb, var(--line) 60%, var(--bg)); }
body[data-thema="donker"] .sc-lijn { stroke: color-mix(in srgb, var(--line) 40%, var(--bg)); }
body[data-thema="donker"] .sc-nat { fill: color-mix(in srgb, var(--bg) 70%, var(--accent) 10%); }

body[data-thema="donker"] .sc-takken { stroke: color-mix(in srgb, var(--bg) 60%, #000000); }
body[data-thema="donker"] .sc-mist { fill: var(--accent); opacity: 0.1; }
body[data-thema="donker"] .sc-ster { fill: #f2f6ff; }
body[data-thema="donker"] .sc-maan { fill: #fff8e4; }
body[data-thema="donker"] .sc-sneeuw { fill: #ffffff; opacity: 0.9; }
body[data-thema="donker"] .sc-regenlijn { stroke: color-mix(in srgb, var(--accent) 50%, #ffffff); opacity: 0.35; }
body[data-thema="donker"] .sc-raam,
body[data-thema="donker"] .sc-licht { fill: var(--accent); }
body[data-thema="donker"] .sc-schijn,
body[data-thema="donker"] .sc-weerschijn { fill: var(--accent); opacity: 0.35; }
body[data-thema="donker"] .sc-pompoen { fill: var(--accent); }

/* De tekening loopt in de pagina over in plaats van ertegenaan te stoppen. */
body[data-thema="donker"] .scene-wrap::after {
  background: linear-gradient(to bottom, transparent, var(--bg));
}

/* Het slachtoffer: dezelfde figuur als de anderen, met een kruis erdoorheen.
   Rood en dik, zodat het niet te verwarren is met de donkere kruisjes
   waarmee je zelf vakjes wegstreept. */
.lijkbaan { fill: none; stroke: #fff6e4; stroke-width: 5; stroke-linecap: round; opacity: 0.5; }
.lijkkruis { fill: none; stroke: #9c1f23; stroke-width: 2.8; stroke-linecap: round; opacity: 0.95; }
.palet-lijk .lijkbaan { stroke-width: 4.5; }
.palet-lijk .lijkkruis { stroke-width: 3.4; }

/* De muren horen net zo goed bij de wereld als de vloer en het meubilair.
   Deze klassen stonden vast op warm hout, en daardoor liepen er houten
   balken door een ruimtestation en door een crypte. De werelden die in een
   huis spelen - landhuis, Regenstad, kerst, halloween, academie - houden het
   hout; de drie die dat niet doen krijgen hun eigen materiaal. */
body[data-wereld="station"] .muurvoet,
body[data-wereld="station"] .buitenmuur-voet { stroke: #28313c; }
body[data-wereld="station"] .muurtop,
body[data-wereld="station"] .buitenmuur-top { stroke: #74828f; }
body[data-wereld="station"] .muurglans { stroke: #bccbd6; }
body[data-wereld="station"] .muurnerf { stroke: rgba(30, 44, 58, 0.4); }
body[data-wereld="station"] .muur { stroke: #5d6a76; }
body[data-wereld="station"] .muur-buiten { stroke: #38434f; }

body[data-wereld="catacomben"] .muurvoet,
body[data-wereld="catacomben"] .buitenmuur-voet { stroke: #2c2730; }
body[data-wereld="catacomben"] .muurtop,
body[data-wereld="catacomben"] .buitenmuur-top { stroke: #837e74; }
body[data-wereld="catacomben"] .muurglans { stroke: #b0aa9c; }
body[data-wereld="catacomben"] .muurnerf { stroke: rgba(40, 34, 44, 0.4); }
body[data-wereld="catacomben"] .muur { stroke: #6d675e; }
body[data-wereld="catacomben"] .muur-buiten { stroke: #413c39; }

/* Een school, een ziekenhuis en een kantoortoren hebben geen eikenhouten
   binnenmuren. Zonder deze regels staat er geschilderd steen naast een
   lambrisering, en dan is het hele thema voor niets. */
body[data-wereld="zwembad"] .muurvoet,
body[data-wereld="zwembad"] .buitenmuur-voet { stroke: #2b4a52; }
body[data-wereld="zwembad"] .muurtop,
body[data-wereld="zwembad"] .buitenmuur-top { stroke: #a8c8cf; }
body[data-wereld="zwembad"] .muurglans { stroke: #e4f3f6; }
body[data-wereld="zwembad"] .muurnerf { stroke: rgba(34, 58, 64, 0.26); }
body[data-wereld="zwembad"] .muur { stroke: #86a7ae; }
body[data-wereld="zwembad"] .muur-buiten { stroke: #3c5e66; }

body[data-wereld="dierentuin"] .muurvoet,
body[data-wereld="dierentuin"] .buitenmuur-voet { stroke: #43361f; }
body[data-wereld="dierentuin"] .muurtop,
body[data-wereld="dierentuin"] .buitenmuur-top { stroke: #c9a76c; }
body[data-wereld="dierentuin"] .muurglans { stroke: #e8d4a8; }
body[data-wereld="dierentuin"] .muurnerf { stroke: rgba(58, 44, 24, 0.3); }
body[data-wereld="dierentuin"] .muur { stroke: #a2874f; }
body[data-wereld="dierentuin"] .muur-buiten { stroke: #5a4728; }

body[data-wereld="school"] .muurvoet,
body[data-wereld="school"] .buitenmuur-voet { stroke: #2d3a42; }
body[data-wereld="school"] .muurtop,
body[data-wereld="school"] .buitenmuur-top { stroke: #8fa3ab; }
body[data-wereld="school"] .muurglans { stroke: #cfdde2; }
body[data-wereld="school"] .muurnerf { stroke: rgba(36, 50, 58, 0.34); }
body[data-wereld="school"] .muur { stroke: #6f8089; }
body[data-wereld="school"] .muur-buiten { stroke: #3e4d55; }

body[data-wereld="ziekenhuis"] .muurvoet,
body[data-wereld="ziekenhuis"] .buitenmuur-voet { stroke: #2b3b36; }
body[data-wereld="ziekenhuis"] .muurtop,
body[data-wereld="ziekenhuis"] .buitenmuur-top { stroke: #9db8ae; }
body[data-wereld="ziekenhuis"] .muurglans { stroke: #dceee6; }
body[data-wereld="ziekenhuis"] .muurnerf { stroke: rgba(34, 52, 46, 0.3); }
body[data-wereld="ziekenhuis"] .muur { stroke: #7b958c; }
body[data-wereld="ziekenhuis"] .muur-buiten { stroke: #3c514a; }

body[data-wereld="kantoor"] .muurvoet,
body[data-wereld="kantoor"] .buitenmuur-voet { stroke: #30313c; }
body[data-wereld="kantoor"] .muurtop,
body[data-wereld="kantoor"] .buitenmuur-top { stroke: #9a9cab; }
body[data-wereld="kantoor"] .muurglans { stroke: #d8dae6; }
body[data-wereld="kantoor"] .muurnerf { stroke: rgba(40, 41, 54, 0.3); }
body[data-wereld="kantoor"] .muur { stroke: #7c7e8e; }
body[data-wereld="kantoor"] .muur-buiten { stroke: #42434f; }

body[data-wereld="woud"] .muurvoet,
body[data-wereld="woud"] .buitenmuur-voet { stroke: #26281a; }
body[data-wereld="woud"] .muurtop,
body[data-wereld="woud"] .buitenmuur-top { stroke: #76834f; }
body[data-wereld="woud"] .muurglans { stroke: #aec280; }
body[data-wereld="woud"] .muurnerf { stroke: rgba(40, 44, 24, 0.42); }
body[data-wereld="woud"] .muur { stroke: #5f6a44; }
body[data-wereld="woud"] .muur-buiten { stroke: #39412a; }

/* Het licht in een kamer. Warm kaarslicht is de standaard - dat klopt voor
   een landhuis, een detectiveverhaal, een kerstavond - maar niet overal:
   een warme gloed over een stalen vloer maakt er weer hout van. */
.gloedkern { stop-color: #fff3d2; }
.gloedmid { stop-color: #ffe9b8; }
.gloedrand { stop-color: #2e2112; }
body[data-wereld="station"] .gloedkern { stop-color: #e4f6ff; }
body[data-wereld="station"] .gloedmid { stop-color: #bfe4f6; }
body[data-wereld="station"] .gloedrand { stop-color: #101a28; }
body[data-wereld="catacomben"] .gloedkern { stop-color: #ffe9c0; }
body[data-wereld="catacomben"] .gloedmid { stop-color: #d9c8a8; }
body[data-wereld="catacomben"] .gloedrand { stop-color: #1a1620; }
body[data-wereld="woud"] .gloedkern { stop-color: #f0ffd8; }
body[data-wereld="woud"] .gloedmid { stop-color: #cfe9ac; }
body[data-wereld="woud"] .gloedrand { stop-color: #16281a; }
body[data-wereld="kerst"] .gloedkern { stop-color: #fff0cf; }
body[data-wereld="kerst"] .gloedmid { stop-color: #dcecf4; }
body[data-wereld="kerst"] .gloedrand { stop-color: #16282c; }
body[data-wereld="academie"] .gloedkern { stop-color: #f4ecff; }
body[data-wereld="academie"] .gloedmid { stop-color: #d8cdf2; }
body[data-wereld="academie"] .gloedrand { stop-color: #191432; }
body[data-wereld="school"] .gloedkern { stop-color: #fff6da; }
body[data-wereld="school"] .gloedmid { stop-color: #d9e6f0; }
body[data-wereld="school"] .gloedrand { stop-color: #16222c; }
body[data-wereld="ziekenhuis"] .gloedkern { stop-color: #eafff8; }
body[data-wereld="ziekenhuis"] .gloedmid { stop-color: #bfe8da; }
body[data-wereld="ziekenhuis"] .gloedrand { stop-color: #12241e; }
body[data-wereld="zwembad"] .gloedkern { stop-color: #f0fcff; }
body[data-wereld="zwembad"] .gloedmid { stop-color: #c6e9f4; }
body[data-wereld="zwembad"] .gloedrand { stop-color: #12303a; }
body[data-wereld="dierentuin"] .gloedkern { stop-color: #f6ffe8; }
body[data-wereld="dierentuin"] .gloedmid { stop-color: #d2e8b4; }
body[data-wereld="dierentuin"] .gloedrand { stop-color: #16240f; }
body[data-wereld="kantoor"] .gloedkern { stop-color: #f2eeff; }
body[data-wereld="kantoor"] .gloedmid { stop-color: #cfd2ef; }
body[data-wereld="kantoor"] .gloedrand { stop-color: #16182a; }


/* Sterrenschip Zwaluw: violet staal en het licht van de ledstrips. */
body[data-thema="donker"][data-wereld="ruimteschip"] {
  --bg: #0b0718; --surface: #140e27; --surface-2: #1c1436; --line: #3a2a68;
  --text: #f0e8ff; --text-2: #c2b2e8; --text-3: #8a7cb0;
  --accent: #c77dff; --accent-soft: #24183f;
}
body[data-wereld="ruimteschip"] .muurvoet,
body[data-wereld="ruimteschip"] .buitenmuur-voet { stroke: #231a40; }
body[data-wereld="ruimteschip"] .muurtop,
body[data-wereld="ruimteschip"] .buitenmuur-top { stroke: #8a78c8; }
body[data-wereld="ruimteschip"] .muurglans { stroke: #e2a6ff; }
body[data-wereld="ruimteschip"] .muurnerf { stroke: rgba(28, 20, 56, 0.4); }
body[data-wereld="ruimteschip"] .muur { stroke: #5c4c94; }
body[data-wereld="ruimteschip"] .muur-buiten { stroke: #2e2452; }
body[data-wereld="ruimteschip"] .gloedkern { stop-color: #f6eaff; }
body[data-wereld="ruimteschip"] .gloedmid { stop-color: #d8c2f6; }
body[data-wereld="ruimteschip"] .gloedrand { stop-color: #160f2c; }

/* Hoogstad: schemerpaars met het oranje van verlichte ramen. */
body[data-thema="donker"][data-wereld="stad"] {
  --bg: #100b1a; --surface: #191226; --surface-2: #221934; --line: #3e2f58;
  --text: #f6ecf4; --text-2: #cdb8cf; --text-3: #94809a;
  --accent: #ff8a5c; --accent-soft: #2e1a24;
}
body[data-wereld="stad"] .muurvoet,
body[data-wereld="stad"] .buitenmuur-voet { stroke: #2a2434; }
body[data-wereld="stad"] .muurtop,
body[data-wereld="stad"] .buitenmuur-top { stroke: #a49bb2; }
body[data-wereld="stad"] .muurglans { stroke: #e4dcef; }
body[data-wereld="stad"] .muurnerf { stroke: rgba(36, 30, 48, 0.32); }
body[data-wereld="stad"] .muur { stroke: #807790; }
body[data-wereld="stad"] .muur-buiten { stroke: #403850; }
body[data-wereld="stad"] .gloedkern { stop-color: #fff2de; }
body[data-wereld="stad"] .gloedmid { stop-color: #f2d6c2; }
body[data-wereld="stad"] .gloedrand { stop-color: #20161e; }

/* Escaperoom Klokslag: donker groenblauw, met het groen van de uitgang. */
body[data-thema="donker"][data-wereld="escaperoom"] {
  --bg: #061312; --surface: #0c1e1c; --surface-2: #122a27; --line: #22483f;
  --text: #defaf0; --text-2: #a2d2c4; --text-3: #6c968a;
  --accent: #2fe0b4; --accent-soft: #0e2c27;
}
body[data-wereld="escaperoom"] .muurvoet,
body[data-wereld="escaperoom"] .buitenmuur-voet { stroke: #18292b; }
body[data-wereld="escaperoom"] .muurtop,
body[data-wereld="escaperoom"] .buitenmuur-top { stroke: #6f9a94; }
body[data-wereld="escaperoom"] .muurglans { stroke: #9dffe0; }
body[data-wereld="escaperoom"] .muurnerf { stroke: rgba(20, 40, 40, 0.4); }
body[data-wereld="escaperoom"] .muur { stroke: #4f7570; }
body[data-wereld="escaperoom"] .muur-buiten { stroke: #263e3c; }
body[data-wereld="escaperoom"] .gloedkern { stop-color: #e8fff8; }
body[data-wereld="escaperoom"] .gloedmid { stop-color: #bdeee0; }
body[data-wereld="escaperoom"] .gloedrand { stop-color: #0e2220; }

/* Pretpark Zonnestraal: zonnegeel en suikerspinroze, ook in het donker. */
body[data-thema="donker"][data-wereld="pretpark"] {
  --bg: #17110a; --surface: #221a10; --surface-2: #2e2416; --line: #5a4428;
  --text: #fff4e2; --text-2: #e2caa6; --text-3: #a88e6e;
  --accent: #ffb020; --accent-soft: #3a2a12;
}
body[data-wereld="pretpark"] .muurvoet,
body[data-wereld="pretpark"] .buitenmuur-voet { stroke: #4a3a22; }
body[data-wereld="pretpark"] .muurtop,
body[data-wereld="pretpark"] .buitenmuur-top { stroke: #ffd27a; }
body[data-wereld="pretpark"] .muurglans { stroke: #fff2c8; }
body[data-wereld="pretpark"] .muurnerf { stroke: rgba(74, 52, 24, 0.3); }
body[data-wereld="pretpark"] .muur { stroke: #e8a13c; }
body[data-wereld="pretpark"] .muur-buiten { stroke: #8a5a20; }
body[data-wereld="pretpark"] .gloedkern { stop-color: #fffbe8; }
body[data-wereld="pretpark"] .gloedmid { stop-color: #fff0c4; }
body[data-wereld="pretpark"] .gloedrand { stop-color: #2a2010; }

/* ------------------------------------------------------------- themaknop
   Eén knop in de kop die door drie standen loopt. Met een "A" ernaast als
   hij het apparaat volgt, zodat je ziet dat je zelf niets hebt gekozen. */
.themaknop {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-2);
  border-radius: 999px;
  cursor: pointer;
  font: 600 var(--t-sm)/1 var(--sans);
  padding: 7px 11px;
  min-width: 38px;
  letter-spacing: 0.02em;
}
.themaknop:hover { color: var(--text); border-color: var(--accent); }
.themaknop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.themaknop[data-stand="vanzelf"] { color: var(--text-3); }

@media print {
  .themaknop { display: none; }
  .palet { position: static; }
}


/* ------------------------------------------- aanwijzingen per naam
   Een lijst van vierenvijftig zinnen onder elkaar is niet te overzien. Per
   naam gegroepeerd zoek je terug wat er over iemand gezegd is, en zie je in
   één oogopslag over wie er weinig bekend is. */
.clue-groep { margin-bottom: var(--s4); }
.clue-kop {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin: 0 0 var(--s1);
  padding-bottom: var(--s1);
  border-bottom: 1px solid var(--line-soft);
}
.clue-kop-naam {
  font: 600 var(--t-sm)/1.4 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}
.clue-kop-merk { font-size: var(--t-xs); color: var(--text-3); font-style: italic; }
.clue-ook {
  margin: var(--s1) 0 0;
  font-size: var(--t-xs);
  color: var(--text-3);
}

/* Een naam waar niets over gezegd wordt. Die staat er nu wel, want anders
   mist er een naam in de lijst en dat leest als een fout. Hij is wel
   zichtbaar anders: gedempt en schuin, zodat je ziet dat hier geen
   aanwijzing staat maar een mededeling. */
.clue-leeg {
  margin: var(--s1) 0 0;
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--text-3);
  border-left: 2px solid var(--line-soft);
  padding-left: var(--s3);
}
.clue-groep-leeg .clue-kop-naam { color: var(--text-3); }


/* ----------------------------------------------- de niveaukiezer op de voordeur
   Dezelfde knoppen als in de generator, maar dan als enige keuze op de
   voorpagina - want dit is sinds kort het enige wat je nog kiest. */
.niveaukiezer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--s2);
  margin: var(--s2) 0 var(--s4);
}
.btn-groot { font-size: var(--t-md); padding: var(--s3) var(--s5); }


/* ---------------------------------------------------- panelen met een klepje
   De legenda en de aanwijzingen zitten achter een kop waar je op klikt. Niet
   om ze te verstoppen, maar omdat je ze niet allebei tegelijk nodig hebt -
   en op een telefoon scheelt een dichtgeklapte legenda een heel scherm. Wat
   je openlaat blijft open bij de volgende puzzel (zie paneelOpen). */
.paneel {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  margin-top: var(--s4);
}
.paneel > summary {
  cursor: pointer;
  padding: var(--s3) var(--s4);
  font: 600 var(--t-sm)/1.4 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}
.paneel > summary::-webkit-details-marker { display: none; }
.paneel > summary::before {
  content: "▸";
  font-size: 0.8em;
  color: var(--text-3);
  transition: transform 0.12s ease;
}
.paneel[open] > summary::before { transform: rotate(90deg); }
.paneel > summary:hover { color: var(--text); }
.paneel-binnen { padding: 0 var(--s4) var(--s4); }
.paneel-binnen > .legenda { margin-top: 0; }

@media print {
  .paneel > summary::before { display: none; }
  .paneel-binnen { display: block !important; }
}


/* De zelfgemaakte puzzels onder de vaste zaken van hetzelfde niveau. Ze
   staan als regels en niet als kaarten: ze hebben geen titel en geen
   omslag, alleen een decor en hoe ver je bent. */
.eigen-kop { margin: var(--s5) 0 var(--s2); }


/* ------------------------------------------------ schakelaars in het palet
   Naast Uitsluiten en Schetsen, maar met opzet anders van vorm. Die twee
   zijn standen: er staat er altijd één aan en ze bepalen wat een klik op
   het bord doet. Deze twee veranderen niets aan je klik, ze zetten iets
   aan of uit. Daarom een streepje ertussen, rechte hoeken in plaats van
   rond, en het woord 'aan' of 'uit' in de knop zelf. */
/* De twee schakelaars staan sinds kort onder het bord en niet meer in de
   plakkende balk: op een telefoon braken hun teksten daar over drie regels,
   en de balk dekte samen met de kop een kwart van het scherm af. Zie
   bordschakelaars() in player.js. */
.bordschakelaars {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  /* Dicht tegen het bord aan: ze horen erbij, en de rij eronder is de
     legenda - die mag wel op afstand staan. */
  margin: calc(var(--s4) * -1) 0 0;
}
.bordschakelaars .palet-schakel { white-space: nowrap; }

.palet-schakel {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-3);
  border-radius: var(--r-sm);
  padding: 5px var(--s2) 5px var(--s3);
  font-size: var(--t-xs);
  cursor: pointer;
}
.palet-schakel:hover { color: var(--text-2); border-color: var(--text-3); }
.palet-schakel-stand {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 1px 5px;
  background: var(--surface-3);
  color: var(--text-3);
}
.palet-schakel[aria-pressed='true'] { color: var(--text-2); border-color: var(--line); }
.palet-schakel[aria-pressed='true'] .palet-schakel-stand {
  background: var(--accent);
  color: var(--accent-ink);
}
/* Op een telefoon vullen ze samen de breedte, zodat ze even groot zijn en
   je ze niet hoeft te mikken. */
@media (max-width: 680px) {
  .bordschakelaars .palet-schakel { flex: 1 1 0; justify-content: space-between; }
}


/* Rimpels in het water. Dunner en lichter dan een voeg: het is beweging,
   geen naad. */
.dessinrimpel { fill: none; stroke: #ffffff; stroke-width: 1.1; opacity: 0.34; }


/* =================================================== vrolijk aangekleed
   De laag die er op 2026-11-10 bij kwam (specs/visual-liveliness.md). Alles
   hieronder is versiering bovenop de tokens: kleurvlekken in de achtergrond,
   een regenboogstreep onder de kop, knoppen die je wilt indrukken, en per
   moeilijkheidsgraad een eigen kleur. Geen plaatjes - alleen css. Staat het
   in de weg, dan is dit blok de plek om het weer weg te halen. */

/* Zachte kleurvlekken achter de hele pagina. Vast aan het venster, zodat
   ze niet meescrollen en de tekst er nooit half overheen valt. */
body {
  background:
    radial-gradient(42rem 30rem at 8% -6%, color-mix(in srgb, var(--pop-1) 16%, transparent), transparent 70%),
    radial-gradient(36rem 28rem at 96% 8%, color-mix(in srgb, var(--pop-5) 14%, transparent), transparent 70%),
    radial-gradient(40rem 32rem at 70% 104%, color-mix(in srgb, var(--pop-3) 18%, transparent), transparent 70%),
    radial-gradient(30rem 26rem at 0% 80%, color-mix(in srgb, var(--pop-4) 12%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
/* In een zaak doet de wereldkleur het werk; de vlekken nemen die kleur aan. */
body[data-wereld] {
  background:
    radial-gradient(44rem 30rem at 6% -8%, color-mix(in srgb, var(--wkleur, var(--pop-1)) 30%, transparent), transparent 70%),
    radial-gradient(36rem 28rem at 100% 30%, color-mix(in srgb, var(--pop-1) 9%, transparent), transparent 70%),
    radial-gradient(40rem 30rem at 50% 110%, color-mix(in srgb, var(--wkleur, var(--pop-3)) 22%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}

/* ------------------------------------------------------------------ kop */
.top {
  border-bottom: 0;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: 0 6px 20px rgba(42, 27, 61, 0.06);
}
.top::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--regenboog);
}
.brand { font-size: var(--t-lg); font-weight: 700; }
.brand-text {
  background: linear-gradient(90deg, var(--pop-1), var(--pop-6) 60%, var(--pop-5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-mark {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--pop-1), var(--pop-2));
  color: #fff;
  transform: rotate(-6deg);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--pop-1) 60%, #2a1b3d);
}
.nav { gap: var(--s2); align-items: center; }
.nav a {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-base);
  border-radius: 999px;
  padding: 7px 14px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.nav a:hover { transform: translateY(-1px); background: var(--accent-soft); color: var(--accent); }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }

/* ---------------------------------------------------------------- tekst */
h1 { font-weight: 700; }
.markeer {
  background: linear-gradient(100deg, var(--pop-1), var(--pop-6) 55%, var(--pop-5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.eyebrow {
  display: inline-block;
  font-family: var(--display);
  letter-spacing: 0.08em;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 4px 12px;
  border-radius: 999px;
  transform: rotate(-2deg);
}
.section-head { border-bottom: 0; position: relative; }
.section-head::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 88px; height: 5px;
  border-radius: 99px;
  background: var(--regenboog);
}
.hero { border-bottom: 0; }

/* -------------------------------------------------------------- knoppen */
.btn {
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--surface);
  font-family: var(--display);
  font-weight: 600;
  box-shadow: 0 3px 0 var(--line);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--accent); background: var(--surface); box-shadow: 0 5px 0 color-mix(in srgb, var(--accent) 45%, var(--line)); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.btn-primary {
  border: 0;
  background: linear-gradient(100deg, var(--pop-1), var(--pop-2));
  color: #fff;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--pop-1) 55%, #2a1b3d), 0 10px 22px color-mix(in srgb, var(--pop-1) 30%, transparent);
  text-shadow: 0 1px 0 rgba(120, 20, 60, 0.25);
}
.btn-primary:hover {
  background: linear-gradient(100deg, #ff5fa8, #ffae3c);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--pop-1) 55%, #2a1b3d), 0 14px 26px color-mix(in srgb, var(--pop-1) 34%, transparent);
}
/* In een zaak is de grote knop in de kleur van de wereld. */
body[data-wereld] .btn-primary {
  background: var(--accent);
  box-shadow: 0 4px 0 color-mix(in oklab, var(--accent) 60%, #000);
}
.btn[disabled]:hover { transform: none; }

.themaknop { border-width: 2px; font-size: var(--t-md); padding: 6px 11px; }

/* ----------------------------------------------- niveaus: elk zijn kleur */
.niveaukiezer .level-btn:nth-child(6n+1) { --kleur: var(--pop-4); }
.niveaukiezer .level-btn:nth-child(6n+2) { --kleur: var(--pop-5); }
.niveaukiezer .level-btn:nth-child(6n+3) { --kleur: var(--pop-6); }
.niveaukiezer .level-btn:nth-child(6n+4) { --kleur: var(--pop-1); }
.niveaukiezer .level-btn:nth-child(6n+5) { --kleur: var(--pop-2); }
.niveaukiezer .level-btn:nth-child(6n+6) { --kleur: #e0281f; }

.opt {
  border: 2px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 3px 0 var(--line);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
.opt:hover { transform: translateY(-3px) rotate(-0.6deg); border-color: var(--kleur, var(--accent)); box-shadow: 0 6px 0 color-mix(in srgb, var(--kleur, var(--accent)) 40%, var(--line)); }
.opt[aria-pressed="true"] {
  border-color: var(--kleur, var(--accent));
  background: color-mix(in srgb, var(--kleur, var(--accent)) 14%, var(--surface));
  box-shadow: 0 4px 0 var(--kleur, var(--accent));
}
.level-btn b {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--kleur, var(--accent));
  color: #fff;
  font-size: var(--t-base);
  margin-top: -2px;
}
.level-btn .mini-figuur { fill: var(--kleur, var(--accent)); }
.level-btn[aria-pressed="true"] .mini-vloer { fill: color-mix(in srgb, var(--kleur, var(--accent)) 22%, var(--surface)); }

/* ------------------------------------------------- de plattegrond op tafel */
.hero-bord-label { background: var(--pop-3); border: 0; color: #2a1b3d; }
.hero-bord::before {
  /* Een plakbandje op de hoek: het bord ligt op tafel, iemand heeft het
     vastgeplakt. */
  content: "";
  position: absolute;
  z-index: 2;
  top: 10%;
  left: 2%;
  width: 92px; height: 26px;
  background: color-mix(in srgb, var(--pop-3) 70%, transparent);
  transform: rotate(-32deg);
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* ------------------------------------------------------------ stappen */
.step {
  background: var(--surface);
  border: 2px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: var(--s5);
  box-shadow: var(--schaduw-pop);
}
.step:nth-child(3n+1) { --kleur: var(--pop-1); }
.step:nth-child(3n+2) { --kleur: var(--pop-4); }
.step:nth-child(3n+3) { --kleur: var(--pop-6); }
.step { border-top: 6px solid var(--kleur); }
.step-n {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: var(--kleur);
  color: #fff;
  font: 700 var(--t-lg)/1 var(--display);
  transform: rotate(-6deg);
}
.step h3 { font-family: var(--display); font-size: var(--t-md); }

/* -------------------------------------------------------- bibliotheek */
.kaart {
  border: 3px solid color-mix(in srgb, var(--genre, var(--accent)) 55%, var(--surface));
  box-shadow: 0 5px 0 color-mix(in srgb, var(--genre, var(--accent)) 45%, var(--line));
}
.kaart:nth-child(odd):hover { transform: translateY(-4px) rotate(-1deg); }
.kaart:nth-child(even):hover { transform: translateY(-4px) rotate(1deg); }
.kaart:hover {
  border-color: var(--genre, var(--accent));
  box-shadow: 0 9px 0 color-mix(in srgb, var(--genre, var(--accent)) 55%, var(--line)), 0 18px 30px color-mix(in srgb, var(--genre, var(--accent)) 25%, transparent);
}
.kaart-merk { border-color: var(--genre, var(--accent)); background: var(--genre, var(--accent)); color: #fff; }
.kaart-titel { font-size: var(--t-lg); font-weight: 700; }
.kaart-stempel { border-color: var(--good); color: var(--good); }
.dot { width: 8px; height: 8px; }
.dot.on { background: var(--genre, var(--accent)); }
select, input[type="text"] { border-radius: 999px; border-width: 2px; }

/* ------------------------------------------------------- in een zaak */
.scene-wrap { height: 170px; }
.scene-wrap .scene { height: 170px; }
.puzzle-head h1 { font-size: var(--t-2xl); }
.crumbs a {
  background: var(--surface);
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--line-soft);
}
.intro {
  background: var(--surface);
  border-left: 0;
  border-radius: var(--r-lg);
  padding: var(--s4) var(--s5);
  box-shadow: var(--schaduw-pop);
  position: relative;
}
.intro::before {
  /* Een stift langs de rand, in de kleur van de wereld. */
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 6px;
  border-radius: 0 6px 6px 0;
  background: var(--accent);
}
.question {
  border: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--accent-soft);
  box-shadow: 0 4px 0 color-mix(in oklab, var(--accent) 55%, #000);
  padding: var(--s4) var(--s5);
}
.question::before { content: "🔍"; font-size: 1.3em; }
.question .label { color: var(--accent); }
.question b { font-size: var(--t-lg); font-weight: 700; }
.spelregels { border-radius: var(--r-lg); border-width: 2px; }

/* De namenbalk: dikke, ronde fiches om op te pakken. */
.palet { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); }
.palet-knop {
  border-width: 2px;
  font-family: var(--display);
  font-weight: 600;
  box-shadow: 0 2px 0 var(--line);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.palet-knop:hover { transform: translateY(-2px); border-color: var(--accent); }
.palet-knop[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 3px 0 color-mix(in oklab, var(--accent) 55%, #000);
}
.palet-knop[aria-pressed="true"] .palet-fiche { background: rgba(255, 255, 255, 0.3); color: #fff; }

/* Panelen en aanwijzingen. */
.paneel {
  border-width: 2px;
  border-radius: var(--r-lg);
  box-shadow: 0 3px 0 var(--line);
  overflow: hidden;
}
.paneel > summary { font-family: var(--display); letter-spacing: 0.02em; color: var(--text); }
.paneel > summary::before { color: var(--accent); }
.paneel[open] > summary { background: var(--accent-soft); }
.clue-kop-naam {
  display: inline-block;
  font-family: var(--display);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
  padding: 1px 10px;
}
.clue-kop { border-bottom: 0; }
.clue { border-radius: var(--r-sm); border-bottom-color: transparent; }
.clue:hover { background: var(--accent-soft); }
.clue-n { color: var(--accent); font-weight: 700; }
.note { border-width: 2px; border-radius: var(--r); font-weight: 600; }
.note-good { background: color-mix(in srgb, var(--good) 12%, var(--surface)); }
.note-good::before { content: "🎉 "; }
.note-bad { background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.palet-schakel { border-radius: 999px; border-width: 2px; }
.palet-schakel-stand { border-radius: 99px; }

/* ----------------------------------------------------------------- voet */
.foot { border-top: 0; position: relative; color: var(--text-2); }
.foot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--regenboog);
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .opt, .kaart, .palet-knop, .nav a { transition: none; }
}

@media print {
  body, body[data-wereld] { background: #fff; }
  .top::after, .foot::before, .question::before, .hero-bord::before, .intro::before { display: none; }
  .intro, .question, .step, .paneel { box-shadow: none; }
}

/* Op een telefoon plakt de kop niet (zie hoger); de regenboogstreep moet dan
   toch aan de kop hangen en niet aan de pagina. */
@media (max-width: 640px) {
  .top { position: relative; }
  .brand { font-size: var(--t-md); }
  /* De ronde menuknoppen zijn breder dan de oude; op 375 pixels duwden ze
     de themaknop van het scherm. Kleiner, en de themaknop rechts vast. */
  .nav { gap: 2px; justify-content: space-between; }
  .nav a { font-size: var(--t-sm); padding: 6px 9px; }
  .puzzle-head h1 { font-size: 1.75rem; }
}

/* ------------------------------------------------- het bord zelf, vrolijk
   Muren in de kleur van de wereld in plaats van bruin hout: lichtgekleurd
   bovenvlak, een diepe voet in dezelfde kleur. `body` ervoor zodat dit wint
   van de materiaalregels per wereld hoger in dit bestand. De voorpagina
   heeft geen wereld; daar is het landhuisgoud. */
body .kamerbord .muurvoet,
body .kamerbord .buitenmuur-voet { stroke: color-mix(in oklab, var(--wkleur, #d8a657) 42%, #24163a); }
body .kamerbord .muurtop,
body .kamerbord .buitenmuur-top { stroke: color-mix(in oklab, var(--wkleur, #d8a657) 68%, #ffffff); }
body .kamerbord .muurglans { stroke: #ffffff; opacity: 0.75; }
body .kamerbord .muurnerf { stroke: transparent; }

/* De kamernaam als een gekleurd label met een witte rand, niet meer als
   vervaagd potlood. */
body .kamerbord .kamernaam {
  fill: color-mix(in oklab, var(--wkleur, #e8337f) 50%, #24163a);
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 4.5;
}
.vakjeslijn { stroke: rgba(42, 27, 61, 0.26); }