/* ===========================================================================
   GAME PREVIEW SCENES — polished mobile-game mockups rendered inside a phone.
   Each scene reads at ~166–220px wide. Friendly, glossy, depth-layered.
   =========================================================================== */
.gp {
  position: absolute; inset: 0; overflow: hidden;
  font-family: var(--font-display);
  --gink: #2c2342;       /* dark ink for text on white chips */
  --gamber: #ffce5c;
  --gamber-2: #ff9d3c;
}
.gp-sky { position: absolute; inset: 0; background: radial-gradient(125% 80% at 50% -12%, rgba(255,255,255,.34), transparent 58%); pointer-events: none; }
.gp-vignette { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(20,10,30,.28)); pointer-events: none; }

/* ---- Shared HUD ---------------------------------------------------------- */
.gp-hud { position: absolute; top: 30px; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 13px; z-index: 9; }
.gp-hud .score { position: relative; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.94); border-radius: 999px; padding: 4px 11px; font-weight: 800; font-size: 0.72rem; color: var(--gink); box-shadow: 0 5px 12px rgba(0,0,0,.16); transform-origin: center; }
.gp-hud .score b { color: var(--gamber-2); font-size: 0.8rem; line-height: 1; }
.gp-hud .score .score-n { font-variant-numeric: tabular-nums; }
.gp-hud .score.gain { animation: scoreGain .56s cubic-bezier(.3,1.5,.5,1); }
.gp-hud .score.lose { animation: scoreShake .5s ease; }
@keyframes scoreGain { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes scoreShake { 0%,100% { transform: translateX(0) rotate(0); } 20% { transform: translateX(-3px) rotate(-4deg); } 40% { transform: translateX(3px) rotate(4deg); } 60% { transform: translateX(-2px) rotate(-2deg); } 80% { transform: translateX(2px) rotate(1deg); } }
.score-delta { position: absolute; left: 50%; top: 0; transform: translateX(-50%); font-size: 0.66rem; font-weight: 800; pointer-events: none; }
.score-delta.plus { color: #16b866; animation: deltaUp 1s ease-out forwards; }
.score-delta.minus { color: #ff4d63; animation: deltaDown 1s ease-out forwards; }
@keyframes deltaUp { 0% { opacity: 0; transform: translate(-50%, 4px) scale(.7); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -17px) scale(1); } }
@keyframes deltaDown { 0% { opacity: 0; transform: translate(-50%, -2px) scale(.7); } 22% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 18px) scale(1); } }
.gp-target { display: inline-flex; align-items: center; background: rgba(22,12,32,.5); color: #fff; border-radius: 999px; padding: 4px 11px; font-weight: 800; font-size: 0.78rem; white-space: nowrap; max-width: 52%; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); }

/* ---- Shared mic input (child speaking) ----------------------------------- */
.mic-wave { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; align-items: center; height: 30px; z-index: 7; }
.mic-wave i { width: 4px; height: 7px; border-radius: 4px; background: #fff; opacity: .92; animation: micbar 1s ease-in-out infinite; }
.mic-wave i:nth-child(1){animation-delay:0s} .mic-wave i:nth-child(2){animation-delay:.12s} .mic-wave i:nth-child(3){animation-delay:.26s} .mic-wave i:nth-child(4){animation-delay:.4s} .mic-wave i:nth-child(5){animation-delay:.3s} .mic-wave i:nth-child(6){animation-delay:.18s} .mic-wave i:nth-child(7){animation-delay:.08s}
@keyframes micbar { 0%,100% { height: 7px; opacity:.7; } 50% { height: 26px; opacity:1; } }

/* ===========================================================================
   1. SOUND SURFER — a dune-gliding rider (Alto-style), not a block-jumper
   =========================================================================== */
.surf { position: absolute; inset: 0; }
.surf-sun { position: absolute; top: 15%; right: 16%; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.35) 55%, transparent 72%); }
.surf-cloud { position: absolute; height: 9px; border-radius: 999px; background: rgba(255,255,255,.5); animation: cloudFloat 6s ease-in-out infinite; }
.surf-cloud::after { content: ""; position: absolute; top: -5px; left: 30%; width: 50%; height: 12px; border-radius: 999px; background: inherit; }
.surf-cloud.c1 { top: 23%; left: 14%; width: 40px; animation-duration: 7s; }
.surf-cloud.c2 { top: 33%; left: 56%; width: 26px; opacity: .7; animation-duration: 9s; animation-delay: -2s; }
.surf-cloud.c3 { top: 18%; left: 40%; width: 20px; opacity: .5; animation-duration: 8s; animation-delay: -4s; }
@keyframes cloudFloat { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-7px); } }

.surf-dune { position: absolute; left: -32%; width: 164%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.surf-dune.dune-3 { bottom: 33%; height: 78px; background: rgba(255,255,255,.14); }
.surf-dune.dune-2 { bottom: 28%; height: 70px; background: rgba(255,255,255,.2); }
.surf-dune.dune-1 { bottom: 0; height: 36%; background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(0,0,0,.1)); box-shadow: 0 -2px 0 rgba(255,255,255,.4); }

.surf-rock { position: absolute; bottom: 35%; width: 14px; height: 10px; background: rgba(40,18,40,.5); border-radius: 8px 8px 3px 3px; z-index: 3; animation: rockSlide 2s linear forwards; }
.surf-rock.tall { width: 13px; height: 21px; background: rgba(40,18,40,.62); border-radius: 7px 7px 3px 3px; }
@keyframes rockSlide { from { right: -14%; } to { right: 112%; } }

.surf-rider { position: absolute; left: 34%; bottom: 35%; width: 42px; height: 44px; z-index: 5; }
.surf-rider.jump { animation: surfHop .72s ease; }
.surf-rider.crash { animation: surfBonk .42s ease; }
.surf-board { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 9px; border-radius: 999px; background: linear-gradient(90deg, var(--gamber), var(--gamber-2)); box-shadow: 0 4px 9px rgba(0,0,0,.28); }
.surf-board::after { content: ""; position: absolute; inset: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.45); }
.surf-kid { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 17px; height: 22px; border-radius: 9px 9px 7px 7px; background: #fff; box-shadow: 0 3px 7px rgba(0,0,0,.2); }
.surf-kid::after { content: ""; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.15); }
.surf-scarf { position: absolute; top: 1px; right: 90%; width: 16px; height: 4px; border-radius: 4px; background: #ff5e8a; transform-origin: right center; animation: scarf .8s ease-in-out infinite; }
.surf-scarf::after { content: ""; position: absolute; top: 4px; right: 2px; width: 11px; height: 4px; border-radius: 4px; background: #ff5e8a; opacity: .7; }
@keyframes scarf { 0%,100% { transform: rotate(-6deg) scaleX(1); } 50% { transform: rotate(6deg) scaleX(1.12); } }
.surf-spray { position: absolute; bottom: 1px; right: 92%; display: flex; gap: 2px; }
.surf-spray i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.85); animation: sprayFly .9s ease-out infinite; }
.surf-spray i:nth-child(2){ animation-delay:.15s } .surf-spray i:nth-child(3){ animation-delay:.3s }
@keyframes sprayFly { 0% { transform: translate(0,0) scale(1); opacity: .9; } 100% { transform: translate(-14px, 6px) scale(.3); opacity: 0; } }
@keyframes surfHop { 0% { transform: translateY(0) rotate(0deg); } 45% { transform: translateY(-34px) rotate(-10deg); } 100% { transform: translateY(0) rotate(0deg); } }
@keyframes surfBonk { 0%,100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-4px) rotate(-9deg); } 50% { transform: translateX(3px) rotate(7deg); } 75% { transform: translateX(-2px) rotate(-3deg); } }

.surf-hold { position: absolute; right: 11px; top: 39%; width: 7px; height: 86px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; z-index: 6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.surf-hold-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 999px; background: linear-gradient(180deg, #fff, var(--gamber)); animation: holdFill 2.6s ease-in-out infinite; }
@keyframes holdFill { 0% { height: 22%; } 22% { height: 94%; } 46% { height: 94%; } 100% { height: 22%; } }

/* ===========================================================================
   2. POP THE SOUND — glossy bubbles, targets glow, one bursts into a combo
   =========================================================================== */
.bubgame { position: absolute; inset: 0; touch-action: none; }
.bub { position: absolute; top: 106%; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.95), rgba(255,255,255,.5) 46%, rgba(255,255,255,.22) 72%, rgba(255,255,255,.12)); border: 1.5px solid rgba(255,255,255,.85); display: grid; place-items: center; font-weight: 800; color: var(--gink); font-size: 1rem; box-shadow: inset 0 -5px 10px rgba(120,120,160,.12), 0 4px 10px rgba(0,0,0,.12); animation: bubrise 4200ms linear forwards; cursor: pointer; z-index: 4; }
.bub.good { border-color: #fff; color: #ff5e8a; box-shadow: inset 0 -5px 10px rgba(120,120,160,.12), 0 0 13px rgba(255,255,255,.7); }
.bub-gloss { position: absolute; top: 16%; left: 22%; width: 28%; height: 22%; border-radius: 50%; background: rgba(255,255,255,.9); }
@keyframes bubrise { 0% { top: 106%; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { top: -14%; opacity: .85; } }
.bub-tap { position: absolute; transform: translate(-50%,-50%); width: 0; height: 0; z-index: 7; pointer-events: none; }
.bub-touch { position: absolute; left: 0; top: 0; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: rgba(255,255,255,.82); box-shadow: 0 0 0 1.5px rgba(255,255,255,.95), 0 5px 12px rgba(0,0,0,.18); animation: tapDot .34s ease-out forwards; }
.bub-ring { position: absolute; left: 0; top: 0; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; border: 2.5px solid #fff; animation: tapRing .5s ease-out forwards; }
.bub-tap i { position: absolute; left: 0; top: 0; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; animation: bubBurst .55s ease-out forwards; }
.bub-tap i:nth-child(3){ --a: -110deg } .bub-tap i:nth-child(4){ --a: -40deg } .bub-tap i:nth-child(5){ --a: 30deg } .bub-tap i:nth-child(6){ --a: 100deg } .bub-tap i:nth-child(7){ --a: 165deg } .bub-tap i:nth-child(8){ --a: 225deg }
.bub-tap.bad .bub-ring, .bub-tap.miss .bub-ring { border-color: #ff4d63; }
.bub-tap.bad i, .bub-tap.miss i { background: #ff4d63; }
.bub-tap.empty .bub-touch { background: rgba(255,255,255,.28); box-shadow: 0 0 0 1.5px rgba(255,255,255,.45); animation: tapEmpty .36s ease-out forwards; }
.bub-tap.miss .bub-touch { background: #ff4d63; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8), 0 0 0 8px rgba(255,77,99,.18); }
@keyframes tapDot { 0% { transform: scale(.4); opacity: 0; } 45% { transform: scale(1); opacity: .95; } 100% { transform: scale(.72); opacity: 0; } }
@keyframes tapEmpty { 0% { transform: scale(.45); opacity: 0; } 55% { transform: scale(.9); opacity: .8; } 100% { transform: scale(.7); opacity: 0; } }
@keyframes tapRing { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes bubBurst { 0% { transform: rotate(var(--a)) translateX(3px) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(26px) scale(.2); opacity: 0; } }
@keyframes popOut { 0%,60% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; } 64% { opacity: 1; } 80% { transform: rotate(var(--a)) translateX(22px) scale(1); opacity: 1; } 92% { transform: rotate(var(--a)) translateX(28px) scale(.3); opacity: 0; } }

/* ===========================================================================
   3. DRAGON BREATH — exhale into the mic; the dragon's flame grows & sways
   =========================================================================== */
.dragongame { position: absolute; inset: 0; }
.breath-gauge { position: absolute; top: 26%; left: 50%; transform: translateX(-50%); width: 118px; height: 16px; border-radius: 999px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); overflow: hidden; z-index: 6; }
.breath-gauge-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #fff, var(--gamber)); animation: breathFill 3.2s ease-in-out infinite; }
.breath-gauge-lbl { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.54rem; font-weight: 800; letter-spacing: 0.16em; color: var(--gink); }
@keyframes breathFill { 0% { width: 8%; } 45% { width: 92%; } 62% { width: 92%; } 100% { width: 8%; } }

.dragon { position: absolute; left: 13%; bottom: 30%; width: 56px; height: 50px; z-index: 4; animation: dragBob 3.2s ease-in-out infinite; }
.dragon-head { position: absolute; inset: 0; border-radius: 52% 60% 46% 50% / 56% 56% 46% 46%; background: linear-gradient(155deg, #eafff1, #b6efce); box-shadow: inset 0 -6px 10px rgba(40,120,80,.22), 0 9px 18px rgba(0,0,0,.22); }
.dragon-head::after { content: ""; position: absolute; right: -9px; bottom: 20%; width: 24px; height: 20px; border-radius: 50% 60% 50% 40%; background: linear-gradient(155deg, #eafff1, #b6efce); box-shadow: inset 0 -4px 7px rgba(40,120,80,.2); }
.dragon-eye { position: absolute; top: 28%; right: 26%; width: 9px; height: 11px; border-radius: 50%; background: #243; z-index: 2; }
.dragon-eye::after { content: ""; position: absolute; top: 2px; left: 2px; width: 3px; height: 3px; border-radius: 50%; background: #fff; }
.dragon-brow { position: absolute; top: 22%; right: 24%; width: 13px; height: 4px; border-radius: 4px; background: #3a7a55; transform: rotate(-12deg); z-index: 3; }
.dragon-horn { position: absolute; top: -9px; left: 30%; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 14px solid #fff; filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); }
.dragon-wing { position: absolute; left: -8px; top: 18%; width: 22px; height: 26px; border-radius: 60% 30% 60% 40%; background: rgba(60,150,100,.45); transform: rotate(-18deg); animation: wingFlap 1.6s ease-in-out infinite; transform-origin: right center; }
@keyframes wingFlap { 0%,100% { transform: rotate(-18deg) scaleY(1); } 50% { transform: rotate(-30deg) scaleY(.82); } }

.dragon-flame { position: absolute; left: 48%; bottom: 38%; width: 58px; height: 17px; transform-origin: left center; animation: flameGrow 3.2s ease-in-out infinite; z-index: 5; }
.dragon-flame span { position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 45% 60% 55% 45% / 50%; }
.fl-core { width: 100%; height: 100%; background: linear-gradient(90deg, #fff, var(--gamber) 45%, var(--gamber-2)); box-shadow: 0 0 10px rgba(255,160,60,.55); }
.fl-mid { width: 80%; height: 62%; background: linear-gradient(90deg, #fff, #ffe39a); opacity: .9; }
.fl-tip { width: 55%; height: 38%; background: #fff; opacity: .85; }
@keyframes flameGrow { 0% { transform: scaleX(.28) rotate(0deg); opacity: .5; } 30% { opacity: 1; } 45% { transform: scaleX(1) rotate(-3deg); } 54% { transform: scaleX(1.05) rotate(2.5deg); } 62% { transform: scaleX(1) rotate(-2deg); } 100% { transform: scaleX(.28) rotate(0deg); opacity: .5; } }

.breath-stream { position: absolute; left: 35%; bottom: 16%; z-index: 3; }
.breath-stream i { position: absolute; width: 7px; height: 7px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); animation: streamFlow 1.5s ease-in infinite; }
.breath-stream i:nth-child(2){ animation-delay:.35s } .breath-stream i:nth-child(3){ animation-delay:.7s } .breath-stream i:nth-child(4){ animation-delay:1.05s }
@keyframes streamFlow { 0% { transform: translate(0,0) scale(.4); opacity: 0; } 30% { opacity: .85; } 100% { transform: translate(-22px,-30px) scale(1); opacity: 0; } }

.breath-mic { position: absolute; bottom: 6%; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; box-shadow: 0 5px 12px rgba(0,0,0,.2); z-index: 6; animation: micGlow 3.2s ease-in-out infinite; }
.breath-mic svg { width: 16px; height: 16px; fill: none; stroke: var(--gink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===========================================================================
   4. SYLLABLE TOSS — build a word from flying syllable tiles
   =========================================================================== */
.wordgame { position: absolute; inset: 0; }
.wb-prompt { position: absolute; top: 29%; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.92); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; }
.wb-slot-row { position: absolute; top: 37%; left: 0; right: 0; display: flex; justify-content: center; gap: 7px; }
.wb-slot { width: 42px; height: 48px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.65); display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 0.98rem; }
.wb-slot.filled { background: #fff; color: var(--gink); border: 2px solid #fff; box-shadow: 0 6px 13px rgba(0,0,0,.2); }
.wb-slot.target { animation: slotGlow 2.6s ease-in-out infinite; }
@keyframes slotGlow { 0%,100% { box-shadow: 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 12px rgba(255,255,255,.6); border-color: #fff; } }
.wb-tray { position: absolute; bottom: 17%; left: 0; right: 0; display: flex; justify-content: center; gap: 9px; }
.wb-tile { width: 38px; height: 44px; border-radius: 11px; background: linear-gradient(180deg, #fff, #f1ecff); color: var(--gink); display: grid; place-items: center; font-weight: 800; font-size: 0.92rem; box-shadow: 0 6px 13px rgba(0,0,0,.22); }
.wb-tile.fly { animation: wbfly 2.6s cubic-bezier(.5,0,.4,1) infinite; z-index: 5; }
@keyframes wbfly { 0%,14% { transform: translateY(0) scale(1) rotate(0); } 44% { transform: translateY(-70px) scale(1.05) rotate(-4deg); } 62% { transform: translateY(-70px) scale(1.05) rotate(-4deg); } 82%,100% { transform: translateY(0) scale(1) rotate(0); } }
.wb-check { position: absolute; top: 37%; left: 50%; transform: translateX(-50%); width: 22px; height: 22px; border-radius: 50%; background: #2bbd6e; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.25); animation: checkPop 2.6s ease-in-out infinite; z-index: 6; margin-top: -34px; }
.wb-check svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes checkPop { 0%,52% { transform: translateX(-50%) scale(0); opacity: 0; } 62% { transform: translateX(-50%) scale(1.2); opacity: 1; } 74%,100% { transform: translateX(-50%) scale(1); opacity: 1; } }

/* (Mirror game removed.) */


/* ===========================================================================
   6. RHYTHM TAP — Tap-Tap-Revenge: notes fall down lanes, the tap fires the
   instant a note lands on its target (taps interact with notes, not overlaid)
   =========================================================================== */
.ttr { position: absolute; inset: 0; }
.ttr-lane { position: absolute; top: 30%; bottom: 22%; width: 30px; transform: translateX(-50%); border-radius: 999px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); }
.ttr-note { position: absolute; top: 30%; transform: translate(-50%,-50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--gink); display: grid; place-items: center; font-weight: 800; font-size: 0.78rem; box-shadow: 0 5px 11px rgba(0,0,0,.22); z-index: 4; animation: ttrFall 1.75s linear forwards; }
@keyframes ttrFall { from { top: 30%; } to { top: 78%; } }
.ttr-target { position: absolute; top: 78%; transform: translate(-50%,-50%); width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.85); box-shadow: inset 0 0 8px rgba(255,255,255,.25); z-index: 3; cursor: pointer; }
.ttr-target-ring { position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.16); }
.ttr-tap { position: absolute; top: 78%; transform: translate(-50%,-50%); width: 44px; height: 44px; border-radius: 50%; pointer-events: none; z-index: 6; }
.ttr-tap.hit { background: rgba(255,255,255,.58); animation: ttrHit .45s ease-out forwards; }
.ttr-tap.miss { border: 3px solid #ff4d63; background: rgba(255,77,99,.18); animation: ttrMiss .46s ease-out forwards; }
.ttr-tap.late { border: 3px solid #ff4d63; background: rgba(255,77,99,.26); animation: ttrLate .56s ease-out forwards; }
@keyframes ttrHit { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); transform: translate(-50%,-50%) scale(.72); opacity: 1; } 100% { box-shadow: 0 0 0 13px rgba(255,255,255,0); transform: translate(-50%,-50%) scale(1.08); opacity: 0; } }
@keyframes ttrMiss { 0%,100% { transform: translate(-50%,-50%) rotate(0deg); opacity: 0; } 20% { transform: translate(calc(-50% - 3px),-50%) rotate(-5deg); opacity: 1; } 45% { transform: translate(calc(-50% + 3px),-50%) rotate(5deg); opacity: .9; } 70% { transform: translate(-50%,-50%) rotate(0deg); opacity: .5; } }
@keyframes ttrLate { 0% { transform: translate(-50%,-50%) scale(.7); opacity: 0; } 35% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 100% { transform: translate(-50%,10px) scale(.8); opacity: 0; } }

/* ===========================================================================
   7. SPACE SORTER — drop the word into the matching planet
   =========================================================================== */
.sortgame { position: absolute; inset: 0; }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255,255,255,.8); animation: twinkle 2.4s ease-in-out infinite; }
.star.s1 { top: 22%; left: 18%; } .star.s2 { top: 30%; left: 74%; animation-delay:.5s } .star.s3 { top: 44%; left: 30%; animation-delay:1s } .star.s4 { top: 18%; left: 56%; animation-delay:1.4s } .star.s5 { top: 50%; left: 82%; animation-delay:.8s }
@keyframes twinkle { 0%,100% { opacity: .3; transform: scale(.7); } 50% { opacity: 1; transform: scale(1); } }
.sort-card { position: absolute; top: 17%; left: 50%; width: 46px; height: 46px; border-radius: 13px; background: #fff; color: var(--gink); display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; box-shadow: 0 9px 18px rgba(0,0,0,.3); animation: sortdrop 3s cubic-bezier(.5,.05,.5,1) infinite; z-index: 5; }
@keyframes sortdrop { 0% { top: 15%; left: 50%; opacity: 0; transform: translateX(-50%) rotate(-8deg); } 12% { opacity: 1; } 50% { top: 15%; left: 50%; opacity: 1; transform: translateX(-50%) rotate(-8deg); } 84% { top: 56%; left: 33%; opacity: 1; transform: translateX(-50%) rotate(6deg); } 92% { top: 56%; left: 33%; opacity: 0; } 100% { opacity: 0; } }
.sort-planets { position: absolute; left: 0; right: 0; bottom: 11%; display: flex; gap: 18px; justify-content: center; }
.planet { position: relative; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #fff; font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0,0,0,.3); box-shadow: inset -7px -7px 13px rgba(0,0,0,.28), 0 8px 16px rgba(0,0,0,.25); }
.planet.p-a { background: radial-gradient(circle at 35% 30%, #ffd56b, #ff8a3c); }
.planet.p-b { background: radial-gradient(circle at 35% 30%, #9fd4ff, #5b7bff); }
.planet-ring { position: absolute; inset: -6px -16px; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; transform: rotate(-20deg); }
.sort-spark { position: absolute; bottom: 18%; left: 33%; width: 0; height: 0; z-index: 6; }
.sort-spark i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #fff; animation: popOut 3s ease-out infinite; }
.sort-spark i:nth-child(1){ --a: -120deg } .sort-spark i:nth-child(2){ --a: -50deg } .sort-spark i:nth-child(3){ --a: 50deg } .sort-spark i:nth-child(4){ --a: 120deg }

/* ===========================================================================
   8. ECHO REPEAT — a talking creature says a syllable, the child repeats it
   =========================================================================== */
.echogame { position: absolute; inset: 0; }
.echo-bubble { position: absolute; top: 19%; left: 50%; transform: translateX(-50%); background: #fff; color: var(--gink); font-weight: 800; font-size: 1.15rem; padding: 7px 16px; border-radius: 16px; box-shadow: 0 8px 18px rgba(0,0,0,.22); z-index: 6; animation: bubblePop 3.2s ease-in-out infinite; }
.echo-bubble-tail { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-radius: 0 0 3px 0; }
@keyframes bubblePop { 0%,8% { transform: translateX(-50%) scale(0); opacity: 0; } 16% { transform: translateX(-50%) scale(1.12); opacity: 1; } 24%,52% { transform: translateX(-50%) scale(1); opacity: 1; } 60%,100% { transform: translateX(-50%) scale(.5); opacity: 0; } }

.tom { position: absolute; top: 41%; left: 50%; transform: translateX(-50%); width: 92px; height: 92px; z-index: 4; animation: floatBob 3.2s ease-in-out infinite; }
.tom-ear { position: absolute; top: -7px; width: 26px; height: 30px; background: linear-gradient(180deg, #fff, #f1ebff); border-radius: 50% 50% 32% 32%; box-shadow: 0 3px 7px rgba(0,0,0,.12); }
.tom-ear::after { content: ""; position: absolute; inset: 6px 7px 9px; border-radius: 50% 50% 30% 30%; background: rgba(255,150,180,.55); }
.tom-ear.l { left: 3px; transform: rotate(-16deg); } .tom-ear.r { right: 3px; transform: rotate(16deg); }
.tom-face { position: absolute; inset: 8px 0 0; border-radius: 46% 46% 48% 48% / 46% 46% 52% 52%; background: linear-gradient(180deg, #fff, #f0e9ff); box-shadow: inset 0 -7px 12px rgba(120,90,200,.14), 0 11px 22px rgba(0,0,0,.22); }
.tom-eye { position: absolute; top: 38%; width: 11px; height: 13px; border-radius: 50%; background: var(--gink); }
.tom-eye.l { left: 30%; } .tom-eye.r { right: 30%; }
.tom-eye::after { content: ""; position: absolute; top: 2px; right: 2px; width: 4px; height: 4px; border-radius: 50%; background: #fff; }
.tom-cheek { position: absolute; top: 56%; width: 13px; height: 8px; border-radius: 50%; background: rgba(255,140,170,.5); }
.tom-cheek.l { left: 17%; } .tom-cheek.r { right: 17%; }
.tom-mouth { position: absolute; top: 62%; left: 50%; transform: translateX(-50%); width: 18px; height: 6px; background: var(--gink); border-radius: 0 0 12px 12px; animation: tomTalk 3.2s ease-in-out infinite; }
@keyframes tomTalk { 0%,12% { height: 4px; width: 13px; } 18% { height: 16px; width: 22px; } 28% { height: 9px; width: 17px; } 38% { height: 16px; width: 22px; } 52% { height: 5px; width: 15px; } 100% { height: 5px; width: 15px; } }
.tom-rings { position: absolute; top: 50%; left: 50%; }
.tom-rings i { position: absolute; left: 0; top: 0; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); opacity: 0; animation: tomEcho 3.2s ease-out infinite; }
.tom-rings i:nth-child(1){ animation-delay:.2s } .tom-rings i:nth-child(2){ animation-delay:.5s } .tom-rings i:nth-child(3){ animation-delay:.8s }
@keyframes tomEcho { 0% { transform: scale(.4); opacity: .7; } 40% { opacity: .5; } 55%,100% { transform: scale(1.9); opacity: 0; } }
.echo-mic { position: absolute; bottom: 17%; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.9); display: grid; place-items: center; box-shadow: 0 5px 12px rgba(0,0,0,.2); z-index: 6; animation: micGlow 3.2s ease-in-out infinite; }
.echo-mic svg { width: 16px; height: 16px; fill: none; stroke: var(--gink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes micGlow { 0%,55% { box-shadow: 0 5px 12px rgba(0,0,0,.2); } 70% { box-shadow: 0 5px 12px rgba(0,0,0,.2), 0 0 0 6px rgba(255,255,255,.3); } 100% { box-shadow: 0 5px 12px rgba(0,0,0,.2); } }
.mw-echo { bottom: 6%; }

/* ---- Shared keyframes ---------------------------------------------------- */
@keyframes floatBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-5px); } }
@keyframes dragBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .gp * { animation: none !important; }
}