/* Spel-laag: blinddoek, quiz, nabesprekingspaneel, highlight, startpagina */

/* Blinddoek: dekt alles visueel af, laat de accessibility-tree met rust. pointer-events:none zodat
   VoiceOver-acties (VO+spatie) die als klik op de cursorpositie worden uitgevoerd níet op de laag landen.
   DEV: tijdens het ontwikkelen halftransparant; voor de workshop terug naar background: #000. */
.blinddoek {
  position: fixed; inset: 0; z-index: 9000; background: rgba(0, 0, 0, .5); color: #fff;
  pointer-events: none; overflow: auto;
  transition: opacity 1.4s ease;
}
.blinddoek--weg { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .blinddoek { transition: none; } }
.blinddoek__intro { pointer-events: auto; max-width: 42rem; margin: 0 auto; padding: 4rem 1.5rem; background: rgba(0, 0, 0, .85); /* DEV: leesbaar houden op de halftransparante laag; mag weg als de laag weer #000 is */ }
.blinddoek__intro h1 { color: #fff; font-size: clamp(2rem, 4vw, 3rem); }
.blinddoek__intro ol { padding-left: 1.25rem; }
.blinddoek__intro li { margin-bottom: .6rem; }
.blinddoek__intro .button { margin-top: 1.5rem; }
.blinddoek__label { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--c-accent); margin-bottom: .5rem; }
kbd { font-family: inherit; font-weight: 600; font-size: .9em; padding: .05em .45em; border: 1px solid currentColor; border-radius: .3rem; background: rgba(255,255,255,.08); }
.blinddoek :focus-visible { outline-color: var(--c-yellow); }

/* Klaar-knop en quiz staan onder de site */
.klaar-blok { padding: 3rem 0; text-align: center; }
/* Zodra de Klaar-knop focus heeft (Tab), verschijnt hij als balk bóven de quiz-overlay (alleen in de blinde modus) */
body.is-blind .klaar-blok:focus-within { position: fixed; top: 0; left: 0; right: 0; width: auto; z-index: 9600; margin: 0; padding: 1rem; background: var(--c-ink); }
.quiz { padding: 3rem 0 5rem; background: var(--c-bg-soft); border-top: 4px solid var(--c-accent); }
/* De vragen als overlay bóven de blinddoek: zichtbaar terwijl de site verborgen blijft */
.quiz--overlay { position: fixed; inset: 0; z-index: 9500; overflow: auto; padding-top: 6.5rem; /* ruimte voor de Klaar-balk bovenin */ }
.quiz h2 { color: var(--c-ink); }
.quiz .vraag { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; max-width: 44rem; }
.quiz legend { font-weight: 700; font-family: var(--font-head); font-size: 1.2rem; padding: 0; margin-bottom: .5rem; }
.vraag__nr { color: var(--c-accent); }

/* Nabesprekingspaneel rechts */
body.is-onthuld { padding-right: min(34rem, 45vw); }
.paneel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(34rem, 45vw); z-index: 8000;
  background: #fff; border-left: 1px solid var(--c-border); box-shadow: -1rem 0 3rem rgba(0,0,0,.08);
  overflow: auto; padding: 2rem 1.75rem 3rem; font-size: 1rem;
}
.paneel h2 { color: var(--c-ink); font-size: 1.75rem; }
.paneel h3 { font-size: 1.05rem; margin: 0 0 .5rem; }
.paneel__sub { color: var(--c-accent); margin-top: 2rem; }
.resultaten, .verrassingen { list-style: none; margin: 0; padding: 0; }
.resultaat, .verrassingen li { border: 1px solid var(--c-border); border-radius: var(--r-small); padding: 1rem 1.25rem; margin-bottom: 1rem; background: var(--c-bg-soft); }
.resultaat.is-goed { border-left: 5px solid var(--c-ok); }
.resultaat.is-fout { border-left: 5px solid var(--c-error); }
.resultaat__icoon { font-weight: 700; }
.is-goed .resultaat__icoon { color: var(--c-ok); }
.is-fout .resultaat__icoon { color: var(--c-error); }
.resultaat dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 0 0 .75rem; }
.resultaat dl div { display: contents; }
.resultaat dt { font-weight: 600; color: var(--c-ink-soft); }
.resultaat dd { margin: 0; }
.paneel details { margin-top: .75rem; }
.paneel summary { cursor: pointer; font-weight: 600; }
.paneel details p { margin: .5rem 0 0; }
.wcag { font-size: .85rem; color: var(--c-ink-soft); }
.paneel__acties { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.paneel__acties .button { justify-content: center; text-align: center; }

/* "Toon op pagina" */
.highlight {
  outline: 4px solid var(--c-accent) !important; outline-offset: 6px; border-radius: .5rem;
 
  position: relative; z-index: 10;
}
.highlight[aria-hidden] { background: var(--c-yellow); }

/* Startpagina */
.start { padding: 3rem 0 4rem; }
.start .intro { max-width: 44rem; font-size: 1.25rem; }
.spiekbrief { width: 100%; max-width: 44rem; border-collapse: collapse; background: var(--c-bg-soft); border-radius: var(--r-card); overflow: hidden; margin-bottom: 2rem; }
.spiekbrief th, .spiekbrief td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--c-border); }
.spiekbrief th { width: 40%; font-family: var(--font-body); font-weight: 400; }
.spiekbrief kbd { background: #fff; border-color: var(--c-border); }
.rondes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 2rem 0; }
.ronde-kaart { display: flex; flex-direction: column; gap: .75rem; background: var(--c-bg-soft); border: 1px solid var(--c-border); border-radius: var(--r-card); padding: 1.5rem; }
.ronde-kaart p { flex: 1; margin: 0; }
.ronde-kaart .leider { font-size: .9rem; color: var(--c-ink-soft); }
.leider-blok { margin-bottom: 2.5rem; background: var(--c-bg-soft); border-left: 4px solid var(--c-yellow); padding: 1rem 1.25rem; border-radius: 0 var(--r-small) var(--r-small) 0; max-width: 44rem; }
.leider-blok summary { font-weight: 600; cursor: pointer; }
#scorebord { width: 100%; max-width: 44rem; border-collapse: collapse; margin-bottom: 1rem; }
#scorebord th, #scorebord td { padding: .6rem .9rem; text-align: left; border-bottom: 1px solid var(--c-border); }