/* Decorative boombox speaker (shared/_speaker) — the ADR-015 hardware,
   restored for the album/artist detail pages (ADR-017). The cabinet frame
   follows the theme (accent border + offset shadow); the hardware inside —
   roller vent, knurled dial, metal woofer rings, VU meters — is anchored to
   realistic dark/metallic colours so dark and light themes both read as
   hi-fi gear. --speaker-pump (0..1, set per frame by speaker_controller.js
   from the persistent player's bass energy) drives the cone, dust cap and
   VU needles. Visibility is the layout's job: .detail-side hides it on
   narrow viewports. */

/* Cabinet — fills whatever height the layout column gives it. */
.speaker-chassis {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 480px;
  flex-direction: column;
  gap: 1rem;
  background: color-mix(in srgb, var(--text) 18%, #131318);
  border: 3px solid var(--accent);
  border-radius: 14px;
  padding: 1.25rem;
  box-shadow:
    inset 0 0 14px rgba(0, 0, 0, 0.55),
    8px 8px 0 var(--shadow);
}

/* Cylindrical roller vent with ribbed end caps */
.top-vent {
  height: 52px;
  background: #0b0b0e;
  border: 1px solid #33343c;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.vent-cap {
  flex: 0 0 22px;
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #3a3b43 0 2px, #101014 2px 5px);
  border: 1px solid #2a2b32;
}

.vent-roller {
  flex: 1;
  border-radius: 999px;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px),
    linear-gradient(180deg, #050507 0%, #43454e 42%, #6a6c78 52%, #2e2f36 68%, #050507 100%);
  background-size: 5px 5px, 100% 100%;
  border: 1px solid #2a2b32;
}

/* Knurled control dial, left-aligned under the vent */
.control-dial {
  width: 54px;
  height: 54px;
  margin-left: 4px;
  border-radius: 50%;
  background-color: #17181d;
  background-image: radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.4px);
  background-size: 6px 6px;
  border: 2px solid #3c3e47;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.7), 2px 2px 0 var(--shadow);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dial-center {
  width: 12px;
  height: 12px;
  background: radial-gradient(circle at 35% 35%, #cfd0d6, #55565e);
  border-radius: 50%;
}

/* Woofer: fine dark mesh inside a double metallic ring (box-shadow rings) */
.speaker-main {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 0;
}

.speaker-mesh {
  width: clamp(180px, 72%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--text) 18%, #0a0a0c);
  background-image: radial-gradient(color-mix(in srgb, var(--paper) 20%, transparent) 1px, transparent 1.3px);
  background-size: 4px 4px;
  position: relative;
  box-shadow:
    0 0 0 4px #c9cad0,
    0 0 0 11px #101014,
    0 0 0 15px #8f9098,
    0 10px 24px rgba(0, 0, 0, 0.5);
  /* --speaker-pump (0..1) is set per frame from the audio's bass energy */
  transform: scale(calc(1 + var(--speaker-pump, 0) * 0.04));
  transition: transform 0.08s ease-out;
}

/* Central dust cap — small, with an off-centre highlight */
.dust-cap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 19%;
  aspect-ratio: 1;
  background:
    radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.3px) 0 0 / 4px 4px,
    radial-gradient(circle at 32% 30%, #7f818c, #17181d 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(calc(1 + var(--speaker-pump, 0) * 0.25));
  transition: transform 0.08s ease-out;
  border: 1px solid #3c3e47;
}

/* Recessed VU-meter panel */
.vu-panel {
  background: #0d0d11;
  border: 2px solid #000;
  border-radius: 8px;
  padding: 0.6rem 0.6rem 0.35rem;
  box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8);
}

.vu-meters {
  display: flex;
  gap: 0.6rem;
}

.vu-meter {
  position: relative;
  flex: 1;
  aspect-ratio: 8 / 5;
  background: linear-gradient(180deg, #f4f1e4 0%, #e7e2d0 100%);
  border: 2px solid #17181d;
  border-radius: 3px;
  overflow: hidden;
}

/* Scale arcs: circles centred on the needle pivot; only the top border
   shows inside the face. Dashed = tick marks, solid = the green band. */
.vu-arc {
  position: absolute;
  left: 50%;
  bottom: -88%;
  width: 108%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 3px solid transparent;
}

.vu-arc--green {
  border-top-color: #3f8f5f;
}

.vu-arc--ticks {
  width: 88%;
  bottom: -72%;
  border-width: 2px;
  border-style: dashed;
  border-top-color: #26282f;
}

.vu-redzone {
  position: absolute;
  top: 26%;
  right: 12%;
  width: 3px;
  height: 14%;
  background: #c43c33;
  transform: rotate(32deg);
}

.vu-label {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  font-family: "Lato", sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #26282f;
}

.vu-needle {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 2px;
  height: 78%;
  background: #e0342b;
  border-radius: 1px;
  transform-origin: 50% 100%;
  transform: rotate(calc(-48deg + var(--speaker-pump, 0) * 90deg));
  transition: transform 0.08s ease-out;
}

.vu-meter--right .vu-needle {
  transform: rotate(calc(-48deg + var(--speaker-pump, 0) * 82deg));
}

.vu-pivot {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  background: #17181d;
  border-radius: 50%;
}

.vu-panel-label {
  margin-top: 0.4rem;
  text-align: center;
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #4a4c56;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}