/* Cassette — тёплая «кассета», дерево / пластик */

body:has(.neo-player[data-skin="cassette"]) {
  --neo-bg: #3a281c;
  --neo-card: #5a3f2c;
  --neo-text: #f3ebe0;
  --neo-muted: #d2b898;
  --neo-accent: #d29a5b;
  --neo-script: #f0d7b8;
  --neo-shadow-dark: rgba(0, 0, 0, 0.5);
  --neo-shadow-light: rgba(255, 210, 160, 0.05);
  --bg: #2a1c14;
  --bg2: #3a281c;
  --fg: #f3ebe0;
  --muted: #d2b898;
  --line: rgba(243, 235, 224, 0.12);
  --accent: #d29a5b;
  background: #2a1c14;
  color: var(--fg);
}

.neo-player[data-skin="cassette"] {
  --neo-bg: #3a281c;
  --neo-card: #5a3f2c;
  --neo-text: #f3ebe0;
  --neo-muted: #d2b898;
  --neo-accent: #d29a5b;
  --neo-script: #f0d7b8;
  --neo-shadow-dark: rgba(0, 0, 0, 0.5);
  --neo-shadow-light: rgba(255, 210, 160, 0.05);
  color: var(--neo-text);
}

.neo-player[data-skin="cassette"] .neo-player__card {
  border-radius: 20px;
  border: 1px solid #8a6548;
  border-top: 4px solid #c9a27a;
  background:
    linear-gradient(180deg, rgba(255, 220, 180, 0.08), transparent 35%),
    linear-gradient(180deg, #6b4a32 0%, #4a3222 55%, #3a281c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.neo-player[data-skin="cassette"] .neo-player__brand .brand-logo {
  letter-spacing: 0.08em;
}

.neo-player[data-skin="cassette"] .neo-player__station {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.88rem;
}

.neo-player[data-skin="cassette"] .neo-player__now {
  color: #f0d7b8;
  font-size: 0.9rem;
}

.neo-player[data-skin="cassette"] .neo-btn {
  border-radius: 8px;
  color: #f3ebe0;
  background: #2a1c14;
  box-shadow:
    4px 4px 10px rgba(20, 12, 8, 0.5),
    -2px -2px 6px rgba(255, 210, 160, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.neo-player[data-skin="cassette"] .neo-btn:active,
.neo-player[data-skin="cassette"] .neo-btn--rec.is-recording {
  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.55),
    inset -1px -1px 4px rgba(255, 210, 160, 0.04);
}

.neo-player[data-skin="cassette"] .neo-btn--main {
  border-radius: 10px;
  color: #2a1c14;
  background: linear-gradient(145deg, #e0b070, #c88840);
  box-shadow:
    5px 5px 12px rgba(20, 12, 8, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.neo-player[data-skin="cassette"] .neo-btn--main.is-playing {
  color: #2a1c14;
}

.neo-player[data-skin="cassette"] .neo-player__art {
  border-radius: 8px;
  border: 2px solid #2a1c14;
  box-shadow:
    inset 0 0 0 1px #8a6548,
    0 4px 12px rgba(0, 0, 0, 0.35);
}

.neo-player[data-skin="cassette"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 40% 30%, #7a5a40 0%, transparent 50%),
    linear-gradient(145deg, #3a281c, #1a120e);
}

.neo-player[data-skin="cassette"] .neo-player__controls {
  padding: 0.45rem 0.55rem;
  border-radius: 12px;
  border: 1px solid #8a6548;
  background: rgba(0, 0, 0, 0.22);
}

.neo-player[data-skin="cassette"] .player-more__menu {
  border: 1px solid #8a6548;
  background: #4a3222;
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.4);
}

.neo-player[data-skin="cassette"] .player-more__item:hover {
  background: rgba(210, 154, 91, 0.2);
}

body:has(.neo-player[data-skin="cassette"]) .browse-bar .neo-btn {
  border-radius: 8px;
  color: #f3ebe0;
  background: #2a1c14;
  box-shadow:
    4px 4px 10px rgba(20, 12, 8, 0.5),
    -2px -2px 6px rgba(255, 210, 160, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.is-player:has(.neo-player[data-skin="cassette"]),
body.is-browsing:has(.neo-player[data-skin="cassette"]) .neo-player {
  background: #2a1c14;
}