@font-face { font-family: 'andika'; src: url('./fonts/andika-bold.woff2') format('woff2'); font-weight: 700 900; font-display: block; }
@font-face { font-family: 'andika'; src: url('./fonts/andika-regular.woff2') format('woff2'); font-weight: 400 600; font-display: block; }

:root {
  --ink: #2a2140;
  --skin: #8a5cf6;
  --skin-dark: #6a3fd8;
  --belly: #c9b3ff;
  --cookie: #e9b871;
  --cookie-edge: #b9823c;
  --chip: #6b3f1d;
  --sun: #ffc23d;
  --tomato: #ff6b4a;
  --mint: #34c98b;
  --sky: #4aa8ff;
  --letters: 'andika', 'Century Gothic', 'Avenir Next', system-ui, sans-serif;
  --ui: ui-rounded, 'SF Pro Rounded', 'andika', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: var(--ui); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: manipulation;
  background: linear-gradient(#bfe9ff 0%, #e3f6ff 55%, #fff4d6 100%);
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }

#app { position: fixed; inset: 0; overflow: hidden; }
#app::after { /* grassy hill */
  content: ''; position: absolute; left: -10%; right: -10%; bottom: -36vh; height: 52vh; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 20%, #8be08b, #5cc46a 70%); z-index: 0; pointer-events: none;
}
.screen { position: absolute; inset: 0; display: none; z-index: 1; padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.screen[data-active] { display: flex; flex-direction: column; animation: in .35s ease-out; }
@keyframes in { from { opacity: 0; transform: scale(.98); } }

/* bars & buttons */
.bar { display: flex; align-items: center; gap: 12px; position: relative; z-index: 3; }
.bar h2 { margin: 0; font-size: 1.3rem; }
.spacer { flex: 1; }
.round {
  width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 4px solid var(--ink);
  font-size: 1.6rem; display: grid; place-items: center; box-shadow: 0 5px 0 var(--ink); flex: none; position: relative;
}
.round:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.round.hold svg { position: absolute; inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); transform: rotate(-90deg); pointer-events: none; }
.round.hold circle { fill: none; stroke: var(--tomato); stroke-width: 4; stroke-dasharray: 101; stroke-dashoffset: 101; }
.round.hold.holding circle { transition: stroke-dashoffset 1.6s linear; stroke-dashoffset: 0; }
.corner { position: absolute; top: max(14px, env(safe-area-inset-top)); display: flex; gap: 10px; z-index: 3; }
.corner.tl { left: max(14px, env(safe-area-inset-left)); }
.corner.tr { right: max(14px, env(safe-area-inset-right)); }

.play {
  width: 130px; height: 130px; border-radius: 50%; background: var(--sun); border: 6px solid var(--ink);
  font-size: 3.6rem; box-shadow: 0 9px 0 var(--ink); display: grid; place-items: center; padding-left: 10px;
  animation: pulse 1.6s ease-in-out infinite; z-index: 2;
}
.play:active { transform: translateY(7px); box-shadow: 0 2px 0 var(--ink); animation: none; }
.play.small { width: 92px; height: 92px; font-size: 2.6rem; padding-left: 0; animation: none; background: #fff; }
.play.small.go { background: var(--mint); color: #fff; padding-left: 6px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.07); } }

/* title */
#title { align-items: center; justify-content: center; gap: 4px; }
.logo { font-family: var(--letters); font-size: clamp(4rem, 15vw, 7.5rem); margin: 0; line-height: 1; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; letter-spacing: .02em; text-shadow: 0 8px 0 var(--ink); transform: rotate(-3deg); }
.streak { font-weight: 900; font-size: 1.2rem; min-height: 1.6em; }
.monster-slot { position: relative; z-index: 2; }
#title .monster-slot { width: min(52vw, 280px); aspect-ratio: 200 / 190; margin: 6px 0 18px; }

/* the monster */
.monster { position: absolute; z-index: 4; pointer-events: none; transition: none; }
.monster svg { width: 100%; height: 100%; overflow: visible; display: block; }
.monster .skin { fill: var(--skin); stroke: var(--ink); stroke-width: 6; }
.monster .horn { fill: #ffd56b; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.monster .belly { fill: var(--belly); }
.monster .foot { fill: var(--skin-dark); stroke: var(--ink); stroke-width: 5; }
.monster .pupil { fill: var(--ink); transition: transform .15s; }
.monster .glint { fill: #fff; }
.monster .lid { fill: var(--skin); transform: scaleY(0); transform-origin: 0 -24px; transition: transform .08s; }
.monster.blink .lid { transform: scaleY(1); }
.monster .cheek { fill: #ff8fb8; opacity: .6; }
.monster .mouth { display: none; }
.monster .mouth.closed { display: block; }
.monster.open .mouth.closed, .monster.sad .mouth.closed { display: none; }
.monster.open .mouth.open { display: block; }
.monster.sad .mouth.sad { display: block; }
.monster .body { transform-origin: 100px 185px; animation: idle 2.4s ease-in-out infinite; }
@keyframes idle { 50% { transform: scale(1.02, .98); } }
.monster.chomp .body { animation: chomp .5s ease-in-out; }
@keyframes chomp { 0%, 100% { transform: none; } 25% { transform: scale(1.12, .86); } 50% { transform: scale(.94, 1.08); } 75% { transform: scale(1.06, .94); } }
.monster.shake .body { animation: shake .45s; }
@keyframes shake { 20% { transform: rotate(-6deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(3deg); } }
.monster.dance .body { animation: dance .9s ease-in-out 2; }
@keyframes dance { 25% { transform: rotate(-10deg) translateY(-14px); } 50% { transform: none; } 75% { transform: rotate(10deg) translateY(-14px); } }
.monster.fire .skin { fill: #ff7a45; transition: fill .3s; }
.monster .hat { position: absolute; left: 50%; top: -14%; transform: translateX(-50%) rotate(-6deg); font-size: calc(var(--size, 200px) * .34); line-height: 1; z-index: 2; }

/* map */
.map-scroll { flex: 1; overflow-y: auto; position: relative; margin: 10px -14px -14px; padding: 20px 0 22vh; -webkit-overflow-scrolling: touch; }
.map-path { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
.map-path path { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; stroke-dasharray: 2 26; opacity: .9; }
.nodes { position: relative; padding-top: 30px; display: flex; flex-direction: column-reverse; align-items: center; gap: 34px; }
.node {
  width: 104px; height: 104px; border-radius: 50%; background: #fff; border: 6px solid var(--ink);
  box-shadow: 0 8px 0 var(--ink); font-family: var(--letters); font-weight: 700; font-size: 1.7rem; line-height: 1.05;
  display: grid; place-items: center; text-align: center; padding: 6px; position: relative;
}
.node:active { transform: translateY(6px); box-shadow: 0 2px 0 var(--ink); }
.node.done { background: var(--sun); }
.node.current { background: var(--mint); color: #fff; animation: pulse 1.4s infinite; }
.node.locked { background: #d9d4e6; color: #8d86a3; box-shadow: 0 8px 0 #8d86a3; border-color: #8d86a3; }
.node.long { font-size: 1.15rem; }
.node .nstars { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: 1.1rem; white-space: nowrap; letter-spacing: -2px; }
.node .lock { position: absolute; top: -12px; right: -10px; font-size: 1.4rem; }
.stars-total, .count-pill { font-weight: 900; font-size: 1.3rem; background: #fff; border: 4px solid var(--ink); border-radius: 999px; padding: 6px 16px; box-shadow: 0 5px 0 var(--ink); }

/* lesson */
#lesson { padding-bottom: 0; }
.progress { flex: 1; height: 24px; border: 4px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.progress .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), #7fe0b4); border-radius: 999px; transition: width .4s; }
.combo { min-width: 56px; font-weight: 900; font-size: 1.4rem; text-align: right; }
.combo.hot { animation: pulse .6s infinite; }
.stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; position: relative; z-index: 2; padding-bottom: 30vh; }
.task { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-height: 60px; }
.task.col { flex-direction: column; gap: 8px; }
.choices { display: flex; gap: clamp(12px, 3vw, 28px); justify-content: center; flex-wrap: wrap; }
#lesson .monster-slot { position: absolute; left: 50%; bottom: max(0px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(44vw, 30vh, 250px); aspect-ratio: 200 / 190; }
.ear { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(22px, env(safe-area-inset-bottom)); width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 5px solid var(--ink); box-shadow: 0 6px 0 var(--ink); font-size: 2.2rem; z-index: 3; }
.ear:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
.ear.talking { animation: pulse .5s infinite; }

@media (orientation: landscape) and (max-height: 600px) {
  .stage { padding-bottom: 0; padding-left: 30vw; }
  #lesson .monster-slot { left: 16vw; bottom: 8px; width: min(28vw, 55vh); }
}

/* cookies (things to feed) */
.cookie {
  --s: clamp(92px, 21vw, 140px);
  width: var(--s); height: var(--s); border-radius: 50%; position: relative;
  background: radial-gradient(circle at 30% 28%, #f6d39a, var(--cookie) 60%, #d79f55);
  border: 5px solid var(--cookie-edge); box-shadow: 0 7px 0 var(--cookie-edge), inset 0 -6px 0 #0000001a;
  font-family: var(--letters); font-weight: 700; font-size: calc(var(--s) * .55); line-height: 1; color: var(--ink);
  display: grid; place-items: center; padding-bottom: .12em; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1) backwards;
}
.cookie::before, .cookie::after { content: ''; position: absolute; width: 9%; height: 9%; border-radius: 40%; background: var(--chip); opacity: .75; }
.cookie::before { left: 18%; top: 24%; box-shadow: calc(var(--s) * .5) calc(var(--s) * -.05) 0 var(--chip), calc(var(--s) * .52) calc(var(--s) * .45) 0 var(--chip); }
.cookie::after { left: 22%; bottom: 18%; box-shadow: calc(var(--s) * .32) calc(var(--s) * .08) 0 var(--chip); }
.cookie span { position: relative; z-index: 1; background: #fff9ee; border-radius: 30%; padding: 0 .12em .06em; }
.cookie.word { width: auto; min-width: var(--s); border-radius: 46px; padding: 0 .35em .12em; font-size: calc(var(--s) * .42); height: calc(var(--s) * .9); }
.cookie.pic { background: #fff; border-color: var(--ink); box-shadow: 0 7px 0 var(--ink); font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: calc(var(--s) * .5); border-radius: 28px; }
.cookie.pic::before, .cookie.pic::after { display: none; }
.cookie:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--cookie-edge); }
.cookie.wrong { animation: wobble .45s; filter: saturate(.4); }
.cookie.hint { animation: glow 1s infinite; }
.cookie:nth-child(2) { animation-delay: .08s; } .cookie:nth-child(3) { animation-delay: .16s; } .cookie:nth-child(4) { animation-delay: .24s; }
@keyframes pop { from { transform: scale(0); } }
@keyframes wobble { 20% { transform: translateX(-12px) rotate(-6deg); } 40% { transform: translateX(10px) rotate(5deg); } 60% { transform: translateX(-6px); } 80% { transform: translateX(4px); } }
@keyframes glow { 50% { transform: scale(1.1); box-shadow: 0 0 0 10px #ffe58a, 0 7px 0 var(--cookie-edge); } }

/* big letter (meet) */
.big-letter {
  font-family: var(--letters); font-weight: 700; font-size: clamp(9rem, 34vh, 16rem); line-height: .9; color: #fff;
  -webkit-text-stroke: 10px var(--ink); paint-order: stroke fill; text-shadow: 0 10px 0 var(--ink);
  padding: 0 .1em .1em; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1);
}
.big-letter.bounce { animation: boing .45s; }
@keyframes boing { 30% { transform: scale(1.18, .85); } 60% { transform: scale(.92, 1.1); } }
.keypic { font-size: clamp(3rem, 10vh, 5rem); animation: pop .5s .3s cubic-bezier(.3, 1.6, .5, 1) backwards; }
.taps { display: flex; gap: 10px; justify-content: center; }
.taps i { width: 22px; height: 22px; border-radius: 50%; border: 4px solid var(--ink); background: #fff; }
.taps i.on { background: var(--sun); }
.two-note { font-weight: 900; background: #fff; border: 4px solid var(--ink); border-radius: 999px; padding: 4px 14px; }

/* word tiles + blending slide */
.word { display: flex; gap: 6px; position: relative; padding-bottom: 46px; }
.tile {
  font-family: var(--letters); font-weight: 700; font-size: clamp(3.6rem, 13vh, 6.5rem); line-height: 1; min-width: .75em;
  padding: .02em .12em .14em; background: #fff; border: 5px solid var(--ink); border-radius: 20px; text-align: center;
  box-shadow: 0 7px 0 var(--ink); transition: background .15s, transform .15s; position: relative;
}
.tile.lit { background: var(--sun); transform: translateY(-8px); }
.tile .dot { position: absolute; left: 50%; bottom: -40px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: var(--ink); }
.tile.heart::after { content: '❤️'; position: absolute; top: -.32em; right: -.2em; font-size: .38em; }
.track { position: absolute; left: 0; right: -30px; bottom: 6px; height: 34px; touch-action: none; }
.track::before { content: ''; position: absolute; left: 10px; right: 40px; top: 50%; height: 6px; margin-top: -3px; background: var(--ink); border-radius: 3px; }
.track::after { content: ''; position: absolute; right: 22px; top: 50%; margin-top: -14px; border: 14px solid transparent; border-left: 22px solid var(--ink); border-right: 0; }
.finger { position: absolute; left: -12px; top: -22px; width: 72px; height: 72px; border-radius: 50%; background: var(--tomato); border: 5px solid var(--ink); box-shadow: 0 5px 0 var(--ink); display: grid; place-items: center; font-size: 2rem; touch-action: none; cursor: grab; z-index: 2; }
.finger.nudge { animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(26px); } }
.slow-btn { font-size: 2rem; width: 64px; height: 64px; }
.slots { display: flex; gap: 8px; }
.slot { min-width: clamp(70px, 14vh, 110px); height: clamp(84px, 16vh, 130px); border: 5px dashed #2a214080; border-radius: 20px; background: #ffffff80; display: grid; place-items: center; font-family: var(--letters); font-weight: 700; font-size: clamp(3.2rem, 11vh, 5.6rem); padding-bottom: .1em; }
.slot.filled { border-style: solid; border-color: var(--ink); background: #fff; animation: pop .3s; }
.bigpic { font-size: clamp(4rem, 14vh, 7rem); line-height: 1; animation: pop .4s cubic-bezier(.3, 1.6, .5, 1); }
.sentence { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; max-width: 900px; }
.sentence button { font-family: var(--letters); font-weight: 700; font-size: clamp(2.6rem, 8vh, 4.4rem); background: #fff; border: 4px solid var(--ink); border-radius: 16px; padding: 0 .2em .1em; box-shadow: 0 5px 0 var(--ink); position: relative; }
.sentence button.lit { background: var(--sun); }
.sentence button.heart::after { content: '❤️'; position: absolute; top: -.35em; right: -.25em; font-size: .4em; }

/* fx */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.flyer { position: fixed; z-index: 21; pointer-events: none; }
.crumb { position: fixed; width: 12px; height: 12px; border-radius: 40%; z-index: 22; }
.spark { position: fixed; font-size: 28px; z-index: 22; }
.confetti { position: fixed; width: 12px; height: 18px; top: -20px; z-index: 22; border-radius: 3px; }

/* results */
#results { align-items: center; justify-content: center; gap: 10px; }
.result-stars { display: flex; gap: 10px; font-size: clamp(3.5rem, 12vh, 6rem); min-height: 1.2em; }
.result-stars span { animation: starpop .6s cubic-bezier(.3, 1.8, .5, 1) backwards; filter: drop-shadow(0 5px 0 var(--ink)); }
.result-stars span.off { filter: grayscale(1) opacity(.3); }
@keyframes starpop { from { transform: scale(0) rotate(-120deg); } }
#results .monster-slot { width: min(40vw, 28vh, 220px); aspect-ratio: 200/190; margin-top: 7vh; }
.reward { min-height: 120px; display: flex; gap: 18px; align-items: center; z-index: 2; }
.card-flip { width: 110px; height: 140px; perspective: 600px; }
.card-flip .inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.card-flip.flipped .inner { transform: rotateY(180deg); }
.card-flip .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 5px solid var(--ink); border-radius: 18px; display: grid; place-items: center; box-shadow: 0 6px 0 var(--ink); }
.card-flip .front { background: repeating-linear-gradient(45deg, var(--skin), var(--skin) 10px, var(--skin-dark) 10px, var(--skin-dark) 20px); font-size: 3rem; }
.card-flip .back { background: #fff; transform: rotateY(180deg); font-size: 4.2rem; }
.row-buttons { display: flex; gap: 28px; z-index: 2; }

/* stickers & closet */
.sticker-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px; padding: 18px 4px 40px; align-content: start; position: relative; z-index: 2; }
.sticker { aspect-ratio: 1; border-radius: 20px; background: #fff; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); display: grid; place-items: center; font-size: 2.8rem; }
.sticker.empty { background: #ffffff70; border-style: dashed; border-color: #2a214060; box-shadow: none; font-size: 1.6rem; color: #2a214060; font-weight: 900; }
.sticker.new { animation: glow 1s 3; }
#closet { align-items: center; }
#closet .monster-slot { width: min(60vw, 40vh, 300px); aspect-ratio: 200/190; margin: 8vh 0 3vh; }
.hat-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; z-index: 2; }
.hat-btn { width: 84px; height: 84px; border-radius: 22px; background: #fff; border: 4px solid var(--ink); box-shadow: 0 5px 0 var(--ink); font-size: 2.6rem; position: relative; }
.hat-btn.on { background: var(--sun); }
.hat-btn.locked { filter: grayscale(1); opacity: .45; }
.hat-btn.locked::after { content: '🔒'; position: absolute; right: -8px; top: -10px; font-size: 1.3rem; filter: none; }

/* grown-ups */
.grown { background: #fffaf0; }
.grown-body { flex: 1; overflow-y: auto; padding: 10px 4px 60px; font-size: 1rem; line-height: 1.5; user-select: text; -webkit-user-select: text; z-index: 2; position: relative; max-width: 860px; width: 100%; margin: 0 auto; }
.grown-body h3 { margin: 26px 0 8px; }
.grown-body p, .grown-body li { color: #4a4262; }
.gbtn { border: 3px solid var(--ink); border-radius: 12px; padding: 8px 14px; background: #fff; font-weight: 800; box-shadow: 0 3px 0 var(--ink); margin: 4px 6px 4px 0; }
.gbtn.danger { background: #ffe1d9; }
.gbtn.rec { background: #ffe1d9; }
.gbtn.rec.on { background: var(--tomato); color: #fff; animation: pulse .8s infinite; }
.soundgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.soundcell { border: 3px solid var(--ink); border-radius: 14px; background: #fff; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.soundcell b { font-family: var(--letters); font-size: 2rem; min-width: 1.4em; }
.soundcell .meter { flex: 1; height: 10px; border-radius: 5px; background: #eee; overflow: hidden; }
.soundcell .meter i { display: block; height: 100%; background: var(--mint); }
.soundcell button { font-size: 1.3rem; }
.soundcell .mine-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tomato); }

/* loading */
.loading { position: fixed; inset: 0; display: none; place-items: center; z-index: 50; background: #bfe9ffcc; }
.loading.on { display: grid; }
.loading .dots { display: flex; gap: 12px; }
.loading i { width: 22px; height: 22px; border-radius: 50%; background: var(--skin); border: 4px solid var(--ink); animation: pulse .9s infinite; }
.loading i:nth-child(2) { animation-delay: .15s; } .loading i:nth-child(3) { animation-delay: .3s; }

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