@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Special+Elite&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #0a0a0a;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Special Elite', cursive;
}

@keyframes marquee-scroll {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--scroll-distance)); }
}

@keyframes blink {
  50% { opacity: 0; }
}

.song-title-text { display: inline-block; }

.song-title.scrolling .song-title-text {
  animation-name: marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Room backdrop - fills the viewport behind the cabinet in both skins. A
   negative z-index paints it above the body's background colour but under
   everything else, so no other element needs a stacking context. */
.backdrop-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Someone who has asked for less motion keeps the plain dark room. */
@media (prefers-reduced-motion: reduce) {
  .backdrop-video { display: none; }
}

/* Cabinet visibility - the machine goes away, the room and the music stay.
   display:none does not pause the <audio> inside, so playback is unaffected. */
[data-cabinet="hidden"] .jukebox { display: none; }

/* Skin switcher, hide toggle, and visualize - a stack of three fixed pills,
   same position and shape in both skins, colours per skin. Kept as plain
   top-level buttons (not nested in .jukebox) deliberately: .jukebox carries
   a clip-path in the Neon skin, and any fixed-position descendant nested
   inside it stops painting/hit-testing in Chromium regardless of its own
   computed position - these three stay siblings of .jukebox to never hit
   that trap. */
.skin-toggle,
.hide-toggle,
.viz-btn {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 50;
  font-family: 'Orbitron', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 14px;
  min-width: 128px;
  text-align: center;
  border-radius: 999px;
  cursor: pointer;
  transition: .18s;
  background: transparent;
}
.hide-toggle { top: calc(58px + env(safe-area-inset-top)); }
.viz-btn { top: calc(100px + env(safe-area-inset-top)); }