/* Ava's Rainbow Quest */
:root {
  --ink: #5a3a7e;
  --ink-soft: #8a6aac;
  --pink: #ff86b8;
  --pink-dark: #e05f97;
  --cream: #fffaf2;
  --font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --top: max(12px, env(safe-area-inset-top));
  --bot: max(14px, env(safe-area-inset-bottom));
  --side: max(12px, env(safe-area-inset-left));
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #ffd6ea;
  font-family: var(--font); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: none; overscroll-behavior: none;
}
img { -webkit-user-drag: none; pointer-events: none; }
button { font-family: inherit; color: inherit; border: 0; padding: 0; background: none; cursor: pointer; touch-action: manipulation; }
#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.nogl { position: fixed; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; font-size: 22px; font-weight: 800; }
.nogl[hidden] { display: none; }

/* Felt stitched panel used everywhere */
.felt {
  background: var(--cream);
  border-radius: 22px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--pink), 0 8px 0 7px var(--pink-dark), 0 14px 24px 6px rgba(90, 58, 126, .25);
}

/* ---------- HUD ---------- */
.hud { position: fixed; left: var(--side); right: var(--side); top: var(--top); display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; z-index: 5; }
.hud > * { pointer-events: auto; }
.hud-left, .hud-right { display: flex; gap: 10px; align-items: center; }
.hud-btn {
  width: 52px; height: 52px; border-radius: 50%; font-size: 24px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .92); box-shadow: 0 4px 0 rgba(224, 95, 151, .55), 0 6px 14px rgba(90, 58, 126, .2);
  border: 3px dashed #ffc1db; transition: transform .1s;
}
.hud-btn:active { transform: translateY(3px) scale(.95); box-shadow: 0 1px 0 rgba(224, 95, 151, .55); }
.hud-pill {
  background: rgba(255, 255, 255, .92); border-radius: 26px; padding: 8px 12px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 4px 0 rgba(224, 95, 151, .4), 0 6px 14px rgba(90, 58, 126, .18); border: 3px dashed #ffc1db;
}
.hud-gems { display: flex; align-items: center; gap: 6px; font-size: 18px; }
.hud-gems b { font-weight: 900; }
.hud-gems.bump { animation: bump .35s; }
.gem-ico { width: 16px; height: 16px; background: linear-gradient(135deg, #ff6f91, #ffd84d 40%, #62d26f 60%, #4fb0ff); transform: rotate(45deg); border-radius: 3px; }
@keyframes bump { 50% { transform: scale(1.3); } }

.hint-btn, .jump-btn {
  position: fixed; bottom: var(--bot); width: 84px; height: 84px; border-radius: 50%; z-index: 5;
  background: rgba(255, 255, 255, .93); border: 4px dashed #ffc1db;
  box-shadow: 0 6px 0 rgba(224, 95, 151, .55), 0 10px 18px rgba(90, 58, 126, .25); transition: transform .1s;
}
.hint-btn { left: var(--side); }
.hint-btn img { width: 74%; margin-top: 4px; }
.jump-btn { right: var(--side); font-size: 42px; display: grid; place-items: center; }
.hint-btn:active, .jump-btn:active { transform: translateY(4px) scale(.94); }

.stick { position: fixed; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; border: 4px dashed rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .18); pointer-events: none; opacity: 0; transition: opacity .15s; z-index: 4; }
.stick.show { opacity: 1; }
.stick i { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 3px 8px rgba(90, 58, 126, .3); }

.banner {
  position: fixed; left: 50%; top: 22%; transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none; z-index: 6;
  font-size: clamp(28px, 8vw, 46px); font-weight: 900; color: #fff; white-space: nowrap; padding: 10px 28px; border-radius: 40px;
  background: var(--c); box-shadow: 0 0 0 4px #fff, 0 6px 0 4px rgba(0, 0, 0, .12); text-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.banner.show { animation: banner 2.6s ease forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  20%, 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); }
}

/* ---------- dialog ---------- */
.dialog {
  position: fixed; left: var(--side); right: var(--side); bottom: calc(var(--bot) + 6px); max-width: 640px; margin: 0 auto; z-index: 8;
  display: flex; gap: 14px; align-items: center; padding: 16px 18px; min-height: 120px;
  background: var(--cream); border-radius: 24px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--pink), 0 8px 0 8px var(--pink-dark), 0 16px 30px 8px rgba(90, 58, 126, .3);
  transform: translateY(160%); transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
}
.dialog.show { transform: none; }
.dialog::before { content: ""; position: absolute; inset: 7px; border: 3px dashed #ffc1db; border-radius: 18px; pointer-events: none; }
.dlg-face-wrap { flex: none; width: 84px; height: 84px; border-radius: 50%; background: #ffe6f1; display: grid; place-items: center; overflow: hidden; }
.dlg-face-wrap img { width: 92%; height: 92%; object-fit: contain; animation: talk .5s ease-in-out infinite alternate; }
@keyframes talk { to { transform: translateY(-3px) rotate(2deg); } }
.dlg-name { font-weight: 900; color: var(--pink-dark); font-size: 17px; }
.dlg-text { font-size: clamp(20px, 5.4vw, 26px); font-weight: 800; line-height: 1.2; }
.dlg-more { position: absolute; right: 22px; bottom: 12px; color: var(--pink); animation: more .6s ease-in-out infinite alternate; }
@keyframes more { to { transform: translateY(5px); } }

/* ---------- letter challenge ---------- */
.swirl { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
  background: repeating-conic-gradient(from 0deg, #ff7b86 0 10deg, #ffad5c 0 20deg, #ffd84d 0 30deg, #7fd67f 0 40deg, #6cb8ff 0 50deg, #b98cf0 0 60deg); }
.swirl.go { animation: swirl .8s ease-in-out; }
@keyframes swirl {
  0% { opacity: 0; transform: scale(.2) rotate(0); clip-path: circle(0 at 50% 50%); }
  45% { opacity: 1; transform: scale(1.6) rotate(200deg); clip-path: circle(80% at 50% 50%); }
  55% { opacity: 1; transform: scale(1.6) rotate(220deg); clip-path: circle(80% at 50% 50%); }
  100% { opacity: 0; transform: scale(2.4) rotate(400deg); clip-path: circle(80% at 50% 50%); }
}
.battle { position: fixed; inset: 0; z-index: 20; display: none; overflow: hidden; }
.battle.show { display: block; }
.b-bg { position: absolute; inset: 0; background: linear-gradient(#ffe3f0, color-mix(in srgb, var(--land) 30%, #e8f6ff) 58%, var(--land-ground) 58%); background-size: cover; background-position: center; }
.b-bg.painted > * { display: none; }
.hill { position: absolute; border-radius: 50%; background: color-mix(in srgb, var(--land-ground) 85%, #fff); }
.hill.h1 { left: -20%; width: 80%; height: 30%; top: 46%; }
.hill.h2 { right: -25%; width: 90%; height: 34%; top: 44%; background: color-mix(in srgb, var(--land-ground) 70%, #fff); }
.b-sun { position: absolute; right: 12%; top: 12%; width: 18vmin; height: 18vmin; border-radius: 50%; background: #fff6b8; box-shadow: 0 0 0 4vmin rgba(255, 246, 184, .35); }
.b-top { position: absolute; left: var(--side); right: var(--side); top: var(--top); display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.b-hearts { display: flex; gap: 8px; padding: 8px 14px; background: rgba(255, 255, 255, .9); border-radius: 30px; border: 3px dashed #ffc1db; }
.b-hearts i { width: 30px; height: 28px; background: #f1dbe8; clip-path: path("M15 27 C 6 20, 0 14, 0 8 A 7.5 7.5 0 0 1 15 5 A 7.5 7.5 0 0 1 30 8 C 30 14, 24 20, 15 27 Z"); transition: background .3s; }
.b-hearts i.full { background: #ff5c9a; animation: bump .4s; }

.b-stage { position: absolute; left: 0; right: 0; top: 12%; height: 42%; }
.b-pad { position: absolute; bottom: 4%; width: 40%; height: 12%; border-radius: 50%; background: rgba(0, 0, 0, .1); }
.b-pad-l { left: 6%; } .b-pad-r { right: 6%; }
.b-uni { position: absolute; left: 10%; bottom: 5%; width: 38%; max-width: 300px; animation: idle 1.4s ease-in-out infinite; transform-origin: bottom center; }
.b-bud { position: absolute; left: 0; bottom: 3%; width: 22%; max-width: 170px; animation: idle 1.1s ease-in-out infinite reverse; transform-origin: bottom center; }
.b-foe { position: absolute; right: 8%; bottom: 6%; width: 40%; max-width: 320px; animation: idle 1s ease-in-out infinite; transform-origin: bottom center; }
@keyframes idle { 50% { transform: scale(1.03, .97); } }
.b-foe.enter { animation: enter .6s cubic-bezier(.3, 1.6, .5, 1), idle 1s ease-in-out .6s infinite; }
@keyframes enter { from { transform: translateY(-120%) scale(.6); } }
.b-foe.giggle { animation: giggle .7s ease-in-out; }
@keyframes giggle { 15% { transform: translateY(-6%) scale(.95, 1.06) rotate(-6deg); } 35% { transform: translateY(0) scale(1.08, .92) rotate(5deg); }
  55% { transform: translateY(-4%) rotate(-4deg); } 75% { transform: scale(1.04, .97) rotate(3deg); } }
.b-love { position: absolute; font-size: 34px; line-height: 1; margin: -17px 0 0 -17px; pointer-events: none; opacity: 0;
  animation: love 1.1s cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes love {
  0% { opacity: 0; transform: translate(0, 0) scale(.3); }
  15% { opacity: 1; }
  50% { transform: translate(calc(var(--dx) * .5), calc(var(--dy) * .5 + var(--arc))) scale(1.2); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); } }
.b-foe.joy { animation: joy .5s ease-in-out infinite alternate; }
@keyframes joy { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-14%) rotate(4deg); } }
.hug { animation: hug .8s cubic-bezier(.4, 0, .3, 1) !important; }
@keyframes hug { 35% { transform: translate(45%, -14%) rotate(8deg); } 55% { transform: translate(52%, 0) scale(1.1, .92); } }
.five { animation: five .7s cubic-bezier(.4, 0, .3, 1) !important; }
@keyframes five { 30% { transform: translateY(-22%) rotate(-10deg); } 55% { transform: translateY(0) scale(1.08, .9); } 75% { transform: translateY(-6%); } }
.hop { animation: hop .9s ease-in-out !important; }
@keyframes hop { 25% { transform: translateY(-28%) rotate(-8deg); } 50% { transform: translateY(0) scale(1.1, .9); } 70% { transform: translateY(-12%) rotate(6deg); } }
.b-beam { position: absolute; left: 30%; right: 16%; top: 8%; height: 34%; opacity: 0; transform-origin: 50% 100%; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 62%, #b98cf0 62% 68%, #6cb8ff 68% 74%, #7fd67f 74% 80%,
    #ffd84d 80% 86%, #ffad5c 86% 92%, #ff7b86 92% 98%, transparent 98%); filter: drop-shadow(0 0 10px #fff); }
.b-beam.go { animation: beam 1.3s ease-out; }
@keyframes beam { 0% { opacity: 1; clip-path: inset(0 100% 0 0); } 45% { opacity: 1; clip-path: inset(0 0 0 0); } 80% { opacity: 1; } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }

.b-prompt { position: absolute; left: var(--side); right: var(--side); top: 55%; text-align: center; z-index: 2; }
.b-prompt span { display: inline-block; padding: 10px 22px; border-radius: 30px; background: rgba(255, 255, 255, .95); font-weight: 900; font-size: clamp(22px, 6vw, 32px); box-shadow: 0 4px 0 rgba(224, 95, 151, .4); border: 3px dashed #ffc1db; }
.b-prompt.pop span { animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }

.b-choices { position: absolute; left: var(--side); right: var(--side); top: 65%; bottom: calc(var(--bot) + 10px); display: flex; justify-content: center; align-items: center; gap: 4vw; z-index: 2; }
.b-card {
  width: min(29vw, 190px); aspect-ratio: 1; border-radius: 26px; background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--land), 0 8px 0 7px color-mix(in srgb, var(--land) 70%, #000), 0 14px 20px 6px rgba(90, 58, 126, .2);
  animation: card-in .4s cubic-bezier(.3, 1.5, .5, 1) backwards; transition: transform .15s, opacity .3s;
}
.b-card:active { transform: scale(.94); }
.b-card img { width: 82%; }
.b-card span { font-size: min(18vw, 120px); font-weight: 900; color: var(--ink); line-height: 1; }
@keyframes card-in { from { transform: translateY(60px) scale(.5); opacity: 0; } }
.b-card.right { transform: scale(1.15); box-shadow: 0 0 0 4px #fff, 0 0 0 9px #43c26b, 0 0 30px 10px rgba(67, 194, 107, .5); }
.b-card.fade { opacity: .25; transform: scale(.9); }
.b-card.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-10px) rotate(-3deg); } 40%, 80% { transform: translateX(10px) rotate(3deg); } }
.b-card.hint { animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 0 4px #fff, 0 0 0 9px #ffd84d, 0 0 34px 14px rgba(255, 216, 77, .8); transform: scale(1.05); } }

.b-trace { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; background: rgba(255, 240, 248, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.b-trace.show { display: grid; animation: pop .3s; }
.b-trace canvas { width: min(84vw, 62vh, 520px); aspect-ratio: 1; background: #fff; border-radius: 30px; touch-action: none; margin-top: 12vh;
  box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--land), 0 10px 0 9px color-mix(in srgb, var(--land) 70%, #000), 0 20px 30px rgba(90, 58, 126, .25); }
.b-trace-obj { position: absolute; top: calc(var(--top) + 64px); width: min(22vw, 14vh); }

.b-reward { position: absolute; inset: 0; z-index: 5; display: none; place-items: center; background: rgba(255, 240, 248, .4); }
.b-reward.show { display: grid; }
.b-reward-card { width: min(70vw, 340px); padding: 20px; border-radius: 30px; background: var(--cream); text-align: center; animation: reward .7s cubic-bezier(.3, 1.5, .5, 1);
  box-shadow: 0 0 0 5px #fff, 0 0 0 10px var(--land), 0 10px 0 10px color-mix(in srgb, var(--land) 70%, #000), 0 0 60px 20px rgba(255, 255, 255, .8); }
@keyframes reward { from { transform: scale(.2) rotate(-20deg); opacity: 0; } }
.b-reward-card img { width: 70%; animation: idle 1.2s ease-in-out infinite; }
.b-reward-letter { font-size: 64px; font-weight: 900; line-height: 1; color: var(--ink); }
.b-reward-word { font-size: 30px; font-weight: 800; color: var(--ink-soft); }
.b-next { position: absolute; right: var(--side); bottom: var(--bot); z-index: 6; width: 90px; height: 90px; border-radius: 50%; font-size: 40px; color: #fff; background: #43c26b;
  box-shadow: 0 6px 0 #2e9a50, 0 10px 20px rgba(0, 0, 0, .2); display: none; padding-left: 6px; }
.b-next.show { display: block; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { transform: scale(1.1); } }
.fx { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.spark { position: absolute; width: 40px; margin: -20px; animation: spark 1s ease-out forwards; }
@keyframes spark { from { transform: translate(0, 0) scale(var(--s)); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0) rotate(180deg); opacity: 0; } }

/* ---------- sheets ---------- */
.sheet { position: fixed; inset: 0; z-index: 25; display: none; place-items: center; background: rgba(90, 58, 126, .3); padding: var(--top) var(--side) var(--bot); }
.sheet.show { display: grid; }
.sheet-card { width: min(100%, 640px); max-height: 100%; overflow: auto; background: var(--cream); border-radius: 26px; padding: 16px; animation: pop .3s;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--pink), 0 8px 0 8px var(--pink-dark); }
.sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sheet-title { font-size: 24px; font-weight: 900; }
.sheet-title span { color: var(--pink-dark); font-size: 18px; margin-left: 6px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px; }
.book-card { aspect-ratio: 1; border-radius: 18px; background: #f4ecf8; position: relative; display: grid; place-items: center; border: 3px dashed #e2d2ee; }
.book-card.has { background: color-mix(in srgb, var(--c) 22%, #fff); border-color: var(--c); }
.book-card canvas { width: 70%; position: absolute; left: 4%; top: 4%; }
.book-card img { width: 52%; position: absolute; right: 4%; bottom: 4%; }
.book-card span { font-size: 40px; font-weight: 900; color: #cdb8dd; }
.book-card.wiggle { animation: shake .45s; }

/* ---------- finale ---------- */
.finale { position: fixed; inset: 0; z-index: 26; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1vh; overflow: hidden;
  background: url(../assets/art/title-bg.jpg) center / cover; padding: var(--top) var(--side) var(--bot); }
.finale.show { display: flex; animation: pop .5s; }
.finale-logo { width: min(80vw, 420px); position: absolute; top: calc(var(--top) + 10px); opacity: .9; }
.finale-title { font-size: clamp(40px, 12vw, 70px); font-weight: 900; color: #fff; text-shadow: 0 4px 0 var(--pink-dark), 0 8px 16px rgba(90, 58, 126, .4); z-index: 1; margin-top: 8vh; }
.finale-uni { width: min(50vw, 280px); animation: joy .6s ease-in-out infinite alternate; }
.finale-letters { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 560px; }
.finale-letters canvas { width: min(11vw, 58px); animation: drop .5s cubic-bezier(.3, 1.6, .5, 1) backwards, joy .5s ease-in-out infinite alternate; }
@keyframes drop { from { transform: translateY(-60vh); } }
.finale-row { display: flex; gap: 12px; margin-top: 2vh; z-index: 1; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--r)); } }

.pill { padding: 12px 20px; border-radius: 30px; background: #fff; font-weight: 900; font-size: 18px; box-shadow: 0 4px 0 rgba(224, 95, 151, .5); border: 3px dashed #ffc1db; }
.pill.big { background: var(--pink); color: #fff; border-color: #ffd0e4; font-size: 22px; box-shadow: 0 5px 0 var(--pink-dark); }
.pill.ghost { background: rgba(255, 255, 255, .6); font-size: 15px; color: var(--ink-soft); }
.pill.armed { background: #ff7b86; color: #fff; }

/* ---------- title ---------- */
.title { position: fixed; inset: 0; z-index: 40; display: none; background: url(../assets/art/title-bg.jpg) center / cover; }
.title.show { display: block; }
.title-inner { position: absolute; inset: var(--top) var(--side) var(--bot); display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
.logo-wrap { position: relative; width: min(92vw, 520px); }
.logo { width: 100%; }
.logo-wrap h1 { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; text-align: center; padding-top: 14%;
  font-size: min(10.5vw, 58px); line-height: 1; font-weight: 900; color: #fff; text-shadow: 0 4px 0 var(--pink-dark), 0 6px 14px rgba(90, 58, 126, .4); }
.title-uni { width: min(48vw, 34vh, 300px); animation: idle 1.4s ease-in-out infinite; }
.play-btn { width: 120px; height: 120px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 6px #fff, 0 10px 0 6px var(--pink-dark), 0 18px 30px rgba(90, 58, 126, .35);
  display: grid; place-items: center; animation: pulse 1s ease-in-out infinite alternate; }
.play-btn svg { width: 62px; fill: #fff; margin-left: 8px; }
.title-count { font-weight: 900; font-size: 20px; color: var(--ink); background: rgba(255, 255, 255, .8); padding: 4px 14px; border-radius: 20px; }
.title-count:empty { display: none; }
.title-row { display: flex; gap: 10px; }

@media (min-aspect-ratio: 4/3) {
  .b-stage { top: 10%; height: 46%; }
  .b-uni { width: 26%; } .b-foe { width: 26%; } .b-bud { width: 14%; left: 4%; }
}

/* ---------- extra exercise kinds (games.js) ---------- */
.b-play { position: absolute; left: var(--side); right: var(--side); top: 64%; bottom: calc(var(--bot) + 6px); z-index: 2; display: none; }
.b-play.show { display: block; }
.b-play.stars { top: 10%; }
.b-play.reveal { top: 64%; }
.b-play.askpic { display: block; top: auto; bottom: auto; left: 0; right: 0; top: 13%; height: 0; pointer-events: none; }
.b-askpic { position: absolute; left: 50%; width: min(26vw, 190px); transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(80, 50, 110, .25)); animation: pop .5s; }

.b-bubble { position: absolute; width: min(19vw, 120px); aspect-ratio: 1; border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.35) 10% 30%, rgba(190,230,255,.35) 60%, rgba(255,170,220,.55) 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), 0 8px 18px rgba(90, 58, 126, .15);
  animation: card-in .4s backwards, bob 3s ease-in-out infinite; }
.b-bubble span { font-size: min(11vw, 70px); font-weight: 900; color: var(--ink); }
.b-bubble.pop { animation: burst .35s forwards; }
.b-bubble.shake { animation: shake .45s, bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px) scale(1.03, .97); } }
@keyframes burst { 60% { transform: scale(1.35); opacity: .8; } 100% { transform: scale(1.6); opacity: 0; } }

.b-star { position: absolute; top: -20%; width: min(17vw, 110px); aspect-ratio: 1; border: 0; padding: 0; background: none;
  animation: fall linear forwards; }
.b-star::before { content: ""; position: absolute; inset: 0; background: #ffd84d;
  clip-path: polygon(50% 0, 63% 35%, 100% 38%, 71% 61%, 81% 100%, 50% 78%, 19% 100%, 29% 61%, 0 38%, 37% 35%);
  filter: drop-shadow(0 0 6px #fff); }
.b-star span { position: relative; font-size: min(8vw, 46px); font-weight: 900; color: var(--ink); top: 6%; }
.b-star.caught { animation: caught .5s forwards !important; }
.b-star.miss { opacity: .35; }
@keyframes fall { from { transform: translateY(0) rotate(-12deg); } to { transform: translateY(105vh) rotate(18deg); } }
@keyframes caught { to { transform: scale(1.8) rotate(90deg); opacity: 0; } }

.b-reveal { position: relative; margin: 0 auto; height: 100%; aspect-ratio: 1; max-width: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 5px;
  background: #fff; border-radius: 22px; padding: 6px; box-shadow: 0 6px 0 rgba(224, 95, 151, .35); }
.b-reveal img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; }
.b-rtile { position: relative; z-index: 1; border: 0; border-radius: 14px; background: color-mix(in srgb, var(--land) 55%, #fff);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .08); transition: transform .35s, opacity .35s; }
.b-rtile span { font-size: min(9vw, 54px); font-weight: 900; color: var(--ink); }
.b-rtile.gone { transform: scale(.2) rotate(30deg); opacity: 0; pointer-events: none; }
.b-rtile.shake { animation: shake .45s; }

.b-play.memory { display: flex; justify-content: center; align-items: center; gap: 3vw; }
.b-mem { position: relative; width: min(21vw, 190px); aspect-ratio: 3 / 4; border: 0; padding: 0; background: none; perspective: 600px; animation: card-in .4s backwards; }
.b-mem .back, .b-mem .face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 18px;
  backface-visibility: hidden; transition: transform .4s; box-shadow: 0 6px 0 rgba(224, 95, 151, .35); }
.b-mem .back { font-style: normal; font-size: min(9vw, 50px); background: repeating-linear-gradient(45deg, #ffb3d1 0 12px, #ffc8de 12px 24px); border: 4px solid #fff; }
.b-mem .face { background: #fff; transform: rotateY(180deg); }
.b-mem .face span { font-size: min(14vw, 90px); font-weight: 900; color: var(--ink); }
.b-mem .face img { width: 80%; }
.b-mem.up .back { transform: rotateY(180deg); }
.b-mem.up .face { transform: rotateY(0); }
.b-mem.matched .face { box-shadow: 0 0 0 4px #fff, 0 0 0 9px #43c26b; }

/* ---------- number games (numgames.js) ---------- */
.b-choices.nums span { font-size: min(15vw, 100px); }
.n-rod { display: inline-flex; flex-direction: column; gap: 2px; padding: 3px; border-radius: 6px; background: #ff9fc4; box-shadow: 0 3px 0 rgba(224, 95, 151, .4); vertical-align: bottom; }
.n-rod b { display: block; width: 16px; height: 9px; border-radius: 3px; background: #ffd84d; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1); }
.n-cube { display: inline-block; width: 22px; height: 22px; border-radius: 5px; background: #4fb0ff; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12), 0 3px 0 rgba(40, 90, 160, .3); vertical-align: bottom; }
.n-apple { width: min(9vw, 54px); filter: drop-shadow(0 3px 3px rgba(80, 50, 110, .25)); }

.b-play.n-show { top: 11%; bottom: auto; height: 0; pointer-events: none; }
.n-group { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 6px; max-width: 360px; margin: 0 auto;
  padding: 12px 16px; background: rgba(255, 255, 255, .88); border-radius: 22px; border: 3px dashed #ffc1db; animation: pop .5s; }
.n-group.tens { gap: 8px; }

.b-play.n-basket { display: flex; justify-content: space-between; align-items: center; gap: 3vw; }
.n-pile { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: center; }
.n-take { border: 0; padding: 6px; border-radius: 16px; background: rgba(255, 255, 255, .7); transition: transform .35s, opacity .35s; animation: card-in .4s backwards; }
.n-take:active { transform: scale(.9); }
.n-take.gone { transform: translate(40vw, -10px) scale(.4); opacity: 0; pointer-events: none; }
.n-box { position: relative; width: 38%; height: 92%; border-radius: 18px 18px 30px 30px; background: linear-gradient(#e7a96f, #c98549);
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .35), 0 6px 0 rgba(120, 70, 30, .35); display: flex; align-items: flex-end; justify-content: center; padding: 10px; }
.n-in { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 3px; }
.n-in .n-apple { width: min(7vw, 40px); animation: pop .3s; }
.n-count { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); min-width: 64px; padding: 4px 14px; border-radius: 30px; background: #fff;
  font-size: 34px; font-weight: 900; color: var(--ink); text-align: center; border: 3px dashed #ffc1db; }

.n-tenframe { margin: 0 auto; height: 100%; aspect-ratio: 5 / 2; max-width: 100%; display: grid; grid-template: repeat(2, 1fr) / repeat(5, 1fr); gap: 6px;
  padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 6px 0 rgba(224, 95, 151, .35); }
.n-cell { border: 3px dashed #ffc1db; border-radius: 12px; background: #fff7fb; position: relative; }
.n-cell.on::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9fc4, #ff5c9a); animation: pop .3s; }

.b-play.n-build { display: flex; gap: 3vw; align-items: stretch; }
.n-tray { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; gap: 6px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .85); border: 3px dashed #ffc1db; }
.n-tray.shake { animation: shake .45s; }
.n-side { display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.n-total { font-size: 26px; font-weight: 900; color: var(--ink); text-align: center; background: #fff; border-radius: 20px; padding: 4px 12px; }
.n-total b { font-size: 40px; }
.n-add { display: flex; align-items: center; gap: 10px; border: 0; border-radius: 20px; padding: 10px 16px; background: #fff; box-shadow: 0 5px 0 rgba(224, 95, 151, .35); font-weight: 900; font-size: 26px; color: var(--ink); }
.n-add:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(224, 95, 151, .35); }

.n-line { position: relative; height: 100%; margin: 0 2%; }
.n-line::before { content: ""; position: absolute; left: 3%; right: 3%; top: 62%; height: 8px; border-radius: 4px; background: #fff; box-shadow: 0 3px 0 rgba(224, 95, 151, .35); }
.n-tick { position: absolute; top: 52%; width: 9%; max-width: 64px; aspect-ratio: 1; transform: translateX(-50%); border: 0; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 0 rgba(224, 95, 151, .35); }
.n-tick span { font-size: min(4.6vw, 26px); font-weight: 900; color: var(--ink); }
.n-tick.right { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #43c26b; }
.n-tick.shake { animation: shake .45s; }
.n-hopper { position: absolute; top: 8%; width: 13%; max-width: 110px; transform: translateX(-50%); transition: left .3s ease-in-out; }
.n-hopper.jump { animation: nhop .32s ease-out; }
@keyframes nhop { 50% { transform: translate(-50%, -30%); } }

.b-play.n-more { display: flex; gap: 4vw; justify-content: center; align-items: stretch; }
.n-pick { position: relative; flex: 1; max-width: 360px; border: 0; padding: 10px; border-radius: 22px; background: rgba(255, 255, 255, .9); box-shadow: 0 6px 0 rgba(224, 95, 151, .35); display: flex; align-items: center; justify-content: center; }
.n-pick .n-group { border: 0; background: none; padding: 0; animation: none; }
.n-pick .n-lab { position: absolute; top: 6px; left: 12px; font-size: 26px; font-weight: 900; color: var(--ink-soft); }
.n-pick.right { box-shadow: 0 0 0 4px #fff, 0 0 0 9px #43c26b; }
.n-pick.shake { animation: shake .45s; }

.n-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 80%; }
.n-dots b { width: 18px; height: 18px; border-radius: 50%; background: #ff5c9a; }
.n-rods { display: flex; gap: 3px; transform: scale(.7); }
.n-tray .n-rod b { width: 24px; height: 14px; }
.n-tray .n-cube { width: 30px; height: 30px; }
.n-group .n-cube { width: 18px; height: 18px; }
.b-mem .n-rods { flex-wrap: wrap; justify-content: center; align-items: flex-end; width: 120%; }

/* ---------- challenge: storybook depth and light (graphics upgrade) ---------- */
/* the painted scene breathes slowly, like a camera drifting in */
.battle.show .b-bg { animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.07) translate(-1.2%, .6%); } }
.b-atmo { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
/* soft sunbeams from the top right, turning very slowly */
.b-rays { position: absolute; right: -30%; top: -60%; width: 120vmax; height: 120vmax; opacity: .5; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 200deg at 50% 50%, rgba(255, 250, 220, .55) 0 4deg, rgba(255, 250, 220, 0) 4deg 13deg);
  -webkit-mask: radial-gradient(closest-side, #000 10%, transparent 70%); mask: radial-gradient(closest-side, #000 10%, transparent 70%);
  animation: rays 40s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
/* glittering dust drifting up through the light */
.b-motes { position: absolute; inset: -10% 0 0 0; opacity: .85; animation: motes 14s linear infinite;
  background-image: radial-gradient(circle, rgba(255, 255, 240, .95) 0 1.5px, transparent 3px), radial-gradient(circle, rgba(255, 236, 160, .8) 0 2px, transparent 4px),
    radial-gradient(circle, rgba(255, 255, 255, .7) 0 1px, transparent 2.5px);
  background-size: 190px 170px, 310px 260px, 120px 140px; background-position: 0 0, 60px 90px, 30px 40px; }
.b-motes.m2 { animation-duration: 22s; opacity: .55; background-size: 250px 230px, 410px 330px, 160px 190px; }
@keyframes motes { to { transform: translateY(-10%); background-position: 40px -170px, 20px -260px, 70px -140px; } }
/* a gentle warm-to-lilac vignette for depth */
.b-atmo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 42%, transparent 60%, rgba(110, 60, 140, .13)), linear-gradient(rgba(255, 230, 200, .12), transparent 30%); }
/* characters stand in the light: soft contact shadows and a lifted silhouette */
.b-pad { background: radial-gradient(closest-side, rgba(70, 40, 100, .28), rgba(70, 40, 100, .12) 55%, transparent); filter: blur(2px); }
.b-uni, .b-bud { filter: drop-shadow(0 10px 10px rgba(70, 40, 110, .22)) drop-shadow(0 0 1px rgba(255, 255, 255, .9)); }
.b-foe { filter: drop-shadow(0 12px 12px rgba(70, 40, 110, .25)); }
/* answer cards: plush felt tiles with stitching, a top light and a shine on arrival */
.b-card { position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 15%, #fff 0 40%, color-mix(in srgb, var(--land) 10%, #fff8f2)); }
.b-card::before { content: ""; position: absolute; inset: 8px; border-radius: 19px; border: 3px dashed color-mix(in srgb, var(--land) 45%, #fff); pointer-events: none; }
.b-card::after { content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .85) 50%, transparent 60%); transform: translateX(-120%);
  animation: shine 1.1s .35s ease-out backwards; }
@keyframes shine { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.b-card:nth-child(2) { animation-delay: .08s; } .b-card:nth-child(2)::after { animation-delay: .43s; }
.b-card:nth-child(3) { animation-delay: .16s; } .b-card:nth-child(3)::after { animation-delay: .51s; }
.b-card:nth-child(4) { animation-delay: .24s; } .b-card:nth-child(4)::after { animation-delay: .59s; }
.b-card img { filter: drop-shadow(0 6px 6px rgba(80, 50, 110, .2)); position: relative; }
.b-prompt span { background: linear-gradient(#fff, #fff4fa); box-shadow: 0 4px 0 rgba(224, 95, 151, .4), 0 12px 24px rgba(110, 60, 140, .18); }
@media (prefers-reduced-motion: reduce) { .battle.show .b-bg, .b-rays, .b-motes { animation: none; } }
.b-stage { z-index: 1; }

/* ---------- secrets: per-land counter and the treasure map button ---------- */
.hud-secrets { display: flex; gap: 8px; font-size: 15px; margin-top: 2px; }
.hud-secrets span { display: flex; align-items: center; gap: 2px; }
.hud-secrets b { font-weight: 900; color: var(--ink); font-size: 14px; }
.hud-secrets span.done b { color: #2e9a50; }
.hud-secrets.bump { animation: bump .45s; }
.seek-btn { position: fixed; left: var(--side); bottom: calc(var(--bot) + 108px); z-index: 6; width: 74px; height: 74px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe6, #ffe08a); box-shadow: 0 0 0 4px #fff, 0 6px 0 4px #e0a93a, 0 10px 18px rgba(90, 58, 126, .25);
  display: grid; place-items: center; font-size: 38px; animation: seek 2.4s ease-in-out infinite; }
.seek-btn span { display: block; animation: spin-needle 4s ease-in-out infinite; }
.seek-btn b { position: absolute; top: -6px; right: -6px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: #ff5c9a; color: #fff;
  font-size: 15px; font-weight: 900; line-height: 26px; box-shadow: 0 0 0 3px #fff; }
.seek-btn b:empty { display: none; }
.seek-btn.none { animation: none; filter: saturate(.4); opacity: .75; }
.seek-btn:active { transform: translateY(3px) scale(.95); }
@keyframes seek { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-10deg) scale(1.08); } 86% { transform: rotate(8deg) scale(1.08); } 94% { transform: rotate(-4deg); } }
@keyframes spin-needle { 50% { transform: rotate(25deg); } }

/* ---------- home screen over the live world (graphics upgrade) ---------- */
.title.live { background: radial-gradient(ellipse 50% 30% at 50% 18%, rgba(255, 255, 255, .45), transparent 70%),
  linear-gradient(rgba(255, 228, 244, .35), rgba(255, 228, 244, 0) 30%, rgba(255, 228, 244, 0) 70%, rgba(255, 220, 240, .4)); }
body:has(.title.show) :is(.hud, .hint-btn, .jump-btn, .seek-btn) { visibility: hidden; }
.title .logo-wrap { animation: float 4s ease-in-out infinite; filter: drop-shadow(0 14px 18px rgba(110, 60, 140, .3)); }
.title.show .logo-wrap { animation: logo-in 1s cubic-bezier(.3, 1.5, .5, 1) backwards, float 4s 1s ease-in-out infinite; }
@keyframes logo-in { from { transform: translateY(-60px) scale(.6) rotate(-6deg); opacity: 0; } }
@keyframes float { 50% { transform: translateY(-10px) rotate(-1deg); } }
.title-stage { position: relative; width: min(94vw, 640px); height: min(34vh, 300px); display: flex; align-items: flex-end; justify-content: center; }
.title-glow { position: absolute; left: 8%; right: 8%; bottom: -6%; height: 34%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 240, 250, .7) 60%, transparent); filter: blur(2px); }
.title-uni { position: relative; width: auto; height: 100%; animation: idle 1.4s ease-in-out infinite, title-pop .8s .2s cubic-bezier(.3, 1.6, .5, 1) backwards;
  filter: drop-shadow(0 10px 10px rgba(80, 40, 110, .25)); }
.title-bud { position: relative; height: 52%; margin-right: -4%; animation: hop-bud 1.6s ease-in-out infinite, title-pop .8s .35s cubic-bezier(.3, 1.6, .5, 1) backwards;
  filter: drop-shadow(0 8px 8px rgba(80, 40, 110, .25)); }
@keyframes hop-bud { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(-14%) rotate(-6deg); } }
@keyframes title-pop { from { transform: translateY(40%) scale(.3); opacity: 0; } }
.title-cast { position: relative; display: flex; align-items: flex-end; margin-left: -2%; height: 46%; }
.title-friend { height: 100%; width: auto; margin-left: -5%; animation: wave 1.2s ease-in-out infinite, title-pop .7s cubic-bezier(.3, 1.6, .5, 1) backwards;
  transform-origin: bottom center; filter: drop-shadow(0 6px 6px rgba(80, 40, 110, .22)); }
.title-friend.sleepy { animation: snooze 3s ease-in-out infinite, title-pop .7s cubic-bezier(.3, 1.6, .5, 1) backwards; opacity: .9; }
@keyframes wave { 50% { transform: translateY(-8%) rotate(-5deg); } }
@keyframes snooze { 50% { transform: scale(1.03, .96) rotate(3deg); } }
.title .play-btn { position: relative; background: radial-gradient(circle at 35% 30%, #ffb3d1, var(--pink)); }
.title .play-btn::before, .title .play-btn::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .9); animation: ring 2s ease-out infinite; }
.title .play-btn::after { animation-delay: 1s; }
@keyframes ring { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
/* floating sparkles and hearts drifting up over the world */
.title-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.title-sky i { position: absolute; bottom: -40px; width: 22px; height: 22px; opacity: 0; animation: rise 9s linear infinite;
  background: radial-gradient(circle, #fff 0 20%, rgba(255, 240, 180, .8) 35%, transparent 70%); }
.title-sky i:nth-child(odd) { background: none; width: auto; height: auto; font-size: 22px; }
.title-sky i:nth-child(odd)::before { content: "💖"; }
.title-sky i:nth-child(1) { left: 8%; animation-delay: 0s; } .title-sky i:nth-child(2) { left: 20%; animation-delay: 2.1s; }
.title-sky i:nth-child(3) { left: 33%; animation-delay: 4.5s; } .title-sky i:nth-child(4) { left: 47%; animation-delay: 1.2s; }
.title-sky i:nth-child(5) { left: 61%; animation-delay: 6s; } .title-sky i:nth-child(6) { left: 74%; animation-delay: 3.3s; }
.title-sky i:nth-child(7) { left: 86%; animation-delay: 7.2s; } .title-sky i:nth-child(8) { left: 94%; animation-delay: 5.1s; }
@keyframes rise { 10% { opacity: .9; } 80% { opacity: .7; } to { transform: translate(30px, -110vh) rotate(40deg); opacity: 0; } }
.title-count { box-shadow: 0 4px 10px rgba(110, 60, 140, .15); }
@media (prefers-reduced-motion: reduce) { .title-sky i { animation: none; } }

/* ---------- mini-games: soap bubbles, glowing stars, a felt tracing card (graphics upgrade) ---------- */
.b-bubble { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px);
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.98) 0 7%, rgba(255,255,255,.4) 9% 18%, transparent 30%),
    radial-gradient(circle at 70% 78%, rgba(255,255,255,.55) 0 4%, transparent 12%),
    conic-gradient(from 20deg, rgba(255,140,200,.35), rgba(255,220,120,.3), rgba(140,230,180,.3), rgba(120,190,255,.35), rgba(200,150,255,.35), rgba(255,140,200,.35)),
    radial-gradient(circle, rgba(255,255,255,.08) 55%, rgba(255,255,255,.5) 100%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), inset 0 -8px 16px rgba(160,120,255,.25), 0 10px 22px rgba(90, 58, 126, .18); }
.b-bubble span { text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 0 12px rgba(255,255,255,.9); }
.b-star::before { background: radial-gradient(circle at 40% 35%, #fff6b0, #ffd84d 45%, #ffb92e);
  filter: drop-shadow(0 0 8px rgba(255, 236, 140, .95)) drop-shadow(0 4px 4px rgba(150, 90, 0, .25)); }
.b-trace canvas { background: radial-gradient(120% 100% at 30% 10%, #fff, #fff6fb 60%, color-mix(in srgb, var(--land) 12%, #fff)); }
.b-trace { background: rgba(255, 240, 248, .35); backdrop-filter: blur(6px) saturate(1.1); -webkit-backdrop-filter: blur(6px) saturate(1.1); }

/* ---------- top-left box for a 5-year-old: next friend + rainbow, gems, secrets as pictures ---------- */
.hud-pill { gap: 8px; padding: 8px 14px 10px; }
.hud-quest { display: flex; align-items: center; gap: 8px; }
.hud-next { cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; font-size: 30px; border-radius: 50%;
  background: radial-gradient(circle, #fff 60%, #ffe6f2); box-shadow: 0 0 0 3px #ffc1db; animation: nod 2s ease-in-out infinite; }
.hud-next canvas { width: 40px; height: 40px; }
@keyframes nod { 50% { transform: translateY(-2px) rotate(-4deg); } }
.hud-bar { position: relative; width: 120px; height: 16px; border-radius: 10px; background: #f1e6f6; box-shadow: inset 0 2px 3px rgba(90, 58, 126, .15); overflow: hidden; }
.hud-bar i { position: absolute; left: 0; top: 0; bottom: 0; min-width: 6px; border-radius: 10px; transition: width .8s cubic-bezier(.3, 1.4, .5, 1);
  background: linear-gradient(90deg, #ff7b86, #ffad5c 20%, #ffd84d 40%, #7fd67f 60%, #6cb8ff 80%, #b98cf0) 0 0 / 120px 100%;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .45); }
.hud-gems { font-size: 22px; }
.gem-ico { width: 20px; height: 20px; }
.hud-secrets { gap: 3px; font-size: 22px; }
.hud-secrets span { filter: grayscale(1); opacity: .32; transition: filter .4s, opacity .4s, transform .4s; }
.hud-secrets span.got { filter: none; opacity: 1; animation: bump .5s; text-shadow: 0 0 8px rgba(255, 220, 120, .9); }

/* ---------- intro movie (story.js) ---------- */
.story { position: fixed; inset: 0; z-index: 60; display: none; overflow: hidden; background: linear-gradient(#ffd9ec, #bfe6f7 70%, #e9f7ff); transition: background 1.2s, opacity .5s; }
.story.show { display: block; }
.story.out { opacity: 0; }
.story.scene-lands { background: linear-gradient(#9fe0ff, #e6fbff 60%, #d8f3c8); }
.story.scene-grey { background: linear-gradient(#b9b6c2, #e3e1e8); }
.story.scene-hero { background: linear-gradient(#ffe0f0, #fff2d6 60%, #c9eeb0); }
.story.shake .story-stage { animation: stshake .5s; }
@keyframes stshake { 20%, 60% { transform: translate(-14px, 6px) rotate(-1deg); } 40%, 80% { transform: translate(14px, -6px) rotate(1deg); } }
.story-stage { position: absolute; inset: 0; }
.story-stage > * { position: absolute; }
.story-bar { position: absolute; left: var(--side); right: var(--side); bottom: calc(var(--bot) + 10px); text-align: center; z-index: 5; }
.story-bar span { display: inline-block; max-width: 900px; padding: 12px 22px; border-radius: 26px; background: rgba(255, 255, 255, .93);
  border: 3px dashed #ffc1db; font-weight: 900; font-size: clamp(18px, 4.4vw, 30px); line-height: 1.25; box-shadow: 0 6px 18px rgba(90, 58, 126, .18); }
.story-bar span:empty { display: none; }
.story-bar span.in { animation: pop .45s; }
.story-skip { position: absolute; top: var(--top); right: var(--side); z-index: 6; }

.st-cloud { width: 34vmin; height: 12vmin; border-radius: 99px; background: #fff; box-shadow: 6vmin -4vmin 0 1vmin #fff, -5vmin -2vmin 0 0 #fff; opacity: .9; animation: stdrift 40s linear infinite; }
.st-cloud.c1 { top: 12%; left: -10%; }
.st-cloud.c2 { top: 30%; left: 40%; transform: scale(.7); animation-duration: 55s; }
.st-cloud.c3 { top: 8%; left: 75%; transform: scale(.85); animation-duration: 48s; }
@keyframes stdrift { to { translate: 40vw 0; } }

.st-rainbow { left: 8%; right: 8%; top: 24%; height: 44%; opacity: .55;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, transparent 78%, #b98cf0 78% 81%, #6cb8ff 81% 84%, #7fd67f 84% 87%,
    #ffd84d 87% 90%, #ffad5c 90% 93%, #ff7b86 93% 96%, transparent 96%); transition: opacity 1s, filter 1s; }
.st-rainbow.glow { opacity: 1; filter: drop-shadow(0 0 18px #fff) saturate(1.3); }
.st-rainbow.break { animation: stbreak 1.2s forwards; }
@keyframes stbreak { 30% { clip-path: polygon(0 0, 45% 0, 52% 100%, 0 100%, 0 0, 55% 0, 100% 0, 100% 100%, 60% 100%); } 100% { opacity: 0; transform: translateY(40%) rotate(4deg); } }
.st-bridge { inset: 0; }
.st-letter { position: absolute; width: min(7vw, 64px); transform: translate(-50%, -80%); animation: stpop .5s backwards, stbob 1.6s ease-in-out infinite; transition: transform 1.4s cubic-bezier(.3, -.2, .6, 1), opacity 1.4s; }
.st-letter.sing { filter: drop-shadow(0 0 8px #fff7b0); }
.st-letter.fly { animation: none; transform: translate(calc(-50% + var(--fx)), calc(-80% + var(--fy))) rotate(var(--fr)); opacity: 0; }
@keyframes stpop { from { transform: translate(-50%, -80%) scale(0); } }
@keyframes stbob { 50% { translate: 0 -6px; } }
.st-castle { left: 50%; top: 4%; width: min(16vw, 130px); transform: translateX(-50%); filter: drop-shadow(0 6px 10px rgba(90, 58, 126, .2)); transition: opacity 1s; }
.st-castle.big { top: 16%; width: min(46vw, 320px); animation: stpop2 1s; }
.st-castle.fade, .st-lands.fade { opacity: 0; }
@keyframes stpop2 { from { opacity: 0; transform: translateX(-50%) scale(.8); } }

.st-sneezy { left: 104%; top: 10%; width: 38vmin; height: 22vmin; border-radius: 99px; background: #f4f1fb;
  box-shadow: 8vmin -7vmin 0 2vmin #f4f1fb, -7vmin -4vmin 0 1vmin #f4f1fb, inset 0 -2vmin 0 rgba(150, 130, 190, .15);
  transition: left 2.6s ease-in-out, transform .6s; }
.st-sneezy.in { left: 58%; }
.st-sneezy .eye { position: absolute; top: 40%; width: 4vmin; height: 1.2vmin; border-radius: 0 0 4vmin 4vmin; border: .8vmin solid #5a3a7e; border-top: 0; }
.st-sneezy .eye.l { left: 28%; } .st-sneezy .eye.r { left: 58%; }
.st-sneezy .mouth { position: absolute; left: 44%; top: 62%; width: 3vmin; height: 2vmin; border-radius: 50%; background: #5a3a7e; transition: all .5s; }
.st-sneezy.ah { transform: scale(1.12, 1.05) rotate(-6deg); }
.st-sneezy.ah .mouth { width: 5vmin; height: 5vmin; top: 56%; left: 42%; }
.st-sneezy.achoo { transform: scale(.9, 1.1) rotate(10deg) translateX(-6vmin); }
.st-sneezy.away { left: -60%; transition-duration: 3s; }
.st-achoo { left: 20%; top: 26%; font-size: clamp(48px, 13vw, 130px); font-weight: 900; color: #ff86b8; -webkit-text-stroke: 4px #fff;
  text-shadow: 0 8px 0 rgba(90, 58, 126, .25); animation: stachoo 1.6s forwards; }
@keyframes stachoo { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 20% { transform: scale(1.15) rotate(4deg); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(1.3) translateY(-30px); opacity: 0; } }

.st-lands { inset: 0; transition: opacity 1s; }
.st-island { position: absolute; width: min(30vw, 260px); left: calc(4% + var(--k) * 32%); top: 14%;
  animation: stisland 1s backwards, stbob 3s ease-in-out infinite; animation-delay: calc(var(--k) * 120ms), 0s; }
.st-island:nth-child(n+4) { top: 52%; }
.st-island:nth-child(4) { left: 4%; } .st-island:nth-child(5) { left: 36%; } .st-island:nth-child(6) { left: 68%; }
@keyframes stisland { from { opacity: 0; transform: translateY(40px) scale(.8); } }
.st-drop { position: absolute; width: min(6vw, 48px); animation: stdrop .9s cubic-bezier(.3, 1.4, .5, 1) backwards; }
@keyframes stdrop { from { transform: translateY(-80vh) rotate(-200deg); } }

.st-hero { bottom: 18%; animation: sthero 1.6s ease-out backwards; }
.st-hero img { width: 100%; }
.st-hero.uni { left: 18%; width: min(38vw, 300px); }
.st-hero.bud { left: 52%; width: min(20vw, 160px); animation-delay: .5s; }
.st-hero.hop { animation: stbob .6s ease-in-out 3; }
@keyframes sthero { from { transform: translateX(-70vw); } }
.st-title { left: 0; right: 0; top: 6%; text-align: center; animation: stpop3 .8s backwards; }
.st-title img { width: min(40vw, 300px); display: block; margin: 0 auto; }
.st-title b { font-size: clamp(30px, 7vw, 64px); color: #fff; -webkit-text-stroke: 3px var(--pink-dark); text-shadow: 0 5px 0 rgba(224, 95, 151, .35); }
@keyframes stpop3 { from { transform: scale(.4); opacity: 0; } }