/*
 * TASG final boombox interaction layer.
 * One intrinsic coordinate system only: 672x464.
 * The viewport may resize/reposition the whole radio, but never rearranges
 * its display or transport controls independently.
 */

.music-machine {
  position: relative;
  aspect-ratio: 672 / 464 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  overflow: visible;
}

.boombox-art {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: 0 !important;
  object-fit: contain !important;
  /* SONOPLASTA: the source asset contains a 2px bright seam near x=4..5.
     Clip only that baked artifact; keep the radio's layout box unchanged. */
  clip-path: inset(0 0 0 0.9%);
  user-select: none;
  -webkit-user-drag: none;
}

.library-button {
  display: none !important;
}

.music-machine::after {
  content: none !important;
  display: none !important;
}

/*
 * Display geometry measured from Bobby's final Home reference and mapped
 * back into the same intrinsic 672×464 coordinate space as the radio.
 * Polygon: TL 183,136 · TR 548,120 · BR 548,159 · BL 183,178.
 */
.boombox-display-overlay {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  overflow: visible;
  pointer-events: none;
  z-index: 8;
}

.boombox-display-glass {
  fill: #060808;
  stroke: none;
}

.boombox-display-overlay #track-title {
  fill: #eee9dc;
  font-family: "Courier New", Courier, monospace;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.6px;
  dominant-baseline: middle;
  paint-order: stroke;
  stroke: rgba(255,255,255,0.08);
  stroke-width: 0.35px;
}

/*
 * The control layer covers exactly the same box as the 672x464 artwork.
 * Buttons are transparent hotspots over the five physical transport keys.
 */
.player-controls {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  transform: none !important;
  pointer-events: none;
  z-index: 9;
}

.player-controls .boombox-hotspot {
  position: absolute;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  text-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(200, 120, 53, 0.24);
}

/* Five keys measured against the final 672x464 artwork. */
#stop-track {
  left: 42.35% !important;
  top: 82.15% !important;
  width: 5.65% !important;
  height: 9.4% !important;
}

#prev-track {
  left: 48.45% !important;
  top: 82.15% !important;
  width: 5.65% !important;
  height: 9.4% !important;
}

#play-track {
  left: 54.45% !important;
  top: 82.15% !important;
  width: 5.65% !important;
  height: 9.4% !important;
}

#next-track {
  left: 60.55% !important;
  top: 82.15% !important;
  width: 5.65% !important;
  height: 9.4% !important;
}

#pause-track {
  left: 66.65% !important;
  top: 82.15% !important;
  width: 5.65% !important;
  height: 9.4% !important;
}

.player-controls .boombox-hotspot:focus-visible {
  outline: 2px solid #ffd895 !important;
  outline-offset: 1px;
  background: rgba(255, 216, 149, 0.12) !important;
}

/* Optional calibration mode for development only. */
.music-machine.debug-hotspots .boombox-hotspot {
  background: rgba(0, 255, 0, 0.40) !important;
  outline: 1px solid lime !important;
}

/* SONOPLASTA: boombox.webp and boombox-final-static.webp are both
   672x464, but the physical radio is not registered pixel-for-pixel between
   the two files. Pixel matching measured the restore source at ~98.86% width,
   ~97.74% height, offset ~0.91% right and ~1.30% down. Register the source
   first, then expose only the tight bezel around the physical display. */
.boombox-bezel-restore {
  position: absolute;
  left: 0.91%;
  top: 1.30%;
  display: block;
  width: 98.86% !important;
  height: 97.74% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: fill;
  clip-path: polygon(
    25.59% 25.09%,
    83.70% 21.48%,
    83.70% 35.59%,
    25.60% 39.86%
  );
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  z-index: 7;
}
.player-controls .boombox-hotspot::before,
.player-controls .boombox-hotspot::after { content: none !important; }