/* ==================================================
   Winkel-stijl — kalmer en strakker dan het spel zelf,
   maar met dezelfde neon-identiteit als accent.
   ================================================== */
:root{
  --ink:#150A13; --ink-2:#1E0E1A; --surface:#241220; --line:#3A2233;
  --muted:#9C8593; --zacht:#C9B6C4; --paper:#F6EDF3;
  --accent:#FF17DE; --stappen:#17CDFF; --drinken:#FF17DE; --opdracht:#FFFA17; --shortcut:#AA17FF;
  --ink-deep:#0D060B;
  --sans:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hand:"Caveat",cursive; --kop:"Bungee",sans-serif;
  --rand:16px;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--sans); color:var(--paper); line-height:1.6;
  background:
    radial-gradient(60ch 40ch at 50% -12%, rgba(255,23,222,0.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.028) 0 7px, transparent 7px 20px),
    var(--ink);
  background-attachment:fixed;
  min-height:100dvh; display:flex; flex-direction:column;
}
a{ color:inherit; }
svg.lijn{ fill:none; stroke:currentColor; stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }

/* ---- Bovenbalk ---- */
.balk{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(18px,4vw,40px); background:rgba(20,9,17,.72);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.balk .logo{ font-family:var(--kop); font-size:1.15rem; color:#fff; text-decoration:none; letter-spacing:.02em;
  text-shadow:0 0 10px color-mix(in srgb,var(--accent) 55%,transparent); }
.balk nav{ display:flex; gap:22px; align-items:center; }
.balk nav a{ text-decoration:none; color:var(--zacht); font-size:.92rem; font-weight:600; }
.balk nav a:hover{ color:#fff; }
@media(max-width:560px){ .balk nav a.verberg{ display:none; } }

/* ---- Inhoud ---- */
.inhoud{ flex:1; width:100%; max-width:860px; margin:0 auto;
  padding:clamp(30px,5vw,60px) clamp(18px,4vw,40px) 70px; }

.paginatitel{ font-family:var(--kop); font-weight:400; font-size:clamp(1.6rem,5vw,2.4rem); color:#fff;
  text-shadow:0 0 14px color-mix(in srgb,var(--accent) 50%,transparent); margin-bottom:8px; }
.paginasub{ color:var(--muted); margin-bottom:34px; }

/* Tekstpagina's (voorwaarden e.d.) */
.tekstpagina h2{ font-family:var(--sans); font-weight:800; font-size:1.15rem; color:#fff;
  margin:30px 0 10px; }
.tekstpagina p, .tekstpagina li{ color:var(--zacht); font-size:1rem; margin-bottom:10px; }
.tekstpagina ul{ padding-left:22px; }
.tekstpagina .let{ color:var(--muted); font-size:.85rem; }
.placeholder{ color:var(--accent); font-weight:700; }

/* ---- Footer ---- */
.footer{ border-top:1px solid var(--line); background:var(--ink-2);
  padding:40px clamp(18px,4vw,40px) 34px; }
.footer-in{ max-width:860px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; }
@media(max-width:640px){ .footer-in{ grid-template-columns:1fr; gap:24px; } }
.footer h4{ font-family:var(--kop); font-weight:400; font-size:.8rem; color:var(--muted);
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.footer .merk{ font-family:var(--kop); font-size:1.3rem; color:#fff; margin-bottom:10px;
  text-shadow:0 0 12px color-mix(in srgb,var(--accent) 50%,transparent); }
.footer p, .footer a{ color:var(--zacht); font-size:.9rem; text-decoration:none; }
.footer a{ display:block; margin-bottom:8px; }
.footer a:hover{ color:#fff; }
.footer .betaal{ display:flex; gap:8px; margin-top:12px; align-items:center; color:var(--muted); font-size:.8rem; }
.footer-onder{ max-width:860px; margin:26px auto 0; padding-top:20px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; color:var(--muted); font-size:.82rem; }