/* TriviaRush 3.15.36 — persistent music / Change the Vibe header.
   One authoritative top surface: now playing + next three viewer requests. */
.broadcast-header-music{
  /* Use the previously empty top margin to make music information readable
     without pushing game content down or reducing the TikTok-safe play area. */
  top:72px;
  height:196px;
  display:grid;
  grid-template-columns:minmax(0,1.42fr) minmax(390px,1fr);
  align-items:stretch;
  padding:0;
  overflow:hidden;
}
.broadcast-header-music::before{left:24px;right:24px}
/* The show-package controller still creates these legacy game/phase chips for
   older headers. They must never render inside the music header: the scene and
   status rail already communicate phase, and the chips collide with track text. */
.broadcast-header-music #broadcast-show-meta{display:none!important}
.broadcast-header-music > .music-now,
.broadcast-header-music > .music-queue{
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.broadcast-header-music > .music-now{
  position:relative;
  padding:17px 24px 16px;
  border-right:1px solid rgba(150,217,255,.16);
  background:
    radial-gradient(circle at 12% 25%,rgba(39,230,255,.12),transparent 42%),
    linear-gradient(110deg,rgba(8,20,48,.96),rgba(11,18,43,.93));
}
.music-now-kicker,.music-queue-heading{
  display:flex;
  align-items:center;
  gap:9px;
  color:#8fa8ca;
  font-size:16px;
  font-weight:900;
  letter-spacing:.105em;
  text-transform:uppercase;
  white-space:nowrap;
}
.music-live-dot{
  width:11px;height:11px;border-radius:50%;flex:none;
  background:#54f0b0;
  box-shadow:0 0 12px rgba(84,240,176,.72);
}
.music-live-dot[data-playing="false"]{background:#ffd25f;box-shadow:0 0 10px rgba(255,210,95,.52)}
.music-live-dot[data-playing="idle"]{background:#6f86aa;box-shadow:none}
.music-now-title{
  display:block;
  min-width:0;
  margin-top:7px;
  color:#fff;
  font-size:48px;
  font-weight:950;
  line-height:1;
  letter-spacing:-.025em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 0 20px rgba(51,225,255,.12);
}
.music-now-title.is-long{font-size:41px}
.music-now-title.is-very-long{font-size:35px}
.music-now-meta{
  display:grid;
  min-width:0;
  gap:3px;
  margin-top:6px;
  color:#b8c9e7;
  font-size:18px;
  font-weight:800;
  line-height:1.05;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.music-now-artist,
.music-now-request{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.music-now-artist{font-size:20px;color:#c7d7ef}
.music-now-request{font-size:15px;letter-spacing:.045em;color:#8fa8ca;text-transform:uppercase}
.music-now-meta .music-requester{color:#63edff}
.music-now-meta .music-gift{color:#83f5c6}
.broadcast-header-music > .music-queue{
  padding:13px 17px 12px 18px;
  background:linear-gradient(180deg,rgba(11,24,52,.96),rgba(5,12,29,.97));
}
.music-queue-heading{justify-content:space-between;margin-bottom:8px;font-size:14px}
.music-queue-heading b{color:#54eaff;font-size:15px}
.music-queue-heading span{color:#7892b7;font-size:12px;letter-spacing:.07em}
.music-queue-list{
  position:relative;
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:5px;
  min-height:0;
  height:132px;
  overflow:hidden;
}
.music-queue-row{
  min-width:0;
  display:grid;
  grid-template-columns:29px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:4px 9px 4px 5px;
  border:1px solid rgba(91,132,198,.18);
  border-radius:9px;
  background:rgba(4,14,35,.58);
}
.music-queue-row.is-new-set{animation:music-queue-slide .36s ease-out both}
.music-queue-number{
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:7px;
  background:rgba(44,222,255,.12);
  color:#5beaff;
  font-size:13px;font-weight:950;
}
.music-queue-copy{
  min-width:0;
  display:grid;
  align-content:center;
  gap:1px;
  overflow:hidden;
}
.music-queue-title,
.music-queue-meta{
  display:block;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.music-queue-title{color:#f7fbff;font-size:18px;font-weight:900;line-height:1}
.music-queue-meta{color:#849abc;font-size:13px;font-weight:800;line-height:1}
.music-queue-empty{
  grid-row:1/-1;
  display:flex;align-items:center;justify-content:center;
  color:#7086aa;font-size:15px;font-weight:850;letter-spacing:.03em;
}
@keyframes music-queue-slide{from{opacity:.28;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.reduced-motion .music-queue-row.is-new-set,
.performance-minimal .music-queue-row.is-new-set{animation:none!important}
@media (prefers-reduced-motion:reduce){.music-queue-row.is-new-set{animation:none!important}}
.high-readability .broadcast-header-music > .music-now,
.high-readability .broadcast-header-music > .music-queue{background:#071226}
.high-readability .music-queue-row{border-color:rgba(255,255,255,.35)}

/* Audio Trivia has a purpose-built mystery composition. Keep its compact header
   override while still benefiting from the higher top placement. */
#broadcast-stage[data-scene="AUDIO_TRIVIA"] .broadcast-header-music{top:72px}