/*
  Voltaxis - gedeelde stijl voor alle pagina's.
  ---------------------------------------------------------------------------
  EEN NEUTRALE DONKERE LIJST, en dat is een keuze die van het werk zelf komt.
  Hier stond het warme bruin-goud van het beheerdashboard. Dat werkt in een
  dashboard, maar op een pagina waar de sleutelbeelden van de spellen hangen
  vecht het met die beelden: Petrol Empire is marineblauw met oranje, en dat
  legde het af tegen een bruine ondergrond.

  Nu draagt de lijst geen kleur en de beelden wel. Het goud blijft als enige
  accent - het is het teken van Voltaxis zelf - maar het staat op bijna zwart
  in plaats van op bruin.

  GEEN MONOSPACE in de etiketten. Die las als een technisch document, en dit
  is geen technisch document.
*/
:root {
  /* Deze pagina kan allebei. Zonder deze regel houdt de browser zijn eigen
     onderdelen - schuifbalken, invoervelden, keuzelijsten - in de andere stand
     dan de pagina, en dat zie je meteen bij de taalkiezer in de kopregel. */
  color-scheme: light dark;

  --bg:        #0b0c0f;
  /* Dezelfde kleur, als losse kanalen - nodig waar er doorzichtigheid bij
     komt: rgba(var(--bg-rgb), .88). Een hex kan dat niet dragen. */
  --bg-rgb:    11, 12, 15;
  /* Hoe het sleutelbeeld in de pagina overloopt. Op donker mag dat stevig:
     de tekening is donker en de pagina ook, dus je ziet alleen de onderrand
     wegvallen. Op licht niet - zie het lichte palet. */
  --beeldvervaging: linear-gradient(to bottom, transparent 55%,
                    rgba(var(--bg-rgb), .75) 85%, var(--bg));
  /* Hetzelfde voor de dia op de voorpagina, waar TEKST overheen staat.
     Die moet leesbaar blijven, dus hier kan het verloop niet gewoon weg. */
  --diavervaging: linear-gradient(to bottom,
                  rgba(var(--bg-rgb), .10) 0%, rgba(var(--bg-rgb), .05) 40%,
                  rgba(var(--bg-rgb), .72) 78%, var(--bg) 100%);
  --panel:     #14161b;
  --panel-2:   #1b1e25;
  --border:    #262a33;
  --border-2:  #383e4a;
  --gold:      #e0a83c;
  --gold-hi:   #f2bf62;
  --gold-dim:  #ab8438;
  --text:      #e9ebf0;
  --muted:     #98a0ad;
  --green:     #57b36c;

  /* Deze vijf stonden hard in de regels verderop. Als token kunnen ze mee
     wisselen; hard gelaten bleven ze donker in een lichte pagina. */
  --stand-live-tekst:  #8fdca2;
  --stand-komt-tekst:  #f0c977;
  --stand-beta-tekst:  #f2a35e;
  --kaart-titel:       #fff;
  --kaart-titel-sub:   rgba(255,255,255,.55);

  --head: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --kolom: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* height:auto hoort erbij en is niet optioneel. De beelden dragen een width- en
   height-attribuut (goed: dat reserveert de ruimte voor ze geladen zijn), en
   zonder deze regel houdt de browser die hoogte aan terwijl max-width de
   breedte terugbrengt. De schermafbeeldingen stonden daardoor rechtop
   uitgerekt in plaats van liggend. */
img { max-width: 100%; height: auto; display: block; }

/* De randkleuren van hero.png, uit de randkolommen van het bestand zelf
   gemeten. Een sleutelbeeld staat op zijn eigen maat en wordt niet
   bijgesneden; op een breder scherm loopt dit verloop links en rechts door en
   valt de naad weg. Een titel met ander beeld zet hier zijn eigen kleuren. */
:root {
  --randverloop: linear-gradient(to bottom,
    #0a111a 0%, #0d141e 20%, #101924 40%, #141d2a 50%,
    #16202e 60%, #1b2736 80%, #1f2c3c 90%, #131d28 100%);
}

/* ===================================================================== LICHT

   Dezelfde tokens, andere waarden. Alles wat de rest van dit bestand tekent
   loopt erlangs, dus hier staat het hele lichte palet en verder nergens.

   DRIE DINGEN DIE GEEN OMKERING ZIJN:

   - Het GOUD. #e0a83c leest op bijna-zwart als goud en op wit als een lichte
     vlek. In het licht staat er een donkerder goud voor tekst en randen; de
     heldere blijft voor vullingen, waar de ondergrond het contrast doet.
   - De ACHTERGROND is warm gebroken wit en geen zuiver wit. Zuiver wit naast
     een gouden accent trekt blauw, en de hele site is warm van toon.
   - De KAARTTITEL stond op wit, want hij ligt op een donkere plaat. Die plaat
     blijft donker in het licht - het is het beeld van het spel - dus de titel
     blijft wit. */
/* De media-regel geldt NIET voor wie zelf donker gekozen heeft; die keuze
   hoort te winnen van de systeeminstelling. Zie js/thema.js. */
@media (prefers-color-scheme: light) {
  :root:not([data-thema="dark"]) {
    --bg:        #f6f3ee;
    --bg-rgb:    246, 243, 238;
    /* Veel later en veel lichter. Op een licht beeld in een lichte pagina
       is 75% dekking geen overgang maar een melkwitte band over de onderste
       helft van de tekening. */
    --beeldvervaging: linear-gradient(to bottom, transparent 84%,
                      rgba(var(--bg-rgb), .45) 96%, var(--bg));
    /* Later en zonder de twee bovenste stops: op een lichte pagina hoeft
       de bovenkant van een licht beeld niet nog eens lichter. Onderaan
       blijft het dicht genoeg om de tekst te dragen. */
    --diavervaging: linear-gradient(to bottom,
                    transparent 0%, transparent 52%,
                    rgba(var(--bg-rgb), .62) 82%, var(--bg) 100%);
    --panel:     #fffdfa;
    --panel-2:   #efebe3;
    --border:    #ded7ca;
    --border-2:  #c3bcae;
    --gold:      #9a6b14;
    --gold-hi:   #7d5610;
    --gold-dim:  #b08a3e;
    --text:      #1c1e23;
    --muted:     #5f6671;
    --green:     #2d7a44;

    --stand-live-tekst: #1f6b36;
    --stand-komt-tekst: #7a5410;
    --stand-beta-tekst: #93480d;

    --randverloop: linear-gradient(to bottom,
      #efe9df 0%, #eae3d7 20%, #e5ddd0 40%, #e1d8c9 50%,
      #ded4c4 60%, #d9cebc 80%, #d5c9b6 90%, #e3dbcf 100%);
  }

  /* De standpillen hadden een vulling die op donker net oplicht en op licht
     verdwijnt. Iets steviger, met dezelfde kleurfamilie. */
  .stand.live { background: rgba(45,122,68,.12); border-color: rgba(45,122,68,.38); }
  .stand.komt { background: rgba(154,107,20,.12); border-color: rgba(154,107,20,.38); }
  .stand.beta { background: rgba(147,72,13,.12); border-color: rgba(147,72,13,.38); }
}

/* Dezelfde set, voor wie LICHT gekozen heeft terwijl zijn systeem donker staat.
   Een kopie en geen slimmigheid: CSS kan een mediaregel en een losse selector
   niet samenvoegen, en van de twee kwaden is een kopie die je kunt lezen de
   beste. Verandert er een kleur, dan verandert ze hierboven en hier. */
:root[data-thema="light"] {
    --bg:        #f6f3ee;
    --bg-rgb:    246, 243, 238;
    /* Veel later en veel lichter. Op een licht beeld in een lichte pagina
       is 75% dekking geen overgang maar een melkwitte band over de onderste
       helft van de tekening. */
    --beeldvervaging: linear-gradient(to bottom, transparent 84%,
                      rgba(var(--bg-rgb), .45) 96%, var(--bg));
    /* Later en zonder de twee bovenste stops: op een lichte pagina hoeft
       de bovenkant van een licht beeld niet nog eens lichter. Onderaan
       blijft het dicht genoeg om de tekst te dragen. */
    --diavervaging: linear-gradient(to bottom,
                    transparent 0%, transparent 52%,
                    rgba(var(--bg-rgb), .62) 82%, var(--bg) 100%);
    --panel:     #fffdfa;
    --panel-2:   #efebe3;
    --border:    #ded7ca;
    --border-2:  #c3bcae;
    --gold:      #9a6b14;
    --gold-hi:   #7d5610;
    --gold-dim:  #b08a3e;
    --text:      #1c1e23;
    --muted:     #5f6671;
    --green:     #2d7a44;

    --stand-live-tekst: #1f6b36;
    --stand-komt-tekst: #7a5410;
    --stand-beta-tekst: #93480d;

    --randverloop: linear-gradient(to bottom,
      #efe9df 0%, #eae3d7 20%, #e5ddd0 40%, #e1d8c9 50%,
      #ded4c4 60%, #d9cebc 80%, #d5c9b6 90%, #e3dbcf 100%);
}
:root[data-thema="light"] .stand.live { background: rgba(45,122,68,.12); border-color: rgba(45,122,68,.38); }
:root[data-thema="light"] .stand.komt { background: rgba(154,107,20,.12); border-color: rgba(154,107,20,.38); }
:root[data-thema="light"] .stand.beta { background: rgba(147,72,13,.12); border-color: rgba(147,72,13,.38); }

/* ------------------------------------------------------------- de knop zelf */
.themakiezer {
  background: none; border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); cursor: pointer; font-size: 14px; line-height: 1;
  padding: 7px 9px; margin-left: 10px;
}
.themakiezer:hover { border-color: var(--border-2); background: var(--panel-2); }
.themakiezer:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Eén gutter, hier gezet en nergens anders. */
.wrap { max-width: var(--kolom); margin: 0 auto; padding-inline: 22px; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--head); font-weight: 700; text-wrap: balance; margin: 0; letter-spacing: -.02em; }

/* Het etiket boven een sectie: klein, gespatieerd, in dezelfde letter als de
   koppen. Geen monospace meer - zie de kop van dit bestand. */
.etiket {
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 14px;
}

/* ------------------------------------------------------------------- kop */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(var(--bg-rgb), .88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header.top .wrap { display: flex; align-items: center; gap: 20px; padding-block: 14px; }
.merk { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.merk svg { display: block; flex: none; }
.merk b { font-family: var(--head); font-weight: 700; font-size: 20px; letter-spacing: .01em; }
.merk small {
  font-family: var(--head); font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  border-inline-start: 1px solid var(--border-2); padding-inline-start: 11px; margin-inline-start: 3px;
}
header.top nav { margin-inline-start: auto; display: flex; gap: 24px; flex-wrap: wrap; align-items: center; }
header.top nav a {
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
header.top nav a:hover, header.top nav a[aria-current="page"] { color: var(--text); }
@media (max-width: 760px) {
  header.top { position: static; }
  header.top .wrap { flex-wrap: wrap; gap: 10px 16px; }
  header.top nav { margin-inline-start: 0; width: 100%; gap: 16px; }
  header.top nav a { font-size: 13px; }
  .merk small { display: none; }
}

.taalkiezer {
  font-family: var(--body); font-size: 13px;
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 3px;
  padding: 5px 8px;
}

/* --------------------------------------------------------------- knoppen */
.knop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 2px;
  font-family: var(--head); font-weight: 600; font-size: 15px;
  letter-spacing: .04em; text-decoration: none;
  border: 1px solid var(--gold); color: #17130a; background: var(--gold);
}
.knop:hover { background: var(--gold-hi); border-color: var(--gold-hi); color: #17130a; }
.knop.leeg { background: transparent; color: var(--text); border-color: var(--border-2); }
.knop.leeg:hover { background: var(--panel-2); color: var(--text); border-color: var(--gold-dim); }
.knop[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; }

/* De startknop in de kop. Kleiner dan de knop in de inleiding: daar is hij het
   aanbod, hier is hij een doorgang voor wie al meedoet. */
.knop.klein { padding: 7px 14px; font-size: 13px; letter-spacing: .03em; }

/* Hier moet de kleur WEL overschreven worden, en dat is geen slordigheid van
   de regel hierboven: `header.top nav a` is specifieker dan `.knop` (drie
   elementen plus een klasse tegen een enkele klasse), dus zonder dit staat de
   knoptekst in het grijs van de navigatie op een gouden vlak - onleesbaar, en
   alleen te zien door ernaar te kijken. */
header.top nav a.knop.klein {
  color: #17130a; margin-left: 4px; text-transform: none; letter-spacing: .03em;
}
header.top nav a.knop.klein:hover { color: #17130a; background: var(--gold-hi); }

/* De regel onder de knoppen die zegt dat je een uitnodiging nodig hebt.
   Hij hoort bij de knop en niet bij de inleiding erboven, dus hij staat
   dichterbij en is een maat kleiner. */
.lead.klein { font-size: 15px; margin-top: 10px; opacity: .8; }

/* --------------------------------------------------------------- secties */
section { padding-block: 74px; }
section.lijn { border-top: 1px solid var(--border); }
/* Een sectie zonder eigen kop, die doorloopt op de inleiding erboven.
   De gewone 74px leest daar als een hoofdstuk dat ontbreekt. */
section.aansluitend { padding-top: 26px; }
section > .wrap > h2 { font-size: clamp(26px, 3.6vw, 38px); max-width: 22ch; }
section > .wrap > p.intro { color: var(--muted); max-width: 64ch; margin: 18px 0 0; font-size: 18px; }

/* ------------------------------------------------------------ toestanden */
.stand {
  font-family: var(--head); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px; white-space: nowrap;
}
.stand.live { color: var(--stand-live-tekst); background: rgba(87,179,108,.15); border: 1px solid rgba(87,179,108,.42); }
.stand.komt { color: var(--stand-komt-tekst); background: rgba(224,168,60,.13); border: 1px solid rgba(224,168,60,.4); }
.stand.bouw { color: var(--muted); background: var(--panel-2); border: 1px solid var(--border-2); }
/* Oranje, en met opzet een ANDERE dan .komt.
   Er staan nu drie standen naast elkaar in dezelfde rij kaarten: te spelen
   (groen), open beta (dit) en closed beta van Ludus (.komt, amber). Die laatste
   twee zijn allebei "beta" maar betekenen iets heel verschillends - de ene kun
   je nu spelen, de andere niet. Zaten ze in dezelfde kleur, dan moest je het
   woord lezen om dat te zien, en dan doet het kleurtje niets. */
.stand.beta { color: var(--stand-beta-tekst); background: rgba(230,126,34,.14); border: 1px solid rgba(230,126,34,.45); }
/* Een standlabel dat ergens heen gaat. Zonder dit onderstreept de browser het
   en verft hij het blauw, en dan is het geen label meer maar een link die
   toevallig een kadertje draagt. */
a.stand.naar { text-decoration: none; }
a.stand.naar:hover { background: rgba(224,168,60,.22); border-color: rgba(224,168,60,.65); }

/* ------------------------------------------------------------------ voet */
footer {
  border-top: 1px solid var(--border); background: var(--panel);
  padding-block: 34px; font-size: 14px; color: var(--muted);
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
footer p { margin: 0; line-height: 1.6; }
footer .rechts { text-align: end; }
@media (max-width: 640px) { footer .rechts { text-align: start; } }

/* ================================================================ SPELLEN */
/* Geen marge bovenaan meer. Die stond er om de kaarten los te maken van de
   inleidende alinea; nu die weg is, telt hij op bij de ruimte die de sectie
   zelf al geeft en zweeft de kop los boven de pagina. */
.spellen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
@media (max-width: 900px) { .spellen { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (max-width: 560px) { .spellen { grid-template-columns: 1fr; } }

.kaart {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden; text-decoration: none; color: inherit;
}
.kaart:hover { border-color: var(--border-2); }
.kaart:hover .kaart-titel { color: var(--gold); }

.kaart .plaat { aspect-ratio: 748 / 896; overflow: hidden; background: var(--panel-2); }
.kaart .plaat img { width: 100%; height: 100%; object-fit: cover; }

/*
  Niet elk project heeft een sleutelbeeld. Ludus heeft een pictogram en Street
  Empire heeft nog niets, en dan is een verzonnen plaatje erger dan geen
  plaatje: het belooft een spel dat er zo niet uitziet. Daarom een getekende
  plaat in de eigen kleur van het project, met het pictogram of de naam erop.
  Eerlijk, en het vult de rij.
*/
.kaart .plaat.zelf {
  display: grid; place-items: center; padding: 30px;
  background: var(--eigen, var(--panel-2));
}
.kaart .plaat.zelf img { width: 44%; height: auto; object-fit: contain; }

/* Een tegel met een MERKTEKEN boven het label, in plaats van de naam in
   letters. De naam staat een centimeter lager toch al in de kaarttekst, dus
   hem hier herhalen voegt niets toe - het teken wel.

   Breder dan de 44% hierboven: dat getal is voor een los pictogram op een leeg
   vlak. Dit teken draagt zijn eigen afgeronde tegel met lucht eromheen, dus op
   44% zou het een postzegel worden in een grote vlakte. */
.kaart .plaat.zelf .woord.merkje { display: block; }
.kaart .plaat.zelf .woord.merkje img {
  width: 68%; max-width: 190px; height: auto; margin: 0 auto 14px;
}
.kaart .plaat.zelf .woord {
  font-family: var(--head); font-weight: 700; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.05; text-align: center; color: var(--kaart-titel); letter-spacing: -.02em;
}
.kaart .plaat.zelf .woord span { display: block; color: var(--kaart-titel-sub); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-top: 10px; }

.kaart .tekst { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.kaart-titel { font-family: var(--head); font-weight: 700; font-size: 27px; letter-spacing: -.015em; }
.kaart .genre { color: var(--muted); font-size: 18px; }
.kaart .voet { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ==========================================================================
   PROJECTPAGINA
   ========================================================================== */

/* De kop van een projectpagina: het sleutelbeeld over de volle breedte, met
   de tekst eronder. Het beeld draagt de titel al - er komt hier dus GEEN
   tweede titel overheen. */
.spelkop { border-bottom: 1px solid var(--border); }
/*
  DEZELFDE FOUT ALS OP DE VOORPAGINA, en om dezelfde reden weg. Hier stond een
  aspect-ratio met een max-height van 460 en geen breedte. Zodra die hoogte
  werd afgekapt, rekende de verhouding de BREEDTE terug naar 803 pixels, en
  hield de banner daar op - met de titel eronder wel over de volle breedte.

  Een breedte erbij zetten lost dat op maar snijdt dan met object-fit: cover
  dwars door de tekening, en die verdraagt dat niet: de titel staat bovenin en
  de pompen onderin. Er wordt dus niet meer bijgesneden, op geen enkele
  schermbreedte.
*/
.spelkop .beeld {
  position: relative;
  overflow: hidden;
  background: var(--randverloop);
}
.spelkop .beeld img {
  display: block;
  /* Kleiner dan op de voorpagina, en dat is opzet: daar IS het beeld het
     onderwerp, hier staat het boven de titel.

     Gemeten op een venster van 1600x900, met de hoogte van de band en waar de
     titel dan begint:

         1232 breed -> 706 hoog, titel op 810   (onder de vouw)
         1000 breed -> 573 hoog, titel op 662
          900 breed -> 516 hoog, titel op 605
          800 breed -> 458 hoog, titel op 547   <- dit

     Die 458 is toevallig bijna precies de 460 die de band had toen hij nog
     bijgesneden werd. Het verschil is dat de tekening nu heel is. */
  width: 100%; max-width: 800px; height: auto;
  margin-inline: auto;
}
.spelkop .beeld::after {
  content: ''; position: absolute; inset: 0;
  background: var(--beeldvervaging);
}
.spelkop .onder { padding-block: 28px 44px; }
.spelkop .titelrij { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.spelkop h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.05; }
.spelkop .genre { margin: 10px 0 0; color: var(--gold); font-family: var(--head); font-weight: 600; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; }
.spelkop p.lead { font-size: clamp(17px, 2vw, 19px); color: var(--muted); max-width: 64ch; margin: 18px 0 0; }
.spelkop .knoppen { margin-top: 28px; }

/* Het regeltje feiten onder de knoppen. Kort: soort, platform, prijs. Geen
   opsomming van welke database eronder draait - daar komt niemand voor. */
.feiten {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border);
  /* MEEBEWEGEN en geen vast aantal kolommen. Er stonden er vier, en toen
     Petrol Empire een vijfde feit kreeg ("Op Steam") bleef die in zijn eentje
     op een tweede rij staan. Niet elk spel draagt evenveel feiten, dus het
     aantal hoort uit de inhoud te komen en niet uit de stijl. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 18px 24px;
}
.feiten dt {
  font-family: var(--head); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.feiten dd { margin: 5px 0 0; font-size: 16px; }
@media (max-width: 560px) { .feiten { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------- schermbeelden */
/* TWEE naast elkaar en niet drie. Met drie was elk beeld 369 pixels breed,
   en dit spel is een scherm vol tabellen en getallen - op dat formaat zie je
   dat het druk is en verder niets. Twee is 560 en dan lees je waar je naar
   kijkt. Het derde beeld loopt over de volle breedte. */
.schermen { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 38px; }
/* Het laatste beeld over de volle breedte. Op het RASTERITEM en niet op de
   img: sinds de donkere varianten zit die in een <picture>, en dan is de
   img niet meer het laatste kind van het raster. */
.schermen > :last-child { grid-column: 1 / -1; }
.schermen picture { display: block; }
.schermen img { border: 1px solid var(--border); border-radius: 3px;
                display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .schermen { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- lichtbak

   Een schermbeeld groter bekijken; zie js/beeld.js voor het waarom en voor de
   bediening met het toetsenbord.

   [hidden] moet hier expliciet staan: display:grid hieronder wint anders van
   wat het hidden-attribuut zelf doet, en dan staat de laag altijd open. */
.schermen img { cursor: zoom-in; }
.schermen img:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

body.vast { overflow: hidden; }

.lichtbak { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 28px 20px; background: rgba(7, 8, 11, .93); }
.lichtbak[hidden] { display: none; }
.lichtbak figure { margin: 0; display: flex; flex-direction: column; align-items: center;
  gap: 14px; max-width: 100%; }
.lichtbak img { display: block; width: auto; height: auto;
  max-width: min(1600px, 94vw); max-height: 80vh;
  border: 1px solid var(--border-2); border-radius: 4px; background: var(--panel); }
.lichtbak figcaption { max-width: 76ch; color: var(--muted); font-size: 13px;
  line-height: 1.6; text-align: center; }
.lichtbak .sluit { position: absolute; top: 14px; right: 18px; width: 38px; height: 38px;
  display: grid; place-items: center; font-size: 22px; line-height: 1; cursor: pointer;
  color: var(--text); background: var(--panel); border: 1px solid var(--border-2);
  border-radius: 6px; }
.lichtbak .sluit:hover { color: var(--gold); border-color: var(--gold-dim); }

@media (max-width: 700px) {
  .lichtbak { padding: 16px 12px; }
  .lichtbak img { max-height: 70vh; }
}

/* ---------------------------------------------------------------- kernen */
.kernen { margin: 38px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 40px; }
@media (max-width: 760px) { .kernen { grid-template-columns: 1fr; gap: 22px; } }
.kernen b { display: block; font-family: var(--head); font-weight: 700; font-size: 17px; margin-bottom: 5px; }
.kernen span { color: var(--muted); font-size: 16px; }

/* ------------------------------------------------------------- de prijzen

   Het bedrag stond in dezelfde letter als de zin eronder. Dat is het enige
   waarvoor iemand naar deze sectie scrolt, en met vier kaarten naast elkaar
   was het niet terug te vinden zonder te lezen. Dezelfde kopletter als de
   titels erboven, zodat het bij de pagina hoort en niet als een los stukje
   opmaak aanvoelt. */
.prijzen .bedrag {
  margin: 8px 0 10px;
  font-family: var(--head);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.02em;
  /* De vier bedragen staan onder elkaar in twee kolommen; met cijfers van
     gelijke breedte lopen de komma's recht. */
  font-variant-numeric: tabular-nums;
}

/* "14 dagen": het woord hoort bij het getal maar is geen bedrag. */
.prijzen .bedrag span {
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}

/* --------------------------------------------------------------- roadmap */
.route { margin-top: 38px; display: grid;
  /* auto-fit, want niet elke pagina heeft evenveel kolommen: Petrol Empire
     heeft er twee en Ludus drie. Met een vast aantal bleef er een lege plek
     staan bij wie er minder had. */
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
@media (max-width: 860px) { .route { grid-template-columns: 1fr; } }
.route > div { background: var(--panel); border: 1px solid var(--border); padding: 22px; border-radius: 3px; }
.route h3 { font-size: 15px; margin-bottom: 14px; }
.route ul { margin: 0; padding-inline-start: 0; list-style: none; }
.route li { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.route li:last-child { margin-bottom: 0; }
.route li b { color: var(--text); font-weight: 600; display: block; font-family: var(--head); font-size: 16px; margin-bottom: 2px; }

/* ------------------------------------------------------------ patchnotes */
.versie { border: 1px solid var(--border); background: var(--panel); margin-top: 14px; border-radius: 3px; }
.versie > summary {
  cursor: pointer; padding: 17px 22px; list-style: none;
  display: flex; align-items: baseline; gap: 13px; flex-wrap: wrap;
}
.versie > summary::-webkit-details-marker { display: none; }
.versie > summary:hover { background: var(--panel-2); }
.versie > summary h3 { font-size: 19px; }
.versie > summary .datum { font-size: 14px; color: var(--muted); }
/* De naam van een versie, als die er een draagt - "Einde betaversie". Goud en
   in de kopletter, zodat hij bij de titel hoort en niet bij de datum. */
.versie > summary .bijnaam { font-family: var(--head); font-weight: 600; font-size: 14px;
  color: var(--gold); letter-spacing: .04em; text-transform: uppercase; }
.versie > summary .teken { margin-inline-start: auto; color: var(--gold-dim); font-size: 13px; font-weight: 600; }
.versie[open] > summary { border-bottom: 1px solid var(--border); }
.versie[open] > summary .teken::after { content: 'Sluiten'; }
.versie:not([open]) > summary .teken::after { content: 'Lezen'; }

.versie .lijf { padding: 6px 22px 24px; }
.versie .lijf p, .versie .lijf li { color: var(--muted); font-size: 16px; }
.versie .lijf p strong, .versie .lijf li strong { color: var(--text); }
.versie .inleiding p:first-child { color: var(--text); }
.versie h4.sectie {
  font-family: var(--head); font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  margin: 28px 0 10px; padding-top: 16px; border-top: 1px solid var(--border);
}
.versie h5 { font-family: var(--head); font-size: 17px; font-weight: 700; margin: 20px 0 6px; color: var(--text); }
.versie .lijf ul { padding-inline-start: 20px; }

.meerknop { margin-top: 24px; }
.leegmelding { color: var(--muted); font-style: italic; }

.voetnoot { margin: 34px 0 0; font-size: 15px; color: var(--muted); }

/* ==========================================================================
   CATEGORIEPAGINA  (spellen.html, apps.html, programmas.html)
   ========================================================================== */
.catkop { padding-block: 46px 10px; }
.catkop h1 { font-size: clamp(30px, 4.4vw, 44px); }
.catkop p.intro { color: var(--muted); max-width: 62ch; margin: 16px 0 0; font-size: 18px; }


/* ================================================================= STUDIO */
.studiotekst { max-width: 66ch; }
.studiotekst p { color: var(--muted); font-size: 18px; margin: 0 0 16px; }
.studiotekst p:last-child { margin-bottom: 0; }
.studiotekst strong { color: var(--text); font-weight: 600; }

.afspraken { margin-top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px 34px; }
@media (max-width: 800px) { .afspraken { grid-template-columns: 1fr; gap: 20px; } }
.afspraken h3 { font-size: 16px; margin-bottom: 6px; }
.afspraken p { margin: 0; color: var(--muted); font-size: 15px; }

/* ==========================================================================
   JURIDISCHE PAGINA  (privacy.html, voorwaarden.html)
   ========================================================================== */
/* De leesbreedte hoort op de KINDEREN en niet op het blok zelf. Dit blok
   draagt ook .wrap, en die centreert met margin:auto - een smallere max-width
   erop maakte er dus een gecentreerde kolom van, een eind naar rechts
   geschoven ten opzichte van de kop erboven. Nu houdt het blok de breedte van
   de pagina en krijgt elke alinea zijn eigen regellengte. */
.juridisch { padding-bottom: 20px; }
.juridisch > * { max-width: 70ch; }
.juridisch h2 { font-size: 21px; margin: 40px 0 12px; }
.juridisch h2:first-child { margin-top: 0; }
.juridisch p, .juridisch li { color: var(--muted); font-size: 16.5px; }
.juridisch p { margin: 0 0 14px; }
.juridisch ul { padding-inline-start: 20px; margin: 0 0 14px; }
.juridisch li { margin-bottom: 7px; }
.juridisch strong { color: var(--text); font-weight: 600; }
.juridisch dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0 0 14px; }
.juridisch dt { color: var(--muted); }
.juridisch dd { margin: 0; color: var(--text); }

/* De datum bovenaan. Een juridische tekst zonder datum is waardeloos: je kunt
   dan niet zien welke versie iemand gelezen heeft toen hij akkoord ging. */
.stand-datum {
  font-family: var(--head); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 30px; padding-bottom: 16px; border-bottom: 1px solid var(--border);
}

/* Een product dat nog niet voor iedereen open staat. Staat boven de knoppen
   en niet eronder: wie de knop al gezien heeft, leest de voorwaarde te laat. */
.beta {
  margin: 26px 0 0; padding: 14px 18px;
  border: 1px solid var(--border-2); border-inline-start: 3px solid var(--gold);
  background: var(--panel); border-radius: 3px;
  font-size: 16px; color: var(--muted); max-width: 64ch;
}
.beta strong { color: var(--text); }