:root {
  --fg: #f4f4f4;
  --dim: rgba(244, 244, 244, 0.7);
  --glass: rgba(0, 0, 0, 0.55);
  --accent: #e23b3b;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #000;
  color: var(--fg);
  font: 15px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

body.idle { cursor: none; }

video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  cursor: pointer;
}

#sound {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(8px);
  transition: opacity 0.4s, background 0.2s;
}

#sound:hover { background: rgba(0, 0, 0, 0.75); }
#sound svg { width: 26px; height: 26px; fill: currentColor; }
#sound .on, #sound.muted .off { display: block; }
#sound .off, #sound.muted .on { display: none; }
body.idle #sound:not(.muted) { opacity: 0; }

#play {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: var(--glass);
  font-size: 40px;
  padding-left: 8px;
}

#info {
  position: fixed;
  left: calc(20px + env(safe-area-inset-left, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  max-width: min(560px, calc(100% - 112px));
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s, transform 0.6s;
  pointer-events: none;
}

#info.show { opacity: 1; transform: none; }

#live {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--dim);
}

#live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

#title {
  margin-top: 4px;
  font-size: 20px;
  font-weight: 600;
}

#next {
  margin-top: 6px;
  color: var(--dim);
  font-size: 13px;
}

#next:empty { display: none; }

@media (max-width: 480px) {
  #title { font-size: 17px; }
  #info { left: 16px; bottom: 16px; max-width: calc(100% - 96px); }
  #sound { right: 16px; bottom: 16px; width: 48px; height: 48px; }
}