* { box-sizing: border-box; margin: 0; padding: 0; }
/* One base, one ink, one accent. Colour belongs to the content (pictures, shapes, notes), not the chrome. */
:root {
  --paper: #fbf8f3; --ink: #1f1d1a; --muted: rgba(31,29,26,.42); --faint: rgba(31,29,26,.07);
  --accent: #ff6b4a; --bg: var(--paper); --sun: #ffc93c;
  --lift: 0 .3vh .8vh rgba(31,29,26,.05), 0 1.6vh 4vh rgba(31,29,26,.06);
  --spring: cubic-bezier(.2, 1.4, .4, 1);
  --round: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
}
html, body { height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; cursor: default; }
body {
  font-family: var(--round); color: var(--ink); -webkit-font-smoothing: antialiased;
  background: var(--bg); transition: background-color .8s ease;
}
button { font-family: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
#stage { position: fixed; inset: 0; display: grid; place-items: center; }

/* ---------- chrome: quiet, out of the way ---------- */
.round {
  width: 7vh; height: 7vh; border-radius: 50%; font-size: 3.2vh; background: rgba(255,255,255,.9);
  box-shadow: var(--lift); transition: transform .2s var(--spring);
}
.round:active { transform: scale(.9); }
#home { position: fixed; top: 3vh; left: 3vh; z-index: 20; display: none; }
body:not([data-screen="map"]):not([data-screen="bedtime"]) #home { display: block; }
#starbar {
  position: fixed; top: 3vh; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: .9vh; height: 7vh; padding: 0 2.4vh 0 2vh; border-radius: 99px;
  background: rgba(255,255,255,.9); font-size: 3vh; font-weight: 800; box-shadow: var(--lift); font-variant-numeric: tabular-nums;
}
#starbar .star { display: inline-block; font-size: 2.8vh; }
#starbar.bump .star { animation: spin .7s var(--spring); }
/* Progress to the next sticker: five small dots, no words. */
#nextSticker { display: flex; gap: .5vh; margin-left: 1vh; }
#nextSticker i { width: 1vh; height: 1vh; border-radius: 50%; background: var(--faint); }
#nextSticker i.on { background: var(--sun); }
body[data-screen="bedtime"] #starbar, body[data-screen="map"] #starbar { display: none; }
@keyframes spin { 50% { transform: scale(1.6) rotate(160deg); } 100% { transform: rotate(360deg); } }

/* Grown-ups: press and hold to leave (a quick tap from a child does nothing). */
#corner { position: fixed; top: 3vh; right: 3vh; z-index: 30; display: flex; gap: 1vh; }
.hold { height: 4vh; padding: 0 1.6vh; border-radius: 99px;
  font: 500 1.4vh -apple-system, sans-serif; color: var(--muted);
  background-image: linear-gradient(var(--faint), var(--faint)); background-repeat: no-repeat; background-size: 0% 100%; }
.hold[hidden], #settings[hidden] { display: none; }
#settings { width: 4vh; height: 4vh; border-radius: 50%; display: grid; place-items: center; color: var(--muted); }
#settings:hover { color: var(--ink); background: var(--faint); }
#settings svg { width: 2.2vh; height: 2.2vh; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#gate { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; background: rgba(31,29,26,.5); -webkit-backdrop-filter: blur(1.2vh); backdrop-filter: blur(1.2vh); }
#gate.on { display: grid; }
#gate > div { background: var(--paper); border-radius: 4vh; padding: 4vh 5vh 3vh; text-align: center; box-shadow: 0 3vh 8vh rgba(0,0,0,.3); }
#gate p { font: 500 1.8vh -apple-system, sans-serif; color: var(--muted); }
#gate h2 { font-size: 6vh; font-weight: 900; margin: 1vh 0 3vh; }
#answers { display: flex; gap: 1.6vh; }
#answers button { width: 10vh; height: 10vh; border-radius: 2.4vh; font-size: 4.4vh; font-weight: 800; background: #fff; box-shadow: inset 0 0 0 .3vh var(--faint); }
#answers button:hover { box-shadow: inset 0 0 0 .3vh var(--ink); }
#gateCancel { margin-top: 2.4vh; font: 500 1.6vh -apple-system, sans-serif; color: var(--muted); }
.hold.holding { background-size: 100% 100%; transition: background-size 1.5s linear; }
#hint { position: fixed; right: 3vh; bottom: 2.4vh; z-index: 30; font: 500 1.3vh -apple-system, sans-serif; color: rgba(31,29,26,.22); }
body[data-screen="bedtime"] .hold, body[data-screen="bedtime"] #settings, body[data-screen="bedtime"] #hint { color: rgba(255,255,255,.35); }

/* ---------- Kiko: small, speaks only when there's something to say ---------- */
#kiko { position: fixed; left: 3vh; bottom: 2.4vh; z-index: 25; display: flex; flex-direction: column; align-items: flex-start;
  pointer-events: none; transition: opacity .4s; }
#kiko .owl { width: 8vh; height: 8vh; animation: sway 5s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 .8vh 1.6vh rgba(31,29,26,.12)); }
/* Kiko blinks now and then, and glances around. */
#kiko .eyes { transform-origin: 512px 476px; animation: blink 4.6s infinite; }
#kiko .pupils { animation: glance 9s ease-in-out infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.08); } }
@keyframes glance { 0%, 40% { transform: none; } 45%, 70% { transform: translate(-44px, 14px); } 75%, 100% { transform: none; } }
#kiko.hop .owl { animation: hop .6s var(--spring); }
#bubble { max-width: 40vh; margin: 0 0 1vh 4vh; padding: 1.2vh 2vh; border-radius: 2vh 2vh 2vh .5vh; background: #fff;
  font-size: 2.4vh; font-weight: 700; box-shadow: var(--lift); opacity: 0; transform: translateY(1vh);
  transition: opacity .25s, transform .35s var(--spring); }
#bubble.on { opacity: 1; transform: none; }
body[data-screen="paint"] #kiko, body[data-screen="bubbles"] #kiko, body[data-screen="piano"] #kiko { opacity: 0; }
@keyframes sway { 50% { transform: rotate(-4deg); } }
@keyframes hop { 40% { transform: translateY(-2vh); } }

/* ---------- shared bits ---------- */
@keyframes pop { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes rise { 0% { transform: translateY(4vh) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bob { 50% { transform: translateY(-2vh); } }
@keyframes wiggle { 20%, 60% { transform: rotate(-8deg); } 40%, 80% { transform: rotate(8deg); } }
@keyframes glow { 50% { box-shadow: 0 0 0 1.2vh rgba(250,204,21,.6), 0 2vh 4vh rgba(0,0,0,.1); } }
.pop { animation: pop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
.rise { animation: rise .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.wiggle { animation: wiggle .5s ease-in-out; }
.dot { position: fixed; border-radius: 50%; pointer-events: none; z-index: 15; animation: float 1.4s ease-out forwards; }
@keyframes float { 0% { transform: scale(0); opacity: .9; } 100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
.flystar { position: fixed; z-index: 40; font-size: 7vh; pointer-events: none; transition: all .9s cubic-bezier(.5, -0.4, .6, 1); }
.title { font-size: 6vh; font-weight: 800; letter-spacing: -.025em; }
.sub { font-size: 2.6vh; font-weight: 600; color: var(--muted); margin-top: 1vh; }
.cheer { font-size: 4vh; font-weight: 800; color: var(--accent); min-height: 5vh; letter-spacing: -.01em; }
.center { text-align: center; }

/* ---------- map: a greeting and nine doors ---------- */
.map { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh; }
.map header { text-align: center; }
.map header small { display: block; font-size: 2.4vh; font-weight: 600; color: var(--muted); margin-bottom: .6vh; }
.map h1 { font-size: 7vh; font-weight: 800; letter-spacing: -.025em; }
.map .tally { font-size: 2.2vh; font-weight: 700; color: var(--muted); margin-top: .8vh; font-variant-numeric: tabular-nums; }
.map .grid { display: grid; grid-template-columns: repeat(3, 21vh); gap: 2.6vh; }
.island { position: relative; height: 21vh; border-radius: 4.2vh; background: var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4vh;
  transition: transform .3s var(--spring), box-shadow .3s; }
.island .disc { font-size: 8.5vh; line-height: 1; transition: transform .3s var(--spring); }
.island .name { font-size: 2.2vh; font-weight: 700; color: rgba(31,29,26,.72); }
.island .stars { position: absolute; top: 1.6vh; right: 1.9vh; font-size: 1.6vh; font-weight: 700; color: var(--muted); }
.island:hover, .kbd .island.focus { transform: translateY(-.8vh); box-shadow: var(--lift); }
.island:hover .disc, .kbd .island.focus .disc { transform: scale(1.1) rotate(-4deg); }
.kbd .island.focus { box-shadow: 0 0 0 .5vh #fff, 0 0 0 1vh var(--ink), var(--lift); }
.stickerbtn { position: fixed; right: 3vh; bottom: 2.4vh; margin-bottom: 3vh; font-size: 2.2vh; font-weight: 700; color: var(--muted); }
.stickerbtn:hover { color: var(--ink); }

/* ---------- ABC / cards ---------- */
.card { text-align: center; }
.card .pics { height: 44vh; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 1vh; max-width: 90vw; margin: 0 auto; }
.card .pics img { height: 44vh; filter: drop-shadow(0 1.5vh 2vh rgba(0,0,0,.08)); }
.card .pics.many img { height: 19vh; }
.card .big { font-size: 18vh; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-top: 1.5vh; }
.card .big .low { opacity: .45; margin-left: .15em; font-size: .7em; }
.card .word { font-size: 7vh; font-weight: 800; margin-top: 1vh; letter-spacing: -.02em; }
.card .word b { color: var(--accent); }
.start { text-align: center; }
.start .emoji { font-size: 18vh; animation: bob 1.8s ease-in-out infinite; }
.start .abc { display: flex; gap: 3vh; justify-content: center; margin-top: 2vh; }
.start .abc span { font-size: 12vh; font-weight: 800; animation: bob 1.6s ease-in-out infinite; }
.start .abc span:nth-child(1) { color: #ef4444; }
.start .abc span:nth-child(2) { color: #3b82f6; animation-delay: .2s; }
.start .abc span:nth-child(3) { color: #22c55e; animation-delay: .4s; }

/* ---------- counting ---------- */
.count .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 2vh; max-width: 86vw; min-height: 40vh; align-content: center; }
.count .item { position: relative; font-size: 15vh; line-height: 1; }
.count.many .item { font-size: 10vh; }
.count .item i { position: absolute; left: 50%; bottom: -1vh; transform: translateX(-50%); font-style: normal; font-size: 3.4vh; font-weight: 900;
  background: #fff; border-radius: 99px; min-width: 5vh; padding: .2vh 1vh; box-shadow: 0 .5vh 1.5vh rgba(0,0,0,.1); }
.count .num { font-size: 16vh; font-weight: 900; line-height: 1; margin-top: 3vh; }

/* ---------- animals ---------- */
.animal { text-align: center; position: relative; }
.animal .face { font-size: 34vh; line-height: 1; display: inline-block; }
.animal .face.talk { animation: talk .9s ease-in-out; }
@keyframes talk { 15% { transform: scale(1.08, .94); } 30% { transform: scale(.96, 1.06) rotate(-4deg); } 45% { transform: scale(1.05, .96) rotate(3deg); } 70% { transform: none; } }
.animal .facewrap { position: relative; display: inline-block; }
.animal .says { position: absolute; bottom: 82%; left: 78%; padding: 2vh 3.4vh; border-radius: 4vh 4vh 4vh .8vh; background: #fff;
  font-size: 7vh; font-weight: 900; color: var(--accent); box-shadow: 0 1.4vh 3vh rgba(0,0,0,.1); white-space: nowrap; }
.animal .word { font-size: 9vh; font-weight: 900; }

/* ---------- colours & shapes ---------- */
.shape svg { width: 52vh; height: 52vh; filter: drop-shadow(0 2vh 2vh rgba(0,0,0,.1)); }
.shape .word { font-size: 9vh; font-weight: 900; }

/* ---------- bubbles ---------- */
.bubbles { position: fixed; inset: 0; background: linear-gradient(#e3f4f8, var(--paper)); overflow: hidden; }
.bubble { position: absolute; bottom: -22vh; width: 18vh; height: 18vh; border-radius: 50%; display: grid; place-items: center;
  font-size: 9vh; font-weight: 900; color: var(--c);
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 8%, rgba(255,255,255,.35) 9% 30%, rgba(255,255,255,.12) 60%, rgba(255,255,255,.45) 100%);
  box-shadow: inset 0 0 0 .5vh rgba(255,255,255,.7), inset -1.5vh -1.5vh 3vh rgba(0,0,0,.05);
  animation: up var(--t) linear forwards; }
@keyframes up { to { transform: translate(var(--sway), -132vh); } }
.bubble.popped { animation: burst .3s ease-out forwards; }
@keyframes burst { to { transform: scale(1.6); opacity: 0; } }
.bubbles .score { position: absolute; bottom: 3vh; left: 50%; transform: translateX(-50%); font-size: 2.4vh; font-weight: 700; color: var(--muted); }

/* ---------- find it ---------- */
.find .prompt { font-size: 7vh; font-weight: 900; margin-bottom: 5vh; text-align: center; }
.find .prompt b { color: var(--accent); }
.find .choices { display: flex; gap: 4vh; justify-content: center; }
.choice { width: 30vh; height: 30vh; border-radius: 5vh; background: #fff; box-shadow: var(--lift); display: grid; place-items: center; font-size: 17vh; font-weight: 900;
  transition: transform .2s var(--spring); }
.choice:hover, .choice.focus { transform: translateY(-1.5vh) scale(1.04); }
.choice.focus { box-shadow: 0 0 0 .5vh #fff, 0 0 0 1vh var(--ink); }
.choice.right { background: #d9f5e2; transform: scale(1.08); }
.choice.hintme { animation: glow 1s ease-in-out infinite; }
.choice svg { width: 20vh; height: 20vh; }
.find .dots { margin-top: 5vh; display: flex; gap: 1.2vh; justify-content: center; }
.find .dots span { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: rgba(0,0,0,.12); }
.find .dots span.on { background: var(--sun); }

/* ---------- paint ---------- */
.paint { position: fixed; inset: 0; background: var(--paper); }
.paint canvas { position: absolute; inset: 0; }
.paint .stamp { position: absolute; font-size: 10vh; transform: translate(-50%, -50%); pointer-events: none; }
.paint .tools { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%); display: flex; gap: 1.4vh; padding: 1.2vh 1.6vh;
  border-radius: 99px; background: rgba(255,255,255,.94); box-shadow: var(--lift); align-items: center; }
.paint .tools button { width: 6vh; height: 6vh; border-radius: 50%; font-size: 3vh; box-shadow: inset 0 0 0 .2vh var(--faint); }
.paint .tools button.on { box-shadow: 0 0 0 .6vh #fff, 0 0 0 1.1vh var(--ink); }
.paint .tools .sep { width: .3vh; height: 5vh; background: rgba(0,0,0,.1); }

/* ---------- piano ---------- */
.piano { text-align: center; }
.piano .songs { display: flex; gap: 1.6vh; justify-content: center; margin-bottom: 4vh; }
.piano .songs button { height: 6vh; padding: 0 2.6vh; border-radius: 99px; background: #fff; font-size: 2.3vh; font-weight: 700; box-shadow: var(--lift); }
.piano .songs button.on { background: var(--ink); color: #fff; }
.piano .keys { display: flex; gap: 1.2vh; justify-content: center; align-items: flex-end; height: 46vh; }
.pkey { width: 12vh; height: 40vh; border-radius: 2.4vh; background: var(--c); position: relative; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; padding-bottom: 2.4vh; font-size: 4.4vh; font-weight: 900; color: rgba(255,255,255,.95);
  box-shadow: inset 0 -1.2vh 0 rgba(0,0,0,.1); transition: transform .08s; }
.pkey small { font-size: 2.4vh; opacity: .85; }
.pkey.down { transform: translateY(1.6vh); box-shadow: inset 0 -.6vh 0 rgba(0,0,0,.12), 0 .4vh 1vh rgba(0,0,0,.12); }
.pkey.next::after { content: "👇"; position: absolute; top: -7vh; font-size: 5vh; animation: bob 1s ease-in-out infinite; }
.note { position: fixed; z-index: 15; font-size: 6vh; pointer-events: none; animation: noteup 1.4s ease-out forwards; }
@keyframes noteup { to { transform: translate(var(--dx), -40vh) rotate(25deg); opacity: 0; } }
.piano .lyric { font-size: 4.4vh; font-weight: 900; min-height: 6vh; margin-top: 3vh; }
.piano .lyric b { color: var(--accent); }

/* ---------- my name ---------- */
.spell { text-align: center; }
.spell img { height: 30vh; margin-bottom: 2vh; }
.spell .title { margin-bottom: 4vh; }
.spell .slots { display: flex; gap: 2vh; justify-content: center; flex-wrap: wrap; max-width: 92vw; }
.slot { width: 15vh; height: 19vh; border-radius: 3vh; background: #fff; display: grid; place-items: center; font-size: 12vh; font-weight: 800;
  box-shadow: var(--lift); color: rgba(0,0,0,.1); }
.slot.done { color: var(--c); }
.slot.next { animation: glow 1.1s ease-in-out infinite; color: rgba(0,0,0,.22); }
.spell .ghost { position: fixed; font-size: 12vh; font-weight: 900; opacity: .35; pointer-events: none; animation: fade 1s ease-out forwards; }
@keyframes fade { to { transform: translateY(-8vh); opacity: 0; } }

/* ---------- overlay: stickers, sticker book ---------- */
#overlay { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(31,29,26,.5); -webkit-backdrop-filter: blur(1.2vh); backdrop-filter: blur(1.2vh); }
#overlay.on { display: grid; }
.reveal { text-align: center; color: #fff; }
.reveal .sticker { font-size: 34vh; line-height: 1.1; animation: pop .8s cubic-bezier(.2, 1.6, .4, 1) both, bob 2s 1s ease-in-out infinite; filter: drop-shadow(0 2vh 4vh rgba(0,0,0,.3)); }
.reveal h2 { font-size: 7vh; font-weight: 900; }
.book { background: var(--paper); border-radius: 4vh; padding: 4vh 5vh; max-width: 92vw; text-align: center; box-shadow: 0 3vh 8vh rgba(0,0,0,.3); }
.book h2 { font-size: 5vh; font-weight: 900; margin-bottom: 3vh; }
.book .grid { display: grid; grid-template-columns: repeat(10, 9vh); gap: 1.4vh; }
.book .grid span { width: 9vh; height: 9vh; border-radius: 2vh; display: grid; place-items: center; font-size: 6vh; background: #fff; box-shadow: inset 0 0 0 .3vh rgba(0,0,0,.06); }
.book .grid span.locked { font-size: 3vh; color: rgba(0,0,0,.2); font-weight: 900; background: rgba(0,0,0,.04); }
.book p { margin-top: 3vh; font-size: 2.6vh; font-weight: 800; opacity: .55; }
#confetti { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* ---------- bedtime ---------- */
.bedtime { position: fixed; inset: 0; background: radial-gradient(circle at 70% 25%, #312e81, #0f172a 70%); color: #e0e7ff; display: grid; place-items: center; text-align: center; }
.bedtime > div { position: relative; }
.bedtime .moon { font-size: 26vh; animation: bob 5s ease-in-out infinite; }
.bedtime h2 { font-size: 7vh; font-weight: 900; margin-top: 2vh; }
.bedtime p { font-size: 3vh; font-weight: 700; opacity: .7; margin-top: 1.5vh; }
.twinkle { position: absolute; color: #fde68a; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.6); } }