:root {
  color-scheme: light;
  --ink: #25324a;
  --paper: #fffdf7;
  --purple: #7048e8;
  --purple-dark: #5737bd;
  --pink: #f06595;
  --blue: #339af0;
  --green: #2f9e44;
  --yellow: #ffd43b;
  --shadow: 0 8px 0 rgba(37, 50, 74, .14), 0 14px 28px rgba(37, 50, 74, .12);
  font-family: "Trebuchet MS", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #dff6ff; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: linear-gradient(#c8f0ff, #fff8cc 78%); }
button, .game-stage { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { border: 3px solid rgba(37, 50, 74, .16); font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; }
button:focus-visible { outline: 5px solid #111; outline-offset: 3px; }
button:active { transform: translateY(3px); box-shadow: none; }
.page { display: none; min-height: 100vh; padding: max(5.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 7.5rem max(1rem, env(safe-area-inset-left)); }
.page.active { display: block; animation: page-in .28s ease-out; }
h1, h2, p { margin-top: 0; }
h1 { max-width: 900px; margin-inline: auto; font-size: clamp(2rem, 7vw, 4.7rem); line-height: .98; text-align: center; color: #5136aa; text-shadow: 0 3px white; }
h2 { margin-bottom: .25rem; font-size: clamp(1.55rem, 4vw, 2.7rem); line-height: 1; }
.instruction { max-width: 760px; margin-inline: auto; font-size: clamp(1rem, 2.3vw, 1.3rem); line-height: 1.35; text-align: center; font-weight: 700; }
.global-button { position: fixed; z-index: 20; top: max(.6rem, env(safe-area-inset-top)); right: max(.6rem, env(safe-area-inset-right)); min-height: 56px; padding: .55rem .8rem; border-radius: 18px; background: white; box-shadow: 0 5px 0 #b9dce9; }
.profiles-page { overflow: hidden; text-align: center; }
.hero-cloud { position: absolute; left: 4%; top: 1%; font-size: clamp(3rem, 8vw, 7rem); opacity: .75; }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: clamp(1rem, 4vw, 3rem); max-width: 950px; margin: 2rem auto; }
.profile-card { min-height: 290px; padding: 1.5rem; border-radius: 36px; box-shadow: var(--shadow); background: white; }
.profile-card strong, .profile-card small { display: block; }
.profile-card strong { font-size: clamp(2rem, 5vw, 3.4rem); }
.profile-card small { margin-top: .6rem; font-size: 1.05rem; }
.jaylinn-card { background: linear-gradient(145deg, #ffe3f1, #efe5ff); }
.luca-card { background: linear-gradient(145deg, #d8f5ff, #dcffd9); }
.profile-art { display: block; font-size: clamp(5rem, 12vw, 8rem); line-height: 1.15; }
.profile-art span { font-size: .55em; }
.parent-hold { position: relative; overflow: hidden; min-height: 58px; padding: .7rem 1rem; border-radius: 18px; background: #f1f3f5; box-shadow: 0 4px 0 #ced4da; }
.hold-progress { position: absolute; inset: auto 0 0; width: 0; height: 7px; background: var(--purple); }
.parent-hold.holding .hold-progress { width: 100%; transition: width 3s linear; }
.small-help { margin: .6rem auto; font-size: .88rem; }

.world-header, .game-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; max-width: 1200px; margin: 0 auto 1.5rem; }
.world-header .instruction, .game-header .instruction { margin: 0; text-align: left; }
.home-button { min-width: 108px; min-height: 60px; padding: .65rem; border-radius: 20px; background: white; box-shadow: 0 5px 0 #bccbd1; }
.star-total { min-width: 82px; padding: .65rem; border-radius: 22px; background: white; box-shadow: 0 5px 0 #e3c12f; text-align: center; font-size: 1.45rem; font-weight: 900; }
.jaylinn-world { background: linear-gradient(160deg, #ffe3f1, #e8dbff 45%, #d3f9d8); }
.luca-world { background: linear-gradient(160deg, #dff8ff, #d3f9d8 50%, #fff3bf); }
.game-grid { display: grid; grid-template-columns: repeat(4, minmax(180px, 1fr)); gap: 1.2rem; max-width: 1200px; margin: auto; }
.game-card { min-height: 190px; padding: 1rem; border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); }
.game-card .icon { display: block; font-size: 4.3rem; line-height: 1.15; }
.game-card strong { display: block; font-size: 1.25rem; }
.game-card small { display: block; margin-top: .35rem; font-weight: 600; }

.game-page { background: linear-gradient(145deg, #eefcff, #fff9db); }
.feedback { max-width: 880px; min-height: 48px; margin: 0 auto 1rem; padding: .65rem 1rem; border: 3px solid #b2f2bb; border-radius: 18px; background: #ebfbee; text-align: center; font-size: 1.12rem; font-weight: 800; }
.game-stage { position: relative; max-width: 1000px; min-height: 440px; margin: auto; padding: clamp(1rem, 3vw, 2rem); overflow: hidden; border: 4px solid rgba(37,50,74,.14); border-radius: 32px; background: rgba(255,255,255,.88); box-shadow: var(--shadow); touch-action: none; }
.control-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .8rem; margin: 1rem auto; }
.control-row button, .big-control { min-width: 64px; min-height: 60px; padding: .7rem 1rem; border-radius: 18px; background: #fff; box-shadow: 0 5px 0 #bdc8d0; }
.luca-controls button { min-width: 74px; min-height: 70px; font-size: 1.12rem; }
.stage-title { text-align: center; font-size: 1.35rem; }
.level-dots { text-align: center; font-weight: 900; color: var(--purple); }
.reward { position: absolute; z-index: 5; inset: 25% 10% auto; padding: 1.3rem; border: 5px solid #ffd43b; border-radius: 28px; background: #fff9db; box-shadow: var(--shadow); text-align: center; font-size: clamp(1.7rem, 6vw, 3rem); font-weight: 900; animation: reward-pop .55s ease-out; }
.rainbow-preview { display: flex; justify-content: center; min-height: 110px; margin: 1rem 0; overflow: hidden; border: 4px dashed #b197fc; border-radius: 24px; background: rgba(255,255,255,.55); }
.rainbow-preview:empty::after { content: "Sleep kleuren hierheen"; align-self: center; color: #7048e8; font-weight: 900; }
.rainbow-band { width: 70px; border-radius: 40px 40px 12px 12px; animation: rise .35s ease-out; }
.color-button { color: #202630; text-shadow: 0 1px rgba(255,255,255,.8); cursor: grab; }
.decorations { min-height: 66px; text-align: center; font-size: 2.8rem; }
.plants-row, .fruit-tray { min-height: 82px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .65rem; }
.growing-plant { font-size: 3.7rem; animation: rise .35s ease-out; }
.fruit-piece { min-width: 70px; min-height: 70px; padding: .3rem; border-radius: 50%; background: #fff3bf; box-shadow: 0 4px 0 #f59f00; font-size: 2.2rem; cursor: grab; }
.caterpillar { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 150px; min-height: 130px; margin: .5rem auto; border-radius: 50%; background: #ebfbee; font-size: 5rem; transition: transform .3s; }
.caterpillar small { display: block; font-size: .85rem; }
.sort-card { min-height: 110px; padding: 1rem; border-radius: 24px; background: #fff4e6; text-align: center; font-size: 2.3rem; font-weight: 900; cursor: grab; }
.counting-field { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: .55rem; max-width: 720px; margin: auto; }
.count-object { min-width: 56px; min-height: 56px; padding: .2rem; border-radius: 50%; background: #e7f5ff; box-shadow: 0 3px 0 #a5d8ff; font-size: 1.65rem; }
.count-object.lit { background: #fff3bf; transform: scale(1.08); }
.direction-scene { display: grid; place-items: center; min-height: 150px; border-radius: 24px; background: linear-gradient(90deg, #d0ebff 50%, #ffe3e3 50%); font-size: 4rem; }
.route-queue { min-height: 55px; padding: .6rem; border: 3px dashed #9775fa; border-radius: 16px; text-align: center; font-size: 1.8rem; }
.code-grid, .city-grid, .little-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(100%, 430px); aspect-ratio: 1; margin: 1rem auto; padding: 7px; border-radius: 18px; background: #d0ebff; }
.grid-cell { position: relative; min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(37,50,74,.12); border-radius: 10px; background: rgba(255,255,255,.7); box-shadow: none; font-size: clamp(1.3rem, 6vw, 2.3rem); }
.road { background: #adb5bd; }
.unicorn-token { display: grid; place-items: center; position: absolute; inset: 4px; font-size: 2rem; }
.memory-grid { display: grid; grid-template-columns: repeat(4, minmax(64px, 110px)); justify-content: center; gap: .7rem; }
.memory-card { aspect-ratio: 1; min-height: 64px; border-radius: 18px; background: #845ef7; box-shadow: 0 5px 0 #5f3dc4; color: transparent; font-size: 2rem; }
.memory-card.open, .memory-card.found { background: white; color: inherit; }
.road-scene { position: relative; min-height: 230px; border-radius: 24px; background: linear-gradient(90deg, #69db7c 0 18%, #868e96 18% 82%, #69db7c 82%); overflow: hidden; }
.vehicle-token { position: absolute; bottom: 5%; left: 44%; font-size: 4.5rem; transition: left .25s, bottom .25s; }
.finish { position: absolute; top: 4%; left: 23%; right: 23%; padding: .3rem; background: repeating-linear-gradient(90deg,#fff 0 15px,#222 15px 30px); color: transparent; }
.helper-scene { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.target-place { min-height: 130px; border-radius: 22px; background: #e7f5ff; font-size: 2.8rem; }
.helpers button.driving { animation: helper-wiggle .45s ease-in-out; }
.target-place { position: relative; overflow: hidden; }
.helper-drive { position: absolute; z-index: 2; left: 5%; bottom: 4px; font-size: 2.4rem; animation: helper-drive 1s ease-in-out forwards; }
.animal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.animal-button { min-height: 120px; border-radius: 24px; background: #ebfbee; box-shadow: 0 5px 0 #8ce99a; font-size: 3.2rem; }
.animal-button small { display: block; font-size: 1rem; }
.animal-button.dancing { animation: animal-hop .55s ease-in-out 2; }
.shape-board { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pieces, .holes { display: grid; grid-template-columns: repeat(2, minmax(64px, 1fr)); gap: .7rem; align-content: center; }
.shape-piece, .shape-hole { min-height: 80px; border-radius: 18px; font-size: 2rem; }
.shape-piece.selected { outline: 6px solid #212529; }
.shape-hole { border-style: dashed; background: #f8f9fa; }
.balloon-sky { position: relative; min-height: 370px; border-radius: 24px; background: linear-gradient(#a5d8ff, #e7f5ff); overflow: hidden; }
.balloon { position: absolute; width: 88px; height: 108px; border-radius: 50% 50% 46% 46%; box-shadow: inset -12px -9px rgba(0,0,0,.1), 0 5px 0 rgba(0,0,0,.12); font-size: 1.6rem; animation: balloon-float 5s ease-in-out infinite alternate; }
.rainbow-balloon { background: linear-gradient(135deg,#ff6b6b,#ffd43b,#51cf66,#339af0,#ae3ec9); border-color: white; }
.balloon-stars { position: absolute; z-index: 3; font-size: 1.8rem; pointer-events: none; animation: star-burst .9s ease-out forwards; }
.rainbow-surprise { position: absolute; inset: 15% 10%; display: grid; place-items: center; border-radius: 30px; background: linear-gradient(135deg,#ff8787,#ffd43b,#69db7c,#74c0fc,#b197fc); font-size: 5rem; animation: reward-pop .5s; }
.garage { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; min-height: 160px; padding: 1rem; border-radius: 24px; background: #dee2e6; }
.garage-slot { display: grid; place-items: center; border: 3px dashed white; border-radius: 12px; font-size: 2.2rem; }
.town-part { min-width: 82px; font-size: 1.8rem; }
.vehicle-moving { animation: city-drive .8s ease-in-out; }
.day-night-scene { position: relative; display: grid; place-items: center; width: 100%; min-height: 320px; border-radius: 26px; overflow: hidden; background: #74c0fc; transition: background .5s; }
.day-night-scene.nacht { background: #25324a; color: white; }
.sky-object { font-size: 7rem; }
.night-stars { position: absolute; top: 10%; right: 8%; font-size: 2.5rem; animation: star-twinkle 1.3s ease-in-out infinite alternate; }
.day-animal, .night-animal { position: absolute; left: 5%; bottom: 9%; width: 42%; text-align: left; line-height: 1.15; font-size: clamp(.9rem,3.5vw,1.7rem); }
.day-vehicle { position: absolute; right: 5%; bottom: 9%; width: 42%; text-align: right; line-height: 1.15; font-size: clamp(.9rem,3.5vw,1.7rem); animation: day-car 2.4s ease-in-out infinite alternate; }
.night-house { position: absolute; right: 5%; bottom: 9%; width: 44%; text-align: right; line-height: 1.15; font-size: clamp(.9rem,3.5vw,1.7rem); }
.night-house.on { filter: drop-shadow(0 0 12px #ffd43b); }
.speech-fallback { position: fixed; z-index: 15; right: max(.7rem, env(safe-area-inset-right)); bottom: max(.6rem, env(safe-area-inset-bottom)); left: max(.7rem, env(safe-area-inset-left)); max-width: 720px; margin-inline: auto; padding: .55rem .8rem; border: 2px solid #74c0fc; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 3px 12px rgba(0,0,0,.14); font-size: .9rem; text-align: center; }
dialog { max-width: min(92vw, 620px); padding: 0; border: 0; border-radius: 28px; box-shadow: 0 20px 80px rgba(0,0,0,.35); }
dialog::backdrop { background: rgba(24, 31, 46, .65); }
.parent-panel { padding: 1.5rem; }
.parent-actions, .reset-confirm { display: grid; gap: .8rem; }
.parent-actions button, .reset-confirm button { min-height: 58px; padding: .7rem; border-radius: 16px; background: #f1f3f5; }
.danger-soft { background: #ffe3e3 !important; }

@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes reward-pop { 0% { transform: scale(.5) rotate(-4deg); } 70% { transform: scale(1.05) rotate(2deg); } }
@keyframes rise { from { transform: translateY(90px); } }
@keyframes animal-hop { 50% { transform: translateY(-20px) rotate(6deg); } }
@keyframes balloon-float { to { transform: translateY(-35px) rotate(5deg); } }
@keyframes helper-wiggle { 50% { transform: translateX(10px) rotate(4deg); } }
@keyframes helper-drive { from { transform: translateX(-80px); } to { transform: translateX(130px); } }
@keyframes star-burst { to { opacity: 0; transform: translateY(-55px) scale(1.4); } }
@keyframes city-drive { 50% { transform: translateX(45px) rotate(5deg); } }
@keyframes star-twinkle { to { opacity: .55; transform: scale(.92); } }
@keyframes day-car { to { transform: translateX(-70px); } }

@media (max-width: 850px) {
  .game-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); }
  .game-card { min-height: 170px; }
  .game-card .icon { font-size: 3.6rem; }
}

@media (max-width: 540px) {
  .page { padding: 5rem .65rem 9rem; }
  .profile-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .profile-card { min-height: 230px; padding: .7rem; border-radius: 25px; }
  .profile-card small { font-size: .82rem; }
  .world-header, .game-header { grid-template-columns: 68px minmax(0, 1fr) 68px; gap: .45rem; align-items: start; }
  .world-header h2, .game-header h2 { font-size: 1.35rem; line-height: 1.05; }
  .world-header .star-total, .game-header .star-total { position: static; min-width: 68px; padding: .55rem .25rem; font-size: 1.15rem; }
  .world-header .instruction, .game-header .instruction { text-align: left; font-size: .82rem; padding-right: 0; }
  .home-button { min-width: 68px; min-height: 56px; }
  .home-button span { display: none; }
  .game-grid { gap: .65rem; }
  .game-card { min-height: 135px; padding: .5rem; border-radius: 20px; }
  .game-card strong { font-size: .95rem; line-height: 1.05; }
  .game-card small { margin-top: .25rem; font-size: .7rem; line-height: 1.1; }
  .game-card .icon { font-size: 2.7rem; }
  .game-stage { min-height: 400px; padding: .7rem; border-radius: 23px; }
  .control-row { gap: .5rem; }
  .control-row button { min-height: 56px; padding: .5rem .65rem; }
  .animal-grid { grid-template-columns: repeat(2, 1fr); }
  .animal-button { min-height: 98px; }
  .shape-board { gap: .5rem; }
  .pieces, .holes { gap: .4rem; }
  .memory-grid { gap: .35rem; }
  .helper-scene { gap: .35rem; }
  .target-place { min-height: 100px; }
  .global-button span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}