:root{--blue:#002060;--yellow:#fff2cc;--text:#07142f}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%;background:#000;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;overflow:hidden}
body{width:100vw;height:100vh}
#startScreen{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:radial-gradient(circle at center,rgba(0,32,96,.88),rgba(0,0,0,.96))}
.startCard{width:min(920px,96vw);background:rgba(255,255,255,.96);color:#07142f;border:4px solid #000;border-radius:28px;padding:18px;text-align:center;box-shadow:0 14px 42px rgba(0,0,0,.55)}
.badge{display:inline-block;background:#002060;color:#fff2cc;border:3px solid #000;border-radius:999px;padding:7px 12px;font-weight:1000;margin-bottom:10px}
.startCard h1{margin:4px 0;color:#002060;font-size:clamp(30px,9vw,64px);line-height:1.02}
.startCard h2{margin:2px 0 10px;color:#002060;font-size:clamp(22px,6vw,42px)}
.startCard p{font-weight:1000;font-size:clamp(16px,4.5vw,28px);line-height:1.25;margin:10px 0}
.startBtn{width:100%;max-width:720px;border:4px solid #000;border-radius:22px;background:linear-gradient(#ffe680,#ff9900);color:#07142f;font-size:clamp(21px,6vw,42px);font-weight:1000;padding:15px;margin-top:14px}
#videoLayer{position:fixed;inset:0;z-index:1;background:#000;display:none}
#videoLayer.active{display:block}
.bgVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .85s ease}
.bgVideo.active{opacity:1}
#topTitle{position:fixed;top:10px;left:10px;right:10px;z-index:5;text-align:center;font-weight:1000;font-size:clamp(18px,5vw,34px);text-shadow:0 3px 10px #000;display:none}
#topTitle.active{display:block}
.bottomBar{position:fixed;left:0;right:0;bottom:0;z-index:10;display:none;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.75))}
.bottomBar.active{display:grid}
.bottomBtn{border:4px solid #000;border-radius:22px;background:linear-gradient(#ffe680,#ff9900);color:#07142f;text-decoration:none;text-align:center;font-weight:1000;font-size:clamp(18px,5vw,34px);padding:14px 10px}
#menuPanel{position:fixed;z-index:15;left:10px;right:10px;bottom:86px;display:none;background:rgba(255,255,255,.97);color:#07142f;border:4px solid #000;border-radius:24px;padding:12px;box-shadow:0 12px 38px rgba(0,0,0,.5)}
#menuPanel.open{display:block}
#menuPanel h2{margin:0 0 10px;text-align:center;color:#002060;font-size:clamp(24px,6vw,42px)}
.menuGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.menuGrid a{border:3px solid #000;border-radius:16px;background:linear-gradient(#fff2cc,#ffcc66);color:#07142f;text-align:center;text-decoration:none;font-weight:1000;padding:13px;font-size:clamp(16px,4.5vw,26px)}
.statsModal,.adminStats,.admin-panel,#statsModal,#adminStats,[data-admin-stats]{display:none!important}
@media(max-width:640px){.menuGrid{grid-template-columns:1fr}}


/* V0.0.8 STARTKOLOM HERSTEL - geen wit vlak meer, terug naar donkere oude uitstraling */
#startScreen{
  background:
    radial-gradient(circle at center, rgba(0,45,110,.72), rgba(0,0,0,.96) 72%),
    linear-gradient(180deg,#001b44,#000);
}
.startCard{
  background:rgba(0,18,46,.72)!important;
  color:#ffffff!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  width:min(940px,96vw)!important;
  padding:18px 12px!important;
  text-align:center!important;
}
.badge{
  background:rgba(0,32,96,.92)!important;
  color:#fff2cc!important;
  border:3px solid #000!important;
  border-radius:999px!important;
  box-shadow:0 6px 18px rgba(0,0,0,.45)!important;
}
.startCard h1{
  color:#ffffff!important;
  text-shadow:0 4px 14px #000!important;
  font-size:clamp(34px,10vw,76px)!important;
  font-weight:900!important;
}
.startCard h2{
  color:#ffffff!important;
  text-shadow:0 4px 14px #000!important;
  font-size:clamp(24px,7vw,48px)!important;
  font-weight:800!important;
}
.startCard p{
  color:#ffffff!important;
  text-shadow:0 3px 12px #000!important;
  font-size:clamp(18px,5.2vw,34px)!important;
}
.startBtn{
  max-width:720px!important;
  margin-top:18px!important;
  border:4px solid #000!important;
  border-radius:24px!important;
  background:linear-gradient(#ffe680,#ff9900)!important;
  color:#07142f!important;
  box-shadow:0 10px 24px rgba(0,0,0,.45)!important;
}


/* V0.0.9 counters zichtbaar op verzoek + soepelere video-overgang */
.bgVideo{
  transition:opacity 1.45s ease-in-out!important;
}
#menuPanel .menuGrid{
  grid-template-columns:1fr!important;
}
.counterPanel{
  position:fixed;
  z-index:30;
  left:5vw;
  right:5vw;
  top:9vh;
  max-height:82vh;
  overflow:auto;
  display:none;
  background:rgba(0,18,46,.96);
  color:#fff;
  border:4px solid #000;
  border-radius:28px;
  padding:18px;
  box-shadow:0 16px 48px rgba(0,0,0,.70);
}
.counterPanel.open{display:block}
.counterPanel h2{
  margin:0 58px 16px 0;
  color:#ffcc33;
  font-size:clamp(28px,7vw,48px);
}
.counterClose{
  position:absolute;
  right:14px;
  top:14px;
  width:54px;
  height:54px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#07142f;
  font-size:34px;
  font-weight:1000;
}
.counterRows{
  display:grid;
  gap:12px;
}
.counterRow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  align-items:center;
  background:#fff2cc;
  color:#07142f;
  border:3px solid #000;
  border-radius:18px;
  padding:14px;
  font-weight:1000;
  font-size:clamp(17px,4.5vw,28px);
}
.counterRow b{font-size:1.05em}