/* trivia.css — De Grote Kaas-Trivia, in de stem van de vitrine:
   Oswald-kapitalen + Open Sans, inkt & goud, korrel en kaaswielen, de orb als wiel.
   Gamification: A/B/C/D-lakzegels, wikkel-ruiten, vonkregens, rijpings-rangen.
   Doelpubliek 40-50: grote letters, grote knoppen, geen tijdsdruk. */

:root {
  --ink:#0d0c0a; --ink2:#16140f; --creme:#f5f0dc; --gedempt:#a89f85;
  --accent:#c9a227; --goud-licht:#e0b34e; --goud-bleek:#f0d9a0;
  --rand:rgba(224,179,78,.3); --kaart:#1d1a13; --fout:#9b4a2c;
  --display:"Oswald",sans-serif; --sans:"Open Sans",sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans); font-size:17px; color:var(--creme); min-height:100dvh;
  background:radial-gradient(ellipse 90% 55% at 50% -8%, rgba(224,179,78,.13), transparent 62%),
             linear-gradient(180deg,#151209,var(--ink) 45%);
  display:flex; flex-direction:column; align-items:center;
  padding:40px 18px 20px; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
button { font-family:inherit; }

/* korrel + kaaswielen — dezelfde doorlopende laag als de vitrine */
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.deco-wheel{position:fixed;border-radius:50%;border:1px solid rgba(201,162,39,.2);pointer-events:none;animation:draai-traag 70s linear infinite}
.deco-wheel::before{content:"";position:absolute;inset:12%;border-radius:50%;border:1px dashed rgba(201,162,39,.15)}
.dw1{width:46vmin;height:46vmin;right:-16vmin;top:-14vmin}
.dw2{width:38vmin;height:38vmin;left:-13vmin;bottom:-12vmin;animation-direction:reverse}
@keyframes draai-traag{to{transform:rotate(360deg)}}
.terug{position:fixed;top:16px;left:18px;z-index:5;color:var(--gedempt);text-decoration:none;
 font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;transition:color .25s}
.terug:hover{color:var(--goud-licht)}

.scherm { position:relative; z-index:2; display:none; width:100%; max-width:680px; text-align:center; animation:opkomst .5s ease both; }
.scherm.aan { display:block; }
@keyframes opkomst { from { opacity:0; transform:translateY(16px); } }

/* ── onthaal ── */
.kicker { font-size:11px; letter-spacing:.5em; text-transform:uppercase; color:var(--goud-licht); margin-bottom:16px; }
.titel { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(38px,8vw,64px); line-height:1.05; color:#fff;
  text-shadow:0 0 14px rgba(201,162,39,.7), 0 0 44px rgba(201,162,39,.35); }
.titel em { font-style:normal; color:var(--goud-licht); }
.ondertitel { font-style:italic; color:var(--gedempt); margin-top:10px; }
.sier { color:var(--accent); letter-spacing:.5em; font-size:12px; margin:20px 0; }
.uitleg { line-height:1.9; color:#d8d0b8; }
.uitleg .goudtekst { color:var(--goud-licht); }
.wiel-kader {
  position:relative; width:min(380px,82vw); height:118px; margin:26px auto 22px;
  border-radius:16px; overflow:hidden; background:var(--ink);
  border:1px solid var(--rand); box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.wiel-kader canvas { position:absolute; inset:0; width:100%; height:100%; }
.wiel-sluier { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 30%, rgba(13,12,10,.55)); }
.wiel-kader::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--goud-licht) 50%,var(--accent) 70%,transparent); opacity:.85; }
.draai {
  display:inline-block; border:none; cursor:pointer; border-radius:999px;
  background:linear-gradient(120deg,#a8841f,var(--goud-licht) 45%,#a8841f);
  color:#14130f; font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.12em; font-size:17px; padding:16px 40px;
  box-shadow:0 8px 26px rgba(224,179,78,.35); transition:transform .2s, box-shadow .2s;
}
.draai:hover { transform:translateY(-2px); box-shadow:0 12px 34px rgba(224,179,78,.5); }
.beste-lijn { margin-top:16px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gedempt); }
.beste-lijn b { color:var(--goud-licht); }
.onthaal-fout { margin-top:14px; color:#d99a7a; font-style:italic; }

/* ── quiz ── */
.q-kop { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.q-nr { font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:13px; color:var(--goud-licht); white-space:nowrap; }
.wikkels { display:flex; gap:8px; flex-wrap:wrap; flex:1; }
.wikkels i {
  width:12px; height:12px; transform:rotate(45deg); border:1px solid var(--rand);
  background:transparent; transition:background .4s, box-shadow .4s, border-color .4s;
}
.wikkels i.juist { background:linear-gradient(135deg,#a8841f,var(--goud-licht)); border-color:var(--goud-licht);
  box-shadow:0 0 9px rgba(224,179,78,.8); }
.wikkels i.fout { background:var(--fout); border-color:var(--fout); opacity:.65; }
.kans-wikkel { font-size:19px; color:var(--goud-licht); text-shadow:0 0 10px rgba(224,179,78,.8);
  animation:kans-adem 2.6s ease-in-out infinite; transition:opacity .8s, transform .8s; }
.kans-wikkel.weg { opacity:.15; transform:translateY(8px) rotate(40deg); animation:none; text-shadow:none; }
@keyframes kans-adem { 0%,100% { opacity:.6; } 50% { opacity:1; } }
.vraagkaart {
  background:var(--kaart); border:1px solid var(--rand); border-left:3px solid var(--accent);
  border-radius:4px 16px 16px 4px; padding:24px 24px 20px; text-align:left;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}
.vraag { font-family:var(--display); font-weight:500; font-size:clamp(20px,3.4vw,25px); line-height:1.35; margin-bottom:18px; letter-spacing:.02em; }
.antwoorden { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.antwoord {
  position:relative; display:flex; align-items:center; gap:12px; overflow:hidden;
  border:1.5px solid var(--rand); border-radius:13px; text-align:left;
  background:linear-gradient(150deg,#262214,#171410); color:var(--creme); cursor:pointer;
  font:inherit; font-size:16.5px; padding:13px 15px; min-height:62px;
  transition:border-color .15s, transform .12s, background .3s;
}
.antwoord .letter {
  flex:none; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:600; font-size:14px; color:#14130f;
  background:radial-gradient(circle at 36% 30%, #fff3cf, var(--goud-licht) 55%, var(--accent));
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.3);
}
.antwoord:hover:not(:disabled) { border-color:var(--goud-licht); transform:translateY(-2px); }
.antwoord:disabled { cursor:default; }
.antwoord.juist { background:linear-gradient(150deg,#38401f,#232a14); border-color:#7d9c4f; }
.antwoord.fout { background:linear-gradient(150deg,#43200f,#26130a); border-color:var(--fout); opacity:.85; }
.antwoord.vervaagd { opacity:.35; }

/* vonkregen bij juist antwoord */
.vonk { position:fixed; z-index:60; pointer-events:none; color:var(--goud-licht);
  text-shadow:0 0 8px rgba(224,179,78,.9); animation:vonk-vlucht var(--vd,.9s) ease-out forwards; }
@keyframes vonk-vlucht {
  from { opacity:1; transform:translate(0,0) scale(1) rotate(0); }
  to { opacity:0; transform:translate(var(--vx,0), var(--vy,-60px)) scale(.4) rotate(120deg); } }

/* terugkoppeling: het leermoment + de brug naar de bot */
.terugkoppeling {
  margin-top:14px; background:var(--ink2); border:1px solid var(--rand); border-radius:14px;
  padding:18px 20px; text-align:left; animation:opkomst .4s ease both;
}
.tk-kop { font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:16px; margin-bottom:8px; }
.tk-kop.goed { color:var(--goud-licht); }
.tk-kop.mis { color:#d99a7a; }
.tk-weetje { line-height:1.75; color:#d8d0b8; font-size:15.5px; margin-bottom:14px; }
.tk-acties { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.tk-bot { color:var(--goud-licht); text-decoration:none; font-size:14.5px; font-style:italic; }
.tk-bot:hover { text-decoration:underline; }
.volgende {
  margin-left:auto; border:1px solid var(--rand); background:transparent; color:var(--creme);
  border-radius:999px; cursor:pointer; font-family:var(--display); text-transform:uppercase;
  letter-spacing:.1em; font-size:13.5px; padding:12px 26px; transition:background .2s, color .2s;
}
.volgende:hover { background:var(--goud-licht); color:#14130f; border-color:var(--goud-licht); }

/* ── einde ── */
.wikkel-toneel { margin-bottom:22px; }
.wikkel {
  width:120px; height:120px; margin:12px auto 18px; transform:rotate(45deg);
  background:linear-gradient(135deg,#8a6a1e,var(--goud-licht) 40%,#f5e6b8 52%,var(--goud-licht) 64%,#8a6a1e);
  border-radius:14px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 44px rgba(224,179,78,.55), inset 0 0 0 3px rgba(255,246,218,.4);
  animation:wikkelglans 3.2s ease-in-out infinite;
}
.wikkel span { transform:rotate(-45deg); font-family:var(--display); font-weight:700; letter-spacing:.14em; color:#3a2c0e; }
@keyframes wikkelglans { 0%,100% { box-shadow:0 0 30px rgba(224,179,78,.4), inset 0 0 0 3px rgba(255,246,218,.4); }
  50% { box-shadow:0 0 60px rgba(224,179,78,.75), inset 0 0 0 3px rgba(255,246,218,.7); } }
.wikkel-eer { font-family:var(--display); text-transform:uppercase; letter-spacing:.1em; font-size:18px; color:var(--goud-bleek); }
.einde-titel { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(28px,5vw,42px); margin-bottom:10px; color:#fff; text-shadow:0 0 20px rgba(201,162,39,.5); }
.rang { margin-bottom:14px; }
.rang-label { display:block; font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:var(--gedempt); margin-bottom:4px; }
.rang b { font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  font-size:21px; color:var(--goud-licht); }
.einde-tekst { line-height:1.8; color:#d8d0b8; margin-bottom:24px; }
.einde-acties { display:flex; flex-direction:column; gap:10px; align-items:center; }
.einde-knop {
  display:inline-block; min-width:250px; border:1px solid var(--rand); border-radius:999px;
  background:transparent; color:var(--creme); text-decoration:none; cursor:pointer;
  font:inherit; font-size:15.5px; padding:13px 28px; transition:background .2s, color .2s;
}
.einde-knop:hover { background:var(--goud-licht); color:#14130f; border-color:var(--goud-licht); }

/* ── voetnoot ── */
.voetnoot { position:relative; z-index:2; margin-top:auto; padding-top:34px; font-size:12px; color:var(--gedempt); text-align:center; line-height:2; }
.voetnoot b { color:var(--creme); font-weight:600; }
.voetnoot .stardust { font-family:var(--display); }

@media (max-width:560px) {
  body { padding-top:52px; }
  .antwoorden { grid-template-columns:1fr; }
  .volgende { margin-left:0; width:100%; }
  .tk-acties { flex-direction:column; align-items:stretch; text-align:center; }
  .deco-wheel { opacity:.5; }
}
@media (prefers-reduced-motion:reduce) {
  .scherm, .terugkoppeling, .wikkel, .kans-wikkel, .deco-wheel { animation:none; }
  .vonk { display:none; }
}

/* ── niveaus: vier deuren, oplopend in moeilijkheid ── */
.niveau-kiezer { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin:22px 0 4px; }
.niveau-kaart {
  border:1.5px solid var(--rand); border-radius:13px; cursor:pointer; text-align:left;
  background:linear-gradient(150deg,#211d12,#15120c); color:var(--creme);
  font:inherit; padding:13px 14px; transition:border-color .15s, transform .12s, box-shadow .2s;
}
.niveau-kaart b { display:block; font-family:var(--display); font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; font-size:14.5px; margin-bottom:3px; }
.niveau-kaart small { color:var(--gedempt); font-size:11.5px; line-height:1.45; display:block; }
.niveau-kaart:hover { transform:translateY(-2px); border-color:var(--goud-licht); }
.niveau-kaart.aan { border-color:var(--goud-licht); box-shadow:0 0 0 2px rgba(224,179,78,.25), 0 0 18px rgba(224,179,78,.25); }
.niveau-kaart.km { background:linear-gradient(150deg,#1d1524,#120e18); }
.niveau-kaart.km b { color:#c9b8ff; }
.niveau-kaart.km.aan { border-color:#a390ff; box-shadow:0 0 0 2px rgba(163,144,255,.3), 0 0 18px rgba(163,144,255,.3); }

/* ── ronde-tussenscherm ── */
.ronde-titel { font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  font-size:clamp(30px,6vw,48px); color:#fff; text-shadow:0 0 20px rgba(201,162,39,.5); margin:8px 0 10px; }
.ronde-sub { color:#d8d0b8; line-height:1.8; margin-bottom:26px; font-style:italic; }

/* ── vraag-extra's ── */
.q-niveau { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--gedempt); white-space:nowrap; }
.vraag-rij { display:flex; align-items:flex-start; gap:10px; }
.vraag-rij .vraag { flex:1; }
.luister { flex:none; border:1px solid var(--rand); background:transparent; border-radius:9px;
  cursor:pointer; font-size:15px; padding:6px 10px; transition:border-color .2s; }
.luister:hover { border-color:var(--goud-licht); }
.vraagkaart { border-left-color:var(--fam,#c9a227); transition:border-color .5s; }
.vraag .citaat { font-style:italic; color:#e8dfc2; }

/* spanning vóór de onthulling */
.antwoord.wacht { opacity:.55; transform:none; }
.streak-lijn { color:var(--goud-licht); font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }

body.groot { font-size:19px; }
body.groot .vraag { font-size:clamp(22px,3.8vw,28px); }
body.groot .antwoord { font-size:18px; min-height:70px; }

/* ── sfeer-fond: de kelder als fluisterlaag achter de hele quiz (zelfde wet als de
   vitrine-hero: foto op ~kwart zichtbaarheid, de typografie blijft koning) ── */
.foto-fond{position:fixed;inset:0;z-index:0;pointer-events:none}
.foto-fond img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.9)}
.fond-sluier{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,12,10,.88),rgba(13,12,10,.78) 40%,rgba(13,12,10,.92)),
             radial-gradient(ellipse 90% 55% at 50% -8%, rgba(224,179,78,.10), transparent 62%)}

/* ── onthaal: duidelijke stappen ── */
.ambacht-zin{display:block;margin-top:10px;font-style:italic;color:var(--gedempt);font-size:14.5px}
.stap-label{font-size:10.5px;letter-spacing:.4em;text-transform:uppercase;color:var(--goud-licht);
  margin:22px 0 12px}

/* ── de meta-laag: rang, kaaskast, duel — de redenen om terug te komen ── */
.duel-banner{margin-top:18px;padding:12px 18px;border:1px solid var(--goud-licht);border-radius:12px;
  background:rgba(224,179,78,.08);color:var(--goud-bleek);font-size:14.5px;
  animation:kans-adem 2.6s ease-in-out infinite}
.meta-regel{margin-top:14px;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gedempt)}
.kast-knop{margin-top:10px;border:1px solid var(--rand);background:transparent;color:var(--goud-bleek);
  border-radius:999px;cursor:pointer;font:inherit;font-size:13px;padding:9px 20px;transition:border-color .2s}
.kast-knop:hover{border-color:var(--goud-licht)}
.kast-paneel{margin-top:16px;background:var(--ink2);border:1px solid var(--rand);border-radius:14px;
  padding:16px;text-align:left}
.kast-kop{font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:14px;
  color:var(--goud-licht);margin-bottom:12px}
.kast-grid{display:flex;flex-wrap:wrap;gap:6px}
.kast-chip{font-size:11.5px;padding:4px 9px;border-radius:999px;border:1px solid rgba(224,179,78,.15);
  color:#4d4738}
.kast-chip.ontdekt{color:var(--creme);border-color:var(--fam,var(--rand));
  box-shadow:inset 2px 0 0 var(--fam,var(--accent))}
.kast-voet{margin-top:12px;font-size:11px;font-style:italic;color:var(--gedempt)}
.duel-uitslag{margin:6px 0 2px;font-family:var(--display);text-transform:uppercase;letter-spacing:.06em;
  font-size:17px;color:var(--goud-licht)}
.einde-meta{margin-top:8px;font-size:13px;color:var(--gedempt)}