/* Kleuren gesampled uit het geschilderde blauwe muzieknootje-knopje rechtsboven
   in images/startschermzonderwolken.png (knop-center ~1582,55; diameter ~85px).
   Hier centraal gezet zodat de fullscreen-knop dezelfde familie deelt en de
   tinten later bij te stellen zijn zonder in de PNG te hoeven meten. */
:root {
    --knop-blauw-licht: #005EC3;   /* glans bovenin het bolvlak */
    --knop-blauw-donker: #002155;  /* diep navy in het onderste deel */
    --knop-goud: #E09123;          /* gemiddelde van de gouden ring */
    --knop-nootje: #E0B321;        /* goud van het nootje-icoon */
}

/* Cinzel lokaal geladen uit de projectmap, zodat het ook offline werkt. */
@font-face {
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/cinzel-700.woff2") format("woff2");
}

body {

    margin: 0;
    background: black;

    display: flex;
    justify-content: center;
    align-items: center;

    min-height: 100vh;

    overflow: hidden;
}

#game-container {
    position: relative;

    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));

    overflow: hidden;

    background-image: url("images/startschermzonderwolken.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Testversie-lint: rustig pill-label gecentreerd onder de titel op het
   startscherm. Boven de achtergrond (z-index 35) maar onder scherm 2 (40) en de
   quiz-overlays (999), zodat het alleen op het startscherm verschijnt. Op de
   titel maakt meteen duidelijk dat het spel nog in test is. */
.beta-lint {
    position: absolute;
    left: 50%;
    top: 25.5%;                           /* net onder de "ONTDEK · LEER · GROEI"-plaquette */
    transform: translateX(-50%);
    z-index: 35;

    padding: 0.35em 1.1em;
    border-radius: 999px;
    border: 1.5px solid #d8b24a;          /* gouden rand */
    background: rgba(13, 26, 64, 0.92);   /* donkerblauw, in stijl van de game */

    color: #f0d27a;                        /* gouden tekst */
    font-size: clamp(9px, 1vw, 16px);      /* klein, schaalt mee met de venstergrootte */
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    pointer-events: none;                  /* vangt geen klikken op */
    user-select: none;
}

/* =========================
   TITELS
========================= */

h1 {
    font-size: 56px;
    margin-bottom: 10px;

    animation: glowPulse 3s infinite ease-in-out;
}

p {
    font-size: 22px;
    color: #f8e6b0;
}

/* =========================
   ANIMATIES
========================= */

@keyframes glowPulse {
    0% {
        text-shadow: 0 0 10px gold;
    }

    50% {
        text-shadow:
            0 0 20px gold,
            0 0 40px rgba(255, 215, 0, 0.8);
    }

    100% {
        text-shadow: 0 0 10px gold;
    }
}

@keyframes floating {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-4px);
    }

    100% {
        transform: translateY(0px);
    }
}

@keyframes quizFade {
    from {
        transform: scale(0.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* =========================
   KNOPPEN
========================= */

button {
    margin-top: 10px;
    padding: 16px 34px;

    font-size: 20px;

    border-radius: 14px;
    border: 2px solid #d6a84f;

    background: linear-gradient(#c6922e, #6f4310);

    color: white;

    cursor: pointer;

    box-shadow: 0 0 20px rgba(255, 190, 80, 0.5);

    transition: 0.3s;

    animation: floating 4s infinite ease-in-out;
}

button:hover {
    transform: scale(1.08) translateY(-3px);

    box-shadow:
        0 0 20px rgba(255, 210, 100, 0.8),
        0 0 40px rgba(255, 220, 120, 0.5);
}

/* =========================
   FULLSCREEN BUTTON
========================= */

.fullscreen-button {
    position: fixed;

    top: 18px;
    right: 18px;

    /* Boven de quiz-overlays (999) en de schatkamer-overlays (1000) zodat de knop
       op álle schermen zichtbaar en bruikbaar blijft — óók tijdens een ronde en
       in de schatkamer. Blijft onder het dev-only #wolken-paneel (3000). */
    z-index: 1100;

    width: 54px;
    height: 54px;

    border-radius: 50%;

    font-size: 26px;

    padding: 0;

    /* Overschrijft de globale button{}-stijl (bruin/goud) met de tinten die uit
       het geschilderde muzieknootje-knopje zijn gesampled, zodat de twee knoppen
       één familie vormen: blauw bolvlak, gouden ring, goud icoon. De gouden glow
       (box-shadow) erft de knop bewust van button{} — dezelfde verhouding. */
    background: linear-gradient(180deg, var(--knop-blauw-licht), var(--knop-blauw-donker));
    border: 2px solid var(--knop-goud);
    color: var(--knop-nootje);

    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icoon volgt de fullscreen-state (zonder extra JS): standaard het expand-icoon,
   in fullscreen het collapse-icoon. De knop zelf blijft in fullscreen zichtbaar,
   zodat de exitFullscreen()-tak ook op een tablet (geen Esc-toets) bereikbaar is. */
.fullscreen-button .fs-icon-collapse {
    display: none;
}

:fullscreen .fullscreen-button .fs-icon-expand {
    display: none;
}

:fullscreen .fullscreen-button .fs-icon-collapse {
    display: block;
}

/* Wegvagen afhankelijk van de fullscreen-state, alleen op apparaten mét een
   fijne aanwijzer (desktopmuis). Buiten fullscreen blijft de knop vol zichtbaar
   zodat de speler hem meteen vindt; ín fullscreen vervaagt hij (niet meer nodig)
   en komt terug bij hover/focus. Op touch-apparaten (tablet/iPad) geldt deze
   media query NIET, dus daar blijft de knop in beide states volledig zichtbaar —
   daar bestaat geen hover. Bewust geen pointer-events: none, zodat hij ook op
   opacity 0.15 klikbaar blijft, en :focus-visible dient de toetsenbordbediening. */
@media (hover: hover) and (pointer: fine) {
    /* Buiten fullscreen: knop altijd volledig zichtbaar — de speler moet hem meteen vinden */
    .fullscreen-button {
        opacity: 1;
        transition: opacity 0.25s ease;
    }

    /* In fullscreen: knop vervaagt, want hij is niet meer nodig; bij hover komt hij terug */
    :fullscreen .fullscreen-button {
        opacity: 0.15;
    }

    :fullscreen .fullscreen-button:hover,
    :fullscreen .fullscreen-button:focus-visible {
        opacity: 1;
    }
}

/* =========================
   BOEKEN
========================= */

.boek-zone {
    position: absolute;

   bottom: 8.2%;
width: 8%;
height: 22%;

    cursor: pointer;

    transition: 0.3s;

    border-radius: 50%;

    /* Boven de voorgrond (3) en de fakkel-laag (4) zodat de hover-glow
       (.boek-zone::before) zichtbaar vóór die decoratieve lagen valt i.p.v.
       eronder begraven te worden. Ruim onder de menu-klikzones (100) en de
       quiz-overlays (999). De zone zelf is transparant, dus alleen de glow
       komt naar voren — het geschilderde boek zit in de achtergrond. */
    z-index: 5;
}

/* Gedeelde boek-glow — scherm 1 (.boek-zone) én scherm 2 (.nt2-boek-glow) putten
   uit deze ene bron voor de LOOK (koel-blauwe radiale halo, onzichtbaar tot hover).
   De POSITIE (transform/z-index/inset-afwijking) staat per scherm apart.
   NB scherm 2 hangt de glow aan een APARTE <div>, niet aan de <button>, omdat een
   button z'n pseudo-element op de border-box klipt (zie .nt2-boek-glow). */
.boek-zone::before,
.nt2-boek-glow::before {
    content: "";

    position: absolute;

    inset: -25%;

    border-radius: 50%;

    background: radial-gradient(
        ellipse at center,
        rgba(190, 240, 255, 0.55) 0%,
        rgba(120, 220, 255, 0.28) 35%,
        rgba(80, 180, 255, 0.10) 58%,
        rgba(80, 180, 255, 0) 78%
    );

    opacity: 0;

    filter: blur(10px);

    transition: 0.3s;

    pointer-events: none;
}

/* Glow correcties boeken */

/* Uniforme glow: gecentreerd op het embleem, schaalt mee in % */
.boek-zone::before {
    transform: translateY(-12%);
}

.boek-zone:hover {
    transform:
        translateY(-12px)
        scale(1.04);
}

.boek-zone:hover::before,
.nt2-boek-glow.aan::before {
    opacity: 1;
}

/* =========================
   POSITIES BOEKEN
========================= */

.matteus {
    left: 22.0%;        /* 0,5% naar links t.o.v. het origineel (22,5%) */
}

.marcus {
    left: 35.3%;        /* 0,5% naar rechts t.o.v. het origineel (34,8%) */
    bottom: 9.7%;       /* 1,5% omhoog t.o.v. de gedeelde .boek-zone (8.2%) */
}

.lucas {
    left: 47.2%;
    bottom: 9.7%;       /* 1,5% omhoog t.o.v. de gedeelde .boek-zone (8.2%) */
}

.johannes {
    left: 60.6%;
}

/* =========================================================================
   FAKKEL-GLOED — decoratieve, "levende" gloed op de fakkels. GEDEELD systeem:
   dezelfde klassen, keyframes en reduced-motion-regel bedienen zowel scherm 1
   (startscherm, laag in #game-container) als scherm 2 (#nt-scherm-2, laag in
   .nt2-hemel). Per scherm verschilt alléén de config met gloedposities in
   script.js (bouwFakkelLaag); er is geen gedupliceerde flikker-CSS voor scherm 2.
   Volledig decoratief: de laag heeft pointer-events:none, dus de
   klikvakken (.boek-zone, menu-zones) en de quizlogica blijven onaangeroerd.
   De gloeden worden door script.js gebouwd uit het config-blok FAKKEL_GLOED en
   met left/top in % van #game-container geplaatst — net als .boek-zone — zodat
   ze in fullscreen én in het kleinere venster op hun plek blijven. Live
   bijschuiven kan met ?afstel=aan (sleep de gloeden; de nieuwe config wordt in
   de console gelogd).
   ========================================================================= */
.fakkel-laag {
    position: absolute;
    inset: 0;

    z-index: 4;                 /* boven de voorgrond (3), zodat de gloed over de
                                   architectuur schijnt; scherm 2 (40) en de
                                   quiz-overlays (999) bedekken 'm vanzelf. */
    pointer-events: none;       /* puur decoratief — nooit in de weg */
    overflow: hidden;
}

/* Eén gloed: gecentreerd op zijn (left%,top%)-punt binnen het toneel. De
   centrering zit op deze wrapper; de flikker-animatie (scale) op het kind .vlam,
   zodat het schalen de centrering niet verstoort. Grootte in % van de
   container-BREEDTE, zodat de gloed proportioneel meeschaalt. */
.fakkel-gloed {
    position: absolute;
    transform: translate(-50%, -50%);

    width: var(--fakkel-grootte, 9%);
    aspect-ratio: 1 / 1;

    pointer-events: none;
}

.fakkel-gloed > .vlam {
    width: 100%;
    height: 100%;
    border-radius: 50%;

    /* Warm: lichte gele kern -> oranje -> doorzichtig aan de randen. */
    background: radial-gradient(
        circle at 50% 45%,
        rgba(255, 240, 180, 0.85) 0%,
        rgba(255, 190, 90, 0.55) 28%,
        rgba(255, 140, 45, 0.30) 52%,
        rgba(255, 120, 30, 0.10) 72%,
        rgba(255, 120, 30, 0) 100%
    );

    mix-blend-mode: screen;     /* telt op bij het licht eronder: oogt als gloed */
    transform-origin: 50% 60%;  /* schaalt vanuit de vlambasis */
    will-change: opacity, transform;

    /* Onregelmatige flikker; duur/vertraging komen per fakkel uit de config. */
    animation: fakkelFlikker var(--fakkel-duur, 2.6s) ease-in-out
               var(--fakkel-vertraging, 0s) infinite;
}

/* Alleen opacity + transform: scale, zoals gevraagd. De ongelijke stapjes geven
   het levende, niet-mechanische vuurgevoel; per fakkel verschilt ook duur. De
   swing is bewust ruimer (dieper dippen, hoger oplichten) dan een eerste,
   te-subtiele versie, zodat de flikker ook tegen de lichte, warme achtergrond
   met screen-blend zichtbaar is — maar nog steeds zacht en smaakvol. */
@keyframes fakkelFlikker {
    0%   { opacity: 0.45; transform: scale(1.00); }
    18%  { opacity: 0.85; transform: scale(1.07); }
    33%  { opacity: 0.55; transform: scale(1.02); }
    50%  { opacity: 1.00; transform: scale(1.13); }
    67%  { opacity: 0.60; transform: scale(1.04); }
    83%  { opacity: 0.90; transform: scale(1.09); }
    100% { opacity: 0.45; transform: scale(1.00); }
}

/* Toegankelijkheid: bij voorkeur voor minder beweging staat de flikkering uit
   en blijft een rustige, stilstaande gloed op gemiddelde intensiteit over (niet
   helemaal niets). Generiek op .fakkel-gloed > .vlam, dus geldt automatisch voor
   de gloed van BEIDE schermen (1 en 2). */
@media (prefers-reduced-motion: reduce) {
    .fakkel-gloed > .vlam {
        animation: none;
        opacity: 0.7;
        transform: scale(1.03);
    }
}

/* Afstelmodus (?afstel=aan): de laag blijft als geheel door-klikbaar
   (pointer-events:none), maar de losse gloeden worden pakbaar om ze op de
   fakkels te schuiven. Een duidelijke omlijning + middenstip maken ook een
   subtiele gloed precies vindbaar; de geselecteerde gloed licht cyaan op, exact
   zoals de trofeeën in de Schatkamer-afstelmodus. */
.fakkel-laag.afstel { pointer-events: none; }
.fakkel-laag.afstel .fakkel-gloed {
    pointer-events: auto;
    cursor: grab;
    outline: 1.5px dashed rgba(255, 220, 140, 0.9);
    outline-offset: -1px;
    border-radius: 50%;
}
.fakkel-laag.afstel .fakkel-gloed:active { cursor: grabbing; }

/* Middenstip: pinpoint van de gloedpositie, ook als de gloed zelf subtiel is. */
.fakkel-laag.afstel .fakkel-gloed::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    background: #ffe08a;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* Geselecteerde gloed: cyaan markering, identiek aan de trofee-selectie. */
.fakkel-laag.afstel .fakkel-gloed.afstel-geselecteerd {
    outline: 3px solid #36dfff;
    outline-offset: 1px;
    box-shadow: 0 0 10px 3px rgba(54, 223, 255, 0.85);
}
.fakkel-laag.afstel .fakkel-gloed.afstel-geselecteerd::after {
    background: #36dfff;
}

/* =========================================================================
   WOLKENLAAG — trage, driftende wolken over de hele hemel van het startscherm.
   Net als de fakkelgloed puur decoratief: pointer-events:none, dus knoppen
   eronder blijven werken. Ligt op z-index 2 (boven de achtergrond, onder de
   voorgrond op 3 en de fakkels op 4), dus scherm 2 (40) en de quiz-overlays
   (999) bedekken 'm vanzelf.

   De panelen, banieren, titel en boeken zitten ín de achtergrondafbeelding
   geschilderd; er bestaat dus geen echte laag "tussen" hen en de lucht. De
   afscherming gebeurt nu door een VOORGRONDLAAG (.voorgrond, z-index 3): dat is
   exact dezelfde scène, maar met alléén de lucht weggesneden (transparant). Die
   ligt over de wolken en dekt ze af behalve waar lucht is. Daardoor mogen de
   wolken over de VOLLE breedte én hoogte driften — óók rechts boven de
   prijzenkast — zonder ooit architectuur of UI te bedekken. (Eerder deed een
   fade-masker dit, maar dat maakte de rechterkant een dode hoek.)

   Live afstellen met ?wolken=aan (eigen paneel, los van de trofee-afstelmodus).
   ========================================================================= */
.wolken-laag {
    position: absolute;
    inset: 0;                   /* volle breedte én hoogte van het toneel */

    z-index: 2;                 /* boven de achtergrond, onder de voorgrond (3) */
    pointer-events: none;       /* puur decoratief — nooit in de weg */
    overflow: hidden;           /* wolken die uit beeld driften worden afgekapt */

    /* GEEN fade-masker meer. De afscherming gebeurt nu door de voorgrondlaag
       (.voorgrond, z-index 3): dat is dezelfde scène met alléén de lucht
       weggesneden (transparant). Wolken driften dus over de hele hemel — óók
       achter het logo, de banieren, de prijzenkast en het muzieknootje — maar
       worden door de voorgrond afgedekt zodra ze buiten de open lucht komen.
       Zo bedekken ze nooit architectuur of UI, en is de rechterkant niet langer
       een dode hoek. */
}

/* Voorgrondlaag: de volledige startscherm-scène met de lucht eruit gesneden
   (transparant). Ligt exact over de achtergrond en dekt de wolken eronder af,
   behalve waar lucht is. Daardoor lijken de wolken áchter alles te drijven. */
.voorgrond {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    z-index: 3;                 /* boven de wolken (2), onder de fakkels (4) */
    pointer-events: none;       /* puur decoratief — klikzones liggen erboven */
}

/* Eén wolk: absoluut in de band, traag horizontaal driftend. Alleen transform
   (translateX) en opacity bewegen, dus de animatie blijft GPU-versneld. Breedte
   in % van de container, verticale positie (top) in % van de band-hoogte. */
.wolk {
    position: absolute;
    top: var(--wolk-top, 10%);
    left: 0;

    width: var(--wolk-breedte, 22%);
    height: auto;

    opacity: var(--wolk-opacity, 0.8);
    will-change: transform;

    /* Wolken een tint lichter en witter: brightness tilt ze op, de lichte
       saturate-verlaging trekt ze van blauwig-grijs richting neutraal wit.
       Raakt drift/opacity/z-index niet — puur helderheid/tint. */
    filter: brightness(1.25) contrast(1.04) brightness(1.12) saturate(0.9);

    /* Lange, lineaire, oneindige cyclus; duur (snelheid) en vertraging per wolk
       uit de config, zodat ze met verschillende snelheden een parallax geven.
       Bewust als losse longhand-properties (niet de 'animation'-shorthand): een
       var() in de shorthand wordt door sommige engines pas ná het cascaderen
       gesubstitueerd en kan dan stilvallen. Verticale positie loopt via 'top'
       (hierboven), volledig los van deze translateX-drift, zodat de twee elkaar
       nooit overschrijven. */
    animation-name: wolkDrift;
    animation-duration: var(--wolk-duur, 100s);
    animation-timing-function: linear;
    animation-delay: var(--wolk-vertraging, 0s);
    animation-iteration-count: infinite;
}

/* FALLBACK-keyframe. Het hoofdpad loopt NIET meer via deze gedeelde keyframe:
   script.js (bouwWolkenLaag) genereert per wolk een EIGEN keyframe met
   letterlijke begin-/eindwaarden en zet animation-name daar inline op. Reden:
   een var() binnen @keyframes wordt door sommige engines pas ná het cascaderen
   gesubstitueerd en kan dan stilvallen — precies het "wolken stoppen"-euvel.
   Letterlijke per-wolk keyframes zijn volledig standaard en kunnen niet
   vastlopen. Deze var()-variant blijft alleen staan als vangnet voor het geval
   het script de animation-name niet zou zetten.
   De begin-/eindtranslatie staat NIET vast op een vaste %: translateX is
   relatief aan de eigen breedte van de wolk (16–28% van het toneel), dus een
   vaste % zou per wolk een andere afstand afleggen — daardoor kwamen wolken
   vroeger niet verder dan ~82% en "ploppen" ze terug vóór de rechterkant.
   Daarom rekent script.js per wolk --wolk-x0/--wolk-x1 uit zijn breedte uit, zó
   dat élke wolk dezelfde reis maakt: net buiten beeld links binnen en pas
   volledig buiten beeld rechts (voorbij de prijzenkast) eruit. */
@keyframes wolkDrift {
    from { transform: translateX(var(--wolk-x0, -120%)); }
    to   { transform: translateX(var(--wolk-x1, 440%)); }
}

/* NB: bewust GEEN @media (prefers-reduced-motion: reduce)-uitschakeling meer.
   Die regel zette de drift hard uit (animation:none), waardoor de wolken stil
   bleven staan op systemen met "animatie-effecten uit" (bv. Windows) — precies
   het gemelde euvel. De drift is traag, zacht en niet-flikkerend en is een
   kernonderdeel van het startscherm; daarom laten we hem altijd lopen. Wil je de
   OS-voorkeur tóch respecteren, dan kan hier een gedempte variant terugkomen. */

/* Afstelpaneel voor de wolken (?wolken=aan). Zelfde look als #afstel-paneel,
   maar rechtsboven zodat het de trofee-afstelmodus niet in de weg zit. */
#wolken-paneel {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 3000;
    width: 300px;
    max-height: 92vh;
    overflow: auto;
    padding: 10px 12px;
    background: rgba(8, 14, 30, 0.93);
    color: #e8eefc;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid #36dfff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
#wolken-paneel strong { color: #36dfff; letter-spacing: 0.5px; }
#wolken-paneel .wolk-rij {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #2a466e;
}
#wolken-paneel .wolk-kop { color: #36dfff; margin-bottom: 4px; }
#wolken-paneel label { display: block; margin-top: 5px; }
#wolken-paneel input[type="range"] { width: 100%; }
#wolken-paneel .wolk-png-keuze { display: flex; gap: 4px; margin-top: 3px; }
#wolken-paneel .wolk-png-keuze button {
    flex: 1;
    font: 11px ui-monospace, Menlo, Consolas, monospace;
    padding: 4px 0;
    color: #08101e;
    background: #2a466e;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
#wolken-paneel .wolk-png-keuze button.actief { background: #36dfff; }
#wolken-paneel .wolk-knoppen { margin-top: 10px; display: flex; gap: 6px; }
#wolken-paneel button.hoofdknop {
    font: 11px ui-monospace, Menlo, Consolas, monospace;
    padding: 6px 9px;
    color: #08101e;
    background: #36dfff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}
#wolken-paneel button.hoofdknop:hover { background: #6fe9ff; }
#wolken-paneel #wolken-uitvoer {
    width: 100%;
    height: 150px;
    margin-top: 8px;
    font: 10px ui-monospace, Menlo, Consolas, monospace;
    color: #d8e2f4;
    background: #06101f;
    border: 1px solid #2a466e;
    border-radius: 5px;
    resize: vertical;
}

/* =========================
   QUIZ OVERLAY
========================= */

.quiz-overlay {
    position: fixed;

    inset: 0;

    /* Warme, zonnige radial met een tikje rood en wat meer geel: gedempt
       maar uitnodigend. Volledig dekkend zodat het drukke startscherm niet
       meer doorschemert. */
    background: radial-gradient(ellipse at 50% 40%, #f6dca8 0%, #ecc488 55%, #d9a86a 100%);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 999;
}

/* =========================
   QUIZ BOX
========================= */

.quiz-box {
    width: 650px;

    padding: 50px;

    border-radius: 35px;

    background: rgba(10, 20, 55, 0.82);

    border: 2px solid rgba(255, 215, 120, 0.35);

    box-shadow:
        0 0 40px rgba(0,0,0,0.6),
        0 0 25px rgba(255,215,120,0.15);

    text-align: center;

    animation: quizFade 0.35s ease;
}

.quiz-title {
    font-size: 4rem;

    color: #ffd86b;

    margin-bottom: 30px;

    text-shadow:
        0 0 12px rgba(255,215,120,0.4);
}

/* Compacter titel-blok in het quizvak zodat de bijbelplaats-regel bij
   gemiddelde en lange vragen zonder scrollen in beeld past. margin-top: 0
   haalt de onbedoelde UA-<h2>-marge (0.83em ≈ 53px) weg; de titel wordt iets
   kleiner (blijft ruim leesbaar als label) met wat minder marge eronder. Alleen
   binnen #quiz-scherm — vraag- en antwoordfont blijven ongemoeid. */
#quiz-scherm .quiz-title {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 2.75rem;
}

.quiz-question {
    font-size: 2.3rem;

    color: white;

    margin-bottom: 40px;
}

/* =========================
   RUIMERE QUIZ- EN NIVEAU-VAKKEN
   Het quizscherm en het niveaukeuze-scherm krijgen een breder, royaler
   vak (vergelijkbaar met het avatar-keuzescherm) zodat langere vragen
   en hele zinnen comfortabel passen. Stijl (donkerblauw vak met gouden
   rand, gouden titel, XP-regel) blijft hetzelfde — alleen ruimer.
========================= */
#quiz-scherm .quiz-box,
#niveau-scherm .quiz-box {
    width: 1200px;
    max-width: 88vw;
    max-height: 95vh;
    padding: 40px 56px;
    overflow: hidden;
}

/* Het quizvak omsluit zijn eigen inhoud en wordt door de overlay
   (align-items: center) verticaal netjes in het scherm gecentreerd. We zetten
   bewust GEEN vaste min-height meer: die maakte het vak altijd bijna
   schermvullend, en in combinatie met justify-content: center + overflow:
   hidden werd een lange vraag (vraag + antwoorden + bijbeltekst) aan boven- én
   onderkant afgekapt — waardoor de "Lees het na in: ..."-regel onder de
   schermrand wegviel.

   Nu: max-height (95vh, in de regel hierboven) begrenst het vak, en
   overflow-y: auto laat de inhoud BINNEN het vak scrollen zodra die toch te
   hoog wordt. Zo blijft élke vraag, hoe lang ook, volledig zichtbaar.
   justify-content: flex-start (i.p.v. center) voorkomt de bekende flexbox-bug
   waarbij de bovenkant onbereikbaar wordt zodra de inhoud overloopt en je moet
   scrollen. De #resultaat-zone houdt zijn eigen min-height, dus de vraag en
   antwoordknoppen verspringen nog steeds niet zodra de feedback verschijnt. */
#quiz-scherm .quiz-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
}

/* Vraag is dé blikvanger van het quizscherm: nu nog groter en met flink
   meer witruimte er omheen, zodat het vraag+antwoorden-blok prettig de
   bovenste twee derde van het vak vult i.p.v. bovenin te plakken.
   clamp(...) schaalt mee met de viewport-hoogte, zodat het op kleinere
   schermen netjes binnen het kader past zonder scrollen.
   Niveau- en avatar-scherm hebben eigen overrides verderop in dit bestand
   en worden door deze regels niet beïnvloed. */
#quiz-scherm .quiz-question {
    font-size: clamp(2.8rem, 5vh, 3.6rem);
    line-height: 1.35;
    margin: clamp(20px, 2.8vh, 32px) auto clamp(30px, 4.2vh, 46px);
    max-width: 1000px;
}

/* =========================
   ANTWOORD KNOPPEN
========================= */

.answer-btn {
    width: 100%;

    margin-top: 22px;

    padding: 22px;

    font-size: 2rem;

    color: white;

    background:
        linear-gradient(
            to bottom,
            rgba(120,80,20,0.95),
            rgba(60,35,5,0.95)
        );

    border: 2px solid rgba(255,215,120,0.25);

    border-radius: 20px;

    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow:
        inset 0 0 12px rgba(255,215,120,0.08),
        0 0 12px rgba(0,0,0,0.35);
}

.answer-btn:hover {
    transform: scale(1.03);

    border-color: rgba(255,215,120,0.65);

    box-shadow:
        0 0 18px rgba(255,215,120,0.35),
        inset 0 0 15px rgba(255,215,120,0.12);
}

/* =========================
   ANTWOORDKNOPPEN — quiz-scherm-stijl
   Sfeervolle blauwe/gouden look die past bij de rest van het spel.
   Beperkt tot #quiz-scherm zodat de niveaukeuze-knoppen (brons/zilver/goud)
   hun eigen kleuren behouden.
========================= */

#quiz-scherm .answer-btn {
    /* In het bredere quizvak: comfortabel max-cap zodat hele zinnen ruim
       passen, maar korte antwoorden niet absurd uitgerekt worden. Display
       block + auto-marges centreren elke knop in het brede vak. Iets
       hogere knoppen met grotere tekst voor meer aanwezigheid en
       fijn-aantikbaarheid (vooral voor kinderen); padding/margin/font
       clampen mee met viewport-hoogte zodat alles op grote schermen
       ademend aanvoelt en op kleinere compact blijft — altijd zonder
       scrollen. */
    width: 100%;
    max-width: 820px;
    display: block;
    margin: clamp(15px, 2.2vh, 22px) auto 0;
    padding: clamp(15px, 2.4vh, 22px) 32px;

    font-size: clamp(1.3rem, 2.1vh, 1.5rem);
    font-weight: 500;

    color: #f4c75e;
    text-shadow: none;

    background: linear-gradient(to bottom, #2a4778, #1a3060);
    border: 2px solid #d4a648;
    border-radius: 6px;

    box-shadow:
        inset 0 1px 0 rgba(244, 199, 94, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3);

    cursor: pointer;
    transition: all 0.2s ease;
    animation: none;
}

#quiz-scherm .answer-btn:hover {
    background: linear-gradient(to bottom, #355688, #234074);
    border-color: #f4c75e;

    box-shadow:
        inset 0 1px 0 rgba(244, 199, 94, 0.55),
        0 2px 6px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(244, 199, 94, 0.35);

    transform: none;
}

/* Juist antwoord — groen oplichten */
#quiz-scherm .answer-btn.answer-correct,
#quiz-scherm .answer-btn.answer-correct:hover {
    background: linear-gradient(to bottom, #3d6b2a, #2a4d1a);
    border-color: #8fc850;
    color: #d8f0a8;

    box-shadow:
        inset 0 1px 0 rgba(216, 240, 168, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(143, 200, 80, 0.5);

    transform: none;
}

/* Fout antwoord — rood oplichten */
#quiz-scherm .answer-btn.answer-wrong,
#quiz-scherm .answer-btn.answer-wrong:hover {
    background: linear-gradient(to bottom, #6b2a2a, #4d1a1a);
    border-color: #c85050;
    color: #f0d8d8;

    box-shadow:
        inset 0 1px 0 rgba(240, 216, 216, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 12px rgba(200, 80, 80, 0.5);

    transform: none;
}

#resultaat {
    /* Vaste, comfortabele zone onderin het quizvak voor zowel de
       feedbacktekst (✅/❌) als de bijbelpassage ("Lees het na in: ...").
       Door de min-height blijft die ruimte gereserveerd, dus de
       antwoordknoppen en de hele lay-out verspringen niet zodra de
       feedback verschijnt. Schaalt mee met viewport-hoogte. */
    margin-top: clamp(28px, 3.6vh, 42px);
    font-size: 34px;
    font-weight: bold;
    text-align: center;
    min-height: clamp(110px, 13vh, 140px);
    /* De min-height hierboven reserveert de ruimte voor feedback + bijbelplaats
       en voorkomt een lay-out-sprong (gemeten 76px) zodra de feedback verschijnt
       — daarom blijft die staan. De grote lege ondermarge is weg: de 40px
       box-padding scheidt de bijbelplaats al van de vakrand. Zo staat de
       "Lees het na in: ..."-regel bij gemiddelde/lange vragen zonder scrollen
       in beeld. */
    margin-bottom: 0;
}

.bijbelplaats {
    margin-top: 10px;
    font-size: 22px;
    font-weight: normal;
    font-style: italic;
    color: #f8e6b0;
    text-shadow: 0 0 6px rgba(255, 215, 120, 0.35);
}

/* Optionele uitleg onder de bijbelplaats: zelfde crème-gouden familie, maar iets
   kleiner en niet-cursief zodat de bronregel de primaire regel blijft. Verschijnt
   alleen bij vragen met een 'uitleg'-veld. */
.uitleg {
    margin-top: 8px;
    font-size: 18px;
    font-weight: normal;
    line-height: 1.4;
    color: #f8e6b0;
    text-shadow: 0 0 6px rgba(255, 215, 120, 0.35);
}

#score-balk {
    position: relative;      /* anker voor de zwevende "+N" (.xp-plus) */

    margin-bottom: 25px;

    font-size: 28px;

    color: #ffd86b;

    text-shadow:
        0 0 10px rgba(255,215,120,0.4);
}

/* Zwevende "+N" bij een goed antwoord: stijgt ~40px en vervaagt naar 0 in
   ~800 ms. Puur CSS; JS (toonXpPlus) voegt het element toe en haalt het na de
   animatie weg. Goud uit de gedeelde variabele — geen nieuwe kleur. Bij
   prefers-reduced-motion toont JS de +N sowieso niet; de media query hieronder
   is een extra vangnet. */
.xp-plus {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%, 0);

    color: var(--knop-nootje);
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);

    pointer-events: none;
    animation: xpPlusZweef 800ms ease-out forwards;
}

@keyframes xpPlusZweef {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -40px); }
}

@media (prefers-reduced-motion: reduce) {
    .xp-plus { display: none; }
}

/* =========================
   LEVEL HUD (Definitieve Koppeling & Uitlijning)
========================= */

/* Level-nummer gecentreerd op het geschilderde schild (linksin het paneel).
   Centrering is breedte-onafhankelijk: translate(-50%, -50%) legt het midden
   van het cijfervak exact op (left, top), dus zowel 1 cijfer (5) als 2 cijfers
   (12) staan gecentreerd. text-align + nowrap houden het vak symmetrisch en
   voorkomen afbreken bij twee cijfers.
     - left: horizontaal midden van het schild.
     - top : verticale "sweet spot", bewust iets boven het exacte midden omdat
             het schild onderaan spits toeloopt. Startwaarde — in DevTools bij
             te stellen. */
#level-nummer {
    position: absolute;
    left: 77.85%;
    top: 84.9%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: 44px;
    font-weight: 700;
    color: #ffd86b;
    text-shadow:
        0 0 8px rgba(255, 215, 120, 0.9),
        0 0 16px rgba(255, 190, 80, 0.5);
    /* 45 = boven scherm 2 (z-index 40) zodat het levelnummer op elk
       carouselscherm op het schild blijft staan; onder de quiz/schatkamer-
       overlays (999/1000) die het moeten kunnen afdekken. */
    z-index: 45;
    /* Puur decoratief: het getal op het schild hoeft geen klikken te vangen.
       Zo kan een klik op andere knoppen er nooit door geblokkeerd worden. */
    pointer-events: none;
}

/* XP-balk in de gleuf rechts in het paneel. */
#level-hud {
    position: absolute;
    left: 83.6%;
    bottom: 15%;
    width: 12%;
    display: flex;
    align-items: center;
    /* 45 = boven scherm 2 (z-index 40), zelfde laag als avatar en levelnummer,
       onder de quiz/schatkamer-overlays (999/1000). */
    z-index: 45;
    /* Puur decoratief: de XP-balk hoeft geen klikken te vangen. Zo kan een
       onverwacht uitgerekte HUD nooit klikken op andere knoppen blokkeren. */
    pointer-events: none;
}

.xp-paneel {
    width: 100%;
}

.xp-balk {
    width: 100%;        
    box-sizing: border-box;
    height: 10px;        /* Slanke balk die precies binnen de gouden randen valt */
    border-radius: 20px;
    overflow: hidden;
    background: rgba(3, 10, 24, 0.95);
    border: none;
}

#xp-vulling {
    width: 0%;          /* Begint leeg, wordt gevuld via JavaScript */
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(to right, #006bd6, #36dfff);
    box-shadow:
        inset 0 0 6px rgba(255,255,255,0.55),
        0 0 14px rgba(80,210,255,0.95);
    transition: width 0.35s ease; /* Zorgt voor het vloeiende animatie-effect */
}

/* =========================
   SCHATKAMER (TROFEEËNKAMER) — eigen, herbruikbaar scherm
   Komt als volledige overlay over het startscherm. De .schatkamer-vitrine
   heeft dezelfde 16:9-verhouding als #game-container, met de schatkamer-
   achtergrond. Alle sokkel-/trofee-/naamplaat-opmaak komt hier later bij en
   blijft binnen .schatkamer-vitrine, zodat de game-opmaak ongemoeid blijft en
   er later meer vitrines naast kunnen.
   STAP 1: alleen achtergrond + Terug-knop.
========================= */

.schatkamer-overlay {
    position: fixed;
    inset: 0;

    /* Donkere rand rond de vitrine, net als in het losse testbestand. */
    background: #1a120a;

    display: flex;
    justify-content: center;
    align-items: center;

    /* Boven het startscherm en de overige overlays. */
    z-index: 1000;
}

.schatkamer-vitrine {
    position: relative;

    /* Verhouding per vitrine: bouwVitrine() zet --vitrine-verhouding uit
       config.verhouding (standaard 16:9; de Evangeliën-vitrine is 3:4 staand).
       De HOOGTE is de beperkende factor — even hoog als de 16:9 spel-box,
       breedte volgt uit de verhouding — zodat het paneel zo groot mogelijk
       binnen het spelscherm staat en de zaal ernaast zichtbaar blijft. */
    --vitrine-verhouding: 16 / 9;
    height: min(100vh, calc(100vw * 9 / 16));
    aspect-ratio: var(--vitrine-verhouding);
    width: auto;
    max-width: min(100vw, calc(100vh * 16 / 9));   /* nooit breder dan de spel-box */

    /* Containercontext: naam-labels schalen met de doosbreedte (cqi), niet met
       de viewport. Zo blijft de verhouding tekst↔naambord constant op elk
       venster en lopen lange namen nooit buiten hun bord. */
    container-type: inline-size;

    /* Fallback-achtergrond; bouwVitrine() zet de echte achtergrond uit het
       config-object inline (config.achtergrond). Doos en kunst hebben nu
       dezelfde verhouding, dus 'cover' vult zonder vervorming of lege balken. */
    background-image: url("images/scahtkamer2.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    overflow: hidden;
}

/* De houder waarin bouwVitrine() per nis een sokkel + naamplaat plaatst.
   Niet zelf gepositioneerd, zodat de absolute kinderen t.o.v. de vitrine
   uitlijnen (de %-posities blijven daardoor kloppen). */

/* ---- Sokkel-trofee (eigen klasse, los van de prijzenkast-.trofee) ----
   Generieke opmaak. De vitrine-specifieke waarden (left + height) en de
   gedeelde --trofee-bodem zet bouwVitrine() inline uit de config; de var()-
   fallbacks houden de weergave correct mocht een waarde ontbreken. */
.schatkamer-vitrine .sk-trofee {
    position: absolute;
    bottom: var(--trofee-bodem, 30%);
    width: auto;                            /* de (inline) hoogte bepaalt de schaal */
    transform: translateX(-50%);            /* zet middelpunt op de left-waarde */
    filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
    pointer-events: none;
    user-select: none;
}

/* Lege nis: trofee verbergen, de lege sokkel uit de achtergrond blijft staan. */
.schatkamer-vitrine .sk-trofee[hidden] { display: none; }

/* Afstelmodus (?afstel=aan): in een open vitrine zijn de trofeeën sleepbaar.
   Buiten afstelmodus blijft .sk-trofee pointer-events: none (zie hierboven). */
.schatkamer-vitrine.afstel .sk-trofee {
    pointer-events: auto;
    cursor: move;
    touch-action: none;                     /* slepen niet door scroll onderbroken */
}
.schatkamer-vitrine .sk-trofee.afstel-geselecteerd {
    outline: 3px solid #36dfff;
    outline-offset: 1px;
    box-shadow: 0 0 10px 3px rgba(54, 223, 255, 0.85);
}

/* ---- Naam op de naamplaat ----
   Idem: left + font-size komen inline uit de config; de gedeelde --naam-*
   waarden zet bouwVitrine() inline (met var()-fallbacks hier). */
.schatkamer-vitrine .sk-naam {
    position: absolute;
    top: var(--naam-midden, 84%);
    width: var(--naam-breedte, 15%);
    height: var(--naam-hoogte, 8%);
    transform: translate(-50%, -50%);       /* box gecentreerd op (left, midden) */
    display: flex;                          /* tekst horiz. én vert. centreren */
    align-items: center;
    justify-content: center;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    color: #f6e7bf;                         /* crème / licht goud */
    font-weight: 700;
    letter-spacing: .5px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75),
                 0 0 2px rgba(0, 0, 0, .5);
    pointer-events: none;
    user-select: none;
}

/* Afstelmodus (?afstel=aan): in een open vitrine zijn ook de naam-labels
   sleepbaar. Buiten afstelmodus blijft .sk-naam pointer-events: none (hierboven). */
.schatkamer-vitrine.afstel .sk-naam {
    pointer-events: auto;
    cursor: move;
}
.schatkamer-vitrine .sk-naam.afstel-geselecteerd {
    outline: 3px solid #36dfff;
    outline-offset: 1px;
    box-shadow: 0 0 10px 3px rgba(54, 223, 255, 0.85);
}

/* Terug-knop linksboven in de vitrine; zelfde groene look als .niveau-terug. */
.schatkamer-terug {
    position: absolute;
    top: 4%;
    left: 3%;
    z-index: 10;

    padding: 8px 22px;
    font-size: 1rem;
    font-weight: bold;
    color: white;
    cursor: pointer;

    border: 2px solid #1f6b5e;
    border-radius: 12px;
    background: linear-gradient(180deg, #4cbfa9 0%, #2d8f7d 100%);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.3);
}

/* =========================
   SCHATKAMER — standkleuren, silhouetten en placeholder-kunst
   De nieuwe NT-vitrines (kleurViaFilter) kleuren één zilveren basisafbeelding
   per stand, met dezelfde filterrecepten als de prijzenkast op het start-
   scherm. .sk-schaduw is het donkere "nog niet behaald"-silhouet.
========================= */

.schatkamer-vitrine .sk-trofee.sk-schaduw,
.kast-trofee.sk-schaduw {
    filter: brightness(0.3) opacity(0.8);
}

.schatkamer-vitrine .sk-trofee.brons,
.sk-zaal .zaal-nis-trofee.brons,
.kast-trofee.brons {
    filter: sepia(0.7) saturate(1.6) hue-rotate(-10deg) brightness(0.8)
            drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}

.schatkamer-vitrine .sk-trofee.zilver,
.sk-zaal .zaal-nis-trofee.zilver,
.kast-trofee.zilver {
    filter: brightness(1.1) saturate(1.05)
            drop-shadow(0 0 6px rgba(210, 225, 255, 0.75))
            drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}

.schatkamer-vitrine .sk-trofee.goud,
.sk-zaal .zaal-nis-trofee.goud,
.kast-trofee.goud {
    filter: sepia(0.95) saturate(2.9) hue-rotate(5deg) brightness(1.13) contrast(1.15)
            drop-shadow(0 0 9px rgba(255, 195, 60, 0.9))
            drop-shadow(0 6px 8px rgba(0, 0, 0, .45));
}

/* EXPERIMENT (vlag ZAAL_NIS_TROFEEEN in script.js): mini-trofee in een
   geschilderde nis van de zaal. Positie (x = midden) en hoogte komen inline
   uit de config (zone.nisTrofeeen); decor, dus niet klikbaar. */
.sk-zaal .zaal-nis-trofee {
    position: absolute;
    transform: translateX(-50%);     /* x uit de config = midden van de nis */
    width: auto;
    pointer-events: none;
    user-select: none;
}

/* =========================
   AFSTELMODUS (?afstel=aan) — alleen actief als .sk-zaal de klasse .afstel
   heeft (gezet door initAfstel). Buiten afstelmodus is deze hele laag dood:
   geen .afstel-klasse, geen #afstel-paneel in de DOM.
========================= */

/* Klikzones uit zodat je de trofeeën/kisten kunt pakken; beide worden
   sleepbaar (kisten zijn normaal niet klikbaar). */
.sk-zaal.afstel .zaal-zone { pointer-events: none; }
.sk-zaal.afstel .zaal-nis-trofee,
.sk-zaal.afstel .zaal-kist {
    pointer-events: auto;
    cursor: move;
    touch-action: none;              /* slepen niet door scroll onderbroken */
}

/* Geselecteerde trofee of kist duidelijk gemarkeerd. */
.sk-zaal .zaal-nis-trofee.afstel-geselecteerd,
.sk-zaal .zaal-kist.afstel-geselecteerd {
    outline: 3px solid #36dfff;
    outline-offset: 1px;
    box-shadow: 0 0 10px 3px rgba(54, 223, 255, 0.85);
}

/* Bedieningspaneel linksboven. */
#afstel-paneel {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 3000;
    max-width: 330px;
    padding: 10px 12px;
    background: rgba(8, 14, 30, 0.93);
    color: #e8eefc;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.45;
    border: 1px solid #36dfff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
#afstel-paneel strong { color: #36dfff; letter-spacing: 0.5px; }
#afstel-paneel #afstel-info { margin-top: 6px; }
#afstel-paneel .afstel-hint { margin-top: 6px; font-size: 11px; opacity: 0.7; }
#afstel-paneel .afstel-knoppen { margin-top: 8px; display: flex; gap: 6px; }
#afstel-paneel .afstel-vitrines { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
#afstel-paneel .afstel-vitrines .afstel-hint { width: 100%; margin: 0 0 2px; }
#afstel-paneel button {
    font: 11px ui-monospace, Menlo, Consolas, monospace;
    padding: 5px 9px;
    color: #08101e;
    background: #36dfff;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
}
#afstel-paneel button:hover { background: #6fe9ff; }
#afstel-paneel #afstel-uitvoer {
    width: 306px;
    height: 150px;
    margin-top: 8px;
    font: 10px ui-monospace, Menlo, Consolas, monospace;
    color: #d8e2f4;
    background: #06101f;
    border: 1px solid #2a466e;
    border-radius: 5px;
    resize: vertical;
}

/* Generiek schaduwsilhouet voor trofeeën waarvan de kunst nog niet bestaat
   (vervangDoorSilhouet in script.js). Zelfde beeldverhouding als de echte
   trofee-renders (428x676); de kelkvorm komt uit een clip-path. */
.schatkamer-vitrine .sk-trofee-silhouet {
    position: absolute;
    bottom: var(--trofee-bodem, 30%);
    transform: translateX(-50%);
    aspect-ratio: 428 / 676;
    background: linear-gradient(180deg, rgba(26, 36, 66, 0.92) 0%, rgba(8, 12, 26, 0.95) 100%);
    clip-path: polygon(
        15% 0%, 85% 0%, 83% 14%, 72% 27%, 56% 35%, 54% 40%, 54% 62%,
        62% 68%, 68% 74%, 76% 88%, 80% 100%,
        20% 100%, 24% 88%, 32% 74%, 38% 68%, 46% 62%, 46% 40%, 44% 35%,
        28% 27%, 17% 14%
    );
    opacity: 0.85;
    pointer-events: none;
}

/* Placeholder-paneel: zolang een zaal-/vitrine-achtergrond nog niet bestaat,
   toont .sk-placeholder een gestileerd donker paneel in de huisstijl met de
   titel (uit data-placeholder-titel) erin. Wint van de fallback-achtergrond
   van .schatkamer-vitrine doordat de selector specifieker is. */
.schatkamer-vitrine.sk-placeholder,
.sk-zaal.sk-placeholder {
    background-image:
        radial-gradient(ellipse at 50% 28%, rgba(90, 125, 205, 0.22) 0%, rgba(90, 125, 205, 0) 62%),
        linear-gradient(160deg, #24407a 0%, #16284f 55%, #0e1c3a 100%);
}

.sk-placeholder::before {
    content: attr(data-placeholder-titel);
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-weight: 700;
    font-size: clamp(18px, 2.8vw, 40px);
    letter-spacing: 2px;
    color: #d9b865;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
    white-space: nowrap;
    pointer-events: none;
}

/* Subtiel gouden kader rond het placeholder-paneel. */
.sk-placeholder::after {
    content: "";
    position: absolute;
    inset: 3%;
    border: 2px solid rgba(217, 184, 101, 0.25);
    border-radius: 8px;
    pointer-events: none;
}

/* Ereplaats-sfeer (Openbaring): zachte lichtinval van boven, ook op het
   placeholder-paneel. */
.schatkamer-vitrine.sk-sfeer-altaar.sk-placeholder {
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(255, 232, 170, 0.30) 0%, rgba(255, 232, 170, 0) 55%),
        radial-gradient(ellipse at 50% 28%, rgba(90, 125, 205, 0.22) 0%, rgba(90, 125, 205, 0) 62%),
        linear-gradient(160deg, #24407a 0%, #16284f 55%, #0e1c3a 100%);
}

/* =========================
   SCHATKAMER — overzichtszaal (NT-vleugel)
   Zelfde 16:9-doos als .schatkamer-vitrine. De zones komen uit bouwZaal();
   in placeholder-modus zijn het zichtbare panelen, op de echte zaal-kunst
   worden het stille klikgebieden met alleen de voortgang erin.
========================= */

.sk-zaal {
    position: relative;

    width: min(100vw, calc(100vh * 16 / 9));
    height: min(100vh, calc(100vw * 9 / 16));

    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    overflow: hidden;

    /* De inzoom-illusie: bij .zoomt schaalt de hele zaal op rond de
       transform-origin van de aangeklikte zone (gezet door zoomNaarZone). */
    transition: transform 0.3s ease-in, opacity 0.3s ease-in;
}

.sk-zaal.zoomt {
    transform: scale(1.6);
    opacity: 0;
}

/* Schatkisten als decor in de zaal. Positie (x = midden) en breedte komen
   inline uit de config (schatkamerZalen...kisten); niet klikbaar, de
   klikzones liggen eroverheen. Brons/zilver/goud wisselen schaduw-/volle PNG
   in script.js; de diamant gebruikt dezelfde filtertruc als .kist-diamant op
   het startscherm. */
.sk-zaal .zaal-kist {
    position: absolute;
    transform: translateX(-50%);     /* x uit de config = midden van de kist */
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

.sk-zaal .zaal-kist.vergrendeld {
    filter: brightness(0.4) opacity(0.85)
            drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
}

/* Eén klikbare zone in de zaal. Positie/grootte komen inline uit de config.
   De overzichtszaal toont alleen de trofeeën in hun nissen, dus de zone is een
   onzichtbaar klikgebied: geen paneel, geen naam, geen munten/telling (die
   verhuizen naar het zoom-/detailscherm). Een zachte gloed bij hover geeft aan
   dat de zone klikbaar is. */
.zaal-zone {
    position: absolute;

    /* In RUST volledig onzichtbaar. LET OP: de globale button{}-regel zet een
       goud-verloop via de background-SHORTHAND (background-image). Daarom hier
       óók de shorthand 'background: transparent' (background-color alleen wist
       dat verloop niet) plus background-image: none. animation:none stopt de
       'floating' van die button-regel; appearance:none haalt native chrome weg.
       Alleen de hitbox blijft actief. */
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    outline: none;
    animation: none;
    margin: 0;
    padding: 0;
    border-radius: 10px;
    cursor: pointer;

    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Goud verschijnt UITSLUITEND bij hover (lage alpha), nooit in rust. */
.zaal-zone:hover {
    background: rgba(255, 210, 130, 0.10);
    box-shadow: inset 0 0 25px rgba(255, 210, 130, 0.22);
}

/* =========================
   SCHATKAMER — achtergrond vitrine-detailscherm
   "over-zaal" (door openVitrineScherm gezet, nooit verwijderd) bepaalt de
   achtergrond áchter het staande vitrine-paneel. Een ondoorzichtige, bijna-
   zwarte radiale gradient met een subtiele kobaltblauwe gloed in het midden
   laat de vitrine vrij "zweven"; de overzichtszaal schijnt er niet meer
   doorheen. (Puur cosmetisch — geen JS hangt van deze klasse af.)
========================= */

#schatkamer-scherm.over-zaal {
    background: radial-gradient(ellipse 65% 75% at 50% 45%,
                rgba(32, 64, 150, 0.30), #05070d 70%);
}

#schatkamer-scherm.zoom-entree .schatkamer-vitrine {
    animation: skVitrineZoomIn 0.3s ease-out both;
}

@keyframes skVitrineZoomIn {
    from { transform: scale(0.8); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

#schatkamer-scherm.zoom-exit .schatkamer-vitrine {
    animation: skVitrineZoomUit 0.26s ease-in both;
}

@keyframes skVitrineZoomUit {
    from { transform: scale(1);   opacity: 1; }
    to   { transform: scale(0.8); opacity: 0; }
}

/* =========================
   TROFEEËN IN DE PRIJZENKAST
   Positionering in % zodat ze met het 16:9 game-container meeschalen.
   Originele plaatjes zijn 428x676 px (aspect ~0.633). We zetten alleen
   een width in %; height: auto behoudt de aspect ratio. Start met een
   redelijke schatting voor het eerste evangelie-vakje; finetunen kan later.
========================= */

.trofee {
    position: absolute;
    height: auto;
    pointer-events: none;
    z-index: 5;
}

/* Schaduw/silhouet-versie van een trofee, puur via CSS op de bestaande
   trofee-afbeelding (geen aparte PNG). brightness(0) maakt het beeld volledig
   zwart; opacity(0.35) laat het als een vaag donker silhouet zien, duidelijk
   anders dan de zilveren/gekleurde versie. Waardes hier zijn een startpunt —
   in DevTools bij te stellen. */
.trofee.schaduw {
    filter: brightness(0.45) opacity(0.85);
}

/* Verdiende trofeeën worden per niveau herkleurd uit dezelfde zilveren
   basisafbeelding, puur via filters. Brons: warme, matte bronstint. Zilver:
   lichte koele glans. Goud: volle amber gloed met diepte. Geldt globaal voor
   alle vier de trofeeën. Startwaarden — in DevTools bij te stellen. */
.trofee.brons {
    filter: sepia(0.7) saturate(1.6) hue-rotate(-10deg) brightness(0.8);
}

.trofee.zilver {
    filter: brightness(1.1) saturate(1.05) drop-shadow(0 0 6px rgba(210, 225, 255, 0.75));
}

.trofee.goud {
    filter: sepia(0.95) saturate(2.9) hue-rotate(5deg) brightness(1.13) contrast(1.15) drop-shadow(0 0 9px rgba(255, 195, 60, 0.9));
}

.trofee-matteus {
    width: 4.3%;
    top: 23.2%;
    left: 73.3%;
}

.trofee-marcus {
    width: 4.3%;
    top: 24.3%;
    left: 78.8%;
}

.trofee-lucas {
    width: 4.3%;
    top: 24.8%;
    left: 84.2%;
}

.trofee-johannes {
    width: 4.3%;
    top: 24.8%;
    left: 89.7%;
}

/* =========================
   BIJBELSCHATKISTEN IN DE PRIJZENKAST
   Zelfde aanpak als de trofeeën: gedeelde basis-class, per kist alleen
   width/top/left. Beginwaarden voor de drie kisten onder elkaar; later
   fijn afstellen via de inspector.
========================= */

.kist {
    position: absolute;
    height: auto;
    pointer-events: auto;
    cursor: pointer;
    z-index: 5;
}

.kist-brons {
    width: 6%;
    top: 48.1%;
    left: 73.1%;
}

.kist-zilver {
    width: 6%;
    top: 48.5%;
    left: 80.4%;
}

.kist-goud {
    width: 6%;
    top: 48.6%;
    left: 88.0%;
}

/* =========================
   VERBORGEN SCHAT — de diamanten kist
   Voorlopig statisch en zichtbaar om grootte/positie te controleren. Eigen
   class (niet .kist), zodat hij niet klikbaar is en losstaat van de drie
   schatkisten. Posities in % zodat hij met het 16:9-veld meeschaalt.
========================= */
.kist-diamant {
    position: absolute;
    height: auto;
    z-index: 5;
    pointer-events: none;          /* niet klikbaar */

    width: 4.8%;
    top: 66.2%;
    left: 80.9%;
}

/* Vergrendelde/verborgen staat: zelfde CSS-filtertruc als de trofee-schaduw
   (puur een filter op dezelfde afbeelding, geen aparte -schaduw.png). Maakt de
   diamanten kist tot een donker silhouet zolang nog niet alle drie de kisten
   (brons/zilver/goud) verdiend zijn. Wordt door werkVerborgenSchatBij() gezet/
   weggehaald. Waardes als startpunt — in DevTools bij te stellen. */
.kist-diamant.vergrendeld {
    filter: brightness(0.4) opacity(0.85);
}

/* Zodra de kist onthuld is (niet vergrendeld) wordt hij klikbaar: een klik
   opent de Verborgen Schat-quiz. Vergrendeld blijft niet-klikbaar (de basis-
   regel houdt pointer-events: none). */
.kist-diamant:not(.vergrendeld) {
    pointer-events: auto;
    cursor: pointer;
}

/* =========================
   AVATAR-FRAME (linksboven op het startscherm)
   Eén doorzichtige plaat (avatarframe.png) met de ronde gouden lijst, een
   breed naamvak rechts en een klein naamvak eronder. De wrapper .avatar-frame
   wordt over de ingebakken ronde lijst én de oude "David/Geloofzoeker"-tekst
   gelegd. Omdat het frame de wrapper exact vult, zijn de posities van de
   avatarfoto en de namen uitgedrukt in % van de wrapper en komen ze precies
   overeen met de plekken op de plaat (opgemeten uit avatarframe.png).

   Drie hoofdwaardes regelen het geheel; pas die aan om het frame te plaatsen
   en te schalen. De avatarfoto en de namen schalen dan vanzelf mee.
========================= */

.avatar-frame {
    /* ===== Frame plaatsen/schalen (hoofdwaardes) ===== */
    /* De hoek linksboven is nu leeg, dus het frame hoeft niets te bedekken en
       is kleiner gemaakt zodat het hele frame (ronde lijst + beide naamvakken)
       binnen het scherm in de hoek past. avatarframe.png heeft brede
       transparante randen; daarom staan left/top licht negatief (die
       doorzichtige rand valt buiten beeld, het zichtbare frame staat netjes
       in de hoek). */
    --frame-left: -0.5%;   /* horizontale positie t.o.v. game-container */
    --frame-top: -5.5%;    /* verticale positie                         */
    --frame-width: 26%;    /* breedte; hoogte volgt uit de beeldratio    */
    /* ================================================= */

    position: absolute;
    left: var(--frame-left);
    top: var(--frame-top);
    width: var(--frame-width);
    /* avatarframe.png is 1536x1024 → vaste verhouding 3:2. */
    aspect-ratio: 1536 / 1024;

    /* 45 = boven scherm 2 (#nt-scherm-2, z-index 40) zodat de avatar op elk
       carouselscherm zichtbaar blijft, maar ruim onder de quiz-overlays (999)
       en schatkamer-overlays (1000) die hem moeten kunnen afdekken. De
       kinderen (portret/namen) stapelen binnen deze wrapper via hun eigen
       z-index, dus die blijven onveranderd. */
    z-index: 45;
    pointer-events: none;
}

/* De plaat zelf: onderste laag binnen de wrapper, vult hem volledig. */
.avatar-frame-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.avatar-portret {
    /* ===== Avatarfoto in de ronde opening ===== */
    /* Opgemeten ronde opening: midden ~(19.5%, 38.3%), diameter 23.4% van de
       breedte en 35.2% van de hoogte van het frame (in pixels vierkant). */
    --avatar-left: 11.9%;    /* % van de wrapperbreedte */
    --avatar-top: 26.7%;     /* % van de wrapperhoogte  */
    --avatar-breedte: 26.4%; /* % van de wrapperbreedte */
    --avatar-hoogte: 37.2%;  /* % van de wrapperhoogte  */
    /* ========================================== */

    position: absolute;
    left: var(--avatar-left);
    top: var(--avatar-top);
    width: var(--avatar-breedte);
    height: var(--avatar-hoogte);
    border-radius: 50%;
    object-fit: cover;
    z-index: 3;            /* bovenop het frame */
    pointer-events: none;
}

/* De twee namen liggen bovenop de twee donkere vakken van avatarframe.png.
   Geen losse achtergrond meer: het vak komt uit de frameplaat. Posities zijn
   in % van de wrapper (= van de frameplaat), opgemeten uit avatarframe.png. */

.avatar-figuurnaam {
    /* ===== Figuurnaam op het brede vak rechts ===== */
    /* Opgemeten platte donkere binnenvlak van het brede vak (scanlijn door het
       midden). De box dekt precies dit vak, zodat de flex-centrering de naam
       horizontaal in het echte midden zet — voor elke naamlengte. */
    --fig-left: 41.1%;        /* % van de wrapperbreedte */
    --fig-top: 30.3%;         /* % van de wrapperhoogte  */
    --fig-breedte: 47%;       /* % van de wrapperbreedte (vak loopt tot ~89%) */
    --fig-hoogte: 34.6%;      /* % van de wrapperhoogte  */
    --fig-padding-x: 4%;      /* binnenmarge; laat lange namen over 2 regels breken */
    --fig-padding-y: 2%;
    --fig-lettergrootte: 1.3rem;   /* zelfde grootte voor alle namen */
    /* ============================================== */

    position: absolute;
    left: var(--fig-left);
    top: var(--fig-top);
    width: var(--fig-breedte);
    height: var(--fig-hoogte);
    padding: var(--fig-padding-y) var(--fig-padding-x);
    box-sizing: border-box;

    /* Tekst gecentreerd; korte namen op één regel verticaal in het midden,
       lange namen ("Maria Magdalena") breken netjes over twee regels. */
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffd86b;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: var(--fig-lettergrootte);
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);

    z-index: 3;            /* bovenop het frame */
    pointer-events: none;
}

.speler-voornaam {
    /* ===== Spelernaam op het kleine vak eronder ===== */
    /* Opgemeten donker binnenvlak van het kleine vak. De breedte is meteen de
       maximale breedte; een lange voornaam krimpt via JS (pasVoornaamGrootteAan). */
    --speler-left: 13.6%;     /* % van de wrapperbreedte */
    --speler-top: 63%;        /* % van de wrapperhoogte  */
    --speler-breedte: 23.5%;  /* % van de wrapperbreedte (= max. breedte; vak loopt ~13.6%–37%) */
    --speler-hoogte: 20.3%;   /* % van de wrapperhoogte  */
    --speler-padding-x: 6%;
    --speler-padding-y: 2%;
    --speler-lettergrootte: 0.8rem;  /* basisgrootte; JS krimpt indien nodig */
    /* ================================================ */

    position: absolute;
    left: var(--speler-left);
    top: var(--speler-top);
    width: var(--speler-breedte);
    height: var(--speler-hoogte);
    padding: var(--speler-padding-y) var(--speler-padding-x);
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffd86b;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: var(--speler-lettergrootte);
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    /* Voornaam blijft op één regel; past hij niet, dan krimpt JS de letters
       (pasVoornaamGrootteAan) tot hij binnen het vak valt. */
    white-space: nowrap;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.6);

    z-index: 3;            /* bovenop het frame */
    pointer-events: none;
}

/* =========================
   NIEUW SPEL ZONE
   Onzichtbare klik-zone over de geschilderde "NIEUW SPEL"-rij in het
   MENU-paneel links in de achtergrondafbeelding (startscherm.png).
   Zelfde aanpak als .boek-zone: absoluut gepositioneerd in % zodat hij
   meeschaalt met het 16:9 game-container, volledig transparant, cursor
   pointer, en bovenop met pointer-events: auto.
   Positie is een eerste schatting op basis van de afbeelding; eventueel
   fijnafstellen via de inspector.
========================= */

.nieuw-spel-zone {
    position: absolute;
    left: 3.5%;
    top: 31.5%;
    width: 17%;
    height: 9%;

    background: transparent;

    cursor: pointer;

    /* Boven alle decoratieve elementen in #game-container (.trofee/.kist=5,
       #level-hud/#level-nummer=20, test-knopjes=30), maar onder de
       quiz-overlays (z-index: 999) zodat hij vanzelf "uit" gaat tijdens
       een quiz. */
    z-index: 100;
    pointer-events: auto;
}

.bijbeltraining-zone {
    position: absolute;
    left: 3.5%;
    top: 41%;
    width: 17%;
    height: 9%;

    /* Doorzichtig: dit is alleen een onzichtbare klik-zone over de
       geschilderde "Bijbeltraining"-knop in het MENU-paneel. */
    background: transparent;

    cursor: pointer;
    z-index: 100;
    pointer-events: auto;
}

.schatkamer-menu-zone {
    position: absolute;
    left: 3.5%;
    top: 50.5%;
    width: 17%;
    height: 9%;

    /* Doorzichtig: onzichtbare klik-zone over de geschilderde "Schatkamer"-knop.
       Hoofd-ingang naar de schatkamer. */
    background: transparent;

    cursor: pointer;
    z-index: 100;
    pointer-events: auto;
}

.instellingen-zone {
    position: absolute;
    left: 3.5%;
    top: 64%;
    width: 17%;
    height: 9%;

    /* Doorzichtig: onzichtbare klik-zone over de geschilderde "Instellingen"-knop. */
    background: transparent;

    cursor: pointer;
    z-index: 100;
    pointer-events: auto;
}

/* Onzichtbare klik-zone over het trofee-vak van de prijzenkast (rechtsboven).
   Opent de schatkamer. Ligt boven de schatkisten, dus de hoogte stopt ruim
   vóór de kisten zodat die klikbaar blijven. Posities in % voor het 16:9-veld;
   later fijn af te stellen. */
.schatkamer-zone {
    position: absolute;
    left: 71%;
    top: 17%;
    width: 24%;
    height: 22%;

    background: transparent;

    cursor: pointer;
    z-index: 100;
    pointer-events: auto;
}

/* =========================
   DONATIE-LANTAARN (linksonder)
   Onzichtbare klik-zone over de geschilderde lantaarn, met een warme hover-gloed
   in dezelfde tint als de fakkelgloed, zodat de lantaarn klikbaar voelt. Werkt
   los van DONATIE_ACTIEF (voelt altijd klikbaar); het klikgedrag zit in script.js.
========================= */
.donatie-zone {
    position: absolute;
    left: 1.5%;
    top: 76%;
    width: 9%;
    height: 22%;

    background: transparent;
    cursor: pointer;
    /* Zelfde laag als de menu-zones (boven voorgrond/fakkels), onder de
       quiz-overlays (999) zodat hij tijdens een quiz vanzelf uit gaat. */
    z-index: 100;
    pointer-events: auto;
}

/* Warme hover-gloed: dezelfde gradient-tinten als .vlam (de fakkelgloed),
   opacity 0 -> 1 op hover/focus, screen-blend zodat hij optelt bij het licht.
   Puur decoratief; vangt geen klikken. */
.donatie-zone::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;

    background: radial-gradient(
        circle at 50% 45%,
        rgba(255, 240, 180, 0.75) 0%,
        rgba(255, 190, 90, 0.45) 30%,
        rgba(255, 140, 45, 0.22) 55%,
        rgba(255, 120, 30, 0) 78%
    );
    mix-blend-mode: screen;
    /* Compacte straal: gloed-box ~80% van de zone (i.p.v. 160% via inset:-30%),
       blur gehalveerd — samen ongeveer de helft van de oorspronkelijke omvang,
       zodat de gloed strak om de lantaarn valt. Positie/kleur ongewijzigd. */
    filter: blur(3px);

    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.donatie-zone:hover::before,
.donatie-zone:focus-visible::before {
    opacity: 1;
}

/* In-stijl melding bij klik zolang donaties uit staan: een compacte pill-tooltip
   (donker paneel + gouden rand + gouden cursieve tekst, in de stijl van de
   naambordjes), net boven de lantaarn. De donkere achtergrond houdt 'm leesbaar
   boven de drukke, warme vloer. Verschijnt/verdwijnt met een fade. */
.donatie-melding {
    position: absolute;
    left: 1.5%;
    bottom: 19%;
    width: 15%;
    z-index: 101;

    padding: 0.45em 0.7em;
    background: linear-gradient(180deg, rgba(28, 20, 10, 0.92), rgba(16, 11, 5, 0.92));
    border: 1px solid rgba(255, 200, 110, 0.45);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);

    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-style: italic;
    font-size: clamp(0.68rem, 1.25vh, 0.92rem);
    line-height: 1.3;
    text-align: center;
    color: #ffd86b;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.donatie-melding.zichtbaar {
    opacity: 1;
}

/* Scherm 2 (NT-overige) ligt als overlay over het startscherm, maar de
   onzichtbare scherm-1-klikzones hebben z-index 100 (boven scherm 2's z-index
   40) en prikken er doorheen. Twee daarvan liggen over scherm-2-content en
   moeten daar uit: de schatkamer-zone (trofee-vak) over de BOVENSTE kast-
   trofeeën, en de boek-zones over de scherm-2-boeken. De MENU-zones (nieuw spel/
   bijbeltraining/schatkamer/instellingen) liggen links, botsen nergens mee en
   blijven juist op elk carrouselscherm bruikbaar — die NIET uitzetten. */
#game-container:has(#nt-scherm-2.zichtbaar) .schatkamer-zone,
#game-container:has(#nt-scherm-2.zichtbaar) .boek-zone {
    pointer-events: none;
}
.geluid-uit {
    opacity: 0.55;
}

#resultaat .oefen-volgende {
    display: block;
    width: 260px;
    max-width: 80%;
    margin: 18px auto 0;

    /* Warme goud-knop met donkere tekst: duidelijk "ga verder", los van de
       blauwe antwoordknoppen. */
    background: linear-gradient(180deg, #f3c969 0%, #d9a648 100%);
    color: #2a2418;
    border: 2px solid #b9852f;
    font-weight: bold;
    text-shadow: none;
}

.oefen-stop {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 10;

    padding: 10px 20px;
    border-radius: 12px;

    background: rgba(10, 20, 55, 0.9);
    color: #ffd86b;
    border: 2px solid rgba(255, 215, 120, 0.5);

    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Terug-knop tijdens een meetellende ronde. Zelfde look en plek als de oefen-
   stopknop (goud op donkerblauw, linksboven), maar bewust niet groter — zodat
   kinderen er niet per ongeluk op tikken. Hij vraagt eerst een bevestiging,
   omdat hier wél voortgang verloren kan gaan. */
.ronde-stop {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 10;

    padding: 10px 20px;
    border-radius: 12px;

    background: rgba(10, 20, 55, 0.9);
    color: #ffd86b;
    border: 2px solid rgba(255, 215, 120, 0.5);

    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
}

/* Het tekstvak van de leesschermen (Maten, geld & tijd en Woordenboek): breder,
   links uitgelijnd, en — cruciaal — begrensd in hoogte met interne scroll. Zo
   blijft het vak binnen het scherm en is de hele lange tekst bereikbaar, ook al
   centreert de overlay het verticaal. (Deze regels stonden vóór de ombouw op
   #naslag-scherm; ze horen bij de tekst, die nu in deze schermen staat.) */
#maten-scherm .quiz-box,
#woordenboek-scherm .quiz-box,
#verborgenschat-naslag-scherm .quiz-box,
#vu-lijst-scherm .quiz-box,
#vu-detail-scherm .quiz-box,
#catechese-lijst-scherm .quiz-box,
#catechese-artikel-scherm .quiz-box {
    width: 900px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    text-align: left;
}
#maten-scherm .quiz-title,
#woordenboek-scherm .quiz-title,
#verborgenschat-naslag-scherm .quiz-title,
#vu-lijst-scherm .quiz-title,
#vu-detail-scherm .quiz-title,
#catechese-lijst-scherm .quiz-title {
    text-align: center;
}

/* Bijbeltraining-kruispunt, Evangelie-keuze (Vragen & uitleg) en Catechese-
   categorieën: begrens de hoogte en laat intern scrollen, zodat de Terug-knop en
   het laatste item bereikbaar blijven als er meer bijkomen (bijv. de extra
   menuknoppen in Bijbeltraining). Alleen het scroll-gedrag; de menu-opmaak
   (gecentreerd) blijft. */
#bijbeltraining-scherm .quiz-box,
#naslag-scherm .quiz-box,
#oefen-boek-scherm .quiz-box,
#vu-boek-scherm .quiz-box,
#catechese-scherm .quiz-box {
    max-height: 90vh;
    overflow-y: auto;
}
.naslag-intro {
    text-align: center;
    font-size: 1.3rem;
    color: #f3ecd8;
    margin: 0 0 20px;
}
#maten-scherm .naslag-terug,
#woordenboek-scherm .naslag-terug,
#verborgenschat-naslag-scherm .naslag-terug,
#vu-lijst-scherm .naslag-terug,
#vu-detail-scherm .naslag-terug {
    display: inline-block;
    width: auto;
    padding: 10px 24px;
    margin: 0 0 24px;
    font-size: 1.1rem;
}

/* === Vragen & uitleg: lijst van vragen ===================================== */
.vu-lijst {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* Eén klikbare vraagregel; diepblauw met gouden rand, oplichtend bij hover. */
.vu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(10, 20, 55, 0.6);
    border: 1px solid rgba(255, 215, 120, 0.35);
    color: #f3ecd8;
    font-family: inherit;
    font-size: 1.15rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.vu-item:hover {
    background: rgba(30, 50, 110, 0.8);
    border-color: rgba(255, 215, 120, 0.7);
}
.vu-nr {
    color: #ffd86b;
    font-weight: bold;
    margin-right: 6px;
}
/* Klein teken bij vragen die een uitleg-veld hebben. */
.vu-merk {
    margin-left: 8px;
    font-size: 0.85rem;
    color: #ffd86b;
    white-space: nowrap;
}

/* === Vragen & uitleg: uitlegpagina ======================================== */
/* De uitleg op de detailpagina mag wat groter zijn dan onder de quiz, met
   ruimte voor meerdere alinea's. */
#vu-detail .uitleg {
    font-size: 20px;
    margin-top: 14px;
}
/* Nette witregels tussen de alinea's van een langere uitleg. */
#vu-detail .uitleg p {
    margin: 0 0 0.9em;
}
#vu-detail .uitleg p:last-child {
    margin-bottom: 0;
}
/* Rustig zinnetje als een vraag (nog) geen uitleg heeft. */
.vu-geen-uitleg {
    margin-top: 14px;
    font-size: 18px;
    font-style: italic;
    color: rgba(243, 236, 216, 0.7);
}
.naslag-kop {
    color: #ffd86b;
    font-size: 1.9rem;
    margin: 26px 0 12px;
    border-bottom: 2px solid rgba(255, 215, 120, 0.3);
    padding-bottom: 6px;
}
.naslag-item {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #f3ecd8;
    margin: 0 0 14px;
}
.naslag-term {
    color: #ffd86b;
    font-weight: bold;
}
/* Grieks schrift (bv. ἐκκλησία): Cinzel heeft geen Grieks bereik, dus
   expliciete fallback naar fonts die Grieks wél aankunnen. */
.grieks {
    font-family: 'Noto Serif', Georgia, 'Palatino Linotype', serif;
    font-style: normal;
}
.naslag-bron {
    color: rgba(243, 236, 216, 0.6);
    font-style: italic;
    font-size: 0.95em;
}
.naslag-kadertje {
    background: rgba(255, 215, 120, 0.08);
    border: 1px solid rgba(255, 215, 120, 0.35);
    border-radius: 14px;
    padding: 16px 20px;
    margin: 0 0 26px;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #f3ecd8;
}
.naslag-noot {
    font-style: italic;
    color: rgba(243, 236, 216, 0.75);
    font-size: 1.05rem;
    margin: 0 0 14px;
}

/* Klein, rustig tabelletje binnen een naslagpagina (bv. de nachtwaken) —
   overzichtelijker dan dezelfde rijtjes in een lopende zin. */
.naslag-tabel {
    border-collapse: collapse;
    margin: 4px 0 16px;
    font-size: 1.2rem;
    color: #f3ecd8;
}
.naslag-tabel th,
.naslag-tabel td {
    text-align: left;
    padding: 7px 26px 7px 0;
    border-bottom: 1px solid rgba(255, 215, 120, 0.22);
}
.naslag-tabel th {
    color: #ffd86b;
    font-weight: bold;
}
.naslag-tabel td:first-child {
    color: #ffd86b;
    font-weight: bold;
    white-space: nowrap;
}

/* =========================
   NIVEAUKNOPPEN (trofee-thema)
========================= */

/* Niveauknoppen in het bredere niveaukeuze-vak: gecentreerd met een nette
   max-width, zodat de korte labels niet over de hele brede box uitgerekt
   worden. Kleuren/effecten van .niveau-beginner / -advanced / -expert /
   -terug blijven ongewijzigd door dit te scopen op #niveau-scherm. */
#niveau-scherm .answer-btn {
    width: 100%;
    max-width: 640px;
    display: block;
    margin: 14px auto 0;
}

/* Beginner = brons — metaalachtige glans, witte tekst voor leesbaarheid. */
.niveau-beginner {
    background: linear-gradient(180deg, #f4c48d 0%, #e0974f 42%, #b86c30 60%, #8f5220 100%);
    border-color: #6f3f18;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        0 3px 6px rgba(0, 0, 0, 0.35);
}

/* Gevorderd = zilver — metaalachtige glans, donkere tekst op licht oppervlak. */
.niveau-advanced {
    background: linear-gradient(180deg, #ffffff 0%, #dde3ec 42%, #b9c2cf 60%, #8e98a6 100%);
    border-color: #6f7886;
    color: #2a2a2a;
    text-shadow: none;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.6),
        0 3px 6px rgba(0, 0, 0, 0.35);
}

/* Expert = goud — metaalachtige glans, donkere tekst op licht oppervlak. */
.niveau-expert {
    background: linear-gradient(180deg, #fff4c2 0%, #f5d24f 42%, #e0b62e 60%, #b8870f 100%);
    border-color: #8a6207;
    color: #3a2a00;
    text-shadow: none;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.55),
        0 3px 6px rgba(0, 0, 0, 0.35);
}

/* Terug — fris groenblauw, duidelijk geen medaille en geen bruin. */
.niveau-terug {
    background: linear-gradient(180deg, #4cbfa9 0%, #2d8f7d 100%);
    border-color: #1f6b5e;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Vergrendeld niveau (alleen in het spel): grijs/gedimd met een slotje, zodat
   het duidelijk niet-actief oogt. Overschrijft de gekleurde medaille-look. De
   knop blijft klikbaar zodat een tik de hint toont; dankzij de guard in
   kiesNiveau start de klik geen quiz. */
.answer-btn.vergrendeld {
    background: linear-gradient(180deg, #dadada 0%, #bcbcbc 50%, #9c9c9c 100%);
    border-color: #7c7c7c;
    color: #5a5a5a;
    text-shadow: none;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.25);
    opacity: 0.8;
    cursor: not-allowed;
}

/* Slotje achter het label van een vergrendelde knop. */
.answer-btn.vergrendeld::after {
    content: " 🔒";
}

/* Verborgen Schat-knop: ijzig diamant/blauw-witte stijl, passend bij de game
   (zelfde knopbasis, goud-op-blauw sfeer). Dit is de ACTIEVE (ontgrendelde) look. */
.naslag-diamant {
    background: linear-gradient(180deg, #ffffff 0%, #dbeafe 35%, #a9c7ee 60%, #7da6d9 100%);
    border-color: #5b7fb0;
    color: #1c2e4a;
    text-shadow: none;
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.7),
        0 3px 6px rgba(0, 0, 0, 0.35);
}

/* Vergrendelde diamant: gedempte, koele variant (geen volle glans). Overschrijft
   de algemene grijze .vergrendeld-look zodat de knop in het diamantthema blijft.
   Slotje (🔒) en cursor: not-allowed komen van .answer-btn.vergrendeld. */
.naslag-diamant.vergrendeld {
    background: linear-gradient(180deg, #eef2f7 0%, #cdd8e6 50%, #aab8cb 100%);
    border-color: #8694a8;
    color: #5d6b7e;
    opacity: 0.9;
}

/* Menu-knop "Catechese": donkerblauw met gouden rand/tekst, zodat hij naast de
   brons/zilver/goud-knoppen van het Bijbeltraining-menu een eigen, rustige
   identiteit heeft maar wel in de stijl past. */
.catechese-knop {
    background: linear-gradient(180deg, #3a5a93 0%, #2a4778 45%, #1a3060 100%);
    border-color: #d4a648;
    color: #f4c75e;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(244, 199, 94, 0.35),
        0 2px 6px rgba(0, 0, 0, 0.3);
}
.catechese-knop:hover {
    background: linear-gradient(180deg, #46689f 0%, #355688 45%, #234074 100%);
    border-color: #f4c75e;
}

/* =========================
   VERBORGEN SCHAT — onthullingskaart (zelf-getempo'd)
   Goud/donkerblauw, in de sfeer van de schatkist. Verschijnt na elke
   beantwoorde Verborgen-Schat-vraag; het kind klikt zelf "Volgende →".
========================= */
.vs-reveal-kaart {
    width: min(90%, 680px);
    max-height: 88vh;
    overflow-y: auto;

    padding: clamp(22px, 4vh, 42px) clamp(24px, 4vw, 48px);

    background: linear-gradient(160deg, #24407a 0%, #16284f 60%, #0e1c3a 100%);
    border: 3px solid #d4a648;
    border-radius: 18px;
    box-shadow:
        inset 0 0 26px rgba(244, 199, 94, 0.12),
        0 0 30px rgba(0, 0, 0, 0.5),
        0 0 22px rgba(244, 199, 94, 0.28);

    text-align: center;
    color: #f3ecd8;
}

.vs-reveal-uitslag {
    font-size: clamp(1.6rem, 3.4vh, 2.3rem);
    font-weight: bold;
    margin-bottom: clamp(10px, 1.8vh, 18px);
}
.vs-reveal-uitslag.goed { color: #7CFF7C; }
.vs-reveal-uitslag.fout { color: #FF9C9C; }

.vs-reveal-kop {
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: clamp(1.3rem, 2.6vh, 1.8rem);
    color: #ffd86b;
    margin: 0 0 clamp(8px, 1.4vh, 14px);
    text-shadow: 0 0 12px rgba(255, 215, 120, 0.4);
}

.vs-reveal-tekst {
    font-size: clamp(1.05rem, 2.1vh, 1.35rem);
    line-height: 1.55;
    color: #f3ecd8;
    margin: 0;
}

.vs-reveal-meer-melding {
    min-height: 1.3em;
    margin: clamp(8px, 1.4vh, 14px) 0 0;
    font-size: clamp(0.95rem, 1.7vh, 1.1rem);
    font-style: italic;
    color: #ffd86b;

    opacity: 0;
    transition: opacity 0.25s ease;
}
.vs-reveal-meer-melding.zichtbaar { opacity: 1; }

.vs-reveal-knoppen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: clamp(18px, 3vh, 28px);
}
.vs-reveal-knoppen .answer-btn {
    width: 100%;
    max-width: 440px;
    margin: 0;
    font-size: clamp(1.1rem, 2vh, 1.4rem);
    padding: clamp(12px, 2vh, 18px) 24px;
    animation: none;
}

/* Primaire knop: warme goud-knop met donkere tekst (zelfde stijl als de
   oefen-"Volgende"-knop), duidelijk "ga verder". */
.vs-reveal-volgende {
    background: linear-gradient(180deg, #f3c969 0%, #d9a648 100%);
    color: #2a2418;
    border: 2px solid #b9852f;
    font-weight: bold;
    text-shadow: none;
}
/* Secundaire knop: donkerblauw/goud, zoals de Catechese-menuknop. */
.vs-reveal-meer {
    background: linear-gradient(180deg, #3a5a93 0%, #1a3060 100%);
    color: #f4c75e;
    border: 2px solid #d4a648;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Klein neutraal hintje onder de vergrendelde Verborgen Schat-knop. Verklapt
   niets over de inhoud. Wordt verborgen zodra de knop ontgrendeld is. */
.naslag-slot-hint {
    width: 100%;
    max-width: 640px;
    margin: 8px auto 0;
    font-size: 0.95rem;
    color: #e8d4a0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    opacity: 0.9;
}

/* Vriendelijke hint onder de niveauknoppen bij het aantikken van een
   vergrendeld niveau. Reserveert altijd één regel hoogte zodat de knoppen niet
   verspringen als de tekst verschijnt of weer leeg wordt. */
.niveau-hint {
    width: 100%;
    max-width: 640px;
    margin: 12px auto 0;
    min-height: 1.3em;
    color: #ffe6a8;
    font-size: 1.1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* =========================
   AVATAR-KEUZE in het Nieuw-spel-scherm
   De vier avatars staan op één rij naast elkaar in een quiz-box die bijna
   de volle schermbreedte gebruikt. Daardoor blijven de ronde portretten
   groot zonder dat het naamveld of de knoppen in de knel komen — alles
   past zonder scrollen op het scherm. De kaart-stijl blijft hetzelfde:
   donkerblauw vak met gouden rand, naam onder de avatar.
========================= */

/* Quiz-box bijna over de volle schermbreedte; benut de lege ruimte links
   en rechts. max-height + overflow:hidden als laatste vangnet. */
#nieuw-spel-scherm .quiz-box {
    width: 96vw;
    max-width: 96vw;
    max-height: 95vh;
    padding: 22px 28px;
    overflow: hidden;
}

/* Strakkere titel/subtitel-marges om verticale ruimte vrij te maken. */
#nieuw-spel-scherm .quiz-title {
    font-size: 2.3rem;
    margin-bottom: 8px;
}

#nieuw-spel-scherm .quiz-question {
    font-size: 1.25rem;
    margin-bottom: 12px;
}

/* Eén rij van vier gelijke kolommen — de avatars vullen de breedte van
   de brede quiz-box. */
.avatar-keuze {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: start;
    gap: 18px;
    margin: 4px 0 14px;
}

/* Met 8 avatars past het raster niet meer in het venster. Maak alléén het
   keuze-raster van het nieuw-spel-scherm verticaal scrollbaar met een max-hoogte,
   zodat de onderste rij bereikbaar/klikbaar blijft en de titel boven + Start/Terug
   onder altijd zichtbaar blijven. (De spelerkiezer gebruikt ook .avatar-keuze,
   maar die laten we ongemoeid.) */
#nieuw-spel-scherm .avatar-keuze {
    max-height: 52vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding-right: 6px;
}

/* Knop vult zijn kolom; eigen styling — niet overerven van .answer-btn. */
.avatar-keuze-btn {
    position: relative;      /* anker voor de verwijder-badge in bewerk-modus */
    width: 100%;
    padding: 12px;
    margin: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    background: rgba(10, 20, 55, 0.72);
    border: 2px solid rgba(255, 215, 120, 0.4);
    border-radius: 22px;

    color: #ffd86b;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 215, 120, 0.35);

    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    animation: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.25),
        0 3px 6px rgba(0, 0, 0, 0.35);
}

/* Avatar vult de kolombreedte, met aspect-ratio 1 zodat hij rond blijft.
   min() kapt de breedte op het kleinste van: kolom (100%), 440px cap voor
   superbrede monitors, en 56vh zodat de cirkel ook op zeer lage viewports
   netjes rond blijft (i.p.v. een ovale max-height-uitsnijding). */
.avatar-keuze-btn img {
    width: min(100%, 440px, 56vh);
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 215, 120, 0.45);
}

/* Elia's én Jozef's bronfoto's zijn portret met een hoog geplaatst gezicht; met de
   standaard object-position (midden) vallen ze te hoog/scheef in de cirkel. Naar
   boven verschuiven brengt hun gezicht richting het midden, net als de andere zes.
   ALLEEN Elia en Jozef. */
.avatar-keuze-btn[data-avatar="elia"] img,
.avatar-keuze-btn[data-avatar="jozef"] img {
    object-position: 50% 0%;
}

.avatar-keuze-btn:hover {
    border-color: #ffd86b;
    transform: scale(1.04);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.4),
        0 0 14px rgba(255, 215, 120, 0.45);
}

.avatar-keuze-btn.avatar-gekozen {
    border-color: #ffd86b;
    background: rgba(40, 60, 110, 0.85);
    box-shadow:
        inset 0 1px 0 rgba(255, 215, 120, 0.5),
        0 0 18px rgba(255, 215, 120, 0.6);
}

.avatar-keuze-btn.avatar-gekozen img {
    border-color: #ffd86b;
}

/* Bescheiden tekstlink onder de Start/Terug-knoppen in het Nieuw-spel-scherm:
   route naar de bestaande spelers. Ondergeschikt aan het hoofddoel (nieuw
   profiel), dus geen volle knop-look maar een rustige onderstreepte link. */
.speler-kiezer-link {
    display: block;
    margin: 10px auto 0;
    padding: 4px 8px;
    background: none;
    border: none;
    color: rgba(255, 215, 120, 0.85);
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: 1rem;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.speler-kiezer-link:hover {
    color: #ffd86b;
}

/* =========================
   SPELERKIEZER ("Wie speelt er?") — scrollbaar bij veel profielen
   De profiellijst scrollt intern; titel/hint en de knoppenrij eronder
   ("+ nieuw", Bewerken, Terug) blijven altijd in beeld. Zo kan een kind ook
   met veel profielen of op een korte (tablet)hoogte altijd een nieuwe speler
   toevoegen. min-height:0 is nodig zodat de flex-lijst mag krimpen en scrollen.
========================= */
.speler-kiezer-box {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    /* iets krapper dan de standaard 50px, zodat er op tablets meer hoogte
       overblijft voor de lijst zelf */
    padding: 34px 34px 26px;
}

#speler-kiezer-lijst {
    /* Responsief: tegels wikkelen automatisch; de lijst scrollt verticaal
       binnen de resterende hoogte. */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 6px;
    margin-bottom: 8px;
}

/* Compactere titel/hint in de kiezer, zodat op tablethoogte genoeg ruimte
   overblijft voor de profiellijst zelf. */
.speler-kiezer-box .quiz-title {
    font-size: 2.6rem;
    margin-bottom: 8px;
}

.speler-kiezer-box .quiz-question {
    font-size: 1.5rem;
    margin-bottom: 12px;
}

/* Vaste knoppenrij onder de scrollende lijst — compacter dan de standaard
   answer-knoppen, zodat alle drie de knoppen ook op korte schermen passen en
   in beeld blijven. */
.speler-kiezer-knoppen {
    flex: 0 0 auto;
}

.speler-kiezer-knoppen .answer-btn {
    margin-top: 10px;
    padding: 13px;
    font-size: 1.4rem;
}

/* Bewerken-knop: neutrale leisteen-look, duidelijk anders dan +nieuw (blauw)
   en Terug (groen). */
.speler-kiezer-bewerk-knop {
    background: linear-gradient(180deg, #5a6784 0%, #3c4761 100%);
    border-color: #2b3348;
    color: #f2f5ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Tegel in bewerk-modus: rode rand als teken dat tikken hier verwijdert. */
.avatar-keuze-btn.verwijder-modus {
    border-color: #e8604f;
    box-shadow:
        inset 0 1px 0 rgba(255, 150, 130, 0.4),
        0 0 14px rgba(226, 60, 50, 0.5);
}

.avatar-keuze-btn.verwijder-modus:hover {
    border-color: #ff7a68;
    box-shadow:
        inset 0 1px 0 rgba(255, 150, 130, 0.55),
        0 0 18px rgba(226, 60, 50, 0.7);
}

/* Rood prullenbak-badge rechtsboven op de tegel; vangt zelf geen klik. */
.verwijder-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #c22f22;
    border: 2px solid rgba(255, 255, 255, 0.8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
    pointer-events: none;
}

/* Rode "gevaar"-knop voor onomkeerbare acties (Verwijderen). Nooit de
   standaard-tik — vandaar apart en visueel waarschuwend. */
.knop-gevaar {
    background: linear-gradient(180deg, #e8604f 0%, #c22f22 60%, #9f2318 100%);
    border-color: #8f1c14;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Annuleren + Verwijderen naast elkaar in het bevestigingsscherm. */
.verwijder-knoppen {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.verwijder-knoppen .answer-btn {
    flex: 1;
    margin-top: 0;
}

/* =========================
   NAAM-INVOER in het Nieuw-spel-scherm — bescheiden, met duidelijk label
   "Naam:" ervoor zodat het kind direct weet wat het moet doen.
========================= */

.speler-naam-rij {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 12px;
    flex-wrap: wrap;
}

.speler-naam-label {
    color: #ffd86b;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 0 6px rgba(255, 215, 120, 0.4);
}

.speler-naam-invoer {
    display: inline-block;
    width: 360px;
    max-width: 60vw;
    margin: 0;
    padding: 10px 14px;

    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: 1.1rem;
    color: #2a1a0a;

    background: #f6e9c8;
    border: 2px solid #a87f3a;
    border-radius: 10px;

    text-align: center;
    outline: none;

    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Start/Terug op het Nieuw-spel-scherm: ondergeschikt aan de grote avatars.
   Niet over de volle breedte (override van .answer-btn width:100%), kleinere
   hoogte, naast elkaar gecentreerd via inline-block + text-align:center op
   .quiz-box. Behoudt de gouden/groenblauwe kleuren uit .niveau-expert /
   .niveau-terug. */
#nieuw-spel-scherm .answer-btn {
    width: auto;
    min-width: 160px;
    margin: 6px 8px 0;
    padding: 10px 26px;
    font-size: 1.1rem;
    border-radius: 12px;
    display: inline-block;
}

.speler-naam-invoer:focus {
    border-color: #ffd86b;
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.18),
        0 0 12px rgba(255, 215, 120, 0.55);
}

.speler-naam-invoer::placeholder {
    color: rgba(70, 50, 20, 0.55);
    font-weight: 400;
}

/* =========================
   SCHERMNAVIGATIE — Evangeliën (scherm 1) <-> overige NT-boeken (scherm 2)
   Randpijlen + tweede schermcontainer. Alles binnen #game-container, dus het
   schaalt mee met de 16:9-box.
========================= */

/* Randpijl: subtiele gouden chevron tegen de zijrand, verticaal gecentreerd.
   Standaard volledig onzichtbaar én niet-klikbaar (pointer-events: none), zodat
   hij nooit een klik op de prijzenkast onderschept. JS voegt .onthuld toe zodra
   de muis bij de rand komt. Het is een <button> voor toetsenbord/toegankelijkheid;
   de algemene button-stijl wordt hier weer afgezet. */
.nt-pijl {
    position: absolute;
    top: 50%;
    z-index: 35;

    margin: 0;
    padding: 8px;
    background: none;
    border: none;
    box-shadow: none;
    animation: none;

    width: 64px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffd86b;
    cursor: pointer;

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.35s ease, transform 0.35s ease;
}

.nt-pijl svg {
    filter: drop-shadow(0 0 8px rgba(255, 215, 120, 0.55));
}

.nt-pijl:hover {
    color: #fff0c2;
}

/* Transform-regels onder #game-container zodat ze de globale button:hover-
   transform (scale) overschrijven en de verticale centrering bewaard blijft. */
#game-container .nt-pijl-rechts {
    right: 6px;
    transform: translateY(-50%) translateX(10px);   /* startpositie voor slide-in */
}
#game-container .nt-pijl-links {
    left: 6px;
    transform: translateY(-50%) translateX(-10px);
    z-index: 5;                                       /* binnen #nt-scherm-2 */
}
#game-container .nt-pijl.onthuld {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);       /* infaden + naar de rand schuiven */
}

/* Scherm 2: vult de hele 16:9-box, boven de startscherm-elementen maar onder de
   overlays (z-index 999). Dezelfde achtergrond als scherm 1, met een rustige
   donkerblauwe sluier zodat de placeholder-titel goed leesbaar is. Fade via
   opacity; visibility schakelt mee zodat hij in ruststand geen klikken vangt. */
#nt-scherm-2 {
    position: absolute;
    inset: 0;
    z-index: 40;

    display: flex;
    align-items: center;
    justify-content: center;

    /* Geen platte achtergrondplaat meer: scherm 2 krijgt dezelfde LEVENDE hemel
       als scherm 1 via .nt2-hemel (door script.js ingevoegd) — wolkloze plaat +
       eigen wolken-laag + transparante voorgrond. Zie bouwWolkenScherm2(). */

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

#nt-scherm-2.zichtbaar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.5s ease, visibility 0s;
}

/* Levende hemel achter de NT-inhoud van scherm 2 (Optie A — zelfde opzet als
   scherm 1). Eigen stapelcontext (z-index 0) zodat de drie hemellagen
   (achtergrond → wolken z-index 2 → voorgrond z-index 3) volledig ónder de
   NT-boeken (z-index 1) en de pijlen (z-index 5) blijven. overflow:hidden klipt
   de driftende wolken netjes aan de rand. De wolken-laag en .voorgrond hierin
   hergebruiken exact de bestaande klassen van scherm 1. */
.nt2-hemel {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.nt2-hemel-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;                 /* onder de wolken (2) en de voorgrond (3) */
    object-fit: fill;
    pointer-events: none;
}

/* Scherm 2 staat tegen een lichtere, al licht bewolkte hemel (de lege stage),
   waar de zilverig-koele wolken-PNG's anders wat wegvallen. Daarom hier ietsje
   helderder. ALLEEN scherm 2 (deze scope): de wolk-PNG's en scherm 1 blijven
   ongewijzigd. brightness schaalt alle kanalen gelijk, dus de koele blauwtint
   blijft; de lichte contrast houdt de structuur vast (geen egaal wit).
   Te zacht? Verhoog de brightness-waarde richting 1.40. */
.nt2-hemel .wolk {
    filter: brightness(1.25) contrast(1.04) brightness(1.12) saturate(0.9);
}

.nt-placeholder-titel {
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: clamp(1.8rem, 4vh, 3rem);
    color: #ffd86b;
    text-align: center;
    margin: 0;
    padding: 0;
    text-shadow: 0 0 14px rgba(255, 215, 120, 0.45);
}

/* Inhoud van scherm 2: titel + 2x2 tegelraster, verticaal gecentreerd. De
   horizontale padding houdt ruimte vrij voor de randpijlen links/rechts. */
.nt2-inhoud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 3.2vh, 34px);

    width: 100%;
    max-width: 1000px;
    padding: 0 clamp(72px, 8%, 120px);
}

.nt2-tegels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2.4vh, 24px);

    width: 100%;
    max-width: 820px;
}

/* Groep-tegel: zelfde diepblauw/goud-stijl als de quiz-knoppen. */
.nt2-tegel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: clamp(88px, 15vh, 150px);
    margin: 0;
    padding: clamp(14px, 2.4vh, 24px) 20px;

    background: linear-gradient(to bottom, #2a4778, #1a3060);
    border: 2px solid #d4a648;
    border-radius: 10px;
    box-shadow:
        inset 0 1px 0 rgba(244, 199, 94, 0.4),
        0 2px 6px rgba(0, 0, 0, 0.35);

    cursor: pointer;
    transition: all 0.2s ease;
    animation: none;
}

.nt2-tegel:hover {
    background: linear-gradient(to bottom, #355688, #234074);
    border-color: #f4c75e;
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(244, 199, 94, 0.55),
        0 4px 10px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(244, 199, 94, 0.35);
}

.nt2-tegel-titel {
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-size: clamp(1.25rem, 2.3vh, 1.7rem);
    font-weight: 700;
    color: #f4c75e;
    text-shadow: 0 0 10px rgba(244, 199, 94, 0.3);
}

.nt2-tegel-sub {
    font-size: clamp(0.85rem, 1.5vh, 1rem);
    color: rgba(243, 236, 216, 0.78);
    font-weight: 400;
}

/* Rustige "binnenkort"-melding; verschijnt onderaan na een klik op een boek. */
.nt2-melding {
    position: absolute;
    bottom: 3%;
    left: 50%;
    /* translateY(100%) = exact de eigen hoogte (één letterregel, min-height 1.4em)
       omlaag, zodat de melding netjes onder de boeken/naambordjes valt. */
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    z-index: 6;

    min-height: 1.4em;
    margin: 0;
    font-size: clamp(1rem, 1.8vh, 1.2rem);
    font-style: italic;
    text-align: center;
    color: #ffd86b;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);

    opacity: 0;
    transition: opacity 0.25s ease;
}
.nt2-melding.zichtbaar {
    opacity: 1;
}

/* =========================
   NT-SCHERM 2 — vier groepen als boeken op stenen plateaus
   Config-gestuurd opgebouwd door bouwNtScherm2(). Per positie drie beeldlagen
   (plateau onder, klikbaar boek, naambordje) + de naam in code op het bordje.
   Maten/posities komen inline uit de config; de container is een cqi-context
   zodat de namen meeschalen met de doos (geen overflow), net als de vitrines.
========================= */
.nt2-boeken {
    position: absolute;
    inset: 0;
    z-index: 1;                       /* boven de achtergrond, onder de pijlen (z-index 5) */
    pointer-events: none;            /* alleen de boek-knoppen vangen klikken */
    container-type: inline-size;     /* cqi voor de naamplaatjes */
}

/* Gedeelde basis: gecentreerd op de inline 'left', verankerd aan de onderkant.
   Breedte/hoogte/bottom zet bouwNtScherm2() inline uit de config. */
.nt2-plateau,
.nt2-bord {
    position: absolute;
    transform: translateX(-50%);
    height: auto;
    pointer-events: none;
    user-select: none;
}
.nt2-plateau { z-index: 1; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.45)); }
.nt2-bord    { z-index: 3; }

/* De klikbare boek-knop (enige laag met pointer-events). Hoogte komt inline; de
   afbeelding erin schaalt op die hoogte, breedte volgt uit de verhouding. */
.nt2-boek {
    position: absolute;
    transform: translateX(-50%);
    width: auto;
    z-index: 2;

    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    /* De generieke button-regel (button{}) lekt een gouden box-shadow door die op
       de transparante knop vier lelijke rechthoek-vlakken tekent — hier uitzetten.
       LET OP: de eveneens geërfde 'floating'-animatie NIET uitzetten. Die animeert
       transform (translateY) en maskeert daarmee de translateX(-50%)-centrering;
       de boekposities (boekX) zijn op díe staat afgesteld. animation:none zou de
       centrering opnieuw activeren en de boeken naar links/onder van hun plateaus
       schuiven. Floating stil zetten vergt een aparte her-uitlijning. */
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    pointer-events: auto;

    transition: transform 0.2s ease, filter 0.2s ease;
}
.nt2-boek-img {
    display: block;
    height: 100%;
    width: auto;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}
.nt2-boek:hover {
    transform: translateX(-50%) translateY(-10px) scale(1.04);
    /* De generieke button:hover-regel zet op hover een gouden box-shadow terug die
       de border-box (14px) volgt = een tweede, rechthoekig kader naast de ronde
       glow-div. box-shadow:none op de rust-staat dekt hover niet af (button:hover
       wint daar), dus hier expliciet ook uitzetten. */
    box-shadow: none;
}
/* Glow-host op scherm 2: een APARTE <div> i.p.v. de <button>. Een button klipt zijn
   pseudo-element op de border-box (14px), waardoor de glow als rechthoek oogde;
   een div klipt niet → ronde waas zoals scherm 1. Kopieert exact de boekpositie
   (left/bottom/hoogte krijgt hij inline vanuit bouwNtScherm2). aspect-ratio ≈
   boek-cover (114:131) zodat de waas op het boek valt. z-index 2 = zelfde laag als
   het boek; pointer-events uit zodat klikken naar de knop gaat. Oplichten via .aan.
   BEWUST GEEN translateX(-50%): de <button> erft de floating-animatie, die zijn
   translateX(-50%) onderdrukt, waardoor het boek feitelijk LINKS-uitgelijnd op boekX
   staat. Een div kent die animatie niet; mét translateX zou de glow een halve
   boekbreedte (~57px) naar links springen. Zonder translateX lijnt hij op het boek. */
.nt2-boek-glow {
    position: absolute;
    aspect-ratio: 114 / 131;
    z-index: 2;
    pointer-events: none;
}

/* Naam in code op het bordje: gouden Cinzel, cqi-geschaald zodat lange namen
   ("Brieven van Paulus", "Algemene brieven") binnen het bord blijven. */
.nt2-naam {
    position: absolute;
    transform: translateX(-50%);
    z-index: 4;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
    user-select: none;

    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-weight: 700;
    /* Relatief (cqi, zelfde container als font-size) i.p.v. vaste .5px, zodat de
       letterafstand met de box meekrimpt en lange namen niet buiten het bord
       lopen. 0.026cqi ≈ 0,5px in volledig scherm, dus de look blijft gelijk. */
    letter-spacing: 0.026cqi;
    line-height: 1;
    text-align: center;
    white-space: nowrap;

    /* Gegraveerd-gouden tekst: een verticaal goud-verloop dat via background-clip
       door de letters loopt (i.p.v. één platte kleur), met een dubbele
       drop-shadow voor diepte/reliëf. drop-shadow (niet text-shadow) volgt de
       transparante lettervorm correct. */
    background: linear-gradient(#fff4cf 0%, #f4d57f 38%, #e1aa40 68%, #b07d1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .85)) drop-shadow(0 2px 2px rgba(0, 0, 0, .5));
}

/* Afstelmodus (?afstel=aan): op scherm 2 zijn alle vier de lagen sleepbaar/
   schaalbaar. De hover-lift van het boek staat dan uit zodat slepen rustig
   blijft; buiten afstel verandert er niets. */
#nt-scherm-2.afstel .nt2-plateau,
#nt-scherm-2.afstel .nt2-bord,
#nt-scherm-2.afstel .nt2-naam,
#nt-scherm-2.afstel .nt2-boek {
    pointer-events: auto;
    cursor: move;
    touch-action: none;
}
#nt-scherm-2.afstel .nt2-boek:hover {
    transform: translateX(-50%);
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}
#nt-scherm-2 .nt2-plateau.afstel-geselecteerd,
#nt-scherm-2 .nt2-bord.afstel-geselecteerd,
#nt-scherm-2 .nt2-naam.afstel-geselecteerd,
#nt-scherm-2 .nt2-boek.afstel-geselecteerd {
    outline: 3px solid #36dfff;
    outline-offset: 1px;
    box-shadow: 0 0 10px 3px rgba(54, 223, 255, 0.85);
}

/* =========================
   BOEKENPLANK-OVERLAY (herbruikbaar)
   Verschijnt over scherm 2 bij klik op een NT-groep (nu "Brieven van Paulus").
   Kind van #game-container (position:absolute; inset:0) zodat hij met de
   16:9-box meeschaalt; container-type: inline-size geeft cqi-context voor de
   naamplaatjes (zoals scherm 2). z-index boven scherm 2 (40), onder de
   quiz/niveau-overlays (999) zodat een boek-klik straks de quiz eroverheen kan
   openen. Fade via opacity; visibility schakelt mee zodat hij in ruststand geen
   klikken vangt.
========================= */
.boekenplank {
    position: absolute;
    inset: 0;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: center;

    container-type: inline-size;

    /* Rustige donkere sluier zodat scherm 2 eronder vervaagt maar zichtbaar blijft. */
    background: rgba(6, 14, 36, 0.72);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.boekenplank.zichtbaar {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s;
}

/* Diepblauw paneel met gouden rand. */
.boekenplank-paneel {
    position: relative;
    box-sizing: border-box;
    width: 86%;
    height: 86%;
    padding: 4% 4% 3%;

    display: flex;
    flex-direction: column;
    align-items: center;

    border-radius: 1.4cqi;
    border: 0.3cqi solid #d8a93f;
    background: linear-gradient(180deg, #14264f 0%, #0d1a38 100%);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.55),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

/* "‹ Terug"-knop linksboven, goud (zelfde gevoel als .schatkamer-terug). */
.boekenplank-terug {
    position: absolute;
    top: 3%;
    left: 2.5%;

    padding: 0.5cqi 1.6cqi;
    font-size: 2cqi;
    font-weight: bold;
    color: #1a120a;
    cursor: pointer;

    border: 0.18cqi solid #b07d1c;
    border-radius: 0.9cqi;
    background: linear-gradient(180deg, #f6d98a 0%, #d8a93f 100%);
    box-shadow:
        inset 0 2px 3px rgba(255, 255, 255, 0.45),
        0 3px 6px rgba(0, 0, 0, 0.35);
}
.boekenplank-terug:hover {
    background: linear-gradient(180deg, #ffe6a3 0%, #e6b94c 100%);
}

/* Titel (goud) + subtitel (crème), Cinzel, cqi-geschaald met de box. */
.boekenplank-titel {
    margin: 0.6cqi 0 0.3cqi;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-weight: 700;
    font-size: 4cqi;
    color: #ffd86b;
    text-align: center;
    text-shadow: 0 0 12px rgba(255, 215, 120, 0.4),
                 0 2px 3px rgba(0, 0, 0, 0.5);
}
.boekenplank-subtitel {
    margin: 0 0 2cqi;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-weight: 400;
    font-size: 2.2cqi;
    color: #f3ecd8;
    text-align: center;
}

/* Twee plank-rijen; bouwBoekenplank() vult ze in stap 2 met vier boeken elk. */
.boekenplank-planken {
    flex: 1;
    min-height: 0;               /* wortel van de hoogte-cascade: planken mag niet
                                    voorbij zijn flex-aandeel van het paneel groeien,
                                    zodat de rijen erbinnen écht krimpen i.p.v. te
                                    overflowen (anders valt rij 2 buiten het paneel). */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 2cqi;
}
/* Plank-rij: vier boeken op een subtiele houten/gouden richel. */
.boekenplank-rij {
    position: relative;
    flex: 1;
    /* Sta toe dat rijen onder hun inhoud krimpen, zodat twee rijen de hoogte
       eerlijk 50/50 delen. Zonder dit drukt een rij met een foto-cover (eigen
       beeldhoogte) de volgende rij weg (min-height:auto van flexbox). */
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-evenly;
    gap: 2cqi;
    border-bottom: 0.5cqi solid #9c6f23;
    box-shadow: 0 0.4cqi 0.6cqi rgba(0, 0, 0, 0.45);
    border-radius: 0.3cqi;
}

/* Eén boek op de plank: een boek-cover met embleem + een naamplaatje eronder.
   Knop-reset zodat alleen de inhoud telt; cover staat op de richel, naam hangt
   er net onder. */
.plank-boek {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;

    width: 20%;
    height: 100%;
    min-height: 0;               /* mag onder zijn inhoud krimpen (foto-cover-img) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8cqi;

    transition: transform 0.15s ease, filter 0.15s ease;
}
.plank-boek:hover {
    transform: translateY(-0.8cqi);
    filter: drop-shadow(0 0 1cqi rgba(255, 215, 120, 0.5));
}

/* De boek-cover: staand boekje, diepblauw met gouden rand. Hoogte-gestuurd
   (aspect-ratio) zodat het nooit te breed wordt; het embleem zit gecentreerd. */
.plank-boek-cover {
    position: relative;          /* anker voor het slotje + de rug (::before) */
    height: 66%;
    aspect-ratio: 3 / 4;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0.6cqi;
    border: 0.22cqi solid #d8a93f;
    /* Iets lichtere/levendiger blauwtint dan het paneel (#14264f→#0d1a38),
       zodat het boek als eigen object op de plank staat i.p.v. erin wegvalt. */
    background: linear-gradient(150deg, #2a4a7a 0%, #1a3258 100%);
    box-shadow:
        inset 0 0 1.2cqi rgba(0, 0, 0, 0.5),
        0 0.5cqi 0.8cqi rgba(0, 0, 0, 0.45);
}

/* Smalle boekrug langs de linkerkant: een iets donkerder verticale strook met
   een dun goudlijntje er net naast. Puur decoratief (geen klikken), ligt achter
   het embleem/slotje die in het cover-midden staan. */
.plank-boek-cover::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 14%;

    background: linear-gradient(90deg, #15294e 0%, #1c3a64 100%);
    border-right: 0.1cqi solid #d8a93f;
    border-top-left-radius: 0.45cqi;
    border-bottom-left-radius: 0.45cqi;

    pointer-events: none;
}

/* Volledige cover-afbeelding (groen boek incl. eigen rand/rug/embleem). Hier ís
   de PNG het boek, dus de code-getekende blauwe omslag + rug worden uitgezet en
   de afbeelding bepaalt zelf de breedte (eigen aspect-ratio). */
.plank-boek-cover-foto {
    height: 72%;                 /* iets hoger: de cover-PNG is smaller/langer dan 3:4 */
    aspect-ratio: auto;          /* breedte volgt de afbeelding i.p.v. 3/4 te forceren */
    min-height: 0;               /* niet opzwellen tot de intrinsieke beeldhoogte */
    border: none;
    background: none;
    box-shadow: none;
}
.plank-boek-cover-foto::before { content: none; }   /* geen blauwe code-rug */
.plank-cover-img {
    height: 100%;
    width: auto;
    max-width: 100%;             /* val terug op breedte als de hoogte de rem is */
    min-height: 0;               /* replaced element is een flex-item: laat krimpen
                                    i.p.v. vasthouden aan de intrinsieke beeldhoogte */
    object-fit: contain;
    filter: drop-shadow(0 0.5cqi 0.8cqi rgba(0, 0, 0, 0.45));
}

/* Embleem: code-getekende gouden plaatshouder-disc. Later vervangen door een
   <img class="plank-embleem"> met dezelfde maat/positie. */
.plank-embleem {
    width: 55%;
    aspect-ratio: 1;
    object-fit: contain;
}
.plank-embleem-plaatshouder {
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff4cf 0%, #f4d57f 30%, #e1aa40 62%, #b07d1c 100%);
    border: 0.18cqi solid #ffe6a3;
    box-shadow:
        inset 0 0 0.8cqi rgba(0, 0, 0, 0.35),
        0 0.3cqi 0.5cqi rgba(0, 0, 0, 0.4);
}

/* Gouden naamplaatje onder het boek: donkere plaat met gouden rand en goud
   Cinzel. Lange namen ("1 & 2 Tessalonicenzen") mogen netjes afbreken i.p.v.
   buiten de plaat te lopen. */
.plank-naam {
    width: 100%;
    min-height: 3cqi;
    box-sizing: border-box;
    padding: 0.4cqi 0.4cqi;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 0.5cqi;
    border: 0.12cqi solid #b07d1c;
    background: linear-gradient(180deg, #1a2c52 0%, #0e1c3a 100%);

    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-weight: 700;
    font-size: 1.5cqi;
    letter-spacing: 0.02cqi;
    line-height: 1.05;
    text-align: center;
    color: #ffd86b;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* Nog niet speelbaar boek: licht gedimd en ontkleurd. De cover dimt mee (incl.
   het slotje, dat zo subtiel blijft); het naamplaatje iets minder sterk. */
.plank-boek.vergrendeld .plank-boek-cover {
    opacity: 0.6;
    filter: grayscale(0.4);
}
.plank-boek.vergrendeld .plank-naam {
    opacity: 0.7;
}
/* Vergrendelde boeken: rustige hover (geen gouden gloed die "speelbaar" suggereert). */
.plank-boek.vergrendeld:hover {
    transform: translateY(-0.4cqi);
    filter: none;
}

/* Klein gouden slotje op de cover van een nog niet speelbaar boek. */
.plank-slot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    color: #ffd86b;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
    pointer-events: none;
}
.plank-slot svg {
    display: block;
    width: 100%;
    height: auto;
}

/* "Binnenkort beschikbaar"-melding onderaan het paneel; verschijnt na een klik
   op een vergrendeld boek. */
.boekenplank-melding {
    min-height: 2.4cqi;
    margin: 1.4cqi 0 0;
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-style: italic;
    font-size: 2cqi;
    text-align: center;
    color: #ffd86b;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);

    opacity: 0;
    transition: opacity 0.25s ease;
}
.boekenplank-melding.zichtbaar {
    opacity: 1;
}

/* =========================
   NT-PRIJZENKAST op scherm 2 (individuele trofeeën)
   Ligt over de geschilderde (lege) prijzenkast rechts. Vier groepen onder
   elkaar (Handelingen, Brieven van Paulus, Algemene brieven, Openbaring), elk
   met een kopje + trofee-rij(en). Positie/maten zijn ruwe startwaarden — fijn
   afstellen volgt later. container-type geeft cqi-context (relatief aan de
   kast); alleen de trofeeën vangen klikken.
========================= */
.nt2-kast {
    position: absolute;
    /* Exact in de BINNENOPENING van de geschilderde kast: onder de boog en de
       PRIJZENKAST-titel, zijkanten strak tegen de binnenrand. Geen aspect-ratio
       -> het paneel vult deze rechthoek via background-size:100% 100%.
       Eerste-gok-waarden (binnenvak ≈ x 72-95%, onder de boog ~17%); fijn
       afstellen op screenshot. */
    left: 72%;
    /* Vanaf BOVEN ingekort (top omlaag, height met hetzelfde bedrag korter) zodat
       de bovenrand niet meer over de onderkant van de geschilderde "PRIJZENKAST"-
       titel valt (anders dekt hij de J-haak af -> J leest als I). De onderkant
       blijft op ~67% staan, vrij van het level-schild. Nissen én trofeeën schalen
       samen met de box, dus de trofeeën blijven in hun nissen. */
    top: 16%;
    width: 23%;
    height: 51%;                  /* onderkant ~67% -> vrij van het level-schild */
    z-index: 4;                   /* boven achtergrond/boeken (1), onder de pijlen (5) */

    /* Het actieve paneel als achtergrond; bouwNtKast() wisselt de PNG. */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;

    container-type: inline-size;
    pointer-events: none;         /* alleen de trofeeën + kast-pijltjes vangen klikken */
}

/* Trofee-overlay over het actieve paneel. STAP 1: ruwe flex; STAP 2 legt de
   trofeeën in de geschilderde nissen. */
/* Positioneer-context over het paneel: kopjes en nissen worden er absoluut in
   geplaatst (x/y uit de config, als % van het paneel). */
.kast-inhoud {
    position: absolute;
    inset: 0;
    pointer-events: none;        /* alleen de nissen vangen klikken */
}

/* Eigen doorschuif-pijltjes op de kast (los van de schermcarrousel). */
.kast-pijl {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;

    width: 9%;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;

    color: #ffd86b;
    background: rgba(8, 14, 30, 0.6);
    border: 0.15cqi solid #d8a93f;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}
.kast-pijl svg { width: 70%; height: 70%; }
.kast-pijl-links  { left: 1%; }
.kast-pijl-rechts { right: -5%; }   /* buiten de rechter nis-kolom (Ef.) */
.kast-pijl:hover { background: rgba(20, 30, 56, 0.85); }
.kast-pijl.verborgen { display: none; }

/* 1/2-indicator in de gap onder de kast (vrij van de onderste naambordjes en
   boven het level-schild). */
.kast-indicator {
    position: absolute;
    bottom: -5%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;

    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-weight: 700;
    font-size: 3cqi;
    color: #ffd86b;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}
/* Eén nis: wrapper gecentreerd op nis.x/nis.y (% van het paneel), breedte
   nis.breedte. Bevat de trofee + een afkorting-label dat er net onder hangt. */
.kast-nis {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease;
}
.kast-nis:hover {
    transform: translate(-50%, -50%) translateY(-0.6cqi) scale(1.04);
}

/* Afstelmodus (?afstel=aan): kast-trofeeën pakbaar; hover-lift uit zodat slepen
   rustig blijft; geselecteerde trofee cyaan gemarkeerd. */
.nt2-kast.afstel .kast-nis {
    cursor: move;
    touch-action: none;
}
.nt2-kast.afstel .kast-nis:hover {
    transform: translate(-50%, -50%);
}
.kast-nis.afstel-geselecteerd {
    outline: 3px solid #36dfff;
    outline-offset: 1px;
    box-shadow: 0 0 10px 3px rgba(54, 223, 255, 0.85);
}
.kast-trofee {
    display: block;
    width: 100%;
    height: auto;
}
/* Naamplaatje: een ZELFSTANDIG element (geen kind van de trofee), gecentreerd op
   nis.labelX/nis.labelY (% van het paneel), breedte nis.labelBreedte. Ornate
   naambordje.png + goud-gradiënt-tekst, identiek aan de scherm-2-boeknamen. Zo
   is het los selecteerbaar/sleepbaar in de afstelmodus. */
.kast-label {
    position: absolute;
    transform: translate(-50%, -50%);
    aspect-ratio: 1800 / 874;    /* verhouding van naambordje.png; hoogte volgt breedte */
    background: url("images/naambordje.webp") center / 100% 100% no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0 9%;               /* binnen de gouden lijst van de plaat blijven */

    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease;
}
.kast-label:hover {
    transform: translate(-50%, -50%) translateY(-0.4cqi) scale(1.03);
}
/* Afstelmodus: naamplaatjes net als trofeeën pakbaar + selecteerbaar. */
.nt2-kast.afstel .kast-label {
    cursor: move;
    touch-action: none;
}
.nt2-kast.afstel .kast-label:hover {
    transform: translate(-50%, -50%);
}
.kast-label.afstel-geselecteerd {
    outline: 3px solid #36dfff;
    outline-offset: 1px;
    box-shadow: 0 0 10px 3px rgba(54, 223, 255, 0.85);
}
.kast-label-tekst {
    font-family: 'Cinzel', 'Palatino Linotype', 'Book Antiqua', serif;
    font-weight: 700;
    font-size: 1.7cqi;
    letter-spacing: 0.02cqi;
    line-height: 1;
    white-space: nowrap;

    /* Gegraveerd-goud, identiek aan .nt2-naam (scherm-2-boeknamen). */
    background: linear-gradient(#fff4cf 0%, #f4d57f 38%, #e1aa40 68%, #b07d1c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.85));
}

/* Silhouet wanneer de trofee-kunst nog niet bestaat (flex-variant van
   .sk-trofee-silhouet; zelfde kelkvorm en beeldverhouding). */
.kast-trofee-silhouet {
    aspect-ratio: 428 / 676;
    background: linear-gradient(180deg, rgba(26, 36, 66, 0.92) 0%, rgba(8, 12, 26, 0.95) 100%);
    clip-path: polygon(
        15% 0%, 85% 0%, 83% 14%, 72% 27%, 56% 35%, 54% 40%, 54% 62%,
        62% 68%, 68% 74%, 76% 88%, 80% 100%,
        20% 100%, 24% 88%, 32% 74%, 38% 68%, 46% 62%, 46% 40%, 44% 35%,
        28% 27%, 17% 14%
    );
    opacity: 0.85;
}

/* Touch-vangnet: op apparaten zonder hover blijven de pijlen zacht zichtbaar en
   klikbaar, zodat een tablet-speler altijd verder kan. Op desktop (hover)
   verandert er niets — daar blijft de pijl verborgen tot de muis bij de rand komt. */
@media (hover: none), (pointer: coarse) {
    #game-container .nt-pijl-rechts,
    #game-container .nt-pijl-links {
        opacity: 0.35;
        pointer-events: auto;
        transform: translateY(-50%);
    }
}