/* A separate scene over the TV: the underlying player stays mounted. */
.rk-tv-scene {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  overflow: hidden;
  background: var(--tv-scene-bg);
  color: var(--tv-scene-ink);
  font-family: var(--font-body);
  font-weight: 400;
}

.rk-tv-scene[hidden] { display: none; }
.rk-tv-scene__canvas { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.rk-tv-scene__header {
  position: absolute;
  top: 4vh;
  left: 4vw;
  right: 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.rk-tv-scene__identity { display: flex; align-items: baseline; gap: 20px; min-width: 0; opacity: 0.46; }
.rk-tv-scene__identity > span:first-child { font-size: 2vw; font-size: clamp(18px, 2vw, 38px); letter-spacing: 0.16em; }
.rk-tv-scene__identity > span:last-child { font-size: 1.3vw; font-size: clamp(13px, 1.3vw, 24px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-tv-scene__button {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid currentColor;
  border-radius: 24px;
  color: inherit;
  background: var(--tv-scene-bg);
  font: inherit;
  font-size: 1vw; font-size: clamp(12px, 1vw, 18px);
  cursor: pointer;
  opacity: 0.72;
}
.rk-tv-scene__button:hover, .rk-tv-scene__button:focus-visible { opacity: 1; }
.rk-tv-scene__button:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.rk-tv-scene__button:disabled { cursor: wait; opacity: 0.35; }
.rk-tv-scene__now {
  position: absolute;
  left: 4vw;
  bottom: 15vh;
  width: 35vw;
  opacity: 0.64;
  transition: opacity 3s ease;
}
.rk-tv-scene__label { font-size: 0.9vw; font-size: clamp(11px, 0.9vw, 17px); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 16px; }
.rk-tv-scene__now h1 { font-size: 4.4vw; font-size: clamp(26px, 4.4vw, 84px); font-weight: 300; letter-spacing: -0.045em; line-height: 1.12; margin-bottom: 12px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rk-tv-scene__artist { font-size: 1.65vw; font-size: clamp(15px, 1.65vw, 32px); opacity: 0.65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-tv-scene__queue { position: absolute; right: 4vw; bottom: 15vh; width: 20vw; opacity: 0.45; transition: opacity 3s ease; }
.rk-tv-scene__queue ol { list-style: none; padding: 0; margin: 0; }
.rk-tv-scene__queue li { margin-top: 18px; }
.rk-tv-scene__queue li:nth-child(2) { opacity: 0.65; }
.rk-tv-scene__queue li:nth-child(3) { opacity: 0.36; }
.rk-tv-scene__queue span, .rk-tv-scene__queue small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-tv-scene__queue span { font-size: 1.25vw; font-size: clamp(13px, 1.25vw, 24px); }
.rk-tv-scene__queue small { font-size: 0.9vw; font-size: clamp(11px, 0.9vw, 17px); opacity: 0.6; margin-top: 5px; }
.rk-tv-scene__footer { position: absolute; left: 4vw; right: 4vw; bottom: 4vh; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.rk-tv-scene__audio { max-width: 43vw; font-size: 0.8vw; font-size: clamp(11px, 0.8vw, 15px); transition: opacity 2s ease; }
.rk-tv-scene__audio > span { display: block; opacity: 0.45; margin-bottom: 8px; }
.rk-tv-scene__audio p { opacity: 0.65; margin-top: 8px; max-width: 38em; }
.rk-tv-scene__url { font-size: 1.2vw; font-size: clamp(14px, 1.2vw, 23px); opacity: 0.5; overflow-wrap: anywhere; max-width: 45vw; }
.rk-tv-scene__notice { position: absolute; top: 13vh; left: 4vw; right: 4vw; font-size: 1vw; font-size: clamp(13px, 1vw, 20px); text-align: center; opacity: 0.8; background: var(--tv-scene-bg); }
.rk-tv-scene[data-resting] .rk-tv-scene__now { opacity: 0.35; }
.rk-tv-scene[data-resting] .rk-tv-scene__queue { opacity: 0.25; }
.rk-tv-scene[data-resting] .rk-tv-scene__audio { opacity: 0.25; }
.rk-tv-scene[data-resting] .rk-tv-scene__audio:focus-within,
.rk-tv-scene[data-resting] .rk-tv-scene__audio:hover { opacity: 1; }
[data-tv-scene-active] { overflow: hidden; max-height: 100vh; }

@media (max-width: 767px) and (orientation: portrait) {
  .rk-tv-scene__now { bottom: 39vh; width: 85vw; }
  .rk-tv-scene__queue { bottom: 27vh; left: 4vw; right: 4vw; width: auto; }
  .rk-tv-scene__queue li { display: inline-block; vertical-align: top; width: 30%; margin: 0 2% 0 0; }
  .rk-tv-scene__queue .rk-tv-scene__label { margin-bottom: 8px; }
  .rk-tv-scene__footer { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rk-tv-scene__audio { max-width: 100%; }
  .rk-tv-scene__url { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rk-tv-scene__now, .rk-tv-scene__queue, .rk-tv-scene__audio { transition: none; }
}