/* ============================================================
   Boer Opa en de twintig tractors
   Stijl: klei / hout / karton / vilt — warm, zacht, rustig
   ============================================================ */

:root{
  /* Palet */
  --paper:      #F3E4C8;   /* karton */
  --paper-dark: #E2CBA4;
  --cream:      #FBF3E2;
  --sky:        #CDE7F0;
  --sky-deep:   #A9D4E4;
  --grass:      #A9C86B;   /* vilt */
  --grass-dark: #86A94F;
  --wood:       #C08D5A;
  --wood-dark:  #8B5E38;
  --ink:        #4A3524;
  --ink-soft:   #6E543C;
  --clay-red:   #D9614C;
  --clay-green: #6FA85C;
  --clay-blue:  #5D9CC4;
  --clay-yellow:#EFC44E;
  --sun:        #F2C14E;
  --gold:       #E8B93B;
  --mud:        #8A6440;
  --white:      #FFFBF2;

  /* Maatvoering in "speeleenheden" (stage = 1000 x 600) */
  --stage-w: 1000px;
  --stage-h: 600px;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;

  --shadow-soft: 0 6px 0 rgba(74,53,36,.18), 0 10px 22px rgba(74,53,36,.18);
  --shadow-lift: 0 12px 0 rgba(74,53,36,.16), 0 20px 34px rgba(74,53,36,.24);

  --font: "Baloo 2", "Chalkboard SE", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
}

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

html, body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #2E2318;
  font-family: var(--font);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

body{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

img, svg{ display: block; pointer-events: none; }

button{
  font-family: inherit;
  color: inherit;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

/* ---------- Achtergrond achter de letterbox ---------- */
#backdrop{
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--sky) 0%, var(--sky-deep) 55%, #8FC0D3 100%);
  z-index: 0;
}
#backdrop::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass-dark) 100%);
  border-radius: 50% 50% 0 0 / 12% 12% 0 0;
}

/* ---------- De speeldoos ---------- */
#stage{
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  margin-left: calc(var(--stage-w) / -2);
  margin-top: calc(var(--stage-h) / -2);
  transform: scale(var(--scale, 1));
  transform-origin: center center;
  z-index: 1;
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(30,20,10,.45);
  background: var(--cream);
}

#screens, #overlay, #fx{
  position: absolute;
  inset: 0;
}
#overlay{ z-index: 60; pointer-events: none; }
#overlay.on{ pointer-events: auto; }
#fx{ z-index: 80; pointer-events: none; }

.screen{
  position: absolute;
  inset: 0;
  display: block;
  animation: screen-in .35s ease both;
}
@keyframes screen-in{
  from{ opacity: 0; transform: scale(.985); }
  to{ opacity: 1; transform: scale(1); }
}
.screen.leaving{ animation: screen-out .22s ease both; pointer-events: none; }
@keyframes screen-out{
  to{ opacity: 0; transform: scale(1.01); }
}

/* Zachte korrel over alles heen: stop-motion gevoel */
.grain{
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.55'/></svg>");
  z-index: 40;
}

/* ---------- Globale knoppen ---------- */
#chrome{
  position: fixed;
  z-index: 200;
  left: 0; top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.chrome-btn{
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: var(--shadow-soft);
  pointer-events: auto;
  display: grid;
  place-items: center;
  font-size: 30px;
  line-height: 1;
  border: 4px solid var(--paper-dark);
  transition: transform .12s ease;
}
.chrome-btn:active{ transform: scale(.92); }
#btn-sound{ right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); }
#btn-home{ left: max(14px, env(safe-area-inset-left)); top: max(14px, env(safe-area-inset-top)); }
#btn-home[hidden]{ display: none; }
#btn-parent{
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  width: 54px; height: 54px;
  opacity: .32;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}
#btn-parent.holding{ opacity: .9; transform: scale(1.08); }

/* ============================================================
   Herbruikbare bouwstenen
   ============================================================ */

.fill{ position: absolute; inset: 0; }

.scene-sky{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #DCF0F7 0%, var(--sky) 46%, #E9F3E0 62%);
}
.scene-ground{
  position: absolute; left: -4%; right: -4%; bottom: -6%;
  height: 46%;
  background: linear-gradient(180deg, var(--grass) 0%, var(--grass-dark) 100%);
  border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  box-shadow: inset 0 8px 0 rgba(255,255,255,.25);
}
.scene-ground.mud{
  background: linear-gradient(180deg, #A4794F 0%, #7B5735 100%);
}
.scene-ground.field{
  background: linear-gradient(180deg, #D9B96A 0%, #B9954B 100%);
}

/* Kartonnen wolk */
.cloud{
  position: absolute;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 5px 0 rgba(120,140,150,.18);
  opacity: .95;
}

/* Grote vriendelijke knop */
.big-btn{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 34px;
  border-radius: var(--r-lg);
  background: var(--sun);
  color: var(--ink);
  font-size: 34px;
  font-weight: 800;
  box-shadow: var(--shadow-soft);
  border: 5px solid rgba(0,0,0,.08);
  transition: transform .12s ease;
}
.big-btn:active{ transform: translateY(4px) scale(.98); }
.big-btn.green{ background: var(--clay-green); color: var(--white); }
.big-btn.red{ background: var(--clay-red); color: var(--white); }

/* Ronde icoonknop in-scherm */
.round-btn{
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--cream);
  border: 6px solid var(--paper-dark);
  box-shadow: var(--shadow-soft);
  display: grid; place-items: center;
  font-size: 40px;
  transition: transform .12s ease;
}
.round-btn:active{ transform: scale(.93); }

.title-plank{
  display: inline-block;
  padding: 14px 40px;
  background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
  color: var(--cream);
  border-radius: 16px;
  box-shadow: var(--shadow-soft), inset 0 3px 0 rgba(255,255,255,.25);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: .5px;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
  position: relative;
}
.title-plank::before,
.title-plank::after{
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(0,0,0,.22);
  top: 50%;
  margin-top: -6px;
}
.title-plank::before{ left: 14px; }
.title-plank::after{ right: 14px; }

/* ============================================================
   Startscherm
   ============================================================ */
.start-wrap{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  z-index: 10;
}
.start-title{
  font-size: 62px;
  font-weight: 800;
  color: var(--ink);
  text-align: center;
  line-height: 1.02;
  text-shadow: 0 3px 0 rgba(255,255,255,.6);
}
.start-title small{ display: block; font-size: 34px; color: var(--ink-soft); }
.start-cast{
  display: flex; align-items: flex-end; gap: 10px;
  height: 210px;
}
.start-cast .fig{ height: 100%; }
.start-play{
  width: 150px; height: 150px;
  border-radius: 50%;
  background: var(--clay-green);
  border: 8px solid rgba(255,255,255,.55);
  box-shadow: var(--shadow-lift);
  display: grid; place-items: center;
  animation: pulse 2.4s ease-in-out infinite;
}
.start-play svg{ width: 74px; height: 74px; margin-left: 10px; }
@keyframes pulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.06); }
}

/* ============================================================
   Verhaal / hoofdstukkaarten
   ============================================================ */
.story{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px; z-index: 10;
  padding: 40px 90px;
  text-align: center;
  /* Deze laag bedekt het hele scherm maar bevat alleen plaatjes en
     tekst. Zonder dit ving hij de tik op die voor de verder-knop
     bedoeld was. */
  pointer-events: none;
}
.story-art{ height: 260px; display: flex; align-items: flex-end; gap: 16px; }
.story-art .fig{ height: 100%; }
.story-text{
  font-size: 34px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255,251,242,.85);
  border-radius: var(--r-md);
  padding: 14px 26px;
  box-shadow: var(--shadow-soft);
  max-width: 780px;
}
.story-next{
  position: absolute; right: 40px; bottom: 34px;
  z-index: 70;                 /* boven de verhaallaag, anders niet aan te tikken */
}

/* ============================================================
   Boerderijkaart
   ============================================================ */
.map-svg{ position: absolute; inset: 0; width: 100%; height: 100%; }
.map-nodes{ position: absolute; inset: 0; z-index: 20; }

.node{
  position: absolute;
  width: 98px; height: 98px;
  margin-left: -49px; margin-top: -49px;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .15s ease;
}
.node .disc{
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--cream);
  border: 6px solid var(--paper-dark);
  box-shadow: var(--shadow-soft);
}
.node .art{ position: relative; width: 76px; height: 76px; display: grid; place-items: center; }
.node .art svg{ width: 100%; height: 100%; }
.node.locked .disc{ background: #C9BCA4; border-color: #B2A288; box-shadow: none; }
.node.locked .art{ opacity: .38; filter: grayscale(1) brightness(.75); }
.node.done .disc{ background: #FFF0C4; border-color: var(--gold); }
.node.next{ animation: node-bounce 1.5s ease-in-out infinite; }
.node.next .disc{ border-color: var(--clay-green); box-shadow: var(--shadow-lift); }
.node:active{ transform: scale(.93); }
.node.locked:active{ transform: scale(1); }

@keyframes node-bounce{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

.node .star{
  position: absolute;
  right: -6px; top: -8px;
  width: 44px; height: 44px;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}
.node .lock{
  position: absolute;
  right: -4px; bottom: -4px;
  width: 38px; height: 38px;
  opacity: .8;
}

.map-shed-btn{
  position: absolute;
  left: 22px; bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 14px;
  background: var(--cream);
  border-radius: 60px;
  border: 5px solid var(--paper-dark);
  box-shadow: var(--shadow-soft);
  z-index: 30;
}
.map-shed-btn .icon{ width: 62px; height: 52px; }
.map-shed-btn .count{
  display: flex; align-items: baseline; gap: 4px;
  font-size: 30px; font-weight: 800; color: var(--ink);
}
.map-shed-btn .pips{
  display: grid;
  grid-template-columns: repeat(10, 12px);
  gap: 4px;
}
.map-shed-btn .pip{
  width: 12px; height: 12px; border-radius: 3px;
  background: #CBBBA0;
}
.map-shed-btn .pip.on{ background: var(--gold); box-shadow: 0 0 0 2px rgba(232,185,59,.3); }

.chapter-banner{
  position: absolute;
  left: 50%; top: 16px;
  transform: translateX(-50%);
  z-index: 30;
  font-size: 26px;
  padding: 8px 26px;
}

/* ============================================================
   Minigame-omhulsel
   ============================================================ */
.game-root{ position: absolute; inset: 0; z-index: 10; }

/* Iedere laag beslaat het hele speelveld. Zonder onderstaande regel
   vangt de bovenste laag (bijvoorbeeld die met Boer Opa en Tito) alle
   tikken op die voor de speelobjecten eronder bedoeld zijn. Lagen zijn
   dus decor; alleen wat je echt kunt aanraken zet muisaanraking weer aan. */
.game-layer{ position: absolute; inset: 0; pointer-events: none; }
.game-layer .drag,
.game-layer .tap-target,
.game-layer .card,
.game-layer .swatch,
.game-layer .wipe-zone{ pointer-events: auto; }
.game-hud{
  position: absolute;
  left: 50%; top: 12px;
  transform: translateX(-50%);
  z-index: 50;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  background: rgba(255,251,242,.88);
  border-radius: 40px;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}
.hud-dot{
  width: 20px; height: 20px; border-radius: 50%;
  background: #D8C7AA;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.08);
  transition: transform .2s ease, background .2s ease;
}
.hud-dot.on{ background: var(--clay-green); transform: scale(1.15); }

/* Sleepbaar object */
.drag{
  position: absolute;
  touch-action: none;
  transition: transform .18s ease;
  z-index: 20;
  will-change: transform;
}
.drag > svg, .drag > .inner{ width: 100%; height: 100%; }
.drag.grabbed{ z-index: 60; filter: drop-shadow(0 14px 10px rgba(60,40,20,.35)); }
.drag.placed{ pointer-events: none; }
.drag.idle-wiggle{ animation: wiggle 1.6s ease-in-out infinite; }
@keyframes wiggle{
  0%,100%{ transform: translate(var(--tx,0), var(--ty,0)) rotate(0deg); }
  25%{ transform: translate(var(--tx,0), var(--ty,0)) rotate(-4deg); }
  75%{ transform: translate(var(--tx,0), var(--ty,0)) rotate(4deg); }
}

/* Doelplek */
.slot{
  position: absolute;
  border-radius: 18px;
  z-index: 10;
  pointer-events: none;
}
.slot .ghost{
  position: absolute; inset: 0;
  opacity: .42;
}
.slot.hot .ghost{ opacity: .7; }
.slot.filled .ghost{ opacity: 0; }
.slot-outline{
  position: absolute; inset: -8px;
  border: 6px dashed rgba(74,53,36,.28);
  border-radius: 22px;
}
.slot.hot .slot-outline{ border-color: rgba(111,168,92,.95); background: rgba(255,255,255,.25); }
.slot.filled .slot-outline{ display: none; }

/* Tikbaar doel */
.tap-target{
  position: absolute;
  z-index: 20;
  display: grid; place-items: center;
  touch-action: none;
  transition: transform .15s ease, opacity .3s ease;
}
.tap-target > svg{ width: 100%; height: 100%; }
.tap-target:active{ transform: scale(.94); }
.tap-target.gone{ opacity: 0; transform: scale(.5); pointer-events: none; }
.tap-target.found{ animation: found-pop .55s ease; }
@keyframes found-pop{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.22) rotate(-4deg); }
  100%{ transform: scale(1); }
}

/* Hint-gloed */
.hinting{ animation: hint-glow 1.2s ease-in-out infinite; }
@keyframes hint-glow{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(255,214,74,0)); transform: scale(1); }
  50%{ filter: drop-shadow(0 0 14px rgba(255,206,60,.95)); transform: scale(1.07); }
}
.hint-ring{
  position: absolute;
  border-radius: 50%;
  border: 8px solid rgba(255,206,60,.9);
  pointer-events: none;
  z-index: 55;
  animation: hint-ring 1.4s ease-out infinite;
}
@keyframes hint-ring{
  0%{ transform: scale(.65); opacity: 0; }
  35%{ opacity: 1; }
  100%{ transform: scale(1.25); opacity: 0; }
}

/* Wijzende hand van Tito */
.hint-paw{
  position: absolute;
  width: 70px; height: 70px;
  z-index: 58;
  pointer-events: none;
  animation: paw-tap 1.3s ease-in-out infinite;
}
@keyframes paw-tap{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-14px) scale(1.06); }
}

/* ============================================================
   Personages in de scene
   ============================================================ */
.actor{ position: absolute; z-index: 30; pointer-events: none; }
.actor svg{ width: 100%; height: 100%; }
.actor.bob{ animation: bob 2.6s ease-in-out infinite; }
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(-.6deg); }
  50%{ transform: translateY(-7px) rotate(.6deg); }
}
.actor.jump{ animation: jump .6s ease-in-out 3; }
@keyframes jump{
  0%,100%{ transform: translateY(0) scaleY(1); }
  25%{ transform: translateY(-38px) scaleY(1.06); }
  50%{ transform: translateY(0) scaleY(.92); }
}
.actor.sniff{ animation: sniff 1.8s ease-in-out infinite; }
@keyframes sniff{
  0%,100%{ transform: translateY(0) rotate(0deg); }
  30%{ transform: translateY(3px) rotate(-3deg); }
  60%{ transform: translateY(0px) rotate(3deg); }
}
.actor.trot{ animation: trot 1s ease-in-out infinite; }
@keyframes trot{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-9px); }
}

/* ============================================================
   Beloningsscherm
   ============================================================ */
.reward{
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; z-index: 10;
}
.reward-star{
  width: 186px; height: 186px;
  animation: star-in .8s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes star-in{
  0%{ transform: scale(0) rotate(-60deg); opacity: 0; }
  100%{ transform: scale(1) rotate(0deg); opacity: 1; }
}
.reward-tractor{
  height: 148px;
  animation: tractor-in .7s .5s cubic-bezier(.2,1.5,.4,1) both;
}
.reward-tractor svg{ height: 100%; width: auto; }
.reward-caption{
  font-size: 32px; font-weight: 800; color: var(--ink);
  background: rgba(255,251,242,.9);
  padding: 10px 30px; border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  animation: fade-up .5s .9s both;
}
@keyframes fade-up{
  from{ opacity: 0; transform: translateY(18px); }
  to{ opacity: 1; transform: translateY(0); }
}
.reward-next{
  position: absolute; right: 34px; bottom: 62px;
  z-index: 70;
  animation: fade-up .5s 1.3s both;
}

/* Confetti / sterretjes */
.confetti{
  position: absolute;
  width: 18px; height: 26px;
  border-radius: 4px;
  top: -40px;
  animation: fall linear forwards;
}
@keyframes fall{
  0%{ transform: translateY(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(680px) rotate(720deg); opacity: .9; }
}
.spark{
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #FFE68A;
  animation: spark .8s ease-out forwards;
}
@keyframes spark{
  0%{ transform: scale(.2); opacity: 1; }
  100%{ transform: scale(2.2); opacity: 0; }
}

/* ============================================================
   Tractorschuur
   ============================================================ */
.shed{ position: absolute; inset: 0; z-index: 10; }
.shed-inner{
  position: absolute;
  left: 0; right: 0; top: 78px; bottom: 12px;
  padding: 0 26px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px 12px;
}
.spot{
  position: relative;
  border-radius: 14px;
  background: rgba(120,92,60,.16);
  border: 4px dashed rgba(74,53,36,.22);
  display: grid; place-items: center;
  overflow: hidden;
  transition: transform .14s ease;
}
.spot .num{
  position: absolute; left: 6px; top: 4px;
  font-size: 15px; font-weight: 800; color: rgba(74,53,36,.4);
}
.spot svg{ width: 96%; height: 96%; }
.spot.empty svg{ opacity: .16; filter: grayscale(1) brightness(.4); }
.spot.have{
  background: rgba(255,244,214,.75);
  border: 4px solid rgba(232,185,59,.55);
  border-style: solid;
}
.spot.have:active{ transform: scale(.95); }
.spot.have.playing{ animation: rev 1.2s ease-in-out; }
@keyframes rev{
  0%,100%{ transform: translateX(0) rotate(0); }
  20%{ transform: translateX(-6px) rotate(-1.5deg); }
  45%{ transform: translateX(8px) rotate(1.5deg); }
  70%{ transform: translateX(-4px) rotate(-1deg); }
}
.wheel-spin{ transform-box: fill-box; transform-origin: center; }
.spot.playing .wheel-spin{ animation: spin 1.1s linear; }
@keyframes spin{ to{ transform: rotate(360deg); } }

.shed-title{
  position: absolute; left: 50%; top: 12px;
  transform: translateX(-50%);
  z-index: 20; font-size: 30px; padding: 8px 30px;
}

/* ============================================================
   Oudermenu
   ============================================================ */
.parent-veil{
  position: fixed; inset: 0;
  background: rgba(40,28,16,.55);
  z-index: 300;
  display: grid; place-items: center;
  padding: 20px;
  overflow: auto;
  touch-action: auto;
}
.parent-card{
  width: min(560px, 94vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--cream);
  border-radius: 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
  padding: 22px 24px 26px;
  -webkit-overflow-scrolling: touch;
}
.parent-card h2{
  margin: 0 0 4px;
  font-size: 26px;
}
.parent-card p.sub{ margin: 0 0 16px; color: var(--ink-soft); font-size: 15px; }
.prow{
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 2px solid rgba(74,53,36,.1);
  font-size: 18px;
}
.prow:last-of-type{ border-bottom: 0; }
.prow label{ font-weight: 700; }
.prow .hint{ display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.switch{
  position: relative;
  width: 66px; height: 36px;
  border-radius: 20px;
  background: #C9B99E;
  flex: none;
  transition: background .2s ease;
}
.switch::after{
  content: "";
  position: absolute; top: 4px; left: 4px;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--white);
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
  transition: transform .2s ease;
}
.switch.on{ background: var(--clay-green); }
.switch.on::after{ transform: translateX(30px); }
.seg{ display: flex; gap: 6px; }
.seg button{
  padding: 8px 14px; border-radius: 12px;
  background: #E6D7BC; font-weight: 700; font-size: 15px;
}
.seg button.on{ background: var(--clay-green); color: var(--white); }
.parent-card input[type=range]{ width: 160px; }
.pbtn{
  display: block; width: 100%;
  margin-top: 10px;
  padding: 13px; border-radius: 14px;
  background: var(--sun); font-weight: 800; font-size: 18px;
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.pbtn.danger{ background: #E5806E; color: var(--white); }
.pbtn.ghost{ background: #E6D7BC; }
.progress-grid{
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 5px; margin: 8px 0 4px;
}
.progress-grid i{
  aspect-ratio: 1; border-radius: 5px; background: #D6C6AB;
  display: block;
}
.progress-grid i.on{ background: var(--gold); }
.parent-close{
  position: absolute; right: 16px; top: 12px;
  font-size: 30px; color: var(--ink-soft);
}
.parent-card{ position: relative; }

/* Wachtcirkel bij vasthouden hoefijzer */
.hold-ring{
  position: fixed;
  width: 74px; height: 74px;
  border-radius: 50%;
  border: 5px solid rgba(255,255,255,.9);
  z-index: 250;
  pointer-events: none;
  animation: hold-fill 3s linear forwards;
}
@keyframes hold-fill{
  from{ clip-path: inset(0 0 100% 0); }
  to{ clip-path: inset(0 0 0 0); }
}

/* ============================================================
   Finale / parade
   ============================================================ */
.parade{ position: absolute; inset: 0; overflow: hidden; z-index: 10; }
.parade-lane{ position: absolute; left: 0; width: 100%; height: 130px; }
.parade-car{
  position: absolute;
  height: 100%;
  animation: drive linear infinite;
}
.parade-car svg{ height: 100%; width: auto; }
@keyframes drive{
  from{ transform: translateX(-280px); }
  to{ transform: translateX(1060px); }
}
.bunting{
  position: absolute; left: 0; top: 0; width: 100%; height: 90px;
}

/* ============================================================
   Toegankelijkheid / rustige animatie
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .node.next, .start-play{ animation: none !important; }
}

/* Geen selectie, geen callout */
.no-select{ user-select: none; -webkit-user-select: none; }

/* ---------- Aanvullingen ---------- */

/* Zichtbaar pulsje bij ieder geluid (geluid heeft altijd beeld) */
#btn-sound.ping{ animation: ping .45s ease; }
@keyframes ping{
  0%{ box-shadow: var(--shadow-soft), 0 0 0 0 rgba(242,193,78,.75); }
  100%{ box-shadow: var(--shadow-soft), 0 0 0 22px rgba(242,193,78,0); }
}

/* Onderdeel in een ruim sleepblokje: het blokje is groot voor kleine
   vingers, het plaatje houdt zijn eigen maat en valt dus precies goed. */
.drag > .pc{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.drag > .pc > svg{ width: 100%; height: 100%; }

/* Tijdelijk tekstwolkje van Boer Opa */
.bubble{
  position: absolute;
  z-index: 45;
  background: rgba(255,251,242,.94);
  border-radius: 20px;
  padding: 10px 20px;
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  box-shadow: var(--shadow-soft);
  animation: bubble-in .3s ease both;
}
.bubble::after{
  content: "";
  position: absolute;
  left: 26px; bottom: -14px;
  border: 9px solid transparent;
  border-top-color: rgba(255,251,242,.94);
}
@keyframes bubble-in{
  from{ opacity: 0; transform: translateY(10px) scale(.9); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Wasspel: bellen */
.bubbleFx{
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(190,230,242,.55) 60%, rgba(150,200,220,.25));
  border: 2px solid rgba(255,255,255,.7);
  pointer-events: none;
  animation: rise 1.6s ease-out forwards;
}
@keyframes rise{
  0%{ transform: translateY(0) scale(.5); opacity: .9; }
  100%{ transform: translateY(-150px) scale(1.15); opacity: 0; }
}

/* Kleurenkiezer */
.swatch{
  position: absolute;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 7px solid var(--cream);
  box-shadow: var(--shadow-soft);
  z-index: 40;
  transition: transform .14s ease;
}
.swatch:active{ transform: scale(.9); }
.swatch.sel{ transform: scale(1.14); border-color: var(--ink); }

/* Memoriekaart */
.card{
  position: absolute;
  perspective: 900px;
  z-index: 20;
}
.card-inner{
  position: absolute; inset: 0;
  transition: transform .5s ease;
  transform-style: preserve-3d;
}
.card.open .card-inner{ transform: rotateY(180deg); }
.card-face{
  position: absolute; inset: 0;
  border-radius: 18px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.card-back{
  background: linear-gradient(180deg, var(--wood) 0%, var(--wood-dark) 100%);
  border: 6px solid rgba(0,0,0,.12);
}
.card-back svg{ width: 56%; height: 56%; opacity: .55; }
.card-front{
  background: var(--cream);
  border: 6px solid var(--paper-dark);
  transform: rotateY(180deg);
}
.card-front svg{ width: 88%; height: 88%; }
.card.gone{ animation: card-gone .5s .2s ease forwards; }
@keyframes card-gone{
  to{ transform: scale(1.08); filter: drop-shadow(0 0 12px rgba(255,206,60,.9)); }
}

/* Pomp */
.pump-btn{
  position: absolute;
  z-index: 30;
  transition: transform .1s ease;
}
.pump-btn.down{ transform: translateY(16px) scaleY(.9); }

/* Oogstbaan */
.crop{
  position: absolute;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.crop.cut{ opacity: 0; transform: translateY(20px) scale(.7); }

/* Onzichtbaar kleurvlak op de tractor: alleen zichtbaar als hint */
.tap-target.zone.hinting{
  background: rgba(255,214,74,.42);
  border-radius: 18px;
  box-shadow: 0 0 0 6px rgba(255,206,60,.5);
  animation: zone-glow 1.2s ease-in-out infinite;
}
@keyframes zone-glow{
  0%,100%{ opacity: .5; }
  50%{ opacity: 1; }
}

/* Boer Opa en Tito springen op de tractor in de schuur */
@keyframes hop-in{
  from{ transform: translateY(34px) scale(.55); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}