*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-dark: #0b0806;
  --panel: #18100c;
  --panel-soft: #231711;
  --gold: #e3b46b;
  --gold-soft: #cf9a4b;
  --gold-deep: #a46c2f;
  --text-main: #f8f1e7;
  --text-muted: #b49c7d;
}

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: radial-gradient(circle at top, #3a2814 0, #050304 55%, #000 100%);
  color: var(--text-main);
  overflow-x: hidden;
}

/* Видео‑фон с лёгким блюром */
#bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(10px) saturate(0.7) brightness(0.35);
  opacity: 0.9;
  z-index: -2;
}

/* тёмный слой поверх видео */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(0, 0, 0, 0.45) 0,
      rgba(0, 0, 0, 0.45) 2px,
      rgba(0, 0, 0, 0.65) 2px,
      rgba(0, 0, 0, 0.65) 4px
    );
  mix-blend-mode: multiply;
  z-index: -1;
}

.shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.card {
  width: 100%;
  max-width: 480px;
  background: radial-gradient(circle at top, #2a1a11 0, #120b07 55%, #080504 100%);
  border-radius: 32px;
  padding: 24px 18px 20px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.04);
}

/* Header */

.card-header {
  text-align: center;
  margin-bottom: 14px;
}

.title {
  font-size: 16px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.subtitle {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Cassette */

.cassette-wrap {
  margin: 10px auto 18px;
  border-radius: 18px;
  padding: 6px;
  background: linear-gradient(135deg, #3c2a1d, #140e0a);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.9);
}

#tape-video {
  display: block;
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
}

/* Panel */

.control-panel {
  margin-top: 4px;
  padding: 12px 14px 10px;
  border-radius: 20px;
  background: radial-gradient(circle at top, #25150c 0, #120a06 55%, #090605 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 16px 25px rgba(0, 0, 0, 0.9);
}

.now-playing-label {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

.track-title {
  margin-top: 4px;
  font-size: 17px;
  letter-spacing: 0.22em;
  text-align: center;
}

/* meters + mode */

.meters-line {
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
}

.vu {
  background: radial-gradient(circle at 20% 0, #261712, #050203);
  border-radius: 999px;
  padding: 4px 6px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 3px 10px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.vu-bars {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 24px;
}

.vu-bars span {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(to top, #6c3a17, #f3d28b);
  transform-origin: bottom;
  opacity: 0.35;
}

/* анимация включается только когда body.playing */

body.playing .vu-bars span {
  opacity: 1;
  animation: vuPulse 600ms infinite ease-out;
}

body.playing .vu-left .vu-bars span:nth-child(odd) {
  animation-duration: 520ms;
}

body.playing .vu-right .vu-bars span:nth-child(2n) {
  animation-duration: 680ms;
}

@keyframes vuPulse {
  0% {
    transform: scaleY(0.2);
  }
  40% {
    transform: scaleY(1);
  }
  80% {
    transform: scaleY(0.35);
  }
  100% {
    transform: scaleY(0.25);
  }
}

.mode-btn {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(243, 210, 139, 0.35);
  background: radial-gradient(circle at 0 0, #372115 0, #120a06 70%);
  color: var(--text-main);
  cursor: pointer;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.8),
    0 6px 12px rgba(0, 0, 0, 0.9);
  transition: all 0.12s ease-out;
}

.mode-btn:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 9px 16px rgba(0, 0, 0, 0.95);
  transform: translateY(-1px);
}

.mode-btn:active {
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.9),
    0 3px 6px rgba(0, 0, 0, 0.8);
}

/* Controls */

.controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.btn {
  min-width: 120px;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.12s ease-out;
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.9);
}

.btn.main {
  background: radial-gradient(circle at 0 0, #32a55d, #0a5b30);
  color: #fdfdfb;
}

.btn.ghost {
  background: radial-gradient(circle at 0 0, var(--gold), var(--gold-deep));
  color: #1b1009;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.45),
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.25)
  );
  opacity: 0.3;
  pointer-events: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.97),
    0 0 0 1px rgba(255, 255, 255, 0.06);
}

.btn:active {
  transform: translateY(2px);
  box-shadow:
    0 8px 14px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(0, 0, 0, 1);
}

/* Bottom caption */

.bottom-caption {
  margin-top: 10px;
  font-size: 9px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-muted);
}

/* Responsive */

@media (max-width: 480px) {
  .card {
    max-width: 360px;
    border-radius: 26px;
    padding: 20px 14px 16px;
  }
  .title {
    letter-spacing: 0.24em;
    font-size: 14px;
  }
  .track-title {
    font-size: 15px;
    letter-spacing: 0.2em;
  }
  .btn {
    min-width: 108px;
    font-size: 12px;
    letter-spacing: 0.18em;
  }
}