/* ============================================================
   Sterrenjungle: stijlsysteem
   Rustige, premium look: diep water-ruimteblauw, zachte gloed,
   grote tikdoelen, ronde vormen. Touch-first.
   ============================================================ */

:root {
  /* Wereldkleuren */
  --diep1: #141a3d;      /* ruimtediep */
  --diep2: #1d2b5e;      /* waterdiep */
  --diep3: #24417a;      /* middenwater */
  --gloed: #8fd8ff;
  --schuim: #eafcff;

  /* De zussen */
  --pippa: #ffb3d9;      /* lichtroze */
  --pippa-diep: #e56aa9;
  --pippa-donker: #8f2f63;
  --lenne: #7fe8d8;      /* appelblauwzeegroen */
  --lenne-diep: #2fb9a5;
  --lenne-donker: #0f5f56;

  /* De heks */
  --heks-groen: #7fc46a;
  --heks-roze: #e88ac6;
  --slijm: #a4de6b;

  /* UI */
  --goud: #ffd66b;
  --goud-diep: #e0a72f;
  --paneel: rgba(21, 28, 66, 0.82);
  --paneel-rand: rgba(143, 216, 255, 0.35);
  --inkt: #fdfdff;
  --inkt-zacht: #c9d6f2;
  --fout-zacht: #ffb489;
  --goed: #8be89b;

  --rond: 26px;
  --rond-klein: 16px;
  --schaduw: 0 10px 30px rgba(5, 8, 25, 0.45);
  --tik-min: 64px;

  /* Ruimte en ritme */
  --ruimte-1: 6px;
  --ruimte-2: 12px;
  --ruimte-3: 20px;
  --ruimte-4: 32px;

  /* Overgangsduur: kort voor tikken, middel voor scenes, lang voor sfeer */
  --duur-kort: 0.15s;
  --duur-middel: 0.45s;
  --duur-lang: 0.9s;

  /* Lagen, van laag naar hoog */
  --z-hud: 5;
  --z-overlay: 50;
  --z-toast: 60;
  --z-vlieg: 70;
  --z-viering: 200;

  --font: ui-rounded, "Segoe UI", -apple-system, "Trebuchet MS", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--diep1);
  font-family: var(--font);
  color: var(--inkt);
  -webkit-text-size-adjust: 100%;
}

body {
  touch-action: manipulation;                 /* geen dubbeltik-zoom */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  position: fixed;
  inset: 0;
  overscroll-behavior: none;
}

#app {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Scene-wortel: elke scene vult het scherm */
.scene {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: sceneIn var(--duur-middel) ease both;
}
.scene.weg { animation: sceneUit var(--duur-middel) ease both; }
@keyframes sceneIn { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes sceneUit { from { opacity: 1; } to { opacity: 0; } }

.scene-achtergrond {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.scene-achtergrond svg { width: 100%; height: 100%; display: block; }

/* Parallax-diepte: de lagen van de achtergrond drijven traag en tegengesteld.
   prefers-reduced-motion zet dit vanzelf stil (globale regel onderaan). */
.scene-achtergrond .laag-midden {
  animation: laagDrift calc(var(--duur-lang) * 38) ease-in-out infinite alternate;
}
.scene-achtergrond .laag-voor {
  animation: laagDrift calc(var(--duur-lang) * 26) ease-in-out infinite alternate-reverse;
}
@keyframes laagDrift {
  from { transform: translateX(0); }
  to { transform: translateX(-12px); }
}

.scene-inhoud {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Deeltjes-canvas (bubbels en sterrenstof).
   Een canvas is een vervangen element: bij width/height auto valt hij terug op
   zijn intrinsieke 300x150 en rekt inset: 0 hem niet op. De expliciete 100%
   is dus geen dubbelop maar de enige reden dat deze laag de scene vult.
   Weghalen zet de deeltjes terug in een vakje linksboven. */
#deeltjes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ------------------------------------------------------------
   Knoppen
   ------------------------------------------------------------ */
.knop {
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(18px, 2.6vmin, 26px);
  color: var(--inkt);
  background: linear-gradient(180deg, #3b5aa5, #27407e);
  border: 2px solid rgba(143, 216, 255, 0.5);
  border-radius: var(--rond);
  padding: 16px 28px;
  min-height: var(--tik-min);
  min-width: var(--tik-min);
  box-shadow: var(--schaduw), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  line-height: 1.15;
}
.knop:active { transform: scale(0.94); filter: brightness(1.12); }
.knop svg { flex: 0 0 auto; }

.knop.groot { font-size: clamp(22px, 3.4vmin, 34px); padding: 20px 40px; border-radius: 34px; }
.knop.pippa { background: linear-gradient(180deg, var(--pippa), var(--pippa-diep)); color: #571338; border-color: #fff0f8; }
.knop.lenne { background: linear-gradient(180deg, var(--lenne), var(--lenne-diep)); color: #093f38; border-color: #eafffb; }
.knop.goud  { background: linear-gradient(180deg, var(--goud), var(--goud-diep)); color: #57390a; border-color: #fff3d0; }
.knop.stil  { background: rgba(21, 28, 66, 0.6); border-color: rgba(143, 216, 255, 0.3); }
.knop.rondje {
  border-radius: 50%;
  width: var(--tik-min);
  height: var(--tik-min);
  padding: 0;
}
.knop.uit { opacity: 0.45; pointer-events: none; }

/* ------------------------------------------------------------
   Panelen en lagen
   ------------------------------------------------------------ */
.paneel {
  background: var(--paneel);
  border: 2px solid var(--paneel-rand);
  border-radius: var(--rond);
  box-shadow: var(--schaduw);
  backdrop-filter: blur(6px);
  padding: 22px;
}

.overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 11, 32, 0.62);
  animation: fadeIn 0.3s ease both;
  padding: 20px;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.overlay .paneel {
  max-width: min(640px, 94vw);
  max-height: 90%;
  overflow-y: auto;
  animation: popIn 0.4s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
@keyframes popIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------
   HUD (boven in beeld)
   ------------------------------------------------------------ */
.hud {
  position: relative;
  z-index: var(--z-hud);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) calc(18px + env(safe-area-inset-right, 0px)) 14px calc(18px + env(safe-area-inset-left, 0px));
  pointer-events: none;
}
.hud > * { pointer-events: auto; }
.hud .vulling { flex: 1; pointer-events: none; }

.gemteller {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--paneel);
  border: 2px solid var(--paneel-rand);
  border-radius: 999px;
  padding: 8px 20px 8px 12px;
  font-size: clamp(20px, 3vmin, 28px);
  font-weight: 900;
  color: var(--goud);
  min-height: 52px;
}
.gemteller svg { width: 30px; height: 30px; flex: 0 0 auto; }
.gemteller.tik { animation: gemTik 0.45s ease; }
.vlieggem svg { width: 100%; height: 100%; }
@keyframes gemTik { 30% { transform: scale(1.18); } }

.samenmeter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--paneel);
  border: 2px solid var(--paneel-rand);
  border-radius: 999px;
  padding: 8px 16px;
  min-height: 52px;
}
.samenmeter .bolletje {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.samenmeter .bolletje.vol {
  background: linear-gradient(135deg, var(--pippa), var(--lenne));
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 179, 217, 0.8);
}

/* ------------------------------------------------------------
   Spraakballon en verteller
   ------------------------------------------------------------ */
.ballonrij {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 10px 18px;
}
.ballonrij .kop { flex: 0 0 auto; width: clamp(72px, 12vmin, 120px); }
.ballonrij .kop svg { width: 100%; height: auto; display: block; }

.ballon {
  position: relative;
  background: var(--schuim);
  color: #1c2247;
  border-radius: 22px;
  padding: 14px 20px;
  font-size: clamp(18px, 2.8vmin, 26px);
  font-weight: 700;
  line-height: 1.35;
  box-shadow: var(--schaduw);
  max-width: 72ch;
  animation: popIn 0.35s ease both;
}
.ballon::before {
  content: "";
  position: absolute;
  left: -10px;
  bottom: 16px;
  border: 10px solid transparent;
  border-right-color: var(--schuim);
}
.ballon.pippa { border: 3px solid var(--pippa); }
.ballon.lenne { border: 3px solid var(--lenne); }
.ballon.heks  { background: #eaf7d8; border: 3px solid var(--heks-groen); }

.spreekknop {
  position: relative;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------
   Minigame-lay-out
   ------------------------------------------------------------ */
.spel-kader {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 18px 14px;
  gap: 10px;
}

.spel-podium {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Keuzetegels */
.tegels {
  display: grid;
  gap: clamp(10px, 2vmin, 22px);
  width: 100%;
  max-width: 1000px;
  padding: 6px;
}
.tegels.k2 { grid-template-columns: repeat(2, 1fr); }
.tegels.k3 { grid-template-columns: repeat(3, 1fr); }
.tegels.k4 { grid-template-columns: repeat(4, 1fr); }
@media (max-aspect-ratio: 4/5) {
  .tegels.k3, .tegels.k4 { grid-template-columns: repeat(2, 1fr); }
}

.tegel {
  color: var(--inkt);
  font-family: inherit;
  background: linear-gradient(180deg, rgba(46, 66, 128, 0.92), rgba(30, 44, 92, 0.92));
  border: 3px solid rgba(143, 216, 255, 0.4);
  border-radius: var(--rond);
  min-height: clamp(84px, 16vmin, 150px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: clamp(26px, 5vmin, 46px);
  font-weight: 900;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.2s ease, filter 0.2s ease;
  box-shadow: var(--schaduw);
  padding: 10px;
  text-align: center;
  line-height: 1.2;
}
.tegel:active { transform: scale(0.94); }
.tegel .plaatje { font-size: clamp(44px, 9vmin, 84px); line-height: 1; }
.tegel .plaatje svg { width: clamp(52px, 10vmin, 96px); height: clamp(52px, 10vmin, 96px); }
.tegel .plaatje.groot svg { width: clamp(96px, 15vmin, 170px); height: clamp(96px, 15vmin, 170px); }
.tegel .label { font-size: clamp(16px, 2.4vmin, 24px); color: var(--inkt-zacht); font-weight: 700; }

.tegel.goed {
  border-color: var(--goed);
  background: linear-gradient(180deg, #2e6b46, #1f4a31);
  animation: sprongGoed 0.6s ease;
}
.tegel.fout {
  border-color: var(--fout-zacht);
  animation: wiebel 0.5s ease;
}
.tegel.gedimd { opacity: 0.35; pointer-events: none; }
.tegel.hint { animation: hintGloed 1.1s ease infinite; }
.tegel.draai { animation: kaartDraai 0.3s ease; }
@keyframes kaartDraai {
  0% { transform: rotateY(90deg) scale(0.9); }
  100% { transform: rotateY(0) scale(1); }
}

@keyframes sprongGoed { 30% { transform: scale(1.1); } 55% { transform: scale(0.97); } }
@keyframes wiebel {
  20% { transform: translateX(-9px) rotate(-2deg); }
  45% { transform: translateX(8px) rotate(2deg); }
  70% { transform: translateX(-5px); }
}
@keyframes hintGloed {
  0%, 100% { box-shadow: var(--schaduw); }
  50% { box-shadow: 0 0 26px 6px rgba(255, 214, 107, 0.75); }
}

/* Huisdier-hulpknop (Oeloe of Plons) */
.pethelper {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--paneel);
  border: 3px solid var(--paneel-rand);
  border-radius: 22px;
  padding: 6px 10px 4px;
  cursor: pointer;
  font-family: inherit;
  color: var(--inkt);
  transition: transform 0.12s ease, filter 0.2s ease;
  box-shadow: var(--schaduw);
  animation: petWink 3.4s ease-in-out infinite;
}
.pethelper:active { transform: scale(0.92); }
.pethelper .pet { width: clamp(46px, 8vmin, 74px); }
.pethelper .pet svg { width: 100%; height: auto; display: block; }
.pethelper .tekst { font-size: clamp(11px, 1.7vmin, 15px); font-weight: 800; color: var(--gloed); }
.pethelper.moe { filter: grayscale(0.7) brightness(0.75); animation: none; pointer-events: none; }
@keyframes petWink {
  0%, 92%, 100% { transform: translateY(0) rotate(0); }
  96% { transform: translateY(-4px) rotate(-4deg); }
}

/* Voortgangsstipjes binnen een spelsessie */
.stipjes { display: flex; gap: 10px; justify-content: center; padding: 6px; }
.stip {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.3);
}
.stip.nu { background: var(--gloed); box-shadow: 0 0 10px var(--gloed); }
.stip.af { background: var(--goed); border-color: var(--goed); }

/* Beurtbanner */
.beurtbanner {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  animation: bannerWeg 2.4s ease both;
}
.beurtbanner .strook {
  font-size: clamp(34px, 6.5vmin, 64px);
  font-weight: 900;
  padding: 18px 56px;
  border-radius: 999px;
  box-shadow: var(--schaduw);
}
.beurtbanner.pippa .strook { background: linear-gradient(180deg, var(--pippa), var(--pippa-diep)); color: #571338; }
.beurtbanner.lenne .strook { background: linear-gradient(180deg, var(--lenne), var(--lenne-diep)); color: #093f38; }
@keyframes bannerWeg {
  0% { opacity: 0; transform: scale(0.7); }
  14% { opacity: 1; transform: scale(1.04); }
  20% { transform: scale(1); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ------------------------------------------------------------
   Wereldkaart en zones
   ------------------------------------------------------------ */
.kaartplek {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.15s ease;
  border: none;
  background: none;
  font-family: inherit;
  color: var(--inkt);
  padding: 8px;
}
.kaartplek:active { transform: translate(-50%, -50%) scale(0.92); }
.kaartplek .bol {
  width: clamp(84px, 13vmin, 130px);
  height: clamp(84px, 13vmin, 130px);
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--schaduw), 0 0 26px rgba(143, 216, 255, 0.35);
  overflow: hidden;
  background: var(--diep3);
}
.kaartplek .bol svg { width: 100%; height: 100%; display: block; }
.kaartplek .naam {
  font-weight: 900;
  font-size: clamp(14px, 2.2vmin, 22px);
  background: var(--paneel);
  border-radius: 999px;
  padding: 5px 14px;
  border: 2px solid var(--paneel-rand);
  white-space: nowrap;
}
.kaartplek.dicht .bol { filter: grayscale(0.6) brightness(1.35) contrast(0.85); opacity: 0.85; }
.kaartplek.klaar .bol { border-color: var(--goed); }
.kaartplek .slotje {
  position: absolute;
  top: 4px; right: 4px;
  background: var(--paneel);
  border-radius: 50%;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--paneel-rand);
  font-size: 18px;
}

.zoneplek {
  position: absolute;
  transform: translate(-50%, -50%);
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  padding: 12px;   /* ruim tikdoel voor kleutervingers */
  -webkit-tap-highlight-color: transparent;
}
.zoneplek svg { display: block; }
.zoneplek .halo {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  animation: hintGloed 2.2s ease infinite;
  pointer-events: none;
}
.zoneplek:active { transform: translate(-50%, -50%) scale(0.9); }
.zoneplek.gedaan { filter: saturate(0.6); }
.zoneplek.gedaan .halo { display: none; }
.zoneplek .vinkje {
  position: absolute;
  right: -6px; top: -6px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--goed);
  color: #0d3a1c;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  border: 2px solid #fff;
}

/* Zweven voor wezens en plekken */
.zweef { animation: zweef 4.2s ease-in-out infinite; }
.zweef2 { animation: zweef 5.1s ease-in-out 0.8s infinite; }
@keyframes zweef {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50% { transform: translate(-50%, -50%) translateY(-12px); }
}

/* ------------------------------------------------------------
   Cutscenes
   ------------------------------------------------------------ */
.cutscene {
  background: #0b0e26;
}
.cutscene .doek {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.cutscene .doek svg { width: 100%; height: 100%; display: block; }
.cutscene .balk {
  position: relative;
  z-index: 4;
  padding: 16px 20px 20px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  background: linear-gradient(180deg, transparent, rgba(8, 10, 30, 0.9) 30%);
}
.cutscene .verder {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 6;
}

.aftiteling {
  text-align: center;
  font-size: clamp(18px, 3vmin, 28px);
  line-height: 2.1;
  color: var(--inkt-zacht);
}
.aftiteling h2 { color: var(--inkt); font-size: clamp(28px, 5vmin, 46px); margin-bottom: 8px; }

/* ------------------------------------------------------------
   Samenkracht-sluipspel
   ------------------------------------------------------------ */
.handzone {
  position: absolute;
  bottom: calc(3% + env(safe-area-inset-bottom, 0px));
  width: clamp(110px, 19vmin, 180px);
  height: clamp(110px, 19vmin, 180px);
  border-radius: 50%;
  border: 4px dashed rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 8;
  transition: box-shadow 0.2s ease, background 0.2s ease;
  touch-action: none;
}
.handzone.pippa { left: calc(4% + env(safe-area-inset-left, 0px)); border-color: var(--pippa); }
.handzone.lenne { right: calc(4% + env(safe-area-inset-right, 0px)); border-color: var(--lenne); }
.handzone svg { width: 62%; height: 62%; opacity: 0.9; }
.handzone.vast { border-style: solid; }
.handzone.pippa.vast { background: rgba(255, 179, 217, 0.28); box-shadow: 0 0 34px rgba(255, 179, 217, 0.8); }
.handzone.lenne.vast { background: rgba(127, 232, 216, 0.28); box-shadow: 0 0 34px rgba(127, 232, 216, 0.8); }

.sluipbalk {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  width: min(46vw, 420px);
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border: 2px solid var(--paneel-rand);
  overflow: hidden;
  z-index: 8;
}
.sluipbalk .vul {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pippa), var(--lenne));
  transition: width 0.25s linear;
}

/* Onzichtbaar-effect op de zusjes */
.onzichtbaar { opacity: 0.22; filter: saturate(0.4); transition: opacity 0.25s ease, filter 0.25s ease; }

/* ------------------------------------------------------------
   Huisje, kleedkamer, huisdieren
   ------------------------------------------------------------ */
.winkelrij {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 10px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.winkelkaart {
  color: var(--inkt);
  font-family: inherit;
  flex: 0 0 auto;
  width: clamp(130px, 19vmin, 190px);
  background: linear-gradient(180deg, rgba(46, 66, 128, 0.92), rgba(30, 44, 92, 0.92));
  border: 3px solid rgba(143, 216, 255, 0.4);
  border-radius: var(--rond);
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease;
}
.winkelkaart:active { transform: scale(0.94); }
.winkelkaart .plaatje { height: clamp(64px, 10vmin, 96px); display: flex; align-items: center; }
.winkelkaart .plaatje svg { height: 100%; width: auto; }
.winkelkaart .naam { font-weight: 800; font-size: clamp(14px, 2vmin, 19px); text-align: center; }
.winkelkaart .prijs {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--goud); font-weight: 900;
  font-size: clamp(15px, 2.2vmin, 21px);
}
.winkelkaart .prijs svg { width: 18px; height: 18px; }
.winkelkaart.bezit { border-color: var(--goed); }
.winkelkaart.aan { border-color: #fff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.45); }
.winkelkaart.teduur { opacity: 0.55; }

.hartjes { display: flex; gap: 6px; font-size: clamp(20px, 3vmin, 30px); }
.hartjes .leeg { opacity: 0.25; }

/* Huisje-plekken */
.huisplek {
  position: absolute;
  transform: translate(-50%, -100%);
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  padding: 0;
}
.huisplek .leegvak {
  width: clamp(64px, 10vmin, 100px);
  height: clamp(64px, 10vmin, 100px);
  border-radius: var(--rond-klein);
  border: 3px dashed rgba(255, 255, 255, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(20, 26, 61, 0.35);
}
.huisplek svg { display: block; height: clamp(80px, 13vmin, 130px); width: auto; }
.huisplek:active { transform: translate(-50%, -100%) scale(0.92); }

/* ------------------------------------------------------------
   Toast en beloningen
   ------------------------------------------------------------ */
.toast {
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  background: var(--schuim);
  color: #1c2247;
  font-weight: 800;
  font-size: clamp(17px, 2.5vmin, 24px);
  border-radius: 999px;
  padding: 12px 26px;
  box-shadow: var(--schaduw);
  animation: toastIn 2.6s ease both;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
@keyframes toastIn {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  10%, 84% { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

.vlieggem {
  position: fixed;
  z-index: var(--z-vlieg);
  width: 34px; height: 34px;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.5, -0.2, 0.4, 1), opacity 0.8s ease;
}

.sticker {
  position: absolute;
  z-index: 40;
  left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: stickerIn 1.15s cubic-bezier(0.34, 1.5, 0.5, 1) both;
}
@keyframes stickerIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(-14deg); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(3deg); }
  60% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.05); }
}

/* ------------------------------------------------------------
   Titel en menu's
   ------------------------------------------------------------ */
.titelblok {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vmin, 26px);
  text-align: center;
  padding: 20px;
}
.speltitel {
  font-size: clamp(40px, 9vmin, 92px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1.02;
  background: linear-gradient(180deg, #fff, var(--gloed));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 6px 18px rgba(143, 216, 255, 0.35));
}
.speltitel .accent { background: linear-gradient(90deg, var(--pippa), var(--lenne)); -webkit-background-clip: text; background-clip: text; }
.ondertitel {
  font-size: clamp(18px, 3vmin, 30px);
  font-weight: 700;
  color: var(--inkt-zacht);
}
.menuknoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.spelerkaart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--paneel);
  border: 3px solid var(--paneel-rand);
  border-radius: var(--rond);
  padding: 18px;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  min-width: clamp(150px, 22vmin, 220px);
  font-family: inherit;
  color: var(--inkt);
}
.spelerkaart:active { transform: scale(0.95); }
.spelerkaart.pippa { border-color: var(--pippa); }
.spelerkaart.lenne { border-color: var(--lenne); }
.spelerkaart svg { width: clamp(90px, 14vmin, 150px); height: auto; }
.spelerkaart .naam { font-size: clamp(20px, 3vmin, 28px); font-weight: 900; }
.spelerkaart .sub { font-size: clamp(13px, 1.9vmin, 17px); color: var(--inkt-zacht); font-weight: 700; }
/* Gekozen kaart (figuur of plek): moet voor een kind van vijf in een oogopslag
   opvallen, dus goud net als .tierknop.aan, plus een lichte groei en gloed.
   Komt na .pippa/.lenne zodat de goudrand wint bij gelijke specificiteit. */
.spelerkaart.aan {
  border-color: var(--goud);
  background: rgba(224, 167, 47, 0.25);
  transform: scale(1.05);
  box-shadow: 0 0 22px rgba(255, 214, 107, 0.55);
}

/* Tier-kiezer */
.tierlijst { display: flex; flex-direction: column; gap: 10px; }
.tierknop {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: var(--rond-klein);
  border: 3px solid rgba(143, 216, 255, 0.35);
  background: rgba(46, 66, 128, 0.6);
  color: var(--inkt);
  font-family: inherit;
  font-size: clamp(16px, 2.3vmin, 21px);
  font-weight: 800;
  padding: 12px 18px;
  min-height: 56px;
  cursor: pointer;
  text-align: left;
}
.tierknop.aan { border-color: var(--goud); background: rgba(224, 167, 47, 0.25); }
.tierknop:active { transform: scale(0.97); }

/* Naamveld van het gastscherm: de enige tekstinvoer in het spel */
.naamveld {
  width: 100%;
  font-family: inherit;
  font-size: clamp(22px, 3.6vmin, 34px);
  font-weight: 800;
  color: var(--inkt);
  background: rgba(20, 26, 61, 0.55);
  border: 3px solid var(--paneel-rand);
  border-radius: var(--rond-klein);
  padding: 12px 18px;
  text-align: center;
  user-select: text;
  -webkit-user-select: text;
}
.naamveld:focus { outline: none; border-color: var(--goud); }

.instelrij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(143, 216, 255, 0.18);
  font-weight: 800;
  font-size: clamp(16px, 2.4vmin, 22px);
}

h2.koptitel {
  font-size: clamp(24px, 4vmin, 38px);
  font-weight: 900;
  text-align: center;
  padding: 6px 0 2px;
}
p.subtekst {
  color: var(--inkt-zacht);
  text-align: center;
  font-weight: 700;
  font-size: clamp(14px, 2.2vmin, 19px);
}

/* Letterslots voor woorden bouwen */
.letterslots { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.letterslot {
  width: clamp(58px, 9vmin, 92px);
  height: clamp(58px, 9vmin, 92px);
  border-radius: var(--rond-klein);
  border: 3px dashed rgba(255, 255, 255, 0.45);
  background: rgba(20, 26, 61, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(30px, 5.5vmin, 52px);
  font-weight: 900;
}
.letterslot.vol { border-style: solid; border-color: var(--gloed); background: rgba(46, 66, 128, 0.9); }
.letterslot.goed { border-color: var(--goed); background: #2e6b46; }

/* Portret-hint (spel is landscape-eerst maar werkt overal) */
.draaihint { display: none; }
@media (max-aspect-ratio: 3/4) and (max-width: 560px) {
  .draaihint {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 90;
    background: rgba(8, 11, 32, 0.92);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 30px;
    font-size: 20px;
    font-weight: 800;
  }
}

/* Toegankelijkheid */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(143, 216, 255, 0.35); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }