/* VinylPi 7.1 — the listening room. Scoped to Live; app.js owns all playback. */
body.v4-live-active {
  background: #130f0c;
}
.v7-live {
  --live-brass: #d7b57e;
  background:
    radial-gradient(ellipse at 50% 24%, #79502b35, transparent 55%),
    repeating-linear-gradient(90deg, #fff1 0, transparent 1px, transparent 160px),
    linear-gradient(180deg, #231a14, #100d0b 85%);
  color: #f4e6ce;
}
.v7-live .room {
  width: 100%;
  padding: 38px 32px 32px;
}
.v7-live .brand {
  position: relative;
  width: min(1120px, 100%);
  margin: 0 0 32px;
  padding: 0 0 25px;
  border-bottom: 1px solid #ae885638;
}
.v7-live .eyebrow {
  font-size: 10px;
  letter-spacing: 0.34em;
  color: #d7b57e;
  opacity: 1;
}
.v7-live h1 {
  font-size: clamp(56px, 7vw, 86px);
  letter-spacing: 0.18em;
  padding-left: 0.18em;
  margin: 12px 0 15px;
  color: #ffe9ba;
  text-shadow:
    0 2px 1px #000,
    0 0 30px #f5b65730;
}
.v7-live .live-badge {
  font-size: 9px;
  letter-spacing: 0.18em;
  background: #0e0b09;
  border-color: #b18b4a66;
  padding: 7px 13px;
  box-shadow: inset 0 1px 5px #000;
}
.v7-live .live-badge.idle {
  opacity: 1;
  color: #bba991;
}
.v7-live .live-room-label {
  position: absolute;
  left: 0;
  bottom: 29px;
  font:
    10px/1.8 Arial,
    sans-serif;
  letter-spacing: 0.24em;
  color: #baa488;
  text-align: left;
}
.v7-live .live-archive-link {
  position: absolute;
  right: 0;
  bottom: 25px;
  border: 1px solid #ac855740;
  background: #211810;
  color: #dfc6a0;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.v7-live .live-archive-link:hover {
  background: #42301f;
  border-color: #d7b57e;
}
.v7-live .listening-area {
  position: relative;
  width: min(1120px, 100%);
  grid-template-columns: minmax(130px, 200px) minmax(360px, 560px) minmax(130px, 200px);
  gap: 34px;
  padding-bottom: 23px;
}
.v7-live .listening-area::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: -18px;
  right: -18px;
  height: 23px;
  border-radius: 3px;
  border-top: 1px solid #f1cc8580;
  background: linear-gradient(#4f301a99, #1c100ad9), url('/v7/walnut.png');
  background-size: cover;
  box-shadow:
    0 2px 0 #080604,
    0 16px 30px #000a,
    inset 0 -4px 3px #120b08;
}
.v7-live .console {
  padding: 16px;
  border: 1px solid #a87743;
  border-radius: 8px 8px 3px 3px;
  background:
    linear-gradient(120deg, #8a4c1620, #180b0444),
    url('/v7/walnut.png') center/cover;
  box-shadow:
    inset 0 0 0 3px #2a170c,
    inset 0 0 0 4px #b68a5240,
    0 15px 30px #000a;
}
.v7-live .receiver {
  height: 138px;
  padding: 15px 17px;
  border: 3px solid #291d13;
  outline: 1px solid #cca97e60;
  border-radius: 3px;
  background:
    repeating-linear-gradient(0deg, #fff1 0px, #0001 1px, transparent 2px, transparent 3px),
    linear-gradient(110deg, #bba77f, #e7d9b8 30%, #a78e62 100%);
  box-shadow:
    inset 0 1px 2px #fff8,
    0 2px 5px #000b;
}
.v7-live .receiver-label {
  font-size: 9px;
  letter-spacing: 0.23em;
  color: #36291c;
  font-weight: 700;
}
.v7-live .meters {
  gap: 12px;
  margin-top: 15px;
}
.v7-live .meter {
  width: 110px;
  height: 57px;
  border: 4px solid #282219;
  border-radius: 4px;
  background: radial-gradient(ellipse at 50% 85%, #fff0af, #e6b858 85%);
  box-shadow:
    0 0 0 1px #8f754e,
    inset 0 2px 6px #744212a0,
    0 0 18px #ffb03b36;
}
.v7-live .meter::before {
  font-size: 6px;
  top: 6px;
}
.v7-live .meter::after {
  font-size: 7px;
  top: 22px;
  letter-spacing: 0.2em;
}
.v7-live .needle {
  height: 49px;
  bottom: -18px;
  background: #62321b;
}
.v7-live .receiver-controls {
  right: 18px;
  bottom: 24px;
  gap: 8px;
}
.v7-live .receiver-controls span {
  width: 24px;
  height: 24px;
  border: 1px solid #4d402b;
  background: conic-gradient(#847257, #e6dcc5, #9b8866, #f4e8c9, #847257);
  box-shadow:
    0 3px 3px #30200a88,
    inset 0 0 0 3px #d7c6a2;
}
.v7-live .receiver-controls span.active {
  background: #f9ce72;
  box-shadow:
    0 0 12px #ffad48,
    inset 0 0 0 3px #b78b44;
}
.v7-live .live-eq-presets {
  top: 12px;
  right: 12px;
  gap: 4px;
  transform: none;
}
.v7-live .eq-preset-strip .eq-label {
  font-size: 8px;
  opacity: 1;
  color: #473821;
}
.v7-live .eq-preset-button {
  min-height: 30px;
  padding: 6px 8px;
  font-size: 8px;
  border-radius: 3px;
  background: #473b2c;
  color: #f7e7c8;
  border-color: #453221;
  box-shadow:
    inset 0 1px 1px #fff3,
    0 1px 2px #0007;
}
.v7-live .eq-preset-button[aria-pressed='true'] {
  color: #25170b;
  background: linear-gradient(#fff0bb, #d9a148);
  box-shadow:
    0 0 9px #efb84b60,
    inset 0 1px #fff7;
}
.v7-live .turntable {
  height: 285px;
  margin-top: 13px;
  border: 3px solid #211811;
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 45% 25%, #67615344, transparent 70%),
    linear-gradient(140deg, #302d27, #141513);
  box-shadow:
    inset 0 0 0 1px #b69b694d,
    inset 0 0 20px #0008;
}
.v7-live .turntable::after {
  content: 'DIRECT DRIVE  /  33⅓';
  position: absolute;
  bottom: 13px;
  right: 16px;
  color: #b6a482;
  font:
    7px/1.4 Arial,
    sans-serif;
  letter-spacing: 0.17em;
}
.v7-live .platter {
  width: 250px;
  height: 250px;
  left: 43%;
  top: 49%;
  background: repeating-conic-gradient(#b9b3a0 0deg 1deg, #33312c 1deg 3deg);
  border: 3px solid #a9a18e;
  box-shadow:
    0 9px 15px #000c,
    inset 0 0 0 4px #363630;
}
.v7-live .record {
  inset: 7px;
  transform-origin: center;
  animation: vinyl-spin 1.82s linear infinite;
  animation-play-state: paused;
  background:
    conic-gradient(
      from 25deg,
      #ffffff09,
      #ffffff25 8%,
      #0000 15%,
      #0000 46%,
      #ffffff20 54%,
      #0000 61%
    ),
    repeating-radial-gradient(circle, #111 0px, #111 2px, #292929 3px, #151515 4px);
  box-shadow: 0 0 1px 2px #080808;
}
.v7-live .record-label {
  background: radial-gradient(circle at 35% 30%, #df9650, #a85229 75%);
  box-shadow: inset 0 0 0 1px #edba6780;
}
.v7-live .tonearm {
  left: var(--arm-left, 75%);
  right: auto;
  top: var(--arm-top, 17px);
  scale: 1;
  transform: rotate(0deg);
}
.v7-live .tonearm.playing {
  transform: rotate(var(--groove-angle, 10deg));
}
.v7-live .tonearm-arm {
  height: calc(var(--arm-length, 170px) - 28px);
}
.v7-live .cartridge {
  top: calc(var(--arm-length, 170px) - 9px);
}
.v7-live .record.spinning {
  animation-play-state: running;
}
.v7-live .speaker {
  height: 306px;
  border: 8px solid #42291a;
  border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, #d3ac7330 0px, #0007 1px, transparent 2px, transparent 4px),
    repeating-linear-gradient(90deg, #a98d6340 0px, #110e0a 1px, #1f1912 3px);
  box-shadow:
    inset 0 0 0 1px #b9945850,
    inset 0 0 22px #000,
    0 0 0 1px #a16e3c88,
    0 14px 25px #0009;
}
.v7-live .speaker::after {
  content: 'P / P';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: linear-gradient(#d6b783, #927344);
  color: #241c11;
  font:
    700 7px/1 Arial,
    sans-serif;
  letter-spacing: 0.22em;
  border: 1px solid #1a140d;
  box-shadow: 0 2px 3px #000;
}
.v7-live .tweeter {
  width: 69px;
  height: 69px;
  top: 29px;
  border: 6px solid #363027;
  background: radial-gradient(
    circle at 40% 35%,
    #857866,
    #24231f 28%,
    #070707 33%,
    #303029 53%,
    #0b0a09 56%
  );
  box-shadow:
    0 0 0 2px #100d09,
    0 0 0 3px #7f684f55,
    inset 0 0 12px #000;
}
.v7-live .woofer {
  width: 134px;
  height: 134px;
  bottom: 43px;
  border: 8px solid #292721;
  background: radial-gradient(
    circle at 45% 40%,
    #514d42,
    #171715 22%,
    #090909 24%,
    #38372e 26%,
    #28281f 50%,
    #111 55%,
    #3a382d 60%,
    #111 67%
  );
  box-shadow:
    0 0 0 3px #0d0d0b,
    0 0 0 4px #ad916433,
    inset 0 0 15px #000;
}
.v7-live .player-panel {
  width: min(1120px, 100%);
  margin: 30px 0 0;
  padding: 24px 30px;
  grid-template-columns: minmax(0, 1fr) auto 155px;
  gap: 30px;
  border: 1px solid #b591554d;
  border-radius: 5px;
  background: linear-gradient(110deg, #32291c, #191610 65%);
  box-shadow:
    inset 0 1px #f1d19515,
    0 10px 20px #0004;
}
.v7-live .small-label {
  color: #c3a373;
  font-size: 9px;
  letter-spacing: 0.18em;
  margin-bottom: 9px;
}
.v7-live #nowPlaying {
  font:
    24px/1.25 Georgia,
    serif;
  color: #f5e5c9;
  overflow-wrap: anywhere;
}
.v7-live #subtitle {
  font-size: 12px;
  color: #c3b39c;
  line-height: 1.6;
  margin-top: 6px;
}
.v7-live .playback-controls {
  gap: 16px;
}
.v7-live .play-button,
.v7-live .spin-play-button {
  min-height: 46px;
  min-width: 145px;
  border: 1px solid #f4d291;
  border-radius: 4px;
  background: linear-gradient(#f5dfa4, #c19450);
  color: #2b1a0b;
  box-shadow:
    inset 0 1px #fff8,
    0 3px 0 #6c4827,
    0 5px 10px #0006;
  font-size: 13px;
  font-weight: 700;
}
.v7-live .play-button:hover,
.v7-live .spin-play-button:hover {
  filter: brightness(1.12);
}
.v7-live .continuous-button {
  width: 42px;
  height: 42px;
  border: 1px solid #a083565e;
  color: #dcc8a4;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 20%, #61523a, #201b13 75%);
}
.v7-live .continuous-button[aria-pressed='true'] {
  color: #ffe4a0;
  border-color: #ecc279;
  box-shadow:
    0 0 13px #f9b95255,
    inset 0 0 5px #ce9c4160;
}
.v7-live .continuous-label {
  color: #b4a184;
  font-size: 7px;
  letter-spacing: 0.1em;
}
.v7-live .volume-area {
  gap: 12px;
  color: #c3a373;
  font-size: 9px;
  letter-spacing: 0.14em;
}
.v7-live input[type='range'] {
  accent-color: #dfb56f;
  cursor: pointer;
}
.v7-live #volumeSlider {
  width: 110px;
  min-height: 32px;
}
.v7-live .spin-history {
  width: min(1120px, 100%);
  margin: 44px 0 0;
  padding: 30px 32px;
  border: 1px solid #9f7d474d;
  border-radius: 5px;
  background: radial-gradient(ellipse at 20% 40%, #8e633a19, transparent 65%), #17130fe8;
  box-shadow:
    inset 0 1px #fff1,
    0 20px 35px #0003;
}
.v7-live .spin-history-heading {
  margin: 0;
  padding-bottom: 22px;
  border-bottom: 1px solid #b4935333;
}
.v7-live .spin-history-kicker {
  color: #b99b6e;
  font-size: 9px;
  letter-spacing: 0.22em;
}
.v7-live #spinHistoryTitle {
  margin: 7px 0 0;
  font:
    28px/1.2 Georgia,
    serif;
  letter-spacing: 0.05em;
  color: #f1dbb5;
}
.v7-live #spinHistoryCount {
  border: 1px solid #9c7c4755;
  background: #2d2317;
  color: #d5bd93;
  padding: 7px 11px;
  border-radius: 3px;
  font-size: 10px;
}
.v7-live .spin-showcase {
  width: 100%;
  grid-template-columns: minmax(240px, 0.42fr) minmax(0, 0.58fr);
  gap: 30px;
  margin: 25px auto 0;
}
.v7-live #spinDetailArt {
  width: clamp(230px, 25vw, 315px) !important;
}
.v7-live #spinDetail {
  padding-left: 0 !important;
  margin-top: 8px !important;
}
.v7-live #spinDetail .spin-detail-label {
  color: #b99b6e !important;
  font-size: 9px !important;
  letter-spacing: 0.19em !important;
}
.v7-live #spinDetailTitle {
  font-size: 24px !important;
  color: #f4e2c3 !important;
  line-height: 1.25 !important;
}
.v7-live #spinDetailSubtitle {
  font-size: 12px !important;
  color: #bfaf96 !important;
  line-height: 1.5 !important;
}
.v7-live .spin-wheel-window {
  height: 300px;
  border-radius: 8px;
  border: 1px solid #a88b5540;
  background: linear-gradient(180deg, #0d0b09, #2d2418 50%, #0d0b09);
  box-shadow:
    inset 0 15px 24px #0008,
    inset 0 -15px 24px #0008;
}
.v7-live .spin-wheel-window::before,
.v7-live .spin-wheel-window::after {
  border-radius: 0;
}
.v7-live .spin-wheel-item {
  position: absolute;
  width: auto;
  border-radius: 4px;
}
.v7-live .spin-wheel-item.is-selected {
  background: linear-gradient(100deg, #d8bf8c, #ae8b53) !important;
  border: 1px solid #f4d39a !important;
  box-shadow:
    0 0 22px #d1a45520,
    inset 0 1px #fff6 !important;
}
.v7-live .spin-wheel-item.is-selected .spin-wheel-title {
  color: #25190e !important;
  text-shadow: none;
}
.v7-live
  .spin-wheel-item.is-selected
  :is(.spin-wheel-number, .spin-wheel-subtitle, .spin-wheel-time) {
  color: #4c3920 !important;
}
.v7-live .spin-detail-actions {
  margin-top: 18px;
}
.v7-live .spin-audio-player {
  background: #0f0d0a;
  border: 1px solid #8e73473d;
  border-radius: 4px;
  padding: 10px 14px;
  color: #d2bb97;
}
.v7-live footer {
  margin-top: 28px;
  color: #978365;
  font-size: 9px;
  letter-spacing: 0.17em;
}
.v7-live :is(button, input, a):focus-visible,
.v7-live .spin-wheel-item:focus-visible {
  outline: 2px solid #ffe6a7 !important;
  outline-offset: 4px;
}
.v7-live .decor-piece {
  z-index: 4;
}
.v7-live .decor-ambient {
  opacity: 0.14;
}
#v7Live .decor-poster {
  padding: 8px;
}
#v7Live .decor-poster-kicker {
  font-size: 6px;
  margin-bottom: 6px;
}
#v7Live .decor-poster img {
  height: 70px;
  aspect-ratio: auto;
  object-fit: contain;
}
#v7Live .decor-poster-artist {
  font-size: 10px;
  line-height: 1.15;
  margin-top: 7px;
  max-height: 23px;
  overflow: hidden;
}
#v7Live .decor-poster-title {
  font-size: 7px;
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1101px) {
  .v7-live .decor-left {
    width: 125px !important;
  }
  .v7-live .decor-right {
    width: 138px !important;
  }
}
@media (max-width: 1100px) {
  .v7-live .decor-piece {
    display: none;
  }
  .v7-live .listening-area {
    grid-template-columns: minmax(110px, 160px) minmax(340px, 500px) minmax(110px, 160px);
    gap: 22px;
  }
  .v7-live .receiver-label {
    font-size: 7px;
    letter-spacing: 0.1em;
  }
  .v7-live .meter {
    width: 90px;
  }
  .v7-live .receiver-controls {
    gap: 6px;
    right: 12px;
  }
  .v7-live .receiver-controls span {
    width: 20px;
    height: 20px;
  }
  .v7-live .woofer {
    width: 102px;
    height: 102px;
  }
  .v7-live .speaker {
    height: 280px;
  }
  .v7-live .player-panel {
    gap: 18px;
    padding: 22px;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .v7-live .volume-area {
    grid-column: 1/-1;
    justify-content: center;
  }
  .v7-live #volumeSlider {
    width: 160px;
  }
}
@media (max-width: 820px) {
  .v7-live .room {
    padding: 26px 20px 25px;
  }
  .v7-live .brand {
    padding-bottom: 22px;
    margin-bottom: 25px;
  }
  .v7-live .live-room-label {
    display: none;
  }
  .v7-live .live-archive-link {
    position: static;
    display: block;
    margin: 18px auto 0;
    padding: 10px 15px;
  }
  .v7-live .listening-area {
    width: min(550px, 100%);
    display: block;
    padding-bottom: 18px;
  }
  .v7-live .speaker {
    display: none;
  }
  .v7-live .listening-area::after {
    left: -8px;
    right: -8px;
    height: 18px;
  }
  .v7-live .receiver-label {
    font-size: 8px;
  }
  .v7-live .meter {
    width: 100px;
  }
  .v7-live .receiver-controls span {
    width: 24px;
    height: 24px;
  }
  .v7-live .player-panel {
    width: min(550px, 100%);
    margin-top: 25px;
    text-align: center;
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .v7-live .playback-controls {
    justify-content: center;
  }
  .v7-live .volume-area {
    grid-column: auto;
  }
  .v7-live .spin-history {
    width: min(550px, 100%);
    margin-top: 32px;
    padding: 24px 20px;
  }
  .v7-live .spin-showcase {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 25px;
  }
  .v7-live #spinDetailArt {
    width: min(290px, 72vw) !important;
  }
  .v7-live #spinDetail {
    text-align: center !important;
  }
  .v7-live .spin-showcase-column {
    width: 100%;
  }
  .v7-live .spin-wheel-window {
    height: 300px;
  }
  .v7-live .spin-detail-actions {
    margin-top: 20px;
    flex-direction: column;
    gap: 17px;
  }
  .v7-live .spin-audio-player {
    width: 100%;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
  }
}
@media (max-width: 480px) {
  .v7-live .room {
    padding: 24px 14px;
  }
  .v7-live .eyebrow {
    font-size: 8px;
  }
  .v7-live .console {
    padding: 10px;
  }
  .v7-live .receiver {
    height: 152px;
    padding: 13px 10px;
  }
  .v7-live .receiver-label {
    font-size: 8px;
  }
  .v7-live .live-eq-presets {
    top: 98px;
    right: 10px;
    left: 10px;
    justify-content: center;
  }
  .v7-live .eq-preset-button {
    min-width: 43px;
    min-height: 33px;
    font-size: 8px;
  }
  .v7-live .meters {
    gap: 10px;
    margin-top: 13px;
  }
  .v7-live .meter {
    width: 86px;
    height: 48px;
  }
  .v7-live .meter::after {
    top: 18px;
  }
  .v7-live .receiver-controls {
    bottom: 67px;
    right: 10px;
    gap: 7px;
    flex-wrap: wrap;
    width: 42px;
  }
  .v7-live .receiver-controls span {
    width: 17px;
    height: 17px;
  }
  .v7-live .turntable {
    height: 252px;
  }
  .v7-live .platter {
    width: min(214px, 66%);
    height: auto;
    aspect-ratio: 1;
    left: 40%;
  }
  .v7-live .record-label {
    width: 70px;
    height: 70px;
  }
  .v7-live .tonearm {
    transform-origin: 29px 29px;
  }
  .v7-live .turntable::after {
    bottom: 10px;
    right: 12px;
    font-size: 6px;
  }
  .v7-live #nowPlaying {
    font-size: 23px;
  }
  .v7-live #spinHistoryTitle {
    font-size: 24px;
  }
  .v7-live .spin-history {
    padding: 22px 14px;
  }
  .v7-live .spin-wheel-item {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v7-live *,
  .v7-live *::before,
  .v7-live *::after {
    animation: none !important;
    transition: none !important;
  }
}