/* The Neon skin. The cabinet is a looping video of the machine; everything
   here positions live panels on top of it. Offsets are percentages of the
   cabinet and type is sized in cqw, so the whole thing scales as one unit at
   any width - see docs/superpowers/specs/2026-07-26-neon-video-cabinet-design.md */

[data-skin="neon"] {
  --ice: #3fc8ff;
  --ice-bright: #b8ecff;
  --ice-dim: #1a7fb0;
  --ice-faint: rgba(63, 200, 255, 0.35);
  /* Opaque enough to hide the render's baked-in song text underneath. */
  --glass: rgba(6, 15, 25, 0.94);
}

/* Pure black, matching the render's own backdrop. Any page glow at all shows
   up as a rectangle where it meets the video's black - measured at #020a10
   against #000000, which is faint but plainly visible. The machine carries
   its own light; the room around it does not need any. */
[data-skin="neon"] body {
  background: #000;
  font-family: 'Orbitron', monospace;
}

/* Classic-only furniture, and the parts the render draws for us. */
[data-skin="neon"] .chrome-bar,
[data-skin="neon"] .divider,
[data-skin="neon"] .song-title--full,
[data-skin="neon"] .jukebox-top,
[data-skin="neon"] audio { display: none; }

[data-skin="neon"] .skin-toggle,
[data-skin="neon"] .hide-toggle,
[data-skin="neon"] .viz-btn {
  color: var(--ice-bright);
  border: 1px solid var(--ice-faint);
  box-shadow: 0 0 12px rgba(63, 200, 255, 0.25);
}
[data-skin="neon"] .skin-toggle:hover,
[data-skin="neon"] .hide-toggle:hover,
[data-skin="neon"] .viz-btn:hover {
  background: rgba(63, 200, 255, 0.12);
  border-color: var(--ice);
  box-shadow: 0 0 18px rgba(63, 200, 255, 0.5);
}

/* The cabinet. 53/66 is 848x1056 - the render's own aspect - reduced, so the
   box always matches the video and the percentage offsets below stay true. */
[data-skin="neon"] .jukebox {
  position: relative;
  width: min(480px, 100%);
  aspect-ratio: 53 / 66;
  container-type: size;
}

[data-skin="neon"] .neon-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
  /* The fade that keeps the render's floor glow from ending in a hard line is
     baked into the asset, not applied here - a CSS mask on the video element
     was silently ignored while the identical mask on a div worked. */
}

[data-skin="neon"] .jukebox-body {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* --- Panels --------------------------------------------------------------
   All three sit where the render's own panels are, slightly inset so its
   glass edge still frames them and small misalignments can't show as a
   doubled border. */
[data-skin="neon"] .display,
[data-skin="neon"] .audio-section,
[data-skin="neon"] .queue-section {
  position: absolute;
  left: 23.4%;
  right: 23.4%;
  margin: 0;
  overflow: hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 3cqw;
}

[data-skin="neon"] .display {
  top: 25.4%;
  height: 29.6%;
  display: flex;
  flex-direction: column;
  padding: 2.4cqw 3.4cqw;
}

[data-skin="neon"] .audio-section {
  top: 56.4%;
  height: 10.4%;
}

[data-skin="neon"] .queue-section {
  top: 68.8%;
  height: 11.2%;
  padding: 1.4cqw 3.4cqw;
}

/* --- Now playing --------------------------------------------------------- */
[data-skin="neon"] .now-playing-label,
[data-skin="neon"] .queue-label {
  font-size: 9px;
  font-size: 1.9cqw;
  letter-spacing: 0.35cqw;
  text-transform: uppercase;
  color: var(--ice);
}

[data-skin="neon"] #now-playing-area {
  text-align: center;
}

[data-skin="neon"] .now-playing-label {
  text-align: left;
}

[data-skin="neon"] .song-title {
  font-size: 26px;
  font-size: 5.4cqw;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 3cqw rgba(63, 200, 255, 0.75);
  margin-top: 1.4cqw;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

[data-skin="neon"] .song-album {
  font-size: 13px;
  font-size: 2.9cqw;
  letter-spacing: 0.2cqw;
  color: var(--ice);
}

[data-skin="neon"] .idle-text {
  font-size: 14px;
  font-size: 3cqw;
  letter-spacing: 0.6cqw;
  color: var(--ice-dim);
  padding: 3cqw 0;
  animation: blink 2s step-end infinite;
}

/* The EQ takes whatever height the panel has left over, so the progress row
   below it stays pinned inside the render's panel rather than spilling out. */
[data-skin="neon"] .eq-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.6cqw;
  flex: 1;
  min-height: 0;
  margin: 1.6cqw 0;
}
[data-skin="neon"] .eq-bar {
  flex: 1;
  max-width: 1.9cqw;
  min-height: 2px;
  height: 2px;
  border-radius: 0.4cqw 0.4cqw 0 0;
  background: linear-gradient(180deg, var(--ice-bright), var(--ice) 45%, var(--ice-dim));
  box-shadow: 0 0 1.6cqw rgba(63, 200, 255, 0.6);
  transition: height 0.08s linear;
}

/* --- Progress ------------------------------------------------------------ */
[data-skin="neon"] .progress {
  display: flex;
  align-items: center;
  gap: 2cqw;
}
[data-skin="neon"] .progress-time {
  font-size: 11px;
  font-size: 2.4cqw;
  color: var(--ice-bright);
  min-width: 7cqw;
}
[data-skin="neon"] .progress-time#progress-total { text-align: right; }
[data-skin="neon"] .progress-track {
  flex: 1;
  height: 0.6cqw;
  border-radius: 0.3cqw;
  background: rgba(63, 200, 255, 0.25);
  position: relative;
}
[data-skin="neon"] .progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 0.3cqw;
  background: var(--ice-bright);
  box-shadow: 0 0 1.6cqw var(--ice);
}
/* The playhead dot from the render. */
[data-skin="neon"] .progress-fill::after {
  content: '';
  position: absolute;
  right: -0.9cqw;
  top: 50%;
  width: 1.9cqw;
  height: 1.9cqw;
  margin-top: -0.95cqw;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 2cqw var(--ice);
}

/* --- Transport -----------------------------------------------------------
   Only play/pause and volume: the render also draws shuffle, previous and
   next, but this is a shared live broadcast where none of them can do
   anything, so this panel covers them. */
[data-skin="neon"] .transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5cqw;
  height: 100%;
  padding: 0 3.4cqw;
}

[data-skin="neon"] .transport-btn {
  width: 9.4cqw;
  height: 9.4cqw;
  border-radius: 50%;
  font-size: 3.4cqw;
  line-height: 1;
  cursor: pointer;
  color: var(--ice-bright);
  background: transparent;
  border: 0.4cqw solid var(--ice);
  box-shadow: 0 0 3cqw rgba(63, 200, 255, 0.45), inset 0 0 2.4cqw rgba(63, 200, 255, 0.25);
  transition: .18s;
}
[data-skin="neon"] .transport-btn:hover {
  background: rgba(63, 200, 255, 0.14);
  box-shadow: 0 0 4.6cqw rgba(63, 200, 255, 0.7);
}

[data-skin="neon"] .volume {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
}
[data-skin="neon"] .volume-icon { font-size: 3cqw; }
[data-skin="neon"] .volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 23cqw;
  height: 0.6cqw;
  border-radius: 0.3cqw;
  background: rgba(63, 200, 255, 0.3);
  cursor: pointer;
}
[data-skin="neon"] .volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.7cqw;
  height: 2.7cqw;
  border-radius: 50%;
  background: var(--ice-bright);
  box-shadow: 0 0 2cqw var(--ice);
}
[data-skin="neon"] .volume-slider::-moz-range-thumb {
  width: 2.7cqw;
  height: 2.7cqw;
  border: none;
  border-radius: 50%;
  background: var(--ice-bright);
  box-shadow: 0 0 2cqw var(--ice);
}

/* --- Up next -------------------------------------------------------------
   The render's panel is one row tall, so only the first queued song shows and
   the library count rides on the label's line. */
[data-skin="neon"] .queue-list {
  list-style: none;
  margin-top: 1cqw;
}
[data-skin="neon"] .queue-item + .queue-item { display: none; }

[data-skin="neon"] .queue-item .q-title {
  color: #fff;
  font-size: 14px;
  font-size: 3cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-skin="neon"] .queue-item .q-artist {
  color: var(--ice);
  font-size: 11px;
  font-size: 2.4cqw;
}

[data-skin="neon"] .q-tag {
  font-size: 8px;
  font-size: 1.7cqw;
  letter-spacing: 0.3cqw;
  color: #041720;
  background: var(--ice);
  padding: 0.2cqw 1cqw;
  border-radius: 0.4cqw;
  vertical-align: 0.4cqw;
  margin-left: 1.6cqw;
}

[data-skin="neon"] .queue-empty {
  color: var(--ice-dim);
  font-size: 13px;
  font-size: 2.7cqw;
  font-style: italic;
}

/* One line tall, so the count rides in the corner as a bare number - where
   the render puts a track duration. */
[data-skin="neon"] .library-count {
  position: absolute;
  right: 3.4cqw;
  bottom: 1.8cqw;
  font-size: 9px;
  font-size: 2.2cqw;
  letter-spacing: 0.3cqw;
  color: var(--ice-dim);
}
[data-skin="neon"] .library-count .lc-word { display: none; }
[data-skin="neon"] .library-count .lc-num { color: var(--ice-bright); }

/* Someone who has asked for less motion gets the cabinet as a still. */
@media (prefers-reduced-motion: reduce) {
  [data-skin="neon"] .neon-video { display: none; }
  [data-skin="neon"] .jukebox {
    background: url('/skins/neon-poster.jpg') center / 100% 100% no-repeat;
  }
}

/* Crop the cabinet to the machine's own outline so it floats over the
   room backdrop instead of sitting in the render's black rectangle.
   Generated from neon.mp4 by tracing the brightest extent of each row
   across 11 frames (so the moving glow is fully inside the shape). */
[data-skin="neon"] .jukebox {
  clip-path: polygon(50.9% 0.6%, 50.9% 1.9%, 61.3% 3.2%, 73.4% 4.6%, 77.6% 5.9%, 80.6% 7.3%, 83.0% 8.6%, 84.9% 9.9%, 86.8% 11.3%, 88.0% 12.6%, 89.2% 14.0%, 90.9% 15.3%, 91.3% 16.6%, 92.2% 18.0%, 93.3% 19.3%, 93.7% 20.6%, 94.4% 22.0%, 94.7% 23.3%, 95.2% 24.7%, 95.5% 26.0%, 96.2% 27.3%, 96.8% 28.7%, 96.9% 30.0%, 96.8% 31.4%, 96.6% 32.7%, 96.8% 34.0%, 96.5% 35.4%, 96.1% 36.7%, 96.1% 38.1%, 96.2% 39.4%, 96.3% 40.7%, 96.3% 42.1%, 96.3% 43.4%, 96.3% 44.8%, 96.5% 46.1%, 96.5% 47.4%, 96.3% 48.8%, 96.2% 50.1%, 96.2% 51.5%, 96.3% 52.8%, 96.2% 54.1%, 95.9% 55.5%, 96.1% 56.8%, 96.2% 58.1%, 95.9% 59.5%, 95.8% 60.8%, 96.1% 62.2%, 96.1% 63.5%, 96.1% 64.8%, 96.1% 66.2%, 96.1% 67.5%, 95.6% 68.9%, 95.6% 70.2%, 95.5% 71.5%, 96.3% 72.9%, 96.5% 74.2%, 96.8% 75.6%, 97.0% 76.9%, 97.0% 78.2%, 97.2% 79.6%, 97.0% 80.9%, 97.0% 82.3%, 96.8% 83.6%, 96.5% 84.9%, 96.3% 86.3%, 96.3% 87.6%, 97.0% 89.0%, 97.0% 90.3%, 97.9% 91.6%, 97.9% 93.0%, 97.4% 93.8%, 2.1% 93.8%, 1.3% 93.0%, 1.3% 91.6%, 1.4% 90.3%, 2.0% 89.0%, 3.1% 87.6%, 3.1% 86.3%, 3.0% 84.9%, 2.8% 83.6%, 2.6% 82.3%, 2.4% 80.9%, 2.4% 79.6%, 2.7% 78.2%, 2.7% 76.9%, 2.7% 75.6%, 3.1% 74.2%, 3.4% 72.9%, 3.9% 71.5%, 3.7% 70.2%, 3.5% 68.9%, 3.4% 67.5%, 3.4% 66.2%, 3.4% 64.8%, 3.2% 63.5%, 3.1% 62.2%, 3.1% 60.8%, 3.1% 59.5%, 3.1% 58.1%, 3.1% 56.8%, 3.1% 55.5%, 3.1% 54.1%, 3.0% 52.8%, 3.1% 51.5%, 3.1% 50.1%, 3.0% 48.8%, 3.0% 47.4%, 3.0% 46.1%, 3.0% 44.8%, 3.1% 43.4%, 3.0% 42.1%, 3.0% 40.7%, 3.0% 39.4%, 3.0% 38.1%, 3.1% 36.7%, 2.8% 35.4%, 2.7% 34.0%, 2.8% 32.7%, 2.7% 31.4%, 2.7% 30.0%, 2.8% 28.7%, 3.5% 27.3%, 4.2% 26.0%, 4.8% 24.7%, 5.2% 23.3%, 5.6% 22.0%, 6.2% 20.6%, 6.9% 19.3%, 7.6% 18.0%, 8.4% 16.6%, 9.4% 15.3%, 10.5% 14.0%, 11.7% 12.6%, 13.1% 11.3%, 14.9% 9.9%, 16.9% 8.6%, 19.4% 7.3%, 22.3% 5.9%, 26.4% 4.6%, 35.5% 3.2%, 44.5% 1.9%, 48.8% 0.6%);
}

/* The visualizer overlay is otherwise amber/green (classic.css), but on Neon
   it gets the icy blue "black stage" look instead, to match the skin. */
[data-skin="neon"] .viz-top,
[data-skin="neon"] .viz-modes {
  background: linear-gradient(180deg, #05141f 0%, #030a10 100%);
}
[data-skin="neon"] .viz-top { border-bottom: 2px solid #1a7fb0; }
[data-skin="neon"] .viz-modes { border-top: 2px solid #1a7fb0; }
[data-skin="neon"] .viz-brand {
  color: #b8ecff;
  text-shadow: 0 0 10px #3fc8ff;
}
[data-skin="neon"] .viz-back { color: #1a7fb0; }
[data-skin="neon"] .viz-back:hover { color: #3fc8ff; }
[data-skin="neon"] .viz-nowplaying {
  background: #05121c;
  border: 2px solid #1a7fb0;
  box-shadow: inset 0 0 20px rgba(63, 200, 255, 0.1), 0 0 10px rgba(63, 200, 255, 0.25);
}
[data-skin="neon"] .viz-np-title {
  color: #b8ecff;
  text-shadow: 0 0 8px #3fc8ff;
}
[data-skin="neon"] .viz-mode-btn {
  border-color: rgba(63, 200, 255, 0.25);
  color: #1a7fb0;
}
[data-skin="neon"] .viz-mode-btn:hover {
  border-color: #3fc8ff;
  color: #b8ecff;
}
[data-skin="neon"] .viz-mode-btn.active {
  border-color: #3fc8ff;
  color: #b8ecff;
  background: rgba(63, 200, 255, 0.12);
  text-shadow: 0 0 6px rgba(63, 200, 255, 0.6);
}