.music-progress { display: flex; justify-content: center; gap: 5px; margin: 0 0 8px; }
.music-progress i { width: 9px; height: 9px; border-radius: 50%; background: rgba(78,55,145,.15); }
.music-progress i.done { background: #ffbd35; }
.music-stage { position: relative; min-height: min(72vh, 560px); overflow: hidden; border: 7px solid #fff; border-radius: 34px; background: #30216e url("assets/palco-magico.png") center / cover; box-shadow: 0 10px 28px rgba(39,31,87,.2); isolation: isolate; }
.music-stage::after { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(35,15,70,.18)); pointer-events: none; }
.music-lights { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.music-lights i { position: absolute; top: -15%; width: 24%; height: 72%; transform-origin: top; opacity: .23; background: linear-gradient(180deg, #fff8b9, transparent); clip-path: polygon(42% 0,58% 0,100% 100%,0 100%); animation: stage-light 2.5s ease-in-out infinite alternate; }
.music-lights i:nth-child(1) { left: 5%; transform: rotate(-12deg); }
.music-lights i:nth-child(2) { left: 38%; animation-delay: -.8s; }
.music-lights i:nth-child(3) { right: 5%; transform: rotate(12deg); animation-delay: -1.5s; }
.band-button { position: absolute; z-index: 5; top: 42%; left: 50%; width: 76px; height: 76px; transform: translate(-50%,-50%); border: 5px solid rgba(255,255,255,.9); border-radius: 50%; background: #ffdf55; font-size: 2rem; cursor: pointer; box-shadow: 0 7px 0 #d28c22, 0 10px 25px rgba(29,16,68,.3); }
.band-button:active { transform: translate(-50%,calc(-50% + 5px)); box-shadow: 0 2px 0 #d28c22; }
.music-pads { position: absolute; z-index: 4; right: 12px; bottom: 14px; left: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.music-pad { min-width: 0; height: 82px; border: 5px solid rgba(255,255,255,.86); border-radius: 24px; background: var(--pad); background: color-mix(in srgb, var(--pad) 84%, white); cursor: pointer; box-shadow: 0 6px 0 #50347e; box-shadow: 0 6px 0 color-mix(in srgb, var(--pad) 65%, #372073), 0 8px 16px rgba(30,17,74,.24); }
.music-pad span { display: block; font-size: 2.65rem; filter: drop-shadow(0 4px 2px rgba(52,33,74,.16)); }
.music-pad.playing { animation: music-pad-hit .42s ease-out; filter: brightness(1.16); }
.music-notes { position: absolute; z-index: 3; top: 11px; left: 50%; color: #fff6a8; font-size: 2.2rem; letter-spacing: .38em; text-shadow: 0 3px 10px #452477; transform: translateX(-50%); opacity: 0; }
.band-playing .music-notes { animation: notes-float 1.4s linear infinite; opacity: 1; }
.band-playing { animation: stage-beat .62s ease-in-out infinite; }
.music-stage--pulse::after { animation: stage-flash .4s ease-out; }
@keyframes stage-light { to { transform: rotate(10deg); opacity: .42; } }
@keyframes music-pad-hit { 40% { transform: translateY(6px) scale(.91) rotate(-2deg); box-shadow: 0 1px 0 #472a73; } 75% { transform: scale(1.08); } }
@keyframes notes-float { from { transform: translate(-50%,22px) scale(.85); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%,-35px) scale(1.15); opacity: 0; } }
@keyframes stage-beat { 50% { filter: saturate(1.18) brightness(1.05); } }
@keyframes stage-flash { 40% { background: rgba(255,255,255,.24); } }
@media (max-height: 720px) { .music-stage { min-height: 68vh; } .music-pad { height: 67px; } }