/* Zelf-gehoste lettertypes (geen verbinding met Google nodig) */
@font-face{font-family:"Bricolage Grotesque";font-weight:700;font-display:swap;src:url(fonts/bricolage-grotesque-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}

:root{
  --bg:#EDF0F4; --surface:#FFFFFF; --ink:#1C2230; --muted:#5B6474; --line:#D5DAE2;
  --now:#F2B705; --now-ink:#1C2230;
  --ps:#2F5BD3; --xb:#2E8B3E; --nin:#D8343A; --pc:#5A6475; --mob:#8A5BD6;
  --out:#2E7D3A; --soon:#A35F00; --deal:#C0392B;
  --acc:#6F4DF5; --acc-text:#5A38E0; --acc-soft:#ECE7FF;
  --new-bg:#DDF5E3; --new-ink:#1E6B34;
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141824; --surface:#1D2231; --ink:#E9ECF2; --muted:#A3ABBA; --line:#2E3547;
    --ps:#6F93F2; --xb:#5CC06B; --nin:#F06A6F; --pc:#98A2B3; --mob:#B394EC;
    --out:#5CC06B; --soon:#F0A93A; --deal:#FF7A6B;
    --acc-text:#B3A1FF; --acc-soft:#2A2350; --new-bg:#1E3A27; --new-ink:#8FE0A3;
  }
}
:root[data-theme="dark"]{
  --bg:#141824; --surface:#1D2231; --ink:#E9ECF2; --muted:#A3ABBA; --line:#2E3547;
  --ps:#6F93F2; --xb:#5CC06B; --nin:#F06A6F; --pc:#98A2B3; --mob:#B394EC;
  --out:#5CC06B; --soon:#F0A93A; --deal:#FF7A6B;
  --acc-text:#B3A1FF; --acc-soft:#2A2350; --new-bg:#1E3A27; --new-ink:#8FE0A3;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 110px);scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5}
a{color:inherit}
:focus-visible{outline:3px solid var(--now);outline-offset:2px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.hero-wrap{position:relative}

/* Kop */
header.top{padding:40px 0 8px}
.brand{margin:0 0 6px;font-size:2rem;line-height:1}
.brand:empty{display:none}
h1{font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,7vw,4.6rem);line-height:.95;letter-spacing:-.02em;margin:0}
.lede{max-width:62ch;color:var(--muted);margin:14px 0 0;font-size:1.05rem}
.aff-note{max-width:62ch;color:var(--muted);margin:8px 0 0;font-size:.85rem}
.themebtn{position:absolute;top:18px;right:20px}

/* Jaarbalk */
.year{margin:28px 0 8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:40px 16px 12px}
.year-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:end;height:120px;position:relative}
.mcol{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.bar{width:100%;max-width:46px;border-radius:6px 6px 2px 2px;background:var(--ink);opacity:.85;min-height:6px}
.mcol.past .bar{opacity:.28}
.mcol:hover .bar{opacity:1}
.mcol .cnt{font-size:.75rem;color:var(--muted);margin-bottom:4px}
.mlabels{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;margin-top:6px;font-family:var(--display);font-weight:700;font-size:.85rem;text-align:center}
.nowline{position:absolute;top:-8px;bottom:0;width:3px;background:var(--now);border-radius:2px;pointer-events:none}
.nowtag{position:absolute;top:-30px;transform:translateX(-50%);background:var(--now);color:var(--now-ink);font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.yearnote{font-size:.8rem;color:var(--muted);margin:10px 2px 0}

/* Filters */
.filters{position:sticky;top:0;z-index:5;background:var(--bg);padding:12px 0;border-bottom:1px solid var(--line);transition:transform .25s ease}
.filters.is-hidden{transform:translateY(-110%)}
.frow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.frow-plats{margin-top:8px}
.search{flex:1 1 220px;min-width:0;font:inherit;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.chip{font:inherit;font-size:.9rem;padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:1px}
.dot-ps{background:var(--ps)}.dot-xb{background:var(--xb)}.dot-ns{background:var(--nin)}.dot-pc{background:var(--pc)}
.count{font-size:.85rem;color:var(--muted);margin-left:auto}

/* Cover-tegels */
.cover{position:relative;overflow:hidden;border-radius:10px;aspect-ratio:3/4;display:flex;align-items:flex-end;padding:8px;color:#fff;background:#334}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover .ini{position:relative;font-family:var(--display);font-weight:800;line-height:.9;font-size:1.4rem;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.cover.lg .ini{font-size:3rem}

/* Lijst */
.month{margin:34px 0 0}
.month h2{font-family:var(--display);font-weight:800;font-size:1.7rem;margin:0 0 10px;display:flex;align-items:baseline;gap:10px}
.month h2 small{font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--muted)}
.game{display:grid;grid-template-columns:56px 64px 1fr auto;gap:14px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:8px}
.game.is-next{border:2px solid var(--now)}
.date{text-align:center;padding-top:4px}
.date .d{font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1}
.date .m{font-size:.8rem;color:var(--muted)}
.title{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.2;margin:0}
.title a{text-decoration:none}
.title a:hover{text-decoration:underline}
.meta{font-size:.88rem;color:var(--muted);margin:4px 0 8px}
.plats{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.plat{font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:6px;color:#fff}
.plat.ps{background:var(--ps)}.plat.xb{background:var(--xb)}.plat.ns{background:var(--nin)}.plat.pc{background:var(--pc)}.plat.mob{background:var(--mob)}
.links{display:flex;flex-wrap:wrap;gap:6px}
.links a,.btn{font:inherit;font-size:.85rem;text-decoration:none;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer}
.links a:hover,.btn:hover{border-color:var(--ink)}
.links a.primary,.btn.primary{background:var(--acc);color:#fff;border-color:var(--acc);font-weight:700}
.links a.primary:hover,.btn.primary:hover{filter:brightness(1.08)}
.side{text-align:right;min-width:130px}
.price{font-family:var(--display);font-weight:700;font-size:1.05rem;white-space:nowrap}
.price-note{font-size:.72rem;color:var(--muted)}
.status{display:inline-block;font-size:.78rem;font-weight:700;margin-top:6px}
.status.out{color:var(--out)}.status.soon{color:var(--soon)}
.fav{margin-top:8px;font:inherit;font-size:.8rem;background:none;border:1px solid var(--line);border-radius:8px;padding:4px 8px;cursor:pointer;color:var(--ink)}
.fav[aria-pressed="true"]{background:var(--now);border-color:var(--now);color:var(--now-ink)}
.d-sec .fav{margin-top:0}
.note{font-size:.8rem;color:var(--soon);margin-top:6px}
.empty{padding:40px 0;text-align:center;color:var(--muted)}

/* Detail-venster */
dialog{border:0;padding:0;border-radius:16px;background:var(--surface);color:var(--ink);width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 24px)}
dialog::backdrop{background:rgba(10,12,20,.6)}
.d-inner{padding:22px;overflow:auto;max-height:calc(100vh - 24px)}
.d-head{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:start}
.d-head h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.05;margin:0 0 6px}
.d-close{position:sticky;top:0;float:right;margin:-6px -6px 0 0}
.d-sec{margin-top:22px}
.d-sec h3{font-family:var(--display);font-weight:700;font-size:1.15rem;margin:0 0 8px}
.d-desc{max-width:65ch;margin:10px 0 0}
.editions{width:100%;border-collapse:collapse;font-size:.95rem}
.editions td{padding:8px 0;border-bottom:1px solid var(--line)}
.editions td:last-child{text-align:right;font-family:var(--display);font-weight:700}
.live{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg)}
.live .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--line)}
.live .row:last-of-type{border-bottom:0}
.live .cut{color:var(--deal);font-weight:700;margin-left:6px}
.live .small{font-size:.8rem;color:var(--muted);margin:8px 0 0}
.video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-btn{width:100%;aspect-ratio:16/9;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}
.video-btn strong{display:block;font-family:var(--display);font-size:1.2rem}
.video-btn span{font-size:.85rem;color:var(--muted)}

/* Deals + footer */
section.block{margin:50px 0 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px}
section.block h2{font-family:var(--display);font-weight:800;font-size:1.6rem;margin:0 0 6px}
section.block p{max-width:70ch;color:var(--muted);margin:0 0 14px}
.deals{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.deals a{display:block;text-decoration:none;padding:14px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.deals a:hover{border-color:var(--ink)}
.deals strong{display:block;font-family:var(--display);font-size:1.05rem}
.deals span{font-size:.85rem;color:var(--muted)}
footer{margin:40px 0 50px;font-size:.85rem;color:var(--muted)}
footer p{max-width:75ch}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:.9rem;z-index:50}

@media (max-width:720px){
  .game{grid-template-columns:48px 1fr}
  .game .cover{display:none}
  .side{grid-column:2;text-align:left;display:flex;flex-wrap:wrap;gap:10px;align-items:center;min-width:0}
  .status,.fav{margin-top:0}
  .date .d{font-size:1.5rem}
  .year-grid{height:90px}
  .mlabels{font-size:.7rem}
  .mcol .cnt{font-size:.65rem}
  .d-head{grid-template-columns:96px 1fr}
  .cover.lg .ini{font-size:2rem}
}

/* Cookiemelding (geen cookiewall: de site blijft bruikbaar) */
.consent{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;display:flex;justify-content:center}
.consent[hidden]{display:none}
.consent-inner{max-width:720px;width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:16px 18px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
.consent-title{font-family:var(--display);font-weight:800;font-size:1.15rem;margin:0 0 6px}
.consent p{margin:0 0 12px;font-size:.92rem;color:var(--muted)}
.consent-opts{display:grid;gap:10px;margin:0 0 12px}
.consent-opts[hidden]{display:none}
.opt{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.opt input{margin-top:3px;width:18px;height:18px;flex:none}
.consent-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.consent-btns .btn{font-size:.92rem;padding:9px 14px}
.consent-btns .btn[hidden]{display:none}
.linkbtn{font:inherit;background:none;border:0;padding:0;color:inherit;text-decoration:underline;cursor:pointer;margin-left:14px}
.foot-links a{margin-right:0}
.yt-consent{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg)}
.yt-consent p{margin:0 0 10px;font-size:.92rem}
/* Privacy-pagina */
.legal{max-width:760px;padding-bottom:60px}
.legal h2{font-family:var(--display);font-weight:800;font-size:1.35rem;margin:30px 0 8px}
.legal table{width:100%;border-collapse:collapse;font-size:.92rem}
.legal th,.legal td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.legal .tbl{overflow-x:auto}
.legal .fill{background:var(--now);color:var(--now-ink);padding:0 4px;border-radius:4px}

/* Compactere filterbalk op mobiel: platformknoppen op één scrollbare regel */
@media (max-width:720px){
  .filters{padding:8px 0}
  .frow-plats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:6px}
  .frow-plats::-webkit-scrollbar{display:none}
  .frow-plats .chip{flex:none;padding:6px 10px;font-size:.85rem}
  .frow-plats .count{flex:none;margin-left:8px}
  .search{padding:8px 12px;flex:1 1 auto}
  .filters .frow:first-child{flex-wrap:nowrap}
  .filters select.chip{flex:none;max-width:42%;padding:6px 8px;font-size:.85rem}
}

/* ===== Blikvanger: eerstvolgende release ===== */
.spot{margin:26px 0 0;position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:var(--surface);padding:22px;display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:center}
.spot[hidden]{display:none}
.spot-glow{position:absolute;inset:0;pointer-events:none;opacity:.22}
.spot > *:not(.spot-glow){position:relative}
.spot .cover{width:120px}
.spot-kicker{font-size:.8rem;font-weight:700;color:var(--acc-text);margin:0 0 4px}
.spot h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.05;margin:0 0 6px}
.spot h2 a{text-decoration:none}
.spot .meta{margin:0 0 12px}
.spot-also{font-size:.82rem;color:var(--muted);margin:10px 0 0}
.count{display:flex;gap:8px;text-align:center}
.count div{min-width:64px;padding:10px 6px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.count b{display:block;font-family:var(--display);font-weight:800;font-size:1.9rem;line-height:1}
.count span{font-size:.72rem;color:var(--muted)}
.count-today{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--acc-text)}

/* ===== Labels ===== */
.tags{display:inline-flex;flex-wrap:wrap;gap:5px;vertical-align:middle;margin-left:6px}
.tag{font-family:var(--body);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.tag.new{background:var(--new-bg);color:var(--new-ink)}
.tag.soon{background:var(--now);color:var(--now-ink)}
.tag.pre{background:var(--acc-soft);color:var(--acc-text)}

/* ===== Deze week ===== */
.week{margin:30px 0 0}
.week[hidden]{display:none}
.week h2{font-family:var(--display);font-weight:800;font-size:1.5rem;margin:0 0 10px;display:flex;align-items:baseline;gap:10px}
.week h2 small{font-family:var(--body);font-weight:400;font-size:.9rem;color:var(--muted)}
.week-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,260px);gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.wcard{scroll-snap-align:start;display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px}
.wcard:hover{border-color:var(--acc)}
.wcard .cover{width:48px;border-radius:8px;padding:4px}
.wcard .cover .ini{font-size:.9rem;color:#fff}
.wcard strong{display:block;font-family:var(--display);font-size:.98rem;line-height:1.2}
.wcard span{font-size:.78rem;color:var(--muted)}
.wcard .tag{margin-top:4px;display:inline-block}

/* ===== Meer winkels (uitklappen) ===== */
.more{display:inline-block}
.more summary{list-style:none;cursor:pointer;font-size:.85rem;padding:6px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);user-select:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:" ▾"}
.more[open] summary::after{content:" ▴"}
.more summary:hover{border-color:var(--ink)}
.more[open]{display:block;width:100%}
.more .links{margin-top:8px}

/* ===== Footer ===== */
.foot-brand{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;padding:18px 0;margin-bottom:10px;border-top:1px solid var(--line)}
.foot-logo{font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--ink)}

@media (max-width:720px){
  .spot{grid-template-columns:72px 1fr;padding:16px;gap:14px}
  .spot .cover{width:72px}
  .spot .count-wrap{grid-column:1 / -1}
  .count div{flex:1;min-width:0}
}