:root{
  --nacht:#131316;
  --kool:#1b1c20;
  --paneel:#232428;
  --lijn:#33353b;
  --wit:#f2f3f5;
  --grijs:#a7abb4;
  --bliksem:#ffd21e;
  --amber:#e8b60c;
  --vacht:#e0863a;
  --inktzwart:#17150a;
  --titelfont:"Khand",system-ui,sans-serif;
  --leesfont:"Public Sans",system-ui,sans-serif;
  --hoek:8px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--nacht);color:var(--wit);font-family:var(--leesfont);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--bliksem);text-decoration:none}
a:hover{color:#ffe066}

/* ---------- top bar ---------- */
.topbaan{position:sticky;top:0;z-index:70;background:rgba(15,15,18,.97);border-bottom:2px solid var(--lijn)}
.topbaan-vak{display:flex;align-items:center;gap:16px;padding:9px 18px}
.merk{display:inline-flex;align-items:center;gap:9px;flex:none}
.merk-vlak svg{width:36px;height:36px;display:block}
.merk-naam{font-family:var(--titelfont);font-weight:700;font-size:1.42rem;letter-spacing:.02em;color:var(--wit);line-height:1}
.merk-naam b{color:var(--bliksem)}
.zoekspoor{display:inline-flex;align-items:center;gap:9px;flex:1 1 auto;max-width:390px;min-width:0;background:var(--kool);border:1px solid var(--lijn);border-radius:var(--hoek);padding:8px 15px;color:var(--grijs);font-size:.9rem}
.zoekspoor svg{width:16px;height:16px;flex:none}
.zoekspoor:hover{border-color:var(--bliksem);color:var(--wit)}
.actieknoppen{display:flex;align-items:center;gap:9px;margin-left:auto}
.flits-knop{display:inline-flex;align-items:center;justify-content:center;font-family:var(--titelfont);font-weight:700;font-size:1.02rem;letter-spacing:.06em;background:linear-gradient(180deg,var(--bliksem),var(--amber));color:var(--inktzwart);border-radius:6px;padding:7px 20px;line-height:1.25;transform:skewX(-6deg);box-shadow:0 3px 14px rgba(255,210,30,.28);transition:filter .15s}
.flits-knop>*{transform:skewX(6deg)}
.flits-knop:hover{filter:brightness(1.08);color:var(--inktzwart)}
.flits-knop.reuze{font-size:1.3rem;padding:11px 34px}
.flits-knop.vol{width:100%;transform:none}
.kader-knop{display:inline-flex;align-items:center;font-family:var(--titelfont);font-weight:600;font-size:1rem;letter-spacing:.04em;color:var(--wit);border:1px solid var(--lijn);border-radius:6px;padding:6px 16px;background:transparent}
.kader-knop:hover{border-color:var(--bliksem);color:var(--bliksem)}
.schakel{display:none;background:none;border:1px solid var(--lijn);border-radius:6px;color:var(--wit);width:40px;height:38px;align-items:center;justify-content:center;cursor:pointer}
.schakel svg{width:21px;height:21px}

/* ---------- frame ---------- */
.veldwerk{display:grid;grid-template-columns:246px minmax(0,1fr)}
.speelveld{min-width:0;width:100%;max-width:1420px;margin:0 auto;padding:18px 24px 42px}

/* ---------- side menu ---------- */
.menuwand{background:#0f0f12;border-right:2px solid var(--lijn);padding:14px 11px 22px;position:sticky;top:58px;height:calc(100vh - 58px);overflow-y:auto;scrollbar-width:thin}
.wandgroep{border-bottom:1px solid var(--lijn);padding-bottom:9px;margin-bottom:9px}
.wandtitel{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;color:var(--vacht);font-family:var(--titelfont);font-weight:600;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;padding:7px 9px;cursor:pointer}
.wandtitel svg{width:13px;height:13px;transition:transform .18s}
.wandgroep.toe .wandtitel svg{transform:rotate(-90deg)}
.wandgroep ul{list-style:none;padding:2px 4px 0}
.wandgroep.toe ul{display:none}
.wandgroep li a{display:block;color:var(--wit);font-weight:600;font-size:.92rem;padding:7px 10px;border-radius:6px;border-right:3px solid transparent}
.wandgroep li a:hover{background:var(--paneel);color:var(--bliksem)}
.wandgroep li a.hier{border-right-color:var(--bliksem);color:var(--bliksem);background:var(--paneel)}
.wand-stort{margin-top:14px}
.wand-sluier{display:none}

/* ---------- hero ---------- */
.jachtveld{position:relative;border-radius:var(--hoek);overflow:hidden;min-height:430px;display:flex;align-items:center;border:1px solid var(--lijn);background:#0c0c0e}
.jacht-fond{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.jacht-waas{position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,10,12,.9) 0%,rgba(10,10,12,.62) 34%,rgba(10,10,12,.08) 58%,rgba(10,10,12,0) 72%)}
.jacht-inhoud{position:relative;z-index:2;padding:46px 44px;max-width:640px}
.vonk{font-family:var(--titelfont);font-weight:600;font-size:1.02rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vacht);margin-bottom:8px}
.kop-groot{font-family:var(--titelfont);font-weight:700;font-size:clamp(1.8rem,4.4vw,3.1rem);line-height:1.04;text-transform:uppercase;letter-spacing:.01em}
.kop-groot b{color:var(--bliksem)}
.kop-klein{font-family:var(--titelfont);font-weight:600;font-size:clamp(1.15rem,2.5vw,1.7rem);line-height:1.12;text-transform:uppercase;opacity:.94;margin-bottom:9px}
.toelichting{color:var(--grijs);font-size:.97rem;margin-bottom:20px;max-width:48ch}
.mega{font-size:clamp(4rem,12vw,7rem)}

/* ---------- winners strip ---------- */
.vangst{overflow:hidden;margin:14px 0;border-block:1px solid var(--lijn);background:var(--kool)}
.vangst-spoor{display:flex;gap:8px;padding:9px 8px;width:max-content;animation:vangstloop 52s linear infinite reverse}
.vangst:hover .vangst-spoor{animation-play-state:paused}
.vangst-kaart{display:inline-flex;align-items:center;gap:8px;background:var(--paneel);border-radius:6px;padding:4px 12px 4px 5px;flex:none}
.vangst-kaart img{width:34px;height:48px;border-radius:4px;object-fit:cover}
.vangst-wie{color:var(--grijs);font-size:.78rem}
.vangst-som{color:var(--bliksem);font-weight:800;font-size:.88rem}
@keyframes vangstloop{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- pillars ---------- */
.pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
.pijler{background:var(--kool);border:1px solid var(--lijn);border-top:3px solid var(--bliksem);border-radius:var(--hoek);padding:18px 20px}
.pijler-teken svg{width:44px;height:44px;margin-bottom:10px}
.pijler-kop{font-family:var(--titelfont);font-weight:700;font-size:1.14rem;letter-spacing:.05em;margin-bottom:4px}
.pijler p:not(.pijler-kop){color:var(--grijs);font-size:.93rem}

/* ---------- pay band ---------- */
.betaalbaan{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(90deg,#1d1d10,#2a2712 55%,#1d1d10);border:1px solid #3d3a1c;border-radius:var(--hoek);padding:16px 22px;margin:14px 0}
.betaal-zin{font-family:var(--titelfont);font-weight:700;font-size:1.18rem;letter-spacing:.07em;flex:1 1 250px}
.betaal-set{display:flex;gap:9px;flex-wrap:wrap}
.betaal-chip{display:inline-flex;align-items:center;background:#fff;border-radius:6px;padding:5px 11px}
.betaal-chip img{height:22px;width:auto}

/* ---------- game strips ---------- */
.spelstrook{margin:24px 0}
.strook-kop{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
.strook-titel{font-family:var(--titelfont);font-weight:700;font-size:1.14rem;letter-spacing:.14em;text-transform:uppercase;border-left:4px solid var(--bliksem);padding-left:10px}
.strook-link{font-size:.84rem;font-weight:700;letter-spacing:.04em;color:var(--grijs)}
.strook-link:hover{color:var(--bliksem)}
.strook-baan{display:grid;grid-auto-flow:column;grid-auto-columns:128px;gap:10px;overflow-x:auto;padding:7px 2px 9px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--lijn) transparent}
.spelkaart{position:relative;border-radius:6px;overflow:hidden;outline:1px solid var(--lijn);scroll-snap-align:start;background:var(--paneel);transition:transform .14s,outline-color .14s}
.spelkaart:hover{transform:translateY(-4px);outline:2px solid var(--bliksem)}
.spelkaart img{width:100%;height:179px;object-fit:cover}
.kaart-label{position:absolute;left:0;right:0;bottom:0;padding:15px 7px 5px;font-family:var(--titelfont);font-weight:600;font-size:.8rem;line-height:1.12;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-align:left;background:linear-gradient(0deg,rgba(8,8,10,.95) 32%,transparent)}

/* ---------- arena cards ---------- */
.arenas{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}
.arena{background:var(--paneel);border:1px solid var(--lijn);border-radius:var(--hoek);padding:18px;position:relative;overflow:hidden}
.arena:after{content:"";position:absolute;top:0;left:0;width:46%;height:3px;background:var(--bliksem)}
.arena-kop{font-family:var(--titelfont);font-weight:700;font-size:1.16rem;letter-spacing:.08em}
.arena p:not(.arena-kop){color:var(--grijs);font-size:.92rem;min-height:3em;margin-top:2px}
.arena-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.arena-link{font-family:var(--titelfont);font-weight:700;font-size:.92rem;letter-spacing:.09em}
.arena-minis{display:inline-flex;gap:4px}
.arena-minis img{width:32px;height:45px;border-radius:4px;object-fit:cover;outline:1px solid var(--lijn)}
.arena-sport{display:inline-flex;gap:5px;color:var(--bliksem)}
.arena-sport svg{width:24px;height:24px}

/* ---------- bets list ---------- */
.inzetlijst{margin:24px 0;background:var(--kool);border:1px solid var(--lijn);border-radius:var(--hoek);padding:14px}
.lijst-tabs{display:flex;gap:16px;margin-bottom:8px;padding:0 4px}
.lijst-tabs span{font-family:var(--titelfont);font-weight:600;font-size:1rem;letter-spacing:.06em;color:var(--grijs);padding:2px 2px 6px}
.lijst-tabs .nu{color:var(--inktzwart);background:var(--bliksem);padding:2px 12px 4px;border-radius:5px}
.lijst-spel{display:flex;align-items:center;gap:9px}
.lijst-spel img{width:32px;height:45px;border-radius:4px;object-fit:cover}
.lijst-spel span{display:flex;flex-direction:column;font-weight:700;font-size:.89rem;line-height:1.22}
.lijst-spel i{font-style:normal;font-weight:400;color:var(--grijs);font-size:.77rem}
.lijst-winst{color:var(--bliksem);font-weight:800}

/* ---------- tables ---------- */
.schuiftabel{overflow-x:auto;margin:16px 0;border:1px solid var(--lijn);border-radius:var(--hoek)}
table{width:100%;border-collapse:collapse;min-width:560px;font-size:.92rem}
thead th{font-family:var(--titelfont);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.84rem;color:var(--vacht);text-align:left;padding:10px 13px;border-bottom:2px solid var(--lijn);white-space:nowrap}
tbody td{padding:10px 13px;border-bottom:1px solid #26272c;vertical-align:top}
tbody tr:last-child td{border-bottom:0}
.inzetlijst table{min-width:600px}
.inzetlijst .schuiftabel{border:0;margin:0}

/* ---------- providers ---------- */
.studioblok{margin:24px 0}
.studio-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.studiokaart{display:flex;align-items:center;justify-content:center;background:linear-gradient(170deg,var(--paneel),var(--kool));border-radius:6px;padding:15px 10px;outline:1px solid transparent;transition:outline-color .15s}
.studiokaart:hover{outline-color:var(--bliksem)}
.studiokaart img{height:28px;width:auto;max-width:112px;object-fit:contain;opacity:.9}
.studiokaart:hover img{opacity:1}

/* ---------- article ---------- */
.leesblok{margin:30px auto 0;background:var(--kool);border:1px solid var(--lijn);border-radius:var(--hoek);padding:28px clamp(18px,4vw,42px);max-width:1040px}
.leesblok h1,.leesblok h2,.leesblok h3,.leesblok h4{font-family:var(--titelfont);font-weight:700;line-height:1.16;margin:24px 0 10px;scroll-margin-top:76px}
.leesblok h1{font-size:clamp(1.6rem,3.4vw,2.2rem);margin-top:0;color:var(--bliksem)}
.leesblok h2{font-size:clamp(1.3rem,2.6vw,1.62rem);padding-left:12px;border-left:4px solid var(--bliksem)}
.leesblok h3{font-size:1.16rem;color:var(--vacht)}
.leesblok p{margin:11px 0;color:#d6d9de}
.leesblok .vetregel{font-weight:800;color:var(--wit);margin-top:16px}
.leesblok ul,.leesblok ol{margin:11px 0 11px 24px;color:#d6d9de}
.leesblok li{margin:5px 0}
.leesblok li::marker{color:var(--bliksem)}
.leesblok strong{color:var(--wit)}
.vraagblok{margin:12px 0}
.vraagblok details{background:var(--paneel);border-left:3px solid var(--bliksem);border-radius:4px;margin:9px 0;overflow:hidden}
.vraagblok summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 16px;font-weight:800;font-size:.97rem}
.vraagblok summary::-webkit-details-marker{display:none}
.vraagblok summary:after{content:"›";font-family:var(--titelfont);font-size:1.4rem;color:var(--bliksem);flex:none;line-height:1;transform:rotate(90deg);transition:transform .15s}
.vraagblok details[open] summary:after{transform:rotate(-90deg)}
.vraag-uitleg{padding:0 16px 13px;color:#d6d9de}
.vraag-uitleg ul{margin:8px 0 8px 22px}
.vraag-uitleg li::marker{color:var(--bliksem)}

/* ---------- footer ---------- */
.grondbalk{background:#0e0e10;border-top:2px solid var(--lijn);margin-top:38px;padding:34px 24px 26px}
.grond-boven{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px;max-width:1200px;margin:0 auto}
.grond-merk p{color:var(--grijs);font-size:.84rem;margin:11px 0}
.taalvlak{display:inline-block;border:1px solid var(--lijn);border-radius:6px;padding:6px 15px;font-size:.84rem;color:var(--grijs);background:var(--kool)}
.grond-titel{font-family:var(--titelfont);font-weight:600;font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vacht);margin-bottom:9px}
.grond-kolom ul{list-style:none}
.grond-kolom li{margin:6px 0}
.grond-kolom a{color:var(--grijs);font-size:.91rem}
.grond-kolom a:hover{color:var(--bliksem)}
.grond-betaal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:1200px;margin:26px auto 0;padding-top:20px;border-top:1px solid var(--lijn)}
.grond-betaal img{height:22px;width:auto;background:#fff;border-radius:5px;padding:4px 8px;box-sizing:content-box}
.acht-plus{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:2px solid var(--bliksem);color:var(--bliksem);font-weight:800;font-size:.92rem}
.grond-colofon{max-width:1200px;margin:18px auto 0;color:#7e828b;font-size:.8rem}
.grond-colofon p{margin:7px 0}

/* ---------- 404 ---------- */
.niet-gevonden .speelveld{max-width:none}
.zoekgeraakt{text-align:center;padding:64px 20px;min-height:52vh}
.zoekgeraakt .mega{color:var(--bliksem)}
.zoekgeraakt p{margin:10px auto}
.zoekgeraakt .flits-knop,.zoekgeraakt .kader-knop{margin:8px 6px 0}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .pijlers,.arenas{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .grond-boven{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  .veldwerk{display:block}
  .speelveld{padding:12px 14px 30px}
  .zoekspoor,.kader-knop{display:none}
  .topbaan-vak{padding:9px 12px;gap:9px}
  .flits-knop{padding:7px 14px;font-size:.95rem}
  .schakel{display:inline-flex}
  .menuwand{position:fixed;top:0;right:0;left:auto;bottom:0;height:100vh;width:min(305px,85vw);z-index:95;transform:translateX(103%);transition:transform .2s ease;border-right:0;border-left:2px solid var(--lijn);padding-top:18px}
  body.menu-open .menuwand{transform:none}
  body.menu-open{overflow:hidden}
  body.menu-open .wand-sluier{display:block;position:fixed;inset:0;background:rgba(5,5,7,.72);z-index:85}
  .jachtveld{min-height:360px}
  .jacht-inhoud{padding:26px 20px}
  .jacht-waas{background:linear-gradient(100deg,rgba(10,10,12,.94) 0%,rgba(10,10,12,.78) 46%,rgba(10,10,12,.3) 100%)}
}
@media (max-width:640px){
  .merk-naam{font-size:1.15rem}
  .merk-vlak svg{width:31px;height:31px}
  .jachtveld{min-height:400px}
  .jacht-fond{object-position:62% 8%}
  .jacht-waas{background:linear-gradient(180deg,rgba(10,10,12,.42) 0%,rgba(10,10,12,.82) 62%,rgba(10,10,12,.95) 100%)}
  .jachtveld{align-items:flex-end}
  .jacht-inhoud{padding-bottom:30px}
  .betaalbaan{flex-direction:column;align-items:flex-start;gap:13px}
  .betaal-zin{flex:none}
  .betaal-zin{flex:none}
  .strook-baan{grid-auto-columns:114px}
  .spelkaart img{height:160px}
  .leesblok{padding:20px 15px}
  .grond-boven{grid-template-columns:1fr}
  .acht-plus{margin-left:0}
}