/* ==========================================================
   Natan's foto album — vormgeving
   ========================================================== */

*, *::before, *::after { box-sizing: border-box; }

.beheer{
  position: fixed;
  z-index: 10000;
  top: 16px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(620px, calc(100vw - 32px));
  color: #f6e6ab;
  font: 13px Arial, sans-serif;
}
.beheer-knop{
  padding: 9px 15px;
  border: 1px solid #d5b75e;
  border-radius: 5px;
  color: #fff6d0;
  background: #342514;
  font: inherit;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.beheer-knop:hover{ background: #523b1b; }
.beheer-knop.secundair{ color: #e8d6b4; background: #21180f; }
.beheer-knop.uit{
  opacity: .55;
  border-color: rgba(213,183,94,.35);
  background: #1c150c;
}
.beheer-knop.uit:hover{ opacity: .85; background: #2a2013; }
#beheer-status{
  max-width: 430px;
  text-shadow: 0 1px 5px #000;
}
#beheer-status.fout{ color: #ffc2a8; }
.login-venster{
  width: min(390px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid #b18f48;
  border-radius: 8px;
  color: #f6e6c6;
  background: #21170d;
  box-shadow: 0 18px 60px #000b;
  font: 15px Arial, sans-serif;
}
.login-venster::backdrop{ background: #080502c9; }
.login-venster h2{
  margin: 0 0 20px;
  color: #f4d98a;
  font: 22px Georgia, serif;
}
.login-venster label{ display: block; margin: 13px 0 6px; }
.login-venster input{
  width: 100%;
  padding: 10px;
  border: 1px solid #806532;
  border-radius: 4px;
  color: #fff8e9;
  background: #100b07;
  font: inherit;
}
#login-melding{ min-height: 18px; color: #ffc2a8; font-size: 13px; }
.login-acties{ display: flex; justify-content: flex-end; gap: 9px; }
.fotolijst.foto-drop-actief{
  outline: 3px solid #f6d46e;
  outline-offset: 3px;
  box-shadow: 0 0 28px 8px #f6d46eaa;
}
#boek.boek-drop-hint{
  outline: 3px dashed #f6d46e;
  outline-offset: 6px;
  box-shadow: 0 0 40px 10px #f6d46e88;
}
#boek.boek-drop-hint::after{
  content: '✚ Laat los om de foto toe te voegen aan het eerste vrije vak';
  position: absolute;
  inset: auto 0 8% 0;
  text-align: center;
  font-size: 15px;
  font-style: italic;
  color: #ffe9b0;
  text-shadow: 0 0 12px #000, 0 2px 6px #000;
  pointer-events: none;
  z-index: 99999;
}
body.beheer-ingelogd .fotolijst.leeg{
  border-color: rgba(233, 201, 106, .85);
  cursor: copy;
}
body.beheer-ingelogd .fotolijst.leeg::before{ content: none; }
body.beheer-ingelogd .fotolijst.leeg::after{
  content: '✚ Nieuwe foto hier neerzetten';
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-style: italic;
  letter-spacing: normal;
  text-transform: none;
  color: rgba(168, 128, 31, .85);
  text-align: center;
  padding: 0 12px;
  animation: leeg-hint-gloed 2.6s ease-in-out infinite;
}
@keyframes leeg-hint-gloed{
  0%, 100%{ opacity: .55; }
  50%{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  body.beheer-ingelogd .fotolijst.leeg::after{ animation: none; }
}

:root{
  --goud-1:#fff6d0;
  --goud-2:#e9c96a;
  --goud-3:#a8801f;
  --goud-4:#f6e6ab;
  --papier-1:#fbf3e2;
  --papier-2:#e8d6b4;
  --inkt:#4a3a26;

  --page-w:420px;
  --page-h:600px;
  --flip-duur:1.25s;
  --flip-ease:cubic-bezier(.42,.02,.32,1);

  --ruis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E");
  --leer-ruis:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05 0.11' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23l)'/%3E%3C/svg%3E");
}

html, body { height: 100%; }

body{
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  overflow: hidden;
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--inkt);
  background: #120c07;
  -webkit-font-smoothing: antialiased;
}

/* ---------- achtergrond ---------- */
.achtergrond{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(125% 95% at 50% -5%, #3d2c1d 0%, #1d1409 52%, #0b0704 100%);
}
.achtergrond::after{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--ruis);
  opacity: .05;
  mix-blend-mode: overlay;
}

/* ---------- podium ---------- */
.podium{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
}

/* ---- Scorebord helemaal bovenin, in het midden ---- */
.scorebord{
  position: fixed;
  z-index: 10001;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 8px 22px;
  border: 1px solid #d5b75e;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a1d0e 0%, #17100a 100%);
  box-shadow: 0 0 22px #f6d46e33, inset 0 1px 0 #f6d46e2e, 0 8px 24px #000a;
  color: #f6e6ab;
  font: 15px Georgia, serif;
  letter-spacing: 1px;
  user-select: none;
  transition: opacity .4s ease, transform .4s ease;
}
.scorebord.verborgen{
  opacity: 0;
  transform: translateX(-50%) translateY(-14px) scale(.9);
  pointer-events: none;
}
.score-icoon{
  color: #f6d46e;
  font-size: 17px;
  text-shadow: 0 0 10px #f6d46e;
  animation: score-tinkel 2.6s ease-in-out infinite;
}
.score-label{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #cbb27a;
}
.score-getal{
  min-width: 3.2ch;
  text-align: right;
  color: #ffe9a8;
  font-size: 21px;
  font-weight: bold;
  text-shadow: 0 0 12px #f6d46eaa, 0 0 26px #f6d46e55;
  transition: transform .18s ease;
}
.score-getal.puls{
  transform: scale(1.35);
}
.score-spreuk{
  max-width: min(340px, calc(100vw - 40px));
  padding: 5px 10px;
  border: 1px solid rgba(233,201,106,.45);
  border-radius: 999px;
  color: #e8ffd9;
  background: linear-gradient(180deg, #203323, #122117);
  font: 12px Arial, sans-serif;
  letter-spacing: 0;
  line-height: 1.3;
  cursor: pointer;
}
.score-spreuk:hover{ background: linear-gradient(180deg, #2c4930, #1a2c20); }
.score-spreuk[hidden]{ display: none; }
@keyframes score-tinkel{
  0%, 100%{ opacity: .75; text-shadow: 0 0 6px #f6d46e; }
  50%{ opacity: 1; text-shadow: 0 0 16px #f6d46e, 0 0 30px #f6d46e88; }
}
.score-stijging{
  position: fixed;
  z-index: 9000;
  pointer-events: none;
  color: #ffe9a8;
  font: bold 24px Georgia, serif;
  text-shadow: 0 0 10px #f6d46e, 0 0 24px #f6d46e88, 0 2px 4px #000;
  animation: score-stijg 1.1s ease-out forwards;
}
@keyframes score-stijg{
  0%{ opacity: 0; transform: translate(-50%, 0) scale(.5); }
  18%{ opacity: 1; transform: translate(-50%, -14px) scale(1.25); }
  100%{ opacity: 0; transform: translate(-50%, -70px) scale(1); }
}

.scene{
  position: relative;
  width: calc(var(--page-w) * 2);
  height: var(--page-h);
  perspective: 2400px;
  perspective-origin: 50% 42%;
}

/* ---------- het boek ---------- */
.boek{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateX(var(--boek-schuif, 0px)) rotateX(3deg) rotateY(var(--boek-kantel, 0deg));
  transition: transform .95s cubic-bezier(.4,.05,.25,1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.boek.dicht{
  --boek-schuif: calc(var(--page-w) / -2);
  --boek-kantel: -6deg;
}

/* schaduw onder het boek */
.schaduw{
  position: absolute;
  left: var(--schaduw-l, 3%);
  right: var(--schaduw-r, 3%);
  bottom: -22px;
  height: 46px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,0) 72%);
  filter: blur(9px);
  transform: translateZ(-70px);
  pointer-events: none;
}
.boek.dicht .schaduw{ --schaduw-l: 53%; }

/* stapels bladzijden aan de zijkanten */
.stapel{
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 13px;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(90deg,
    #f4e8ce 0 1px, #d3bd94 1px 2px, #e9dabb 2px 3px, #c4ac82 3px 4px);
  transition: opacity .5s ease;
}
.stapel-rechts{
  right: -11px;
  border-radius: 0 3px 3px 0;
  box-shadow: 3px 0 8px rgba(0,0,0,.45);
}
.stapel-links{
  left: -11px;
  border-radius: 3px 0 0 3px;
  box-shadow: -3px 0 8px rgba(0,0,0,.45);
}
.boek.dicht .stapel-links{ opacity: 0; }

/* ---------- bladen ---------- */
.blad{
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--flip-duur) var(--flip-ease);
  will-change: transform;
}
.blad.omgeslagen{ transform: rotateY(-180deg); }
.blad.flip .vlak{ pointer-events: none; filter: drop-shadow(0 15px 12px rgba(22, 12, 4, .4)) drop-shadow(0 4px 4px rgba(36, 20, 7, .2)); }
.blad.sleep{ transition: none; }

/* knop-flip: levendige omslag met lift, kromming en zachte landing.
   Tijdens slepen (.sleep) blijft de directe transform-sturing werken. */
.blad.flip:not(.sleep){
  animation: blad-omslag var(--flip-duur) cubic-bezier(.42, .02, .32, 1) both;
}
@keyframes blad-omslag{
  0%{
    transform: rotateY(0deg) translateZ(0) rotateX(0deg);
    animation-timing-function: cubic-bezier(.55, .06, .68, .19);
  }
  22%{
    /* papier tilt op: weerstand van het papier */
    transform: rotateY(-14deg) translateZ(26px) rotateX(2.5deg);
    animation-timing-function: cubic-bezier(.3, .6, .4, 1);
  }
  55%{
    /* snelle middenfase: het blad valt over */
    transform: rotateY(-104deg) translateZ(34px) rotateX(1.5deg);
    animation-timing-function: cubic-bezier(.25, .55, .3, 1);
  }
  82%{
    transform: rotateY(-176deg) translateZ(10px) rotateX(-1deg);
    animation-timing-function: cubic-bezier(.35, 0, .3, 1);
  }
  92%{
    /* zacht landen met een klein nagolfje */
    transform: rotateY(-181.5deg) translateZ(2px) rotateX(0deg);
    animation-timing-function: ease-out;
  }
  100%{ transform: rotateY(-180deg) translateZ(0) rotateX(0deg); }
}
/* achteruit-flip (vorige): zelfde beweging, gespiegeld */
.blad.flip.terug:not(.sleep){
  animation-name: blad-omslag-terug;
}
@keyframes blad-omslag-terug{
  0%{
    transform: rotateY(-180deg) translateZ(0) rotateX(0deg);
    animation-timing-function: cubic-bezier(.55, .06, .68, .19);
  }
  22%{
    transform: rotateY(-166deg) translateZ(26px) rotateX(-2.5deg);
    animation-timing-function: cubic-bezier(.3, .6, .4, 1);
  }
  55%{
    transform: rotateY(-76deg) translateZ(34px) rotateX(-1.5deg);
    animation-timing-function: cubic-bezier(.25, .55, .3, 1);
  }
  82%{
    transform: rotateY(-4deg) translateZ(10px) rotateX(1deg);
    animation-timing-function: cubic-bezier(.35, 0, .3, 1);
  }
  92%{
    transform: rotateY(1.5deg) translateZ(2px) rotateX(0deg);
    animation-timing-function: ease-out;
  }
  100%{ transform: rotateY(0deg) translateZ(0) rotateX(0deg); }
}

.vlak{
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--papier-1);
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(36, 20, 7, .16));
}
.blad:not(.omgeslagen) .vlak.voor,
.blad.omgeslagen .vlak.achter{ pointer-events: auto; }
.blad.flip .vlak{ pointer-events: none; }
.vlak::before,
.vlak::after{
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
}
.vlak::before{
  background: linear-gradient(90deg, transparent 48%, rgba(43, 27, 11, .28));
  transition: opacity var(--flip-duur) ease;
}
.vlak.achter::before{ transform: scaleX(-1); }
.vlak::after{
  background: linear-gradient(108deg, transparent 28%, rgba(255, 250, 226, .52) 49%, transparent 70%);
  background-size: 220% 100%;
}
.blad.flip .vlak::before{ opacity: .8; }
.blad.flip .vlak::after{
  opacity: .75;
  animation: blad-glans var(--flip-duur) ease-in-out both;
}
@keyframes blad-glans{
  from{ background-position: 110% 0; }
  to{ background-position: -110% 0; }
}
/* kromming: een zachte schaduw-gloed die over het blad rolt tijdens de omslag,
   alsof het papier doorbuigt */
.blad.flip:not(.sleep) .vlak::before{
  animation: blad-kromming var(--flip-duur) ease-in-out both;
}
@keyframes blad-kromming{
  0%{ opacity: 0; }
  22%{ opacity: .25; }
  55%{ opacity: .85; }
  82%{ opacity: .55; }
  100%{ opacity: .8; }
}
.vlak.voor{ border-radius: 2px 7px 7px 2px; }
.vlak.achter{ transform: rotateY(180deg); border-radius: 7px 2px 2px 7px; }

/* ---------- papieren bladzijde ---------- */
.pagina{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 32px;
  background:
    radial-gradient(120% 90% at 50% -12%, rgba(255,255,255,.7), rgba(255,255,255,0) 58%),
    radial-gradient(85% 65% at 105% 105%, rgba(150,110,60,.18), rgba(150,110,60,0) 62%),
    linear-gradient(175deg, var(--papier-1) 0%, #f3e6cc 46%, var(--papier-2) 100%);
}
.pagina::before{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--ruis);
  opacity: .07;
  mix-blend-mode: multiply;
}
.pagina::after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  pointer-events: none;
}
.pagina.recto{ box-shadow: inset 28px 0 36px -24px rgba(80,52,20,.6); }
.pagina.recto::after{ right: 0; background: linear-gradient(90deg, rgba(120,90,50,0), rgba(120,90,50,.2)); }
.pagina.verso{ box-shadow: inset -28px 0 36px -24px rgba(80,52,20,.6); }
.pagina.verso::after{ left: 0; background: linear-gradient(270deg, rgba(120,90,50,0), rgba(120,90,50,.2)); }

.paginanummer{
  position: absolute;
  bottom: 11px;
  font-size: 11px;
  letter-spacing: .16em;
  color: #9a8358;
}
.pagina.recto .paginanummer{ right: 22px; }
.pagina.verso .paginanummer{ left: 22px; }

/* ---------- foto's ---------- */
.fotos{
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}
.fotos.enkel{ grid-template-rows: 1fr; }

.fotolijst{
  position: relative;
  margin: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 9px 9px 7px;
  background: linear-gradient(158deg, #fffdf6 0%, #f6ecd8 55%, #eadfc6 100%);
  border: 1px solid rgba(120,90,50,.28);
  box-shadow: 0 7px 16px rgba(60,40,15,.3), inset 0 1px 0 rgba(255,255,255,.85);
  transition: box-shadow .25s ease;
}
.fotolijst.leeg{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 246, 214, .55), rgba(255, 246, 214, 0) 72%),
    repeating-linear-gradient(45deg, rgba(233, 201, 106, .09) 0 9px, rgba(233, 201, 106, 0) 9px 18px);
  border: 1px dashed rgba(168, 128, 31, .5);
  box-shadow: inset 0 0 0 1px rgba(255, 246, 214, .4), inset 0 0 30px rgba(168, 128, 31, .14);
}
.fotolijst.leeg::before{
  content: '❧';
  position: absolute;
  inset: 0 0 30px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: rgba(168, 128, 31, .34);
  text-shadow: 0 0 16px rgba(255, 214, 106, .45);
  pointer-events: none;
}
.fotolijst.leeg::after{
  content: 'leeg vak';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 11px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(120, 90, 50, .55);
  pointer-events: none;
}
.fotolijst:not(.leeg):hover,
.fotolijst:not(.leeg).foto-actief{
  position: relative;
  z-index: 2;
  border-color: rgba(255, 245, 196, 1);
  outline: 2px solid rgba(255, 220, 137, .9);
  outline-offset: 3px;
  box-shadow: 0 14px 30px rgba(60,40,15,.55), 0 0 20px 4px rgba(255, 215, 130, .88), 0 0 38px 8px rgba(177, 138, 255, .5), inset 0 1px 0 rgba(255,255,255,1);
}

.beeld{
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: #cdbb99;
  cursor: zoom-in;
  transition: box-shadow .3s ease;
}
.beeld::before{
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 2px solid rgba(255, 239, 177, .95);
  box-shadow: inset 0 0 16px rgba(255, 208, 101, .8), inset 0 0 34px rgba(177, 138, 255, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.beeld img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}
.beeld img.is-placeholder{ object-fit: cover; }
.beeld img{ transition: transform .55s cubic-bezier(.2, .75, .25, 1), filter .55s ease; }
.beeld:hover img,
.fotolijst:not(.leeg):hover .beeld img,
.fotolijst:not(.leeg).foto-actief .beeld img{
  transform: scale(1.075) translateY(-2px);
  filter: saturate(1.12) brightness(1.08);
}

.beeld::after{
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

.magie-kader{
  position: absolute;
  inset: 5px;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(255, 225, 139, .9);
  box-shadow: inset 0 0 12px rgba(255, 221, 132, .2), 0 0 10px rgba(255, 205, 96, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, inset .35s ease;
}
.magie-kader::before,
.magie-kader::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.magie-kader::before{
  border: 1px solid rgba(255, 248, 213, .78);
  inset: 3px;
  box-shadow: inset 0 0 7px rgba(255, 237, 176, .28);
}
.magie-kader::after{
  inset: -20% -60%;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 230, .58) 49%, rgba(255, 225, 151, .22) 52%, transparent 60%);
  transform: translateX(-75%) skewX(-12deg);
}

.magie-ster{
  position: absolute;
  z-index: 4;
  color: #fff4c7;
  font-size: 17px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 4px #fff, 0 0 9px #ffd96f, 0 0 15px rgba(255, 197, 75, .95);
}
.magie-ster.ster-tl{ top: 3px; left: 3px; }
.magie-ster.ster-tr{ top: 3px; right: 3px; color: #e7dcff; text-shadow: 0 0 4px #fff, 0 0 9px #c4a6ff, 0 0 15px rgba(153, 111, 255, .95); }
.magie-ster.ster-bl{ bottom: 3px; left: 3px; color: #d8f6ff; text-shadow: 0 0 4px #fff, 0 0 9px #80ddff, 0 0 15px rgba(73, 184, 255, .95); }
.magie-ster.ster-br{ bottom: 3px; right: 3px; }

.kaderstofje{
  position: absolute;
  z-index: 4;
  color: #fff4c7;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 0 4px #fff, 0 0 9px #ffd96f, 0 0 13px rgba(255, 197, 75, .95);
}
.kaderstofje:nth-of-type(3n){ color: #e7dcff; text-shadow: 0 0 4px #fff, 0 0 9px #c4a6ff, 0 0 13px rgba(153, 111, 255, .95); }
.kaderstofje:nth-of-type(3n + 1){ color: #d8f6ff; text-shadow: 0 0 4px #fff, 0 0 9px #80ddff, 0 0 13px rgba(73, 184, 255, .95); }

@media (hover: hover) and (pointer: fine){
  .beeld:hover .magie-kader,
  .fotolijst:not(.leeg):hover .magie-kader,
  .fotolijst:not(.leeg).foto-actief .magie-kader{ inset: 4px; opacity: 1; }
  .beeld:hover .magie-kader::after,
  .fotolijst:not(.leeg):hover .magie-kader::after,
  .fotolijst:not(.leeg).foto-actief .magie-kader::after{ animation: fotokader-glans 2.8s ease-in-out infinite; }
  .beeld:hover .magie-ster,
  .fotolijst:not(.leeg):hover .magie-ster,
  .fotolijst:not(.leeg).foto-actief .magie-ster{ animation: fotokader-ster 1.5s ease-in-out infinite alternate; }
  .beeld:hover .magie-ster.ster-tr,
  .fotolijst:not(.leeg):hover .magie-ster.ster-tr,
  .fotolijst:not(.leeg).foto-actief .magie-ster.ster-tr{ animation-delay: .3s; }
  .beeld:hover .magie-ster.ster-bl,
  .fotolijst:not(.leeg):hover .magie-ster.ster-bl,
  .fotolijst:not(.leeg).foto-actief .magie-ster.ster-bl{ animation-delay: .65s; }
  .beeld:hover .magie-ster.ster-br,
  .fotolijst:not(.leeg):hover .magie-ster.ster-br,
  .fotolijst:not(.leeg).foto-actief .magie-ster.ster-br{ animation-delay: .95s; }
  .beeld:hover .kaderstofje,
  .fotolijst:not(.leeg):hover .kaderstofje,
  .fotolijst:not(.leeg).foto-actief .kaderstofje{ animation: kaderstofje-twink 1.4s ease-in-out var(--vertraging) infinite alternate; }
}

@keyframes fotokader-glans{
  0%, 18%{ transform: translateX(-75%) skewX(-12deg); }
  72%, 100%{ transform: translateX(75%) skewX(-12deg); }
}

@keyframes fotokader-ster{
  from{ opacity: .45; transform: scale(.72) rotate(-12deg); }
  to{ opacity: 1; transform: scale(1.22) rotate(12deg); }
}

@keyframes kaderstofje-twink{
  from{ opacity: .2; transform: translateY(3px) scale(.65) rotate(-18deg); }
  to{ opacity: 1; transform: translateY(-5px) scale(1.15) rotate(22deg); }
}

.hoek{
  position: absolute;
  width: 19px;
  height: 19px;
  background: linear-gradient(135deg, #8a6132, #3a2410);
  opacity: .92;
  pointer-events: none;
  z-index: 2;
}
.hoek.tl{ top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
.hoek.tr{ top: 0; right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.hoek.bl{ bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.hoek.br{ bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.fotobijschrift{
  padding-top: 6px;
  font-size: 11.5px;
  font-style: italic;
  letter-spacing: .02em;
  text-align: center;
  color: #6f5a38;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fotobijschrift.geen{ display: none; }

/* ---------- kaft ---------- */
.kaft{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 26px 30px 52px;
  background:
    radial-gradient(140% 120% at 28% 8%, rgba(255,214,150,.18), rgba(0,0,0,0) 56%),
    linear-gradient(152deg, #5d3819 0%, #402512 44%, #26150a 100%);
  box-shadow: inset 0 0 90px rgba(0,0,0,.6);
}
.kaft::before{
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--leer-ruis);
  opacity: .22;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.kaft::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 55% at 50% 45%, rgba(255,220,160,.1), rgba(0,0,0,0) 70%);
  pointer-events: none;
}

.rug{
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 34px;
  background:
    repeating-linear-gradient(180deg,
      rgba(0,0,0,0) 0 46px,
      rgba(0,0,0,.42) 46px 50px,
      rgba(255,220,160,.09) 50px 53px,
      rgba(0,0,0,0) 53px 100px),
    linear-gradient(90deg, rgba(0,0,0,.62), rgba(0,0,0,.2) 62%, rgba(255,220,160,.07));
  border-right: 1px solid rgba(0,0,0,.45);
  box-shadow: 3px 0 10px rgba(0,0,0,.4);
}

.goudrand{
  position: absolute;
  inset: 15px 15px 15px 47px;
  border: 1px solid rgba(233,201,106,.5);
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.16),
    inset 0 0 0 5px rgba(233,201,106,.3);
  pointer-events: none;
}

.kaftfoto{
  position: relative;
  height: 44%;
  aspect-ratio: 4 / 5;
  width: auto;
  overflow: hidden;
  background: #1a1008;
  border: 5px solid #c9a227;
  box-shadow:
    0 12px 28px rgba(0,0,0,.65),
    inset 0 0 0 2px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,240,190,.25);
}
.kaftfoto img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.kafttitel{
  margin: 22px 0 0;
  font-size: clamp(17px, 2.6vw, 30px);
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  background: linear-gradient(180deg, var(--goud-1) 0%, var(--goud-2) 34%, var(--goud-3) 58%, var(--goud-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75));
}

.kaftonder{
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(233,201,106,.62);
}

.kaft.achter{ padding: 30px; }
.kaft.achter .goudrand{ inset: 15px; }
.kaftembleem{
  width: 74px;
  height: 74px;
  border: 1px solid rgba(233,201,106,.55);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.2), inset 0 0 0 5px rgba(233,201,106,.3);
}

/* ---------- hint ---------- */
.hint{
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(240,220,180,.6);
  transition: opacity .5s ease;
  animation: hintPuls 2.8s ease-in-out infinite;
}
.hint.weg{ opacity: 0; animation: none; }
@keyframes hintPuls{ 0%,100%{ opacity:.4 } 50%{ opacity:.95 } }

/* ---------- bediening ---------- */
.bediening{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}
.knop{
  font-family: inherit;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f0dcae;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid rgba(233,201,106,.35);
  background: linear-gradient(180deg, rgba(92,60,30,.9), rgba(48,30,14,.92));
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,180,.18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
}
.knop:hover:not(:disabled){
  transform: translateY(-1px);
  border-color: rgba(233,201,106,.72);
  box-shadow: 0 7px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,180,.32);
}
.knop:active:not(:disabled){ transform: translateY(0); }
.knop:disabled{ opacity: .3; cursor: default; }

.knop.uit{
  opacity: .55;
  border-color: rgba(233,201,106,.18);
  background: linear-gradient(180deg, rgba(40,36,30,.85), rgba(22,20,16,.9));
  box-shadow: 0 2px 8px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,235,180,.08);
}
.knop.uit:hover:not(:disabled){
  opacity: .8;
  border-color: rgba(233,201,106,.4);
}

.knop-home{
  border-color: rgba(233,201,106,.6);
  color: #ffe9b3;
}
.knop-home:not(:disabled){
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,180,.22), 0 0 10px rgba(255,214,106,.22);
}
.knop-home:hover:not(:disabled){
  box-shadow: 0 7px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,180,.32), 0 0 20px rgba(255,214,106,.45);
}

.teller{
  min-width: 200px;
  text-align: center;
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(240,220,180,.72);
}

/* ---------- lightbox ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(10,6,3,.94);
  opacity: 0;
  transition: opacity .28s ease;
}
.lightbox[hidden]{ display: none; }
.lightbox.open{ opacity: 1; }

.lb-figuur{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
}
.lb-figuur img{
  max-width: 88vw;
  max-height: 78vh;
  object-fit: contain;
  border: 6px solid #f6ecd8;
  box-shadow: 0 24px 60px rgba(0,0,0,.8);
  background: #1a1008;
}
.lb-figuur figcaption{
  font-size: 13px;
  font-style: italic;
  letter-spacing: .04em;
  color: rgba(240,220,180,.8);
  text-align: center;
}

.lb-nav, .lb-sluit{
  font-family: inherit;
  color: #f0dcae;
  background: rgba(60,38,18,.7);
  border: 1px solid rgba(233,201,106,.35);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.lb-nav{
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
}
.lb-nav:hover, .lb-sluit:hover{ background: rgba(92,60,30,.9); border-color: rgba(233,201,106,.75); }
.lb-sluit{
  position: absolute;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.noscript{
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  padding: 14px;
  text-align: center;
  color: #f0dcae;
  background: rgba(0,0,0,.7);
}

/* ================= magie ================= */

/* de zwevende sterretjes op de achtergrond */
.sterren{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  perspective: 1100px;
  perspective-origin: 50% 50%;
}

.ster{
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff6d0;
  box-shadow: 0 0 6px 1px rgba(255, 226, 140, .75);
  opacity: 0;
  animation: ster-twinkel var(--duur, 4s) ease-in-out var(--vertraging, 0s) infinite;
}

@keyframes ster-twinkel{
  0%, 100%{ opacity: 0; transform: scale(.5); }
  45%{ opacity: .85; transform: scale(1); }
  60%{ opacity: .35; transform: scale(.8); }
}

/* zachte gloed die de toverstaf volgt */
.gloed{
  position: fixed;
  top: 0;
  left: 0;
  width: 220px;
  height: 220px;
  margin: -110px 0 0 -110px;
  z-index: 45;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle,
    var(--staf-gloed-mid, rgba(255, 236, 168, .22)) 0%,
    var(--staf-gloed-zacht, rgba(255, 214, 106, .08)) 38%,
    rgba(255, 200, 80, 0) 70%);
  mix-blend-mode: screen;
  transition: opacity .5s ease;
  will-change: transform;
}

.gloed.aan{ opacity: 1; }

/* de toverstaf als muisaanwijzer */
html.toverstaf-aan,
html.toverstaf-aan *{ cursor: none !important; }

/* vensters liggen in de top-layer boven de staf: geef de gewone muisaanwijzer terug */
html:has(.login-venster[open]) .toverstaf,
html:has(.winkel-venster[open]) .toverstaf{ opacity: 0 !important; }
html:has(.login-venster[open]),
html:has(.login-venster[open]) *,
html:has(.winkel-venster[open]),
html:has(.winkel-venster[open]) *{ cursor: auto !important; }

.toverstaf{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10060;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  will-change: transform;
}

/* boven een geopend venster wat extra schaduw, zodat hij goed zichtbaar blijft */
html.dialoog-open .toverstaf{
  filter: drop-shadow(0 3px 9px rgba(0, 0, 0, .85)) drop-shadow(0 0 12px rgba(255, 220, 140, .35));
}

.toverstaf.aan{ opacity: 1 !important; }
.toverstaf.spreuk-laden,
.toverstaf.spreuk-groot{
  opacity: 1 !important;
  transition: none;
}

.toverstaf-binnen{
  position: relative;
  animation: staf-wiebel var(--staf-wiebel-duur, 3.4s) ease-in-out infinite;
  transform-origin: 78% 78%;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55));
}

.toverstaf-binnen svg{
  position: relative;
  z-index: 1;
  filter: var(--staf-hout-filter, none);
  transition: filter .45s ease;
}

.spreuk-meter{
  display: none;
  position: absolute;
  z-index: 3;
  left: 10%;
  top: 10%;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: conic-gradient(#fff4bd var(--spreuk-lading, 0%), rgba(255,255,255,.16) 0);
  filter: drop-shadow(0 0 8px rgba(255,225,126,.9));
}
.spreuk-meter::after{
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: #251b13;
}
.toverstaf.spreuk-laden .spreuk-meter{ display: block; }

/* de magische wolk rond de punt: hoe duurder de staf, hoe sterker */
.toverstaf-binnen::after{
  content: '';
  position: absolute;
  left: 10%;
  top: 10%;
  width: calc(64px * var(--staf-aura-schaal, 0));
  height: calc(64px * var(--staf-aura-schaal, 0));
  margin: calc(-32px * var(--staf-aura-schaal, 0)) 0 0 calc(-32px * var(--staf-aura-schaal, 0));
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--staf-aura-kleur, rgba(255, 246, 208, .9)) 0%,
    rgba(255, 255, 255, 0) 68%);
  opacity: var(--staf-aura, 0);
  pointer-events: none;
  animation: staf-aura-puls var(--staf-aura-duur, 2.8s) ease-in-out infinite;
}

@keyframes staf-aura-puls{
  0%, 100%{ transform: scale(.82); opacity: calc(var(--staf-aura, 0) * .6); }
  50%{ transform: scale(1.12); opacity: var(--staf-aura, 0); }
}

@keyframes staf-wiebel{
  0%, 100%{ transform: rotate(-2.5deg) translateY(0); }
  50%{ transform: rotate(2.5deg) translateY(-2px); }
}

/* elke stok beweegt anders: de animatiekeuze van de staf bepaalt welke
   keyframes op de cursorstaf worden gezet. */
html[data-staf-animatie="zweef"] .toverstaf-binnen{
  animation-name: staf-zweef;
}

@keyframes staf-zweef{
  0%, 100%{ transform: rotate(-1.6deg) translateY(0); }
  50%{ transform: rotate(1.6deg) translateY(-5px); }
}

html[data-staf-animatie="zwaai"] .toverstaf-binnen{
  animation-name: staf-zwaai;
}

@keyframes staf-zwaai{
  0%, 100%{ transform: rotate(-5deg) translateY(0); }
  50%{ transform: rotate(5deg) translateY(-3px); }
}

html[data-staf-animatie="tril"] .toverstaf-binnen{
  animation-name: staf-tril;
  animation-timing-function: linear;
}

@keyframes staf-tril{
  0%{ transform: rotate(-1.4deg) translate(-1px, 0); }
  25%{ transform: rotate(1.4deg) translate(1px, -1px); }
  50%{ transform: rotate(-1.2deg) translate(-1px, 1px); }
  75%{ transform: rotate(1.2deg) translate(1px, 0); }
  100%{ transform: rotate(-1.4deg) translate(-1px, 0); }
}

html[data-staf-animatie="puls"] .toverstaf-binnen{
  animation-name: staf-puls;
}

@keyframes staf-puls{
  0%, 100%{ transform: rotate(-2deg) scale(1); }
  50%{ transform: rotate(2deg) scale(1.07); }
}

html[data-staf-animatie="draai"] .toverstaf-binnen{
  animation-name: staf-draai;
}

@keyframes staf-draai{
  0%{ transform: rotate(-3deg) translateY(0); }
  50%{ transform: rotate(3deg) translateY(-4px); }
  100%{ transform: rotate(-3deg) translateY(0); }
}

/* de aura ademt mee met de beweging van de staf */
html[data-staf-animatie="tril"] .toverstaf-binnen::after{
  animation-name: staf-aura-tril;
}

@keyframes staf-aura-tril{
  0%, 100%{ transform: scale(.9); opacity: calc(var(--staf-aura, 0) * .7); }
  50%{ transform: scale(1.18); opacity: var(--staf-aura, 0); }
}

html[data-staf-animatie="puls"] .toverstaf-binnen::after{
  animation-duration: calc(var(--staf-aura-duur, 2.8s) * .6);
}

.toverstaf.flitsen .toverstaf-binnen{
  filter: drop-shadow(0 0 22px rgba(255, 246, 208, 1)) drop-shadow(0 0 40px rgba(255, 214, 106, .85)) drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}

/* de twinkels rond de toverstaf */
.toverstof{
  position: fixed;
  inset: 0;
  z-index: 46;
  pointer-events: none;
  overflow: hidden;
}

.twinkel{
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: radial-gradient(circle, #fffdf2 0%, #ffe9a4 45%, rgba(255, 214, 106, 0) 72%);
  border-radius: 50%;
  animation: twinkel-op var(--leven, 900ms) ease-out forwards;
}

.twinkel::before,
.twinkel::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 44%, rgba(255, 253, 240, .95) 50%, transparent 56%);
}

.twinkel::after{ transform: rotate(90deg); }

@keyframes twinkel-op{
  0%{ opacity: 0; transform: translate(0, 0) scale(.2) rotate(0deg); }
  25%{ opacity: 1; transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) scale(1) rotate(45deg); }
  100%{ opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.15) rotate(140deg); }
}

/* het sterrenstof dat de toverstaf achterlaat */
.stofspoor{
  position: fixed;
  inset: 0;
  z-index: 47;
  pointer-events: none;
  overflow: hidden;
}

.stofje{
  position: absolute;
  color: #fff0b0;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "Arial Unicode MS", sans-serif;
  font-size: var(--ster-maat, 18px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 3px #fff, 0 0 8px #ffe28a, 0 0 16px rgba(255, 194, 73, .95);
  animation: stofje-weg var(--leven, 2400ms) ease-out forwards;
}

.stofje.roze{
  color: #ffd5f3;
  text-shadow: 0 0 3px #fff, 0 0 9px #ff9de0, 0 0 17px rgba(255, 92, 201, .95);
}

.stofje.blauw{
  color: #d5f4ff;
  text-shadow: 0 0 3px #fff, 0 0 9px #83e5ff, 0 0 17px rgba(46, 190, 255, .95);
}

.stofje.paars{
  color: #f0e4ff;
  text-shadow: 0 0 3px #fff, 0 0 9px #d8bdff, 0 0 17px rgba(169, 124, 255, .95);
}

.stofje.mint{
  color: #d6ffe9;
  text-shadow: 0 0 3px #fff, 0 0 9px #91ffd0, 0 0 17px rgba(62, 226, 157, .95);
}

.stofje.rood{
  color: #ffe0c7;
  text-shadow: 0 0 3px #fff, 0 0 9px #ffb075, 0 0 17px rgba(255, 120, 74, .95);
}

@keyframes stofje-weg{
  0%{ opacity: 0; transform: translate(0, 0) scale(.15) rotate(0deg); }
  12%{ opacity: 1; transform: translate(calc(var(--dx) * .08), calc(var(--dy) * .08)) scale(1.2) rotate(35deg); }
  24%{ opacity: .72; transform: translate(calc(var(--dx) * .22), calc(var(--dy) * .22)) scale(.78) rotate(72deg); }
  38%{ opacity: 1; transform: translate(calc(var(--dx) * .38), calc(var(--dy) * .38)) scale(1.05) rotate(112deg); }
  100%{ opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.12) rotate(250deg); }
}

/* de flits aan de punt van de toverstaf bij een klik */
.staf-flits{
  position: absolute;
  left: 10%;
  top: 10%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #ffffff 0%, #fff3c4 30%, rgba(255, 214, 106, .55) 55%, rgba(255, 200, 80, 0) 78%);
  transform: scale(.3);
}

.staf-flits.flits{
  animation: staf-flits-op .62s ease-out;
}

@keyframes staf-flits-op{
  0%{ opacity: 0; transform: scale(calc(.3 * var(--flits-schaal, 1))); }
  14%{ opacity: 1; transform: scale(calc(1.5 * var(--flits-schaal, 1))); }
  45%{ opacity: .7; transform: scale(calc(1.05 * var(--flits-schaal, 1))); }
  100%{ opacity: 0; transform: scale(calc(2.1 * var(--flits-schaal, 1))); }
}

/* het elfje */
.elf-huis{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 55;
  pointer-events: none;
  overflow: visible;
  transition: top .58s cubic-bezier(.22, .75, .25, 1), left .24s ease-out;
}

.elf-huis.klimbeweging{ transition: none; }

.elf{
  position: relative;
  transform: translateX(var(--in-x, -46px)) rotate(var(--kantel, -5deg));
  opacity: 0;
  transition: transform .85s cubic-bezier(.22, 1.1, .36, 1), opacity .5s ease;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
}

.elf.zichtbaar{
  transform: translateX(0) rotate(var(--kantel, -5deg));
  opacity: 1;
}

.elf.zichtbaar[role="button"]{ cursor: pointer; }
.elf.zichtbaar:focus-visible{
  outline: 2px solid rgba(255, 227, 145, .9);
  outline-offset: 5px;
  border-radius: 45%;
}

.elf.spiegelt{ --in-x: 46px; --spiegel: -1; }

.elf.oplossen{
  cursor: default;
  animation: elf-verdwijn 1.3s cubic-bezier(.35, 0, .65, 1) forwards;
}

.elf.oplossen .elf-lijf{ animation: elf-verklein 1.3s ease-in forwards; }
.elf.oplossen .elf-praat{ opacity: 0; transition: opacity .18s ease; }

@keyframes elf-verdwijn{
  0%{ opacity: 1; filter: drop-shadow(0 0 0 rgba(255, 226, 147, 0)); transform: translateX(0) rotate(var(--kantel, -5deg)) scale(1); }
  28%{ opacity: 1; filter: drop-shadow(0 0 18px rgba(255, 221, 133, .95)); transform: translateX(0) rotate(calc(var(--kantel, -5deg) - 7deg)) scale(1.08); }
  100%{ opacity: 0; filter: drop-shadow(0 0 34px rgba(218, 183, 255, .9)); transform: translateX(0) rotate(calc(var(--kantel, -5deg) + 18deg)) scale(.08); }
}

@keyframes elf-verklein{
  0%{ transform: translateY(0) scale(1); }
  35%{ transform: translateY(-9px) scale(1.08); }
  100%{ transform: translateY(-18px) scale(.35); }
}

.elf-toverflits{
  position: absolute;
  z-index: 2;
  left: 14px;
  top: 8px;
  width: 105px;
  height: 132px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 250, 218, .84) 0%, rgba(255, 224, 138, .42) 24%, rgba(202, 166, 255, .19) 48%, transparent 72%);
  filter: blur(2px);
  animation: elf-toverflits 1.25s ease-out forwards;
}

.elf-toverflits::before,
.elf-toverflits::after{
  content: "✦  ✧  ✦";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff5c8;
  font-size: 23px;
  letter-spacing: 8px;
  text-shadow: 0 0 6px #fff, 0 0 14px #ffd86e, 0 0 24px #b18aff;
  animation: elf-sterrenwolk 1.2s ease-out forwards;
}

.elf-toverflits::after{
  content: "✧  ✦  ✧";
  color: #dff8ff;
  font-size: 17px;
  animation-delay: .12s;
}

.elf-spreuk{
  position: absolute;
  left: 50%;
  top: -28px;
  width: max-content;
  padding: 5px 10px;
  border: 1px solid rgba(255, 231, 160, .6);
  border-radius: 999px;
  color: #fff4cb;
  background: rgba(36, 22, 48, .78);
  font: italic 12px Georgia, "Times New Roman", serif;
  text-shadow: 0 0 8px #e8bdff;
  box-shadow: 0 0 15px rgba(207, 169, 255, .48);
  transform: translateX(-50%);
  animation: elf-spreuk 1.25s ease-out forwards;
}

@keyframes elf-toverflits{
  0%{ opacity: 0; transform: scale(.3) rotate(-12deg); }
  22%{ opacity: 1; transform: scale(1.1) rotate(8deg); }
  100%{ opacity: 0; transform: scale(1.7) rotate(32deg); }
}

@keyframes elf-sterrenwolk{
  0%{ opacity: 0; transform: scale(.5) rotate(-15deg); }
  28%{ opacity: 1; transform: scale(1.15) rotate(8deg); }
  100%{ opacity: 0; transform: scale(1.8) rotate(35deg); }
}

@keyframes elf-spreuk{
  0%{ opacity: 0; transform: translate(-50%, 8px) scale(.7); }
  18%{ opacity: 1; transform: translate(-50%, 0) scale(1); }
  72%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%, -18px) scale(.94); }
}

.elf-beeld{
  display: block;
  transform-origin: 50% 50%;
  transform: scaleX(var(--spiegel, 1));
  transition: transform .6s cubic-bezier(.22, 1.1, .36, 1);
}

.elf-beeld-bestaand{ display: none; }
.elf-profiel{ width: 112px; height: 151px; }

.elf-lijf{
  animation: elf-dein 3.1s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 82px 164px;
}

@keyframes elf-dein{
  0%, 100%{ transform: translateY(1px) rotate(-1deg); }
  50%{ transform: translateY(-3px) rotate(1.5deg); }
}

.elf-ogen{ animation: elf-knipper 5.2s ease-in-out infinite; transform-box: view-box; transform-origin: 80px 74px; }

@keyframes elf-knipper{
  0%, 92%, 100%{ transform: scaleY(1); }
  95%{ transform: scaleY(.08); }
}

.elf-arm,
.elf-arm-links,
.elf-arm-onder,
.elf-been-onder{
  transform-box: view-box;
}

.elf-arm{ transform-origin: 98px 117px; }
.elf-arm-links{ transform-origin: 78px 119px; }
.elf-elleboog-links{ transform-origin: 80px 136px; }
.elf-elleboog-rechts{ transform-origin: 102px 137px; }
.elf-knie-links{ transform-origin: 99px 170px; }
.elf-knie-rechts{ transform-origin: 75px 171px; }

.elf-arm{
  animation: elf-zwaai 2.2s ease-in-out infinite;
}

@keyframes elf-zwaai{
  0%, 100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-13deg); }
}

.elf-arm-links{ animation: elf-zwaai-links 2.2s ease-in-out infinite; }

@keyframes elf-zwaai-links{
  0%, 100%{ transform: rotate(2deg); }
  50%{ transform: rotate(-4deg); }
}

.elf-been-links,
.elf-been-rechts{ animation: elf-been-dein 2.2s ease-in-out infinite; }
.elf-been-rechts{ animation-delay: -1.1s; }

@keyframes elf-been-dein{
  0%, 100%{ transform: rotate(-2deg); }
  50%{ transform: rotate(8deg); }
}

.elf-vleugel{
  transform-box: view-box;
  transform-origin: 78px 121px;
}
.elf-vleugel-achter{ animation: elf-vleugel-fladder 1.05s ease-in-out infinite alternate; }
.elf-vleugel-voor{ animation: elf-vleugel-fladder 1.05s ease-in-out -.22s infinite alternate-reverse; }

@keyframes elf-vleugel-fladder{
  0%{ transform: rotate(-8deg) scaleY(.94); }
  100%{ transform: rotate(9deg) scaleY(1.04); }
}

.elf-haar{
  transform-box: view-box;
  transform-origin: 75px 54px;
  animation: elf-haar-dein 3.8s ease-in-out infinite;
}

@keyframes elf-haar-dein{
  0%, 100%{ transform: rotate(0deg); }
  50%{ transform: rotate(-2deg); }
}

.elf-bloem{
  transform-box: view-box;
  transform-origin: 69px 43px;
  animation: elf-bloem-glans 2.6s ease-in-out infinite;
}

@keyframes elf-bloem-glans{
  0%, 100%{ transform: scale(1); filter: brightness(1); }
  50%{ transform: scale(1.08); filter: brightness(1.18); }
}

/* De ledematen en de verplaatsing in script.js delen dezelfde klimfasen. */
.elf.klimt .elf-lijf{ animation: elf-klim 1.65s cubic-bezier(.45, 0, .55, 1) infinite; }

@keyframes elf-klim{
  0%, 16%{ transform: translateY(2px) rotate(-2deg) scale(1, 1); }
  28%{ transform: translateY(5px) rotate(-4deg) scale(1.01, .98); }
  38%{ transform: translateY(4px) rotate(-3deg) scale(.99, 1.02); }
  52%{ transform: translateY(-4px) rotate(3deg) scale(.99, 1.03); }
  62%{ transform: translateY(-3px) rotate(2deg) scale(1.01, .99); }
  78%{ transform: translateY(1px) rotate(-1deg) scale(1, 1); }
  100%{ transform: translateY(2px) rotate(-2deg) scale(1, 1); }
}

.elf.klimt .elf-arm{ animation: elf-grijp-rechts 1.65s linear infinite; }

@keyframes elf-grijp-rechts{
  0%, 16%{ transform: rotate(-2deg); }
  38%{ transform: rotate(-66deg); }
  52%{ transform: rotate(-82deg); }
  62%{ transform: rotate(-70deg); }
  78%{ transform: rotate(-28deg); }
  100%{ transform: rotate(-2deg); }
}

.elf.klimt .elf-elleboog-rechts{ animation: elf-elleboog-trek 1.65s linear infinite; }

@keyframes elf-elleboog-trek{
  0%, 16%{ transform: rotate(4deg); }
  38%{ transform: rotate(28deg); }
  52%{ transform: rotate(42deg); }
  62%{ transform: rotate(26deg); }
  78%{ transform: rotate(12deg); }
  100%{ transform: rotate(4deg); }
}

.elf.klimt .elf-arm-links{ animation: elf-grijp-links 1.65s linear infinite; }

@keyframes elf-grijp-links{
  0%, 16%{ transform: rotate(2deg); }
  24%{ transform: rotate(-58deg); }
  38%{ transform: rotate(-82deg); }
  52%{ transform: rotate(-68deg); }
  62%{ transform: rotate(-38deg); }
  78%{ transform: rotate(-8deg); }
  100%{ transform: rotate(2deg); }
}

.elf.klimt .elf-elleboog-links{ animation: elf-elleboog-steun 1.65s linear infinite; }

@keyframes elf-elleboog-steun{
  0%, 16%{ transform: rotate(0deg); }
  24%{ transform: rotate(18deg); }
  38%{ transform: rotate(32deg); }
  52%{ transform: rotate(20deg); }
  62%{ transform: rotate(10deg); }
  78%{ transform: rotate(4deg); }
  100%{ transform: rotate(0deg); }
}

.elf-been-links,
.elf-been-rechts{
  transform-box: view-box;
}

.elf-been-links{ transform-origin: 89px 152px; }
.elf-been-rechts{ transform-origin: 76px 151px; }

.elf.klimt .elf-been-links{ animation: elf-trap-links 1.65s linear infinite; }
.elf.klimt .elf-been-rechts{ animation: elf-trap-rechts 1.65s linear -.825s infinite; }

@keyframes elf-trap-links{
  0%, 16%{ transform: rotate(-8deg); }
  24%{ transform: rotate(2deg); }
  38%{ transform: rotate(14deg); }
  52%{ transform: rotate(20deg); }
  62%{ transform: rotate(12deg); }
  78%{ transform: rotate(-4deg); }
  100%{ transform: rotate(-8deg); }
}

@keyframes elf-trap-rechts{
  0%, 16%{ transform: rotate(8deg); }
  24%{ transform: rotate(-2deg); }
  38%{ transform: rotate(-14deg); }
  52%{ transform: rotate(-20deg); }
  62%{ transform: rotate(-12deg); }
  78%{ transform: rotate(4deg); }
  100%{ transform: rotate(8deg); }
}

.elf.klimt .elf-knie-links{ animation: elf-knie-buig 1.65s linear infinite; }
.elf.klimt .elf-knie-rechts{ animation: elf-knie-buig 1.65s linear -.825s infinite; }

@keyframes elf-knie-buig{
  0%, 16%{ transform: rotate(4deg); }
  24%{ transform: rotate(8deg); }
  38%{ transform: rotate(18deg); }
  52%{ transform: rotate(24deg); }
  62%{ transform: rotate(18deg); }
  78%{ transform: rotate(8deg); }
  100%{ transform: rotate(4deg); }
}

.elf.daalt .elf-lijf,
.elf.daalt .elf-arm,
.elf.daalt .elf-elleboog-rechts,
.elf.daalt .elf-arm-links,
.elf.daalt .elf-elleboog-links,
.elf.daalt .elf-been-links,
.elf.daalt .elf-been-rechts,
.elf.daalt .elf-knie-links,
.elf.daalt .elf-knie-rechts{ animation-direction: reverse; }

/* over de rand trekken: van klimhouding naar rechtop staan */
.elf.bovenop .elf-lijf{ animation: elf-bovenop-trek 1.45s cubic-bezier(.3, .1, .2, 1) forwards; }
.elf.bovenop .elf-arm{ animation: elf-bovenop-armen 1.45s cubic-bezier(.3, .1, .2, 1) forwards; }
.elf.bovenop .elf-arm-links{ animation: elf-bovenop-arm-links 1.45s cubic-bezier(.3, .1, .2, 1) forwards; }
.elf.bovenop .elf-elleboog-rechts{ animation: elf-bovenop-ellebogen 1.45s cubic-bezier(.3, .1, .2, 1) forwards; }
.elf.bovenop .elf-elleboog-links{ animation: elf-bovenop-elleboog-links 1.45s cubic-bezier(.3, .1, .2, 1) forwards; }
.elf.bovenop .elf-been-links,
.elf.bovenop .elf-been-rechts{ animation: elf-bovenop-benen 1.45s cubic-bezier(.3, .1, .2, 1) forwards; }
.elf.bovenop .elf-knie-links,
.elf.bovenop .elf-knie-rechts{ animation: elf-bovenop-knieen 1.45s cubic-bezier(.3, .1, .2, 1) forwards; }

@keyframes elf-bovenop-trek{
  0%{ transform: translateY(5px) rotate(-8deg) scale(1, .96); }
  18%{ transform: translateY(10px) rotate(-12deg) scale(1.04, .93); }
  46%{ transform: translateY(-3px) rotate(14deg) scale(.96, 1.08); }
  68%{ transform: translateY(-7px) rotate(30deg) scale(.95, 1.06); }
  84%{ transform: translateY(-2px) rotate(16deg) scale(1.03, .97); }
  100%{ transform: translateY(0) rotate(0deg) scale(1, 1); }
}

@keyframes elf-bovenop-armen{
  0%, 34%{ transform: rotate(-22deg); }
  56%{ transform: rotate(-10deg); }
  78%{ transform: rotate(12deg); }
  100%{ transform: rotate(0deg); }
}

@keyframes elf-bovenop-ellebogen{
  0%, 34%{ transform: rotate(20deg); }
  60%{ transform: rotate(40deg); }
  82%{ transform: rotate(12deg); }
  100%{ transform: rotate(0deg); }
}

@keyframes elf-bovenop-arm-links{
  0%, 34%{ transform: rotate(0deg); }
  56%{ transform: rotate(14deg); }
  78%{ transform: rotate(8deg); }
  100%{ transform: rotate(0deg); }
}

@keyframes elf-bovenop-elleboog-links{
  0%, 34%{ transform: rotate(-100deg); }
  60%{ transform: rotate(-118deg); }
  82%{ transform: rotate(-80deg); }
  100%{ transform: rotate(0deg); }
}

@keyframes elf-bovenop-benen{
  0%, 25%{ transform: rotate(4deg); }
  52%{ transform: rotate(-36deg) translateY(-5px); }
  72%{ transform: rotate(-18deg) translateY(-2px); }
  100%{ transform: rotate(0deg); }
}

@keyframes elf-bovenop-knieen{
  0%{ transform: rotate(0deg); }
  50%{ transform: rotate(36deg); }
  76%{ transform: rotate(18deg); }
  100%{ transform: rotate(0deg); }
}

/* lopen over de bovenrand van het boek — echte wandelcyclus, synchroon met de JS-passen */
.elf.loopt .elf-lijf{ animation: elf-loop-stuiter 1.08s ease-in-out infinite; }
.elf.loopt .elf-arm{ animation: elf-loop-arm 1.08s ease-in-out -.54s infinite; }
.elf.loopt .elf-arm-links{ animation: elf-loop-arm 1.08s ease-in-out infinite; }
.elf.loopt .elf-elleboog-rechts{ animation: elf-loop-elleboog 1.08s ease-in-out -.54s infinite; }
.elf.loopt .elf-elleboog-links{ animation: elf-loop-elleboog 1.08s ease-in-out infinite; }
.elf.loopt .elf-been-links{ animation: elf-loop-been-links 1.08s linear infinite; }
.elf.loopt .elf-been-rechts{ animation: elf-loop-been-links 1.08s linear -.54s infinite; }
.elf.loopt .elf-knie-links{ animation: elf-loop-knie-links 1.08s linear infinite; }
.elf.loopt .elf-knie-rechts{ animation: elf-loop-knie-links 1.08s linear -.54s infinite; }
.elf.loopt .elf-schaduw{ animation: elf-loop-schaduw 1.08s ease-in-out infinite; }

@keyframes elf-loop-stuiter{
  0%, 100%{ transform: translateY(0) rotate(1deg) scale(1, 1); }
  25%{ transform: translateY(-2px) rotate(2deg) scale(.98, 1.025); }
  50%{ transform: translateY(0) rotate(0deg) scale(1, 1); }
  75%{ transform: translateY(-2px) rotate(-1deg) scale(.98, 1.025); }
}

@keyframes elf-loop-arm{
  0%, 100%{ transform: rotate(-8deg); }
  50%{ transform: rotate(12deg); }
}

@keyframes elf-loop-elleboog{
  0%, 100%{ transform: rotate(8deg); }
  50%{ transform: rotate(24deg); }
}

@keyframes elf-loop-been-links{
  0%, 100%{ transform: rotate(-12deg); }
  18%{ transform: rotate(-3deg); }
  38%{ transform: rotate(13deg); }
  50%{ transform: rotate(17deg); }
  70%{ transform: rotate(3deg); }
  88%{ transform: rotate(-11deg); }
}

@keyframes elf-loop-knie-links{
  0%, 100%{ transform: rotate(5deg); }
  18%{ transform: rotate(19deg); }
  38%{ transform: rotate(14deg); }
  50%{ transform: rotate(5deg); }
  70%{ transform: rotate(19deg); }
  88%{ transform: rotate(7deg); }
}

@keyframes elf-loop-schaduw{
  0%, 50%, 100%{ opacity: .38; transform: scaleX(1); }
  25%, 75%{ opacity: .18; transform: scaleX(.78); }
}

.elf.rand .elf-lijf{ animation: elf-rand-draaien 1.45s ease-in-out forwards; }
.elf.rand .elf-arm{ animation: elf-rand-grijp 1.45s ease-in-out forwards; }
.elf.rand .elf-arm-links{ animation: elf-rand-steun 1.45s ease-in-out forwards; }

@keyframes elf-rand-draaien{
  0%, 100%{ transform: rotate(0deg); }
  40%{ transform: rotate(-7deg) translateY(2px); }
  72%{ transform: rotate(4deg) translateY(-1px); }
}

@keyframes elf-rand-grijp{
  0%, 100%{ transform: rotate(0deg); }
  48%{ transform: rotate(-78deg); }
  76%{ transform: rotate(-24deg); }
}

@keyframes elf-rand-steun{
  0%, 100%{ transform: rotate(0deg); }
  48%{ transform: rotate(-62deg); }
  76%{ transform: rotate(-18deg); }
}

.elf.hangt .elf-beeld{ transform: rotate(180deg) scaleX(var(--spiegel, 1)); }

.elf.hangt .elf-praat{
  bottom: auto;
  top: calc(100% - 6px);
}

.elf.hangt .elf-praat::after{
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #ecdcb8;
}

.elf.schrikt .elf-beeld{ transform: translateY(-7px) rotate(-5deg) scaleX(var(--spiegel, 1)); }

.elf-praat{
  position: absolute;
  left: 50%;
  bottom: calc(100% - 6px);
  transform: translate(-50%, 8px) scale(.85);
  transform-origin: 50% 100%;
  width: max-content;
  max-width: 210px;
  padding: 9px 13px;
  border-radius: 12px;
  border: 1px solid rgba(233, 201, 106, .55);
  background: linear-gradient(180deg, #fdf6e4, #ecdcb8);
  color: #4a3a26;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 13px;
  line-height: 1.35;
  text-align: center;
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1.1, .36, 1);
}

.elf-praat::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  margin-left: -7px;
  border: 7px solid transparent;
  border-top-color: #ecdcb8;
}

.elf-praat.zegt{
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* ---------- smalle schermen ---------- */
@media (max-width: 760px){
  .beheer{
    top: 8px;
    right: 8px;
    gap: 6px;
    font-size: 11px;
  }
  .beheer-knop{ padding: 8px 11px; }
  .scorebord{ top: 8px; padding: 5px 14px; gap: 6px; }
  .score-getal{ font-size: 15px; }
  .score-spreuk{ flex-basis: 100%; max-width: calc(100vw - 40px); font-size: 10px; }
  #beheer-status{ max-width: 185px; }
  .podium{ padding: 0 8px; gap: 12px; }
  .bediening{ gap: 10px; }
  .knop{ padding: 9px 14px; font-size: 11px; }
  .teller{ min-width: 0; font-size: 10.5px; }
  .lb-nav{ width: 42px; height: 42px; font-size: 22px; }
  .elf-beeld{ width: 96px; height: 120px; }
  .elf-praat{ max-width: 150px; font-size: 11.5px; padding: 7px 10px; }
  .toverstaf-binnen svg{ width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: reduce){
  .boek, .blad{ transition-duration: .01ms; }
  .blad{ filter: none; }
  .vlak{ filter: none; }
  .blad.flip:not(.sleep){ animation: none; }
  .blad.flip .vlak::before,
  .blad.flip .vlak::after{ animation: none; transition: none; opacity: 0; }
  .hint{ animation: none; }
  .ster, .toverstaf-binnen{ animation: none; }
  .twinkel, .stofje, .staf-flits{ animation-duration: .9s; }
  .twinkel, .stofje{ animation-iteration-count: 1; }
  .gloed{ display: none; }
}

/* ==========================================================
   extra magie — nachthemel, nevel, maan, vuurvliegjes en gouden glans
   ========================================================== */

/* diepere, magische nachthemel */
.achtergrond{
  background:
    radial-gradient(60% 45% at 18% 12%, rgba(88, 56, 140, .28), rgba(88, 56, 140, 0) 70%),
    radial-gradient(55% 40% at 85% 85%, rgba(30, 70, 110, .26), rgba(30, 70, 110, 0) 70%),
    radial-gradient(45% 35% at 50% 58%, rgba(255, 196, 110, .10), rgba(255, 196, 110, 0) 70%),
    radial-gradient(125% 95% at 50% -5%, #2e2236 0%, #170f12 52%, #070406 100%);
}
.achtergrond::before{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.6) 100%);
}

/* drijvende nevelwolken */
.nevel{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nevel-wolk{
  position: absolute;
  width: 70vmax;
  height: 40vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  mix-blend-mode: screen;
  animation: nevel-drijf 46s ease-in-out infinite alternate;
}
.nevel-wolk.w1{ left: -20vmax; top: -12vmax; background: radial-gradient(closest-side, rgba(150, 100, 210, .55), rgba(150, 100, 210, 0)); }
.nevel-wolk.w2{ right: -25vmax; bottom: -15vmax; background: radial-gradient(closest-side, rgba(70, 140, 190, .45), rgba(70, 140, 190, 0)); animation-duration: 58s; animation-delay: -20s; }
.nevel-wolk.w3{ left: 25vw; top: 40vh; width: 50vmax; height: 26vmax; background: radial-gradient(closest-side, rgba(255, 190, 120, .28), rgba(255, 190, 120, 0)); animation-duration: 64s; animation-delay: -35s; opacity: .25; }
@keyframes nevel-drijf{
  0%  { transform: translate(0, 0) scale(1) rotate(0deg); }
  50% { transform: translate(6vw, 3vh) scale(1.12) rotate(6deg); }
  100%{ transform: translate(-4vw, 5vh) scale(.95) rotate(-4deg); }
}

/* mooie volle maan helemaal linksboven, met kraters en zachte gloed */
:root{ --maan-maat: clamp(74px, 8.5vw, 128px); }
@property --maan-helderheid{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
.maan{
  position: fixed;
  top: max(14px, 2.4vh);
  left: max(14px, 2.4vw);
  width: var(--maan-maat);
  aspect-ratio: 1;
  z-index: 0;
  appearance: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: .94;
  filter: brightness(var(--maan-helderheid, 1));
  transition: transform .6s ease;
  animation: maan-gloed 9s ease-in-out infinite;
}
.maan::before{
  content: '';
  position: absolute;
  inset: -38%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 214, .34), rgba(255, 246, 214, 0) 70%);
  pointer-events: none;
}
.maan::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-image: var(--ruis);
  opacity: .12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.maan-beeld{ display: block; width: 100%; height: 100%; }

/* het oppervlak draait heel langzaam mee, alsof de maan rondtolt */
.maan-kraters{
  transform-box: view-box;
  transform-origin: 50px 50px;
  animation: maan-draai 260s linear infinite;
}
@keyframes maan-draai{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

/* en de maan wordt af en toe wat donkerder en dan weer wat lichter */
.maan-beeld{ animation: maan-dwaal 19s ease-in-out infinite, maan-leven 34s ease-in-out infinite; }
@keyframes maan-leven{
  0%, 100%{ filter: brightness(.86) saturate(.96); }
  32%{ filter: brightness(1.08) saturate(1.06); }
  54%{ filter: brightness(1.02) saturate(1.01); }
  76%{ filter: brightness(.93) saturate(.98); }
}

/* de maan dwaalt af en toe een stukje, met een magische glinstering en sterretjes */
.maan-beeld,
.maan::before{ animation: maan-dwaal 19s ease-in-out infinite; }
@keyframes maan-dwaal{
  0%, 50%{ transform: translate(0, 0) rotate(0deg) scale(1); }
  59%{ transform: translate(4px, -6px) rotate(-2.4deg) scale(1.03); }
  67%{ transform: translate(-3px, -8px) rotate(1.8deg) scale(1.05); }
  75%{ transform: translate(3px, -4px) rotate(-1.2deg) scale(1.02); }
  83%, 100%{ transform: translate(0, 0) rotate(0deg) scale(1); }
}
.maan-schijn{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,250,226,.55) 50%, rgba(255,255,255,0) 60%);
  opacity: 0;
  animation: maan-schijn 13s ease-in-out infinite;
}
@keyframes maan-schijn{
  0%, 44%{ opacity: 0; transform: translateX(-42%); }
  56%{ opacity: .95; }
  70%{ opacity: 0; transform: translateX(42%); }
  100%{ opacity: 0; transform: translateX(42%); }
}
.maan-ster{
  position: absolute;
  color: #fff8dd;
  text-shadow: 0 0 8px #ffd76e, 0 0 18px rgba(255, 208, 110, .8), 0 0 30px rgba(200, 170, 255, .5);
  pointer-events: none;
  opacity: 0;
  animation: maan-ster 11s ease-in-out infinite;
}
.maan-ster.m1{ left: -8%; top: 16%; font-size: 15px; animation-delay: .6s; }
.maan-ster.m2{ right: -6%; top: 32%; font-size: 12px; animation-delay: 3.4s; }
.maan-ster.m3{ left: 10%; bottom: -8%; font-size: 13px; animation-delay: 6.2s; }
.maan-ster.m4{ right: 12%; top: -9%; font-size: 11px; animation-delay: 8.6s; }
@keyframes maan-ster{
  0%, 74%, 100%{ opacity: 0; transform: scale(.6) rotate(0deg); }
  80%{ opacity: 1; transform: scale(1.25) rotate(40deg); }
  88%{ opacity: .35; transform: scale(.9) rotate(80deg); }
}
.maan.puls .maan-beeld{ animation: maan-puls .55s ease; }
@keyframes maan-puls{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.09); }
  100%{ transform: scale(1); }
}
.maan:hover{ transform: scale(1.04); }
.maan:focus-visible{
  outline: 2px solid #fff6d0;
  outline-offset: 6px;
}
.easteregg-punten{
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #fff4bd;
  background: rgba(12, 8, 24, .58);
  font: 900 clamp(3rem, 11vw, 9rem)/1 Georgia, serif;
  text-align: center;
  text-shadow: 0 0 16px #f6d46e, 0 0 42px #f6d46e, 0 4px 12px #000;
  pointer-events: none;
  animation: easteregg-punten 3.2s ease both;
}
.easteregg-punten[hidden]{ display: none; }
@keyframes easteregg-punten{
  0%{ opacity: 0; transform: scale(.55); }
  12%, 78%{ opacity: 1; transform: scale(1); }
  100%{ opacity: 0; transform: scale(1.08); }
}
@keyframes maan-gloed{
  0%, 100%{ box-shadow: 0 0 26px 4px rgba(255,240,200,.22), 0 0 100px 30px rgba(200,180,255,.10); }
  50%     { box-shadow: 0 0 44px 10px rgba(255,240,200,.34), 0 0 150px 52px rgba(200,180,255,.15); }
}

/* gekleurde twinkelsterren */
.ster:nth-child(3n){ background: #e6ddff; box-shadow: 0 0 7px 1px rgba(190, 170, 255, .8); }
.ster:nth-child(5n){ background: #d8f2ff; box-shadow: 0 0 7px 1px rgba(150, 210, 255, .8); }

/* vallende sterren */
.vallende-ster{
  position: absolute;
  width: 140px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,246,208,0), rgba(255,246,208,.95));
  filter: drop-shadow(0 0 6px rgba(255, 226, 140, .9));
  transform: rotate(-35deg) translateX(0);
  transform-origin: right center;
  opacity: 0;
  animation: vallen 1.6s ease-out forwards;
}
@keyframes vallen{
  0%  { opacity: 0; transform: rotate(-35deg) translateX(0); }
  15% { opacity: 1; }
  100%{ opacity: 0; transform: rotate(-35deg) translateX(-420px); }
}

/* heks op een bezemsteel die soepel voorbij vliegt. Ze bestaat uit drie lagen
   op verschillende diepte (mantel achter, lichaam midden, bezem voor). */
.heks{
  position: absolute;
  width: 170px;
  height: 128px;
  margin: -64px 0 0 -85px;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 8px rgba(150, 255, 120, .22)) drop-shadow(0 0 16px rgba(120, 40, 200, .25)) drop-shadow(0 8px 10px rgba(0, 0, 0, .7));
  animation-duration: var(--heks-duur, 14s);
  animation-timing-function: linear;
  animation-delay: var(--heks-vertraging, 0s);
  animation-fill-mode: forwards;
}

/* giftig groen nevelspoor dat achter haar aan blijft hangen */
.heks-spoor{
  position: absolute;
  top: 50%;
  right: 70%;
  width: 240px;
  height: 56px;
  margin-top: -28px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120,255,60,.35), rgba(110,30,180,.22) 48%, transparent 76%);
  filter: blur(9px);
  pointer-events: none;
  animation: heks-spoor-puls calc(var(--heks-duur, 14s) / 5) ease-in-out infinite alternate;
}
@keyframes heks-spoor-puls{
  0%  { opacity: .3;  transform: scaleX(.85) scaleY(.85); }
  100%{ opacity: .8;  transform: scaleX(1.1) scaleY(1.15); }
}

/* 3d-ruimte: de lagen staan op echte diepte binnen dit perspectief */
.heks-3d{
  display: block;
  position: absolute;
  inset: 0;
  perspective: 420px;
  perspective-origin: 50% 40%;
}
.heks-svg .heks-3d{
  animation-duration: var(--heks-duur, 14s);
  animation-timing-function: linear;
  animation-delay: var(--heks-vertraging, 0s);
  animation-fill-mode: forwards;
}
.heks-romp{
  display: block;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 60%;
  animation: heks-draai var(--heks-duur, 14s) ease-in-out var(--heks-vertraging, 0s) infinite alternate;
}
.heks-romp > svg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.heks-doek{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/* achterste laag (mantel): verder weg, iets kleiner */
.heks-laag-achter{ transform: translateZ(-46px) scale(.9) translateX(-4%); }
/* middelste laag (lichaam, hoed, hoofd) */
.heks-laag-midden{ transform: translateZ(0); }
/* voorste laag (bezem): dichtbij, iets groter */
.heks-laag-voor{ transform: translateZ(58px) scale(1.07) translateY(3%); }

/* de romp zwenkt in 3d heen en weer en kantelt bij elke bocht */
@keyframes heks-draai{
  0%   { transform: rotateY(-12deg) rotateX(3deg) rotateZ(-2deg); }
  25%  { transform: rotateY(4deg) rotateX(-1deg) rotateZ(1deg); }
  50%  { transform: rotateY(10deg) rotateX(-3deg) rotateZ(2deg); }
  75%  { transform: rotateY(-4deg) rotateX(2deg) rotateZ(-1deg); }
  100% { transform: rotateY(-10deg) rotateX(3deg) rotateZ(-2deg); }
}

.heks.weg{
  animation-play-state: paused;
  pointer-events: none;
}
.heks.weg .heks-3d{ animation-play-state: paused; }
.heks.weg .heks-romp{
  animation: heks-pof .65s ease-out forwards;
}
.heks.weg .heks-doek{
  animation: heks-pof .65s ease-out forwards;
}
@keyframes heks-pof{
  0%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100%{ opacity: 0; transform: scale(1.7) rotate(-24deg); }
}

/* losse onderdelen bewegen apart, zodat de figuur niet als één plaat beweegt */
.heks .heks-lichaam{
  animation: heks-zwaai calc(var(--heks-duur, 14s) / 9) ease-in-out infinite alternate;
  transform-origin: 90px 60px;
}
.heks .heks-mantel{
  animation: heks-wapperen calc(var(--heks-duur, 14s) / 6) ease-in-out infinite alternate;
  transform-origin: 100px 40px;
}
.heks .heks-haar{
  animation: heks-wapperen-klein calc(var(--heks-duur, 14s) / 5) ease-in-out infinite alternate;
  transform-origin: 96px 30px;
}
.heks .heks-bezem{
  animation: heks-bezem-tril calc(var(--heks-duur, 14s) / 7) ease-in-out infinite alternate;
  transform-origin: 46px 84px;
}
.heks .heks-magie{
  animation: heks-magie-gloei calc(var(--heks-duur, 14s) / 4) ease-in-out infinite alternate;
  transform-origin: 12px 96px;
}
@keyframes heks-magie-gloei{
  0%  { opacity: .55; transform: scale(.92); }
  100%{ opacity: 1;   transform: scale(1.12); }
}
/* de ogen flikkeren grillig, alsof er iets onder de huid kruipt */
.heks .heks-ogen{
  animation: heks-flikker calc(var(--heks-duur, 14s) / 13) steps(1, end) infinite alternate;
}
@keyframes heks-flikker{
  0%  { opacity: 1; }
  30% { opacity: .15; }
  55% { opacity: 1; }
  80% { opacity: .4; }
  100%{ opacity: 1; }
}
.heks .heks-vonken{
  animation: heks-vonken-twinkel calc(var(--heks-duur, 14s) / 3) ease-in-out infinite alternate;
  transform-origin: 50% 50%;
}
@keyframes heks-vonken-twinkel{
  0%  { opacity: .3; transform: scale(.8) rotate(-6deg); }
  100%{ opacity: 1;  transform: scale(1.15) rotate(6deg); }
}
@keyframes heks-zwaai{
  0%  { transform: rotate(-3deg) translateY(0); }
  100%{ transform: rotate(3deg) translateY(-3px); }
}
@keyframes heks-wapperen{
  0%  { transform: skewY(7deg) scaleY(.93); }
  100%{ transform: skewY(-8deg) scaleY(1.07); }
}
@keyframes heks-wapperen-klein{
  0%  { transform: skewY(9deg) scaleX(.92); }
  100%{ transform: skewY(-10deg) scaleX(1.08); }
}
@keyframes heks-bezem-tril{
  0%  { transform: rotate(3deg); }
  100%{ transform: rotate(-4deg); }
}

@media (max-width: 760px){
  .heks{ width: 120px; height: 90px; margin: -45px 0 0 -60px; }
}

/* vuurvliegjes */
.vuurvliegjes{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.vuurvliegje{
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff3b8;
  box-shadow: 0 0 10px 3px rgba(255, 214, 106, .75), 0 0 22px 6px rgba(255, 200, 80, .25);
  animation:
    vlieg-zweef var(--duur, 16s) ease-in-out var(--vertraging, 0s) infinite alternate,
    vlieg-knipper calc(var(--duur, 16s) / 4) ease-in-out var(--vertraging, 0s) infinite;
}
@keyframes vlieg-zweef{
  0%  { transform: translate(0, 0); }
  33% { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * -.4)); }
  66% { transform: translate(calc(var(--dx) * -.3), calc(var(--dy) * .8)); }
  100%{ transform: translate(var(--dx), var(--dy)); }
}
@keyframes vlieg-knipper{
  0%, 100%{ opacity: .1; }
  50%     { opacity: .9; }
}

/* gouden titel bovenaan — verwijderd op verzoek; regels blijven weg */


/* magische aura achter het boek */
.scene::before{
  content: '';
  position: absolute;
  inset: -12% -8%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 210, 130, .16), rgba(170, 120, 255, .08) 55%, rgba(0,0,0,0) 100%);
  filter: blur(18px);
  animation: aura-adem 6s ease-in-out infinite;
}
@keyframes aura-adem{
  0%, 100%{ opacity: .7; transform: scale(1); }
  50%     { opacity: 1; transform: scale(1.04); }
}

/* kaft: glanzende titel, gloeiende rand en een lichtstreep */
@keyframes goud-glans{
  0%  { background-position: 100% 0; }
  100%{ background-position: -150% 0; }
}
.kafttitel{
  background: linear-gradient(100deg, var(--goud-3) 0%, var(--goud-4) 22%, var(--goud-1) 30%, var(--goud-2) 42%, var(--goud-3) 58%, var(--goud-4) 78%, var(--goud-3) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75)) drop-shadow(0 0 12px rgba(255, 214, 106, .3));
  animation: goud-glans 8s linear infinite;
}
.goudrand{
  animation: rand-gloed 4.5s ease-in-out infinite;
}
.goudrand::before,
.goudrand::after{
  content: '✦';
  position: absolute;
  font-size: 14px;
  line-height: 1;
  color: var(--goud-2);
  text-shadow: 0 0 8px rgba(255, 214, 106, .9);
}
.goudrand::before{ top: -8px; left: 50%; transform: translateX(-50%); }
.goudrand::after{ bottom: -8px; left: 50%; transform: translateX(-50%); }
@keyframes rand-gloed{
  0%, 100%{ box-shadow: inset 0 0 0 4px rgba(0,0,0,.16), inset 0 0 0 5px rgba(233,201,106,.3), 0 0 0 rgba(255,214,106,0); border-color: rgba(233,201,106,.5); }
  50%     { box-shadow: inset 0 0 0 4px rgba(0,0,0,.16), inset 0 0 0 5px rgba(233,201,106,.5), 0 0 14px rgba(255,214,106,.35), inset 0 0 14px rgba(255,214,106,.18); border-color: rgba(255,230,150,.85); }
}
.kaftfoto{ isolation: isolate; }
.kaftfoto::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,246,208,.38) 48%, rgba(255,255,255,0) 60%);
  background-size: 300% 100%;
  animation: kaft-schijn 6.5s ease-in-out infinite;
}
@keyframes kaft-schijn{
  0%, 55%{ background-position: 150% 0; }
  100%   { background-position: -60% 0; }
}
.kaftonder{ text-shadow: 0 0 10px rgba(255, 214, 106, .35); }
.kaftembleem{
  position: relative;
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.2), inset 0 0 0 5px rgba(233,201,106,.3), 0 0 20px rgba(255,214,106,.25);
}
.kaftembleem::after{
  content: '✦';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform: rotate(-45deg);
  font-size: 26px;
  color: var(--goud-2);
  text-shadow: 0 0 12px rgba(255, 214, 106, .8);
}

/* hint met sterretjes */
.hint{
  color: rgba(255, 232, 180, .75);
  text-shadow: 0 0 12px rgba(255, 214, 106, .4);
}
.hint::before{ content: '✧ '; color: var(--goud-2); }
.hint::after { content: ' ✧'; color: var(--goud-2); }

/* knoppen: gouden glas met lichtzweem */
.knop{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,235,180,.12), rgba(255,235,180,0) 55%),
    linear-gradient(180deg, rgba(70,44,26,.92), rgba(30,18,14,.94));
  border-color: rgba(233,201,106,.5);
  box-shadow: 0 4px 14px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,180,.22), 0 0 0 rgba(255,214,106,0);
  text-shadow: 0 0 8px rgba(255, 214, 106, .35);
}
.knop::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,246,208,.35) 50%, rgba(255,255,255,0) 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
}
.knop:hover:not(:disabled)::after{ transform: translateX(120%); }
.knop:hover:not(:disabled){
  box-shadow: 0 7px 18px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,180,.32), 0 0 18px rgba(255,214,106,.35);
}
.knop:focus-visible{ outline: 2px solid var(--goud-2); outline-offset: 3px; }

.teller{
  color: rgba(255, 232, 180, .85);
  text-shadow: 0 0 10px rgba(255, 214, 106, .3);
}

/* bladzijden: warme gloed op de rand als het boek open is */
.boek:not(.dicht) .stapel-rechts{ box-shadow: 3px 0 8px rgba(0,0,0,.45), 0 0 16px rgba(255, 214, 106, .18); }
.boek:not(.dicht) .stapel-links { box-shadow: -3px 0 8px rgba(0,0,0,.45), 0 0 16px rgba(255, 214, 106, .18); }

/* lightbox: nachtelijk gordijn met gouden lijst */
.lightbox{
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(80, 55, 120, .35), rgba(0,0,0,0) 75%),
    rgba(8, 5, 10, .95);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lb-figuur img{
  border-color: #f6ecd8;
  box-shadow:
    0 0 0 1px rgba(233, 201, 106, .8),
    0 0 0 5px rgba(40, 24, 10, .9),
    0 0 0 6px rgba(233, 201, 106, .6),
    0 0 50px rgba(255, 214, 106, .25),
    0 24px 60px rgba(0,0,0,.8);
  transform: scale(.94);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.lightbox.open .lb-figuur img{ transform: scale(1); }
.lb-figuur figcaption{
  font-size: 15px;
  color: rgba(255, 232, 180, .9);
  text-shadow: 0 0 10px rgba(255, 214, 106, .35);
}
.lb-nav, .lb-sluit{
  background: linear-gradient(180deg, rgba(70,44,26,.85), rgba(30,18,14,.9));
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,235,180,.2);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.lb-nav:hover, .lb-sluit:hover{
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 0 20px rgba(255,214,106,.4);
  transform: scale(1.06);
}

/* beheer en login in dezelfde stijl */
.beheer-knop{
  border-radius: 999px;
  background: linear-gradient(180deg, #4a321a, #2a1b0e);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,180,.2);
  transition: box-shadow .2s ease, background .2s ease;
}
.beheer-knop:hover{
  background: linear-gradient(180deg, #5e4220, #362312);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 14px rgba(255,214,106,.35);
}
.beheer-knop.secundair{ background: linear-gradient(180deg, #2a1f14, #17100a); }
.login-venster{
  border-radius: 14px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(120, 85, 170, .22), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #2a1d12, #170f09);
  box-shadow: 0 18px 60px #000b, 0 0 0 1px rgba(233,201,106,.25), 0 0 40px rgba(255,214,106,.12);
}
.login-venster::backdrop{
  background: radial-gradient(60% 60% at 50% 50%, rgba(60, 40, 90, .5), #080502e0);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.login-venster h2::before{ content: '✦ '; color: var(--goud-2); }
.login-venster input:focus{
  outline: none;
  border-color: var(--goud-2);
  box-shadow: 0 0 0 3px rgba(233, 201, 106, .2);
}

@media (max-width: 760px){
  .maan{ top: max(12px, 2.4vh); bottom: auto; left: max(12px, 2.4vw); }
  .vallende-ster{ width: 90px; }
}

@media (prefers-reduced-motion: reduce){
  .nevel-wolk, .maan, .easteregg-punten, .scene::before,
  .kafttitel, .goudrand, .kaftfoto::after{ animation: none; }
  .maan-beeld, .maan::before, .maan-schijn, .maan-ster, .maan-kraters{ animation: none; }
  .maan-ster{ opacity: .9; }
  .vuurvliegjes, .vallende-ster, .heks{ display: none; }
  .knop::after{ transition: none; }
  .lb-figuur img{ transform: none; transition: none; }
}

/* beheerbalk niet over de sluitknop van de lightbox laten vallen */
body:has(.lightbox.open) .beheer{ visibility: hidden; }

/* ==========================================================
   Toverstokkenwinkel
   ========================================================== */

.winkel-venster{
  width: min(1080px, calc(100vw - 28px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid rgba(233, 201, 106, .45);
  border-radius: 18px;
  color: #f6e6c6;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(126, 88, 176, .28), rgba(0,0,0,0) 62%),
    radial-gradient(80% 50% at 50% 110%, rgba(255, 196, 92, .12), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #2b1e12, #150e08);
  box-shadow: 0 26px 80px #000c, 0 0 0 1px rgba(233,201,106,.18), 0 0 60px rgba(255,214,106,.14);
  font: 15px Arial, sans-serif;
  overflow: hidden;
}

.winkel-venster::backdrop{
  background: radial-gradient(60% 60% at 50% 45%, rgba(58, 38, 92, .55), #070402e6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.winkel-venster[open]{
  display: flex;
  flex-direction: column;
  animation: winkel-open .42s cubic-bezier(.2, .9, .3, 1.05);
}

@keyframes winkel-open{
  from{ opacity: 0; transform: translateY(18px) scale(.97); }
  to{ opacity: 1; transform: none; }
}

/* ---- kop met de kassa ---- */

.winkel-kop{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(233, 201, 106, .22);
  background: linear-gradient(180deg, rgba(255, 214, 106, .07), rgba(0,0,0,0));
}

.winkel-titelblok h2{
  margin: 0;
  color: #f7dd93;
  font: 26px Georgia, serif;
  letter-spacing: .4px;
  text-shadow: 0 0 22px rgba(255, 214, 106, .35);
}

.winkel-titelblok h2::before{ content: '✦ '; color: var(--goud-2); }

.winkel-onder{
  margin: 5px 0 0;
  color: rgba(232, 214, 180, .72);
  font-size: 13px;
  font-style: italic;
}

.winkel-kas{
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(233, 201, 106, .5);
  border-radius: 999px;
  background: linear-gradient(180deg, #3a2a15, #1d1409);
  box-shadow: inset 0 1px 0 rgba(255, 235, 180, .22), 0 4px 16px rgba(0,0,0,.45);
}

.winkel-munt{
  color: #ffe9a4;
  font-size: 17px;
  text-shadow: 0 0 10px rgba(255, 214, 106, .9);
  animation: winkel-munt-puls 2.6s ease-in-out infinite;
}

@keyframes winkel-munt-puls{
  0%, 100%{ transform: scale(1); opacity: .85; }
  50%{ transform: scale(1.16); opacity: 1; }
}

.winkel-score-label{
  color: rgba(232, 214, 180, .7);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.winkel-score{
  min-width: 62px;
  color: #fff6d0;
  font: 700 20px Georgia, serif;
  text-align: right;
  text-shadow: 0 0 14px rgba(255, 214, 106, .55);
}

.winkel-score.puls{ animation: winkel-score-puls .5s ease; }

@keyframes winkel-score-puls{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.22); color: #fff; }
  100%{ transform: scale(1); }
}

.winkel-melding{
  min-height: 20px;
  margin: 0;
  padding: 0 24px;
  color: #ffd9a8;
  font-size: 13px;
  transition: opacity .3s ease;
}

.winkel-melding:empty{ padding: 0; }

.winkel-melding.goed{ color: #b9f5c9; }
.winkel-melding.fout{ color: #ffb9a0; }

.winkel-tabs{
  display: flex;
  gap: 8px;
  padding: 10px 24px 0;
  border-bottom: 1px solid rgba(233, 201, 106, .18);
}
.winkel-tab{
  padding: 9px 16px;
  border: 1px solid rgba(233, 201, 106, .28);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: rgba(232, 214, 180, .78);
  background: rgba(0,0,0,.2);
  font: 600 13px Arial, sans-serif;
  cursor: pointer;
}
.winkel-tab:hover{ color: #fff6d0; background: rgba(255,214,106,.08); }
.winkel-tab.actief{
  border-color: rgba(233, 201, 106, .55);
  color: #fff1bd;
  background: linear-gradient(180deg, rgba(255,214,106,.16), rgba(0,0,0,.08));
  box-shadow: inset 0 1px 0 rgba(255,235,180,.12);
}

/* ---- de schappen ---- */

.winkel-schappen{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 24px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 201, 106, .45) transparent;
}

.winkel-schappen::-webkit-scrollbar{ width: 10px; }
.winkel-schappen::-webkit-scrollbar-track{ background: rgba(0,0,0,.25); border-radius: 999px; }
.winkel-schappen::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(233,201,106,.6), rgba(168,128,31,.5));
}

.winkel-spreuken{
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  align-content: start;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 24px 20px;
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 201, 106, .45) transparent;
}
.winkel-spreuken[hidden]{ display: none !important; }
.winkel-spreuk-kaart{
  display: flex;
  min-height: 205px;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(233, 201, 106, .28);
  border-radius: 12px;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--stok-gloed, rgba(255,255,255,.06)), transparent 75%),
    linear-gradient(180deg, #2f2114, #1a1109);
  box-shadow: 0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,235,180,.1);
}
.winkel-spreuk-kaart.gekocht{ border-color: rgba(150,220,170,.45); }
.winkel-spreuk-kaart.actief{
  border-color: var(--stok-rand, #ffe9a4);
  box-shadow: 0 8px 22px rgba(0,0,0,.4), 0 0 22px var(--stok-gloed, rgba(255,214,106,.25));
}
.spreuk-kwaliteit{
  align-self: flex-start;
  padding: 3px 9px;
  border: 1px solid var(--stok-rand, rgba(233,201,106,.5));
  border-radius: 999px;
  color: #ffe9a4;
  background: rgba(0,0,0,.3);
  font-size: 10px;
  letter-spacing: .8px;
  text-transform: uppercase;
}
.spreuk-naam{
  margin: 0;
  color: #f7e3ae;
  font: 17px Georgia, serif;
}
.spreuk-staf,
.spreuk-omschrijving,
.spreuk-bediening{
  margin: 0;
  color: rgba(232,214,180,.75);
  font-size: 12px;
  line-height: 1.45;
}
.spreuk-staf{ color: #ffe4a0; font-style: italic; }
.spreuk-bediening{ margin-top: auto; color: rgba(210,230,255,.78); }
.winkel-info{
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff1d0;
  background: rgba(15,10,6,.88);
  font-size: 12px;
  line-height: 1.5;
}
.winkel-info summary{
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid rgba(233,201,106,.35);
  border-radius: 999px;
  color: #ffe9a4;
  background: rgba(0,0,0,.72);
  cursor: pointer;
  list-style: none;
}
.winkel-info summary::-webkit-details-marker{ display: none; }
.winkel-info summary:hover{ background: rgba(255,214,106,.1); }
.winkel-info[open] summary{ margin-bottom: 6px; }
.winkel-info p{ margin: 0; }
.spreuk-voet{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(233,201,106,.16);
}

.winkel-schap{
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
  padding: 0 4px 26px;
  margin-bottom: 26px;
}

/* de houten plank onder elk schap */
.winkel-schap::after{
  content: '';
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: 6px;
  height: 16px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 3px, rgba(255,255,255,.03) 3px 9px),
    linear-gradient(180deg, #6b4522, #3a2411 60%, #241608);
  box-shadow:
    0 6px 16px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255, 226, 160, .35),
    0 0 22px rgba(255, 200, 90, .12);
}

.winkel-schap-titel{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 2px;
  color: #f0d68f;
  font: 17px Georgia, serif;
  letter-spacing: .5px;
}

.winkel-schap-titel::after{
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, rgba(233, 201, 106, .5), rgba(233, 201, 106, 0));
}

.winkel-schap-titel .schap-bereik{
  color: rgba(232, 214, 180, .55);
  font: 12px Arial, sans-serif;
  letter-spacing: 1px;
}

/* ---- een toverstok op het schap ---- */

.winkel-stok{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(233, 201, 106, .28);
  border-radius: 12px;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, .06), rgba(0,0,0,0) 70%),
    linear-gradient(180deg, #2f2114, #1a1109);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 1px 0 rgba(255, 235, 180, .12);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.winkel-stok:hover{
  transform: translateY(-4px);
  border-color: rgba(233, 201, 106, .6);
  box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 26px var(--stok-gloed, rgba(255,214,106,.25));
}

.winkel-stok.gekocht{ border-color: rgba(150, 220, 170, .45); }
.winkel-stok.actief{
  border-color: rgba(255, 226, 140, .85);
  box-shadow: 0 14px 30px rgba(0,0,0,.55), 0 0 30px var(--stok-gloed, rgba(255,214,106,.4));
}
.winkel-stok.onbetaalbaar:hover{ transform: none; }

.stok-beeld{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  border-radius: 9px;
  background:
    radial-gradient(60% 70% at 50% 45%, var(--stok-gloed, rgba(255,214,106,.22)), rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.1));
  overflow: hidden;
}

.stok-beeld svg{
  width: 74px;
  height: 74px;
  transform: rotate(-38deg);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.6));
  transition: transform .35s ease;
}

.winkel-stok:hover .stok-beeld svg{ transform: rotate(-38deg) scale(1.08); }

.stok-beeld::after{
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.16), rgba(0,0,0,0) 60%);
  opacity: 0;
  transition: opacity .3s ease;
}

.winkel-stok:hover .stok-beeld::after{ opacity: 1; }

.stok-naam{
  margin: 0;
  color: #f7e3ae;
  font: 16px Georgia, serif;
  line-height: 1.25;
}

.stok-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stok-kwaliteit{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  padding: 3px 9px;
  border: 1px solid var(--stok-rand, rgba(233,201,106,.5));
  border-radius: 999px;
  color: var(--stok-tekst, #ffe9a4);
  background: rgba(0,0,0,.35);
  font-size: 11px;
  letter-spacing: .8px;
  text-transform: uppercase;
}

.stok-klank{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(233, 201, 106, .22);
  border-radius: 999px;
  color: rgba(240, 226, 196, .8);
  background: rgba(0,0,0,.28);
  font-size: 11px;
  letter-spacing: .5px;
}

.stok-punten{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid rgba(255, 214, 106, .3);
  border-radius: 999px;
  color: rgba(255, 236, 178, .92);
  background: rgba(255, 214, 106, .1);
  font-size: 11px;
  letter-spacing: .5px;
  font-variant-numeric: tabular-nums;
}

.stok-omschrijving{
  margin: 0;
  color: rgba(232, 214, 180, .74);
  font-size: 12.5px;
  line-height: 1.45;
}

.stok-voet{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(233, 201, 106, .16);
}

.stok-prijs{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #ffe9a4;
  font: 700 15px Georgia, serif;
  text-shadow: 0 0 12px rgba(255, 214, 106, .4);
}

.stok-prijs .munt{ font-size: 12px; opacity: .85; }

.stok-koop{
  padding: 7px 13px;
  border: 1px solid rgba(233, 201, 106, .55);
  border-radius: 999px;
  color: #fff6d0;
  background: linear-gradient(180deg, #4a321a, #2a1b0e);
  font: 13px Arial, sans-serif;
  cursor: pointer;
  transition: background .2s ease, box-shadow .2s ease, transform .15s ease;
}

.stok-koop:hover:not(:disabled){
  background: linear-gradient(180deg, #5e4220, #362312);
  box-shadow: 0 0 16px rgba(255, 214, 106, .4);
}

.stok-koop:active:not(:disabled){ transform: scale(.96); }

.stok-koop:disabled{
  cursor: default;
  opacity: .55;
  border-color: rgba(233, 201, 106, .25);
}

.stok-koop.gekocht{
  color: #cdf3d8;
  border-color: rgba(150, 220, 170, .5);
  background: linear-gradient(180deg, #1f3a28, #12241a);
}

.stok-koop.actief{
  color: #2a1b0e;
  border-color: #ffe9a4;
  background: linear-gradient(180deg, #ffe9a4, #e0b95c);
}

.stok-vlag{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  color: #2a1b0e;
  background: linear-gradient(180deg, #ffe9a4, #e0b95c);
  font: 700 10px Arial, sans-serif;
  letter-spacing: .8px;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}

/* ---- voet ---- */

.winkel-voet{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px 18px;
  border-top: 1px solid rgba(233, 201, 106, .22);
  background: linear-gradient(0deg, rgba(255, 214, 106, .06), rgba(0,0,0,0));
}

.winkel-tip{
  color: rgba(232, 214, 180, .6);
  font-size: 12.5px;
  font-style: italic;
}

.winkel-acties{ display: flex; gap: 9px; }

.spreuk-status{
  position: fixed;
  z-index: 80;
  right: 12px;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 12px;
  width: fit-content;
  max-width: min(440px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 9px 16px;
  border: 1px solid rgba(233,201,106,.55);
  border-radius: 999px;
  color: #fff3c4;
  background: rgba(31,20,10,.94);
  box-shadow: 0 6px 24px rgba(0,0,0,.55), 0 0 22px rgba(255,214,106,.18);
  font: 600 13px Arial, sans-serif;
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  overflow: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.spreuk-status.zichtbaar{ opacity: 1; transform: translateY(0); }
.spreuk-status.succes{ border-color: rgba(190,240,190,.65); color: #e4ffdc; }
.spreuk-status.succes.zichtbaar{
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: .12em .3em;
  border: 0;
  border-radius: .18em;
  color: #fffbe6;
  background: transparent;
  box-shadow: none;
  font-size: clamp(36px, 10vw, 112px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 12px #fff, 0 0 32px #ffe58a, 0 0 72px #b779ff,
    0 5px 18px rgba(0,0,0,.8);
  overflow: visible;
  animation: spreuk-naam 2.8s cubic-bezier(.16,.8,.25,1) forwards;
}
.spreuk-status::after{
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  width: var(--spreuk-lading, 0%);
  background: #ffe9a4;
  box-shadow: 0 0 8px #ffe9a4;
}

.spreuk-flits{
  position: fixed;
  z-index: 55;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--spreuk-kleur, #fff3c4);
  box-shadow: 0 0 18px 10px var(--spreuk-kleur, #fff3c4), 0 0 65px 28px rgba(255,225,140,.55);
  pointer-events: none;
  animation: spreuk-flits .8s ease-out forwards;
}
.spreuk-flits-groot{
  inset: 0;
  z-index: 79;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: radial-gradient(circle at var(--spreuk-x, 50%) var(--spreuk-y, 50%),
    rgba(255,255,255,.82) 0, rgba(255,243,196,.56) 9%,
    rgba(255,225,140,.2) 32%, transparent 72%);
  box-shadow: none;
  animation: spreuk-schermflits .65s ease-out forwards;
}
@keyframes spreuk-schermflits{
  0%{ opacity: 0; }
  12%{ opacity: 1; }
  100%{ opacity: 0; }
}
@keyframes spreuk-naam{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  10%{ opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20%{ transform: translate(-50%, -50%) scale(1); }
  78%{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100%{ opacity: 0; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes spreuk-flits{
  0%{ opacity: 0; transform: scale(.2); }
  18%{ opacity: 1; transform: scale(1.2); }
  100%{ opacity: 0; transform: scale(5); }
}
.heks.spreuk-bevroren{ filter: drop-shadow(0 0 10px rgba(157,232,255,.95)); }

@media (max-width: 760px){
  .winkel-kop{ padding: 16px 16px 12px; }
  .winkel-titelblok h2{ font-size: 21px; }
  .winkel-schappen{ padding: 14px 14px 4px; }
  .winkel-schap{ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .winkel-tabs{ padding-right: 14px; padding-left: 14px; }
  .winkel-spreuken{ grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; padding: 14px; }
  .winkel-spreuk-kaart{ min-height: 220px; padding: 11px; }
  .stok-beeld{ height: 78px; }
  .stok-beeld svg{ width: 60px; height: 60px; }
  .winkel-voet{ padding: 12px 16px 14px; }
  .winkel-melding{ padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce){
  .winkel-venster[open]{ animation: none; }
  .winkel-munt{ animation: none; }
  .winkel-stok:hover{ transform: none; }
  .spreuk-status.succes.zichtbaar{ opacity: 1; transform: translate(-50%, -50%); animation: none; }
  .spreuk-flits-groot{ opacity: .35; animation: none; }
}

/* ---------------- spelmodus: boek verbrandt / herrijst uit de as ---------------- */
.vuur-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 40;
}
.scene.vuur-masker{
  -webkit-mask-size: calc(100% + 96px) calc(100% + 96px);
          mask-size: calc(100% + 96px) calc(100% + 96px);
  -webkit-mask-position: -48px -48px;
          mask-position: -48px -48px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  pointer-events: none;
}
.scene.verbrand{
  visibility: hidden;
  pointer-events: none;
}
.scene.herrijst{
  animation: boek-herrijst 1.5s ease-out;
}
@keyframes boek-herrijst{
  0%  { filter: brightness(1.9) saturate(1.4) drop-shadow(0 0 40px rgba(255, 210, 120, .95)); transform: scale(1.03); }
  45% { filter: brightness(1.2) drop-shadow(0 0 22px rgba(255, 200, 110, .6)); transform: scale(1); }
  100%{ filter: none; transform: none; }
}
body.boek-brandt .bediening,
body.boek-verbrand .bediening,
body.boek-brandt .hint,
body.boek-verbrand .hint{
  opacity: .25;
  pointer-events: none;
  transition: opacity .6s;
}
/* spelmodus: bediening en hint volledig verbergen */
body.spelmodus .bediening,
body.spelmodus .hint{
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .6s, visibility .6s;
}
body.spelmodus .scorebord{
  top: max(16px, env(safe-area-inset-top));
  bottom: auto;
  left: 50%;
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
  transition: none;
}
body.spelmodus .gloed,
body.spelmodus .toverstof,
body.spelmodus .stofspoor{
  display: none !important;
}
body.spelmodus.boek-verbrand .vuur-canvas{
  display: none !important;
}
body.spelmodus .scene.herrijst{
  animation: none;
}
body.spelmodus .toverstaf-binnen{
  animation: none !important;
  transform: none !important;
}
body.spelmodus .toverstaf-binnen::after{
  display: none;
}
body.spelmodus .toverstaf-binnen .staf-punt-gloed,
body.spelmodus .toverstaf-binnen .staf-punt-kern,
body.spelmodus .toverstaf-binnen .staf-punt-vorm{
  visibility: hidden;
}
.cursor-vizier{
  display: none;
  position: absolute;
  left: 10%;
  top: 10%;
  width: 18px;
  height: 18px;
  border: 1px solid #fff8df;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8df 0 1px, transparent 1.5px);
  box-shadow: 0 0 0 1px #21170d, 0 0 7px rgba(255, 224, 138, .9);
  transform: translate(-50%, -50%);
}
.cursor-vizier::before,
.cursor-vizier::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #fff8df;
  box-shadow: 0 0 2px #21170d;
  transform: translate(-50%, -50%);
}
.cursor-vizier::before{ width: 28px; height: 1px; }
.cursor-vizier::after{ width: 1px; height: 28px; }
body.spelmodus .cursor-vizier{ display: block; }
.toverstaf.spreuk-groot .toverstaf-binnen{
  transform: scale(2) !important;
  transform-origin: 10% 10%;
}
@media (prefers-reduced-motion: reduce){
  .scene.herrijst{ animation: none; }
}

/* ==========================================================
   Afwerking v2 — één consistente laag bovenop alles hierboven
   ========================================================== */
:root{
  --font-ui: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --goud: #e9c96a;
  --goud-fel: #ffe08a;
  --tekst-licht: #f6e7c4;
  --tekst-zacht: #d9c7a2;
  --paneel-1: #3c2817;
  --paneel-2: #1c130a;
  --rand: rgba(233, 201, 106, .5);
  --rand-sterk: rgba(255, 226, 140, .9);
  --r-s: 8px;
  --r-m: 14px;
  --r-pil: 999px;
  --tik: 44px;
}

body{
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ---- bovenbalk ---- */
.beheer{
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  font: 13px/1.3 var(--font-ui);
}
.beheer-paneel{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  align-items: stretch;
  min-width: 240px;
  padding: 10px;
  border: 1px solid var(--rand);
  border-radius: var(--r-m);
  background: linear-gradient(180deg, rgba(48,32,18,.97), rgba(22,15,8,.97));
  box-shadow: 0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,235,180,.16);
}
.beheer.menu-open .beheer-paneel{ display: flex; }
.beheer-menu-knop{ display: inline-flex; min-height: var(--tik); }
.beheer-paneel .beheer-knop{ min-height: var(--tik); justify-content: flex-start; }
.beheer-knop{
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--rand);
  border-radius: var(--r-pil);
  color: var(--tekst-licht);
  background: linear-gradient(180deg, var(--paneel-1), var(--paneel-2));
  box-shadow: 0 3px 10px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,235,180,.18);
  font: 600 13px/1.2 var(--font-ui);
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .12s ease, color .2s ease;
}
.beheer-knop.secundair{ color: var(--tekst-zacht); background: linear-gradient(180deg, #2a1f14, #17100a); }
.beheer-knop[aria-pressed="false"]{
  color: var(--tekst-zacht);
  border-color: rgba(233, 201, 106, .28);
  background: linear-gradient(180deg, #2a2016, #16100a);
}
.beheer-knop[aria-pressed="true"]{
  border-color: var(--rand-sterk);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 12px rgba(255,214,106,.28), inset 0 1px 0 rgba(255,235,180,.25);
}
.beheer-knop:hover{
  color: #fff6d8;
  border-color: var(--rand-sterk);
  background: linear-gradient(180deg, #5a3d1f, #2c1d0f);
  box-shadow: 0 3px 10px rgba(0,0,0,.45), 0 0 14px rgba(255,214,106,.32);
}
.beheer-knop:active{ transform: translateY(1px) scale(.98); }

#beheer-status{
  max-width: min(430px, calc(100vw - 24px));
  padding: 6px 12px;
  border: 1px solid rgba(233, 201, 106, .25);
  border-radius: var(--r-s);
  color: var(--tekst-licht);
  background: rgba(20, 12, 6, .86);
  text-align: right;
  text-shadow: none;
}
#beheer-status:empty{ display: none; }
#beheer-status.fout{ color: #ffc9b2; border-color: rgba(255, 150, 120, .45); }

@media (max-width: 900px){
  .beheer-paneel{ min-width: min(240px, calc(100vw - 24px)); }
}

/* ---- focus: overal goed zichtbaar ---- */
.beheer-knop:focus-visible, .knop:focus-visible, .lb-nav:focus-visible, .lb-sluit:focus-visible,
.stok-koop:focus-visible, .score-spreuk:focus-visible, .maan:focus-visible, .elf.zichtbaar:focus-visible{
  outline: 3px solid var(--goud-fel);
  outline-offset: 3px;
}
.beeld:focus-visible{ outline: 3px solid #8a5a00; outline-offset: 2px; }

/* ---- scorebord bovenaan in het midden ---- */
.scorebord{
  top: max(16px, env(safe-area-inset-top));
  bottom: auto;
}
.scorebord.verborgen{ transform: translateX(-50%) translateY(-14px) scale(.9); }

/* ---- navigatie ---- */
.bediening{ gap: 12px; padding: 0 12px max(4px, env(safe-area-inset-bottom)); }
.knop{
  min-height: var(--tik);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 20px;
  color: var(--tekst-licht);
  font-size: 12px;
}
.knop:active:not(:disabled){
  transform: translateY(1px) scale(.97);
  box-shadow: 0 2px 8px rgba(0,0,0,.5), inset 0 2px 6px rgba(0,0,0,.35);
}
.knop:disabled{ opacity: .42; }
.teller{
  min-width: 190px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--tekst-licht);
}
.hint{
  font-family: var(--font-ui);
  color: rgba(255, 236, 196, .92);
  animation: hint-adem 3.2s ease-in-out infinite;
}
.hint.weg{ opacity: 0; animation: none; }
@keyframes hint-adem{ 0%, 100%{ opacity: .72; } 50%{ opacity: 1; } }

@media (max-width: 760px){
  .bediening{ gap: 8px; width: 100%; justify-content: center; }
  .knop{ padding: 8px 14px; font-size: 11px; letter-spacing: .08em; }
  .knop-home{ min-width: var(--tik); }
  .knop-home .knop-tekst{ display: none; }
  .teller{ flex: 1 1 auto; min-width: 0; max-width: 140px; font-size: 10.5px; letter-spacing: .08em; line-height: 1.35; }
}
@media (max-height: 560px){
  .hint{ display: none; }
  body{ gap: 10px; }
}

/* ---- kaft ---- */
.kaft{
  box-shadow: inset 0 0 90px rgba(0,0,0,.6), inset 2px 2px 0 rgba(255,222,170,.1), inset -2px -2px 0 rgba(0,0,0,.4);
}
.kaft-hoek{
  position: absolute;
  z-index: 1;
  width: max(14px, calc(var(--page-w) * .07));
  height: max(14px, calc(var(--page-w) * .07));
  border: 0 solid rgba(240, 210, 120, .8);
  filter: drop-shadow(0 0 4px rgba(255, 214, 106, .35));
  pointer-events: none;
}
.kaft-hoek::after{
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--goud);
  transform: rotate(45deg);
}
.kaft-hoek.tl{ top: 22px; left: 54px; border-width: 2px 0 0 2px; }
.kaft-hoek.tr{ top: 22px; right: 22px; border-width: 2px 2px 0 0; }
.kaft-hoek.bl{ bottom: 22px; left: 54px; border-width: 0 0 2px 2px; }
.kaft-hoek.br{ bottom: 22px; right: 22px; border-width: 0 2px 2px 0; }
.kaft.achter .kaft-hoek.tl, .kaft.achter .kaft-hoek.bl{ left: 22px; }
.kaft-hoek.tl::after{ top: 4px; left: 4px; }
.kaft-hoek.tr::after{ top: 4px; right: 4px; }
.kaft-hoek.bl::after{ bottom: 4px; left: 4px; }
.kaft-hoek.br::after{ bottom: 4px; right: 4px; }
.kaftfoto{
  border: 4px solid #cfa53a;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(60, 30, 8, .9),
    0 0 0 5px #2a170b,
    0 0 0 6px rgba(240, 210, 120, .55),
    0 14px 30px rgba(0,0,0,.65),
    inset 0 0 0 2px rgba(0,0,0,.5);
}
.kafttitel{
  margin-top: calc(var(--page-h) * .04);
  font-size: clamp(14px, calc(var(--page-w) * .07), 30px);
}
.kaftonder{
  color: rgba(240, 214, 140, .88);
  font-size: clamp(9px, calc(var(--page-w) * .026), 11px);
}
.kaftonder::before{
  content: '';
  display: block;
  width: 64px;
  height: 1px;
  margin: 0 auto 10px;
  background: linear-gradient(90deg, transparent, var(--goud), transparent);
}

/* ---- bladzijden en foto's ---- */
.pagina{ padding: calc(var(--page-h) * .045) calc(var(--page-w) * .06) calc(var(--page-h) * .07); }
.pagina.recto{ box-shadow: inset 36px 0 42px -28px rgba(70,44,16,.62), inset -1px 0 0 rgba(120,90,50,.18); }
.pagina.verso{ box-shadow: inset -36px 0 42px -28px rgba(70,44,16,.62), inset 1px 0 0 rgba(120,90,50,.18); }
.fotos{ gap: calc(var(--page-h) * .03); }
.fotolijst{
  padding: clamp(5px, calc(var(--page-w) * .022), 9px) clamp(5px, calc(var(--page-w) * .022), 9px) clamp(4px, calc(var(--page-w) * .016), 7px);
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(60,40,15,.2), 0 8px 18px rgba(60,40,15,.26), inset 0 1px 0 rgba(255,255,255,.85);
}
.fotos .fotolijst:not(.leeg):nth-child(odd){ transform: rotate(-.5deg); }
.fotos .fotolijst:not(.leeg):nth-child(even){ transform: rotate(.45deg); }
.hoek{
  width: clamp(11px, calc(var(--page-w) * .045), 19px);
  height: clamp(11px, calc(var(--page-w) * .045), 19px);
}
.fotobijschrift{
  padding-top: 5px;
  color: #5b4729;
  font-size: clamp(10px, calc(var(--page-w) * .03), 12.5px);
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.fotobijschrift.geen{ display: none; }
.paginanummer{ bottom: calc(var(--page-h) * .022); color: #6b5534; font-variant-numeric: oldstyle-nums; }
.paginanummer::before{ content: '— '; }
.paginanummer::after{ content: ' —'; }
.fotolijst.leeg::before{ color: rgba(140, 104, 30, .45); }
.fotolijst.leeg::after{ color: #6f5a38; }
body.beheer-ingelogd .fotolijst.leeg::after{ color: #6e4f0e; }

/* ---- lightbox als echt dialoogvenster ---- */
dialog.lightbox{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 24px;
  color: inherit;
  overflow: hidden;
  touch-action: pan-y;
}
dialog.lightbox:not([open]){ display: none; }
dialog.lightbox::backdrop{ background: transparent; }
.lb-figuur img{ max-height: 74vh; max-height: 74dvh; }
.lb-figuur figcaption:empty{ display: none; }
.lb-teller{
  margin: 0;
  color: rgba(255, 232, 180, .82);
  font: 12px/1 var(--font-ui);
  letter-spacing: .16em;
  font-variant-numeric: tabular-nums;
}
.lb-sluit{ top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }
@media (max-width: 760px){
  dialog.lightbox{ padding: 64px 10px 88px; }
  .lb-figuur img{ max-width: 94vw; border-width: 4px; }
  .lb-nav{ position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); }
  .lb-links{ left: 18px; }
  .lb-rechts{ right: 18px; }
}

/* ---- vensters: gewone cursor, ook in de lightbox ---- */
html:has(.lightbox[open]) .toverstaf{ opacity: 0 !important; }
html:has(.lightbox[open]),
html:has(.lightbox[open]) *{ cursor: auto !important; }
html:has(.lightbox[open]) .lightbox button,
html:has(.login-venster[open]) .login-venster button,
html:has(.winkel-venster[open]) .winkel-venster button:not(:disabled){ cursor: pointer !important; }
.login-venster, .winkel-venster{ font-family: var(--font-ui); }
.login-venster input{ min-height: var(--tik); }

/* ---- minder beweging ---- */
@media (prefers-reduced-motion: reduce){
  .knop, .beheer-knop, .lb-nav, .lb-sluit, .lightbox, .beeld img{ transition: none; }
  .knop:active:not(:disabled), .beheer-knop:active, .lb-nav:hover, .lb-sluit:hover{ transform: none; }
  .beeld:hover img,
  .fotolijst:not(.leeg):hover .beeld img,
  .fotolijst:not(.leeg).foto-actief .beeld img{ transform: none; }
  .hint, .score-icoon, .goudrand, .kafttitel{ animation: none; }
}

/* ==========================================================
   Spelmodus v2 — levels, landschappen, combo en ranglijst
   ========================================================== */

/* ---------- landschap per level, achter het boek ---------- */
.landschap{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 1s ease;
}
.landschap .laag{
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.landschap .laag.aan{ opacity: 1; }
.landschap svg{
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 128%;
  min-width: 1080px;
  height: 76vh;
  transform: translateX(-50%);
  display: block;
}
body:not(.spelmodus) .landschap{ opacity: .62; }

/* de hemelkleur verschuift per level, zodat je echt ergens anders bent */
body[data-level="2"] .achtergrond{ background: radial-gradient(125% 95% at 50% -5%, #24402c 0%, #101d15 55%, #040a06 100%); }
body[data-level="3"] .achtergrond{ background: radial-gradient(125% 95% at 50% -5%, #1a3444 0%, #0c1a24 55%, #03070b 100%); }
body[data-level="4"] .achtergrond{ background: radial-gradient(125% 95% at 50% -5%, #2d3149 0%, #161a29 55%, #05060d 100%); }
body[data-level="5"] .achtergrond{ background: radial-gradient(125% 95% at 50% -5%, #261c42 0%, #140f27 55%, #04030b 100%); }
body[data-level="6"] .achtergrond{ background: radial-gradient(125% 95% at 50% -5%, #101336 0%, #090a1e 55%, #02020a 100%); }

/* ---------- level, combo en trefferpercentage in het scorebord ---------- */
.level-vak{
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  min-width: 128px;
  text-align: left;
}
.level-naam{
  font: 11px var(--font-ui, Arial);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e9c96a;
  white-space: nowrap;
}
.level-balk{
  display: block;
  height: 5px;
  border-radius: 999px;
  background: #00000066;
  box-shadow: inset 0 0 0 1px #f6d46e33;
  overflow: hidden;
}
.level-balk span{
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #8a6a1f, #ffe08a);
  transition: width .5s ease;
}
.combo-vak{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid #ffe08a55;
  background: linear-gradient(180deg, #2d2010, #170f08);
  color: #ffe9a8;
  font: 12px var(--font-ui, Arial);
  letter-spacing: 0;
  white-space: nowrap;
}
.combo-vak[hidden]{ display: none; }
.combo-teken{ color: #ffe08a; text-shadow: 0 0 8px #ffe08a; }
.combo-balk{
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: #00000066;
  overflow: hidden;
}
.combo-balk span{
  display: block;
  height: 100%;
  width: 100%;
  background: #ffe08a;
}
.combo-vak.heet{ animation: combo-heet .38s ease; }
@keyframes combo-heet{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.16); }
  100%{ transform: scale(1); }
}
.raak-vak{
  font: 12px var(--font-ui, Arial);
  color: #cbb27a;
  white-space: nowrap;
}
.raak-vak[hidden]{ display: none; }

/* ---------- level- en doelmelding ---------- */
.level-melding,
.doel-melding{
  position: fixed;
  left: 50%;
  top: 34%;
  z-index: 10002;
  transform: translate(-50%, -50%) scale(.92);
  padding: 16px 30px;
  border-radius: 18px;
  border: 1px solid #ffe08a66;
  background: #1a120af2;
  color: #ffe9a8;
  font: bold clamp(20px, 4.4vw, 36px)/1.15 Georgia, serif;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 44px #000b, inset 0 0 34px #f6d46e22;
  transition: opacity .5s ease, transform .5s ease;
}
.level-melding.zicht,
.doel-melding.zicht{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.level-melding[hidden],
.doel-melding[hidden]{ display: none; }
.level-melding .klein{
  display: block;
  margin-top: 8px;
  font: 400 15px/1.4 var(--font-ui, Arial);
  letter-spacing: 0;
  color: #d9c7a2;
}

/* ---------- soorten heksen ---------- */
.heks.goud{
  filter: sepia(.5) saturate(2) brightness(1.2) hue-rotate(-16deg)
    drop-shadow(0 0 12px #ffd76eaa) drop-shadow(0 0 26px #ffae0066) drop-shadow(0 8px 10px #000b);
}
.heks.goud .heks-spoor{
  background: radial-gradient(closest-side, rgba(255, 216, 120, .5), rgba(255, 170, 0, .28) 48%, transparent 76%);
}
.heks.schaduw{
  filter: saturate(.3) brightness(.7) contrast(1.2)
    drop-shadow(0 0 12px #8a6cff77) drop-shadow(0 8px 10px #000c);
}
.heks.schaduw .heks-spoor{
  background: radial-gradient(closest-side, rgba(146, 116, 255, .45), rgba(60, 20, 120, .28) 48%, transparent 76%);
}
.heks.snel{
  width: 122px;
  height: 92px;
  margin: -46px 0 0 -61px;
}
.heks.klein{
  width: 104px;
  height: 78px;
  margin: -39px 0 0 -52px;
}
.heks.goud .heks-3d{ animation-duration: var(--heks-duur, 14s); }

/* ---------- ranglijstvenster ---------- */
.ranglijst-venster{
  width: min(540px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--rand, #e9c96a80);
  border-radius: var(--r-m, 14px);
  background: linear-gradient(180deg, var(--paneel-1, #3c2817), var(--paneel-2, #1c130a));
  color: var(--tekst-licht, #f6e7c4);
  font: 14px var(--font-ui, Arial);
  box-shadow: 0 20px 60px #000b;
}
.ranglijst-venster::backdrop{ background: #060402cc; }
.ranglijst-venster h2{ margin: 0 0 4px; font: bold 21px/1.2 Georgia, serif; color: #ffe9a8; }
.ranglijst-onder{ margin: 0 0 14px; color: #cbb27a; font-size: 13px; }
.ranglijst-lijst{
  margin: 0 0 12px;
  padding-left: 26px;
  max-height: 42vh;
  overflow: auto;
}
.ranglijst-lijst li{ padding: 6px 0; border-bottom: 1px solid #ffffff14; }
.ranglijst-lijst li.ik{ color: #ffe9a8; font-weight: bold; }
.ranglijst-lijst .punten{ float: right; color: #f6d46e; }
.ranglijst-lijst .leeg{ list-style: none; margin-left: -20px; color: #cbb27a; }
.ranglijst-melding{ min-height: 1.3em; margin: 0 0 10px; color: #e8ffd9; font-size: 13px; }
.ranglijst-form{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  padding-top: 10px;
  border-top: 1px solid #ffffff14;
}
.ranglijst-form label{ display: block; width: 100%; font-size: 12px; color: #cbb27a; }
.ranglijst-form input{
  flex: 1 1 190px;
  min-height: var(--tik, 44px);
  padding: 0 12px;
  border: 1px solid var(--rand, #e9c96a80);
  border-radius: 10px;
  background: #17100a;
  color: #f6e7c4;
  font: 14px var(--font-ui, Arial);
}
.ranglijst-acties{ display: flex; justify-content: flex-end; margin-top: 12px; }

@media (max-width: 760px){
  .scorebord{ gap: 7px; padding: 6px 12px; }
  .level-vak{ min-width: 92px; }
  .level-naam{ font-size: 10px; letter-spacing: 1px; }
  .landschap svg{ width: 190%; }
  .heks.snel{ width: 92px; height: 70px; margin: -35px 0 0 -46px; }
  .heks.klein{ width: 78px; height: 59px; margin: -29px 0 0 -39px; }
}
@media (prefers-reduced-motion: reduce){
  .landschap .laag,
  .level-melding,
  .doel-melding,
  .level-balk span{ transition: none; }
  .combo-vak.heet{ animation: none; }
}

/* eigen trek van een staf, naast de andere badges in de winkel */
.stok-eigen{
  padding: 3px 9px;
  border: 1px solid rgba(233, 201, 106, .45);
  border-radius: 999px;
  background: linear-gradient(180deg, #2a1f12, #17100a);
  color: #f0dca8;
  font-size: 11px;
  letter-spacing: .3px;
  cursor: help;
}

/* ==========================================================
   Play WitchHunt: binnenkomen, spelbalk en pauze
   ========================================================== */

.spel-start{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 26px 0 6px;
  transition: opacity .5s ease, transform .5s ease;
}
body.spelmodus .spel-start{
  opacity: 0;
  transform: translateY(-18px) scale(.94);
  pointer-events: none;
}
body.boek-brandt .spel-start,
body.boek-verbrand .spel-start{
  opacity: 0;
  pointer-events: none;
}
/* de knop zelf: leer, goud, een gouden letterschildering en kleine sterretjes */
.play-houder{
  position: relative;
  display: inline-block;
  animation: play-zweef 6s ease-in-out infinite;
}
@keyframes play-zweef{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}
.play-aura{
  position: absolute;
  inset: -24px -40px;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(246, 212, 110, .38), rgba(246, 212, 110, 0) 74%);
  filter: blur(7px);
  pointer-events: none;
  animation: play-adem 4.6s ease-in-out infinite;
}
@keyframes play-adem{
  0%, 100%{ opacity: .5; transform: scale(.95); }
  50%{ opacity: 1; transform: scale(1.07); }
}
.play-knop{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 17px 56px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .28)),
    linear-gradient(180deg, #4d3718 0%, #2c1e0d 54%, #180f07 100%);
  box-shadow:
    0 0 0 1px #8f6d2b,
    0 0 0 3px #1d1409,
    inset 0 1px 0 rgba(255, 226, 140, .4),
    inset 0 -3px 8px rgba(0, 0, 0, .6),
    0 14px 34px rgba(0, 0, 0, .55),
    0 0 32px rgba(246, 212, 110, .32);
  transition: transform .22s ease, box-shadow .3s ease;
}
.play-knop::before{
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 226, 140, .45);
  border-radius: 999px;
  box-shadow: inset 0 0 20px rgba(255, 200, 90, .18);
  pointer-events: none;
}
.play-knop::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-image: var(--leer-ruis);
  opacity: .3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.play-knop:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow:
    0 0 0 1px #d5b75e,
    0 0 0 3px #1d1409,
    inset 0 1px 0 rgba(255, 236, 176, .55),
    inset 0 -3px 8px rgba(0, 0, 0, .6),
    0 18px 42px rgba(0, 0, 0, .6),
    0 0 54px rgba(246, 212, 110, .6);
}
.play-knop:active{ transform: translateY(1px) scale(.99); }
.play-knop:focus-visible{ outline: 2px solid #ffe08a; outline-offset: 5px; }
.play-houder:hover .play-aura{ animation-duration: 2.2s; }
.play-tekst{
  position: relative;
  z-index: 3;
  font: bold clamp(22px, 4.2vw, 40px)/1 Georgia, serif;
  letter-spacing: 3px;
  background: linear-gradient(180deg, #fff6d4 0%, #ffd97e 38%, #c08f2c 68%, #ffeeb4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .8)) drop-shadow(0 0 16px rgba(255, 208, 110, .55));
}
.play-schijn{
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 36%;
  z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 214, .6), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: play-veeg 4.8s ease-in-out infinite;
}
@keyframes play-veeg{
  0%{ transform: translateX(0) skewX(-18deg); }
  42%, 100%{ transform: translateX(430%) skewX(-18deg); }
}
.play-hoek{
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  border: 2px solid rgba(255, 226, 140, .8);
  transform: rotate(45deg);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 214, 120, .6);
}
.hoek-links{ left: 18px; }
.hoek-rechts{ right: 18px; }
.play-punt{
  position: absolute;
  z-index: 4;
  color: #fff6d4;
  font-size: 15px;
  text-shadow: 0 0 9px #ffd76e, 0 0 18px rgba(255, 208, 110, .7);
  pointer-events: none;
  animation: play-tinkel 3.8s ease-in-out infinite;
}
.punt-1{ left: 8%; top: 16%; animation-delay: .2s; }
.punt-2{ right: 9%; top: 22%; animation-delay: 1.2s; font-size: 12px; }
.punt-3{ left: 15%; bottom: 14%; animation-delay: 2.3s; font-size: 12px; }
.punt-4{ right: 15%; bottom: 18%; animation-delay: 3.1s; }
@keyframes play-tinkel{
  0%, 100%{ opacity: .25; transform: scale(.75) rotate(0deg); }
  45%{ opacity: 1; transform: scale(1.3) rotate(40deg); }
}
.play-onder{
  margin: 0;
  color: #cbb27a;
  font: italic 14px/1.3 Georgia, serif;
  letter-spacing: .8px;
}
.play-terug{
  margin: 0;
  color: #ffe08a;
  font: 13px var(--font-ui, Arial);
}
.play-terug[hidden]{ display: none; }
.play-terug button{
  margin-left: 6px;
  padding: 3px 10px;
  border: 1px solid rgba(233, 201, 106, .45);
  border-radius: 999px;
  background: #1d1509;
  color: #f0dca8;
  font: 12px var(--font-ui, Arial);
  cursor: pointer;
}

/* spelbalk linksboven, alleen tijdens het spel */
.spel-hud{
  position: fixed;
  z-index: 10002;
  top: max(14px, 2.4vh);
  left: calc(max(14px, 2.4vw) + var(--maan-maat) + 14px);
  display: flex;
  align-items: center;
  gap: 8px;
}
.spel-hud[hidden]{ display: none; }
.spel-knop{
  min-height: var(--tik, 44px);
  padding: 9px 14px;
  border: 1px solid #d5b75e;
  border-radius: 999px;
  background: linear-gradient(180deg, #2a1d0e, #17100a);
  color: #ffe9a8;
  font: bold 14px var(--font-ui, Arial);
  letter-spacing: 1px;
  cursor: pointer;
  box-shadow: 0 0 16px #f6d46e33, inset 0 1px 0 #f6d46e33;
  transition: background .2s ease, transform .16s ease;
}
.spel-knop:hover{ background: linear-gradient(180deg, #3d2b13, #201508); }
.spel-knop:active{ transform: translateY(1px); }

/* ---------- spelersvenster en pauzescherm ---------- */
.speler-venster,
.pauze-venster{
  width: min(470px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--rand, #e9c96a80);
  border-radius: var(--r-m, 14px);
  background: linear-gradient(180deg, var(--paneel-1, #3c2817), var(--paneel-2, #1c130a));
  color: var(--tekst-licht, #f6e7c4);
  font: 14px var(--font-ui, Arial);
  box-shadow: 0 20px 60px #000b;
}
.speler-venster::backdrop,
.pauze-venster::backdrop{ background: #060402cc; }
.speler-venster h2,
.pauze-venster h2{ margin: 0 0 4px; font: bold 21px/1.2 Georgia, serif; color: #ffe9a8; }
.speler-onder,
.pauze-onder{ margin: 0 0 14px; color: #cbb27a; font-size: 13px; }
.speler-melding,
.pauze-melding{ min-height: 1.3em; margin: 12px 0 0; color: #e8ffd9; font-size: 13px; }

.speler-lijst{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #ffffff14;
}
.speler-lijst:empty{ display: none; }
.speler-kaart{ display: flex; align-items: stretch; gap: 6px; }
.speler-kies-knop{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tik, 44px);
  padding: 8px 16px;
  border: 1px solid var(--rand, #e9c96a80);
  border-radius: 999px;
  background: linear-gradient(180deg, #241a0d, #161007);
  color: #f6e7c4;
  font: 15px var(--font-ui, Arial);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .16s ease, box-shadow .2s ease;
}
.speler-kies-knop:hover{
  background: linear-gradient(180deg, #3d2b13, #201508);
  border-color: #ffe08a;
  box-shadow: 0 0 18px #f6d46e44;
  transform: translateX(3px);
}
.speler-kies-knop:focus-visible{ outline: 2px solid #ffe08a; outline-offset: 3px; }
.speler-naam-tekst{ display: flex; align-items: center; gap: 8px; }
.chip-punten{ color: #cbb27a; font-size: 12px; }
.chip-laatst{
  padding: 2px 8px;
  border: 1px solid rgba(255, 224, 138, .45);
  border-radius: 999px;
  color: #ffe9a8;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.speler-wis-klein{
  flex: 0 0 auto;
  width: var(--tik, 44px);
  border: 1px solid rgba(233, 201, 106, .35);
  border-radius: 999px;
  background: #1a1208;
  color: #cbb27a;
  font: 17px var(--font-ui, Arial);
  cursor: pointer;
}
.speler-wis-klein:hover{ color: #ffc9c9; border-color: #e08a8a; }
.speler-geen{ margin: 0; color: #cbb27a; font-size: 13px; }

.speler-venster form label{
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: #cbb27a;
}
.speler-venster input{
  width: 100%;
  min-height: var(--tik, 44px);
  padding: 0 12px;
  border: 1px solid var(--rand, #e9c96a80);
  border-radius: 10px;
  background: #17100a;
  color: #f6e7c4;
  font: 15px var(--font-ui, Arial);
}
.speler-acties{
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.pauze-acties{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.pauze-moeilijkheid{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid #ffffff14;
}
.pauze-label{
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #cbb27a;
}
.moei-knop{
  padding: 7px 14px;
  border: 1px solid var(--rand, #e9c96a80);
  border-radius: 999px;
  background: #1d1509;
  color: #d9c7a2;
  font: 12px var(--font-ui, Arial);
  cursor: pointer;
}
.moei-knop.actief{
  background: linear-gradient(180deg, #4a3416, #2a1d0e);
  border-color: #ffe08a;
  color: #ffe9a8;
}

@media (max-width: 1460px){
  .spel-hud{
    top: calc(max(12px, 2.4vh) + var(--maan-maat) + 10px);
    left: max(12px, 2.4vw);
  }
  .spel-knop{ padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 760px){
  :root{ --maan-maat: 68px; }
}
@media (max-width: 760px){
  .play-knop{ padding: 12px 26px; }
  .play-onder{ font-size: 12px; text-align: center; }
}
@media (prefers-reduced-motion: reduce){
  .play-houder,
  .play-aura,
  .play-schijn,
  .play-punt{ animation: none !important; }
  .play-schijn{ left: 26%; }
  .spel-start{ transition: none; }
}

/* pauze: heksen, sporen en vuurvliegjes staan stil */
body.gepauzeerd .heks,
body.gepauzeerd .heks *,
body.gepauzeerd .vuurvliegjes span{
  animation-play-state: paused !important;
}
body.gepauzeerd .spel-knop#spel-pauze{
  border-color: #ffe08a;
  box-shadow: 0 0 22px #ffe08a66, inset 0 1px 0 #ffe08a44;
}

/* ==========================================================
   Landschap: levende achtergronden per level
   ========================================================== */
.landschap svg .lv-vlag,
.landschap svg .lv-riet,
.landschap svg .lv-golf,
.landschap svg .lv-twinkel,
.landschap svg .lv-mist,
.landschap svg .lv-wolk,
.landschap svg .lv-gloedje,
.landschap svg .lv-fakkel,
.landschap svg .lv-glim,
.landschap svg .lv-drijf,
.landschap svg .lv-draai,
.landschap svg .lv-schiet{
  transform-box: fill-box;
  will-change: transform, opacity;
}
@keyframes lv-wapper{
  0%, 100%{ transform: skewY(0deg) scaleX(1); }
  25%{ transform: skewY(5deg) scaleX(.94); }
  55%{ transform: skewY(-4deg) scaleX(1.05); }
  80%{ transform: skewY(2deg) scaleX(.97); }
}
.landschap svg .lv-vlag{ transform-origin: 0% 50%; animation: lv-wapper 2.4s ease-in-out infinite; }
@keyframes lv-riet-wiegt{
  0%, 100%{ transform: rotate(0deg); }
  40%{ transform: rotate(4.5deg); }
  72%{ transform: rotate(-3deg); }
}
.landschap svg .lv-riet{ transform-origin: 50% 100%; animation: lv-riet-wiegt 3.8s ease-in-out infinite; }
@keyframes lv-stroom{
  from{ transform: translateX(0); }
  to{ transform: translateX(var(--stroom, -160px)); }
}
.landschap svg .lv-golf{ animation: lv-stroom linear infinite; }
@keyframes lv-drijf{
  0%{ transform: translateX(0); opacity: 0; }
  16%{ opacity: .9; }
  82%{ opacity: .6; }
  100%{ transform: translateX(var(--stroom, -160px)); opacity: 0; }
}
.landschap svg .lv-drijf{ animation: lv-drijf linear infinite; }
@keyframes lv-twinkel{
  0%, 100%{ opacity: .25; }
  50%{ opacity: 1; }
}
.landschap svg .lv-twinkel{ animation: lv-twinkel 2.8s ease-in-out infinite; }
@keyframes lv-zweef{
  0%{ transform: translate(0, 0); opacity: 0; }
  14%{ opacity: .9; }
  86%{ opacity: .55; }
  100%{ transform: translate(var(--zweef-x, 26px), -130px); opacity: 0; }
}
.landschap svg .lv-glim{ animation: lv-zweef linear infinite; }
@keyframes lv-drijft{
  0%, 100%{ transform: translateX(0); }
  50%{ transform: translateX(48px); }
}
.landschap svg .lv-mist{ animation: lv-drijft 26s ease-in-out infinite; }
.landschap svg .lv-wolk{ animation: lv-drijft 46s ease-in-out infinite; }
@keyframes lv-gloei{
  0%, 100%{ opacity: .5; }
  50%{ opacity: 1; }
}
.landschap svg .lv-gloedje{ animation: lv-gloei 2.6s ease-in-out infinite; }
@keyframes lv-fakkel{
  0%, 100%{ opacity: 1; transform: scale(1); }
  30%{ opacity: .72; transform: scale(.88); }
  60%{ opacity: .96; transform: scale(1.1); }
}
.landschap svg .lv-fakkel{ transform-origin: 50% 50%; animation: lv-fakkel 1.15s ease-in-out infinite; }
@keyframes lv-draait{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.landschap svg .lv-draai{ transform-origin: 50% 50%; animation: lv-draait 260s linear infinite; }
@keyframes lv-schiet-weg{
  0%{ transform: translate(0, 0) rotate(26deg); opacity: 0; }
  5%{ opacity: 1; }
  26%{ transform: translate(-320px, 176px) rotate(26deg); opacity: 0; }
  100%{ transform: translate(-320px, 176px) rotate(26deg); opacity: 0; }
}
.landschap svg .lv-schiet{ animation: lv-schiet-weg 7.5s ease-out infinite; }
@media (prefers-reduced-motion: reduce){
  .landschap svg .lv-vlag, .landschap svg .lv-riet, .landschap svg .lv-golf,
  .landschap svg .lv-twinkel, .landschap svg .lv-mist, .landschap svg .lv-wolk,
  .landschap svg .lv-gloedje, .landschap svg .lv-fakkel, .landschap svg .lv-glim,
  .landschap svg .lv-drijf, .landschap svg .lv-draai, .landschap svg .lv-schiet{ animation: none; }
}
/* ==========================================================
   Scorebord: groter, breder en altijd even groot
   ========================================================== */
.scorebord{
  width: min(690px, calc(100vw - 24px));
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  font: 16px Georgia, serif;
  letter-spacing: 1px;
}
.score-groep{ display: inline-flex; align-items: center; gap: 8px; }
.score-icoon{ font-size: 19px; }
.score-label{ font-size: 13px; letter-spacing: 2.5px; }
.score-getal{ min-width: 6ch; font-size: 24px; font-variant-numeric: tabular-nums; }
.score-getal.verlies{
  color: #ff6b74;
  text-shadow: 0 0 14px #ff2a3366, 0 0 30px #ff2a3333;
}
.score-getal.verlies.puls{ transform: scale(1.22); }
.level-vak{ width: 236px; min-width: 236px; max-width: 236px; gap: 4px; }
.level-naam{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 11px; letter-spacing: .8px; }
.level-balk{ height: 6px; }
.combo-vak{ min-width: 134px; justify-content: center; gap: 6px; padding: 5px 8px; font-size: 13px; }
.combo-vak[hidden]{ display: inline-flex; visibility: hidden; }
.combo-balk{ width: 36px; height: 5px; }
.raak-vak{ min-width: 88px; text-align: center; font-size: 12.5px; }
.raak-vak[hidden]{ display: inline-flex; visibility: hidden; }
.score-spreuk{
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 8px;
  max-width: min(430px, calc(100vw - 40px));
  padding: 7px 14px;
  font: 13px Arial, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 810px){
  .scorebord{ flex-wrap: wrap; width: auto; min-width: calc(100vw - 16px); justify-content: center; gap: 10px; padding: 9px 16px; font-size: 15px; }
  .score-groep{ gap: 8px; }
  .score-icoon{ font-size: 18px; }
  .score-label{ font-size: 12px; letter-spacing: 2.5px; }
  .score-getal{ min-width: 6ch; font-size: 21px; }
  .level-vak{ width: auto; min-width: 140px; max-width: none; }
  .level-naam{ font-size: 11px; letter-spacing: 1.6px; }
  .level-balk{ height: 6px; }
  .combo-vak{ min-width: 0; font-size: 12.5px; padding: 4px 10px; }
  .combo-vak[hidden]{ display: none; }
  .raak-vak{ min-width: 0; font-size: 12.5px; }
  .raak-vak[hidden]{ display: none; }
  .score-spreuk{ font-size: 12px; padding: 5px 10px; }
}

/* ==========================================================
   HIT! en magisch bloed als een heks je raakt
   ========================================================== */
#hit-laag{
  position: fixed;
  inset: 0;
  z-index: 9998;
  overflow: hidden;
  pointer-events: none;
}
#hit-laag[hidden]{ display: none; }
.hit-waas{
  position: absolute;
  inset: 0;
  background: radial-gradient(125% 95% at 50% 50%, rgba(120,4,14,0) 38%, rgba(160,6,20,.5) 76%, rgba(96,2,12,.72) 100%);
  opacity: 0;
  animation: hit-waas 1s ease forwards;
}
.hit-tekst{
  position: absolute;
  left: 50%;
  top: 44%;
  font: bold clamp(64px, 13vw, 150px)/1 Georgia, serif;
  letter-spacing: .05em;
  color: #ff2a33;
  text-shadow: 0 0 18px #ff2a33, 0 0 64px #b3000f, 0 4px 0 #6d000d;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: hit-puls .95s ease forwards;
}
.bloedvlek{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(255,124,134,.98), rgba(226,18,40,.92) 50%, rgba(142,6,22,.6) 76%, rgba(142,6,22,0) 100%);
  box-shadow: 0 0 26px rgba(255,52,68,.6), 0 0 64px rgba(202,10,28,.4);
  opacity: 0;
  animation: bloed-vlek 1.05s ease forwards;
}
.bloedvlek.druppel{
  border-radius: 46% 54% 58% 42% / 60% 44% 56% 40%;
  background: radial-gradient(circle at 46% 40%, rgba(255,124,134,.95), rgba(200,12,30,.85) 58%, rgba(120,4,16,.4) 88%, rgba(120,4,16,0) 100%);
  animation-name: bloed-druppel;
}
@keyframes bloed-druppel{
  0%{ opacity: 0; transform: scale(.2, .1) rotate(var(--draai, 0deg)); }
  9%{ opacity: .96; transform: scale(1.05, 1.2) rotate(var(--draai, 0deg)); }
  24%{ opacity: .9; transform: scale(.97, 1.12) rotate(var(--draai, 0deg)); }
  100%{ opacity: 0; transform: scale(1.12, 1.38) rotate(var(--draai, 0deg)) translateY(14px); }
}
.bloedvlek .ster{
  position: absolute;
  border-radius: 50%;
  background: #ffdca6;
  box-shadow: 0 0 9px #ffd9a0, 0 0 18px #ffb0b4;
  opacity: 0;
  animation: bloed-ster 1.05s ease forwards;
}
@keyframes hit-puls{
  0%{ opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(-7deg); }
  12%{ opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(2deg); }
  24%{ transform: translate(-50%, -50%) scale(.98) rotate(0deg); }
  70%{ opacity: 1; }
  100%{ opacity: 0; transform: translate(-50%, -52%) scale(1.08); }
}
@keyframes bloed-vlek{
  0%{ opacity: 0; transform: scale(.18) rotate(var(--draai, 0deg)); }
  9%{ opacity: .96; transform: scale(1.06) rotate(var(--draai, 0deg)); }
  24%{ opacity: .88; transform: scale(.97) rotate(var(--draai, 0deg)); }
  100%{ opacity: 0; transform: scale(1.14) rotate(var(--draai, 0deg)) translateY(7px); }
}
@keyframes bloed-ster{
  0%{ opacity: 0; transform: scale(.3); }
  14%{ opacity: 1; transform: scale(1.25); }
  45%{ opacity: .85; }
  100%{ opacity: 0; transform: scale(.6); }
}
@keyframes hit-waas{
  0%{ opacity: 0; }
  14%{ opacity: 1; }
  100%{ opacity: 0; }
}
@keyframes hit-schok{
  0%, 100%{ transform: translate3d(0, 0, 0); }
  18%{ transform: translate3d(-8px, 5px, 0); }
  38%{ transform: translate3d(7px, -6px, 0); }
  58%{ transform: translate3d(-5px, 3px, 0); }
  78%{ transform: translate3d(3px, -2px, 0); }
}
body.hit-schok #boek,
body.hit-schok .landschap{ animation: hit-schok .55s ease; }
@media (prefers-reduced-motion: reduce){
  .hit-tekst{ animation: none; opacity: .92; }
  .bloedvlek{ animation: none; opacity: .55; }
  .bloedvlek .ster{ animation: none; opacity: .8; }
  .hit-waas{ animation: none; opacity: .4; }
  body.hit-schok #boek,
  body.hit-schok .landschap{ animation: none; }
}

/* ==========================================================
   Heks die oplaadt en terugschiet
   ========================================================== */
.heks-laadt{
  filter: drop-shadow(0 0 10px rgba(255, 130, 60, .5)) drop-shadow(0 0 26px rgba(255, 60, 90, .45)) drop-shadow(0 8px 10px rgba(0, 0, 0, .7));
}
.heks-laadt::after{
  content: '';
  position: absolute;
  inset: -55%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 205, 125, .75), rgba(255, 88, 118, .45) 52%, rgba(255, 88, 118, 0) 100%);
  border: 1px solid rgba(255, 185, 125, .65);
  box-shadow: 0 0 34px rgba(255, 130, 75, .75), inset 0 0 30px rgba(255, 165, 105, .55);
  animation: heks-laadt-gloed .42s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heks-laadt-gloed{
  from{ opacity: .6; transform: scale(.88); }
  to{ opacity: 1; transform: scale(1.1); }
}
.heks-schiet::before{
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 240, 200, .85), rgba(255, 120, 60, .5) 45%, rgba(255, 120, 60, 0) 100%);
  animation: heks-schiet-flits .5s ease-out forwards;
  pointer-events: none;
}
@keyframes heks-schiet-flits{
  from{ opacity: 1; transform: scale(.6); }
  to{ opacity: 0; transform: scale(1.6); }
}
.heks-flits{
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  z-index: 40;
  pointer-events: none;
  animation: heks-flits-vlucht .46s cubic-bezier(.45, 0, .85, .55) forwards;
}
.heks-flits i{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #fff3d6, #ffb45a 38%, #b326ff 72%, rgba(120, 20, 200, 0) 100%);
  box-shadow: 0 0 18px #ff7a3c, 0 0 44px rgba(160, 43, 255, .55), 0 0 90px rgba(106, 31, 184, .4);
}
.heks-flits::after{
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 9px;
  margin: -4.5px 0 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 130, 70, 0), rgba(255, 150, 90, .75));
  filter: blur(3px);
  transform-origin: 0 50%;
  transform: rotate(var(--flits-hoek, 0deg)) translateX(-46px);
}
@keyframes heks-flits-vlucht{
  0%{ transform: translate3d(0, 0, 0) scale(.5); opacity: 1; }
  70%{ opacity: 1; }
  100%{ transform: translate3d(var(--flits-x, 0px), var(--flits-y, 0px), 0) scale(2.6); opacity: .05; }
}
.score-stijging.verlies{
  color: #ff6b74;
  text-shadow: 0 0 12px rgba(255, 42, 51, .55);
}
body.gepauzeerd .heks::after,
body.gepauzeerd .heks::before{ animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce){
  .heks-laadt::after,
  .heks-schiet::before,
  .heks-flits{ animation: none; }
  .heks-flits{ opacity: .9; }
}