@font-face { font-family: "Press Start 2P"; src: url("/fonts/ps2p.woff2") format("woff2"); font-display: swap; }
:root {
  --vlak: #171212; --paneel: #221b1a; --lijn: #4a3f3a; --tekst: #f3ece0; --stil: #b5aaa0;
  --amber: #f2b969; --groen: #8fd694; --rood: #ef8a6f; --blauw: #8fb8d6;
  --mono: ui-monospace, "IBM Plex Mono", SFMono-Regular, 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: 16px/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: 1.25rem/1.4 var(--pixel); color: var(--amber); text-decoration: none; }
.jaar { color: var(--stil); margin-left: .6em; font-size: .6em; }
.prompt { margin: .6rem 0 0; color: var(--stil); font-size: .9rem; }
.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: .68rem/1 var(--mono); }
.deur.goed { border-color: var(--groen); color: var(--groen); }
.deur.fout-gespeeld { border-color: var(--rood); color: var(--rood); }
.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: 3rem; color: var(--vlak); background: var(--amber); border: 0; box-shadow: 3px 3px 0 #000; cursor: pointer; text-decoration: none; }
.knop:hover { background: #f8cf92; }
.knop.licht { background: transparent; color: var(--amber); border: 2px solid var(--amber); box-shadow: none; }
.knop:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

/* dag */
.dagkop { font: .75rem/1.6 var(--pixel); color: var(--stil); margin: 0 0 .75rem; }
.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: 2px 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: .8rem/1.6 var(--pixel); color: var(--amber); margin: 0 0 .6rem; }
.stap p { margin: 0 0 .8rem; }
.les { margin-top: 1.5rem; padding: 1rem; border: 2px 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: 1rem/1.5 var(--pixel); color: var(--amber); }
.over h2 { font: .75rem/1.6 var(--pixel); color: var(--amber); margin-top: 2rem; }
.over li { margin-bottom: .4rem; }
.over code { color: var(--amber); }