/* =========================================================
 *  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) + 40px);   /* 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;
}

.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;
}

.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;
}

.melody-mode-btn:hover,
.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-bottom: clamp(10px, 2.5vw, 24px);
  z-index: 200;
  max-width: 800px;
  margin: 0 auto;
}

.melody-key {
  background: var(--key-color);
  border: none;
  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;
}

.melody-btn-again:hover,
.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%;
}

.melody-replay-btn:hover:not(.disabled),
.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%;
}

.melody-speed-toggle:hover,
.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%; }
}

@media (min-width: 768px) 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: 0.5rem;
  right: 0.5rem;
  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;
}

.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);
  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;
}
.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);
}

.parade-btn-pick:hover,
.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; }
}