/* Engines, breaks, characters. Loaded after style.css. */

/* ---------- characters (CSS-only animation of the two cutouts) ---------- */
/* translate / rotate / scale are animated separately so idle, talk, lean and cheer can mix */
.didi { animation: breatheChar 3.2s ease-in-out infinite; transition: rotate .35s ease, left .5s ease, height .5s ease, translate .5s ease; }
.didi.talking { animation: breatheChar 3.2s ease-in-out infinite, talk .5s ease-in-out infinite alternate; }
@keyframes breatheChar { 50% { scale: 1.012 1.025; } }
@keyframes talk { from { translate: 0 0; } to { translate: 0 -5px; } }
.didi.cheer { animation: cheerJump .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes cheerJump { 40% { translate: 0 -34px; scale: 1.04 .97; } 70% { translate: 0 0; scale: 1.03 .95; } }
.golu { animation: goluIdle 2.6s ease-in-out infinite; }
@keyframes goluIdle { 50% { scale: 1.02 .98; } }
.golu.jump { animation: jump .6s cubic-bezier(.3, 1.6, .5, 1); }
.golu.wiggle { animation: goluWiggle .8s ease-in-out; }
@keyframes goluWiggle { 20% { rotate: -10deg; } 40% { rotate: 9deg; } 60% { rotate: -6deg; } 80% { rotate: 4deg; } }

/* Didi Says: Didi steps to the middle and demonstrates */
.didi.center { left: 50%; translate: -50% 0; height: min(58vh, 460px); z-index: 4; }
.didi.center.talking { animation: breatheChar 3.2s ease-in-out infinite, talkC .5s ease-in-out infinite alternate; }
@keyframes talkC { from { translate: -50% 0; } to { translate: -50% -5px; } }
.didi.ds-clap   { animation: dsClap .35s ease-in-out infinite alternate; }
.didi.ds-stretch{ animation: dsStretch 2s ease-in-out infinite; }
.didi.ds-bend   { animation: dsBend 2.2s ease-in-out infinite; }
.didi.ds-jump   { animation: dsJump .9s ease-in-out infinite; }
.didi.ds-march  { animation: dsMarch .6s ease-in-out infinite; }
.didi.ds-wiggle { animation: dsWiggle .45s ease-in-out infinite; }
.didi.ds-roar   { animation: dsRoar 1.2s ease-in-out infinite; }
.didi.ds-flap   { animation: dsFlap .5s ease-in-out infinite; }
.didi.ds-nod    { animation: dsNod .7s ease-in-out infinite; }
.didi.ds-sway   { animation: dsSway 2.4s ease-in-out infinite; }
.didi.ds-wave   { animation: dsWave 1s ease-in-out infinite; }
.didi.ds-breathe{ animation: dsBreathe 4s ease-in-out infinite; }
.didi.ds-hug    { animation: dsHug 1.6s ease-in-out infinite; }
@keyframes dsClap { to { scale: 1.03 .98; } }
@keyframes dsStretch { 50% { scale: .97 1.1; } }
@keyframes dsBend { 50% { scale: 1.04 .86; rotate: 3deg; } }
@keyframes dsJump { 0%, 100% { translate: -50% 0; } 40% { translate: -50% -26px; } 55% { translate: -50% 0; scale: 1.04 .95; } }
@keyframes dsMarch { 0%, 100% { rotate: -2.5deg; translate: -50% 0; } 25% { translate: -50% -8px; } 50% { rotate: 2.5deg; translate: -50% 0; } 75% { translate: -50% -8px; } }
@keyframes dsWiggle { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes dsRoar { 50% { scale: 1.09; } }
@keyframes dsFlap { 50% { scale: 1.08 .98; } }
@keyframes dsNod { 50% { translate: -50% 6px; } }
@keyframes dsSway { 0%, 100% { rotate: -6deg; } 50% { rotate: 6deg; } }
@keyframes dsWave { 0%, 100% { rotate: -2deg; } 50% { rotate: 3deg; } }
@keyframes dsBreathe { 50% { scale: 1.06; } }
@keyframes dsHug { 50% { scale: .9 1; } }

/* ---------- pictures ---------- */
.picture { display: grid; place-items: center; width: 100%; height: 100%; }
.emo { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.emo-txt { display: grid; place-items: center; font-size: calc(var(--tap, 160px) * .6); line-height: 1; }
.emo.tiny { width: 100%; height: auto; aspect-ratio: 1; }
.glyph.num { color: #3b82f6; }
.glyph.word { font-size: calc(var(--tap, 200px) * .42); }
.learn-pic .glyph.word { font-size: min(20vmin, 150px); }
.shape { display: grid; place-items: center; width: 100%; height: 100%; }
.shape svg { width: 92%; height: 92%; overflow: visible; filter: drop-shadow(0 4px 0 rgba(74, 52, 38, .15)); }

/* learn card extras */
.learn-duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: center; width: 100%; height: 100%; }
.learn-duo.col { grid-template-columns: 1fr; grid-template-rows: 1.2fr 1fr; }
.learn-duo .picture.small { animation: bobble 2s ease-in-out infinite; }
.learn-pic:has(.learn-duo) { width: min(70vmin, 520px); aspect-ratio: auto; height: min(40vmin, 320px); animation: none; }
@keyframes bobble { 50% { translate: 0 -8px; } }
.count-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; align-content: center; justify-items: center; max-height: 100%; }
.count-row .emo { width: min(8vmin, 54px); height: min(8vmin, 54px); }

/* pop it with letters / numbers inside */
.bubble.label { display: grid; place-items: center; }
.bubble.label .glyph { background: transparent; color: #fff; font-size: clamp(54px, 9vmin, 88px); text-shadow: 0 3px 0 rgba(0, 0, 0, .25); }

/* find it with a picture on top */
.find-wrap { display: grid; justify-items: center; gap: clamp(10px, 3vmin, 26px); }
.ear-btn { width: clamp(90px, 15vmin, 130px); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: var(--shadow); padding: 16px; }
.ear-btn.playing { animation: hint 1s ease-in-out infinite; }

/* peekaboo */
.peek-scene { position: relative; width: clamp(150px, 26vmin, 230px); aspect-ratio: 1; }
.peeker { position: absolute; left: 20%; top: 0; width: 60%; animation: peek 2.2s ease-in-out infinite; }
.peek-cover { position: absolute; inset: 18% 0 0 0; }
@keyframes peek { 0%, 100% { translate: 0 45%; } 50% { translate: 0 8%; } }
.peek-scene.reveal .peek-cover { animation: slideAway .45s ease-in forwards; }
.peek-scene.reveal .peeker { animation: none; translate: 0 10%; scale: 1.2; }
@keyframes slideAway { to { translate: 120% 0; opacity: 0; } }

/* feed the animal */
.feed { display: grid; justify-items: center; gap: 12px; width: 100%; }
.feeder { position: relative; width: clamp(140px, 26vmin, 230px); aspect-ratio: 1; border-radius: 50%; background: #fff3d6; padding: 18px; box-shadow: var(--shadow); }
.feeder.over, .bin.over, .hole.over, .match-card.over { outline: 8px solid var(--sun); }
.feeder.munch { animation: munch .4s ease-in-out 2; }
@keyframes munch { 50% { scale: 1.12 .9; } }
.feed-count { min-height: 20px; }
.pop-progress.feed-dots { position: static; transform: none; flex-wrap: wrap; justify-content: center; max-width: 90vw; }
.tray { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(8px, 2vmin, 16px); max-width: min(92vw, 820px); }
.food { position: relative; width: clamp(76px, 12vmin, 110px); aspect-ratio: 1; padding: 6px; border-radius: 24px; background: var(--card); box-shadow: var(--shadow); touch-action: none; }
.food.cookie .glyph { position: absolute; inset: 22%; width: auto; height: auto; background: transparent; color: #7c2d12; font-size: clamp(30px, 6vmin, 52px); }
.food.done { opacity: .35; }
.dragging { z-index: 30; position: relative; transition: none !important; scale: 1.08; cursor: grabbing; }

/* count & tap */
.count-field { display: grid; grid-template-columns: repeat(var(--cols, 5), clamp(64px, 11vmin, 104px)); gap: clamp(8px, 2vmin, 18px); justify-content: center; }
.count-field.c1, .count-field.c2, .count-field.c3, .count-field.c4 { --cols: 4; }
.count-field.small { grid-template-columns: repeat(var(--cols, 5), clamp(34px, 6vmin, 52px)); gap: 6px; }
.count-thing { position: relative; aspect-ratio: 1; padding: 8px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
.count-thing.counted { background: #fff3d6; }
.count-badge { position: absolute; right: -8px; top: -10px; min-width: 40px; height: 40px; padding: 0 6px; border-radius: 20px; background: #3b82f6; color: #fff; font-size: 24px; line-height: 40px; }

/* match pairs */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 10vw, 160px); }
.match-col { display: grid; gap: clamp(10px, 2vmin, 20px); }
.match-card { --tap: clamp(84px, 15vmin, 140px); }
.match.n4 .match-card { --tap: clamp(76px, 13vmin, 120px); }
.match-card.picked { box-shadow: 0 0 0 7px var(--sun), var(--shadow); }
.match-card.matched { background: #e6f7df; }
.small-baby { width: 62%; height: 62%; margin: auto; }
.picture.baby { background: radial-gradient(circle, #ffe4ef 0 55%, transparent 56%); border-radius: 50%; }
/* flip-card memory (age 5 Match Pairs) */
.memory { display: grid; grid-template-columns: repeat(3, var(--tap)); gap: clamp(12px, 2.5vmin, 26px); --tap: clamp(96px, 21vmin, 180px); }
.mem-card { position: relative; width: var(--tap); height: var(--tap); border-radius: 30px; perspective: 700px; background: none; padding: 0; }
.mem-card > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; padding: 14px;
  backface-visibility: hidden; transition: transform .35s; box-shadow: var(--shadow); }
.mem-back { background: linear-gradient(135deg, var(--coral), var(--sun)); }
.mem-back img { width: 46%; opacity: .85; }
.mem-face { background: var(--card); transform: rotateY(180deg); }
.mem-card.up .mem-back { transform: rotateY(-180deg); }
.mem-card.up .mem-face { transform: rotateY(0); }
.mem-card.matched .mem-face { background: #e6f7df; }
.mem-card.yay { animation: yay .7s cubic-bezier(.3, 1.6, .5, 1); }

/* sort it + shape puzzle */
.sort, .puzzle { display: grid; justify-items: center; gap: clamp(14px, 4vmin, 34px); width: 100%; }
.sort-slot { min-height: clamp(100px, 17vmin, 150px); display: grid; place-items: center; }
.sort-thing, .piece { width: clamp(100px, 17vmin, 150px); aspect-ratio: 1; padding: 10px; border-radius: 30px; background: var(--card); box-shadow: var(--shadow); touch-action: none; }
.bins, .board { display: flex; gap: clamp(12px, 3vmin, 30px); flex-wrap: wrap; justify-content: center; }
.bin { position: relative; width: clamp(120px, 20vmin, 190px); aspect-ratio: 1.1; padding: 14px 20px 30px; border-radius: 30px; background: color-mix(in srgb, var(--c) 35%, #fff); box-shadow: inset 0 -10px 0 color-mix(in srgb, var(--c) 70%, #000 10%), var(--shadow); }
.bin.colour { background: var(--c); }
.bin-pile { position: absolute; left: 8px; right: 8px; bottom: 6px; display: flex; justify-content: center; gap: 2px; }
.bin-pile .emo { width: 28px; height: 28px; }
.hole { width: clamp(100px, 17vmin, 160px); aspect-ratio: 1; padding: 10px; border-radius: 26px; background: #fff3d6; box-shadow: inset 0 6px 0 rgba(74, 52, 38, .1); }
.hole.filled { background: #e6f7df; }

/* colour the picture */
.colouring { display: flex; gap: clamp(16px, 4vmin, 40px); align-items: center; justify-content: center; flex-wrap: wrap; }
.pic-frame { width: min(46vmin, 360px); aspect-ratio: 1; background: #fff; border-radius: 34px; padding: 18px; box-shadow: var(--shadow); }
.colour-pic { width: 100%; height: 100%; overflow: visible; }
.colour-pic .region { fill: #fff; stroke: #4a3426; stroke-width: 1.6; stroke-linejoin: round; transition: fill .4s; }
.colour-pic .region.glow { fill: #fff3d6; animation: glow 1s ease-in-out infinite; }
@keyframes glow { 50% { fill: #ffe08a; } }
.palette { display: grid; grid-template-columns: repeat(2, auto); gap: clamp(10px, 2.5vmin, 22px); }
.pot { width: clamp(80px, 13vmin, 120px); aspect-ratio: 1; border-radius: 50% 50% 44% 44%; background: var(--c); box-shadow: inset -8px -10px 0 rgba(0, 0, 0, .15), inset 6px 6px 0 rgba(255, 255, 255, .35), 0 0 0 4px #fff, var(--shadow); }

/* join the dots */
.dots-wrap { position: relative; width: min(56vmin, 440px, 86vw); aspect-ratio: 1; background: #fff; border-radius: 34px; box-shadow: var(--shadow); }
.dots-pic { position: absolute; inset: 0; width: 100%; height: 100%; }
.dots-line { fill: none; stroke: var(--coral); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dots-fill { fill: #ffe08a; animation: popIn .5s ease-out; }
.dot { position: absolute; width: clamp(48px, 8vmin, 64px); aspect-ratio: 1; margin: calc(clamp(48px, 8vmin, 64px) / -2) 0 0 calc(clamp(48px, 8vmin, 64px) / -2); border-radius: 50%; background: #fff3d6; border: 4px solid #e9c58a; font-size: clamp(20px, 3.4vmin, 28px); font-weight: 800; color: var(--ink); }
.dot.next { z-index: 2; background: var(--sun); border-color: var(--coral); animation: hint 1s ease-in-out infinite; }
.dot.done { background: var(--coral); border-color: var(--coral); color: #fff; }

/* spell the word */
.spell { display: grid; justify-items: center; gap: clamp(12px, 3vmin, 26px); }
.spell > .picture { width: clamp(100px, 18vmin, 160px); aspect-ratio: 1; }
.slots { display: flex; gap: 12px; }
.slot { width: clamp(76px, 13vmin, 120px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 24px; border: 5px dashed #e9c58a; font-size: clamp(44px, 8vmin, 76px); font-weight: 800; color: var(--coral); }
.tiles { display: flex; gap: clamp(14px, 4vmin, 34px); }
.tile { --tap: clamp(100px, 17vmin, 150px); }
.tile.used { opacity: .3; }

/* ---------- breaks ---------- */
.wrap-sheet { display: grid; gap: clamp(6px, 1.6vmin, 14px); width: min(92vw, 900px); padding: clamp(10px, 2vmin, 20px); border-radius: 30px; background: color-mix(in srgb, var(--c) 25%, #fff); box-shadow: var(--shadow); }
.wrap-bubble { aspect-ratio: 1; border-radius: 50%; touch-action: none; background: radial-gradient(circle at 34% 30%, #fff 0 14%, transparent 15%), radial-gradient(circle, color-mix(in srgb, var(--c) 30%, #fff) 0 60%, color-mix(in srgb, var(--c) 70%, #fff) 100%); box-shadow: 0 4px 8px rgba(74, 52, 38, .15); }
.wrap-bubble.flat { scale: .8; opacity: .45; background: color-mix(in srgb, var(--c) 30%, #fff); box-shadow: none; transition: scale .1s; }

.piano { display: flex; gap: clamp(4px, 1vw, 10px); width: min(96vw, 1000px); height: min(46vh, 380px); touch-action: none; }
.pkey { flex: 1; border-radius: 0 0 26px 26px; background: linear-gradient(#fff 0 55%, var(--c) 55%); box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .12), var(--shadow); display: flex; align-items: flex-end; justify-content: center; padding: 0 4px 18px; }
.pkey .emo { width: 80%; height: auto; aspect-ratio: 1; }
.pkey.hit { animation: keyHit .3s ease-out; }
@keyframes keyHit { 30% { translate: 0 10px; filter: brightness(1.15); } }

.paint { position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; background: radial-gradient(circle at 50% 30%, #fff 0, #f3ecff 70%); }
.night { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 50% 120%, #3b2a6b 0, #141235 70%); touch-action: none; }
.night::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(2px 2px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 50%, #fff, transparent), radial-gradient(2px 2px at 10% 70%, #fff, transparent); }
.rocket { position: absolute; width: 8px; height: 26px; margin-left: -4px; border-radius: 4px; background: linear-gradient(var(--c), transparent); }
.dance-floor { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 3vmin, 30px); max-width: 92vw; }
.dancer { width: clamp(100px, 17vmin, 160px); aspect-ratio: 1; animation: bop .55s ease-in-out infinite alternate; }
.dancer.big { animation: bigDance .8s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bop { from { translate: 0 0; rotate: -8deg; } to { translate: 0 -18px; rotate: 8deg; } }
@keyframes bigDance { 40% { translate: 0 -60px; scale: 1.3; rotate: 20deg; } }

/* Didi Says */
.ds { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 2vh 3vw 6vh; pointer-events: none; }
.ds > * { pointer-events: auto; }
.ds-card { grid-column: 2; justify-self: center; width: min(26vmin, 220px); aspect-ratio: 1; padding: 18px; border-radius: 34px; background: #fff; box-shadow: var(--shadow); }
.ds-words { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; display: grid; gap: 6px; max-width: 30vw; padding: 14px 18px; border-radius: 24px; background: rgba(255, 255, 255, .9); font-size: clamp(18px, 2.6vmin, 26px); font-weight: 700; line-height: 1.2; box-shadow: var(--shadow); }
.big-btn { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 14px; min-height: clamp(90px, 15vmin, 130px); padding: 10px 34px 10px 18px; border-radius: 999px; background: var(--leaf); color: #fff; font-size: clamp(30px, 5.5vmin, 48px); font-weight: 800; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .15), var(--shadow); animation: popIn .45s cubic-bezier(.3, 1.6, .5, 1) both, hint 1.4s ease-in-out .6s infinite; }
.big-ico { width: clamp(60px, 10vmin, 90px); aspect-ratio: 1; }

/* rewards + sticker book */
.sticker .emo { width: 64px; height: 64px; }
.sticker.big .emo { width: min(40vmin, 260px); height: min(40vmin, 260px); }
.sun { display: flex; gap: 10px; }
.sun .emo { width: min(16vmin, 110px); height: min(16vmin, 110px); }
.bye .book-grid { max-width: min(92vw, 760px); }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; width: 100%; }
.book-cell { position: relative; aspect-ratio: 1; padding: 8px; border-radius: 18px; background: #fff3d6; }
.book-cell:not(.got) .emo { filter: grayscale(1) brightness(1.6); opacity: .28; }
.book-cell.new { box-shadow: 0 0 0 4px var(--sun); animation: popIn .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.book-n { position: absolute; right: 2px; bottom: 0; font-size: 13px; color: var(--ink-soft); }
.book-btn { margin-top: 10px; width: 100%; min-height: 56px; border-radius: 22px; font-size: 22px; font-weight: 700; background: #fff3d6; box-shadow: inset 0 -4px 0 rgba(74, 52, 38, .1); }
.book { z-index: 40; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(74, 52, 38, .35); }
.book-card { width: min(720px, 100%); background: var(--card); border-radius: 32px; padding: 20px; box-shadow: var(--shadow); text-align: center; }
.book-card h2 { margin: 0 0 12px; color: var(--coral); }
.start.small { min-height: 60px; font-size: 24px; margin-top: 16px; }
.fine a { color: var(--ink-soft); }

/* ---------- phones ---------- */
@media (max-width: 600px) {
  .didi.center { height: 40vh; }
  .ds { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; justify-items: center; padding-bottom: 42vh; }
  .ds-card, .big-btn { grid-column: 1; }
  .ds-words { grid-column: 1; grid-row: 1; justify-self: center; max-width: calc(100vw - 96px); margin-right: 64px; }
  .ds-card { width: 34vmin; }
  .big-btn { grid-row: 4; position: fixed; bottom: 3vh; z-index: 6; }
  .match { gap: 24px; }
  .memory { grid-template-columns: repeat(2, var(--tap)); --tap: clamp(92px, 28vw, 150px); }
  .colouring { flex-direction: column; }
  .palette { grid-template-columns: repeat(4, auto); }
  .piano { height: 40vh; }
  .count-field { --cols: 4; }
  .dots-wrap { width: min(86vw, 52vh); }
}
@media (prefers-reduced-motion: reduce) {
  .didi, .golu, .dancer, .peeker, .didi[class*='ds-'] { animation: none !important; }
}