.music-garden { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:12px; background:#161d35; }
.music-flower { display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; min-height:112px; padding:4px; background:#1d2137; border:1px solid #777493; color:var(--text); }
.music-flower .learning-picture { width:62px; }
.music-flower strong { font-size:.9375rem; font-weight:400; }
.music-flower small { color:var(--muted); }
.music-flower.is-playing { background:#393044; border-color:var(--amber); }
.music-band { display:flex; justify-content:center; align-items:end; gap:30px; min-height:94px; padding:12px 0 4px; }
.music-band .explore-portrait { --portrait-size:48px; max-height:82px; }
.music-band.is-playing .explore-portrait { animation:music-sway .36s ease-out alternate infinite; }
.music-track { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:6px; min-height:50px; }
.music-note { min-width:0; min-height:46px; padding:4px 2px; background:#1d2137; color:var(--text); border:1px solid #777493; font-size:.875rem; }
.music-note.is-playing { background:#1c4545; border-color:var(--cyan); }
.music-empty { grid-column:1/-1; margin:0; font-size:.875rem; padding:12px 0; }
.music-controls > .explore-actions:first-child { margin:0 0 18px; }
@media(max-width:600px) { .music-track { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(min-width:650px) and (max-height:600px) {
  .explore-stage.is-immersive .music-controls { max-height:calc(var(--game-view-height,100dvh) - 82px); overflow:auto; padding-right:8px; }
  .explore-stage.is-immersive .music-controls > .explore-actions:first-child { margin-bottom:8px; }
  .explore-stage.is-immersive .music-band { min-height:40px; padding:4px 0; }
  .explore-stage.is-immersive [data-music-instruction] { font-size:.75rem; line-height:1.5; margin:4px 0; }
}
@keyframes music-sway { from { transform:translateY(0) rotate(-3deg); } to { transform:translateY(-7px) rotate(3deg); } }
@media(max-width:600px) { .music-garden { gap:6px; padding:8px; } .music-flower { min-height:92px; } .music-flower .learning-picture { width:47px; } .music-track { gap:4px; } .music-note { font-size:.8125rem; } }
@media(min-width:650px) and (max-height:600px) { .explore-stage.is-immersive .music-garden { padding:6px; gap:6px; grid-template-columns:repeat(8,minmax(0,1fr)); } .explore-stage.is-immersive .music-flower { min-height:92px; } .explore-stage.is-immersive .music-flower .learning-picture { width:38px; } .explore-stage.is-immersive .music-band { min-height:40px; padding:4px 0; } .explore-stage.is-immersive .music-band .explore-portrait { --portrait-size:24px; max-height:45px; } .explore-stage.is-immersive .music-track { gap:4px; } .explore-stage.is-immersive .explore-controls .learning-settings { margin-bottom:8px; } .explore-stage.is-immersive .explore-saved { margin-top:6px; padding-top:4px; } }
@media(prefers-reduced-motion:reduce) { .music-band.is-playing .explore-portrait { animation:none; } }