/* Generated by scripts/build-site.mjs — edit css/games/*.css, then npm run build */

/* ===== css/games/splat-keys.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. calc() rather than max() so
   stacked HUD rows keep their spacing relative to each other. */
#splatKeysGame {
  display: none;
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #FFF8E7 0%, #F0E6FF 50%, #E0F7FA 100%);
}

/* ===== ABC mode ===== */
.splat-mode-btn {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  z-index: 200;
  font-family: 'Baloo 2', 'Fredoka One', sans-serif;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 1px;
  padding: 8px 16px;
  border: 2px solid rgba(124, 92, 252, 0.35);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.7);
  color: rgba(124, 92, 252, 0.85);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.splat-mode-btn.on {
  background: #7C5CFC;
  color: #fff;
  border-color: #7C5CFC;
}
.splat-mode-btn:active { transform: scale(0.94); }

.emoji.abc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 18px 12px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.abc-letter {
  font-family: 'Baloo 2', 'Fredoka One', sans-serif;
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
}


/* ===== css/games/stack-smash.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. calc() rather than max() so
   stacked HUD rows keep their spacing relative to each other. */
/* ===== Stack It Up Game ===== */
#stackGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF8E7 0%, #F0E6FF 50%, #E0F7FA 100%);
}

.stack-camera {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
  z-index: 10;
}

.stack-tower {
  position: absolute;
  inset: 0;
  transform-origin: center bottom;
}

.stack-score {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: rgba(124, 92, 252, 0.85);
  z-index: 200;
  pointer-events: none;
}

.stack-block {
  position: absolute;
  border-radius: 10px;
  z-index: 110;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.stack-block.active {
  box-shadow: 0 2px 12px rgba(124, 92, 252, 0.3), 0 0 20px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

.stack-block.perfect-flash {
  animation: perfectGlow 0.5s ease-out;
}

@keyframes perfectGlow {
  0%   { box-shadow: 0 0 20px #FFD700, 0 0 40px #FFD700, inset 0 2px 4px rgba(255,255,255,0.3); }
  100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.3); }
}

.stack-block.streak-flash {
  animation: streakRainbow 0.6s ease-out;
}

@keyframes streakRainbow {
  0%   { box-shadow: 0 0 20px #FF6B8A, 0 0 40px #FFB347; }
  33%  { box-shadow: 0 0 20px #7C5CFC, 0 0 40px #4ECDC4; }
  66%  { box-shadow: 0 0 20px #FFB347, 0 0 40px #FF6B8A; }
  100% { box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 2px 4px rgba(255,255,255,0.3); }
}

.stack-danger-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  box-shadow: inset 0 0 80px rgba(255, 80, 80, var(--danger-opacity, 0));
  transition: box-shadow 0.3s ease;
}

.stack-crane {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  z-index: 120;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.stack-cable {
  position: absolute;
  inset: 0;
  z-index: 109;
  pointer-events: none;
  overflow: visible;
}

.stack-ball {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 50px;
  line-height: 1;
  z-index: 109;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.stack-celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(255, 248, 231, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.stack-celebrate.show {
  opacity: 1;
  pointer-events: auto;
}

.stack-endcard {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  animation: stackEndcardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes stackEndcardIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.stack-endcard-emoji {
  font-size: clamp(4rem, 15vw, 7rem);
  line-height: 1;
}

.stack-endcard-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: #FF6B8A;
}

.stack-endcard-stats {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: rgba(124, 92, 252, 0.85);
}

.stack-endcard-best {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #FFB347;
}

.stack-endcard-hint {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: #999;
  font-weight: 600;
}

.stack-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 250;
  animation: confettiFall var(--fall-dur) linear forwards;
}

@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(var(--fall-dist)) rotate(var(--fall-rot)); opacity: 0; }
}

/* ===== Stadium Audience ===== */
.stack-audience {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.8;
}

.audience-emoji {
  position: absolute;
  transform: translateX(-50%);
  line-height: 1;
}

/* Ambient rows: always gentle idle, ignore reaction classes */
.audience-emoji.ambient-row {
  animation: audienceIdle 2.5s ease-in-out infinite !important;
  animation-delay: var(--idle-offset) !important;
}

/* --- Idle: gentle staggered bobbing (reactive rows) --- */
.audience-idle .audience-emoji.reactive-row {
  animation: audienceIdle 2s ease-in-out infinite;
  animation-delay: var(--idle-offset);
}
@keyframes audienceIdle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-4px); }
}

/* --- Cheer: quick bounce --- */
.audience-cheer .audience-emoji.reactive-row {
  animation: audienceCheer 0.35s ease-out;
  animation-delay: var(--audience-delay);
}
@keyframes audienceCheer {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  40%  { transform: translateX(-50%) translateY(-14px) scale(1.15); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* --- Wild: big bounce + wiggle (perfect placement) --- */
.audience-wild .audience-emoji.reactive-row {
  animation: audienceWild 0.5s ease-out;
  animation-delay: var(--audience-delay);
}
@keyframes audienceWild {
  0%   { transform: translateX(-50%) translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateX(-50%) translateY(-20px) rotate(-12deg) scale(1.25); }
  50%  { transform: translateX(-50%) translateY(-10px) rotate(12deg) scale(1.15); }
  75%  { transform: translateX(-50%) translateY(-16px) rotate(-6deg) scale(1.2); }
  100% { transform: translateX(-50%) translateY(0) rotate(0deg) scale(1); }
}

/* --- Wave: mexican wave (staggered delays) --- */
.audience-wave .audience-emoji.reactive-row {
  animation: audienceWave 0.6s ease-out;
  animation-delay: var(--audience-delay);
}
@keyframes audienceWave {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  30%  { transform: translateX(-50%) translateY(-24px) scale(1.3); }
  60%  { transform: translateX(-50%) translateY(-8px) scale(1.05); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}

/* --- Worry: shrink + shake --- */
.audience-worry .audience-emoji.reactive-row {
  animation: audienceWorry 0.4s ease-out infinite;
  animation-delay: var(--audience-delay);
}
@keyframes audienceWorry {
  0%, 100% { transform: translateX(-50%) translateY(4px) scale(0.85); }
  25%      { transform: translateX(-52%) translateY(4px) scale(0.85); }
  75%      { transform: translateX(-48%) translateY(4px) scale(0.85); }
}

/* --- Gasp: jump back + scatter --- */
.audience-gasp .audience-emoji.reactive-row {
  animation: audienceGasp 0.6s ease-out forwards;
}
@keyframes audienceGasp {
  0%   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
  30%  { transform: translateX(-50%) translateY(-18px) scale(1.3); opacity: 1; }
  100% { transform: translateX(-50%) translateY(12px) scale(0.7); opacity: 0.5; }
}

/* --- Party: continuous bouncing (win) --- */
.audience-party .audience-emoji.reactive-row {
  animation: audienceParty 0.5s ease-in-out infinite;
  animation-delay: var(--audience-delay);
}
@keyframes audienceParty {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg) scale(1); }
  25%      { transform: translateX(-50%) translateY(-18px) rotate(-15deg) scale(1.2); }
  75%      { transform: translateX(-50%) translateY(-12px) rotate(15deg) scale(1.15); }
}

/* ===== High Score Display ===== */
.stack-best {
  position: fixed;
  /* sit below the score, whose font grows to 2.5rem on wide screens */
  top: calc(16px + clamp(1.9rem, 5vw, 3.1rem) + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.8rem, 2vw, 1.1rem);
  color: rgba(124, 92, 252, 0.4);
  z-index: 200;
  pointer-events: none;
}
.stack-best.new-best {
  animation: newBestPulse 0.5s ease-out;
  color: #FFD700;
}
@keyframes newBestPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); color: #FFD700; }
  100% { transform: scale(1); }
}


/* ===== css/games/spell-it-out.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. calc() rather than max() so
   stacked HUD rows keep their spacing relative to each other. */
/* ===== Spell It Out Game ===== */
#spellGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF8E7 0%, #F0E6FF 50%, #E0F7FA 100%);
}

/* ===== Lives (top-right, above score) ===== */
.spell-lives {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  z-index: 200;
  pointer-events: none;
  display: flex;
  gap: 4px;
}

.spell-heart {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.spell-heart .emoji-img {
  width: clamp(1.2rem, 3vw, 1.6rem);
  height: clamp(1.2rem, 3vw, 1.6rem);
}

.spell-heart.lost {
  opacity: 0.4;
  filter: grayscale(1);
}

.spell-heart-breaking {
  animation: heartBreak 0.5s ease-out forwards;
}

@keyframes heartBreak {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ===== Score Bar (top-right, below lives) ===== */
.spell-score-bar {
  position: fixed;
  top: calc(44px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  color: rgba(124, 92, 252, 0.85);
  z-index: 200;
  pointer-events: none;
}

/* ===== Stage (centered area) ===== */
.spell-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;
  z-index: 110;
  width: 95%;
  max-width: 900px;
}

/* ===== Emoji Display ===== */
.spell-emoji {
  font-size: clamp(100px, 28vw, 220px);
  width: clamp(100px, 28vw, 220px);
  height: clamp(100px, 28vw, 220px);
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

.spell-emoji-enter {
  animation: emojiEntrance 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes emojiEntrance {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Letter Tiles ===== */
.spell-tiles {
  display: flex;
  gap: clamp(6px, 1.5vw, 10px);
  justify-content: center;
  width: 100%;
}

.spell-tiles-exit {
  animation: slideOutLeft 0.3s ease-in forwards;
}

.spell-tiles-enter .spell-tile {
  animation: tilePopIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

@keyframes slideOutLeft {
  0%   { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-60px); opacity: 0; }
}

@keyframes tilePopIn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.spell-tile {
  width: clamp(42px, 11vw, 72px);
  min-width: 0;
  height: clamp(42px, 11vw, 72px);
  flex-shrink: 1;
  aspect-ratio: 1;
  border-radius: clamp(8px, 2vw, 14px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.4rem, 5vw, 2.6rem);
  color: #fff;
  background: #7C5CFC;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-transform: uppercase;
}

/* Blank tile (the missing letter) */
.spell-tile.spell-blank {
  background: rgba(124, 92, 252, 0.15);
  border: 3px dashed rgba(124, 92, 252, 0.5);
  color: rgba(124, 92, 252, 0.4);
  box-shadow: none;
  animation: pulseBlank 1.5s ease-in-out infinite;
}

@keyframes pulseBlank {
  0%, 100% { transform: scale(1); border-color: rgba(124, 92, 252, 0.4); }
  50%      { transform: scale(1.06); border-color: rgba(124, 92, 252, 0.7); }
}

/* Correct answer */
.spell-tile.spell-correct {
  animation: tileCorrectPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  box-shadow: 0 0 20px rgba(78, 205, 196, 0.4), 0 3px 10px rgba(0, 0, 0, 0.12);
}

@keyframes tileCorrectPop {
  0%   { transform: scale(0.8); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* Wrong answer */
.spell-tile.spell-wrong {
  background: #FF6B8A !important;
  animation: tileShake 0.4s ease-out;
}

@keyframes tileShake {
  0%, 100% { transform: translateX(0); }
  15%      { transform: translateX(-8px); }
  30%      { transform: translateX(8px); }
  45%      { transform: translateX(-5px); }
  60%      { transform: translateX(5px); }
  75%      { transform: translateX(-2px); }
  90%      { transform: translateX(2px); }
}

/* Revealed correct letter (after wrong guess) */
.spell-tile.spell-revealed {
  background: #845EC2 !important;
  animation: tileReveal 0.4s ease-out forwards;
}

@keyframes tileReveal {
  0%   { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Feedback Messages ===== */
.spell-feedback {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  min-height: 2em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.spell-feedback-show {
  opacity: 1;
}

.spell-feedback-correct {
  color: #4ECDC4;
}

.spell-feedback-streak {
  color: #FFB347;
  animation: feedbackPulse 0.5s ease-out;
}

.spell-feedback-wrong {
  color: #FF6B8A;
}

@keyframes feedbackPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ===== Mobile Keyboard ===== */
.spell-keyboard {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px max(4px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
  z-index: 300;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

@media (pointer: coarse) {
  .spell-keyboard {
    display: block;
  }
  .spell-stage {
    transform: translate(-50%, -65%);
  }
}

/* Short landscape screens (phones, small tablets): shrink the stage so the
   emoji + tiles clear the fixed-bottom on-screen keyboard */
@media (pointer: coarse) and (max-height: 500px) {
  /* Four rows of keys are taller than the old three, so trim them in landscape */
  .spell-key { min-height: 38px; max-width: 56px; }
  .spell-key-row { gap: 4px; margin-bottom: 4px; }
  .spell-keyboard { padding: 5px 4px 6px; }
  .spell-stage {
    gap: 0.8rem;
    top: 42%;
    transform: translate(-50%, -60%);
  }
  .spell-emoji {
    font-size: clamp(56px, 18vh, 110px);
    width: clamp(56px, 18vh, 110px);
    height: clamp(56px, 18vh, 110px);
  }
}

.spell-key-row {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-bottom: 5px;
}

.spell-key {
  /* Seven keys per row, not ten: at 390px that is ~51px each, clearing the
     44px minimum touch target in both directions. The old QWERTY rows of ten
     could only ever be ~35px wide however the gaps were tuned. */
  min-width: 44px;
  min-height: 48px;
  flex: 1;
  max-width: 64px;
  border: none;
  border-radius: 8px;
  background: rgba(124, 92, 252, 0.12);
  color: #333;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.1s ease;
}

.spell-key:active {
  background: rgba(124, 92, 252, 0.3);
  transform: scale(0.92);
}

.spell-key-disabled {
  opacity: 0.25;
  pointer-events: none;
}

/* ===== Celebrate / End Card ===== */
.spell-celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(255, 248, 231, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.spell-celebrate.show {
  opacity: 1;
  pointer-events: auto;
}

.spell-endcard {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  animation: endcardEntrance 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes endcardEntrance {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.spell-endcard-emoji {
  font-size: clamp(4rem, 15vw, 7rem);
  line-height: 1;
}

.spell-endcard-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: #333;
}

.spell-endcard-score {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  color: rgba(124, 92, 252, 0.85);
}

.spell-endcard-best {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #FFB347;
  animation: feedbackPulse 0.6s ease-out;
}

.spell-endcard-best-small {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: #999;
  font-weight: 600;
}

.spell-endcard-restart {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: #aaa;
  margin-top: 0.8rem;
  font-weight: 600;
}

/* ===== Win Confetti ===== */
.spell-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 350;
  animation: spellConfettiFall var(--fall-dur) linear forwards;
}

@keyframes spellConfettiFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  50%  { transform: translateY(calc(var(--fall-dist) * 0.5)) translateX(var(--sway)) rotate(180deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(var(--fall-dist)) translateX(calc(var(--sway) * -0.5)) rotate(var(--fall-rot)); opacity: 0; }
}

/* ===== Streak Celebration Effects ===== */

/* Screen flash pulse (level 2+) */
.spell-streak-flash {
  position: fixed;
  inset: 0;
  z-index: 340;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 179, 71, 0.25), rgba(124, 92, 252, 0.1), transparent 70%);
  animation: streakFlash 0.6s ease-out forwards;
}

.spell-streak-flash-big {
  background: radial-gradient(circle at center, rgba(255, 179, 71, 0.35), rgba(255, 107, 138, 0.15), rgba(124, 92, 252, 0.1), transparent 70%);
  animation: streakFlashBig 0.8s ease-out forwards;
}

@keyframes streakFlash {
  0%   { opacity: 0; transform: scale(0.8); }
  30%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.2); }
}

@keyframes streakFlashBig {
  0%   { opacity: 0; transform: scale(0.6); }
  20%  { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.7; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* Emoji ring burst (level 3) */
.spell-streak-ring {
  position: fixed;
  pointer-events: none;
  z-index: 360;
  animation: streakRingBurst 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes streakRingBurst {
  0%   { transform: translate(0, 0) scale(0) rotate(0deg); opacity: 1; }
  40%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1.3) rotate(var(--tr)); opacity: 0; }
}

/* ===== Play Hint ===== */
#spellHint {
  z-index: 200;
  top: auto;
  bottom: 12%;
  transform: translateX(-50%);
}


/* ===== css/games/memory-match.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. calc() rather than max() so
   stacked HUD rows keep their spacing relative to each other. */
/* ===== Memory Match Game ===== */

#memoryGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #E8F8F5 0%, #F0E6FF 50%, #E0F7FA 100%);
  cursor: url("../assets/emoji/cursors/hand-open-32.png") 16 16, auto !important;
}

/* ===== Difficulty Picker ===== */

.memory-difficulty {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 200;
  gap: 2rem;
}

.memory-diff-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  color: #333;
}

.memory-diff-options {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.memory-diff-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.5rem 2rem;
  border: 3px solid rgba(124, 107, 191, 0.2);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 140px;
  font-family: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .memory-diff-btn:hover {
    transform: scale(1.06) translateY(-3px);
    box-shadow: 0 8px 25px rgba(124, 107, 191, 0.2);
    border-color: var(--color-primary);
  }
}

.memory-diff-btn:active {
  transform: scale(0.96);
}

.memory-diff-grid {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--color-primary);
}

.memory-diff-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: #666;
}

.memory-diff-best {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #aaa;
  min-height: 1em;
}

/* ===== HUD ===== */

.memory-hud {
  display: none;
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  z-index: 200;
  pointer-events: none;
  gap: 0.6rem;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.8rem, 2.2vw, 1.1rem);
  color: rgba(124, 107, 191, 0.85);
}

.memory-hud-btn {
  pointer-events: auto;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.7);
  border: none;
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.memory-hud-btn:active { transform: scale(0.94); background: rgba(255, 255, 255, 0.95); }

.memory-hud span {
  background: rgba(255, 255, 255, 0.5);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ===== Card Grid ===== */

.memory-board {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-template-rows: repeat(var(--rows), 1fr);
  gap: clamp(6px, 1.5vw, 12px);
  z-index: 110;
  padding: 1rem;
}

/* Board width is set inline by JS based on viewport */

/* ===== Individual Cards ===== */

.memory-card {
  aspect-ratio: 1;
  perspective: 600px;
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
  -webkit-tap-highlight-color: transparent;
  opacity: 0;
}

.memory-dealt .memory-card {
  animation: memoryDealIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes memoryDealIn {
  0%   { transform: scale(0) rotateY(180deg); opacity: 0; }
  60%  { transform: scale(1.05) rotateY(10deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.memory-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
  border-radius: clamp(10px, 2vw, 16px);
}

.memory-card.flipped .memory-card-inner {
  transform: rotateY(180deg);
}

/* Card Back (purple, playing-card style) */
.memory-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: clamp(10px, 2vw, 16px);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.04) 0px,
      rgba(255, 255, 255, 0.04) 2px,
      transparent 2px,
      transparent 8px
    ),
    linear-gradient(160deg, #8B7BD4 0%, #6A5AAE 50%, #7C6BBF 100%);
  box-shadow:
    0 3px 10px rgba(0, 0, 0, 0.18),
    inset 0 1px 3px rgba(255, 255, 255, 0.2),
    inset 0 -1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Inner border frame */
.memory-card-back::before {
  content: '';
  position: absolute;
  inset: clamp(3px, 0.6vw, 6px);
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: clamp(7px, 1.5vw, 12px);
  pointer-events: none;
}

/* Center star decoration */
.memory-card-back::after {
  content: '\2726';
  font-size: clamp(1rem, 4vw, 2.4rem);
  color: rgba(255, 255, 255, 0.22);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

/* Card Front (white with emoji) */
.memory-card-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: clamp(10px, 2vw, 16px);
  background: #fff;
  border: 2px solid rgba(124, 107, 191, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(1.8rem, 6vw, 3rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  container-type: inline-size;
}

.memory-card-front span {
  font-size: 55cqi;
  line-height: 1;
}

/* Matched state */
.memory-card.matched .memory-card-front {
  background: #FFFBF0;
  box-shadow: 0 0 12px rgba(255, 179, 71, 0.3);
}

.memory-card.matched {
  pointer-events: none;
}

/* ===== Win Pulse ===== */

.memory-win-pulse {
  animation: memoryWinPulse 0.5s ease-out !important;
  opacity: 1 !important;
}

@keyframes memoryWinPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ===== Confetti ===== */

.memory-confetti {
  position: fixed;
  pointer-events: none;
  z-index: 350;
  animation: memoryConfettiFall var(--fall-dur) linear forwards;
}

@keyframes memoryConfettiFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  50%  { transform: translateY(calc(var(--fall-dist) * 0.5)) translateX(var(--sway)) rotate(180deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(var(--fall-dist)) translateX(calc(var(--sway) * -0.5)) rotate(var(--fall-rot)); opacity: 0; }
}

/* ===== Win Overlay ===== */

.memory-celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(232, 248, 245, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.memory-celebrate.show {
  opacity: 1;
  pointer-events: auto;
}

.memory-endcard {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  animation: memoryEndcardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes memoryEndcardIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.memory-endcard-emoji {
  font-size: clamp(4rem, 15vw, 7rem);
  line-height: 1;
}

.memory-endcard-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: #333;
}

.memory-endcard-stats {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: rgba(124, 107, 191, 0.85);
  display: flex;
  gap: 1.5rem;
}

.memory-endcard-best {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #FFB347;
}

.memory-endcard-best-small {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: #999;
  font-weight: 600;
}

.memory-endcard-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.memory-endcard-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5em 1.5em;
  border: none;
  border-radius: 50px;
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.memory-btn-again {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 15px rgba(124, 107, 191, 0.25);
}

.memory-btn-diff {
  background: transparent;
  color: #666;
  border: 2px solid #ddd;
}

@media (hover: hover) and (pointer: fine) {
  .memory-endcard-btn:hover {
    transform: scale(1.05) translateY(-2px);
  }
}

.memory-endcard-btn:active {
  transform: scale(0.95);
}

/* ===== Responsive ===== */

@media (max-width: 480px) {
  .memory-board {
    padding: 0.5rem;
  }
  .memory-diff-btn {
    padding: 1rem 1.4rem;
    min-width: 100px;
  }
  .memory-hud {
    top: 10px;
    right: 12px;
    gap: 0.4rem;
  }
  .memory-hud span {
    padding: 3px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-card,
  .memory-dealt .memory-card {
    animation: none;
    opacity: 1;
  }
  .memory-card-inner {
    transition: none;
  }
  .memory-win-pulse {
    animation: none !important;
  }
  .memory-confetti {
    animation: none;
    display: none;
  }
}


/* ===== css/games/balloon-float.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. calc() rather than max() so
   stacked HUD rows keep their spacing relative to each other. */
/* ===== Balloon Float Game ===== */

#balloonGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: none !important;
  background: #C8E4D8;
}

/* ===== Canvas ===== */

#balloonCanvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: none !important;
}

#balloonGame * {
  cursor: none !important;
}

/* ===== HUD ===== */

.balloon-hud {
  display: none;
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  z-index: 200;
  pointer-events: none;
  gap: 0.6rem;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.8rem, 2.2vw, 1.1rem);
  color: rgba(107, 175, 207, 0.9);
}

.balloon-hud span {
  background: rgba(255, 255, 255, 0.6);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ===== Lives Hearts ===== */

.balloon-lives {
  position: fixed;
  top: calc(48px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  z-index: 200;
  pointer-events: none;
  display: none;
  gap: 4px;
}

.balloon-lives.active {
  display: flex;
}

.balloon-heart {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.balloon-heart .emoji-img {
  width: clamp(1.2rem, 3vw, 1.6rem);
  height: clamp(1.2rem, 3vw, 1.6rem);
}

.balloon-heart.lost {
  opacity: 0.4;
  filter: grayscale(1);
}

.balloon-heart-breaking {
  animation: balloonHeartBreak 0.5s ease-out forwards;
}

@keyframes balloonHeartBreak {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ===== Hint ===== */

.balloon-hint {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: rgba(107, 175, 207, 0.85);
  z-index: 200;
  pointer-events: none;
  transition: opacity 0.5s ease;
  text-align: center;
}

/* ===== Game Over Overlay ===== */

.balloon-celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(200, 225, 240, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.balloon-celebrate.show {
  opacity: 1;
  pointer-events: auto;
}

.balloon-endcard {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  animation: balloonEndcardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes balloonEndcardIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.balloon-endcard-emoji {
  font-size: clamp(4rem, 15vw, 7rem);
  line-height: 1;
}

.balloon-endcard-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: #333;
}

.balloon-endcard-stats {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: rgba(107, 175, 207, 0.9);
  display: flex;
  gap: 1.5rem;
}

.balloon-endcard-best {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #FFB347;
}

.balloon-endcard-best-small {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: #999;
  font-weight: 600;
}

.balloon-endcard-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.balloon-endcard-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5em 1.5em;
  border: none;
  border-radius: 50px;
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.balloon-btn-again {
  background: #6BAFCF;
  color: #fff;
  box-shadow: 0 4px 15px rgba(107, 175, 207, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  .balloon-endcard-btn:hover {
    transform: scale(1.05) translateY(-2px);
  }
}

.balloon-endcard-btn:active {
  transform: scale(0.95);
}

/* ===== Power-Up HUD ===== */

.balloon-powerup-indicator {
  display: none;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.45);
  padding: 4px 10px;
  border-radius: 20px;
  min-width: 90px;
}

.balloon-powerup-indicator.active {
  display: flex;
}

.balloon-pu-icon {
  font-size: 1.2em;
  line-height: 1;
}
.balloon-pu-icon .emoji-img {
  width: 1.2em;
  height: 1.2em;
}

.balloon-pu-bar-bg {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  overflow: hidden;
  min-width: 50px;
}

.balloon-pu-bar {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  background: #fff;
  transition: width 0.1s linear, background-color 0.3s ease;
}

.balloon-shield-indicator {
  display: none;
  background: rgba(100, 180, 255, 0.5) !important;
  font-size: 1.1em;
  animation: shieldPulse 1.5s ease-in-out infinite;
}

.balloon-shield-indicator.active {
  display: inline-block;
}

@keyframes shieldPulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50% { transform: scale(1.15); opacity: 1; }
}

/* ===== Responsive ===== */

@media (max-width: 480px) {
  .balloon-hud {
    top: 10px;
    right: 12px;
    gap: 0.4rem;
  }
  .balloon-hud span {
    padding: 3px 8px;
  }
  .balloon-lives {
    top: 44px;
    right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .balloon-endcard {
    animation: none;
    opacity: 1;
  }
}


/* ===== css/games/rocket-ride.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. calc() rather than max() so
   stacked HUD rows keep their spacing relative to each other. */
/* ===== Rocket Ride Game ===== */

#rocketGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: none !important;
  background: #0B0B2A;
}

/* ===== Canvas ===== */

#rocketCanvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: none !important;
}

#rocketGame * {
  cursor: none !important;
}

/* ===== Lives ===== */

.rocket-lives {
  position: fixed;
  top: calc(48px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  z-index: 200;
  pointer-events: none;
  display: none;
  gap: 4px;
}

.rocket-lives.active {
  display: flex;
}

.rocket-heart {
  display: inline-block;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.rocket-heart .emoji-img {
  width: clamp(1.2rem, 3vw, 1.6rem);
  height: clamp(1.2rem, 3vw, 1.6rem);
}

.rocket-heart.lost {
  opacity: 0.4;
  filter: grayscale(1);
}

.rocket-heart-breaking {
  animation: rocketHeartBreak 0.5s ease-out forwards;
}

@keyframes rocketHeartBreak {
  0%   { transform: scale(1); opacity: 1; }
  30%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* ===== HUD ===== */

.rocket-hud {
  display: none;
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  z-index: 200;
  pointer-events: none;
  gap: 0.6rem;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.8rem, 2.2vw, 1.1rem);
  color: rgba(180, 200, 255, 0.9);
}

.rocket-hud span {
  background: rgba(255, 255, 255, 0.12);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ===== Hint ===== */

.rocket-hint {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 20px rgba(0, 0, 0, 0.2);
  z-index: 200;
  pointer-events: none;
  transition: opacity 0.5s ease;
  text-align: center;
}

/* ===== Game Over Overlay ===== */

.rocket-celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(10, 10, 40, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rocket-celebrate.show {
  opacity: 1;
  pointer-events: auto;
}

.rocket-endcard {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  animation: rocketEndcardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes rocketEndcardIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.rocket-endcard-emoji {
  font-size: clamp(4rem, 15vw, 7rem);
  line-height: 1;
}

.rocket-endcard-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.8rem, 6vw, 3rem);
  color: #fff;
}

.rocket-endcard-stats {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: rgba(180, 200, 255, 0.9);
  display: flex;
  gap: 1.5rem;
}

.rocket-endcard-best {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: #FFB347;
}

.rocket-endcard-best-small {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: rgba(180, 200, 255, 0.5);
  font-weight: 600;
}

.rocket-endcard-actions {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.rocket-endcard-btn {
  font-family: 'Nunito', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5em 1.5em;
  border: none;
  border-radius: 50px;
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rocket-btn-again {
  background: #5B4DA0;
  color: #fff;
  box-shadow: 0 4px 15px rgba(91, 77, 160, 0.3);
}

@media (hover: hover) and (pointer: fine) {
  .rocket-endcard-btn:hover {
    transform: scale(1.05) translateY(-2px);
  }
}

.rocket-endcard-btn:active {
  transform: scale(0.95);
}

/* ===== Responsive ===== */

@media (max-width: 480px) {
  .rocket-hud {
    top: 10px;
    right: 12px;
    gap: 0.4rem;
  }
  .rocket-hud span {
    padding: 3px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rocket-endcard {
    animation: none;
    opacity: 1;
  }
}


/* ===== css/games/ball-bonanza.css ===== */
#ballBonanzaGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF5E6 0%, #FFE8D0 50%, #FFF0DB 100%);
}

/* ---- Entities ---- */
.bb-ball, .bb-char {
  position: absolute;
  left: 0; top: 0;
  user-select: none;
  pointer-events: none;
  will-change: transform;
}
.bb-ball { font-size: 50px; line-height: 1; z-index: 10; }
.bb-char { font-size: 60px; line-height: 1; z-index: 5; }
.bb-inner {
  display: inline-block;
  transform-origin: center center;
}
/* Emoji <img> uses 1em to match parent's font-size; JS overrides for dynamic sizes */
.bb-inner .emoji-img {
  display: block;
  width: 1em;
  height: 1em;
}


/* ---- Glow on hit ---- */
.bb-char.bb-glow .bb-inner { filter: brightness(1.8); }

/* ---- Reaction: Squash & Stretch ---- */
.bb-react-squash .bb-inner { animation: bbSquash 0.5s ease-out; }
@keyframes bbSquash {
  0% { transform: scaleY(1) scaleX(1); }
  20% { transform: scaleY(0.2) scaleX(1.4); }
  45% { transform: scaleY(1.2) scaleX(0.85); }
  65% { transform: scaleY(0.95) scaleX(1.05); }
  100% { transform: scaleY(1) scaleX(1); }
}

/* ---- Reaction: Spin ---- */
.bb-react-spin .bb-inner { animation: bbSpin 0.8s ease-out; }
@keyframes bbSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(1080deg); }
}

/* ---- Reaction: Bounce ---- */
.bb-react-bounce .bb-inner { animation: bbBounce 0.8s ease-out; }
@keyframes bbBounce {
  0% { transform: translateY(0); }
  15% { transform: translateY(-22px); }
  30% { transform: translateY(0); }
  45% { transform: translateY(-13px); }
  60% { transform: translateY(0); }
  75% { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* ---- Reaction: Flip ---- */
.bb-react-flip .bb-inner { animation: bbFlip 1.2s ease-in-out; }
@keyframes bbFlip {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(180deg); }
  80% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/* ---- Reaction: Shock (eyes pop) ---- */
.bb-react-shock .bb-inner { animation: bbShock 0.4s ease-out; }
@keyframes bbShock {
  0% { transform: scale(1); }
  25% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---- Recovery wobble ---- */
.bb-wobble .bb-inner { animation: bbWobble 0.3s ease-out; }
@keyframes bbWobble {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(6deg); }
  50% { transform: rotate(-5deg); }
  75% { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

/* ---- Dizzy Stars ---- */
.bb-stars { position: absolute; top: 0; left: 50%; width: 0; height: 0; pointer-events: none; }
.bb-star {
  position: absolute;
  font-size: 14px;
  animation: bbStarOrbit 0.6s linear infinite;
}
.bb-star .emoji-img {
  width: 14px;
  height: 14px;
}
@keyframes bbStarOrbit {
  from { transform: rotate(var(--ss)) translateX(28px) rotate(calc(-1 * var(--ss))); }
  to   { transform: rotate(calc(var(--ss) + 360deg)) translateX(28px) rotate(calc(-1 * (var(--ss) + 360deg))); }
}

/* ---- Collision Flash ---- */
.bb-flash {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  pointer-events: none;
  z-index: 20;
  animation: bbFlashAnim 0.12s ease-out forwards;
  transform: translate(-50%, -50%);
}
@keyframes bbFlashAnim {
  from { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0; transform: translate(-50%,-50%) scale(2.5); }
}

/* ---- Impact Stars ---- */
.bb-impact-star {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 20;
  animation: bbStarBurst 0.35s ease-out forwards;
}
.bb-impact-star .emoji-img {
  width: 14px;
  height: 14px;
}
@keyframes bbStarBurst {
  from { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  to   { opacity: 0; transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(0.4); }
}

/* ---- Bonus / Mega text ---- */
.bb-event-text {
  position: absolute;
  font-family: 'Fredoka One', cursive;
  font-size: 52px;
  color: #FF6B8A;
  text-shadow: 2px 2px 0 #FFC75F, -1px -1px 0 #fff;
  pointer-events: none;
  z-index: 100;
  animation: bbTextPop 1s ease-out forwards;
}
@keyframes bbTextPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(0.4); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.25); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1) translateY(-40px); }
}

/* ---- Screen Shake ---- */
@keyframes bbShake {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-3px,2px); }
  50%  { transform: translate(2px,-3px); }
  75%  { transform: translate(-2px,1px); }
  100% { transform: translate(0,0); }
}
.bb-shaking { animation: bbShake 0.2s ease-in-out; }

/* ---- Fidget: hop ---- */
.bb-fidget .bb-inner { animation: bbHop 0.3s ease-out; }
@keyframes bbHop {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* ---- Attention seeking ---- */
.bb-attention .bb-inner { animation: bbAttention 0.8s ease-in-out; }
@keyframes bbAttention {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-18px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-18px); }
  80% { transform: translateY(0); }
}

/* ---- Collectibles ---- */
.bb-collectible {
  position: absolute;
  left: 0; top: 0;
  user-select: none;
  pointer-events: none;
  will-change: transform;
  font-size: 38px;
  line-height: 1;
  z-index: 15;
  animation: bbCollectFloat 2s ease-in-out infinite;
}
.bb-collectible .emoji-img {
  width: 38px;
  height: 38px;
}
/* Golden aura circle behind collectible (like balloon game) */
.bb-collectible::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: bbAuraPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
/* Color-coded auras per type */
.bb-collectible[data-type="star"]::before {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.45) 0%, rgba(255, 215, 0, 0) 70%);
}
.bb-collectible[data-type="clock"]::before {
  background: radial-gradient(circle, rgba(100, 180, 255, 0.45) 0%, rgba(100, 180, 255, 0) 70%);
}
.bb-collectible[data-type="circus"]::before {
  background: radial-gradient(circle, rgba(255, 107, 138, 0.45) 0%, rgba(255, 107, 138, 0) 70%);
}
@keyframes bbAuraPulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.3); }
}

.bb-collectible .bb-inner {
  display: inline-block;
  transform-origin: center center;
  animation: bbCollectPulse 1.2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}
@keyframes bbCollectFloat {
  0%, 100% { margin-top: 0; }
  50%      { margin-top: -6px; }
}
@keyframes bbCollectPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Pickup burst */
.bb-pickup-burst {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  animation: bbPickupBurst 0.5s ease-out forwards;
  font-size: 28px;
}
.bb-pickup-burst .emoji-img {
  width: 28px;
  height: 28px;
}
@keyframes bbPickupBurst {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(0.6); }
  40%  { opacity: 1; transform: translate(-50%,-50%) scale(1.6); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2) translateY(-20px); }
}

/* Speed-up tint overlay */
.bb-speed-tint {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(255,220,50,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  animation: bbSpeedPulse 0.6s ease-in-out infinite alternate;
}
@keyframes bbSpeedPulse {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}

/* ---- Subtle background pattern ---- */
#ballBonanzaGame::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}


/* ===== css/games/tiny-town.css ===== */
/* =========================================================
 *  Tiny Town — Village Exploration Game
 * ========================================================= */

#tinyTownGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* Dark blue matches the character-select overlay so no green flash on load */
  background: #142850;
  margin: 0;
  padding: 0;
}

#tinyTownGame canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  cursor: none;
}


/* ===== css/games/melody-maker.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. calc() rather than max() so
   stacked HUD rows keep their spacing relative to each other. */
/* =========================================================
 *  Melody Maker — Piano & Melody Learning Game
 * ========================================================= */

#melodyGame {
  display: none;
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #FFF8E7 0%, #FDE8F0 50%, #E8F0FE 100%);
  font-family: 'Quicksand', sans-serif;
  cursor: url("../assets/emoji/cursors/hand-open-32.png") 16 16, auto;
}

#melodyGame button,
#melodyGame .melody-key,
#melodyGame .melody-level-tile:not(.locked) {
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
}

/* ===== Mode Selector ===== */

.melody-mode-select {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 200;
  gap: 2rem;
}

.melody-mode-select.active { display: flex; }

/* ===== Level Select ===== */

.melody-level-select {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 200;
  background: linear-gradient(135deg, #FFF8E7 0%, #FDE8F0 50%, #E8F0FE 100%);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.melody-level-select.active { display: block; }

.melody-level-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(8px, 2vw, 16px) clamp(12px, 3vw, 24px);
  padding-left: calc(clamp(12px, 3vw, 24px) + 60px + env(safe-area-inset-left));   /* clear the fixed exit button */
  z-index: 210;
  background: linear-gradient(135deg, #FFF8E7 0%, #FDE8F0 50%, #E8F0FE 100%);
}

.melody-level-back {
  background: rgba(255,255,255,0.7);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}

/* :hover only on hover-capable devices — iOS keeps it stuck after tap */
@media (hover: hover) and (pointer: fine) {
  .melody-level-back:hover { transform: scale(1.1); background: rgba(255,255,255,0.9); }
}
.melody-level-back:active { transform: scale(0.95); }

.melody-level-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.3rem, 4vw, 2rem);
  color: #333;
}

/* Grid — normal flow, centered with margin, scrollable parent */
.melody-level-grid {
  display: none;
  /* display:grid + width + cols + gap set inline by JS */
  margin: 0 auto;
  padding: 0 1rem 1rem;
}

.melody-level-tile {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: clamp(10px, 2vw, 16px);
  border: 2px solid rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: clamp(4px, 1vw, 8px);
  transition: transform 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .melody-level-tile:hover:not(.locked) {
    transform: scale(1.06);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
}

.melody-level-tile:active:not(.locked) { transform: scale(0.96); }

/* Locked */
.melody-level-tile.locked {
  background: rgba(200,200,200,0.35);
  opacity: 0.55;
  cursor: not-allowed;
}

.melody-level-lock {
  width: clamp(16px, 3vw, 24px);
  height: clamp(16px, 3vw, 24px);
}

/* Completed */
.melody-level-tile.completed {
  background: linear-gradient(135deg, rgba(46,204,113,0.15), rgba(39,174,96,0.08));
  border-color: rgba(46,204,113,0.3);
}

.melody-level-star {
  width: clamp(16px, 3vw, 22px);
  height: clamp(16px, 3vw, 22px);
}

/* Current (unlocked, not yet completed) — pulsing gold glow */
.melody-level-tile.current {
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,165,0,0.1));
  border-color: rgba(255,165,0,0.4);
  box-shadow: 0 0 12px rgba(255,165,0,0.25);
  animation: levelPulse 2s ease-in-out infinite;
}

@keyframes levelPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(255,165,0,0.25); }
  50% { box-shadow: 0 0 20px rgba(255,165,0,0.5); }
}

.melody-level-num {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.85rem, 2.5vw, 1.2rem);
  color: #555;
}

.melody-level-emoji {
  width: clamp(20px, 4vw, 32px);
  height: clamp(20px, 4vw, 32px);
}

.melody-level-name {
  font-size: clamp(0.5rem, 1.3vw, 0.7rem);
  color: #888;
  text-align: center;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.melody-mode-title {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: #444;
  text-align: center;
  padding: 0 1rem;
}

.melody-mode-options {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 1rem;
}

.melody-mode-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.8rem 2.2rem;
  border: 3px solid rgba(124, 107, 191, 0.15);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 150px;
  font-family: inherit;
}

@media (hover: hover) and (pointer: fine) {
  .melody-mode-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 107, 191, 0.2);
    border-color: var(--color-primary);
  }
}
.melody-mode-btn:active {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 107, 191, 0.2);
  border-color: var(--color-primary);
}

.melody-mode-icon .emoji-img {
  width: clamp(3rem, 8vw, 4.5rem);
  height: clamp(3rem, 8vw, 4.5rem);
}

.melody-mode-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: #333;
}

.melody-mode-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  color: #999;
  font-weight: 600;
}

/* ===== Teacher Area ===== */

.melody-teacher-area {
  display: none;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  gap: 0.6rem;
}

.melody-teacher-area.active { display: flex; }

.melody-teacher {
  width: clamp(72px, 16vw, 110px);
  height: clamp(72px, 16vw, 110px);
  transition: transform 0.3s ease;
}

.melody-teacher .emoji-img {
  width: 100%;
  height: 100%;
}

.melody-teacher.playing {
  animation: teacherBob 0.5s ease-in-out infinite;
}

.melody-teacher.waiting {
  animation: teacherExpectant 1.5s ease-in-out infinite;
}

.melody-teacher.happy {
  animation: teacherCelebrate 0.6s ease-out;
}

/* Rhythmic nod during student turn — duration set dynamically via JS */
.melody-teacher.nodding {
  animation: teacherNod ease-in-out infinite;
}

@keyframes teacherNod {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(-4deg) scale(1.03); }
  50%      { transform: rotate(0deg) scale(1.06); }
  75%      { transform: rotate(4deg) scale(1.03); }
}

@keyframes teacherBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes teacherExpectant {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@keyframes teacherCelebrate {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25) rotate(-5deg); }
  70%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.melody-teacher-speech {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 3.2vw, 1.35rem);
  color: #666;
  background: rgba(255, 255, 255, 0.85);
  padding: 6px 18px;
  border-radius: 20px;
  text-align: center;
  min-height: 1.4em;
}

.melody-melody-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  color: var(--color-primary);
  text-align: center;
}

/* Progress dots */
.melody-progress {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 360px;
}

.melody-dot {
  width: clamp(14px, 3vw, 20px);
  height: clamp(14px, 3vw, 20px);
  border-radius: 50%;
  background: rgba(124, 107, 191, 0.12);
  border: 2px solid rgba(124, 107, 191, 0.25);
  transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.melody-dot.filled {
  transform: scale(1.2);
  border-color: transparent;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
}

.melody-dot.current {
  animation: dotPulse 1s ease-in-out infinite;
  border-color: var(--color-primary);
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}

/* ===== Piano Keyboard ===== */

.melody-keyboard {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(3px, 0.8vw, 8px);
  padding: clamp(6px, 1.5vw, 16px);
  padding-left: max(clamp(6px, 1.5vw, 16px), env(safe-area-inset-left));
  padding-right: max(clamp(6px, 1.5vw, 16px), env(safe-area-inset-right));
  padding-bottom: clamp(10px, 2.5vw, 24px);
  z-index: 200;
  max-width: 800px;
  margin: 0 auto;
}

.melody-key {
  background: var(--key-color);
  border: none;
  touch-action: manipulation;   /* no double-tap zoom / 300ms delay on rapid taps */
  border-radius: clamp(8px, 1.5vw, 12px) clamp(8px, 1.5vw, 12px) clamp(12px, 2.5vw, 18px) clamp(12px, 2.5vw, 18px);
  min-height: clamp(90px, 28vh, 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: clamp(10px, 2vh, 20px);
  gap: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  overflow: hidden;
  font-family: inherit;
  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.35),
    inset 0 -4px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.1s ease, box-shadow 0.15s ease, outline-color 0.2s ease;
  outline: 4px solid transparent;
  outline-offset: -2px;
}

/* Key press: squash */
.melody-key.pressed {
  transform: scale(0.9) translateY(3px);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Teacher highlight: bright glow + full opacity */
.melody-key.teacher-highlight {
  outline-color: rgba(255, 255, 255, 0.95);
  transform: scale(1.1);
  box-shadow:
    0 0 30px rgba(255, 255, 255, 0.7),
    0 0 60px rgba(255, 255, 255, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

/* Correct note: green glow */
.melody-key.correct-glow {
  outline-color: rgba(46, 204, 113, 0.9);
  box-shadow:
    0 0 25px rgba(46, 204, 113, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.15);
  animation: correctPop 0.4s ease-out;
}

@keyframes correctPop {
  0%   { transform: scale(0.9); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Incorrect note: shake */
.melody-key.incorrect-flash {
  animation: keyShake 0.35s ease-out;
}

@keyframes keyShake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-5px); }
  40%      { transform: translateX(5px); }
  60%      { transform: translateX(-3px); }
  80%      { transform: translateX(3px); }
}

/* Disabled during teacher playback */
.melody-key.disabled {
  opacity: 0.45;
  pointer-events: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease, outline-color 0.2s ease, opacity 0.15s ease;
}

/* Teacher-highlighted key pops back to full opacity */
.melody-key.disabled.teacher-highlight {
  opacity: 1;
}

/* Note label */
.melody-key-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.1rem, 3.5vw, 1.8rem);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  user-select: none;
}

/* Keyboard shortcut hint (desktop) */
.melody-key-hint {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.6rem, 1.3vw, 0.8rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  user-select: none;
}

/* ===== Freestyle hint ===== */

.melody-freestyle-hint {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: rgba(100, 100, 100, 0.6);
  text-align: center;
  z-index: 100;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* ===== Celebration Overlay ===== */

.melody-celebrate {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 400;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  background: rgba(255, 248, 231, 0.9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  gap: 1rem;
}

.melody-celebrate.show {
  opacity: 1;
  pointer-events: auto;
}

.melody-celebrate-emoji {
  font-size: clamp(3rem, 10vw, 5rem);
  animation: celebrateIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.melody-celebrate-text {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #444;
  text-align: center;
}

.melody-celebrate-sub {
  font-family: 'Quicksand', sans-serif;
  font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  color: #888;
  font-weight: 600;
  text-align: center;
}

.melody-btn-again {
  margin-top: 0.8rem;
  padding: 0.7rem 2rem;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .melody-btn-again:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(124, 107, 191, 0.3);
  }
}
.melody-btn-again:active {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(124, 107, 191, 0.3);
}

@keyframes celebrateIn {
  0%   { transform: scale(0.3) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Grand Finale celebration (level 30) */
.melody-grand-finale {
  animation: grandFinaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes grandFinaleIn {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  50%  { transform: scale(1.3) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ===== Replay Button ===== */

.melody-replay-btn {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: clamp(10px, 3vw, 24px);
  right: clamp(10px, 3vw, 24px);
  width: clamp(48px, 10vw, 64px);
  height: clamp(48px, 10vw, 64px);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 250;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.melody-replay-btn .emoji-img {
  width: 60%;
  height: 60%;
}

@media (hover: hover) and (pointer: fine) {
  .melody-replay-btn:hover:not(.disabled) {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
}
.melody-replay-btn:active:not(.disabled) {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.melody-replay-btn.disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ===== Speed Toggle ===== */

.melody-speed-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: calc(clamp(10px, 3vw, 24px) + clamp(48px, 10vw, 64px) + 10px);
  right: clamp(10px, 3vw, 24px);
  width: clamp(48px, 10vw, 64px);
  height: clamp(48px, 10vw, 64px);
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  z-index: 250;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.melody-speed-toggle .emoji-img {
  width: 60%;
  height: 60%;
}

@media (hover: hover) and (pointer: fine) {
  .melody-speed-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  }
}
.melody-speed-toggle:active {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

/* ===== Bouncy Ball ===== */

.melody-bouncy-ball {
  position: absolute;
  width: clamp(20px, 4vw, 32px);
  height: clamp(20px, 4vw, 32px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFD700, #FFA500);
  box-shadow: 0 3px 10px rgba(255, 165, 0, 0.4), inset 0 -2px 4px rgba(0, 0, 0, 0.15);
  z-index: 300;
  pointer-events: none;
  transform: translate(-50%, -50%);
  /* transition is set dynamically by JS for each note hop */
  transition: opacity 0.3s ease;
}

.melody-bouncy-ball.ball-hop {
  animation: ballHop var(--hop-ms, 300ms) ease-in-out;
}

@keyframes ballHop {
  0%   { transform: translate(-50%, -50%) translateY(0); }
  35%  { transform: translate(-50%, -50%) translateY(clamp(-60px, -10vw, -35px)); }
  100% { transform: translate(-50%, -50%) translateY(0); }
}

.melody-bouncy-ball.ball-land {
  animation: ballLand 0.25s ease-out forwards;
}

@keyframes ballLand {
  0%   { transform: translate(-50%, -50%) scale(1, 1); }
  40%  { transform: translate(-50%, -50%) scale(1.3, 0.7) translateY(4px); }
  70%  { transform: translate(-50%, -50%) scale(0.9, 1.1) translateY(-3px); }
  100% { transform: translate(-50%, -50%) scale(1, 1); }
}

/* ===== Responsive ===== */

@media (max-width: 480px) {
  .melody-keyboard {
    max-width: 100%;
    gap: 3px;
    padding: 5px;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  .melody-key { min-height: 100px; }
  .melody-key-hint { display: none; }
  .melody-teacher-area { top: 3%; }
  .melody-mode-btn { min-width: 125px; padding: 1.2rem 1.4rem; }
}

@media (min-width: 768px) and (orientation: landscape) {
  .melody-keyboard { max-width: 700px; bottom: 3%; }
  .melody-key { min-height: 140px; }
  .melody-teacher-area { top: 8%; }
}

/* 668px lower bound closes the gap with the ≤667px rotate-prompt query —
   iPad mini (744px) and narrow foldables get the tablet sizing */
@media (min-width: 668px) and (orientation: portrait) {
  .melody-keyboard { max-width: 650px; bottom: 2%; }
  .melody-key { min-height: 130px; }
}

@media (min-width: 1024px) {
  .melody-keyboard { max-width: 750px; bottom: 5%; }
  .melody-key { min-height: 160px; }
}

/* ===== Countdown Overlay ===== */

.melody-countdown {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  z-index: 400;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(4rem, 15vw, 8rem);
  color: #fff;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.melody-countdown-pop {
  animation: countdownPop 0.6s ease-out;
}

@keyframes countdownPop {
  0%   { transform: scale(1.8); opacity: 0.3; }
  40%  { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Rotate Device Prompt (phone portrait) ===== */

.melody-rotate-prompt {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
  background: linear-gradient(135deg, #FFF8E7 0%, #FDE8F0 50%, #E8F0FE 100%);
  gap: 1.2rem;
}

.melody-rotate-icon {
  font-size: 4rem;
  animation: rotateWiggle 2s ease-in-out infinite;
}

.melody-rotate-text {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  color: #666;
  text-align: center;
  padding: 0 2rem;
}

@keyframes rotateWiggle {
  0%, 100% { transform: rotate(0deg); }
  25%, 50% { transform: rotate(90deg); }
  75%      { transform: rotate(0deg); }
}

/* Phone portrait: prompt rotation (only during gameplay, not mode select) */
@media (max-width: 667px) and (orientation: portrait) {
  /* grid columns set by JS — no override needed here */

  #melodyGame.melody-playing .melody-rotate-prompt { display: flex; }
  #melodyGame.melody-playing .melody-keyboard { display: none !important; }
  #melodyGame.melody-playing .melody-teacher-area { display: none !important; }
  #melodyGame.melody-playing .melody-speed-toggle { display: none !important; }
  #melodyGame.melody-playing .melody-replay-btn { display: none !important; }
  #melodyGame.melody-playing .melody-freestyle-hint { display: none !important; }
}

/* Phone landscape: teacher centered top, controls top-right */
@media (max-height: 500px) and (orientation: landscape) {
  .melody-teacher-area.active {
    flex-direction: row;
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    bottom: auto;
    width: auto;
    max-width: 75%;
    padding: 6px 14px;
    gap: 10px;
    align-items: center;
    z-index: 250;
  }

  .melody-teacher {
    width: clamp(36px, 8vw, 48px);
    height: clamp(36px, 8vw, 48px);
    flex-shrink: 0;
  }

  .melody-teacher-speech {
    font-size: clamp(0.75rem, 2.2vw, 1rem);
    padding: 4px 10px;
    min-height: auto;
  }

  .melody-melody-name {
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
  }

  .melody-progress {
    gap: 5px;
    margin-top: 0;
    max-width: 140px;
  }

  .melody-dot {
    width: clamp(10px, 2.5vw, 14px);
    height: clamp(10px, 2.5vw, 14px);
  }

  .melody-keyboard {
    max-width: 100%;
    margin: 0;
  }

  .melody-key {
    min-height: clamp(60px, 18vh, 100px);
  }

  .melody-replay-btn {
    top: clamp(4px, 1.5vw, 10px);
    right: clamp(8px, 2vw, 16px);
    width: clamp(36px, 8vw, 48px);
    height: clamp(36px, 8vw, 48px);
  }

  .melody-speed-toggle {
    top: calc(clamp(4px, 1.5vw, 10px) + clamp(36px, 8vw, 48px) + 4px);
    right: clamp(8px, 2vw, 16px);
    left: auto;
    width: clamp(36px, 8vw, 48px);
    height: clamp(36px, 8vw, 48px);
  }

  .melody-bouncy-ball {
    width: clamp(16px, 3vw, 24px);
    height: clamp(16px, 3vw, 24px);
  }

  /* Level select: smaller tile rounding on small landscape screens */
  .melody-level-tile { border-radius: clamp(6px, 1.5vw, 10px); padding: clamp(2px, 0.5vw, 4px); }

  /* Rotate prompt should be hidden in landscape */
  .melody-rotate-prompt { display: none !important; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .melody-keyboard {
    padding-bottom: calc(clamp(10px, 2.5vw, 24px) + env(safe-area-inset-bottom));
  }
}

@media (pointer: coarse) {
  .melody-key-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .melody-key,
  .melody-teacher,
  .melody-dot,
  .melody-celebrate-emoji,
  .melody-grand-finale,
  .melody-bouncy-ball,
  .melody-level-tile,
  .parade-note,
  .parade-whale,
  .parade-hit-zone { animation: none !important; transition: none !important; }
}

/* =========================================================
 *  Song Parade — Rhythm Track Styles
 * ========================================================= */

/* ===== Song Selector ===== */

.parade-song-select {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  z-index: 200;
  gap: 1rem;
  background: inherit;
  padding: 0.5rem 0;
  overflow-y: auto;
}

.parade-song-select.active { display: flex; }

.parade-song-options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 1rem;
}

.parade-song-options .melody-mode-btn {
  min-width: 110px;
  padding: 1rem 1.2rem;
}

.parade-back-btn {
  position: fixed;
  top: calc(0.5rem + env(safe-area-inset-top));
  right: calc(0.5rem + env(safe-area-inset-right));
  padding: 0.5rem 1.5rem;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  color: #888;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  z-index: 210;
}

@media (hover: hover) and (pointer: fine) {
  .parade-back-btn:hover { transform: scale(1.05); background: rgba(255,255,255,0.9); }
}
.parade-back-btn:active { transform: scale(0.95); }

/* ===== Parade Container ===== */

.parade-container {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 150;
}

.parade-container.active { display: block; }

/* ===== Top Bar ===== */

.parade-top-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: clamp(48px, 12vh, 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 16px);
  padding: 0 clamp(10px, 2vw, 20px);
  padding-left: calc(clamp(10px, 2vw, 20px) + 60px + env(safe-area-inset-left));   /* clear the fixed exit button */
  z-index: 160;
}

/* Back button in gameplay top bar */
.parade-game-back-btn {
  flex-shrink: 0;
  width: clamp(32px, 8vw, 44px);
  height: clamp(32px, 8vw, 44px);
  border: 2px solid rgba(0,0,0,0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 700;
  color: #888;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .parade-game-back-btn:hover { background: rgba(255,255,255,0.9); transform: scale(1.1); }
}
.parade-game-back-btn:active { transform: scale(0.9); }

/* Song name left, whale center, tempo right */
.parade-top-bar .parade-song-name { margin-right: auto; }
.parade-top-bar .parade-whale { flex-shrink: 0; }

.parade-whale {
  width: clamp(40px, 10vw, 64px);
  height: clamp(40px, 10vw, 64px);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.parade-whale .emoji-img {
  width: 100%;
  height: 100%;
}

.parade-whale.conducting {
  animation: whaleBob 1s ease-in-out infinite;
}

.parade-whale.splash {
  animation: whaleSplash 0.5s ease-out;
}

.parade-whale.happy {
  animation: whaleHappy 0.6s ease-out;
}

@keyframes whaleBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-5px) rotate(-3deg); }
}

@keyframes whaleSplash {
  0% { transform: scale(1); }
  30% { transform: scale(1.2) translateY(-8px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes whaleHappy {
  0% { transform: scale(1); }
  40% { transform: scale(1.3) rotate(-5deg); }
  70% { transform: scale(1.15) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

.parade-song-name {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(1rem, 3vw, 1.4rem);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.parade-song-name-icon {
  width: clamp(1.2rem, 3vw, 1.6rem);
  height: clamp(1.2rem, 3vw, 1.6rem);
  flex-shrink: 0;
}

/* ===== Tempo Control ===== */

.parade-tempo-control {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 8px);
  flex-shrink: 0;
}
/* Push right when inside top bar */
.parade-top-bar .parade-tempo-control {
  margin-left: auto;
}

.parade-tempo-btn {
  width: clamp(36px, 8vw, 48px);
  height: clamp(36px, 8vw, 48px);
  min-width: 0;
  min-height: 0;
  max-width: 48px;
  max-height: 48px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  transition: transform 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.parade-tempo-btn .emoji-img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

.parade-tempo-btn:active { transform: scale(0.9); }
.parade-tempo-btn:disabled { opacity: 0.35; }

.parade-preview-toggle {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 6px);
  margin-left: clamp(6px, 1.5vw, 12px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.parade-preview-checkbox {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.parade-preview-slider {
  position: relative;
  width: clamp(32px, 7vw, 40px);
  height: clamp(18px, 4vw, 22px);
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  transition: background 0.25s;
  flex-shrink: 0;
}
.parade-preview-slider::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(14px, 3vw, 18px);
  height: clamp(14px, 3vw, 18px);
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.25s;
}
.parade-preview-checkbox:checked + .parade-preview-slider {
  background: rgba(76, 175, 80, 0.6);
}
.parade-preview-checkbox:checked + .parade-preview-slider::after {
  left: calc(100% - clamp(14px, 3vw, 18px) - 2px);
}
.parade-preview-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.6rem, 1.8vw, 0.8rem);
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.parade-speed-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.65rem, 2vw, 0.85rem);
  color: rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.parade-tempo-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  color: var(--color-primary);
  min-width: 2.5em;
  text-align: center;
}

/* ===== Waterfall Track ===== */

.parade-track {
  position: absolute;
  top: clamp(48px, 12vh, 80px);
  left: 0;
  right: 0;
  bottom: 0;   /* adjusted by JS to sit above keyboard */
  overflow: hidden;
  pointer-events: none;  /* let keyboard taps through */
}

/* ===== Vertical Lane Lines ===== */

.parade-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.06);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: none;
  z-index: 1;
}
.parade-lane:nth-child(odd) {
  background: rgba(0, 0, 0, 0.03);
}
.parade-lane:nth-child(even) {
  background: rgba(255, 255, 255, 0.05);
}

/* ===== Hit Zone (horizontal band at bottom of track) ===== */

.parade-hit-zone {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(36px, 8vw, 56px);
  background: rgba(124, 107, 191, 0.10);
  border-top: 2px solid rgba(124, 107, 191, 0.25);
  border-radius: 8px 8px 0 0;
  z-index: 5;
  animation: hitZonePulse 2s ease-in-out infinite;
}

@keyframes hitZonePulse {
  0%, 100% { background: rgba(124, 107, 191, 0.06); }
  50% { background: rgba(124, 107, 191, 0.16); }
}

/* ===== Note Circles (Waterfall) ===== */

.parade-note {
  position: absolute;
  top: 0;
  width: clamp(28px, 6vw, 44px);
  height: clamp(28px, 6vw, 44px);
  border-radius: 50%;
  background: var(--note-color);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18),
              inset 0 1px 3px rgba(255,255,255,0.3);
  pointer-events: none;
}

.parade-note-label {
  font-family: 'Fredoka One', cursive;
  font-size: clamp(0.55rem, 1.4vw, 0.85rem);
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  pointer-events: none;
  user-select: none;
}

/* Hit explosion */
.parade-note.hit {
  animation: noteExplode 0.4s ease-out forwards;
}

@keyframes noteExplode {
  0% { opacity: 1; filter: brightness(1.5); }
  40% { opacity: 0.7; filter: brightness(2); }
  100% { opacity: 0; filter: brightness(1); }
}

/* Missed: fade */
.parade-note.missed {
  transition: opacity 0.5s ease;
  opacity: 0.2;
}

/* ===== Key Glow Hint ===== */

.melody-key.parade-hint-glow {
  box-shadow: 0 0 16px 6px rgba(255, 255, 255, 0.6),
              0 0 30px 10px rgba(124, 107, 191, 0.3);
  animation: hintPulse 0.5s ease-in-out infinite alternate;
}

@keyframes hintPulse {
  0% { box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.4),
                    0 0 24px 8px rgba(124, 107, 191, 0.2); }
  100% { box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.7),
                     0 0 36px 12px rgba(124, 107, 191, 0.4); }
}

/* ===== Water Splash Drop ===== */

.parade-splash-drop {
  position: absolute;
  pointer-events: none;
  z-index: 170;
  animation: splashUp 0.65s ease-out forwards;
}

@keyframes splashUp {
  0% { transform: translateY(0) scale(0.5); opacity: 1; }
  100% { transform: translateY(-45px) scale(1.1); opacity: 0; }
}

/* ===== Countdown Overlay (on track) ===== */

.parade-countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  font-family: 'Fredoka One', cursive;
  font-size: clamp(4rem, 15vw, 8rem);
  color: var(--color-primary);
  text-shadow: 0 4px 20px rgba(124, 107, 191, 0.3);
  pointer-events: none;
}

.parade-countdown-pop {
  animation: paradeCountPop 0.6s ease-out;
}

@keyframes paradeCountPop {
  0% { transform: scale(1.8); opacity: 0.3; }
  40% { transform: scale(0.95); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Pick Another Song button variant ===== */

.parade-btn-pick {
  background: rgba(124, 107, 191, 0.15);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

@media (hover: hover) and (pointer: fine) {
  .parade-btn-pick:hover {
    background: rgba(124, 107, 191, 0.25);
  }
}
.parade-btn-pick:active {
  background: rgba(124, 107, 191, 0.25);
}

/* ===== Responsive — Song Parade ===== */

@media (max-height: 500px) and (orientation: landscape) {
  .parade-top-bar {
    height: clamp(32px, 8vh, 48px);
    gap: 6px;
    padding-left: calc(clamp(8px, 2vw, 16px) + 36px);
  }
  .parade-whale {
    width: clamp(28px, 6vw, 40px);
    height: clamp(28px, 6vw, 40px);
  }
  .parade-track {
    top: clamp(32px, 8vh, 48px);
  }
  .parade-note {
    width: clamp(22px, 5vw, 34px);
    height: clamp(22px, 5vw, 34px);
  }
  .parade-note-label {
    font-size: clamp(0.45rem, 1.2vw, 0.7rem);
  }
  .parade-song-options .melody-mode-btn {
    min-width: 90px;
    padding: 0.7rem 0.9rem;
  }
}

@media (max-width: 480px) {
  .parade-song-options .melody-mode-btn {
    min-width: 100px;
    padding: 0.8rem 1rem;
  }
  .parade-tempo-btn {
    width: clamp(28px, 7vw, 36px);
    height: clamp(28px, 7vw, 36px);
  }
}

/* Phone portrait: hide parade UI (rotate prompt shown by melody-playing class) */
@media (max-width: 667px) and (orientation: portrait) {
  #melodyGame.melody-playing .parade-container { display: none !important; }
}


/* ===== css/games/dress-up.css ===== */
/* Safe-area note: index.html sets viewport-fit=cover, so the page now fills the
   whole phone screen including behind the Dynamic Island and the home
   indicator. Anything pinned to a screen edge adds the matching
   env(safe-area-inset-*) so it stays reachable. */
/* =========================================================
 *  Dress-Up Party — tap a furry friend to dress it up
 * ========================================================= */

#dressUpGame {
  display: none;              /* start() → block, stop() → none */
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
  touch-action: manipulation; /* no double-tap zoom on rapid taps */
  user-select: none;
  -webkit-user-select: none;
  cursor: url("../assets/emoji/cursors/hand-open-32.png") 16 16, auto;
  background: linear-gradient(160deg, #E8F6E4 0%, #FFF8E7 55%, #FDE9D4 100%);
  transition: background 0.6s ease;
}
#dressUpGame button {
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
  -webkit-tap-highlight-color: transparent;
}
#dressUpGame .emoji-img { display: block; width: 100%; height: 100%; }

/* ---- Scenes (background gradient) ---- */
#dressUpGame.du-scene-park    { background: linear-gradient(160deg, #DFF3DA 0%, #FFF8E7 55%, #F9E8D2 100%); }
#dressUpGame.du-scene-beach   { background: linear-gradient(160deg, #CDEFFF 0%, #FFF6DC 55%, #FCE4B8 100%); }
#dressUpGame.du-scene-circus  { background: linear-gradient(160deg, #FFE0E6 0%, #FFF3D6 50%, #E6E0FF 100%); }
#dressUpGame.du-scene-night   { background: linear-gradient(160deg, #3B3F7A 0%, #5A5FA6 55%, #8C8FD1 100%); }
#dressUpGame.du-scene-snow    { background: linear-gradient(160deg, #F3FAFF 0%, #DCEBF7 55%, #CFE0F2 100%); }
#dressUpGame.du-scene-rainbow { background: linear-gradient(160deg, #FFE5EC 0%, #FFF8D6 35%, #DFF7E6 70%, #DDEBFF 100%); }
#dressUpGame.du-scene-night .du-hint,
#dressUpGame.du-scene-night .du-chip-label { color: #fff; }

.du-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.du-scene-emoji {
  position: absolute;
  width: clamp(48px, 10vmin, 110px);
  height: clamp(48px, 10vmin, 110px);
  transform: translate(-50%, -50%);
  opacity: 0.9;
  animation: duFloat 5s ease-in-out infinite;
}
.du-scene-emoji:nth-child(2) { animation-delay: 1.3s; }
.du-scene-emoji:nth-child(3) { animation-delay: 2.6s; }

/* ---- Stage + puppet ---- */
.du-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 4vh;
  z-index: 2;
}
.du-puppet {
  position: relative;
  width: min(58vh, 60vw);
  height: min(58vh, 60vw);
  transform-origin: 50% 90%;
}
.du-body {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.12));
}
.du-fill, .du-belly { transition: fill 0.35s ease; }
.du-slot {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
}
.du-slot-head { z-index: 3; }
.du-slot-hand { transform: rotate(-12deg); }
/* Shoes come as a pair: two images side by side, the right one mirrored */
.du-slot-shoes { display: flex; justify-content: space-between; align-items: flex-end; }
.du-slot-shoes .emoji-img { width: 46%; height: 100%; }
.du-slot-shoes .emoji-img:last-child { transform: scaleX(-1); }

/* Invisible, generous tap targets over the art */
.du-hit {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 10;
  border-radius: 20px;
  outline: none;
}
.du-hit:active { background: rgba(255, 255, 255, 0.18); }

/* ---- Wardrobe strip ---- */
.du-strip {
  position: absolute;
  right: calc(clamp(8px, 1.5vw, 20px) + env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 12px);
  z-index: 20;
}
.du-chip {
  width: clamp(56px, 9vmin, 78px);
  height: clamp(56px, 9vmin, 78px);
  border: none;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  transition: transform 0.15s ease, background 0.15s ease;
}
.du-chip:active { transform: scale(0.93); }
.du-chip-emoji {
  width: 58%;
  height: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: #B5AFA9;
  line-height: 1;
}
.du-chip-label {
  font-size: clamp(0.55rem, 1.4vmin, 0.7rem);
  font-weight: 700;
  color: #8B8580;
  letter-spacing: 0.2px;
}
.du-chip-empty .du-chip-emoji { opacity: 0.5; }

/* ---- Action buttons (dice + camera) ---- */
.du-actions {
  position: absolute;
  top: clamp(8px, 1.5vh, 16px);
  right: calc(clamp(8px, 1.5vw, 20px) + env(safe-area-inset-right));
  display: flex;
  gap: clamp(8px, 1.5vw, 14px);
  z-index: 30;
}
.du-btn {
  width: clamp(56px, 9vmin, 76px);
  height: clamp(56px, 9vmin, 76px);
  padding: 12%;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease;
}
.du-btn:active { transform: scale(0.92); }
.du-btn-photo { background: #F4845F; }

/* ---- Hint ---- */
.du-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(14px, 4vh, 40px);
  transform: translateX(-50%);
  padding: 0.6rem 1.4rem;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.85);
  color: #2D2D2D;
  font-weight: 700;
  font-size: clamp(0.95rem, 2.4vmin, 1.25rem);
  white-space: nowrap;
  z-index: 25;
  pointer-events: none;
  animation: duHintPulse 1.6s ease-in-out infinite;
  transition: opacity 0.4s ease;
}
.du-hint-hide { opacity: 0; }

/* ---- Photo flash ---- */
.du-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 300;
}
.du-flash-on { animation: duFlash 0.5s ease-out forwards; }

/* ---- Confetti ---- */
.du-confetti {
  position: absolute;
  pointer-events: none;
  z-index: 350;
  animation: duConfettiFall var(--fall-dur) linear forwards;
}
.du-confetti .emoji-img { width: 100%; height: 100%; }

/* ---- Polaroid card ---- */
.du-card-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 45, 45, 0);
  pointer-events: none;
  z-index: 400;
  transition: background 0.3s ease;
}
.du-card-wrap.du-card-show {
  background: rgba(45, 45, 45, 0.35);
  pointer-events: auto;
}
.du-polaroid {
  background: #fff;
  padding: clamp(10px, 2vmin, 18px) clamp(10px, 2vmin, 18px) clamp(12px, 2.4vmin, 22px);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.6vmin, 14px);
  transform: rotate(-2deg) scale(0.6) translateY(40px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  max-width: 92vw;
}
.du-card-show .du-polaroid { transform: rotate(-2deg) scale(1) translateY(0); opacity: 1; }
.du-photo {
  width: min(42vh, 60vw);
  height: min(42vh, 60vw);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: linear-gradient(160deg, #DFF3DA 0%, #FFF8E7 55%, #F9E8D2 100%);
}
.du-photo.du-scene-beach   { background: linear-gradient(160deg, #CDEFFF 0%, #FFF6DC 55%, #FCE4B8 100%); }
.du-photo.du-scene-circus  { background: linear-gradient(160deg, #FFE0E6 0%, #FFF3D6 50%, #E6E0FF 100%); }
.du-photo.du-scene-night   { background: linear-gradient(160deg, #3B3F7A 0%, #5A5FA6 55%, #8C8FD1 100%); }
.du-photo.du-scene-snow    { background: linear-gradient(160deg, #F3FAFF 0%, #DCEBF7 55%, #CFE0F2 100%); }
.du-photo.du-scene-rainbow { background: linear-gradient(160deg, #FFE5EC 0%, #FFF8D6 35%, #DFF7E6 70%, #DDEBFF 100%); }
.du-puppet-photo {
  width: 78%;
  height: 78%;
  margin-bottom: 6%;
}
.du-caption {
  font-family: 'Baloo 2', 'Quicksand', sans-serif;
  font-weight: 800;
  font-size: clamp(1.2rem, 3.4vmin, 1.8rem);
  color: #2D2D2D;
}
.du-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
}
.du-btn-again {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: clamp(0.9rem, 2.2vmin, 1.05rem);
  padding: 0.55em 1.4em;
  border: none;
  border-radius: 40px;
  color: #fff;
  background: #F4845F;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.du-btn-again:active { transform: scale(0.96); }
/* The shared share-button style is fixed-position; inside the card it sits in flow */
.du-polaroid .endcard-share-btn {
  position: static;
  transform: none;
  margin: 0;
}

/* ---- Animations ---- */
.du-pop { animation: duPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }
.du-dance { animation: duDance 0.4s ease-in-out 3; }

@keyframes duPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22, 0.86); }
  70%  { transform: scale(0.94, 1.08); }
  100% { transform: scale(1); }
}
@keyframes duDance {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  25%  { transform: rotate(-7deg) translateY(-3%); }
  75%  { transform: rotate(7deg) translateY(-3%); }
}
@keyframes duFlash {
  0%   { opacity: 0.95; }
  100% { opacity: 0; }
}
@keyframes duFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  50%      { transform: translate(-50%, -50%) translateY(-10px); }
}
@keyframes duHintPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.05); }
}
@keyframes duConfettiFall {
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  50%  { transform: translateY(calc(var(--fall-dist) * 0.5)) translateX(var(--sway)) rotate(180deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(var(--fall-dist)) translateX(calc(var(--sway) * -0.5)) rotate(var(--fall-rot)); opacity: 0; }
}

/* ---- Portrait: strip along the bottom, puppet a little higher ---- */
@media (orientation: portrait) {
  .du-stage { padding-bottom: 18vh; }
  .du-puppet { width: min(50vh, 78vw); height: min(50vh, 78vw); }
  .du-strip {
    top: auto;
    right: auto;
    left: 50%;
    bottom: clamp(10px, 2vh, 20px);
    transform: translateX(-50%);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 96vw;
  }
  .du-hint { bottom: clamp(150px, 21vh, 190px); }   /* clear the two-row strip */
}

@media (prefers-reduced-motion: reduce) {
  .du-scene-emoji, .du-hint { animation: none; }
}


/* ===== css/games/math-ninja.css ===== */
/* =========================================================
 *  Math Ninja — number basics + mental-math tricks
 * ========================================================= */

#mathGame {
  display: none;              /* start() → block, stop() → none */
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: 'Quicksand', sans-serif;
  color: #2D2D2D;
  background: linear-gradient(160deg, #EEF3FF 0%, #F8F4FF 50%, #FFF3EA 100%);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  cursor: url("../assets/emoji/cursors/hand-open-32.png") 16 16, auto;
  flex-direction: column;   /* start() sets display:flex */
}
#mathGame button {
  cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer !important;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}
#mathGame .emoji-img { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; }

/* ---- Top bar ---- */
.mn-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  /* Left padding clears the fixed exit button, which is 48px wide at
     12px + the left safe-area inset. 64px was enough when it was 36px and
     the inset was always zero; in landscape the title ran under it. */
  padding: max(10px, env(safe-area-inset-top)) 16px 6px calc(72px + env(safe-area-inset-left));
  min-height: 56px;
}
.mn-back {
  border: none;
  background: rgba(255, 255, 255, 0.75);
  color: #7C6BBF;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 24px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.mn-title {
  flex: 1;
  font-family: 'Baloo 2', 'Quicksand', sans-serif;
  font-weight: 800;
  font-size: clamp(1.1rem, 3vmin, 1.5rem);
  color: #5A4FA3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mn-tracker { display: flex; align-items: center; gap: 10px; }
.mn-dots { display: inline-flex; gap: 5px; }
.mn-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(124, 107, 191, 0.2); }
.mn-dot-done { background: #7C6BBF; }
.mn-dot-now { background: #F4845F; transform: scale(1.25); }
.mn-phases { display: inline-flex; gap: 6px; }
.mn-phase {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
  color: #8B8580;
}
.mn-phase-now { background: #7C6BBF; color: #fff; }

/* ---- Ninja + speech bubble ---- */
.mn-ninja {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 16px 6px;
}
.mn-ninja-emoji { font-size: clamp(2.2rem, 6vmin, 3.2rem); line-height: 1; flex: none; }
.mn-bubble {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: clamp(0.95rem, 2.4vmin, 1.15rem);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  max-width: 640px;
}
.mn-bubble::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
  border-radius: 3px;
}

/* ---- Main: content + pad ---- */
.mn-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mn-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}
.mn-watching { cursor: url("../assets/emoji/cursors/hand-point-32.png") 16 4, pointer; }

/* Number pad: docked at the bottom, only when an answer is wanted */
.mn-pad {
  display: none;
  flex: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 16px max(12px, env(safe-area-inset-bottom));
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}
.mn-pad.mn-pad-on { display: grid; }
.mn-key {
  height: clamp(46px, 7.5vh, 64px);
  border: none;
  border-radius: 16px;
  background: #fff;
  font-family: 'Baloo 2', 'Quicksand', sans-serif;
  font-weight: 800;
  font-size: clamp(1.3rem, 4vmin, 1.8rem);
  color: #2D2D2D;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.1s ease;
}
.mn-key:active { transform: scale(0.94); }
.mn-key-back { color: #8B8580; font-size: clamp(1.1rem, 3.4vmin, 1.4rem); }
.mn-key-ok { background: #2EC4B6; color: #fff; }

/* Landscape with room: pad on the right, content on the left */
@media (min-width: 900px) and (orientation: landscape) {
  .mn-main { flex-direction: row; align-items: stretch; }
  .mn-content { padding-right: 24px; }
  .mn-pad { max-width: 300px; margin: 0; align-content: center; padding: 8px 20px 20px 0; }
}

/* ---- Mode select ---- */
.mn-modes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 4vh;
}
.mn-mode {
  width: min(300px, 80vw);
  padding: 22px 18px;
  border: 2px solid transparent;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.mn-mode:active { transform: scale(0.97); border-color: #7C6BBF; }
.mn-mode-icon { font-size: 3.4rem; line-height: 1; }
.mn-mode-label { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.35rem; color: #5A4FA3; }
.mn-mode-sub { font-size: 0.9rem; color: #8B8580; text-align: center; }

/* ---- Level / trick grids ---- */
.mn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 760px;
}
.mn-tile {
  position: relative;
  border: 2px solid transparent;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  padding: 14px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease;
}
.mn-tile:active { transform: scale(0.96); }
.mn-tile-done { border-color: rgba(46, 196, 182, 0.5); }
.mn-tile-next { border-color: #F4845F; animation: mnPulse 1.6s ease-in-out infinite; }
.mn-tile-num {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 0.75rem;
  font-weight: 800;
  color: #B5AFA9;
}
.mn-tile-icon { font-size: 2.2rem; line-height: 1; }
.mn-tile-name { font-weight: 700; font-size: 0.9rem; text-align: center; color: #2D2D2D; }
.mn-tile-stars .mn-star { width: 0.95em; height: 0.95em; }
.mn-stars { display: inline-flex; gap: 2px; font-size: 1rem; }
.mn-star-off { opacity: 0.22; filter: grayscale(1); }
.mn-group-head {
  width: 100%;
  max-width: 760px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: #5A4FA3;
  margin-top: 6px;
}

/* ---- Problem + answer ---- */
.mn-problem {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 7vmin, 3.4rem);
  color: #2D2D2D;
  margin-top: 6px;
}
.mn-problem-big { font-size: clamp(2.2rem, 8vmin, 3.8rem); color: #5A4FA3; }
.mn-eq { color: #8B8580; }
.mn-answer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.2em;
  padding: 0 0.45em;
  height: 1.5em;
  border-radius: 0.5em;
  background: #fff;
  box-shadow: inset 0 0 0 3px rgba(124, 107, 191, 0.25);
  font-variant-numeric: tabular-nums;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.mn-answer.mn-live { box-shadow: inset 0 0 0 3px #7C6BBF; }
.mn-answer.mn-empty { color: #B5AFA9; }
.mn-answer.mn-ok { background: #DDF7F3; box-shadow: inset 0 0 0 3px #2EC4B6; color: #12897C; }
.mn-answer.mn-reveal { background: #FFF1DE; box-shadow: inset 0 0 0 3px #F4845F; color: #C9633C; }
.mn-hint { min-height: 1.4em; color: #8B8580; font-weight: 600; text-align: center; }

/* ---- Visuals ---- */
.mn-visual { display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 40px; }
.mn-showme {
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.8);
  color: #7C6BBF;
  font-weight: 700;
}
.mn-frame {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
}
.mn-visual-on { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.mn-fdot {
  width: clamp(22px, 4.5vmin, 34px);
  height: clamp(22px, 4.5vmin, 34px);
  border-radius: 50%;
  border: 2px dashed rgba(124, 107, 191, 0.25);
  box-sizing: border-box;
}
.mn-fdot-a { background: #7C6BBF; border-style: solid; border-color: #7C6BBF; }
.mn-fdot-b { background: #F4845F; border-style: solid; border-color: #F4845F; }
.mn-fdot-gone { opacity: 0.3; background: #B5AFA9; border-color: #B5AFA9; position: relative; }
.mn-fdot-gone::after { content: '\00d7'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #C9633C; font-weight: 800; opacity: 1; }
.mn-array {
  display: grid;
  gap: 4px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 14px;
}
.mn-adot { width: clamp(10px, 2.4vmin, 18px); height: clamp(10px, 2.4vmin, 18px); border-radius: 50%; background: #7C6BBF; }
.mn-adot-alt { background: #2EC4B6; }
.mn-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mn-group {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}
.mn-gdot { width: clamp(9px, 2.2vmin, 14px); height: clamp(9px, 2.2vmin, 14px); border-radius: 50%; background: #F4845F; }
.mn-visual-label { width: 100%; text-align: center; color: #8B8580; font-weight: 600; font-size: 0.9rem; }

/* ---- Lesson steps ---- */
.mn-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 620px; }
.mn-step {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 18px;
  padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.mn-step-in { animation: mnStepIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mn-step-final { box-shadow: 0 0 0 3px rgba(46, 196, 182, 0.5); }
.mn-step-say { font-weight: 600; color: #5A4FA3; margin-bottom: 6px; }
.mn-step-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(1.4rem, 4.5vmin, 2rem);
}
.mn-step-answer { min-width: 2em; height: 1.4em; font-size: 0.95em; }
.mn-tap-hint { color: #B5AFA9; font-size: 0.85rem; font-weight: 600; }

/* ---- Buttons ---- */
.mn-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.mn-controls-left { justify-content: flex-start; max-width: 620px; }
.mn-btn {
  border: none;
  border-radius: 40px;
  padding: 12px 22px;
  font-weight: 800;
  font-size: 1rem;
  transition: transform 0.15s ease;
}
.mn-btn:active { transform: scale(0.96); }
.mn-btn:disabled { opacity: 0.4; }
.mn-btn-main { background: #F4845F; color: #fff; box-shadow: 0 6px 18px rgba(244, 132, 95, 0.35); }
.mn-btn-ghost { background: rgba(255, 255, 255, 0.85); color: #7C6BBF; }

/* ---- End card ---- */
.mn-celebrate {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(45, 45, 45, 0);
  pointer-events: none;
  z-index: 400;
  transition: background 0.3s ease;
}
.mn-celebrate.mn-show { background: rgba(45, 45, 45, 0.35); pointer-events: auto; }
.mn-endcard {
  background: #fff;
  border-radius: 28px;
  padding: 24px 22px 20px;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: scale(0.7) translateY(30px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.mn-show .mn-endcard { transform: scale(1) translateY(0); opacity: 1; }
.mn-endcard-emoji { font-size: 3.6rem; line-height: 1; }
.mn-endcard-title { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 1.4rem; color: #5A4FA3; text-align: center; }
.mn-endcard-stars { font-size: 2rem; }
.mn-endcard-stats { color: #8B8580; font-weight: 600; }
.mn-endcard-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.mn-endcard .endcard-share-btn { position: static; transform: none; }

/* ---- Animations ---- */
.mn-pop { animation: mnPop 0.3s ease; }
.mn-shake { animation: mnShake 0.4s ease; }
@keyframes mnPop { 0% { transform: scale(0.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
@keyframes mnShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); } 40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
}
@keyframes mnStepIn { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes mnPulse { 0%, 100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06); } 50% { box-shadow: 0 0 0 6px rgba(244, 132, 95, 0.25); } }

@media (prefers-reduced-motion: reduce) {
  .mn-tile-next { animation: none; }
}

/* ---- Small phones ---- */
@media (max-width: 480px) {
  .mn-top { padding-left: 56px; gap: 8px; }
  .mn-grid { grid-template-columns: repeat(2, 1fr); }
  .mn-bubble { font-size: 0.9rem; padding: 8px 12px; }
}