/* Mira kids music games — mobile pads + desktop keyboard play mode */

body.theme-music {
  --g-accent: #f472b6;
  --g-accent-2: #a78bfa;
  --music-ink: #f8fafc;
  --music-chip: rgba(15, 23, 42, 0.42);
  --music-stage: rgba(15, 23, 42, 0.42);
  --music-btn: linear-gradient(135deg, #f472b6, #c084fc);
  --music-btn-ink: #1e1b4b;
  position: relative;
  min-height: 100vh;
  color: var(--music-ink);
  background: #1e1b4b;
  overflow-x: hidden;
}

/* ---- World backdrop layers ---- */
.music-world {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.music-world-sky {
  position: absolute;
  inset: 0;
  background: var(--music-sky, linear-gradient(165deg, #312e81, #7c3aed 45%, #db2777));
  transition: background 0.4s ease;
}

.music-world-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background-image: var(--music-pattern, none);
  background-size: var(--music-pattern-size, 48px 48px);
}

.music-world-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  background: var(--music-ground, linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35)));
}

.music-world-floaters {
  position: absolute;
  inset: 0;
}

.music-floater {
  position: absolute;
  font-size: 1.6rem;
  opacity: 0.55;
  animation: music-float 7s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}
.music-floater-0 { top: 12%; left: 8%; animation-delay: 0s; }
.music-floater-1 { top: 22%; right: 10%; animation-delay: 1.2s; font-size: 1.3rem; }
.music-floater-2 { top: 48%; left: 6%; animation-delay: 2.4s; font-size: 1.8rem; }
.music-floater-3 { top: 58%; right: 8%; animation-delay: 3.1s; }

@keyframes music-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-14px) rotate(6deg); }
}

.music-shell {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.5rem 0.75rem 1.5rem;
}

/* ---- Per-game mascot cast ---- */
.music-hero-cast {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin: 0.15rem 0 0.45rem;
}

.music-mascot {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--music-mascot-bg, rgba(255, 255, 255, 0.18));
  border: 3px solid var(--music-mascot-ring, rgba(255, 255, 255, 0.45));
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25), inset 0 0 24px rgba(255, 255, 255, 0.12);
  animation: music-mascot-bob 2.4s ease-in-out infinite;
}

.music-mascot-face {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.12));
}

.music-mascot-prop {
  position: absolute;
  right: -8px;
  bottom: -2px;
  font-size: 1.45rem;
  animation: music-prop-wiggle 1.6s ease-in-out infinite;
}

.music-mascot-line {
  margin: 0.15rem 0 0;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.01em;
  color: var(--music-ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

@keyframes music-mascot-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes music-prop-wiggle {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(10deg); }
}

.music-mode-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.25rem auto 0.5rem;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  background: var(--music-chip);
  border: 2px solid rgba(255, 255, 255, 0.22);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--music-ink);
}

body.theme-music .g-chip {
  background: var(--music-chip);
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--music-ink);
}

.music-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  margin: 0.45rem 0 0.65rem;
}

.music-controls .g-btn {
  min-width: 5.5rem;
}

.music-controls .g-btn-accent {
  background: var(--music-btn);
  color: var(--music-btn-ink);
  border: none;
  font-weight: 800;
}

.music-controls .g-btn.is-exit {
  background: rgba(248, 113, 113, 0.25);
  border-color: #f87171;
}

.music-controls .g-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.music-stage {
  background: var(--music-stage);
  border-radius: 22px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  padding: 0.75rem;
  min-height: 220px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
}

.music-hint {
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0.35rem 0 0.65rem;
  color: var(--music-ink);
  min-height: 1.4em;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

/* ========== 10 distinct color worlds ========== */

/* 1 Piano — moonlight concert hall (premium) */
body.music-world-piano {
  --g-accent: #93c5fd;
  --g-accent-2: #c4b5fd;
  --music-sky: radial-gradient(ellipse at 50% 0%, #4c1d95 0%, transparent 55%),
    linear-gradient(165deg, #020617 0%, #1e1b4b 35%, #312e81 65%, #0f172a 100%);
  --music-pattern: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.14) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(147,197,253,0.22) 0 1.5px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(251,191,36,0.15) 0 2px, transparent 3px);
  --music-pattern-size: 56px 56px;
  --music-ground: linear-gradient(180deg, transparent, rgba(2, 6, 23, 0.85));
  --music-mascot-bg: linear-gradient(145deg, #e0e7ff, #93c5fd 50%, #c4b5fd);
  --music-mascot-ring: #fde68a;
  --music-btn: linear-gradient(135deg, #93c5fd, #a78bfa 50%, #f472b6);
  --music-btn-ink: #0f172a;
  --music-stage: rgba(15, 23, 42, 0.62);
}

/* 2 Drum — neon rock stage */
body.music-world-drum {
  --g-accent: #fb7185;
  --g-accent-2: #f97316;
  --music-sky: linear-gradient(160deg, #18181b 0%, #7f1d1d 35%, #9a3412 70%, #450a0a 100%);
  --music-pattern: repeating-linear-gradient(90deg, transparent 0 18px, rgba(251,113,133,0.12) 18px 20px);
  --music-pattern-size: 40px 40px;
  --music-ground: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
  --music-mascot-bg: linear-gradient(145deg, #fb7185, #ea580c);
  --music-mascot-ring: #fdba74;
  --music-btn: linear-gradient(135deg, #fb7185, #f97316);
  --music-btn-ink: #fff;
  --music-stage: rgba(0, 0, 0, 0.45);
}

/* 3 Clap — sunny playground */
body.music-world-clap {
  --g-accent: #fbbf24;
  --g-accent-2: #fb923c;
  --music-ink: #422006;
  --music-sky: linear-gradient(165deg, #38bdf8 0%, #7dd3fc 35%, #fde68a 70%, #fdba74 100%);
  --music-pattern: radial-gradient(circle, rgba(255,255,255,0.35) 0 8px, transparent 9px);
  --music-pattern-size: 64px 64px;
  --music-ground: linear-gradient(180deg, transparent, rgba(34, 197, 94, 0.45));
  --music-mascot-bg: linear-gradient(145deg, #fef08a, #fb923c);
  --music-mascot-ring: #fff;
  --music-btn: linear-gradient(135deg, #fbbf24, #f97316);
  --music-btn-ink: #422006;
  --music-chip: rgba(255, 255, 255, 0.55);
  --music-stage: rgba(255, 255, 255, 0.42);
}

body.music-world-clap .music-mascot-line,
body.music-world-clap .music-hint,
body.music-world-clap .music-mode-pill {
  text-shadow: none;
  color: #422006;
}

/* 4 Musical chairs — birthday party pastel */
body.music-world-chairs {
  --g-accent: #f9a8d4;
  --g-accent-2: #c4b5fd;
  --music-sky: linear-gradient(160deg, #fce7f3 0%, #fbcfe8 30%, #ddd6fe 65%, #a5b4fc 100%);
  --music-ink: #4a044e;
  --music-pattern: radial-gradient(circle at center, rgba(244,114,182,0.25) 0 6px, transparent 7px);
  --music-pattern-size: 42px 42px;
  --music-ground: linear-gradient(180deg, transparent, rgba(192, 132, 252, 0.4));
  --music-mascot-bg: linear-gradient(145deg, #fbcfe8, #e9d5ff);
  --music-mascot-ring: #f472b6;
  --music-btn: linear-gradient(135deg, #f472b6, #a78bfa);
  --music-btn-ink: #4a044e;
  --music-chip: rgba(255, 255, 255, 0.55);
  --music-stage: rgba(255, 255, 255, 0.5);
}

body.music-world-chairs .music-mascot-line,
body.music-world-chairs .music-hint {
  color: #4a044e;
  text-shadow: none;
}

/* 5 Sing — neon karaoke night */
body.music-world-sing {
  --g-accent: #e879f9;
  --g-accent-2: #22d3ee;
  --music-sky: linear-gradient(165deg, #2e1065 0%, #701a75 40%, #4c1d95 70%, #0e7490 100%);
  --music-pattern: linear-gradient(135deg, rgba(34,211,238,0.15) 25%, transparent 25%),
    linear-gradient(225deg, rgba(232,121,249,0.12) 25%, transparent 25%);
  --music-pattern-size: 36px 36px;
  --music-ground: linear-gradient(180deg, transparent, rgba(46, 16, 101, 0.85));
  --music-mascot-bg: linear-gradient(145deg, #e879f9, #22d3ee);
  --music-mascot-ring: #f5d0fe;
  --music-btn: linear-gradient(135deg, #e879f9, #22d3ee);
  --music-btn-ink: #1e1b4b;
  --music-stage: rgba(15, 23, 42, 0.5);
}

/* 6 Guitar — desert campfire dusk */
body.music-world-guitar {
  --g-accent: #f59e0b;
  --g-accent-2: #b45309;
  --music-sky: linear-gradient(165deg, #1c1917 0%, #7c2d12 35%, #c2410c 60%, #78350f 100%);
  --music-pattern: repeating-linear-gradient(0deg, transparent 0 28px, rgba(245,158,11,0.08) 28px 30px);
  --music-ground: linear-gradient(180deg, transparent, rgba(69, 26, 3, 0.85));
  --music-mascot-bg: linear-gradient(145deg, #fbbf24, #92400e);
  --music-mascot-ring: #fcd34d;
  --music-btn: linear-gradient(135deg, #f59e0b, #b45309);
  --music-btn-ink: #1c1917;
  --music-stage: rgba(28, 25, 23, 0.5);
}

/* 7 Guess — teal mystery museum */
body.music-world-guess {
  --g-accent: #2dd4bf;
  --g-accent-2: #6366f1;
  --music-sky: linear-gradient(165deg, #042f2e 0%, #134e4a 40%, #312e81 75%, #1e1b4b 100%);
  --music-pattern: radial-gradient(ellipse at center, rgba(45,212,191,0.18) 0 40%, transparent 70%);
  --music-pattern-size: 120px 80px;
  --music-ground: linear-gradient(180deg, transparent, rgba(4, 47, 46, 0.8));
  --music-mascot-bg: linear-gradient(145deg, #5eead4, #6366f1);
  --music-mascot-ring: #99f6e4;
  --music-btn: linear-gradient(135deg, #2dd4bf, #6366f1);
  --music-btn-ink: #042f2e;
  --music-stage: rgba(15, 23, 42, 0.55);
}

/* 8 Xylo — rainbow garden */
body.music-world-xylo {
  --g-accent: #4ade80;
  --g-accent-2: #f472b6;
  --music-ink: #14532d;
  --music-sky: linear-gradient(165deg, #86efac 0%, #fde047 25%, #fdba74 50%, #f9a8d4 75%, #93c5fd 100%);
  --music-pattern: radial-gradient(circle, rgba(255,255,255,0.4) 0 4px, transparent 5px);
  --music-pattern-size: 28px 28px;
  --music-ground: linear-gradient(180deg, transparent, rgba(22, 163, 74, 0.5));
  --music-mascot-bg: linear-gradient(145deg, #4ade80, #f472b6);
  --music-mascot-ring: #fff;
  --music-btn: linear-gradient(135deg, #4ade80, #22d3ee);
  --music-btn-ink: #14532d;
  --music-chip: rgba(255, 255, 255, 0.55);
  --music-stage: rgba(255, 255, 255, 0.45);
}

body.music-world-xylo .music-mascot-line,
body.music-world-xylo .music-hint {
  color: #14532d;
  text-shadow: none;
}

/* 9 Maracas — tropical fiesta */
body.music-world-maracas {
  --g-accent: #84cc16;
  --g-accent-2: #f97316;
  --music-sky: linear-gradient(165deg, #0c4a6e 0%, #0369a1 30%, #16a34a 60%, #ea580c 100%);
  --music-pattern: radial-gradient(circle at 30% 40%, rgba(250,204,21,0.2) 0 12px, transparent 13px);
  --music-pattern-size: 70px 70px;
  --music-ground: linear-gradient(180deg, transparent, rgba(20, 83, 45, 0.65));
  --music-mascot-bg: linear-gradient(145deg, #a3e635, #fb923c);
  --music-mascot-ring: #fef08a;
  --music-btn: linear-gradient(135deg, #84cc16, #f97316);
  --music-btn-ink: #14532d;
  --music-stage: rgba(15, 23, 42, 0.4);
}

/* 10 Band — golden parade street */
body.music-world-band {
  --g-accent: #facc15;
  --g-accent-2: #06b6d4;
  --music-sky: linear-gradient(165deg, #164e63 0%, #0e7490 35%, #ca8a04 70%, #854d0e 100%);
  --music-pattern: repeating-linear-gradient(45deg, rgba(250,204,21,0.12) 0 10px, transparent 10px 20px);
  --music-pattern-size: 40px 40px;
  --music-ground: linear-gradient(180deg, transparent, rgba(120, 53, 15, 0.7));
  --music-mascot-bg: linear-gradient(145deg, #facc15, #06b6d4);
  --music-mascot-ring: #fef9c3;
  --music-btn: linear-gradient(135deg, #facc15, #06b6d4);
  --music-btn-ink: #164e63;
  --music-stage: rgba(15, 23, 42, 0.45);
}

.music-pads {
  display: grid;
  gap: 0.5rem;
  justify-content: center;
}

.music-pads.piano {
  grid-template-columns: repeat(var(--piano-cols, 7), minmax(28px, 1fr));
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  gap: 3px;
  padding: 0.85rem 0.55rem 0.65rem;
  background: linear-gradient(180deg, #1a1033 0%, #0b1224 100%);
  border-radius: 18px 18px 14px 14px;
  border: 2px solid rgba(196, 181, 253, 0.35);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.piano-board {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
}

.piano-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  align-items: center;
}

.piano-mode-btn {
  appearance: none;
  border: 2px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.82rem;
  color: #e2e8f0;
  background: rgba(15, 23, 42, 0.45);
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.piano-mode-btn.is-active {
  background: linear-gradient(135deg, #93c5fd, #c4b5fd);
  color: #0f172a;
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.35), 0 8px 20px rgba(99, 102, 241, 0.35);
}
.piano-mode-btn:active {
  transform: scale(0.96);
}

.piano-space-hint {
  font-size: 0.75rem;
  font-weight: 700;
  opacity: 0.9;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.18);
  border: 1px solid rgba(251, 191, 36, 0.4);
  color: #fef3c7;
}

.music-pad.piano-white {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 55%, #cbd5e1 100%);
  min-height: 128px;
  border-radius: 0 0 10px 10px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-top: none;
  box-shadow: 0 8px 0 #94a3b8, 0 12px 16px rgba(0, 0, 0, 0.25);
  color: #0f172a;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 0.45rem;
  position: relative;
  z-index: 1;
}
.music-pad.piano-white:active,
.music-pad.piano-white.is-hit {
  box-shadow: 0 3px 0 #94a3b8, 0 6px 10px rgba(0, 0, 0, 0.2);
  transform: translateY(5px) scale(0.99);
}
.music-pad.piano-white.is-lit {
  background: linear-gradient(180deg, #fef9c3, #fde68a 60%, #fbbf24);
  box-shadow: 0 0 0 3px #fde047, 0 0 28px rgba(250, 204, 21, 0.65);
}

.music-pad.piano-black {
  position: absolute;
  width: calc(100% / var(--piano-cols, 15) * 0.62);
  min-height: 78px;
  background: linear-gradient(180deg, #334155 0%, #0f172a 40%, #020617 100%);
  color: #e2e8f0;
  z-index: 3;
  border-radius: 0 0 8px 8px;
  top: 0.85rem;
  transform: translateX(-50%);
  border: 1px solid #020617;
  box-shadow: 0 6px 0 #020617, 0 10px 14px rgba(0, 0, 0, 0.45);
  font-size: 0.65rem;
  padding: 0 2px 0.3rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.music-pad.piano-black:active,
.music-pad.piano-black.is-hit {
  box-shadow: 0 2px 0 #020617;
  transform: translateX(-50%) translateY(4px);
}
.music-pad.piano-black.is-lit {
  background: linear-gradient(180deg, #818cf8, #4f46e5 50%, #1e1b4b);
  box-shadow: 0 0 0 2px #c4b5fd, 0 0 22px rgba(167, 139, 250, 0.7);
}

.piano-note {
  font-weight: 800;
  letter-spacing: 0.02em;
}

.music-pad.piano-magic {
  width: min(100%, 420px);
  margin: 0.15rem auto 0;
  min-height: 52px;
  border-radius: 999px;
  border: 2px solid rgba(251, 191, 36, 0.55);
  background: linear-gradient(135deg, #fbbf24, #f472b6 45%, #a78bfa);
  color: #0f172a;
  font-size: 1rem;
  font-weight: 900;
  box-shadow: 0 8px 24px rgba(244, 114, 182, 0.35);
  animation: piano-magic-pulse 2.2s ease-in-out infinite;
}
@keyframes piano-magic-pulse {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.08); transform: scale(1.02); }
}

body.piano-sparkle-flash .music-world-sky {
  filter: brightness(1.25) saturate(1.2);
  transition: filter 0.2s ease;
}

.music-world-piano .music-mascot {
  box-shadow: 0 12px 32px rgba(147, 197, 253, 0.35), inset 0 0 24px rgba(255, 255, 255, 0.18);
}

.music-world-piano .music-stage {
  border-color: rgba(196, 181, 253, 0.35);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 40px rgba(99, 102, 241, 0.15);
}

.music-pad {
  appearance: none;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-radius: 16px;
  min-height: 64px;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  color: #0f172a;
  background: #f8fafc;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform 0.08s ease, box-shadow 0.08s ease, filter 0.08s ease;
  user-select: none;
  -webkit-user-select: none;
}

.music-pad:active,
.music-pad.is-hit {
  transform: scale(0.94) translateY(2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.55);
}

.music-pad.is-lit {
  box-shadow: 0 0 0 4px #fde047, 0 0 24px rgba(253, 224, 71, 0.55);
  transform: scale(1.04);
}

.music-pads.drums {
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  max-width: 420px;
  margin: 0 auto;
}

.music-pad.drum {
  min-height: 100px;
  font-size: 1.5rem;
  border-radius: 50%;
}

.music-pad.drum-kick {
  background: linear-gradient(145deg, #fb7185, #be123c);
  color: #fff;
}
.music-pad.drum-snare {
  background: linear-gradient(145deg, #38bdf8, #0369a1);
  color: #fff;
}
.music-pad.drum-hat {
  background: linear-gradient(145deg, #fbbf24, #b45309);
  color: #1e1b4b;
}

.music-pads.xylo {
  grid-template-columns: repeat(8, minmax(32px, 1fr));
  max-width: 560px;
  margin: 0 auto;
  align-items: end;
}

.music-pad.xylo-bar {
  min-height: 70px;
  color: #0f172a;
  border-radius: 12px 12px 8px 8px;
}

.music-pads.guitar {
  grid-template-columns: 1fr;
  max-width: 480px;
  margin: 0 auto;
}

.music-pad.guitar-string {
  min-height: 48px;
  border-radius: 999px;
  background: linear-gradient(90deg, #78350f, #fbbf24 40%, #78350f);
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.music-pads.clap {
  grid-template-columns: 1fr;
  max-width: 280px;
  margin: 0 auto;
}

.music-pad.clap-big {
  min-height: 140px;
  border-radius: 50%;
  font-size: 3rem;
  background: linear-gradient(145deg, #f9a8d4, #db2777);
  color: #fff;
}

.music-pads.maracas {
  grid-template-columns: 1fr 1fr;
  max-width: 360px;
  margin: 0 auto;
}

.music-pad.maraca {
  min-height: 120px;
  border-radius: 40% 40% 48% 48%;
  font-size: 2rem;
  background: linear-gradient(145deg, #86efac, #16a34a);
  color: #052e16;
}

.music-pads.guess {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  max-width: 420px;
  margin: 0 auto;
}

.music-pad.guess-opt {
  min-height: 72px;
  font-size: 1.1rem;
}

.music-chairs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 0.75rem;
}

.music-chair:active,
.music-chair.is-hit {
  transform: scale(0.94);
  box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.55);
}

.music-chair.is-lit {
  border-color: #fde047;
  box-shadow: 0 0 20px rgba(253, 224, 71, 0.5);
}

.music-chair.taken {
  opacity: 0.35;
  pointer-events: none;
}

.music-dancer {
  font-size: 3.2rem;
  text-align: center;
  margin: 0.5rem 0;
  transition: transform 0.2s ease;
}

.music-dancer.is-dance {
  animation: music-bounce 0.35s ease infinite alternate;
}

@keyframes music-bounce {
  from { transform: translateY(0) rotate(-6deg); }
  to { transform: translateY(-10px) rotate(6deg); }
}

.music-key-hint {
  text-align: center;
  font-size: 0.75rem;
  opacity: 0.8;
  margin-top: 0.35rem;
  font-weight: 600;
}

body.music-play-on .music-stage {
  outline: 3px solid rgba(253, 224, 71, 0.55);
}

body.theme-music .game-top h1 {
  color: var(--music-ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 520px) {
  .music-mascot {
    width: 76px;
    height: 76px;
  }
  .music-mascot-face {
    font-size: 2.1rem;
  }
  .music-pads.piano {
    grid-template-columns: repeat(var(--piano-cols, 15), minmax(18px, 1fr));
    gap: 2px;
    padding: 0.55rem 0.3rem 0.45rem;
  }
  .music-pad.piano-white {
    min-height: 96px;
    font-size: 0.62rem;
    box-shadow: 0 5px 0 #94a3b8, 0 8px 10px rgba(0, 0, 0, 0.22);
  }
  .music-pad.piano-black {
    min-height: 56px;
    font-size: 0.5rem;
  }
  .piano-space-hint {
    width: 100%;
    text-align: center;
  }
  .music-pad.piano-magic {
    font-size: 0.88rem;
    min-height: 46px;
  }
}


/* ===== Premium instrument boards (long-play jam) ===== */
.instrument-board {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  align-items: stretch;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.music-jam-bar {
  margin-bottom: 0.25rem;
}

.music-pads.drums-premium {
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  gap: 0.65rem;
}

.music-pad.drum {
  min-height: 92px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-weight: 800;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.18), 0 14px 24px rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.music-pad.drum:active,
.music-pad.drum.is-hit {
  transform: translateY(6px) scale(0.97);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18), 0 6px 12px rgba(0, 0, 0, 0.18);
}
.music-pad.drum .pad-emoji { font-size: 1.55rem; line-height: 1; }
.music-pad.drum .pad-name { font-size: 0.82rem; letter-spacing: 0.02em; }

.drum-kick { background: linear-gradient(160deg, #f87171, #b91c1c); color: #fff7ed; }
.drum-snare { background: linear-gradient(160deg, #60a5fa, #1d4ed8); color: #eff6ff; }
.drum-hat { background: linear-gradient(160deg, #fbbf24, #d97706); color: #422006; }
.drum-tom { background: linear-gradient(160deg, #34d399, #047857); color: #ecfdf5; }
.drum-crash { background: linear-gradient(160deg, #f472b6, #be185d); color: #fdf2f8; }
.drum-ride { background: linear-gradient(160deg, #a78bfa, #6d28d9); color: #f5f3ff; }

.music-pads.xylo-premium {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.28rem;
  overflow-x: auto;
  padding: 0.85rem 0.4rem 0.5rem;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.35), rgba(15, 23, 42, 0.15));
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, 0.12);
}

.music-pad.xylo-bar {
  flex: 1 1 0;
  min-width: 36px;
  max-width: 58px;
  border-radius: 12px 12px 8px 8px;
  color: #0f172a;
  font-weight: 900;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 0.35rem;
}
.music-pad.xylo-bar .xylo-label { font-size: 0.85rem; }
.music-pad.xylo-bar.is-lit,
.music-pad.xylo-bar.is-hit {
  filter: brightness(1.18) saturate(1.2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55), 0 0 22px rgba(255, 255, 255, 0.35);
}

.music-pads.guitar-premium {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
  padding: 0.85rem;
  border-radius: 22px;
  background:
    radial-gradient(circle at 30% 40%, rgba(251, 191, 36, 0.25), transparent 55%),
    linear-gradient(145deg, #7c2d12, #431407 60%, #1c1917);
  border: 2px solid rgba(251, 191, 36, 0.35);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.35);
}

.music-pad.guitar-string {
  position: relative;
  min-height: 48px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.08));
  border: 2px solid color-mix(in srgb, var(--string-hue, #f59e0b) 70%, #fff);
  color: #fff7ed;
  font-weight: 800;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 18px rgba(0, 0, 0, 0.25);
}
.music-pad.guitar-string .string-wire {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--string-hue, #fbbf24), transparent);
  opacity: 0.9;
  pointer-events: none;
}
.music-pad.guitar-string.is-hit .string-wire,
.music-pad.guitar-string.is-lit .string-wire {
  animation: string-pluck 0.35s ease;
}
@keyframes string-pluck {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  60% { transform: translateY(2px); }
}

.music-pads.clap-premium {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 0.7rem;
  max-width: 420px;
  margin: 0 auto;
}

.music-pad.clap-big {
  min-height: 100px;
  border-radius: 28px;
  font-size: 1.35rem;
  font-weight: 900;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.15), 0 16px 28px rgba(0, 0, 0, 0.2);
}
.clap-main { background: linear-gradient(150deg, #fb7185, #e11d48); color: #fff1f2; }
.clap-soft { background: linear-gradient(150deg, #67e8f9, #0891b2); color: #083344; }
.clap-snap { background: linear-gradient(150deg, #c4b5fd, #7c3aed); color: #f5f3ff; }
.clap-stomp { background: linear-gradient(150deg, #86efac, #15803d); color: #052e16; }

.music-pads.maracas-premium {
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 0.7rem;
  max-width: 420px;
  margin: 0 auto;
}

.music-pad.maraca {
  min-height: 110px;
  border-radius: 50% 50% 42% 42%;
  font-size: 2rem;
  font-weight: 800;
  border: 3px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 12px 0 rgba(0, 0, 0, 0.14), 0 18px 30px rgba(0, 0, 0, 0.18);
}
.maraca-l { background: linear-gradient(160deg, #fde047, #ea580c); color: #431407; }
.maraca-r { background: linear-gradient(160deg, #4ade80, #0f766e); color: #042f2e; }
.maraca-both { background: linear-gradient(160deg, #f0abfc, #a21caf); color: #fdf4ff; border-radius: 24px; }
.maraca-soft { background: linear-gradient(160deg, #93c5fd, #2563eb); color: #eff6ff; border-radius: 24px; font-size: 1.1rem; }

.music-pads.guess-premium {
  gap: 0.7rem;
}
.music-pad.guess-opt {
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  font-weight: 800;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.12), 0 14px 22px rgba(0, 0, 0, 0.16);
  min-height: 78px;
}
.guess-tone-0 { background: linear-gradient(145deg, #fda4af, #e11d48); color: #fff1f2; }
.guess-tone-1 { background: linear-gradient(145deg, #93c5fd, #2563eb); color: #eff6ff; }
.guess-tone-2 { background: linear-gradient(145deg, #86efac, #16a34a); color: #052e16; }
.guess-tone-3 { background: linear-gradient(145deg, #fde68a, #d97706); color: #422006; }
.music-hear-again {
  margin-top: 0.75rem;
  align-self: center;
}

.music-chairs.chairs-premium .music-chair {
  min-width: 72px;
  min-height: 84px;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  border: 2px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.12), 0 14px 20px rgba(0, 0, 0, 0.16);
}
.chair-tone-0 { background: linear-gradient(150deg, #fda4af, #e11d48); }
.chair-tone-1 { background: linear-gradient(150deg, #93c5fd, #2563eb); }
.chair-tone-2 { background: linear-gradient(150deg, #86efac, #16a34a); }
.chair-tone-3 { background: linear-gradient(150deg, #fde68a, #d97706); }
.chair-tone-4 { background: linear-gradient(150deg, #c4b5fd, #7c3aed); }

.music-pads.band-premium {
  grid-template-columns: repeat(4, minmax(90px, 1fr));
  gap: 0.55rem;
}
.band-kick { background: linear-gradient(150deg, #f87171, #b91c1c); color: #fff; }
.band-snare { background: linear-gradient(150deg, #60a5fa, #1d4ed8); color: #fff; }
.band-clap { background: linear-gradient(150deg, #fb7185, #be123c); color: #fff; }
.band-piano { background: linear-gradient(150deg, #e2e8f0, #64748b); color: #0f172a; }
.band-xylo { background: linear-gradient(150deg, #fde047, #ca8a04); color: #422006; }
.band-guitar { background: linear-gradient(150deg, #fdba74, #c2410c); color: #431407; }
.band-maracas { background: linear-gradient(150deg, #4ade80, #15803d); color: #052e16; }
.band-sparkle {
  background: linear-gradient(135deg, #fef08a, #f472b6 40%, #a78bfa);
  color: #312e81;
  grid-column: span 2;
}

@media (max-width: 520px) {
  .music-pads.drums-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .music-pads.band-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .band-sparkle { grid-column: span 2; }
  .music-pad.xylo-bar {
    min-width: 28px;
    max-width: 44px;
    font-size: 0.7rem;
  }
}