@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-mono-600.woff2") format("woff2"); }
@font-face { font-family: "Press Start 2P"; src: url("/fonts/ps2p.woff2") format("woff2"); font-display: swap; }
:root {
  --vlak: #171212; --paneel: #221b1a; --lijn: #3a2726; --tekst: #f3ece0; --stil: #b8b0ac;
  --amber: #f2b969; --groen: #8cc79a; --rood: #d0958a; --blauw: #a8c0d8;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --pixel: "Press Start 2P", var(--mono);
}
* { box-sizing: border-box; }
html { background: var(--vlak); }
body { margin: 0 auto; max-width: 42rem; padding: 1rem; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--vlak); color: var(--tekst); font: 15px/1.55 var(--mono); }
main { flex: 1; }
a { color: var(--amber); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--tekst); outline-offset: 2px; }
.kop { margin-bottom: 1.25rem; }
.merk { font: 24px/1.3 var(--pixel); color: var(--amber); text-decoration: none; }
.jaar { font: 400 15px var(--mono); color: var(--stil); margin-left: .5em; }
.prompt { margin: .6rem 0 0; color: var(--stil); }
.cursor { display: inline-block; width: .6em; height: 1em; margin-left: .2em; vertical-align: text-bottom; background: var(--amber); animation: knipper 1.1s steps(1) infinite; }
@keyframes knipper { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.voet { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px dashed var(--lijn); color: var(--stil); font-size: .85rem; }
.fout { color: var(--rood); }
.laden { color: var(--stil); }

/* kalender */
.deuren { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 34rem) { .deuren { grid-template-columns: repeat(6, 1fr); } }
.deur { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; aspect-ratio: 1; font: 1rem var(--pixel); text-decoration: none; color: var(--amber); background: var(--paneel); border: 3px solid var(--amber); box-shadow: 3px 3px 0 #000; }
.deur:hover { background: #33291f; }
.deur.dicht { color: #8d8279; border-color: var(--lijn); box-shadow: none; background: transparent; }
.deur.vandaag { background: var(--amber); color: var(--vlak); }
.deur.vandaag:hover { background: #f8cf92; }
.deur .merkje { font: 600 14px/1 var(--mono); }
.deur.goed { border-color: var(--groen); color: var(--groen); }
.deur.fout-gespeeld { border-color: var(--blauw); color: var(--blauw); }
.deur.gespeeld { border-color: var(--blauw); color: var(--blauw); }
.legenda { color: var(--stil); font-size: .85rem; margin: 1rem 0 0; }
.meenemen { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--lijn); }

/* knoppen */
.knop { display: inline-block; font: 600 1rem/1.3 var(--mono); padding: .8rem 1rem; min-height: 44px; color: var(--vlak); background: var(--amber); border: 0; cursor: pointer; text-decoration: none; }
.knop:hover { background: #f8cf92; }
.knop.licht { background: transparent; color: var(--amber); border: 1px solid var(--amber); }

/* dag */
.dagkop { font: 500 13px/1.5 var(--mono); color: var(--stil); margin: 0 0 .5rem; }
.opdracht { font-size: 1.3rem; line-height: 1.35; font-weight: 700; margin: 0 0 1rem; }
.feiten { margin: 0 0 1rem; padding-left: 1.2rem; }
.bijschrift { color: var(--stil); font-size: .8rem; margin: .4rem 0 1rem; }
.opties { display: grid; gap: .6rem; margin: 1rem 0; }
.optie { width: 100%; text-align: left; font: 600 1rem/1.3 var(--mono); padding: .85rem 1rem; min-height: 3.1rem; color: var(--tekst); background: var(--paneel); border: 1px solid var(--amber); cursor: pointer; }
.optie:hover:not(:disabled) { background: #33291f; }
.optie:disabled { cursor: default; border-color: var(--lijn); }
.optie .uitslag { display: flex; justify-content: space-between; gap: 1rem; }
.optie.gekozen { border-color: var(--tekst); }
.optie.juist { border-color: var(--groen); color: var(--groen); }
.oordeel { font-weight: 700; margin: 1rem 0; }
.oordeel.goed { color: var(--groen); }
.oordeel.fout { color: var(--rood); }
.stap { border-top: 1px dashed var(--lijn); margin-top: 1.25rem; padding-top: 1rem; }
.stap h2, .les h2 { font: 600 15px/1.55 var(--mono); color: #fff; margin: 0 0 .6rem; }
.stap h2::before, .les h2::before { content: "## "; color: var(--amber); font-weight: 500; }
.stap p { margin: 0 0 .8rem; }
.les { margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--amber); }
.les p { margin: 0; }
.acties { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.melding { color: var(--groen); font-size: .9rem; min-height: 1.4em; margin: .6rem 0 0; }

/* blokken */
.balken { display: grid; gap: .45rem; margin: 0 0 .4rem; }
.balk { display: grid; grid-template-columns: 8.5rem 1fr 3.8rem; gap: .5rem; align-items: center; font-size: .85rem; }
.balk .spoor { height: 1.1rem; background: #0e0b0b; }
.balk .vul { display: block; height: 100%; background: var(--stil); }
.balk.nadruk .vul { background: var(--amber); }
.balk .waarde { text-align: right; }
.eenheid { color: var(--stil); font-size: .8rem; margin: 0 0 .4rem; }
canvas.rooster { display: block; width: 100%; max-width: 30rem; height: auto; image-rendering: pixelated; background: #0e0b0b; }
.sleutel { display: flex; flex-wrap: wrap; gap: .3rem 1rem; list-style: none; padding: 0; margin: .5rem 0 0; font-size: .85rem; }
.sleutel i { display: inline-block; width: .8em; height: .8em; margin-right: .4em; }
.sl-raak { background: var(--groen); } .sl-gemist { background: var(--blauw); } .sl-vals { background: var(--rood); }

/* over */
.over h1 { font: 500 28px/1.2 var(--mono); color: #fff; }
.over h2 { font: 600 15px/1.55 var(--mono); color: #fff; margin-top: 2rem; }
.over h2::before { content: "## "; color: var(--amber); font-weight: 500; }
.over li { margin-bottom: .4rem; }
.over code { color: var(--amber); }

/* meenemen */
.paneel { margin-top: 1rem; padding: 1rem; border: 1px solid var(--lijn); }
.paneel h2 { font: 600 15px/1.55 var(--mono); color: #fff; margin: 0 0 .6rem; }
.paneel h2::before { content: "## "; color: var(--amber); font-weight: 500; }
.paneel > p { margin: 0 0 .6rem; }
canvas.qr { display: block; width: 12rem; max-width: 100%; height: auto; image-rendering: pixelated; margin: 0 0 1rem; }
.label { color: var(--stil); font-size: .8rem; margin-bottom: .1rem !important; }
.getoond { user-select: all; overflow-wrap: anywhere; background: #0e0b0b; padding: .5rem .6rem; }
.getoond.code { font-size: 1.15rem; letter-spacing: .06em; color: var(--amber); }
.invoeren { display: grid; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px dashed var(--lijn); }
.invoer { font: 1.05rem var(--mono); letter-spacing: .06em; padding: .7rem; color: var(--tekst); background: #0e0b0b; border: 1px solid var(--amber); text-transform: uppercase; width: 100%; }

/* merk Datawijs bovenaan */
.topbalk { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 1px dashed var(--lijn); }
.logo { display: block; line-height: 0; }
.logo img { display: block; width: 8.5rem; height: auto; }
.naar-site { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem; font-weight: 600; font-size: .9rem; color: var(--amber); border: 1px solid var(--amber); text-decoration: none; white-space: nowrap; }
.naar-site:hover { background: #33291f; }

/* op een dagpagina telt elke regel boven de vouw */
.op-dag .prompt { display: none; }
.op-dag .kop { margin-bottom: .75rem; }

/* alleen op de testversie */
.testmelding { margin: 0 0 .75rem; padding: .5rem .7rem; font-size: 13px; color: var(--vlak); background: var(--amber); }
.testmelding a { color: var(--vlak); font-weight: 600; }

/* Korte scène op de Noordpool, na afloop van een spel. */
.scene { margin-top: 1.5rem; padding-left: 1rem; border-left: 1px solid var(--lijn); }
.scene p { margin: 0 0 .35rem; }
.scene strong { color: var(--amber); font-weight: 500; }
.meloen { display: block; max-width: 100%; height: auto; image-rendering: pixelated; margin: .5rem 0; }
.stipjes { color: var(--groen); margin: 1rem 0 0; }