:root {
  --cassette-bg: #2a2a2a;
  --cassette-accent: #0d9488;
  --cassette-highlight: #3f3f3f;
  --label-bg: #1a1a1a;
  --label-text: #e5e5e5;
  --reel-tape: #4a4a4a;
  --reel-tape-alt: #2d2d2d;
  --button-bg: #1e1e1e;
  --button-press: #0a0a0a;
  --progress-bg: #333;
  --progress-fill: var(--cassette-accent);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--label-text);
}

.player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem;
}

/* Cassette body - realistic plastic shell */
.cassette {
  position: relative;
  width: 300px;
}

.cassette-body {
  position: relative;
  background: linear-gradient(175deg, #353535 0%, #1e1e1e 20%, #181818 50%, #1e1e1e 80%, #2d2d2d 100%);
  border-radius: 8px;
  padding: 22px 20px 22px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.cassette-body::before,
.cassette-body::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2a, #0a0a0a);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
}

.cassette-body::before {
  top: 8px;
  left: 10px;
}

.cassette-body::after {
  top: 8px;
  right: 10px;
}

/* Reel windows - recessed like real cassette */
.reel-windows {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 0 2px;
}

.reel-window {
  flex: 1;
  max-width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #0d0d0d 0%, #151515 40%, #0a0a0a 100%);
  border: 4px solid #1a1a1a;
  box-shadow:
    inset 0 0 25px rgba(0, 0, 0, 0.95),
    inset 0 2px 4px rgba(255, 255, 255, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Tape visible inside reel - brown magnetic tape wound in spiral */
.tape-reel {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: 
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(90, 70, 50, 0.4), transparent 70%),
    conic-gradient(
      from 0deg,
      #7a6248 0deg 72deg,
      #5c4a3a 72deg 144deg,
      #6b5344 144deg 216deg,
      #5a4838 216deg 288deg,
      #7a6248 288deg 360deg
    );
  box-shadow:
    inset 0 0 18px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(139, 115, 85, 0.2);
}

/* Hub hole - center spindle, rotates when playing */
.hub-hole {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a3a3a, #0a0a0a);
  box-shadow:
    inset 0 3px 8px rgba(0, 0, 0, 0.95),
    inset 0 -1px 0 rgba(255, 255, 255, 0.03),
    0 0 0 2px #111;
  position: relative;
  z-index: 1;
  animation: hub-spin 2.5s linear infinite;
  animation-play-state: paused;
}

.cassette.playing .hub-hole {
  animation-play-state: running;
}

/* Fast spin when forward/backward pressed */
.cassette.fast-forward .hub-hole,
.cassette.fast-forward .tape-reel {
  animation: hub-spin 0.35s linear infinite;
  animation-play-state: running;
  animation-direction: normal;
}

.cassette.rewind .hub-hole,
.cassette.rewind .tape-reel {
  animation: hub-spin 0.35s linear infinite;
  animation-play-state: running;
  animation-direction: reverse;
}

.tape-reel {
  animation: hub-spin 2.5s linear infinite;
  animation-play-state: paused;
}

.cassette.playing .tape-reel {
  animation-play-state: running;
}

@keyframes hub-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Label strip */
.label-strip {
  display: none;
}

.current-track {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--cassette-accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-list {
  display: none;
}

/* Controls */
.controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 300px;
}

.buttons {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.buttons button {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--button-bg) 0%, var(--button-press) 100%);
  color: var(--label-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: transform 0.1s, box-shadow 0.1s;
}

.buttons button:hover {
  background: linear-gradient(180deg, #2a2a2a 0%, var(--button-bg) 100%);
}

.buttons button:active {
  transform: scale(0.96);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}

.buttons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

#playPause {
  width: 56px;
  height: 56px;
  background: linear-gradient(180deg, var(--cassette-accent) 0%, #0f766e 100%);
  color: white;
}

#playPause:hover {
  background: linear-gradient(180deg, #14b8a6 0%, var(--cassette-accent) 100%);
}

.buttons button svg {
  width: 24px;
  height: 24px;
}

#playPause svg {
  width: 28px;
  height: 28px;
}

.buttons button svg.flip-h {
  transform: scaleX(-1);
}

#playPause .pause-icon {
  display: none;
}

#playPause.playing .play-icon {
  display: none;
}

#playPause.playing .pause-icon {
  display: block !important;
}

/* Progress bar */
.progress-wrap {
  display: none;
}

.progress-wrap .time {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  min-width: 2.5rem;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--progress-bg);
  border-radius: 4px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--progress-fill);
  border-radius: 4px;
  transition: width 0.1s linear;
}

/* Volume */
.volume-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.volume-wrap label {
  font-size: 0.75rem;
  color: #999;
  min-width: 2.5rem;
}

.volume-wrap input[type="range"] {
  flex: 1;
  accent-color: var(--cassette-accent);
}

.copyright {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.15);
  text-align: center;
  padding: 0.5rem;
}