/* Extra skins — token packs (chalk / plus / pro) */

/* shared soft dark chrome for dark packs */
.neo-player:is(
  [data-skin="nord"],
  [data-skin="forest"],
  [data-skin="midnight"],
  [data-skin="phosphor"],
  [data-skin="rouge"]
) .neo-btn {
  box-shadow:
    5px 5px 12px rgba(0, 0, 0, 0.5),
    -3px -3px 8px rgba(255, 255, 255, 0.035);
}
.neo-player:is(
  [data-skin="nord"],
  [data-skin="forest"],
  [data-skin="midnight"],
  [data-skin="phosphor"],
  [data-skin="rouge"]
) .neo-btn:active,
.neo-player:is(
  [data-skin="nord"],
  [data-skin="forest"],
  [data-skin="midnight"],
  [data-skin="phosphor"],
  [data-skin="rouge"]
) .neo-btn--rec.is-recording {
  box-shadow:
    inset 4px 4px 10px rgba(0, 0, 0, 0.55),
    inset -2px -2px 6px rgba(255, 255, 255, 0.03);
}

/* ===== chalk (free, light paper) ===== */
body:has(.neo-player[data-skin="chalk"]) {
  --neo-bg: #e8e4dc;
  --neo-card: #f2efe8;
  --neo-text: #2c2a26;
  --neo-muted: #6b6560;
  --neo-accent: #3d5a80;
  --neo-script: #9a3412;
  --neo-shadow-dark: #cfc8bc;
  --neo-shadow-light: #ffffff;
  --bg: #e4e0d6;
  --bg2: #f2efe8;
  --fg: #2c2a26;
  --muted: #6b6560;
  --accent: #3d5a80;
}
.neo-player[data-skin="chalk"] {
  --neo-bg: #e8e4dc;
  --neo-card: #f2efe8;
  --neo-text: #2c2a26;
  --neo-muted: #6b6560;
  --neo-accent: #3d5a80;
  --neo-script: #9a3412;
  --neo-shadow-dark: #cfc8bc;
  --neo-shadow-light: #ffffff;
  color: var(--neo-text);
}
.neo-player[data-skin="chalk"] .neo-player__card {
  background:
    linear-gradient(180deg, #faf8f3 0%, var(--neo-card) 45%),
    var(--neo-card);
  border: 1px solid rgba(60, 50, 40, 0.08);
}
.neo-player[data-skin="chalk"] .neo-btn--main {
  color: #fff;
  background: var(--neo-accent);
  box-shadow:
    5px 5px 12px var(--neo-shadow-dark),
    -4px -4px 10px var(--neo-shadow-light),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.neo-player[data-skin="chalk"] .neo-btn--main.is-playing { color: #fff; }
.neo-player[data-skin="chalk"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 30% 25%, #b8c5d4 0%, transparent 50%),
    linear-gradient(145deg, #5a6e82, #2c3a4a);
}
body.is-player:has(.neo-player[data-skin="chalk"]) { background: #e4e0d6; }

/* ===== nord (plus, cool dark) ===== */
body:has(.neo-player[data-skin="nord"]) {
  --neo-bg: #2e3440;
  --neo-card: #3b4252;
  --neo-text: #eceff4;
  --neo-muted: #a0a8b8;
  --neo-accent: #88c0d0;
  --neo-script: #81a1c1;
  --neo-shadow-dark: rgba(0, 0, 0, 0.45);
  --neo-shadow-light: rgba(136, 192, 208, 0.05);
  --bg: #242933;
  --bg2: #2e3440;
  --fg: #eceff4;
  --muted: #a0a8b8;
  --accent: #88c0d0;
  --line: rgba(236, 239, 244, 0.1);
  background: #242933;
  color: var(--fg);
}
.neo-player[data-skin="nord"] {
  --neo-bg: #2e3440;
  --neo-card: #3b4252;
  --neo-text: #eceff4;
  --neo-muted: #a0a8b8;
  --neo-accent: #88c0d0;
  --neo-script: #81a1c1;
  --neo-shadow-dark: rgba(0, 0, 0, 0.45);
  --neo-shadow-light: rgba(136, 192, 208, 0.05);
  color: var(--neo-text);
}
.neo-player[data-skin="nord"] .neo-player__card {
  background:
    radial-gradient(100% 70% at 50% -15%, rgba(136, 192, 208, 0.12), transparent 55%),
    var(--neo-card);
  border: 1px solid rgba(136, 192, 208, 0.12);
}
.neo-player[data-skin="nord"] .neo-btn { color: #a0a8b8; background: var(--neo-card); }
.neo-player[data-skin="nord"] .neo-btn--main {
  color: #2e3440;
  background: linear-gradient(145deg, #8fbcbb, #5e81ac);
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.neo-player[data-skin="nord"] .neo-btn--main.is-playing { color: #2e3440; }
.neo-player[data-skin="nord"] .brand-logo__word--accent,
.neo-player[data-skin="nord"] .brand-logo__tilde { color: var(--neo-accent); }
.neo-player[data-skin="nord"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 70% 20%, #5e81ac 0%, transparent 45%),
    linear-gradient(145deg, #3b4252, #1a1e26);
}
body:has(.neo-player[data-skin="nord"]) .browse-bar .neo-btn {
  color: #a0a8b8;
  background: var(--neo-card);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.45), -3px -3px 8px rgba(136, 192, 208, 0.05);
}
body.is-player:has(.neo-player[data-skin="nord"]),
body.is-browsing:has(.neo-player[data-skin="nord"]) .neo-player { background: #242933; }

/* ===== forest (plus, green dark) ===== */
body:has(.neo-player[data-skin="forest"]) {
  --neo-bg: #1b2a1f;
  --neo-card: #24352a;
  --neo-text: #e8efe6;
  --neo-muted: #9aab96;
  --neo-accent: #a3b18a;
  --neo-script: #dad7cd;
  --neo-shadow-dark: rgba(0, 0, 0, 0.5);
  --neo-shadow-light: rgba(163, 177, 138, 0.05);
  --bg: #152018;
  --bg2: #1b2a1f;
  --fg: #e8efe6;
  --muted: #9aab96;
  --accent: #a3b18a;
  --line: rgba(232, 239, 230, 0.1);
  background: #152018;
  color: var(--fg);
}
.neo-player[data-skin="forest"] {
  --neo-bg: #1b2a1f;
  --neo-card: #24352a;
  --neo-text: #e8efe6;
  --neo-muted: #9aab96;
  --neo-accent: #a3b18a;
  --neo-script: #dad7cd;
  --neo-shadow-dark: rgba(0, 0, 0, 0.5);
  --neo-shadow-light: rgba(163, 177, 138, 0.05);
  color: var(--neo-text);
}
.neo-player[data-skin="forest"] .neo-player__card {
  background:
    radial-gradient(110% 75% at 0% 0%, rgba(163, 177, 138, 0.14), transparent 50%),
    var(--neo-card);
  border: 1px solid rgba(163, 177, 138, 0.14);
}
.neo-player[data-skin="forest"] .neo-btn { color: #9aab96; background: var(--neo-card); }
.neo-player[data-skin="forest"] .neo-btn--main {
  color: #152018;
  background: linear-gradient(145deg, #b5c69a, #78866b);
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.neo-player[data-skin="forest"] .neo-btn--main.is-playing { color: #152018; }
.neo-player[data-skin="forest"] .brand-logo__word--accent,
.neo-player[data-skin="forest"] .brand-logo__tilde { color: var(--neo-accent); }
.neo-player[data-skin="forest"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 35% 30%, #4a6b48 0%, transparent 50%),
    linear-gradient(145deg, #24352a, #0e1610);
}
body:has(.neo-player[data-skin="forest"]) .browse-bar .neo-btn {
  color: #9aab96;
  background: var(--neo-card);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -3px -3px 8px rgba(163, 177, 138, 0.05);
}
body.is-player:has(.neo-player[data-skin="forest"]),
body.is-browsing:has(.neo-player[data-skin="forest"]) .neo-player { background: #152018; }

/* ===== coral (plus, warm light) ===== */
body:has(.neo-player[data-skin="coral"]) {
  --neo-bg: #f4e8e1;
  --neo-card: #efe0d6;
  --neo-text: #3d2c2a;
  --neo-muted: #8a6e68;
  --neo-accent: #e07a5f;
  --neo-script: #c44536;
  --neo-shadow-dark: #d4c0b4;
  --neo-shadow-light: #fff8f4;
  --bg: #f0e2da;
  --bg2: #efe0d6;
  --fg: #3d2c2a;
  --muted: #8a6e68;
  --accent: #e07a5f;
}
.neo-player[data-skin="coral"] {
  --neo-bg: #f4e8e1;
  --neo-card: #efe0d6;
  --neo-text: #3d2c2a;
  --neo-muted: #8a6e68;
  --neo-accent: #e07a5f;
  --neo-script: #c44536;
  --neo-shadow-dark: #d4c0b4;
  --neo-shadow-light: #fff8f4;
  color: var(--neo-text);
}
.neo-player[data-skin="coral"] .neo-player__card {
  background:
    linear-gradient(180deg, #faf0ea 0%, var(--neo-card) 40%),
    var(--neo-card);
}
.neo-player[data-skin="coral"] .neo-btn { color: #8a6e68; }
.neo-player[data-skin="coral"] .neo-btn--main {
  color: #fff;
  background: linear-gradient(145deg, #e8917a, #c45a42);
  box-shadow:
    5px 5px 12px var(--neo-shadow-dark),
    -4px -4px 10px var(--neo-shadow-light),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.neo-player[data-skin="coral"] .neo-btn--main.is-playing { color: #fff; }
.neo-player[data-skin="coral"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 60% 25%, #e8a090 0%, transparent 45%),
    linear-gradient(145deg, #8a4a40, #3d2c2a);
}
body.is-player:has(.neo-player[data-skin="coral"]) { background: #f0e2da; }

/* ===== midnight (pro, navy + teal) ===== */
body:has(.neo-player[data-skin="midnight"]) {
  --neo-bg: #0b1220;
  --neo-card: #111827;
  --neo-text: #e5eef7;
  --neo-muted: #8aa0b8;
  --neo-accent: #5eead4;
  --neo-script: #7dd3fc;
  --neo-shadow-dark: rgba(0, 0, 0, 0.6);
  --neo-shadow-light: rgba(94, 234, 212, 0.04);
  --bg: #070d18;
  --bg2: #0b1220;
  --fg: #e5eef7;
  --muted: #8aa0b8;
  --accent: #5eead4;
  --line: rgba(229, 238, 247, 0.1);
  background: #070d18;
  color: var(--fg);
}
.neo-player[data-skin="midnight"] {
  --neo-bg: #0b1220;
  --neo-card: #111827;
  --neo-text: #e5eef7;
  --neo-muted: #8aa0b8;
  --neo-accent: #5eead4;
  --neo-script: #7dd3fc;
  --neo-shadow-dark: rgba(0, 0, 0, 0.6);
  --neo-shadow-light: rgba(94, 234, 212, 0.04);
  color: var(--neo-text);
}
.neo-player[data-skin="midnight"] .neo-player__card {
  background:
    radial-gradient(90% 60% at 80% -10%, rgba(94, 234, 212, 0.1), transparent 50%),
    radial-gradient(70% 50% at 10% 110%, rgba(125, 211, 252, 0.08), transparent 45%),
    var(--neo-card);
  border: 1px solid rgba(94, 234, 212, 0.12);
}
.neo-player[data-skin="midnight"] .neo-btn { color: #8aa0b8; background: var(--neo-card); }
.neo-player[data-skin="midnight"] .neo-btn--main {
  color: #0b1220;
  background: linear-gradient(145deg, #5eead4, #2dd4bf);
  box-shadow: 6px 6px 16px rgba(0, 0, 0, 0.55), 0 0 18px rgba(94, 234, 212, 0.15);
}
.neo-player[data-skin="midnight"] .neo-btn--main.is-playing { color: #0b1220; }
.neo-player[data-skin="midnight"] .neo-player__brand .brand-logo {
  letter-spacing: 0.1em;
  font-size: 1rem;
}
.neo-player[data-skin="midnight"] .brand-logo__word--accent,
.neo-player[data-skin="midnight"] .brand-logo__tilde { color: var(--neo-accent); }
.neo-player[data-skin="midnight"] .neo-player__now {
  font-family: ui-monospace, "Cascadia Code", monospace;
  color: var(--neo-accent);
  letter-spacing: 0.02em;
}
.neo-player[data-skin="midnight"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 70% 20%, #164e63 0%, transparent 45%),
    linear-gradient(145deg, #111827, #020617);
}
body:has(.neo-player[data-skin="midnight"]) .browse-bar .neo-btn {
  color: #8aa0b8;
  background: var(--neo-card);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.55), -3px -3px 8px rgba(94, 234, 212, 0.04);
}
body.is-player:has(.neo-player[data-skin="midnight"]),
body.is-browsing:has(.neo-player[data-skin="midnight"]) .neo-player { background: #070d18; }

/* ===== phosphor (pro, CRT green) ===== */
body:has(.neo-player[data-skin="phosphor"]) {
  --neo-bg: #0a0f0a;
  --neo-card: #121a12;
  --neo-text: #c8f7c0;
  --neo-muted: #6a9a62;
  --neo-accent: #39ff14;
  --neo-script: #7cff6a;
  --neo-shadow-dark: rgba(0, 0, 0, 0.65);
  --neo-shadow-light: rgba(57, 255, 20, 0.04);
  --bg: #050805;
  --bg2: #0a0f0a;
  --fg: #c8f7c0;
  --muted: #6a9a62;
  --accent: #39ff14;
  --line: rgba(57, 255, 20, 0.12);
  background: #050805;
  color: var(--fg);
}
.neo-player[data-skin="phosphor"] {
  --neo-bg: #0a0f0a;
  --neo-card: #121a12;
  --neo-text: #c8f7c0;
  --neo-muted: #6a9a62;
  --neo-accent: #39ff14;
  --neo-script: #7cff6a;
  --neo-shadow-dark: rgba(0, 0, 0, 0.65);
  --neo-shadow-light: rgba(57, 255, 20, 0.04);
  color: var(--neo-text);
}
.neo-player[data-skin="phosphor"] .neo-player__card {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(57, 255, 20, 0.015) 2px,
      rgba(57, 255, 20, 0.015) 3px
    ),
    var(--neo-card);
  border: 1px solid rgba(57, 255, 20, 0.18);
  box-shadow: none;
}
.neo-player[data-skin="phosphor"] .neo-btn { color: #6a9a62; background: var(--neo-card); }
.neo-player[data-skin="phosphor"] .neo-btn--main {
  color: #050805;
  background: #39ff14;
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.35), 5px 5px 12px rgba(0, 0, 0, 0.5);
}
.neo-player[data-skin="phosphor"] .neo-btn--main.is-playing { color: #050805; }
.neo-player[data-skin="phosphor"] .neo-player__brand .brand-logo {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  font-weight: 700;
}
.neo-player[data-skin="phosphor"] .neo-player__station,
.neo-player[data-skin="phosphor"] .neo-player__now {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.neo-player[data-skin="phosphor"] .brand-logo__word--accent,
.neo-player[data-skin="phosphor"] .brand-logo__tilde { color: var(--neo-accent); }
.neo-player[data-skin="phosphor"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 50% 40%, rgba(57, 255, 20, 0.2) 0%, transparent 55%),
    linear-gradient(145deg, #121a12, #020402);
}
body:has(.neo-player[data-skin="phosphor"]) .browse-bar .neo-btn {
  color: #6a9a62;
  background: var(--neo-card);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.55), -2px -2px 6px rgba(57, 255, 20, 0.04);
}
body.is-player:has(.neo-player[data-skin="phosphor"]),
body.is-browsing:has(.neo-player[data-skin="phosphor"]) .neo-player { background: #050805; }

/* ===== rouge (pro, wine) ===== */
body:has(.neo-player[data-skin="rouge"]) {
  --neo-bg: #2a1218;
  --neo-card: #3a1a22;
  --neo-text: #f5e6e8;
  --neo-muted: #c49aa0;
  --neo-accent: #e8b4b8;
  --neo-script: #f0c4c8;
  --neo-shadow-dark: rgba(0, 0, 0, 0.55);
  --neo-shadow-light: rgba(232, 180, 184, 0.05);
  --bg: #1a0c10;
  --bg2: #2a1218;
  --fg: #f5e6e8;
  --muted: #c49aa0;
  --accent: #e8b4b8;
  --line: rgba(245, 230, 232, 0.1);
  background: #1a0c10;
  color: var(--fg);
}
.neo-player[data-skin="rouge"] {
  --neo-bg: #2a1218;
  --neo-card: #3a1a22;
  --neo-text: #f5e6e8;
  --neo-muted: #c49aa0;
  --neo-accent: #e8b4b8;
  --neo-script: #f0c4c8;
  --neo-shadow-dark: rgba(0, 0, 0, 0.55);
  --neo-shadow-light: rgba(232, 180, 184, 0.05);
  color: var(--neo-text);
}
.neo-player[data-skin="rouge"] .neo-player__card {
  background:
    radial-gradient(100% 70% at 50% -20%, rgba(232, 180, 184, 0.14), transparent 55%),
    var(--neo-card);
  border: 1px solid rgba(232, 180, 184, 0.14);
}
.neo-player[data-skin="rouge"] .neo-btn { color: #c49aa0; background: var(--neo-card); }
.neo-player[data-skin="rouge"] .neo-btn--main {
  color: #2a1218;
  background: linear-gradient(145deg, #e8b4b8, #c47880);
  box-shadow: 6px 6px 14px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.neo-player[data-skin="rouge"] .neo-btn--main.is-playing { color: #2a1218; }
.neo-player[data-skin="rouge"] .brand-logo__word--accent,
.neo-player[data-skin="rouge"] .brand-logo__tilde { color: var(--neo-accent); }
.neo-player[data-skin="rouge"] .neo-player__art-fallback {
  background:
    radial-gradient(circle at 40% 25%, #6a3040 0%, transparent 50%),
    linear-gradient(145deg, #3a1a22, #12080c);
}
body:has(.neo-player[data-skin="rouge"]) .browse-bar .neo-btn {
  color: #c49aa0;
  background: var(--neo-card);
  box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -3px -3px 8px rgba(232, 180, 184, 0.05);
}
body.is-player:has(.neo-player[data-skin="rouge"]),
body.is-browsing:has(.neo-player[data-skin="rouge"]) .neo-player { background: #1a0c10; }