/* The Emerald skin. The cabinet is a looping video of the user's green
   Wurlitzer render (lava-lamp pillars, 816x1104 source); everything here
   positions live panels on top of it where the render draws its own. Offsets
   are percentages of the cabinet and type is sized in cqw, so the whole thing
   scales as one unit at any width - the Neon technique, see
   docs/superpowers/specs/2026-10-03-emerald-skin-design.md */

[data-skin="emerald"] {
  --em: #39ff6a;
  --em-bright: #c8ffd6;
  --em-dim: #1b8a3c;
  --em-faint: rgba(57, 255, 106, 0.35);
  /* Fully opaque: at 95% the render's baked "01 CoastalBlue" screen still
     ghosted through, and the bass pulse brightens the video beneath. */
  --glass: #020c06;
  --panel: #020603;
}

[data-skin="emerald"] body {
  background: #000;
  font-family: 'Orbitron', monospace;
}

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

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

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

[data-skin="emerald"] .cabinet-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 0;
  /* The low end of the EQ stream (see jukebox-app.js) sets --bass on the
     cabinet; the whole machine's glow swells with it. */
  filter: brightness(calc(1 + var(--bass, 0) * 0.28));
  transition: filter 0.12s linear;
}

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

/* --- Nameplate -------------------------------------------------------------
   The render's chrome "Wurlitzer" lettering sits on a black plate across the
   crown. Ours is the same plate with the JAMZ name on it. */
[data-skin="emerald"] .jukebox-top {
  position: absolute;
  left: 24%;
  width: 52%;
  top: 1.0%;
  height: 3.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border-radius: 0.8cqw;
  padding: 0;
  border: none;
}
[data-skin="emerald"] .jukebox-title {
  font-family: 'Orbitron', monospace;
  font-size: 18px;
  font-size: 3.6cqw;
  font-weight: 900;
  letter-spacing: 0.7cqw;
  text-transform: uppercase;
  color: var(--em-bright);
  text-shadow: 0 0 1.6cqw var(--em), 0 0 4cqw rgba(57, 255, 106, 0.6);
  white-space: nowrap;
}

/* --- Screen ----------------------------------------------------------------
   The render's own now-playing screen, between the title-card strips. */
[data-skin="emerald"] .display {
  position: absolute;
  left: 36.5%;
  width: 27.0%;
  top: 27.2%;
  height: 13.4%;
  margin: 0;
  padding: 1cqw 1.6cqw 1.1cqw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass);
  border-radius: 1cqw;
  box-shadow: inset 0 0 2.4cqw rgba(57, 255, 106, 0.12);
}

[data-skin="emerald"] .now-playing-label {
  font-size: 7px;
  font-size: 1.5cqw;
  letter-spacing: 0.3cqw;
  text-transform: uppercase;
  color: var(--em-dim);
  text-align: left;
}
[data-skin="emerald"] #now-playing-area { text-align: center; }

[data-skin="emerald"] .song-title {
  font-size: 15px;
  font-size: 3.1cqw;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 1.6cqw rgba(57, 255, 106, 0.8);
  margin-top: 0.5cqw;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
[data-skin="emerald"] .song-album {
  font-size: 9px;
  font-size: 1.9cqw;
  letter-spacing: 0.15cqw;
  color: var(--em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-skin="emerald"] .idle-text {
  font-size: 10px;
  font-size: 2.2cqw;
  letter-spacing: 0.5cqw;
  color: var(--em-dim);
  padding: 2cqw 0;
  animation: blink 2s step-end infinite;
}

/* The EQ takes whatever height the screen has left so the progress row stays
   pinned at the bottom of the glass, like the render's "2:36 / 5:14". */
[data-skin="emerald"] .eq-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0.35cqw;
  flex: 1;
  min-height: 0;
  margin: 0.8cqw 0 0.6cqw;
}
[data-skin="emerald"] .eq-bar {
  flex: 1;
  max-width: 1.1cqw;
  min-height: 2px;
  height: 2px;
  border-radius: 0.2cqw 0.2cqw 0 0;
  background: linear-gradient(180deg, var(--em-bright), var(--em) 45%, var(--em-dim));
  box-shadow: 0 0 1cqw rgba(57, 255, 106, 0.6);
  transition: height 0.08s linear;
}

[data-skin="emerald"] .progress {
  display: flex;
  align-items: center;
  gap: 1cqw;
}
[data-skin="emerald"] .progress-time {
  font-size: 7px;
  font-size: 1.6cqw;
  color: var(--em);
  min-width: 4.4cqw;
}
[data-skin="emerald"] .progress-time#progress-total { text-align: right; }
[data-skin="emerald"] .progress-track {
  flex: 1;
  height: 0.45cqw;
  border-radius: 0.3cqw;
  background: rgba(57, 255, 106, 0.22);
  position: relative;
}
[data-skin="emerald"] .progress-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  border-radius: 0.3cqw;
  background: var(--em-bright);
  box-shadow: 0 0 1.2cqw var(--em);
}

/* --- Control panel: lamps -------------------------------------------------
   The black control band under the title cards has a lit round lamp at each
   end. Left lamp = play/pause, right lamp = volume. The section itself spans
   the whole band but lets clicks through; only the lamps catch them. */
[data-skin="emerald"] .audio-section {
  position: absolute;
  left: 3.3%;
  width: 93.7%;
  top: 41.8%;
  height: 10.2%;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
[data-skin="emerald"] .transport {
  position: static;
  display: block;
  height: 100%;
}

[data-skin="emerald"] .transport-btn {
  position: absolute;
  left: 1.0%;
  width: 9.6%;
  top: 9.7%;
  height: 41.6%;
  pointer-events: auto;
  border-radius: 999px;
  border: 0.3cqw solid var(--em-dim);
  background: radial-gradient(ellipse at 50% 40%, #0f3a1c, #041208 75%);
  color: var(--em-dim);
  font-size: 12px;
  font-size: 2.8cqw;
  line-height: 1;
  cursor: pointer;
  transition: .18s;
  box-shadow: inset 0 0 1.6cqw rgba(0, 0, 0, 0.6);
}
[data-skin="emerald"] .jukebox[data-playing] .transport-btn {
  border-color: var(--em);
  background: radial-gradient(ellipse at 50% 35%, var(--em-bright), var(--em) 55%, #1b8a3c);
  color: #04140a;
  box-shadow: 0 0 2.4cqw rgba(57, 255, 106, 0.9), 0 0 5cqw rgba(57, 255, 106, 0.5);
}
[data-skin="emerald"] .transport-btn:hover { filter: brightness(1.15); }

/* Previous sits on the render's SELECT placard, next on its coin slot - two
   decorations the machine never needed, now the back and forward buttons.
   Dim glass by default, lit on hover/press. */
[data-skin="emerald"] .transport-btn--step {
  left: 13.2%;
  width: 9.6%;
  top: 12%;
  height: 48%;
  border-radius: 1cqw;
  border-color: var(--em-dim);
  background: linear-gradient(180deg, #0a2a12, #030c06);
  color: var(--em);
  font-size: 3cqw;
  filter: drop-shadow(0 0 0.8cqw rgba(57, 255, 106, 0.6));
}
[data-skin="emerald"] .jukebox[data-playing] .transport-btn--step {
  border-color: var(--em-dim);
  background: linear-gradient(180deg, #0a2a12, #030c06);
  color: var(--em);
  box-shadow: inset 0 0 1.6cqw rgba(0, 0, 0, 0.6);
}
[data-skin="emerald"] #next-btn { left: 75.4%; width: 10.2%; }
[data-skin="emerald"] .transport-btn--step:hover,
[data-skin="emerald"] .transport-btn--step:active {
  background: linear-gradient(180deg, #1b8a3c, #0a2a12);
  color: var(--em-bright);
  border-color: var(--em);
  box-shadow: 0 0 2.4cqw rgba(57, 255, 106, 0.7);
}

[data-skin="emerald"] .volume {
  position: absolute;
  left: 89.5%;
  width: 7.4%;
  top: 8.8%;
  height: 41.6%;
  display: block;
  pointer-events: auto;
}
[data-skin="emerald"] .volume-icon {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 0.3cqw solid var(--em);
  background: radial-gradient(ellipse at 50% 35%, var(--em-bright), var(--em) 55%, #1b8a3c);
  color: #04140a;
  font-size: 12px;
  font-size: 2.8cqw;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 2.4cqw rgba(57, 255, 106, 0.8), 0 0 5cqw rgba(57, 255, 106, 0.45);
}
/* The slider slides out leftward along the band when the lamp is tapped. */
[data-skin="emerald"] .volume-slider {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: 118%;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  opacity: 0;
  height: 1cqw;
  margin: 0;
  border-radius: 0.35cqw;
  background: rgba(57, 255, 106, 0.35);
  /* Dark halo so the track reads where it crosses the coin slot. */
  box-shadow: 0 0 0 0.6cqw rgba(0, 0, 0, 0.85), 0 0 1.6cqw rgba(57, 255, 106, 0.5);
  cursor: pointer;
  transition: width .25s ease, opacity .2s ease;
}
[data-skin="emerald"] .volume.open .volume-slider {
  width: 34cqw;
  opacity: 1;
}
[data-skin="emerald"] .volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 50%;
  background: var(--em-bright);
  box-shadow: 0 0 2cqw var(--em);
}
[data-skin="emerald"] .volume-slider::-moz-range-thumb {
  width: 2.6cqw;
  height: 2.6cqw;
  border: none;
  border-radius: 50%;
  background: var(--em-bright);
  box-shadow: 0 0 2cqw var(--em);
}

/* --- Selections band + Up Next -------------------------------------------
   The render's "200 SELECTIONS" strip and the two rows of selector buttons
   under it. The strip becomes the live library count ("607 SELECTIONS");
   the button rows become the Up Next line. */
[data-skin="emerald"] .queue-section {
  position: absolute;
  left: 26.3%;
  width: 46.9%;
  top: 42.4%;
  height: 8.5%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--panel);
  border-radius: 0.8cqw;
}

[data-skin="emerald"] .library-count {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 42%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-size: 2.6cqw;
  letter-spacing: 0.55cqw;
  text-transform: uppercase;
  color: var(--em);
  text-shadow: 0 0 1.4cqw rgba(57, 255, 106, 0.7);
  white-space: nowrap;
  padding: 0;
  border: none;
  margin: 0;
}
[data-skin="emerald"] .library-count .lc-word { display: none; }
[data-skin="emerald"] .library-count .lc-num { color: var(--em-bright); }
[data-skin="emerald"] .library-count:not(:empty)::after { content: '\00a0SELECTIONS'; }

[data-skin="emerald"] .queue-list {
  position: absolute;
  left: 2.4cqw; right: 2.4cqw;
  top: 44%;
  bottom: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}
[data-skin="emerald"] .queue-item { width: 100%; min-width: 0; }
[data-skin="emerald"] .queue-item + .queue-item { display: none; }

[data-skin="emerald"] .queue-item .q-title {
  color: #fff;
  font-size: 11px;
  font-size: 2.3cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 1.2cqw rgba(57, 255, 106, 0.5);
}
[data-skin="emerald"] .queue-item .q-title::before {
  content: 'UP NEXT  ';
  font-size: 0.7em;
  letter-spacing: 0.25cqw;
  color: var(--em-dim);
  white-space: pre;
}
[data-skin="emerald"] .queue-item .q-artist {
  color: var(--em);
  font-size: 9px;
  font-size: 1.8cqw;
  letter-spacing: 0.15cqw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.3cqw;
}
/* The tag is pinned to the right edge of the line so a long title ellipsizes
   and the tag stays whole, instead of the ellipsis eating the tag. */
[data-skin="emerald"] .queue-item .q-title { position: relative; }
[data-skin="emerald"] .queue-item .q-title:has(.q-tag) { padding-right: 10cqw; }
[data-skin="emerald"] .q-tag {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 7px;
  font-size: 1.4cqw;
  letter-spacing: 0.25cqw;
  color: #04140a;
  background: var(--em);
  padding: 0.15cqw 0.8cqw;
  border-radius: 0.3cqw;
  margin-left: 0;
  text-shadow: none;
}
[data-skin="emerald"] .queue-empty {
  color: var(--em-dim);
  font-size: 10px;
  font-size: 2.1cqw;
  font-style: italic;
  padding: 0;
}

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

/* Crop the cabinet to the machine outline so it floats over the room
   backdrop instead of sitting in the render's black rectangle. Generated:
   python tools/trace_silhouette.py public/skins/emerald.mp4 720 974 30 936
   (936 = first floor-reflection row; the reflection is bright enough to pass
   the tool's sparse-row trim, so it is cut explicitly). The first two and
   last two points are hand-set to the nameplate: the render's plate runs
   20.6%-78.6% x 1.0%-4.4%, but it is deliberately cut narrower (24%-76%) so
   the marquee just wraps the JAMZ JUKEBOX title instead of carrying the
   render's wider black face either side of it. The .jukebox-top rule below
   must match these numbers. */
[data-skin="emerald"] .jukebox {
  clip-path: polygon(76.0% 1.0%, 76.0% 4.4%, 86.6% 4.6%, 93.1% 5.9%, 94.8% 7.1%, 94.9% 8.3%, 93.8% 9.5%, 94.1% 10.8%, 94.4% 12.0%, 94.8% 13.2%, 95.1% 14.5%, 95.2% 15.7%, 95.5% 16.9%, 95.6% 18.2%, 95.8% 19.4%, 95.9% 20.6%, 96.1% 21.9%, 96.2% 23.1%, 96.3% 24.3%, 96.5% 25.6%, 96.8% 26.8%, 96.9% 28.0%, 97.0% 29.3%, 97.3% 30.5%, 97.4% 31.7%, 97.6% 33.0%, 97.7% 34.2%, 97.9% 35.4%, 98.0% 36.7%, 98.1% 37.9%, 98.3% 39.1%, 98.4% 40.3%, 98.6% 41.6%, 99.5% 42.8%, 99.7% 44.0%, 98.8% 45.3%, 99.4% 46.5%, 99.1% 47.7%, 99.7% 49.0%, 99.2% 50.2%, 98.4% 51.4%, 98.3% 52.7%, 98.1% 53.9%, 98.0% 55.1%, 97.9% 56.4%, 97.7% 57.6%, 97.6% 58.8%, 97.3% 60.1%, 97.2% 61.3%, 97.0% 62.5%, 96.9% 63.8%, 96.8% 65.0%, 96.6% 66.2%, 96.5% 67.5%, 96.3% 68.7%, 96.2% 69.9%, 96.1% 71.1%, 95.9% 72.4%, 95.8% 73.6%, 95.6% 74.8%, 95.5% 76.1%, 95.4% 77.3%, 95.2% 78.5%, 95.1% 79.8%, 94.9% 81.0%, 94.8% 82.2%, 94.7% 83.5%, 94.5% 84.7%, 94.4% 85.9%, 94.2% 87.2%, 94.0% 88.4%, 94.1% 89.6%, 93.6% 90.9%, 93.4% 92.1%, 93.1% 93.3%, 92.9% 94.6%, 92.3% 95.8%, 92.2% 96.0%, 7.3% 96.0%, 7.4% 95.8%, 6.4% 94.6%, 6.3% 93.3%, 6.2% 92.1%, 5.9% 90.9%, 5.3% 89.6%, 5.5% 88.4%, 5.3% 87.2%, 5.1% 85.9%, 4.9% 84.7%, 4.8% 83.5%, 4.6% 82.2%, 4.5% 81.0%, 4.4% 79.8%, 4.2% 78.5%, 4.1% 77.3%, 3.9% 76.1%, 3.8% 74.8%, 3.7% 73.6%, 3.5% 72.4%, 3.4% 71.1%, 3.2% 69.9%, 3.1% 68.7%, 3.0% 67.5%, 2.8% 66.2%, 2.7% 65.0%, 2.6% 63.8%, 2.4% 62.5%, 2.3% 61.3%, 2.0% 60.1%, 2.0% 58.8%, 1.7% 57.6%, 1.6% 56.4%, 1.4% 55.1%, 1.3% 53.9%, 1.2% 52.7%, 0.9% 51.4%, 0.2% 50.2%, 0.0% 49.0%, 0.0% 47.7%, 0.1% 46.5%, 0.3% 45.3%, 0.0% 44.0%, 0.0% 42.8%, 0.6% 41.6%, 0.8% 40.3%, 0.9% 39.1%, 1.0% 37.9%, 1.2% 36.7%, 1.3% 35.4%, 1.4% 34.2%, 1.7% 33.0%, 1.9% 31.7%, 2.0% 30.5%, 2.1% 29.3%, 2.3% 28.0%, 2.6% 26.8%, 2.7% 25.6%, 2.8% 24.3%, 3.0% 23.1%, 3.1% 21.9%, 3.4% 20.6%, 3.5% 19.4%, 3.7% 18.2%, 3.8% 16.9%, 3.9% 15.7%, 4.2% 14.5%, 4.4% 13.2%, 5.2% 12.0%, 5.3% 10.8%, 5.5% 9.5%, 4.5% 8.3%, 4.8% 7.1%, 5.9% 5.9%, 16.6% 4.6%, 24.0% 4.4%, 24.0% 1.0%);
}

/* The visualizer overlay is otherwise amber/green (classic.css), but on Emerald
   it gets the deep green "black stage" look instead, to match the skin. */
[data-skin="emerald"] .viz-top,
[data-skin="emerald"] .viz-modes {
  background: linear-gradient(180deg, #03190b 0%, #020d06 100%);
}
[data-skin="emerald"] .viz-top { border-bottom: 2px solid #1b8a3c; }
[data-skin="emerald"] .visualizer-view.immersive .viz-top { background: transparent; border-bottom: none; }
[data-skin="emerald"] .viz-modes { border-top: 2px solid #1b8a3c; }
[data-skin="emerald"] .viz-brand {
  color: #c8ffd6;
  text-shadow: 0 0 10px #39ff6a;
}
[data-skin="emerald"] .viz-back { color: #1b8a3c; }
[data-skin="emerald"] .viz-back:hover { color: #39ff6a; }
[data-skin="emerald"] .viz-nowplaying {
  background: #04140a;
  border: 2px solid #1b8a3c;
  box-shadow: inset 0 0 20px rgba(57, 255, 106, 0.1), 0 0 10px rgba(57, 255, 106, 0.25);
}
[data-skin="emerald"] .viz-immersive-btn {
  background: rgba(3, 10, 16, 0.55);
  border-color: #1b8a3c; color: #1b8a3c;
}
[data-skin="emerald"] .viz-immersive-btn:hover { border-color: #39ff6a; color: #39ff6a; }
[data-skin="emerald"] .visualizer-view.immersive .viz-immersive-btn {
  border-color: #39ff6a; color: #c8ffd6;
  background: rgba(3, 18, 28, 0.55);
  text-shadow: 0 0 6px rgba(57, 255, 106, 0.4);
}
[data-skin="emerald"] .viz-np-title {
  color: #c8ffd6;
  text-shadow: 0 0 8px #39ff6a;
}
[data-skin="emerald"] .viz-mode-btn {
  border-color: rgba(57, 255, 106, 0.25);
  color: #1b8a3c;
}
[data-skin="emerald"] .viz-mode-btn:hover {
  border-color: #39ff6a;
  color: #c8ffd6;
}
[data-skin="emerald"] .viz-mode-btn.active {
  border-color: #39ff6a;
  color: #c8ffd6;
  background: rgba(57, 255, 106, 0.12);
  text-shadow: 0 0 6px rgba(57, 255, 106, 0.6);
}
[data-skin="emerald"] .viz-md-controls { background: #020d06; }
[data-skin="emerald"] .viz-preset-name {
  color: #c8ffd6; text-shadow: 0 0 8px rgba(57, 255, 106, 0.6);
  background: rgba(3, 10, 16, 0.55); border-color: #1b8a3c;
}
[data-skin="emerald"] .viz-fav-card {
  background: #04140a; border-color: #1b8a3c;
  box-shadow: 0 0 24px rgba(57, 255, 106, 0.25);
}
[data-skin="emerald"] .viz-fav-head { color: #c8ffd6; border-bottom-color: rgba(57, 255, 106, 0.25); }
[data-skin="emerald"] .viz-fav-close, [data-skin="emerald"] .viz-fav-remove { border-color: rgba(57, 255, 106, 0.25); color: #1b8a3c; }
[data-skin="emerald"] .viz-fav-close:hover { border-color: #39ff6a; color: #c8ffd6; }
[data-skin="emerald"] .viz-fav-name { color: #1b8a3c; }
[data-skin="emerald"] .viz-fav-name:hover { border-color: #39ff6a; color: #c8ffd6; }
[data-skin="emerald"] .viz-fav-empty { color: #1b8a3c; }