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

.backdrop__image {
  position: absolute;
  inset: -2%;
  background: var(--night) var(--bg-tall) center / cover no-repeat;
  animation: backdrop-in 2.4s var(--ease-out) both;
}

@media (min-aspect-ratio: 1/1) {
  .backdrop__image {
    background-image: var(--bg-wide);
  }
}

/* Fallback elegante si la imagen no carga: el degradado ya da la atmósfera */
.backdrop__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 46%, rgba(255, 196, 110, 0.10), transparent 70%),
    radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(4, 8, 6, 0.75) 100%),
    linear-gradient(180deg, rgba(5, 10, 8, 0.35), rgba(5, 10, 8, 0.15) 40%, rgba(5, 10, 8, 0.6));
}

@keyframes backdrop-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}

/* ---------- Escenario ---------- */
.stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    var(--bottom-h)
    calc(12px + env(safe-area-inset-left, 0px));
  overflow: clip;
}

.notes-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.notes-layer--back { z-index: 1; }
.notes-layer--front { z-index: 25; }

.music-note {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 20px;
  color: var(--gold-hi);
  opacity: 0;
  will-change: transform, opacity;
}
.music-note svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  filter: drop-shadow(0 0 4px rgba(255, 206, 110, 0.7));
}

/* ---------- Botón de portada ---------- */
.cover-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  z-index: 20;
}

.cover-actions__hint {
  font-family: var(--font-text);
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(232, 220, 192, 0.7);
}

body:not([data-phase='cover']) .cover-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-ui) var(--ease-out), visibility 0s linear var(--dur-ui);
}

@media (max-height: 520px) {
  .cover-actions__hint { display: none; }
}