/* StuutSMP website: dezelfde huisstijl als in het spel (docs/DESIGN.md). Oranje/crème lucht van het logo en de
   Discord-banner, nachtblauwe panelen met gouden randen zoals het menu, pixelranden en het Jersey 10-pixelfont. */
@font-face{font-family:Jersey;src:url(/assets/fonts/jersey-10-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
:root{
  --nacht:#0B0F1E;--nacht2:#111731;--paneel:#161D38;--paneel2:#1C2547;--omlijning:#061420;--marine:#0B2A3F;
  --rand:#E0A33A;--rand-licht:#FFE7A0;--goud1:#FFF1C2;--goud:#FFC83D;--amber:#FF8A3D;--bruin:#A9521A;--diep:#5A2208;
  --creme:#FBE3C2;--perzik:#F4B26A;--ijs:#4FD1FF;--tekst:#EEF1FA;--zacht:#9AA4BF;--donker:#5E6785;--rood:#FF5468;--groen:#3DDC84;
  --zilver:#cfd8e3;--brons:#d58a4a;
  --pixel:"Jersey",ui-monospace,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --k:4px;--in:1180px;
  /* Jersey 10: een fontpixel is 75/1400 em. Op deze maten vallen de pixels op het scherm (1x en 2x) */
  --f1:18.667px;--f15:28px;--f2:37.333px;--f3:56px;--f4:74.667px;--f5:93.333px;--fp:1px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-synthesis:none;font-variant-ligatures:none;margin:0;background:var(--nacht);color:var(--tekst);font:17px/1.6 var(--sans);min-height:100vh;overflow-x:hidden}
img.px,.px{image-rendering:pixelated}
a{color:var(--goud)}a:hover{color:var(--goud1)}
code{font:600 .9em ui-monospace,Consolas,monospace;background:#0008;border:1px solid #ffffff14;padding:1px 6px;border-radius:4px;color:var(--creme)}
h1,h2,h3{font-family:var(--pixel);font-weight:400;line-height:1;letter-spacing:0;margin:0}
.in{max-width:var(--in);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:var(--goud);color:var(--diep);padding:8px 14px;font-weight:700}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--ijs);outline-offset:2px}
[hidden]{display:none!important}

/* pixelhoeken: knipt de hoeken trapsgewijs af, zoals de panelen in het spel */
.pixhoek,.knop,.paneel,.ip,.chip,.zoek,select.seizoen,.kaart,.plek,.rij,.stat,.kpi,.dood,.leeg,.tabs a,.tabel,.knopje{
  clip-path:polygon(0 var(--k),var(--k) var(--k),var(--k) 0,calc(100% - var(--k)) 0,calc(100% - var(--k)) var(--k),100% var(--k),100% calc(100% - var(--k)),calc(100% - var(--k)) calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,var(--k) calc(100% - var(--k)),0 calc(100% - var(--k)))}

/* ---- kop */
.top{position:sticky;top:0;z-index:30;background:#0B0F1Ee6;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:3px solid var(--omlijning);box-shadow:0 1px 0 #E0A33A33}
.top .in{display:flex;align-items:center;gap:16px;height:64px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.merk-woord{width:186px;height:32px;transition:transform .2s}.merk:hover .merk-woord{transform:rotate(-2deg) scale(1.04)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav>a:not(.knop){font:400 var(--f1) var(--pixel);color:var(--zacht);text-decoration:none;padding:8px 12px;position:relative;transition:color .15s}
.nav>a:not(.knop):hover{color:var(--tekst)}
.nav>a.act{color:var(--goud)}
.nav>a.act::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:3px;background:var(--goud);box-shadow:0 3px 0 var(--bruin)}
.nav .knop{margin-left:10px}
.menuknop{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.menuknop span{display:block;width:24px;height:3px;background:var(--goud);margin:4px 0;transition:.2s}
.menuknop[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menuknop[aria-expanded=true] span:nth-child(2){opacity:0}
.menuknop[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- knoppen: dik, met een donkere onderkant die je indrukt */
.knoppen{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:22px}.knoppen.links{justify-content:flex-start}
.knop{--onder:var(--bruin);display:inline-flex;align-items:center;gap:8px;font:400 var(--f15) var(--pixel);letter-spacing:0;text-decoration:none;cursor:pointer;
  color:var(--diep);background:linear-gradient(var(--goud1),var(--goud) 45%,var(--amber));border:0;padding:12px 22px 16px;
  box-shadow:inset 0 -5px 0 var(--onder),inset 0 3px 0 #ffffff80;transition:transform .08s,filter .15s}
.knop:hover{color:var(--diep);filter:brightness(1.08);transform:translateY(-2px)}
.knop:active{transform:translateY(2px);box-shadow:inset 0 -2px 0 var(--onder),inset 0 3px 0 #ffffff60;padding-top:14px;padding-bottom:14px}
.knop.licht{--onder:#05070f;color:var(--creme);background:linear-gradient(var(--paneel2),var(--paneel));box-shadow:inset 0 -5px 0 var(--onder),inset 0 0 0 2px var(--rand)}
.knop.licht:hover{color:var(--goud1)}
.knop.licht:active{box-shadow:inset 0 -2px 0 var(--onder),inset 0 0 0 2px var(--rand)}
.knop.discord{--onder:#2b3496;color:#fff;background:linear-gradient(#7d86ff,#5865F2)}
.knop.klein{font-size:16px;padding:8px 14px 11px}.knop.klein:active{padding-top:10px;padding-bottom:9px}
.knop img{width:18px;height:18px;image-rendering:pixelated}

/* ---- held (homepage): de oranje lucht van de banner, met fonkelende sterretjes */
.held{position:relative;background:linear-gradient(#FFDCA6 0%,#FBC27E 45%,#F3A04E 100%);color:var(--diep);overflow:hidden;padding:56px 0 96px;min-height:min(86vh,760px);display:flex;align-items:center}
.lucht{position:absolute;inset:0;pointer-events:none}
.ster{position:absolute;width:12px;height:12px;opacity:0;animation:fonkel var(--d,3s) ease-in-out var(--w,0s) infinite}
.ster::before,.ster::after{content:"";position:absolute;background:#fff}
.ster::before{left:4px;top:0;width:4px;height:12px}.ster::after{left:0;top:4px;width:12px;height:4px}
.ster.klein{transform:scale(.5)}
@keyframes fonkel{0%,100%{opacity:0}50%{opacity:.95}}
.held-in{position:relative;text-align:center;width:100%}
.held-logo{width:min(720px,94%);height:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 0 #a9521a40);animation:binnen .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes binnen{from{opacity:0;transform:translateY(24px) scale(.94)}}
.held-zin{font:400 var(--f2)/1.3 var(--pixel);margin:12px 0 18px;color:#6a2c0c}.held-zin b{color:#c4211f}
.live{display:inline-flex;align-items:center;gap:10px;background:#ffffffa8;border:2px solid #fff;color:#5A2208;font:400 var(--f1) var(--pixel);padding:6px 16px;border-radius:999px;box-shadow:0 3px 0 #a9521a40}
.live-stip{width:10px;height:10px;background:var(--donker);box-shadow:0 0 0 3px #5e678533}
.live.aan .live-stip{background:#20b866;box-shadow:0 0 0 3px #20b86633;animation:puls 1.4s infinite}
@keyframes puls{50%{box-shadow:0 0 0 7px #20b86600}}
.aftel{display:flex;justify-content:center;gap:12px;margin:22px 0 4px}
.aftel .telblok{background:var(--nacht);color:var(--goud);min-width:84px;padding:10px 8px 8px;box-shadow:inset 0 -5px 0 #000,inset 0 0 0 3px var(--rand)}
.aftel b{display:block;font:400 var(--f3)/1 var(--pixel);font-variant-numeric:tabular-nums;color:var(--goud1)}
.aftel span{font:400 var(--f1) var(--pixel);letter-spacing:var(--fp);text-transform:uppercase;color:var(--perzik)}
.aftel-titel{font:400 var(--f1) var(--pixel);margin:22px 0 0;color:#6a2c0c}
.ip-blok{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:22px}
.ip{background:var(--nacht);border:0;cursor:pointer;color:var(--tekst);padding:12px 30px 16px;display:grid;gap:2px;justify-items:center;
  box-shadow:inset 0 -6px 0 #000,inset 0 0 0 3px var(--rand);transition:transform .1s}
.ip:hover{transform:translateY(-2px) rotate(-.4deg)}.ip:active{transform:translateY(2px)}
.ip-label{font:400 var(--f1) var(--pixel);letter-spacing:var(--fp);text-transform:uppercase;color:var(--zacht)}
.ip-adres{font:400 var(--f3)/1.1 var(--pixel);color:var(--goud);text-shadow:0 3px 0 var(--bruin)}
.ip-kopieer{font:600 14px var(--sans);color:var(--perzik)}.ip.ok .ip-kopieer{color:var(--groen)}
.ip-versie{font:400 var(--f1) var(--pixel);color:#7a3a14}
.held-rand{position:absolute;left:0;right:0;bottom:-1px;height:40px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' shape-rendering='crispEdges'%3E%3Cpath fill='%230B0F1E' d='M0 24h16v-8h16v8h24v-16h16v8h24v8h16v-16h16v16h16v-8h16v8V40H0z'/%3E%3C/svg%3E") repeat-x bottom/160px 40px}

/* ---- secties */
.sectie{padding:84px 0;position:relative}
.sectie.donker{background:linear-gradient(180deg,var(--nacht2),var(--nacht));border-top:3px solid var(--omlijning);border-bottom:3px solid var(--omlijning)}
.sectie-kop{max-width:720px;margin:0 auto 38px;text-align:center}
.sectie-kop h2{font-size:var(--f3);color:var(--goud);text-shadow:0 4px 0 var(--omlijning),0 4px 0 var(--bruin)}
.sectie-kop p{color:var(--zacht);margin:12px 0 0;font-size:18px}
.label{display:inline-flex;align-items:center;gap:8px;font:400 var(--f1) var(--pixel);letter-spacing:var(--fp);text-transform:uppercase;color:var(--perzik);margin-bottom:10px}
.label img{width:18px;height:18px;image-rendering:pixelated}
.meer{text-align:center;margin-top:28px;font:400 var(--f1) var(--pixel)}.meer a{text-decoration:none;display:inline-flex;align-items:center;gap:8px}.meer img{width:18px;image-rendering:pixelated;transition:transform .2s}.meer a:hover img{transform:translateX(4px)}
.zacht{color:var(--zacht)}

.paneel{background:linear-gradient(180deg,var(--paneel2),var(--paneel));box-shadow:inset 0 0 0 2px #E0A33A66,inset 0 -5px 0 #05070f;padding:22px 24px}

/* feature-kaarten uit het resourcepack: groot geschaald, pixelscherp, kantelen mee met de muis */
.kaartrij{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;align-items:start}
.kaartrij.klein{grid-template-columns:repeat(auto-fit,minmax(150px,190px));justify-content:center}
.fkaart{margin:0;perspective:700px;text-align:center}
.fkaart-img{width:100%;height:auto;image-rendering:pixelated;display:block;transition:transform .25s cubic-bezier(.2,.9,.3,1.3),filter .25s;
  transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));filter:drop-shadow(0 8px 0 #00000055)}
.fkaart:hover .fkaart-img{transform:translateY(-8px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) scale(1.03);filter:drop-shadow(0 18px 14px #000a) drop-shadow(0 0 18px #ffc83d33)}
.fkaart figcaption{margin-top:14px;color:var(--zacht);font-size:15px;line-height:1.5}
.fkaart figcaption b{display:block;font:400 var(--f15) var(--pixel);color:var(--creme);margin-bottom:4px}

/* tijdlijn van het seizoen */
.tijdlijn{list-style:none;margin:0;padding:0 0 10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:18px;position:relative}
.tijdlijn::before{content:"";position:absolute;left:0;right:0;top:118px;height:6px;background:repeating-linear-gradient(90deg,var(--rand) 0 12px,transparent 12px 20px);opacity:.5}
.stap{position:relative;text-align:center}
.stap-kaart{width:132px;margin:0 auto}.stap-kaart img{width:100%;height:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 0 #0008);transition:transform .2s}
.stap:hover .stap-kaart img{transform:translateY(-6px) rotate(-2deg)}
.stap-dag{display:inline-block;font:400 var(--f1) var(--pixel);letter-spacing:var(--fp);background:var(--goud);color:var(--diep);padding:2px 10px;margin:12px 0 6px;box-shadow:inset 0 -3px 0 var(--bruin)}
.stap b{display:block;font:400 var(--f15) var(--pixel);color:var(--creme)}
.stap p{color:var(--zacht);font-size:14px;margin:4px 0 0}
.stap.voorbij{opacity:.55}.stap.voorbij .stap-dag{background:var(--donker);color:var(--tekst);box-shadow:inset 0 -3px 0 #333a55}
.stap.nu .stap-dag{background:var(--groen);color:#062a14;box-shadow:inset 0 -3px 0 #168a4a}
.stap.nu .stap-kaart::after{content:"NU";position:absolute;top:-10px;left:50%;transform:translateX(30px) rotate(8deg);font:400 var(--f1) var(--pixel);background:var(--rood);color:#fff;padding:2px 8px;box-shadow:0 3px 0 #8a1020;animation:wiebel 1.6s ease-in-out infinite}
@keyframes wiebel{50%{transform:translateX(30px) rotate(-6deg)}}

/* live-blok op de homepage */
.nu-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:18px}
.nu-grid h3{font-size:var(--f15);color:var(--goud);margin-bottom:14px;display:flex;align-items:center;gap:8px}.nu-grid h3 img{width:18px;image-rendering:pixelated}
.koppen{display:flex;flex-wrap:wrap;gap:8px}
.koppen a{position:relative;display:block}.koppen img{width:44px;height:44px;display:block;transition:transform .15s}.koppen a:hover img{transform:translateY(-3px) scale(1.1)}
.koppen a::after{content:attr(data-naam);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--nacht);color:var(--tekst);font:400 var(--f1) var(--pixel);padding:3px 8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.15s;box-shadow:inset 0 0 0 2px var(--rand)}
.koppen a:hover::after{opacity:1}
.mini-top{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mini-top li a{display:grid;grid-template-columns:28px 32px 1fr auto;gap:10px;align-items:center;text-decoration:none;color:var(--tekst);padding:4px 0}
.mini-top .nr{font:400 var(--f1) var(--pixel);color:var(--zacht)}.mini-top li:nth-child(1) .nr{color:var(--goud)}.mini-top li:nth-child(2) .nr{color:var(--zilver)}.mini-top li:nth-child(3) .nr{color:var(--brons)}
.mini-top img{width:32px;height:32px}.mini-top b{font:400 var(--f1) var(--pixel);color:var(--creme)}
.mini-top a:hover span{color:var(--goud)}
.mini-tabs{display:flex;gap:6px;margin:-4px 0 12px;flex-wrap:wrap}
.mini-tabs button{font:400 var(--f1) var(--pixel);background:none;border:2px solid #ffffff1a;color:var(--zacht);padding:3px 10px;cursor:pointer}
.mini-tabs button.act{background:var(--goud);color:var(--diep);border-color:var(--goud)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.feed li{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;font-size:15px;line-height:1.35;animation:binnen .4s both}
.feed img{width:32px;height:32px}.feed .t{color:var(--zacht);font-size:13px;white-space:nowrap}.feed a{color:var(--creme);font-weight:700;text-decoration:none}.feed a:hover{color:var(--goud)}
.feed .uit a{color:var(--rood)}
.nu-leeg{color:var(--zacht);font-size:15px;margin:0}

/* meedoen */
.stappen{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.stappen li{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;align-content:start}
.stappen .nr{font:400 var(--f15)/1 var(--pixel);color:var(--diep);background:var(--goud);width:42px;height:42px;display:grid;place-items:center;padding-bottom:4px;box-shadow:inset 0 -4px 0 var(--bruin);--k:3px;
  clip-path:polygon(0 var(--k),var(--k) var(--k),var(--k) 0,calc(100% - var(--k)) 0,calc(100% - var(--k)) var(--k),100% var(--k),100% calc(100% - var(--k)),calc(100% - var(--k)) calc(100% - var(--k)),calc(100% - var(--k)) 100%,var(--k) 100%,var(--k) calc(100% - var(--k)),0 calc(100% - var(--k)))}
.stappen b{display:block;font:400 var(--f15)/1.15 var(--pixel);color:var(--creme)}
.stappen p{grid-column:1/-1;margin-top:12px!important}
.stappen p{color:var(--zacht);margin:0;font-size:16px}
.code-kopieer{font:400 var(--f1) var(--pixel);background:var(--nacht);color:var(--goud);border:2px solid var(--rand);padding:1px 8px;cursor:pointer}
.code-kopieer:hover{background:var(--goud);color:var(--diep)}.code-kopieer.ok{border-color:var(--groen);color:var(--groen)}
.cta{display:grid;grid-template-columns:150px 1fr;gap:28px;align-items:center;padding:26px 30px}
.cta .fkaart-img{filter:drop-shadow(0 8px 0 #0008);transform:rotate(-4deg)}
.cta h3{font-size:var(--f2);color:var(--goud);margin-bottom:8px}.cta p{color:var(--zacht);margin:0}.cta .knoppen{margin-top:16px}

/* winnaars */
.winnaars{display:flex;flex-wrap:wrap;gap:22px;justify-content:center}
.winnaar{text-align:center;text-decoration:none;color:var(--tekst);width:200px}
.winnaar img.skin{height:220px;filter:drop-shadow(0 10px 0 #0008)}.winnaar .kroon{width:36px;image-rendering:pixelated;display:block;margin:0 auto -6px;animation:zweef 3s ease-in-out infinite}
.winnaar b{display:block;font:400 var(--f15) var(--pixel);color:var(--goud)}.winnaar span{color:var(--zacht);font-size:14px}

/* Stuut */
.stuut{background:radial-gradient(600px 300px at 20% 50%,#ff8a3d1f,transparent 70%)}
.stuut-in{display:grid;grid-template-columns:220px 1fr auto;gap:40px;align-items:center}
.stuut h2{font-size:var(--f3);color:var(--goud);margin-bottom:12px}
.stuut p{color:var(--tekst);margin:0 0 10px;max-width:560px}
.stuut-kat{position:relative;background:none;border:0;padding:0;cursor:pointer;width:220px;height:220px}
.stuut-img{width:100%;height:100%;image-rendering:pixelated;filter:drop-shadow(0 10px 0 #0009);animation:zweef 4s ease-in-out infinite;transition:transform .12s}
.stuut-kat:active .stuut-img{transform:scale(.92) rotate(-4deg)}
.stuut-kat.aai .stuut-img{animation:aai .4s}
@keyframes aai{30%{transform:scale(1.08,.9)}60%{transform:scale(.96,1.06)}}
@keyframes zweef{50%{transform:translateY(-8px)}}
.ballon{position:absolute;top:-14px;right:-30px;font:400 var(--f1) var(--pixel);background:#fff;color:var(--diep);padding:6px 12px;box-shadow:0 4px 0 #0006;opacity:0;transform:translateY(8px) scale(.8);transition:.18s;pointer-events:none;white-space:nowrap}
.ballon.aan{opacity:1;transform:none}
.geheim{margin:0;width:170px;animation:binnen .6s cubic-bezier(.2,1.4,.4,1) both}.geheim img{width:100%;image-rendering:pixelated;filter:drop-shadow(0 0 24px #b07bff88)}

/* onthullen bij scrollen */
.js .onthul{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1)}
.js .onthul.zichtbaar{opacity:1;transform:none}

/* ---- paginakop (gidsen en statistieken): dezelfde oranje lucht als de homepage */
.pagina-kop{position:relative;background:linear-gradient(#FFDCA6,#FBC27E 55%,#F3A04E);color:var(--diep);padding:54px 0 86px;overflow:hidden}
.pagina-kop .in{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px}
.pk-tekst{max-width:680px;animation:binnen .6s cubic-bezier(.2,1.2,.4,1) both}
.pagina-kop h1{font-size:var(--f4);color:var(--diep);text-shadow:0 4px 0 #ffffffa0,0 8px 0 #a9521a33;margin:2px 0 6px}
.pagina-kop p{margin:8px 0 0;font-size:19px;color:#6a2c0c;max-width:640px}
.pagina-kop p strong{color:var(--diep)}
.pagina-kop .label{color:#8a3a14}
.pagina-kop .knoppen{margin-top:22px}
.pagina-kop.compact{padding:38px 0 72px}.pagina-kop.compact h1{font-size:var(--f4)}
.feitjes{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0}
.feitjes li{display:inline-flex;align-items:center;gap:8px;background:#fffffff0;color:var(--diep);font:400 var(--f1) var(--pixel);padding:5px 12px 6px;box-shadow:0 3px 0 #a9521a40}
.feitjes img{width:18px;height:18px;image-rendering:pixelated}
.pk-ip{font-size:16px!important;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px!important}
.pk-ip .code-kopieer{font-size:19px;background:var(--nacht)}
.pk-kaarten{position:relative;width:300px;height:230px;flex-shrink:0}
.pk-kaarten img{position:absolute;width:150px;height:auto;image-rendering:pixelated;filter:drop-shadow(0 10px 0 #a9521a55);transition:transform .3s cubic-bezier(.2,1.4,.4,1)}
.pk-k1{left:0;top:30px;transform:rotate(-10deg)}.pk-k2{left:75px;top:0;transform:rotate(2deg);z-index:1}.pk-k3{left:150px;top:34px;transform:rotate(12deg)}
.pk-kaarten:hover .pk-k1{transform:rotate(-16deg) translate(-10px,-6px)}.pk-kaarten:hover .pk-k2{transform:translateY(-14px)}.pk-kaarten:hover .pk-k3{transform:rotate(18deg) translate(10px,-6px)}
.pk-kaarten.enkel{width:190px}.pk-kaarten.enkel .pk-k1{width:170px;left:10px;top:10px;transform:rotate(5deg)}.pk-kaarten.enkel:hover .pk-k1{transform:rotate(0) translateY(-8px)}
.pk-badge{flex-shrink:0;display:grid;justify-items:center;gap:6px;animation:zweef 4s ease-in-out infinite}
.pk-vink{width:120px;height:120px;image-rendering:pixelated;background:var(--nacht);padding:18px;box-shadow:inset 0 -8px 0 #000,inset 0 0 0 4px var(--rand)}
.pk-badge span{font:400 var(--f15) var(--pixel);background:#1a6a3a;color:#d6ffe6;padding:2px 14px 4px;box-shadow:inset 0 -3px 0 #0d3f22}
.seizoen-status{margin-top:16px;display:inline-flex;align-items:flex-start;max-width:100%;gap:10px;background:var(--nacht);color:var(--creme);padding:8px 16px 10px;font:400 var(--f1) var(--pixel);box-shadow:inset 0 -4px 0 #000,inset 0 0 0 2px var(--rand)}
.seizoen-status b{color:var(--goud);font-weight:400}.seizoen-status img{margin-top:3px;width:18px;height:18px;image-rendering:pixelated;flex-shrink:0}

/* ---- gidsen: inhoudsopgave links, hoofdstukken als panelen */
.gids{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start;padding-top:44px;padding-bottom:90px}
.toc{position:sticky;top:88px;display:flex;flex-direction:column;gap:2px;max-height:calc(100vh - 110px);overflow:auto}
.toc b{font:400 var(--f1) var(--pixel);letter-spacing:var(--fp);text-transform:uppercase;color:var(--perzik);margin:0 0 8px 10px}
.toc a{display:flex;align-items:center;gap:10px;color:var(--zacht);text-decoration:none;padding:6px 10px;font:400 var(--f1)/1.1 var(--pixel);border-left:3px solid #ffffff10;transition:.15s}
.toc a img{width:16px;height:16px;image-rendering:pixelated;opacity:.55;transition:.15s;flex-shrink:0}
.toc a:hover{color:var(--tekst);border-left-color:var(--rand)}.toc a:hover img{opacity:1}
.toc a.act{color:var(--goud);border-left-color:var(--goud);background:linear-gradient(90deg,#ffc83d1a,transparent)}.toc a.act img{opacity:1}
.blokken{display:grid;gap:22px;min-width:0}
.blok{padding:0;scroll-margin-top:86px}
.blok-kop{display:flex;align-items:center;gap:20px;padding:22px 30px 18px;background:linear-gradient(90deg,#ffb52e14,transparent 70%);border-bottom:2px dashed #E0A33A33}
.blok-kop h2{font-size:var(--f2);color:var(--goud);text-shadow:0 3px 0 var(--omlijning)}
.blok-kop .label{margin-bottom:4px}
.blok-kaart{width:74px;height:auto;image-rendering:pixelated;flex-shrink:0;transform:rotate(-4deg);filter:drop-shadow(0 5px 0 #0009);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.blok:hover .blok-kaart{transform:rotate(3deg) translateY(-4px) scale(1.06)}
.blok-icoon{width:64px;height:64px;flex-shrink:0;display:grid;place-items:center;background:var(--nacht);box-shadow:inset 0 -5px 0 #000,inset 0 0 0 3px var(--rand)}
.blok-icoon img{width:32px;height:32px;image-rendering:pixelated}
.blok-nr{width:64px;height:64px;flex-shrink:0;display:grid;place-items:center;font:400 var(--f2)/1 var(--pixel);color:var(--diep);padding-bottom:6px;background:linear-gradient(var(--goud1),var(--goud) 45%,var(--amber));box-shadow:inset 0 -6px 0 var(--bruin)}
.blok .proza{padding:20px 30px 26px}
.kader{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;background:#3a141640;box-shadow:inset 4px 0 0 var(--rood)}
.kader img{width:24px;height:24px;image-rendering:pixelated;flex-shrink:0;margin-top:3px}.kader p{margin:0;color:#ffd9dd}

.proza>:first-child{margin-top:0}.proza>:last-child{margin-bottom:0}
.proza h3{font-size:var(--f15);color:var(--creme);margin:24px 0 8px}
.proza p,.proza li{color:#d9deea}.proza strong{color:var(--creme)}
.proza ul{list-style:none;padding-left:0;margin:12px 0}.proza ul li{position:relative;padding-left:26px;margin:9px 0}
.proza ul li::before{content:"";position:absolute;left:4px;top:.6em;width:8px;height:8px;background:var(--amber);box-shadow:2px 2px 0 var(--bruin)}
.proza ol{list-style:none;padding:0;margin:12px 0;counter-reset:nr;display:grid;gap:10px}
.proza ol li{counter-increment:nr;position:relative;padding:4px 0 4px 46px;min-height:32px}
.proza ol li::before{content:counter(nr);position:absolute;left:0;top:0;width:32px;height:32px;display:grid;place-items:center;font:400 var(--f1)/1 var(--pixel);padding-bottom:3px;color:var(--diep);background:var(--goud);box-shadow:inset 0 -3px 0 var(--bruin)}
.proza a{text-underline-offset:3px}
.commandos{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:14px 0 0}
.commandos div{background:#0006;padding:12px 14px;box-shadow:inset 0 -3px 0 #000,inset 0 0 0 1px #ffffff10}
.commandos dt code{font:400 var(--f1) var(--pixel);background:none;border:0;padding:0;color:var(--goud)}
.commandos dd{margin:4px 0 0;color:var(--zacht);font-size:15px}
.proza .treden{list-style:none;padding:0!important;margin:16px 0!important;display:flex!important;align-items:flex-end;gap:8px!important;counter-reset:none!important}
.proza .treden li{flex:1;padding:12px 12px 14px!important;margin:0!important;min-height:0!important;background:linear-gradient(180deg,#2a3566,var(--paneel));box-shadow:inset 0 -4px 0 #000,inset 0 3px 0 var(--rand);display:flex;flex-direction:column;gap:4px;font-size:15px}
.proza .treden li::before{display:none}
.proza .treden li:nth-child(1){height:96px}.proza .treden li:nth-child(2){height:116px}.proza .treden li:nth-child(3){height:136px}.proza .treden li:nth-child(4){height:156px}.proza .treden li:nth-child(5){height:176px;box-shadow:inset 0 -4px 0 #000,inset 0 3px 0 var(--rood);background:linear-gradient(180deg,#4a1d2a,var(--paneel))}
.proza .trede-wanneer{font:400 var(--f1)/1 var(--pixel);color:var(--goud)}

/* ---- stemmen */
.in.smal{max-width:980px}
.stem{padding-top:44px;padding-bottom:90px}
.stem-uitleg{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:56px}
.stem-uitleg .paneel{display:flex;gap:16px;align-items:flex-start}
.stem-uitleg img{width:28px;height:28px;image-rendering:pixelated;flex-shrink:0;margin-top:2px}.stem-uitleg p{margin:0;color:#d9deea}
.klein-kop{margin-bottom:26px}
.stemkaarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.stemkaart{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px 16px;text-decoration:none;color:var(--tekst);padding:18px 20px;transition:transform .15s}
a.stemkaart:hover{transform:translateY(-4px)}
.stemkaart b{font:400 var(--f15)/1 var(--pixel);overflow-wrap:break-word;color:var(--creme)}
.sk-nr{grid-row:span 2;width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;font:400 var(--f15)/1 var(--pixel);padding-bottom:4px;color:var(--diep);background:var(--goud);box-shadow:inset 0 -4px 0 var(--bruin)}
.stemkaart .knop img{width:14px;height:14px}
.stemkaart.uit{opacity:.75}.stemkaart.uit .sk-nr{background:var(--donker);color:var(--tekst);box-shadow:inset 0 -4px 0 #333a55}
.stemkaart .knop,.sk-volgt{grid-column:2;justify-self:start}
.sk-volgt{white-space:nowrap;font:400 var(--f1) var(--pixel);color:var(--zacht);border:2px dashed #ffffff26;padding:3px 10px 5px}
.sk-tel{grid-column:2;color:var(--zacht);font-size:14px}
.stem-live{margin-top:56px}.stem-live .live-stip{display:inline-block;background:#20b866;box-shadow:0 0 0 3px #20b86633;animation:puls 1.4s infinite}
.stem-top{padding:20px 22px}.stem-top h3{font-size:var(--f15);color:var(--goud);margin:0 0 14px;display:flex;align-items:center;gap:8px}.stem-top h3 img{width:18px;image-rendering:pixelated}
.stem-teller{font:400 var(--f1)/1 var(--pixel);background:var(--goud);color:var(--diep);padding:2px 7px 4px;margin-left:2px}

.tabel{overflow-x:auto;margin:16px 0;background:#0005}
table{border-collapse:collapse;width:100%;font-size:15px}
td,th{padding:10px 14px;text-align:left;border-bottom:1px solid #ffffff12;vertical-align:top}
th{font:400 var(--f1) var(--pixel);letter-spacing:0;color:var(--diep);background:linear-gradient(var(--goud),var(--amber))}
tr:nth-child(even) td{background:#ffffff05}tr:hover td{background:#ffc83d0a}

/* ---- statistieken (stats.js tekent deze klassen) */
.stats{padding-top:30px;padding-bottom:80px}
.stats-balk{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.tabs a{display:inline-flex;align-items:center;gap:8px;font:400 var(--f1) var(--pixel);text-decoration:none;color:var(--zacht);background:var(--paneel);padding:9px 18px 12px;box-shadow:inset 0 -4px 0 #05070f;transition:.15s}
.tabs a:hover{color:var(--tekst);transform:translateY(-2px)}
.tabs a img{width:16px;height:16px;image-rendering:pixelated}
.tabs a.act{color:var(--diep);background:linear-gradient(var(--goud1),var(--goud) 45%,var(--amber));box-shadow:inset 0 -4px 0 var(--bruin)}
select.seizoen{background:var(--paneel);color:var(--tekst);border:0;box-shadow:inset 0 0 0 2px #ffffff1a;padding:10px 14px;font:400 var(--f1) var(--pixel);cursor:pointer}
.vers{color:var(--donker);font-size:12px;text-align:right;margin:4px 0 8px;min-height:18px}
.stats h1{font-size:var(--f4);color:var(--goud);margin:6px 0 4px}
.ondertitel{color:var(--zacht);margin:0 0 14px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 26px}
.kpi{background:linear-gradient(180deg,var(--paneel2),var(--paneel));box-shadow:inset 0 0 0 2px #E0A33A44,inset 0 -4px 0 #05070f;padding:14px 16px}
.kpi b{display:block;font:400 var(--f2) var(--pixel);font-variant-numeric:tabular-nums;color:var(--goud1)}.kpi span{color:var(--zacht);font-size:13px;text-transform:uppercase;letter-spacing:.6px}
.balk{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 18px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:0;background:var(--paneel);color:var(--zacht);padding:7px 14px 9px;font:400 var(--f1) var(--pixel);cursor:pointer;box-shadow:inset 0 -3px 0 #05070f;transition:.12s;--k:3px}
.chip:hover{color:var(--tekst);transform:translateY(-1px)}.chip.act{background:var(--creme);color:var(--diep);box-shadow:inset 0 -3px 0 var(--perzik)}
.zoek{flex:1;min-width:180px;background:var(--paneel);border:0;box-shadow:inset 0 0 0 2px #ffffff1a;padding:10px 14px;color:var(--tekst);font:16px var(--sans)}
.zoek:focus{box-shadow:inset 0 0 0 2px var(--rand);outline:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.kaart{position:relative;display:block;text-decoration:none;color:var(--tekst);background:linear-gradient(180deg,var(--paneel2),var(--paneel));box-shadow:inset 0 0 0 2px #E0A33A33,inset 0 -5px 0 #05070f;transition:transform .18s,box-shadow .18s}
.kaart:hover{transform:translateY(-5px);box-shadow:inset 0 0 0 2px var(--rand),inset 0 -5px 0 #05070f}
.speler .render{height:210px;display:flex;align-items:flex-end;justify-content:center;background:radial-gradient(110px 50px at 50% 92%,#ffc27a2a,transparent 70%),linear-gradient(#ffdca614,transparent)}
.speler .render img{height:200px;transition:transform .25s;filter:drop-shadow(0 6px 0 #0007)}
.kaart:hover .render img{transform:scale(1.06) rotate(-2deg)}
.speler.uit .render img{filter:grayscale(1) brightness(.6)}
.speler .info{padding:12px 14px 16px}
.naam{font:400 var(--f15) var(--pixel);display:flex;align-items:center;gap:6px}
.mini{display:flex;flex-wrap:wrap;gap:4px 12px;white-space:nowrap;color:var(--zacht);font-size:13px;margin-top:6px;font-variant-numeric:tabular-nums}.mini b{color:var(--tekst)}
.pil{position:absolute;top:10px;left:10px;font:400 var(--f1) var(--pixel);letter-spacing:0;text-transform:uppercase;padding:3px 9px;background:#000a;color:var(--zacht);z-index:1}
.pil.online{background:#0f3a22;color:var(--groen)}.pil.online::before{content:"";display:inline-block;width:7px;height:7px;background:var(--groen);margin-right:6px;animation:knipper 1.4s infinite}
.pil.uit{background:#3a1416;color:#ff9a9d}
@keyframes knipper{50%{opacity:.3}}
.harten{display:inline-flex;gap:2px;margin-left:auto}
.hart{width:18px;height:18px;display:inline-block;background:url(/img/px/hart.png) center/contain no-repeat;image-rendering:pixelated}.hart.weg{filter:grayscale(1) brightness(.45);opacity:.6}
.team{font:400 var(--f1) var(--pixel);color:var(--perzik);box-shadow:inset 0 0 0 1px #F4B26A66;padding:1px 6px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:14px;align-items:end;margin:8px 0 22px}
.plek{display:block;text-align:center;text-decoration:none;color:var(--tekst);padding:14px 10px 18px;background:linear-gradient(180deg,var(--paneel2),var(--paneel));box-shadow:inset 0 0 0 2px #ffffff14,inset 0 -6px 0 #05070f;position:relative;transition:transform .18s}
.plek:hover{transform:translateY(-4px)}
.plek img{height:180px;filter:drop-shadow(0 8px 0 #0008)}.plek.p1 img{height:230px}
.plek .rang{position:absolute;top:10px;left:14px;font:400 var(--f2) var(--pixel)}.p1 .rang{color:var(--goud)}.p2 .rang{color:var(--zilver)}.p3 .rang{color:var(--brons)}
.plek.p1{box-shadow:inset 0 0 0 3px var(--goud),inset 0 -6px 0 #05070f;background:linear-gradient(180deg,#3a2a14,var(--paneel) 60%)}
.plek.p1::before{content:"";position:absolute;top:10px;right:14px;width:30px;height:30px;background:url(/img/px/kroon_1.png) center/contain no-repeat;image-rendering:pixelated}
.plek .waarde{font:400 var(--f2) var(--pixel);color:var(--goud1);font-variant-numeric:tabular-nums}.plek .n{font:400 var(--f1) var(--pixel)}
.lijst{display:flex;flex-direction:column;gap:6px}
.rij{display:grid;grid-template-columns:44px 40px 1fr auto;gap:12px;align-items:center;text-decoration:none;color:var(--tekst);background:var(--paneel);box-shadow:inset 0 -3px 0 #05070f;padding:8px 14px;position:relative;overflow:hidden;--k:3px;transition:transform .12s}
.rij:hover{transform:translateX(4px);background:var(--paneel2)}
.rij .staaf{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ff8a3d33,#ff8a3d08);z-index:0}.rij>*{position:relative;z-index:1}
.rij .nr{font:400 var(--f1) var(--pixel);color:var(--zacht);text-align:center}.rij img{width:36px;height:36px}
.rij .w{font:400 var(--f15) var(--pixel);font-variant-numeric:tabular-nums;color:var(--goud1)}
.leeg{color:var(--zacht);text-align:center;padding:44px 20px;background:var(--paneel);font:400 var(--f1) var(--pixel)}
.dag{margin:28px 0 10px;color:var(--perzik);font:400 var(--f1) var(--pixel);text-transform:uppercase;letter-spacing:var(--fp)}
.dood{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:var(--paneel);box-shadow:inset 4px 0 0 #ffffff22,inset 0 -3px 0 #05070f;padding:12px 16px;margin-bottom:8px;--k:3px}
.dood.uit{box-shadow:inset 5px 0 0 var(--rood),inset 0 -3px 0 #05070f;background:linear-gradient(90deg,#3a141666,var(--paneel) 45%)}
.dood img.h{width:56px;height:56px}.dood .wat{font-weight:700}.dood .wat a{color:var(--goud);text-decoration:none}.dood .sub{color:var(--zacht);font-size:14px}
.dood .tijd{color:var(--zacht);font:400 var(--f1) var(--pixel);text-align:right;font-variant-numeric:tabular-nums}
.knopje{display:inline-flex;align-items:center;gap:6px;border:0;color:var(--diep);background:var(--goud);padding:5px 12px 7px;font:400 var(--f1) var(--pixel);cursor:pointer;margin-top:8px;box-shadow:inset 0 -3px 0 var(--bruin);--k:3px}
.knopje:hover{filter:brightness(1.1)}
video.clip{width:100%;max-width:720px;margin-top:10px;display:block;background:#000;box-shadow:0 0 0 3px var(--rand)}
.held-speler{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:26px;align-items:center;margin-bottom:22px}
.held-speler .groot{display:flex;justify-content:center;background:radial-gradient(200px 80px at 50% 95%,#ffc27a2a,transparent 70%)}
.held-speler .groot img{height:380px;filter:drop-shadow(0 12px 0 #0008);animation:zweef 5s ease-in-out infinite}
.statgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.stat{background:var(--paneel);box-shadow:inset 0 -3px 0 #05070f;padding:12px 14px;--k:3px}
.stat b{display:block;font:400 var(--f15) var(--pixel);color:var(--goud1);font-variant-numeric:tabular-nums}.stat span{color:var(--zacht);font-size:13px}
.stat i{float:right;font:400 var(--f1) var(--pixel);font-style:normal;color:var(--diep);background:var(--goud);padding:1px 6px}
.stats h2{font-size:var(--f2);color:var(--goud);margin:34px 0 14px}

/* ---- voet */
.voet{background:#070a15;border-top:3px solid var(--omlijning);padding:40px 0 34px;color:var(--zacht);font-size:14px}
.voet .in{display:grid;grid-template-columns:auto 1fr;gap:16px 40px;align-items:center}
.voet-merk{display:flex;align-items:center;gap:12px}.voet-kat{width:44px;height:44px}
.voet-merk b{display:block;font:400 var(--f15) var(--pixel);color:var(--goud)}
.voet nav{display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:flex-end}.voet nav a{color:var(--zacht);text-decoration:none;font:400 var(--f1) var(--pixel)}.voet nav a:hover{color:var(--goud)}
.voet p{grid-column:1/-1;margin:8px 0 0;color:var(--donker);font-size:13px}

/* ---- smal scherm */
@media(max-width:900px){
  .nu-grid{grid-template-columns:1fr}
  .stuut-in{grid-template-columns:1fr;text-align:center;justify-items:center}.stuut p{margin-inline:auto}
  .gids{grid-template-columns:1fr;padding-top:28px}.toc{display:none}
  .held-speler{grid-template-columns:1fr}.held-speler .groot img{height:280px}
  .tijdlijn::before{display:none}
}
@media(max-width:760px){
  .menuknop{display:block}
  .nav{position:fixed;top:67px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--nacht);padding:8px 16px 20px;border-bottom:3px solid var(--rand);transform:translateY(-120%);transition:transform .25s;visibility:hidden}
  .nav.open{transform:none;visibility:visible}
  .nav>a:not(.knop){padding:12px 6px;font-size:var(--f15);border-bottom:1px solid #ffffff10}.nav>a.act::after{display:none}
  .nav .knop{margin:14px 0 0;justify-content:center}
  .in{padding:0 16px}
  .held{padding:36px 0 84px;min-height:0}
  .aftel{gap:8px}.aftel .telblok{min-width:66px}.aftel b{font-size:var(--f2)}
  .sectie{padding:60px 0}
  .grid{grid-template-columns:repeat(2,1fr);gap:10px}.speler .render{height:160px}.speler .render img{height:150px}.mini{font-size:12px;gap:2px 8px}
  .tabs a{font-size:var(--f1);padding:6px 11px 9px}
  .kaartrij{grid-template-columns:repeat(2,1fr);gap:14px}.kaartrij.klein{grid-template-columns:repeat(2,minmax(0,170px))}
  .fkaart figcaption{font-size:14px}
  .cta{grid-template-columns:1fr;text-align:center;justify-items:center}.cta .fkaart-img{width:120px}.cta .knoppen{justify-content:center}
  .pagina-kop{padding:34px 0 70px}.pagina-kop .in{flex-direction:column;align-items:flex-start;gap:10px}
  .pk-kaarten,.pk-badge{display:none}
  .feitjes li{font-size:18px;padding:4px 10px 5px}
  .blok-kop{padding:16px 18px 14px;gap:14px}.blok-kaart{width:54px}.blok-icoon,.blok-nr{width:50px;height:50px}.blok-nr{font-size:var(--f2)}
  .blok .proza{padding:16px 18px 20px}
  .proza .treden{flex-direction:column;align-items:stretch!important}.proza .treden li{height:auto!important;flex-direction:row;align-items:baseline;gap:12px}
  .stem-uitleg{grid-template-columns:1fr}
  .stemkaart b{font-size:var(--f1)}.stemkaarten{grid-template-columns:1fr}
  .plek .rang{font-size:var(--f1);top:6px;left:8px}.plek.p1::before{width:22px;height:22px;top:6px;right:8px}
  .proza{padding:22px 18px 26px}
  .podium{gap:8px}.plek img{height:110px}.plek.p1 img{height:140px}.plek .waarde{font-size:var(--f1)}
  .dood{grid-template-columns:48px 1fr}.dood img.h{width:44px;height:44px}.dood .tijd{grid-column:2;text-align:left}
  .voet .in{grid-template-columns:1fr}.voet nav{justify-content:flex-start}
  .stuut-kat{width:170px;height:170px}
  /* telefoons zijn 2x of 3x: halve rasterstappen zijn daar ook scherp */
  .pagina-kop h1{font-size:var(--f3)}.pagina-kop.compact h1{font-size:var(--f3)}
  .sectie-kop h2,.stuut h2,.blok-kop h2,.stats h1,.cta h3{font-size:var(--f2)}
  .held-zin{font-size:var(--f15)}.ip-adres{font-size:var(--f2)}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .onthul{opacity:1;transform:none}
}