/* ------------------------------------------------------------------------------------------------
 * Musikquiz (Leinwand, frontend/js/quizStage/music.js): Countdown „Ready“, 3, 2, 1 über der Schallplatte,
 * Equalizer im Takt der Hörprobe, Auflösung mit aufdrehendem Cover. Vor der Auflösung nie Cover oder Titel.
 * ------------------------------------------------------------------------------------------------ */
.music-stage {
  --music-hot: var(--accent-surface);
  --music-cool: var(--c5);
  --music-sky: var(--c3);
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 2vh, 20px);
  margin: 12px auto;
  padding: clamp(16px, 3vh, 32px) 16px;
  width: min(100%, 980px);
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--music-cool) 26%, transparent), transparent 60%),
    radial-gradient(80% 70% at 15% 100%, color-mix(in srgb, var(--music-sky) 22%, transparent), transparent 70%),
    radial-gradient(80% 70% at 85% 100%, color-mix(in srgb, var(--music-hot) 22%, transparent), transparent 70%),
    color-mix(in srgb, var(--ink) 6%, var(--bg-elev));
}

/* Scheinwerfer: zwei weiche Lichtkegel kreisen langsam hinter der Bühne */
.music-stage::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0 20%, color-mix(in srgb, var(--music-hot) 22%, transparent) 25%, transparent 32% 68%, color-mix(in srgb, var(--music-sky) 24%, transparent) 75%, transparent 82%);
  opacity: 0;
  transition: opacity 600ms ease-out;
}

.music-stage[data-mode="countdown"]::before,
.music-stage[data-mode="playing"]::before {
  opacity: 1;
  animation: music-spot 9s linear infinite;
}

.music-stage[data-mode="countdown"]::before {
  animation-duration: 4s;
}

@keyframes music-spot {
  to { transform: rotate(360deg); }
}

.music-deck {
  position: relative;
  width: clamp(160px, 30vh, 300px);
  aspect-ratio: 1;
  perspective: 900px;
}

/* Schallplatte: Rillen, glänzende Kante, farbiges Etikett */
.music-vinyl {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 17%, rgba(255, 255, 255, 0.06) 17.5% 18%, transparent 18.5%),
    repeating-radial-gradient(circle, #15171c 0 2px, #1f2229 2px 3px),
    #15171c;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.06),
    0 18px 50px rgba(0, 0, 0, 0.45),
    0 0 60px color-mix(in srgb, var(--music-cool) 35%, transparent);
  transition: transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 500ms ease-out;
}

.music-vinyl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 30deg, transparent 0 10%, rgba(255, 255, 255, 0.16) 14%, transparent 20% 60%, rgba(255, 255, 255, 0.1) 64%, transparent 70%);
}

.music-vinyl__label {
  position: absolute;
  inset: 33%;
  border-radius: 50%;
  background:
    radial-gradient(circle, #15171c 0 9%, transparent 10%),
    conic-gradient(var(--music-hot), var(--c1), var(--music-cool), var(--music-sky), var(--music-hot));
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25);
}

.music-stage[data-mode="countdown"] .music-vinyl {
  animation: music-spin 3.2s linear infinite;
}

.music-stage[data-mode="playing"] .music-vinyl {
  animation: music-spin 1.8s linear infinite;
}

@keyframes music-spin {
  to { transform: rotate(360deg); }
}

/* Countdown über der Platte: jede Zahl springt groß herein */
.music-countdown {
  position: absolute;
  inset: -20%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
}

.music-countdown__n {
  display: inline-block;
  min-width: 1.2em;
  padding: 0.05em 0.3em;
  border-radius: 999px;
  font-size: clamp(4rem, 16vh, 10rem);
  font-weight: 900;
  line-height: 1;
  text-align: center;
  color: var(--accent-surface-ink);
  background: var(--accent-surface);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-surface) 30%, transparent), 0 20px 60px rgba(0, 0, 0, 0.35);
  animation: music-pop 900ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.music-countdown__n--ready {
  font-size: clamp(2.6rem, 10vh, 6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.12em 0.6em;
  animation: music-ready 1s ease-in-out both;
}

@keyframes music-pop {
  0% { transform: scale(2.2); opacity: 0; }
  45% { transform: scale(0.92); opacity: 1; }
  70% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes music-ready {
  0% { transform: scale(0.6) rotate(-6deg); opacity: 0; }
  60% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* Equalizer: Balken wachsen von unten, Pegel aus dem Analyser (--lvl) oder per CSS */
.music-eq {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3px, 0.5vw, 6px);
  height: clamp(48px, 11vh, 110px);
  width: min(100%, 640px);
}

.music-eq__bar {
  flex: 1 1 0;
  max-width: 18px;
  height: 100%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to top, var(--music-sky), var(--music-cool) 55%, var(--music-hot));
  box-shadow: 0 0 14px color-mix(in srgb, var(--music-cool) 45%, transparent);
  transform-origin: 50% 100%;
  transform: scaleY(var(--lvl, 0.08));
  transition: transform 90ms linear;
}

.music-eq--idle .music-eq__bar {
  animation: music-eq-idle 1.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.11s);
}

.music-eq--auto .music-eq__bar {
  animation: music-eq-auto 0.62s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.173s);
}

.music-eq--auto .music-eq__bar:nth-child(3n) { animation-duration: 0.48s; }
.music-eq--auto .music-eq__bar:nth-child(4n + 1) { animation-duration: 0.81s; }

@keyframes music-eq-idle {
  from { transform: scaleY(0.05); }
  to { transform: scaleY(0.18); }
}

@keyframes music-eq-auto {
  0% { transform: scaleY(0.12); }
  35% { transform: scaleY(0.85); }
  60% { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

/* Ruhiger Equalizer (reduzierte Bewegung): ein gleichmäßiger Balken ohne Bewegung */
.music-eq--calm .music-eq__bar {
  animation: none;
  transition: none;
  transform: scaleY(0.35);
}

.music-caption {
  margin: 0;
  /* Obergrenze 2.4rem: auf großen Leinwänden (1440p) bleibt „Hör genau hin!“ aus der Ferne lesbar (≥ 32 px). */
  font-size: clamp(1.1rem, 2.6vh, 2.4rem);
  /* Feste Zeilenhöhe, auch leer (Countdown): die Bühne bleibt gleich hoch. */
  line-height: 1.2;
  min-height: 1.2em;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.music-stage[data-mode="over"] .music-eq__bar {
  animation: none;
  transform: scaleY(0.06);
  transition: transform 600ms ease-out;
}

/* Auflösung: Cover dreht sich groß auf, Lichtring dahinter */
.music-cover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.music-cover::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--music-hot) 55%, transparent), transparent 65%);
  opacity: 0.7;
}

.music-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 4px color-mix(in srgb, var(--ink) 10%, transparent);
  background: var(--bg-soft);
}

.music-cover--reveal {
  animation: music-cover-in 1300ms cubic-bezier(0.2, 0.9, 0.25, 1.15) both;
}

.music-cover--reveal::before {
  animation: music-glow 1600ms ease-out both;
}

.music-cover--reveal.is-settled,
.music-cover--reveal.is-settled::before {
  animation: none;
}

@keyframes music-cover-in {
  0% { transform: rotateY(540deg) scale(0.2); opacity: 0; }
  55% { opacity: 1; }
  80% { transform: rotateY(-12deg) scale(1.08); }
  100% { transform: rotateY(0) scale(1); opacity: 1; }
}

@keyframes music-glow {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1); opacity: 0.7; }
}

.music-reveal {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 46rem;
  text-align: center;
}

.music-reveal p {
  margin: 0;
}

.music-reveal__song {
  font-size: clamp(1.5rem, 4.4vh, 2.8rem);
  font-weight: 900;
  line-height: 1.15;
  color: var(--ink);
}

.music-reveal__solution {
  font-size: clamp(1rem, 2.4vh, 1.35rem);
  color: var(--muted);
}

.music-reveal__score {
  margin-top: 4px !important;
  padding: 0.25em 0.9em;
  border-radius: 999px;
  font-weight: 800;
  font-size: clamp(1rem, 2.4vh, 1.3rem);
  color: var(--status-ok);
  background: var(--status-ok-bg);
}

.music-reveal__link {
  font-size: 0.9rem;
  color: var(--link);
}

.music-reveal--in > * {
  animation: music-rise 600ms ease-out both;
}

.music-reveal--in > :nth-child(1) { animation-delay: 700ms; }
.music-reveal--in > :nth-child(2) { animation-delay: 950ms; }
.music-reveal--in > :nth-child(3) { animation-delay: 1150ms; }
.music-reveal--in > :nth-child(4) { animation-delay: 1300ms; }

@keyframes music-rise {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

/* Reduzierte Bewegung: Countdown nur als Zahl, keine drehende Platte, kein Scheinwerfer, kein Aufdrehen */
@media (prefers-reduced-motion: reduce) {
  .music-stage::before,
  .music-stage[data-mode] .music-vinyl,
  .music-countdown__n,
  .music-eq__bar,
  .music-cover,
  .music-cover::before,
  .music-reveal--in > * {
    animation: none !important;
    transition: none !important;
  }
}

/* Moderation: Status der Musikrunden, laufender Song, Hinweise */
.pq-music-mod {
  display: grid;
  gap: 4px;
  margin: 8px 0;
}

.pq-music-mod p {
  margin: 0;
}

.pq-music-now {
  font-weight: 700;
}