/* Mind Invaders - style.css (desktop)
 * Eén visuele wereld: zwart heelal, off-white tekst, kleurvlakken in afdelingskleuren.
 * Alleen merkkleuren; off-white op lagere dekking alleen voor haarlijnen, secundaire tekst en
 * schaduwvlakken. Fonts: Syne en Questrial. Geen gloed, blur of verloop.
 * Alle aanpassingen voor tablet en telefoon staan in mobiel.css, dat na dit bestand laadt.
 */

/* ==========================================================================
   INSTELLINGEN
   De belangrijkste maten van de menu- en tekstschermen, in pixels.
   Pas ze hier aan; de kleinere waarden voor telefoons staan bovenaan mobiel.css.
   ========================================================================== */
:root {
  --ruimte-boven: 40px;     /* ruimte boven de inhoud van een scherm */
  --ruimte-onder: 32px;     /* ruimte onder de inhoud van een scherm */
  --zijmarge: 48px;         /* ruimte links en rechts van de inhoud */
  --max-breedte: 1180px;    /* maximale breedte van menu- en tekstschermen */
  --ruimte-tussen: 16px;    /* ruimte tussen knoppen in een rij */
  --schaduw: 6px;           /* hoe ver de gekleurde schaduw achter knoppen en kaarten verschuift */
}

/* Basis (gelijk aan de website-versie) */
*,*::before,*::after{box-sizing:border-box}:root{color-scheme:light;padding-block:env(safe-area-inset-top,0px) env(safe-area-inset-bottom,0px)}body{margin:0}img{max-width:100%}[hidden]{display:none!important}

/* Fonts: Syne en Questrial, als bestanden in assets/fonts/ */
@font-face{font-family:"Syne";src:url("../fonts/Syne-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Syne";src:url("../fonts/Syne-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:"Syne";src:url("../fonts/Syne-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:block}
@font-face{font-family:"Questrial";src:url("../fonts/Questrial-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}

/* ---------- tokens ---------- */
:root {
  --offwhite: #F0EFF4;
  --zwart: #000000;
  --wit: #FFFFFF;
  --design: #9D85BE;
  --development: #8BCED7;
  --video: #ED174C;
  --marketing: #E2E419;

  --lijn: rgba(240, 239, 244, 0.15);        /* haarlijn */
  --lijn-sterk: rgba(240, 239, 244, 0.32);  /* haarlijn bij hover */
  --vlak-20: rgba(240, 239, 244, 0.2);      /* schaduwvlak (lege specialknop) */
  --zacht: rgba(240, 239, 244, 0.7);        /* secundaire tekst */

  --syne: 'Syne', system-ui, sans-serif;
  --questrial: 'Questrial', system-ui, sans-serif;

  --snap: cubic-bezier(0.33, 0, 0.15, 1);   /* TMO 'snap': ease-out 85% */
  --trap: polygon(0 4px, 4px 4px, 4px 0, 100% 0, 100% 100%, 0 100%);   /* pixeltrap-hoek */

  /* Rect van het veld (10-ui.js zet ze op #mi bij view:resize). */
  --vx: 0px; --vy: 0px; --vw: 224px; --vh: 400px;
  --pw: 280px; --pg: 48px;                   /* breedte en afstand zijpanelen */

  color-scheme: dark;
  background: var(--zwart);
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--zwart);
  color: var(--offwhite);
}

body {
  font: 400 16px/1.4 var(--questrial);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

.mi {
  position: fixed;
  inset: 0;
  overflow: hidden;
  font: 400 16px/1.4 var(--questrial);
  color: var(--offwhite);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.mi[data-scherm="spel"] { touch-action: none; }
.mi input { user-select: text; -webkit-user-select: text; }

.mi :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; padding: 0; font-weight: inherit; }
.mi :where(ol, ul) { list-style: none; }

/* ---------- typografie (SPEC §11) ---------- */
.display { font: 400 clamp(40px, 9vw, 96px)/0.95 var(--syne); letter-spacing: -0.01em; }
.titel { font: 400 clamp(28px, 5vw, 56px)/1 var(--syne); }
.label { font: 600 clamp(16px, 1.4vw, 20px)/1.15 var(--syne); letter-spacing: 0.02em; }
.tekst { font: 400 clamp(16px, 1.25vw, 18px)/1.4 var(--questrial); }
.klein { font: 400 clamp(13px, 1vw, 14px)/1.4 var(--questrial); }
.zacht { color: var(--zacht); }
.getal { font-variant-numeric: tabular-nums; }
.accent { color: var(--marketing); font-style: normal; }
.punt { padding: 0 0.5em; color: var(--zacht); }

/* ---------- focus ---------- */
.mi :focus { outline: none; }
.mi :focus-visible,
.mi.nav-focus :focus {
  outline: 2px solid var(--marketing);
  outline-offset: 3px;
}

/* ---------- knoppen ----------
 * Rechthoekig, zonder ronding. Primair: off-white vlak met pixeltrap-hoek en een
 * offset-schaduw in de kleur van de context (--accent, standaard marketing-geel).
 * Secundair: haarlijn. */
.knop {
  --accent: var(--marketing);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--offwhite);
  font: 600 clamp(15px, 1.2vw, 17px)/1 var(--syne);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.knop::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zwart);   /* geen sterren door de knop heen */
  box-shadow: inset 0 0 0 2px var(--lijn-sterk);
}
.knop:hover::after { box-shadow: inset 0 0 0 2px var(--offwhite); }
.licht .knop:not(.knop--primair)::after { background: var(--offwhite); }

.knop--primair { color: var(--zwart); margin-right: var(--schaduw); }
.knop--primair::after {
  background: var(--offwhite);
  box-shadow: none;
  clip-path: var(--trap);
}
.knop--primair::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--accent);
  transform: translate(var(--schaduw), var(--schaduw));
  clip-path: var(--trap);
}
.knop--primair:hover::after { box-shadow: none; }
.knop--primair:hover::before { transform: translate(4px, 4px); }
.knop--primair:active { transform: translate(4px, 4px); }
.knop--primair:active::before { transform: translate(2px, 2px); }
.knop--groot { min-height: 56px; padding: 0 30px; font-size: clamp(17px, 1.4vw, 20px); }
.knop:disabled { cursor: default; }

.knop--icoon { width: 48px; padding: 0; }
.knop--geluid { justify-content: flex-start; }

.link {
  padding: 4px 0;
  border: 0;
  background: none;
  color: inherit;
  font: 400 14px/1.4 var(--questrial);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.link:hover { text-decoration-thickness: 2px; }

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  background: var(--offwhite);
  color: var(--zwart);
  font: 600 13px/1 var(--syne);
  letter-spacing: 0.02em;
  clip-path: var(--trap);
}

/* Pixel-art in de UI: canvassen op gehele schaal (css-grootte = w * schaal), nooit wazig. */
.mi canvas {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.mi canvas.pix { flex: none; }

/* Afdelingsvlak: kleurvlak met zwarte tekst en zwart icoon. */
.afd-vlak {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 4px 12px 4px 8px;
  background: var(--afd, var(--marketing));
  color: var(--zwart);
  font: 600 14px/1 var(--syne);
  letter-spacing: 0.02em;
  white-space: nowrap;
  clip-path: var(--trap);
}
.afd-icoon { display: flex; }

/* ---------- speelveld en canvassen ---------- */
#speelveld { position: fixed; inset: 0; z-index: 0; }
#ruimte { position: fixed; left: 0; top: 0; z-index: 0; }
#veld, #fx { position: absolute; z-index: 1; }
#fx { z-index: 2; }
/* Buiten het spel geen veldrand: het veld gaat op in het sterrenveld. */
.mi:not([data-scherm="spel"]):not([data-scherm="pauze"]) #veld { outline-color: transparent !important; }

/* ---------- HUD (volgt het veld) ---------- */
.hud {
  --afd: var(--marketing);
  position: absolute;
  left: var(--vx);
  top: var(--vy);
  width: var(--vw);
  height: var(--vh);
  z-index: 5;
  pointer-events: none;
}
.hud button { pointer-events: auto; }
.hud.cinematisch > :not(.hud-cutin) { visibility: hidden; }

.hud-boven {
  position: absolute;
  inset: 0 0 auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: max(10px, calc(var(--vw) * 0.025)) max(10px, calc(var(--vw) * 0.025)) 0;
}
.hud-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.hud-score { font: 600 clamp(18px, calc(var(--vw) * 0.05), 22px)/1 var(--syne); letter-spacing: 0.02em; }
.hud-keten { font: 600 clamp(14px, calc(var(--vw) * 0.038), 17px)/1 var(--syne); color: var(--marketing); }
.hud-midden {
  padding-top: 4px;
  font: 400 clamp(12px, calc(var(--vw) * 0.03), 13px)/1.2 var(--questrial);
  color: var(--zacht);
  white-space: nowrap;
  text-align: center;
}
#hud-baasnaam { color: var(--offwhite); }
.hud-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hud-levens { display: flex; gap: 3px; }
.hud-levens svg { display: block; width: clamp(16px, calc(var(--vw) * 0.045), 20px); height: auto; }
.hud-levens svg.uit { display: none; }

.hud-knop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  cursor: pointer;
  touch-action: none;
}
.hud-knop:hover { box-shadow: inset 0 0 0 1px var(--offwhite); }
.mi:not([data-modus="touch"]) .hud-knop--pauze { display: none; }

.hud-baas {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--lijn);
}
.hud-baas i { display: block; height: 100%; width: 100%; background: var(--video); transform-origin: left center; }

.hud-onder {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 0 max(10px, calc(var(--vw) * 0.025)) max(10px, calc(var(--vw) * 0.025));
}
.hud-meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.meter-tekst {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font: 400 12px/1.2 var(--questrial);
  color: var(--zacht);
  white-space: nowrap;
}
.meter-klaar { display: inline-flex; align-items: center; gap: 6px; color: var(--afd); font: 600 13px/1 var(--syne); letter-spacing: 0.02em; }
.meter-klaar kbd { min-width: 20px; height: 20px; padding: 0 5px; font-size: 11px; clip-path: none; }
.mi[data-modus="touch"] .meter-klaar kbd { display: none; }
.meter-segmenten { display: flex; gap: 2px; }
.meter-segmenten i {
  display: block;
  width: clamp(9px, calc(var(--vw) * 0.034), 16px);
  height: clamp(5px, calc(var(--vw) * 0.016), 8px);
  background: var(--lijn);
}
.meter-segmenten i.vol { background: var(--afd); }

.hud-knop--special { display: none; width: 64px; height: 64px; background: var(--vlak-20); box-shadow: none; }
.mi[data-modus="touch"] .hud-knop--special { display: flex; }
.hud-knop--special.vol { background: var(--afd); }

/* Sectorkaart (2,2 s, midden in het veld) */
.hud-kaart {
  position: absolute;
  left: 0;
  right: 0;
  top: 36%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  text-align: center;
}
.kaart-slogan { font: 400 clamp(18px, calc(var(--vw) * 0.06), 26px)/1.1 var(--syne); }
.kaart-titel { font: 400 clamp(30px, calc(var(--vw) * 0.11), 48px)/1 var(--syne); }
.kaart-balk {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 10px;
  background: var(--afd);
  color: var(--zwart);
  font: 600 clamp(16px, calc(var(--vw) * 0.045), 20px)/1 var(--syne);
  letter-spacing: 0.02em;
  clip-path: var(--trap);
  animation: inschuif 0.18s var(--snap) both;
}
.kaart-ronde { font: 600 14px/1 var(--syne); letter-spacing: 0.02em; color: var(--zacht); }

/* Cut-in bij een superkracht: balk schuift in 0,18 s (snap) van links in, 0,5 s stil, harde cut.
 * Het character staat op de onderrand en mag boven de balk uitsteken. */
.hud-cutin {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  height: 22%;
  clip-path: inset(-100vh 0 0 0);   /* links, rechts en onder op de veldrand; boven vrij */
}
.cutin-balk {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 100%;
  padding: 0 14px 0 8%;
  background: var(--afd);
  color: var(--zwart);
  animation: inschuif-ver 0.18s var(--snap) both;
}
.cutin-char { flex: none; display: flex; align-items: flex-end; }
.cutin-naam {
  align-self: center;
  min-width: 0;
  font: 400 clamp(22px, calc(var(--vw) * 0.08), 40px)/1 var(--syne);
  overflow-wrap: anywhere;
}
@keyframes inschuif { from { transform: translateX(-24px); } to { transform: none; } }
@keyframes inschuif-ver { from { transform: translateX(-100%); } to { transform: none; } }

/* ---------- zijpanelen (zijruimte >= 240 css-px, alleen in spel en pauze) ---------- */
.zijpaneel {
  position: fixed;
  top: var(--vy);
  z-index: 6;
  display: none;
  flex-direction: column;
  gap: 28px;
  width: var(--pw);
  height: var(--vh);
  padding: 4px 0;
  overflow: hidden;
}
.mi.breed[data-scherm="spel"] .zijpaneel,
.mi.breed[data-scherm="pauze"] .zijpaneel { display: flex; }
.zijpaneel--links { left: calc(var(--vx) - var(--pg) - var(--pw)); align-items: flex-end; text-align: right; }
.zijpaneel--rechts { left: calc(var(--vx) + var(--vw) + var(--pg)); }
.pp-char { display: flex; align-items: flex-end; justify-content: flex-end; margin-top: auto; }
.pp-kop { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.pp-naam { font: 400 clamp(32px, 2.8vw, 48px)/1 var(--syne); }
.pp-blok, .ps-blok { display: flex; flex-direction: column; gap: 8px; }
.zijpaneel--links .pp-blok { align-items: flex-end; }
.zijpaneel--links .pp-blok:last-child { margin-bottom: auto; }
.pp-blok .label, .ps-blok .label { font-size: 15px; }
.pp-blok .tekst { font-size: 15px; max-width: 30ch; }
.pp-wapen { display: flex; gap: 4px; }
.pp-wapen i { width: 16px; height: 16px; box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.pp-wapen i.vol { background: var(--afd, var(--marketing)); box-shadow: none; }
.ps-top { display: flex; flex-direction: column; }
.ps-top li {
  display: grid;
  grid-template-columns: 18px 48px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--lijn);
  font: 400 15px/1.2 var(--questrial);
}
.ps-top li.mij { background: var(--marketing); color: var(--zwart); border-bottom-color: transparent; padding: 0 6px; margin: 0 -6px; }
.ps-top .plek { font: 600 13px/1 var(--syne); color: var(--zacht); font-variant-numeric: tabular-nums; }
.ps-top li.mij .plek { color: var(--zwart); }
.ps-top .hoofd { display: flex; justify-content: center; align-self: center; }
.ps-top .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-top .score { font: 600 15px/1 var(--syne); font-variant-numeric: tabular-nums; }
.ps-beste { font: 400 clamp(28px, 2.4vw, 40px)/1 var(--syne); }
.ps-blok:last-child { margin-top: auto; }
.spiek { display: none; flex-direction: column; gap: 8px; }
.mi[data-modus="toetsen"] .spiek--toetsen,
.mi[data-modus="touch"] .spiek--touch,
.mi[data-modus="pad"] .spiek--pad { display: flex; }
.spiek div { display: flex; align-items: center; gap: 10px; }
.spiek dt { display: flex; gap: 3px; }
.spiek dd { margin: 0; font-size: 14px; color: var(--zacht); }
.spiek kbd { min-width: 24px; height: 24px; font-size: 12px; padding: 0 6px; }

/* ---------- schermen (overlays over het sterrenveld) ---------- */
.scherm {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--lijn-sterk) transparent;
  --sp-t: max(var(--ruimte-boven), env(safe-area-inset-top, 0px));
  --sp-r: max(var(--zijmarge), env(safe-area-inset-right, 0px));
  --sp-b: max(var(--ruimte-onder), env(safe-area-inset-bottom, 0px));
  --sp-l: max(var(--zijmarge), env(safe-area-inset-left, 0px));
  padding: var(--sp-t) var(--sp-r) var(--sp-b) var(--sp-l);
}

/* Volle schermen dekken het veld af (de sterren van #ruimte lopen door). */
.scherm--klassement, .scherm--besturing, .scherm--gameover { background: var(--zwart); }
.inhoud { width: 100%; max-width: var(--max-breedte); margin: auto; }

.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ruimte-tussen); }
.knoppen-stapel { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.knoppen-stapel .knop { justify-content: flex-start; }

.voet {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  padding-top: 16px;
  color: var(--zacht);
}

.geluid-icoon { display: flex; align-items: center; justify-content: center; }

/* ---------- 1. titel ---------- */
.titel-inhoud { display: flex; flex-direction: column; align-items: center; text-align: center; }
.titel-logo { padding-bottom: clamp(20px, 4.5vh, 48px); }
.titel-logo svg { display: block; height: clamp(48px, 7vh, 64px); width: auto; }
.titel-inhoud .display { max-width: 100%; }
.titel-slogan { margin-top: clamp(10px, 1.8vh, 18px); font: 400 clamp(22px, 3.2vw, 38px)/1.05 var(--syne); }
.titel-intro { max-width: 36ch; margin-top: clamp(12px, 2.2vh, 22px); color: var(--zacht); }
.titel-team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 14px;
  margin-top: clamp(20px, 4.5vh, 44px);
}
.titel-rij {
  --g: clamp(6px, 1.2vw, 16px);
  display: flex;
  align-items: flex-end;
  gap: var(--g);
  padding: 0 calc(var(--g) / 2);
  border-bottom: 1px solid var(--lijn-sterk);
}
.titel-knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
  margin-top: clamp(20px, 4.5vh, 44px);
}
.titel-start { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.titel-team-regel { margin-top: 14px; }
.mi:not([data-build="team"]) [data-alleen="team"] { display: none; }

/* ---------- 1b. naam (online klassement) ---------- */
.scherm--naam { background: var(--zwart); }
.naamscherm { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; }
.naamscherm .knoppen { margin-top: 12px; }
.naam-rij { display: flex; gap: 12px; width: 100%; }
.naam-rij input {
  flex: 1;
  min-width: 0;
  height: 56px;
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--offwhite);
  color: var(--offwhite);
  font: 400 22px/1 var(--syne);
  caret-color: var(--marketing);
}
.naam-rij input:focus-visible { outline: 2px solid var(--marketing); outline-offset: 3px; }
.naam-rij .knop { min-height: 56px; }
.naam-bericht:empty { display: none; }
.naam-bericht { color: var(--offwhite); }
.kies-speler { margin-left: auto; }
.kies-speler .link { margin-left: 6px; font-size: inherit; }
.hud-offline { display: block; margin-top: 2px; color: var(--zacht); }

/* ---------- 2. kies ----------
 * 10-ui.js kiest de vorm die past: .kies--breed (één rij, 4 groepen naast elkaar) of
 * .kies--raster (4 kolommen: Design / Development + Video / Marketing), plus .kies--compact
 * op smalle schermen (detail als vaste onderbalk, rooster scrolt als het niet past). */
.scherm--kies { gap: clamp(16px, 3.4vh, 36px); background: var(--zwart); }
.scherm--kies > * { width: 100%; max-width: var(--kies-w, 1480px); margin-left: auto; margin-right: auto; }
.scherm--kies > .kies-kop { margin-top: auto; }
.scherm--kies > .kies-detail { margin-bottom: auto; }
.kies-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }

.kies-rooster {
  --fig-h: 120px;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 var(--schaduw) var(--schaduw) 0;
}
.kies-groep { --afd: var(--marketing); display: flex; flex: none; flex-direction: column; gap: 10px; min-width: 0; }
.kies-groep .afd-vlak {
  align-self: stretch;
  min-height: calc(19px + var(--ks, 3) * 3px);   /* --ks = schaal van de kaarten (10-ui.js) */
  padding: 3px 10px 3px 7px;
  gap: 7px;
  font-size: calc(10px + var(--ks, 3) * 1px);
}
.kies-kaarten { display: flex; gap: 8px; }

.kaart {
  --afd: var(--marketing);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
  width: var(--kaart-w, 80px);
  padding: 10px 0 10px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--offwhite);
  font: 600 calc(10px + var(--ks, 3) * 1.25px)/1 var(--syne);
  letter-spacing: 0.02em;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.kaart::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zwart);
  box-shadow: inset 0 0 0 1px var(--lijn);
}
.kaart:hover::after { box-shadow: inset 0 0 0 1px var(--lijn-sterk); }
.kaart[aria-checked="true"] { z-index: 1; color: var(--zwart); }
.kaart[aria-checked="true"]::after { background: var(--afd); box-shadow: none; clip-path: var(--trap); }
.kaart[aria-checked="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--offwhite);
  transform: translate(var(--schaduw), var(--schaduw));
  clip-path: var(--trap);
}
.kaart-fig { position: relative; display: block; width: 100%; height: var(--fig-h); }
.kaart-fig canvas { position: absolute; left: 50%; }
.kaart-naam { white-space: nowrap; }

.kies-detail {
  --afd: var(--marketing);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(20px, 3vw, 48px);
  padding-top: clamp(16px, 3vh, 32px);
  border-top: 1px solid var(--lijn);
}
.kies-portret { display: flex; align-items: flex-end; justify-content: center; min-width: 60px; }
.kies-info { display: flex; flex-direction: column; gap: 10px; max-width: 60ch; padding-bottom: 4px; }
.kies-naam { font: 400 clamp(28px, 4vw, 52px)/1 var(--syne); }
.kies-afd { color: var(--zacht); }
.kies-afd span { color: var(--offwhite); }
.kies-special { display: flex; flex-direction: column; gap: 4px; }
.kies-special .tekst { color: var(--zacht); }
.kies-bonus { color: var(--zacht); }
.kies-bonus .label { color: var(--offwhite); font-size: inherit; }
.kies-acties { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-bottom: 4px; }
.kies-acties .knop--primair { --accent: var(--afd); }

/* Raster: 5 kolommen; afdelingen schuiven op een rij aan als ze passen (Development 4 + Video 1),
 * een afdeling alleen op een rij loopt over de volle breedte (10-ui.js zet --span). */
.kies--raster .kies-rooster {
  display: grid;
  grid-template-columns: repeat(var(--kol, 5), minmax(0, 1fr));
  gap: 16px 8px;
}
.kies--raster .kies-groep { grid-column: span var(--span, var(--n, 1)); }
.kies--raster .kies-kaarten { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 8px; }
.kies--raster .kaart { width: auto; }

/* Compact (telefoon): rooster scrolt indien nodig, detail is een vaste onderbalk. */
.kies--compact.scherm--kies {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  gap: 12px;
  padding-bottom: 0;
}
.kies--compact.scherm--kies > .kies-kop { margin: 0; }
.kies--compact.scherm--kies > .kies-detail {
  width: auto;
  max-width: none;
  margin: 0 calc(-1 * var(--sp-r)) 0 calc(-1 * var(--sp-l));
}
.kies--compact .kies-kop .titel { font-size: 28px; }
.kies--compact .kies-rooster-vak { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.kies--compact .kies-rooster { gap: 12px 8px; }
.kies--compact .kies-groep { gap: 7px; }
.kies--compact .kaart { padding: 8px 0 8px; gap: 6px; font-size: 12px; }
.kies--compact .kies-detail {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px var(--sp-r) max(16px, env(safe-area-inset-bottom, 0px)) var(--sp-l);
  background: var(--zwart);
}
.kies--compact .kies-portret,
.kies--compact .kies-afd { display: none; }
.kies--compact .kies-info { gap: 5px; padding: 0; }
.kies--compact .kies-naam { font-size: 26px; }
.kies--compact .kies-info .label { font-size: 15px; }
.kies--compact .kies-info .tekst { font-size: 14px; line-height: 1.35; }
.kies--compact .kies-acties { flex-direction: row; gap: 12px; padding: 0; }
.kies--compact .kies-acties .knop--primair { flex: 1; padding: 0 12px; }
.kies--compact .kies-acties .knop { min-height: 52px; }

/* ---------- 4. pauze ---------- */
.scherm--pauze { justify-content: center; align-items: center; }
.pauze-kaart {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(320px, calc(100% - var(--schaduw)));
  padding: 28px 28px 32px;
  margin-right: var(--schaduw);
}
.pauze-kaart::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--afd, var(--marketing));
  transform: translate(var(--schaduw), var(--schaduw));
  clip-path: var(--trap);
}
.pauze-kaart::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--zwart);
  box-shadow: inset 0 0 0 1px var(--lijn-sterk);
  clip-path: var(--trap);
}
.pauze-kaart .knop--primair { --accent: var(--afd, var(--marketing)); margin-right: 0; }

/* ---------- 5. game over ---------- */
.go { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 2vh, 18px); max-width: 860px; }
.go-score { font: 400 clamp(56px, 13vw, 150px)/0.9 var(--syne); letter-spacing: -0.02em; }
.go-regel, .go-piloot { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.go-regel { color: var(--zacht); }
.go-hoofd { display: flex; margin-right: 12px; }
.go-piloot .label { font-size: inherit; }
.go-naam { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 460px; margin-top: 8px; }
.go-naam-rij { display: flex; gap: 12px; }
.go-naam input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--offwhite);
  color: var(--offwhite);
  font: 400 18px/1 var(--syne);
  caret-color: var(--marketing);
}
.go-naam input:focus-visible { outline: 2px solid var(--marketing); outline-offset: 3px; }
.go-bericht:empty { display: none; }
.go-knoppen { margin-top: clamp(8px, 2vh, 20px); }

/* ---------- 6. klassement ---------- */
.kl { display: flex; flex-direction: column; gap: clamp(20px, 4vh, 40px); max-width: 760px; }
.kl:has(.met-strijd) { max-width: 1180px; }
.kl-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.kl-raster.met-strijd { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; }

.kl-lijst { display: flex; flex-direction: column; max-width: 760px; width: 100%; }
.kl-rij {
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr) minmax(76px, auto) 56px 56px;
  align-items: baseline;   /* Syne-cijfers en Questrial-namen op één basislijn */
  gap: 10px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--lijn);
  font: 400 clamp(15px, 1.2vw, 17px)/1.2 var(--questrial);
}
.kl-rij--kop { padding-top: 6px; padding-bottom: 8px; }
.kl-rij .r { text-align: right; }
.kl-rij .plek { font: 600 15px/1 var(--syne); color: var(--zacht); font-variant-numeric: tabular-nums; }
.kl-rij .hoofd { display: flex; justify-content: center; align-self: center; }
.kl-rij .naam { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kl-rij .score { font: 600 clamp(16px, 1.3vw, 18px)/1 var(--syne); font-variant-numeric: tabular-nums; }
.kl-rij .sr { font-variant-numeric: tabular-nums; color: var(--zacht); }
.kl-rij.mij { background: var(--marketing); color: var(--zwart); border-bottom-color: transparent; clip-path: var(--trap); }
.kl-rij.mij .plek, .kl-rij.mij .sr { color: var(--zwart); }
.kl-leeg { padding: 20px 0; color: var(--zacht); border-bottom: 1px solid var(--lijn); }
#kl-noot { margin-top: 12px; }

.kl-strijd { display: flex; flex-direction: column; gap: 18px; max-width: 520px; }
.kl-balken { display: flex; flex-direction: column; gap: 14px; }
.kl-balk { --afd: var(--marketing); display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.kl-balk .naam { font: 600 15px/1 var(--syne); letter-spacing: 0.02em; }
.kl-balk .spoor { height: 16px; background: var(--lijn); }
.kl-balk .vulling { height: 100%; background: var(--afd); }
.kl-balk .waarde { font: 600 15px/1 var(--syne); font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; }

/* ---------- 7. besturing ---------- */
.bs { display: flex; flex-direction: column; gap: clamp(20px, 4vh, 40px); }
.bs-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; }

.bs-kolom { display: flex; flex-direction: column; gap: 28px; }
.bs-blok { display: flex; flex-direction: column; gap: 12px; }
.bs-blok .tekst { color: var(--zacht); }
/* Met touch zijn toetsen en gamepad niet relevant; een toets of pad toont ze meteen weer. */
.mi[data-modus="touch"] .bs-blok--toetsen,
.mi[data-modus="touch"] .bs-blok--pad { display: none; }
.bs-lijst { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 24px; }
.bs-lijst div { display: contents; }
.bs-lijst dt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.bs-lijst dd { margin: 0; color: var(--zacht); }
.of { padding: 0 6px; font-size: 14px; color: var(--zacht); }
.legenda { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.legenda li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 7px 0;
  border-bottom: 1px solid var(--lijn);
}
.legenda .icoon { display: flex; justify-content: center; }
.legenda .naam { font: 600 15px/1.15 var(--syne); letter-spacing: 0.02em; }
.legenda .naam small { display: block; margin-top: 3px; font: 400 14px/1.3 var(--questrial); letter-spacing: 0; color: var(--zacht); font-variant-numeric: tabular-nums; }
.legenda--power { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- 8. einde (off-white scène) ---------- */
.licht { background: var(--offwhite); color: var(--zwart); }
.licht .zacht, .licht .voet { color: var(--zwart); }
.licht :focus-visible, .mi.nav-focus .licht :focus { outline-color: var(--zwart); }
.licht .knop { color: var(--zwart); }
.licht .knop::after { box-shadow: inset 0 0 0 2px var(--zwart); }
.licht .knop--primair { color: var(--offwhite); }
.licht .knop--primair::after { background: var(--zwart); box-shadow: none; }
.einde { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.6vh, 26px); max-width: 980px; }
.einde-logo { padding: 0 0 clamp(24px, 4vh, 40px); }
.einde-logo svg { display: block; height: clamp(64px, 11vh, 96px); width: auto; }
.einde mark { background: var(--marketing); color: var(--zwart); padding: 0 0.1em; }
.einde-score { display: flex; align-items: baseline; gap: 16px; }
.einde-score .getal { font: 400 clamp(36px, 6vw, 64px)/1 var(--syne); }
.einde .knoppen { margin-top: clamp(8px, 2vh, 20px); }
.scherm--einde .voet { justify-content: flex-start; max-width: 980px; width: 100%; margin: 0 auto; }

/* ---------- pixel-dissolve ---------- */
.dissolve { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; }
.dissolve.blokkeer { pointer-events: auto; }

/* ---------- bewegingsvoorkeur ---------- */
@media (prefers-reduced-motion: reduce) {
  .kaart-balk, .cutin-balk { animation: none; }
}


/* ---------- beheerpagina (src/css/beheer.css) ---------- */
/* Mind Invaders: opmaak van de beheerpagina (beheer/, body.pagina-beheer) en van de gedeelde kop en
 * voet (includes/header.php en includes/footer.php). Dit is de desktop-opmaak; tablet en telefoon
 * staan in beheer.mobiel.css (alleen @media). De build zet dit bestand achter de game-CSS in
 * assets/css/style.css; de fonts Syne en Questrial komen uit die game-CSS.
 * Huisstijl: zwart met off-white tekst, marketing-geel voor de focusring en de schaduw van de primaire
 * knop. Geen ronde hoeken en geen schaduwen, behalve die offset-schaduw van 6px. Off-white op lagere
 * dekking alleen voor haarlijnen en secundaire tekst. */

[hidden] { display: none !important; }

/* ---------- tokens ---------- */
.pagina-beheer,
.site-kop,
.site-voet {
  --bh-zwart: #000000;
  --bh-offwhite: #F0EFF4;
  --bh-geel: #E2E419;
  --bh-lijn: rgba(240, 239, 244, 0.15);        /* haarlijn */
  --bh-lijn-sterk: rgba(240, 239, 244, 0.32);  /* haarlijn rond knoppen en velden */
  --bh-zacht: rgba(240, 239, 244, 0.7);        /* secundaire tekst */
  --bh-syne: 'Syne', system-ui, sans-serif;
  --bh-questrial: 'Questrial', system-ui, sans-serif;
}

/* ---------- pagina ----------
 * De game-CSS zet html en body op height: 100% en overflow: hidden; hier moet je kunnen scrollen. */
html:has(> body.pagina-beheer),
body.pagina-beheer {
  height: auto;
  overflow: auto;
}
@supports not selector(:has(> *)) {
  /* Oudere browsers zonder :has(): de body scrolt dan zelf. */
  body.pagina-beheer { height: 100%; overflow-y: auto; }
}

body.pagina-beheer {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bh-zwart);
  color: var(--bh-offwhite);
  font: 400 16px/1.5 var(--bh-questrial);
  overscroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.pagina-beheer *,
.pagina-beheer *::before,
.pagina-beheer *::after { box-sizing: border-box; }

.pagina-beheer a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.pagina-beheer a:hover { text-decoration-thickness: 2px; }

.pagina-beheer :focus { outline: none; }
.pagina-beheer :focus-visible,
.site-kop :focus-visible,
.site-voet :focus-visible {
  outline: 2px solid var(--bh-geel);
  outline-offset: 3px;
}

.pagina-beheer code {
  padding: 1px 6px;
  border: 1px solid var(--bh-lijn);
  font: inherit;
  font-size: 0.94em;
  overflow-wrap: anywhere;
}

/* ---------- kop (includes/header.php) ----------
 * Logo 40 px hoog; de vrije ruimte rondom is minstens een derde van die hoogte. */
.site-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--bh-lijn);
  background: var(--bh-zwart);
  color: var(--bh-offwhite);
}
.site-kop__logo {
  display: block;
  flex: none;
  line-height: 0;
}
.site-kop__logo img {
  display: block;
  width: auto;
  height: 40px;
}
.site-kop__nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-kop__nav form { margin: 0; }
.site-kop__nav a,
.site-kop__nav button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--bh-offwhite);
  font: 600 15px/1 var(--bh-syne);
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.site-kop__nav a:hover,
.site-kop__nav button:hover,
.site-kop__nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}
.site-kop__nav a[aria-current="page"] { text-decoration-color: var(--bh-geel); }

/* ---------- voet (includes/footer.php) ---------- */
.site-voet {
  padding: 24px 40px 32px;
  border-top: 1px solid var(--bh-lijn);
  background: var(--bh-zwart);
  color: var(--bh-zacht);
  font: 400 14px/1.4 var(--bh-questrial);
}
.site-voet p { margin: 0; }
.site-voet a {
  color: var(--bh-offwhite);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.site-voet a:hover { text-decoration-thickness: 2px; }

/* ---------- inhoud ---------- */
.bh {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 40px 72px;
}
.bh-titel {
  margin: 0 0 16px;
  font: 400 clamp(36px, 4vw, 56px)/1 var(--bh-syne);
  letter-spacing: -0.01em;
}
.bh-kop {
  margin: 0 0 8px;
  font: 600 24px/1.15 var(--bh-syne);
  letter-spacing: 0.01em;
}
.bh-uitleg {
  max-width: 72ch;
  margin: 0 0 20px;
  color: var(--bh-zacht);
}
.bh-samenvatting {
  margin: 0 0 48px;
  color: var(--bh-zacht);
}
.bh-samenvatting a { color: var(--bh-offwhite); }
.bh-blok { margin: 0 0 64px; }
.bh-blok--smal {
  max-width: 560px;
  margin: 8vh auto 64px;
}
.bh-leeg {
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--bh-lijn);
  color: var(--bh-zacht);
}
.bh-melding {
  max-width: 72ch;
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--bh-geel);
  color: var(--bh-zwart);
}
.bh-stappen {
  margin: 16px 0 0;
  padding-left: 1.4em;
}
.bh-stappen li { margin: 0 0 12px; }

/* ---------- tabellen ---------- */
.bh-tabel-ruimte {
  max-width: 100%;
  overflow-x: auto;
}
.bh-tabel {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.bh-tabel th {
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--bh-lijn-sterk);
  color: var(--bh-zacht);
  font: 600 13px/1.2 var(--bh-syne);
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}
.bh-tabel td {
  padding: 12px;
  border-bottom: 1px solid var(--bh-lijn);
  vertical-align: top;
}
.bh-tabel th:first-child,
.bh-tabel td:first-child { padding-left: 0; }
.bh-tabel th:last-child,
.bh-tabel td:last-child { padding-right: 0; }
.bh-tabel--log td { font-size: 14px; }
.bh-getal {
  text-align: right;
  white-space: nowrap;
}
.bh-tabel th.bh-getal { text-align: right; }
.bh-detail {
  max-width: 420px;
  color: var(--bh-zacht);
  overflow-wrap: anywhere;
}
.bh-acties { text-align: right; }
.bh-acties form {
  display: inline-block;
  margin: 0 0 6px 6px;
}
.bh-verborgen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Status van een score: zichtbaar (haarlijn), te controleren (geel vlak), verborgen (stippellijn). */
.bh-status {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--bh-lijn-sterk);
  font: 600 12px/1.3 var(--bh-syne);
  letter-spacing: 0.03em;
}
.bh-status--controle {
  border-color: var(--bh-geel);
  background: var(--bh-geel);
  color: var(--bh-zwart);
}
.bh-status--uit {
  border-style: dashed;
  color: var(--bh-zacht);
}

/* ---------- knoppen en velden ---------- */
.bh-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 0 22px;
  border: 2px solid var(--bh-lijn-sterk);
  border-radius: 0;
  background: var(--bh-zwart);
  color: var(--bh-offwhite);
  font: 600 15px/1 var(--bh-syne);
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.bh-knop:hover { border-color: var(--bh-offwhite); }
.bh-knop--primair {
  margin: 0 6px 6px 0;
  border-color: var(--bh-offwhite);
  background: var(--bh-offwhite);
  color: var(--bh-zwart);
  box-shadow: 6px 6px 0 0 var(--bh-geel);
}
.bh-knop--primair:hover { box-shadow: 4px 4px 0 0 var(--bh-geel); }
.bh-knop--primair:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 0 var(--bh-geel);
}
.bh-knop--klein {
  min-height: 36px;
  padding: 0 12px;
  font-size: 13px;
}

.bh-label {
  display: block;
  margin: 0 0 8px;
  font: 600 14px/1.2 var(--bh-syne);
  letter-spacing: 0.02em;
}
.bh-veld {
  display: block;
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 2px solid var(--bh-lijn-sterk);
  border-radius: 0;
  background: var(--bh-zwart);
  color: var(--bh-offwhite);
  font: 400 16px/1.2 var(--bh-questrial);
  -webkit-appearance: none;
  appearance: none;
}
.bh-veld:hover { border-color: var(--bh-offwhite); }

.bh-inloggen {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}
.bh-inloggen .bh-knop { margin-top: 16px; }

.bh-blokkeren {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px 12px;
  max-width: 560px;
  margin: 0 0 24px;
}
.bh-blokkeren .bh-label {
  grid-column: 1 / -1;
  margin: 0;
}

/* ---------- serverstatus en wachtwoordregel ---------- */
.bh-kop--ruim { margin-top: 48px; }
.bh-controle {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--bh-lijn);
}
.bh-controle__regel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--bh-lijn);
}
.bh-controle__naam { font: 600 15px/1.3 var(--bh-syne); letter-spacing: 0.01em; }
.bh-controle__waarde { grid-column: 1; color: var(--bh-zacht); font-size: 14px; overflow-wrap: anywhere; }
.bh-controle__regel .bh-status { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.bh-controle__hulp { grid-column: 1 / -1; margin-top: 6px; max-width: 72ch; }
.bh-status--fout {
  border-color: #ED174C;
  background: #ED174C;
  color: var(--bh-zwart);
}
.bh-regel {
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid var(--bh-lijn-sterk);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  user-select: all;
  -webkit-user-select: all;
}
.bh-regel code { padding: 0; border: 0; background: none; }