:root {
  --bg: #FFE9D2;
  --card: #FFF4E0;
  --ink: #6B4A3A;
  --soft: #A07E6C;
  --peach: #FFB98A;
  --mint: #A8E6CF;
  --sky: #A6D8FF;
  --butter: #FFE08A;
  --pink: #FFB3C7;
  --lilac: #CDB8FF;
  --leaf: #7CC98A;
  --leaf-dark: #4FA866;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink);
  font-family: "Mali", system-ui, sans-serif; user-select: none; -webkit-user-select: none;
  touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none;
}
img { -webkit-user-drag: none; pointer-events: none; }
#app { position: fixed; inset: 0; }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }

.scene { position: absolute; inset: 0; display: flex; flex-direction: column; animation: fadein .4s ease; }
.scene.farm { background: #CFEFFF url(img/farm.webp) center / cover no-repeat; }
@keyframes fadein { from { opacity: 0 } }

/* ---- start ---- */
.start { align-items: center; justify-content: center; gap: 3vmin; text-align: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, #FFF4E0, var(--bg)); }
.start h1 { margin: 0; font-size: clamp(32px, 8vmin, 64px); }
.start .hero { width: min(42vmin, 300px); aspect-ratio: 1; border-radius: 50%; background: var(--card);
  box-shadow: 0 1.2vmin 0 #F2CDA8; overflow: hidden; animation: bob 2.4s ease-in-out infinite; }
.start .hero img { width: 100%; height: 100%; object-fit: cover; }
.bigbtn { font: inherit; font-weight: 700; font-size: clamp(24px, 6vmin, 44px); color: #fff; background: #FF8F6B;
  border: 0; border-radius: 999px; padding: 2.2vmin 7vmin; box-shadow: 0 1vmin 0 #E06F4E; cursor: pointer; }
.bigbtn:active { transform: translateY(.6vmin); box-shadow: 0 .4vmin 0 #E06F4E; }
.start .note { font-size: clamp(13px, 2.4vmin, 17px); color: var(--soft); max-width: 520px; line-height: 1.5; }
@keyframes bob { 50% { transform: translateY(-1.5vmin) } }

/* ---- top bar: hold-to-act buttons for grown-ups ---- */
.hold { position: absolute; top: max(10px, env(safe-area-inset-top)); z-index: 20; width: 56px; height: 56px;
  border-radius: 50%; background: rgba(255,255,255,.75); display: grid; place-items: center; font-size: 26px; }
.hold.left { left: max(10px, env(safe-area-inset-left)); }
.hold.right { right: max(10px, env(safe-area-inset-right)); }
.hold svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hold circle { fill: none; stroke: #FF8F6B; stroke-width: 5; stroke-dasharray: 160; stroke-dashoffset: 160; }
.hold.on circle { transition: stroke-dashoffset 1.2s linear; stroke-dashoffset: 0; }
.holdhint { position: absolute; top: 72px; left: 12px; z-index: 20; font-size: 13px; color: var(--soft);
  background: rgba(255,255,255,.8); padding: 4px 10px; border-radius: 10px; opacity: 0; transition: opacity .3s; }
.holdhint.show { opacity: 1; }

/* ---- tip for parents ---- */
.tip { position: absolute; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 15; max-width: min(92vw, 640px); background: rgba(255,255,255,.88); border-radius: 16px; padding: 8px 16px;
  font-size: clamp(13px, 2.3vmin, 17px); line-height: 1.45; color: var(--ink); text-align: center; }
.tip b { color: #E06F4E; }

/* ---- menu ---- */
.menu { justify-content: center; align-items: center; padding: 80px 16px 70px; }
.menu { overflow-y: auto; touch-action: pan-y; justify-content: safe center; }
.tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2.4vmin; width: min(100%, 1200px); }
@media (orientation: portrait) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (orientation: landscape) and (max-aspect-ratio: 4/3) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { background: var(--card); border-radius: 4vmin; aspect-ratio: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; box-shadow: 0 1.2vmin 0 rgba(0,0,0,.08); cursor: pointer;
  font-weight: 700; font-size: clamp(14px, 2.6vmin, 24px); overflow: hidden; position: relative; text-align: center; line-height: 1.2; }
.tile .pic { width: 70%; aspect-ratio: 1; display: grid; place-items: center; font-size: 15vmin; }
.tile .pic img { width: 100%; height: 100%; object-fit: contain; }
.tile:active { transform: scale(.95); }
.tile .age { position: absolute; top: 2vmin; right: 2vmin; font-size: 12px; background: var(--butter);
  padding: 2px 8px; border-radius: 8px; }

/* ---- animal cards ---- */
.cards { flex: 1; display: grid; gap: 3vmin; padding: 84px 4vmin 76px; align-content: center; justify-content: center; }
.card { background: var(--card); border-radius: 6vmin; aspect-ratio: 1; overflow: hidden; cursor: pointer;
  box-shadow: 0 1.4vmin 0 rgba(107,74,58,.15); position: relative; transition: transform .2s, opacity .3s; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card .emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22vmin; }
.card.done::after { content: "⭐"; position: absolute; top: 4%; right: 6%; font-size: 6vmin; }
.card.dim { opacity: .45; }
.jump { animation: jump .7s ease; }
@keyframes jump { 30% { transform: translateY(-8%) scale(1.08) rotate(-3deg) } 60% { transform: translateY(0) scale(.97) rotate(2deg) } }
.wiggle { animation: wiggle .5s ease; }
@keyframes wiggle { 25% { transform: rotate(-5deg) } 75% { transform: rotate(5deg) } }

/* ---- peekaboo ---- */
.peekrow { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 4vmin; padding: 0 3vmin 14vh; }
.spot { position: relative; cursor: pointer; }
.spot .animal { position: absolute; left: 10%; right: 10%; bottom: 25%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden; background: var(--card); transform: translateY(40%) scale(.6); opacity: 0;
  transition: transform .45s cubic-bezier(.3,1.6,.5,1), opacity .2s; box-shadow: 0 0 0 1.2vmin #fff; }
.spot .animal img { width: 100%; height: 100%; object-fit: cover; }
.spot.open .animal { transform: translateY(-38%) scale(1); opacity: 1; }
.spot .bush { position: relative; width: 100%; height: 100%; }
.spot .bush i { position: absolute; border-radius: 50%; background: var(--leaf); box-shadow: inset -1.5vmin -1.5vmin 0 var(--leaf-dark); }
.spot .bush i:nth-child(1) { left: 0; bottom: 0; width: 55%; height: 70%; }
.spot .bush i:nth-child(2) { right: 0; bottom: 0; width: 55%; height: 75%; }
.spot .bush i:nth-child(3) { left: 20%; bottom: 25%; width: 60%; height: 75%; }
.spot .bush b { position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #FF8FA3; z-index: 2; }
.spot.shake .bush { animation: wiggle .4s ease 2; }

/* ---- find ---- */
.ask { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 15;
  background: #fff; border-radius: 999px; padding: 8px 20px 8px 10px; display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: clamp(18px, 4vmin, 32px); box-shadow: 0 .8vmin 0 rgba(0,0,0,.08); cursor: pointer; white-space: nowrap; }
.ask .spk { width: 48px; height: 48px; border-radius: 50%; background: var(--butter); display: grid; place-items: center; font-size: 24px; }

/* ---- music ---- */
.xylo { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1.6vmin; padding: 90px 3vmin 80px; }
.bar { flex: 1; max-width: 120px; border-radius: 3vmin; cursor: pointer; position: relative;
  box-shadow: inset 0 -1.6vmin 0 rgba(0,0,0,.12), 0 1vmin 0 rgba(0,0,0,.08); transition: transform .08s; }
.bar::before, .bar::after { content: ""; position: absolute; left: 50%; width: 3vmin; height: 3vmin; margin-left: -1.5vmin;
  border-radius: 50%; background: rgba(255,255,255,.7); }
.bar::before { top: 6% } .bar::after { bottom: 8% }
.bar.hit { transform: scale(.94) translateY(1vmin); filter: brightness(1.12); }

/* ---- night ---- */
.night { background: #1F2A55 url(img/night.webp) center / cover no-repeat; align-items: center; justify-content: flex-end;
  padding-bottom: 8vh; color: #FFF4C2; text-align: center; }
.night h2 { font-size: clamp(28px, 7vmin, 56px); margin: 0 0 2vmin; text-shadow: 0 2px 10px rgba(0,0,0,.5); }

/* ---- settings ---- */
.sheet { position: absolute; inset: 0; background: rgba(60,40,30,.45); z-index: 40; display: grid; place-items: center; padding: 16px; }
.sheet .box { background: #fff; border-radius: 22px; padding: 20px 22px; width: min(100%, 460px); max-height: 100%; overflow: auto; }
.sheet h3 { margin: 0 0 12px; }
.sheet .row { margin: 14px 0; }
.sheet .row > div:first-child { font-weight: 700; margin-bottom: 6px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { font: inherit; border: 2px solid #F2CDA8; background: #fff; color: var(--ink); border-radius: 12px; padding: 8px 12px; cursor: pointer; }
.seg button.on { background: #FF8F6B; border-color: #FF8F6B; color: #fff; }
.sheet .close { margin-top: 10px; width: 100%; font-size: 20px; padding: 12px; }
.sheet small { color: var(--soft); line-height: 1.5; display: block; }

/* ---- effects ---- */
.particle { position: absolute; font-size: 6vmin; will-change: transform, opacity; }
canvas.full { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; } }

/* ---- photos ---- */
.tile .pic img.photo { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1vmin #fff; }
.card img.photo { object-fit: cover; }

/* ---- grown-ups' area ---- */
.sheet .box.parent { width: min(100%, 620px); height: min(100%, 860px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.parent .phead { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.parent .phead h3 { margin: 0; }
.parent .x { font: inherit; font-size: 22px; border: 0; background: #FFF1E4; color: var(--ink); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }
.ptabs { display: flex; gap: 4px; padding: 0 12px; border-bottom: 2px solid #F6E3D2; overflow-x: auto; }
.ptabs button { font: inherit; font-weight: 700; border: 0; background: none; color: var(--soft); padding: 10px 12px; border-bottom: 3px solid transparent; margin-bottom: -2px; cursor: pointer; white-space: nowrap; }
.ptabs button.on { color: #E06F4E; border-bottom-color: #FF8F6B; }
.pbody { flex: 1; overflow-y: auto; padding: 4px 18px 24px; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.parent input { font: inherit; font-size: 16px; border: 2px solid #F2CDA8; border-radius: 12px; padding: 9px 12px; color: var(--ink);
  background: #fff; min-width: 0; user-select: text; -webkit-user-select: text; touch-action: auto; }
.parent input[type=file] { border-style: dashed; }
.parent p { line-height: 1.6; }
.form { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.form.inline { flex-direction: row; flex-wrap: wrap; }
.form.inline input { flex: 1 1 140px; }
.btns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pbtn { font: inherit; font-weight: 700; border: 2px solid #F2CDA8; background: #fff; color: var(--ink); border-radius: 12px; padding: 7px 12px; cursor: pointer; white-space: nowrap; }
.pbtn.main { background: #FF8F6B; border-color: #FF8F6B; color: #fff; }
.pbtn.ghost { border-color: transparent; color: var(--soft); }
.pbtn.small { font-size: 13px; padding: 4px 8px; }
.pbtn.rec { border-color: #FF8FA3; color: #D9475F; }
.pbtn.rec.on { background: #FF5C7A; border-color: #FF5C7A; color: #fff; animation: pulse 1s infinite; }
.pbtn:disabled { opacity: .5; }
@keyframes pulse { 50% { opacity: .65 } }
.err { color: #D9475F; font-size: 14px; min-height: 1em; }
.list { display: flex; flex-direction: column; gap: 6px; }
.item, .recrow { display: flex; align-items: center; gap: 8px; background: #FFF8F0; border-radius: 12px; padding: 8px 10px; }
.recrow { flex-wrap: wrap; margin: 6px 0; }
.recrow .status { display: block; color: var(--soft); }
.grow { flex: 1; min-width: 0; }
.people { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.person { display: flex; gap: 10px; align-items: flex-start; background: #FFF8F0; border-radius: 16px; padding: 10px; }
.person > img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.person input { width: 100%; font-weight: 700; }
.person .recrow { background: #fff; }
.chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; padding-top: 6px; }
.chart .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.chart .col i { width: 100%; min-height: 2px; background: #FFB98A; border-radius: 4px 4px 0 0; }
.chart .col span { font-size: 11px; color: var(--soft); height: 14px; }
.meter { width: 80px; height: 8px; background: #F6E3D2; border-radius: 4px; overflow: hidden; }
.meter i { display: block; height: 100%; background: #7CC98A; }

/* ---- blocks ---- */
.blockarea { position: absolute; inset: 0; }
.block { position: absolute; border-radius: 18%; display: grid; place-items: center; font-size: 7vmin; color: #fff;
  box-shadow: inset 0 -1.2vmin 0 rgba(0,0,0,.14), inset 0 1vmin 0 rgba(255,255,255,.35), 0 .6vmin 0 rgba(0,0,0,.08); pointer-events: auto; }

/* ---- bear ---- */
.bearwrap { flex: 1; display: grid; place-items: center; padding: 80px 16px 70px; }
.bear { position: relative; width: min(78vmin, 640px); max-height: 100%; aspect-ratio: 1; border-radius: 12%; overflow: hidden;
  background: var(--card); box-shadow: 0 0 0 1.4vmin #fff, 0 2vmin 0 rgba(107,74,58,.15); cursor: pointer; }
.bear img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bear .emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 50vmin; }
.spot-hit { position: absolute; border-radius: 50%; }
.spot-hit.glow { animation: glow 1.4s ease 2; }
@keyframes glow { 50% { box-shadow: 0 0 0 1vmin rgba(255,224,138,.95), 0 0 4vmin 2vmin rgba(255,224,138,.8); } }
.sneeze { animation: sneeze .7s ease; }
@keyframes sneeze { 30% { transform: scale(1.05, .92) translateY(2%) } 45% { transform: scale(.95, 1.08) translateY(-4%) } 70% { transform: scale(1.02) } }
.blinky { animation: blinky .5s ease; }
@keyframes blinky { 40% { transform: scaleY(.94) } }

/* ---- feeding ---- */
.feed { flex: 1; display: flex; align-items: center; justify-content: space-evenly; gap: 4vmin; padding: 80px 4vmin 76px; }
@media (orientation: portrait) { .feed { flex-direction: column-reverse; } }
.tray { display: flex; gap: 4vmin; flex-wrap: wrap; justify-content: center; }
.food { width: min(26vmin, 220px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--card); cursor: grab;
  box-shadow: 0 0 0 1vmin #fff, 0 1.2vmin 0 rgba(107,74,58,.15); position: relative; z-index: 2; touch-action: none; }
.food img { width: 100%; height: 100%; object-fit: cover; }
.food .emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 15vmin; }
.food.held { z-index: 30; cursor: grabbing; box-shadow: 0 0 0 1vmin #fff, 0 3vmin 3vmin rgba(107,74,58,.25); }
.card.eater { width: min(48vmin, 420px); }

/* ---- vehicles ---- */
.road { position: absolute; left: 0; right: 0; bottom: 14vh; display: flex; justify-content: space-evenly; align-items: flex-end; padding: 0 2vmin; }
.card.vehicle { aspect-ratio: 1; }

/* ---- English ---- */
.en-card { display: flex; flex-direction: column; }
.en-card img, .en-card .colorball { flex: 1; min-height: 0; }
.en-card .word { font-family: "Mali", sans-serif; font-weight: 700; font-size: clamp(18px, 4.4vmin, 40px); text-align: center;
  padding: .3em 0 .5em; color: var(--ink); background: var(--card); }
.colorball { margin: 10%; border-radius: 50%; box-shadow: inset -2vmin -2vmin 0 rgba(0,0,0,.12), inset 1.5vmin 1.5vmin 0 rgba(255,255,255,.35); aspect-ratio: 1; align-self: center; }
.en-card img { height: auto; width: 100%; object-fit: contain; }
@media (orientation: portrait) {
  .card.eater { width: min(70vw, 38vh); }
  .food { width: min(36vw, 22vh); }
}

/* ---- stories ---- */
.shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(40vw, 260px), 1fr)); gap: 3vmin; width: min(100%, 1100px); }
.book { background: var(--card); border-radius: 4vmin; overflow: hidden; cursor: pointer; box-shadow: 0 1.2vmin 0 rgba(107,74,58,.15); }
.book .cover { aspect-ratio: 16 / 9; display: grid; place-items: center; background: #FFE9D2; }
.book .cover img { width: 100%; height: 100%; object-fit: cover; }
.book .cover .emoji { font-size: 14vmin; }
.btitle { font-weight: 700; font-size: clamp(16px, 3vmin, 26px); text-align: center; padding: 1.4vmin 1vmin 1.8vmin; }
.reader { background: #FFF4E0; }
.page { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1.5vmin; padding: 72px 1.5vmin 0; }
.page-img { flex: 1; min-width: 0; height: 100%; display: grid; place-items: center; cursor: pointer; }
.page-img img { max-width: 100%; max-height: 100%; border-radius: 3vmin; box-shadow: 0 1.2vmin 0 rgba(107,74,58,.15); display: block; }
.page-img .emoji { font-size: 30vmin; }
.turn { font: inherit; flex: none; width: clamp(56px, 11vmin, 96px); height: clamp(56px, 11vmin, 96px); border-radius: 50%; border: 0;
  background: #FF8F6B; color: #fff; font-size: clamp(22px, 4.5vmin, 40px); box-shadow: 0 .8vmin 0 #E06F4E; cursor: pointer; }
.turn.prev { background: #FFC9A8; box-shadow: 0 .8vmin 0 #EBA884; }
.turn:active { transform: translateY(.5vmin); box-shadow: 0 .3vmin 0 #E06F4E; }
.page-foot { padding: 1.6vmin 3vmin max(10px, env(safe-area-inset-bottom)); text-align: center; }
.page-text { font-weight: 700; font-size: clamp(18px, 4vmin, 36px); line-height: 1.45; }
.page-ask { font-size: clamp(13px, 2.3vmin, 18px); color: #E06F4E; margin-top: .6vmin; }
.dots { display: flex; justify-content: center; gap: 6px; margin-top: 1vmin; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #F2CDA8; }
.dots i.on { background: #FF8F6B; width: 22px; border-radius: 5px; }
.replay, .shelfbtn { position: absolute; top: max(10px, env(safe-area-inset-top)); z-index: 20; width: 56px; height: 56px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.85); font-size: 26px; cursor: pointer; }
.replay { left: 50%; transform: translateX(-50%); background: var(--butter); }
.shelfbtn { right: max(10px, env(safe-area-inset-right)); }
@media (orientation: portrait) {
  .page { flex-wrap: wrap; align-content: center; }
  .page-img { order: -1; flex-basis: 100%; height: auto; }
}
@media (orientation: portrait) {
  .reader { justify-content: center; }
  .reader .page { flex: none; }
}

/* ---- music: songs & notes ---- */
.songchips { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 76px; right: 12px; z-index: 15; display: flex; gap: 8px;
  overflow-x: auto; touch-action: pan-x; padding-bottom: 4px; }
.chip { font: inherit; font-weight: 700; white-space: nowrap; border: 0; border-radius: 999px; padding: 10px 16px; background: rgba(255,255,255,.88);
  color: var(--ink); font-size: clamp(14px, 2.4vmin, 19px); box-shadow: 0 .5vmin 0 rgba(0,0,0,.08); cursor: pointer; }
.chip.on { background: #FF8F6B; color: #fff; }
.sheet-music { position: absolute; top: 74px; left: 12px; right: 12px; z-index: 14; background: rgba(255,255,255,.9); border-radius: 18px; padding: 8px 12px 10px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: clamp(15px, 2.6vmin, 22px); }
.listen { font: inherit; font-weight: 700; border: 0; border-radius: 999px; padding: 6px 14px; background: var(--butter); color: var(--ink); cursor: pointer; }
.notes { display: flex; gap: 6px; overflow-x: auto; padding: 8px 2px 2px; touch-action: pan-x; scrollbar-width: none; }
.note { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--soft); min-width: 30px; }
.note i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); transition: transform .15s; }
.note.long i { width: 40px; border-radius: 13px; }
.note.done { opacity: .35; }
.note.cur i { transform: scale(1.35); box-shadow: 0 0 0 3px #fff, 0 0 0 6px #FF8F6B; }
.note.cur { color: #E06F4E; }
.bar { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 14%; color: rgba(255,255,255,.95);
  font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.bar .sol { font-size: clamp(12px, 2.6vmin, 22px); }
.bar .letter { font-size: clamp(10px, 1.8vmin, 15px); opacity: .85; }
.bar.next { animation: nextbar 0.9s ease-in-out infinite; }
@keyframes nextbar { 50% { transform: translateY(-1.2vmin); box-shadow: inset 0 -1.6vmin 0 rgba(0,0,0,.12), 0 0 0 .8vmin #fff, 0 0 4vmin 1vmin rgba(255,240,150,.95); } }
.xylo { padding-top: 190px; }
@media (max-height: 520px) { .xylo { padding-top: 160px; } .sheet-music { padding: 4px 10px 6px; } }

/* ---- sing-along ---- */
.sing-title { position: absolute; top: max(16px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-weight: 700;
  font-size: clamp(16px, 3vmin, 26px); background: rgba(255,255,255,.9); padding: 8px 18px; border-radius: 999px; white-space: nowrap; z-index: 15; }
.sing-art { flex: 1; min-width: 0; height: 100%; display: grid; place-items: center; cursor: pointer; }
.sing-art img { max-width: 100%; max-height: 100%; border-radius: 3vmin; box-shadow: 0 1.2vmin 0 rgba(107,74,58,.15); }
.sing-art .emoji { font-size: 30vmin; }
.sing-art video { max-width: 100%; max-height: 100%; border-radius: 3vmin; box-shadow: 0 1.2vmin 0 rgba(107,74,58,.15); background: #FFEFE0; pointer-events: none; }
.singloop { right: calc(max(10px, env(safe-area-inset-right)) + 66px); opacity: .45; }
.singloop.on { opacity: 1; background: var(--butter); }
.sing-act { display: inline-block; font-weight: 700; font-size: clamp(16px, 3vmin, 26px); background: var(--butter); border-radius: 999px; padding: 4px 16px; min-height: 1.6em; }
.sing-now { font-weight: 700; font-size: clamp(24px, 5.6vmin, 50px); color: #E06F4E; min-height: 1.4em; margin-top: .6vmin; line-height: 1.35; }
.sing-now span { color: #E8B9A4; transition: color .15s; display: inline-block; }
.sing-now span.on { color: #E06F4E; }
.sing-now span.pop { animation: singpop .3s ease-out; }
@keyframes singpop { 40% { transform: scale(1.18) translateY(-.3vmin); } }
.sing-next { font-size: clamp(14px, 2.8vmin, 24px); color: var(--soft); min-height: 1.4em; }
.sing-progress { height: 8px; background: #F6E3D2; border-radius: 4px; overflow: hidden; margin: 1vmin auto 0; max-width: 640px; }
.sing-progress i { display: block; height: 100%; width: 0; background: #FF8F6B; }
.note.cur i { margin: 4px 0 6px; }

/* ---- child lock ---- */
.sheet.gate { z-index: 60; }
.gate .box { width: min(100%, 400px); text-align: center; }
.gate p { margin: 4px 0 8px; color: var(--soft); }
.gate-code { display: flex; justify-content: center; gap: 10px; font-weight: 700; font-size: 24px; margin-bottom: 14px; }
.gate-code span { background: #FFF1E4; border-radius: 12px; padding: 6px 12px; }
.gate-code span.ok { background: #8EDB8E; color: #fff; }
.gate-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gate-keys button { font: inherit; font-weight: 700; font-size: 26px; border: 2px solid #F2CDA8; background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 0; cursor: pointer; }
.gate-keys button:active { background: #FFE9D2; }
.lockhelp { background: #FFF8F0; border-radius: 12px; padding: 10px 12px; margin-top: 8px; font-size: 14px; line-height: 1.55; }
.lockhelp ol { margin: 6px 0 0; padding-left: 20px; }
.gate .phead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gate .phead h3 { margin: 0; }
.gate .x { font: inherit; font-size: 22px; border: 0; background: #FFF1E4; color: var(--ink); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }

/* ---- bath ---- */
.bathwrap { flex: 1; display: grid; place-items: center; padding: 80px 16px 70px; }
.tubbox { position: relative; }
.tub { position: relative; width: min(66vmin, 560px, calc(100vh - 170px)); aspect-ratio: 1; border-radius: 12%; overflow: hidden;
  background: var(--card); box-shadow: 0 0 0 1.4vmin #fff, 0 2vmin 0 rgba(60,110,120,.2); touch-action: none; cursor: grab; }
.tubart, .tubart img, .tubart .emoji { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tubart .emoji { display: grid; place-items: center; font-size: 40vmin; }
.mud { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.foam { position: absolute; inset: 0; pointer-events: none; }
.sud { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 25%, rgba(255,255,255,.85) 45%, rgba(200,235,255,.7) 75%, rgba(170,220,255,.5));
  box-shadow: inset -.4vmin -.4vmin 0 rgba(150,200,240,.4); animation: sudin .25s ease-out; }
@keyframes sudin { from { transform: scale(0) } }
.sponge { position: absolute; left: 50%; top: 50%; font-size: 14vmin; transform: translate(-50%,-50%); pointer-events: none; opacity: 0; transition: opacity .2s; }
.sponge.on { opacity: 1; }
.sponge.demo { opacity: 1; animation: rubdemo 2.2s ease-in-out; }
@keyframes rubdemo { 0%, 100% { left: 35%; top: 45% } 25% { left: 65%; top: 40% } 50% { left: 35%; top: 62% } 75% { left: 65%; top: 58% } }
.showerbtn { position: absolute; top: -4vmin; right: -4vmin; width: min(22vmin, 170px); aspect-ratio: 1; border-radius: 50%; background: var(--sky);
  display: grid; place-items: center; font-size: min(13vmin, 100px); box-shadow: 0 0 0 1vmin #fff, 0 1.4vmin 0 rgba(60,110,120,.25);
  transform: scale(0); transition: transform .35s cubic-bezier(.3,1.4,.5,1); cursor: pointer; z-index: 3; }
.showerbtn.show { transform: scale(1); }
.showerbtn.glow { animation: glow 1.4s ease 2; }

/* ---- feelings ---- */
.card.face.hug { animation: hug .9s ease; }
@keyframes hug { 30% { transform: scale(.88, .92) } 60% { transform: scale(1.06) } }
.card.face.nap img { filter: brightness(.7) saturate(.8); transition: filter .6s; }

/* ---- shape sorter ---- */
.sorter { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 3vmin; padding: 4vmin;
  width: calc(2 * min(24vmin, 190px) + 11vmin); border-radius: 5vmin;
  background: linear-gradient(#E9A86B, #D98E4F); box-shadow: inset 0 -1.6vmin 0 rgba(0,0,0,.12), 0 0 0 1.2vmin #fff, 0 2vmin 0 rgba(107,74,58,.18); }
.hole, .piece { width: min(24vmin, 190px); aspect-ratio: 1; }
.hole svg, .piece svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hole svg * { fill: rgba(80,45,20,.6); stroke: rgba(80,45,20,.6); filter: drop-shadow(0 .6vmin 0 rgba(255,255,255,.35)); }
.hole.full svg * { fill: var(--c); stroke: var(--c); transition: fill .3s; }
.hole.glow svg { animation: holeglow 1.4s ease 2; }
@keyframes holeglow { 50% { filter: drop-shadow(0 0 1.5vmin #FFF6B0) drop-shadow(0 0 1vmin #FFE08A); transform: scale(1.08); } }
.shapetray { flex-direction: column; align-items: center; max-height: calc(100vh - 160px); align-content: center; }
@media (orientation: portrait) {
  .shapetray { flex-direction: row; }
  .hole, .piece { width: min(28vmin, 190px); }
  .sorter { width: calc(2 * min(28vmin, 190px) + 11vmin); }
  .tub { width: min(86vw, 560px); }
}
.piece { position: relative; z-index: 2; cursor: grab; touch-action: none; }
.piece svg { width: 90%; height: 90%; margin: 5%; }
.piece svg * { fill: var(--c); stroke: #fff; stroke-width: 5; filter: drop-shadow(0 1vmin 0 rgba(107,74,58,.2)); }
.piece.held { z-index: 30; cursor: grabbing; }
.piece.held svg * { filter: drop-shadow(0 3vmin 2vmin rgba(107,74,58,.3)); }

/* ---- memory pairs ---- */
.card.mem { background: none; box-shadow: none; overflow: visible; perspective: 900px; }
.memin { position: absolute; inset: 0; transition: transform .4s cubic-bezier(.3,1.2,.5,1); transform-style: preserve-3d; }
.card.mem.up .memin { transform: rotateY(180deg); }
.memback, .memfront { position: absolute; inset: 0; border-radius: 5vmin; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1.2vmin 0 rgba(107,74,58,.15); }
.memback { display: grid; place-items: center; font-size: min(10vmin, 80px);
  background: repeating-linear-gradient(45deg, #FFB98A 0 3vmin, #FFC9A0 3vmin 6vmin); border: .8vmin solid #fff; }
.memfront { background: var(--card); transform: rotateY(180deg); border: .8vmin solid #fff; }
.memfront img { width: 100%; height: 100%; object-fit: cover; }
.memfront .emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12vmin; }
.card.mem.matched .memfront { border-color: #FFE08A; box-shadow: 0 0 0 .6vmin #FFE08A, 0 1.2vmin 0 rgba(107,74,58,.15); }

/* ---- counting ---- */
.countask .digit { font-size: 1.5em; color: #E06F4E; margin-left: .2em; }
.countwrap { flex: 1; display: flex; align-items: center; justify-content: space-evenly; gap: 3vmin; padding: 84px 3vmin 76px; min-height: 0; }
.countleft { display: flex; flex-direction: column; align-items: center; gap: 2vmin; }
.countwrap .card.eater { width: min(34vmin, 300px); }
.platerow { display: flex; align-items: center; gap: 2vmin; }
.plate { width: min(46vmin, 400px); min-height: min(16vmin, 130px); border-radius: 50%/40%; background: radial-gradient(#fff 55%, #F2E6D8 56%, #fff 70%);
  box-shadow: 0 1vmin 0 rgba(107,74,58,.15); display: flex; flex-wrap: wrap; justify-content: center; align-content: center; padding: 1.5vmin 4vmin; }
.plate .citem { width: min(8vmin, 64px); box-shadow: none; background: none; }
.givebtn { width: min(14vmin, 110px); aspect-ratio: 1; border-radius: 50%; background: var(--leaf); display: grid; place-items: center; font-size: min(8vmin, 64px);
  box-shadow: 0 0 0 .8vmin #fff, 0 1.2vmin 0 rgba(0,0,0,.15); cursor: pointer; }
.givebtn.glow { animation: glow 1.4s ease 2; }
.counttray { display: grid; grid-template-columns: repeat(var(--cols, 3), auto); gap: 2vmin; }
.citem { width: min(15vmin, 120px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--card); cursor: pointer; position: relative;
  box-shadow: 0 0 0 .6vmin #fff, 0 .8vmin 0 rgba(107,74,58,.15); }
.citem img { width: 100%; height: 100%; object-fit: cover; }
.citem .emoji { position: absolute; inset: 0; display: grid; place-items: center; font-size: 9vmin; }
.plate .citem .emoji { font-size: 5vmin; }
@media (orientation: portrait) {
  .countwrap { flex-direction: column; justify-content: center; }
  .countwrap .card.eater { width: min(30vmin, 260px); }
  .plate { width: min(64vw, 400px); }
  .citem { width: min(17vw, 110px); }
  .plate .citem { width: min(9vw, 60px); }
}

/* ---- jigsaw ---- */
.pzboard { position: absolute; border-radius: 1.5vmin; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1vmin #fff, 0 1.6vmin 0 rgba(107,74,58,.18);
  background-image: linear-gradient(rgba(107,74,58,.25) 2px, transparent 2px), linear-gradient(90deg, rgba(107,74,58,.25) 2px, transparent 2px);
  background-size: calc(100% / var(--cols, 2)) calc(100% / var(--rows, 2)); background-position: -1px -1px; }
.pzghost { position: absolute; inset: 0; background-size: 100% 100%; filter: grayscale(.6); border-radius: inherit; }
.pzboard.done .pzghost { opacity: 1 !important; filter: none; transition: opacity .6s, filter .6s; z-index: 2; }
.pzlayer { position: absolute; inset: 0; pointer-events: none; }
.pz { position: absolute; pointer-events: auto; touch-action: none; cursor: grab; border-radius: .6vmin; box-shadow: 0 0 0 .4vmin #fff, 0 .8vmin 1vmin rgba(107,74,58,.3);
  transform: scale(var(--s, 1)); transition: transform .2s ease; }
.pz.held { cursor: grabbing; box-shadow: 0 0 0 .5vmin #fff, 0 2.4vmin 2.4vmin rgba(107,74,58,.35); transform: scale(1.04); }
.pz.placed { box-shadow: none; border-radius: 0; cursor: default; transform: none; }
.pzhint { position: absolute; border-radius: .6vmin; animation: glow 1.3s ease 2; background: rgba(255,240,150,.35); }

/* ---- 3D runners ---- */
.r3scene { background: #BDEBFF; }
.r3d { position: absolute; inset: 0; overflow: hidden; }
.r3d canvas { display: block; width: 100%; height: 100%; }
.r3hud { position: absolute; inset: 0; pointer-events: none; font-family: "Mali", sans-serif; }
.r3bar { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(50vw, 360px); height: 14px;
  border-radius: 8px; background: rgba(255,255,255,.6); box-shadow: 0 0 0 3px #fff; overflow: hidden; }
.r3fill { height: 100%; width: 0; background: linear-gradient(90deg, #FFC933, #FF7EB6); border-radius: 8px; }
.r3count { position: absolute; top: max(10px, env(safe-area-inset-top)); right: 14px; background: #fff; border-radius: 24px; padding: 6px 16px;
  font-size: 24px; font-weight: 700; color: var(--ink); box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.r3start { position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%); text-align: center; color: #fff; font-weight: 700;
  font-size: clamp(18px, 4vmin, 30px); text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.r3hand { font-size: clamp(48px, 12vmin, 96px); animation: r3hand 1.6s ease-in-out infinite; }
@keyframes r3hand { 0%, 100% { transform: translateX(-60%) } 50% { transform: translateX(60%) } }
.r3pop { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); font-size: clamp(40px, 10vmin, 90px); font-weight: 800;
  -webkit-text-stroke: 3px #fff; paint-order: stroke; animation: r3pop 1.1s ease-out forwards; }
@keyframes r3pop { from { transform: translate(-50%, 20px) scale(.6); opacity: 0 } 20% { transform: translate(-50%, 0) scale(1.1); opacity: 1 } to { transform: translate(-50%, -60px); opacity: 0 } }
.r3end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin;
  background: rgba(255,240,220,.55); opacity: 0; transition: opacity .4s; }
.r3end.show { opacity: 1; pointer-events: auto; }
.r3big { font-size: clamp(64px, 18vmin, 160px); font-weight: 800; color: #FF7A59; -webkit-text-stroke: 5px #fff; paint-order: stroke; }
.r3stars { font-size: clamp(40px, 10vmin, 90px); }
.r3next { width: clamp(90px, 22vmin, 160px); aspect-ratio: 1; border-radius: 50%; background: var(--leaf); color: #fff; display: grid; place-items: center;
  font-size: clamp(40px, 10vmin, 80px); box-shadow: 0 0 0 8px #fff, 0 10px 0 rgba(0,0,0,.15); cursor: pointer; animation: bob 1.4s ease-in-out infinite; }
.r3load { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 700; color: var(--ink); }

/* ---- cart ride ---- */
.cartbtn { position: absolute; bottom: max(64px, calc(env(safe-area-inset-bottom) + 56px)); width: clamp(84px, 20vmin, 140px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(40px, 10vmin, 70px); background: rgba(255,255,255,.85); pointer-events: auto; touch-action: none;
  box-shadow: 0 0 0 6px #fff, 0 8px 0 rgba(0,0,0,.15); transition: transform .1s; user-select: none; }
.cartbtn.hop { left: 18px; } .cartbtn.go { right: 18px; background: #FFE08A; }
.cartbtn.on { transform: scale(.9); background: #FFC933; }
.speedo { position: absolute; top: max(44px, calc(env(safe-area-inset-top) + 36px)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  font-size: 26px; background: rgba(255,255,255,.75); border-radius: 20px; padding: 2px 12px; }
.speedbar { width: min(36vw, 220px); height: 12px; border-radius: 6px; background: #E8EEF4; overflow: hidden; }
.speedfill { height: 100%; width: 20%; background: linear-gradient(90deg, #3DCB6C, #FFC933, #FF5A5F); border-radius: 6px; transition: width .2s; }
/* ---- lucky block ---- */
.luckyleft { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-size: 26px; background: rgba(255,255,255,.75);
  border-radius: 20px; padding: 2px 12px; min-height: 36px; }
.r3hand.up { animation: r3up 1.4s ease-in-out infinite; }
@keyframes r3up { 0% { transform: translateY(40%); opacity: .3 } 60% { transform: translateY(-60%); opacity: 1 } 100% { transform: translateY(-60%); opacity: 0 } }
/* ---- block world ---- */
.voxbar { position: absolute; left: 50%; bottom: max(58px, calc(env(safe-area-inset-bottom) + 50px)); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; padding: 8px; max-width: calc(100vw - 24px); background: rgba(255,255,255,.75); border-radius: 18px; z-index: 5; }
.voxtool { width: clamp(40px, 8vmin, 58px); aspect-ratio: 1; border-radius: 10px; background-size: cover; image-rendering: pixelated; cursor: pointer;
  box-shadow: 0 0 0 3px #fff, 0 3px 0 rgba(0,0,0,.2); }
.voxtool.icon { display: grid; place-items: center; font-size: clamp(24px, 5vmin, 34px); background: #fff; }
.voxtool.on { box-shadow: 0 0 0 4px #FF7A59, 0 0 0 7px #fff; transform: scale(1.12); }

/* privacy + weekly report (parent.js) */
.start .privacyline { font-size: clamp(12px, 2vmin, 15px); color: var(--soft); max-width: 520px; line-height: 1.5; background: rgba(255,255,255,.7); border-radius: 12px; padding: 6px 12px; }
.privacy { display: flex; flex-direction: column; gap: 4px; background: #EAF7EC; border-radius: 14px; padding: 10px 12px; margin: 12px 0; }
.privacy small { line-height: 1.55; }
.sheet .box.privacyintro { max-width: 460px; }
.privacyintro ul { padding-left: 20px; line-height: 1.6; margin: 8px 0 14px; }
.privacyintro li { margin: 4px 0; }
.report { background: #FFF1E4; border-radius: 16px; padding: 12px 14px; margin: 12px 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.report.soft { background: #EEF4FF; }
.report .rbig { font-size: 30px; font-weight: 700; color: #E06F4E; line-height: 1.1; }
.report .rnote { color: var(--soft); margin-top: 4px; }
.meter.wide { width: 34%; }
.rmin { min-width: 58px; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.chip { border-radius: 999px; padding: 4px 10px; font-size: 14px; font-weight: 700; }
.chip.known { background: #D8F2DC; color: #2F7A3D; }
.chip.learning { background: #FFF0C2; color: #8A6A10; }
.lockhelp details { margin-top: 8px; }
.lockhelp summary { cursor: pointer; font-weight: 700; color: #E06F4E; }
.lockhelp ul { margin: 6px 0 0; padding-left: 20px; }
.lockhelp li { margin: 3px 0; }