:root{
  --cream:#f4ecdf;
  --cream-dim:rgba(244,236,223,0.78);
  --red-deep:#7a1e14;
  --amber:#e8a33d;
  --shadow-dark: rgba(10,6,4,0.55);
  --panel-bg: rgba(20,12,8,0.55);
  --panel-border: rgba(244,236,223,0.18);
}

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

html,body{ height:100%; }

body{
  font-family:'Rajdhani',sans-serif;
  color:var(--cream);
  min-height:100vh;
  overflow-x:hidden;
  background:#20130d;
}

/* ============ BACKGROUND ============ */
.ds-bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg, rgba(10,6,4,0.35) 0%, rgba(10,6,4,0.68) 78%, rgba(10,6,4,0.84) 100%),
    radial-gradient(ellipse 60% 50% at 75% 55%, rgba(122,30,20,0.35), transparent 70%),
    url('../assets/images/salon-background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: filter 1.1s ease;
}
/* ============ MOOD BACKGROUND CROSSFADE (index.html only) ============
   Two stacked, full-viewport layers. Only one is ever opacity:1 at a
   time; switching moods writes the new photo onto whichever layer is
   currently hidden, then fades it in while fading the other out — a
   proper crossfade between ANY two moods (not just via a fixed base
   layer, which only crossfaded correctly when Saloon was one side of
   the swap). JS (updateBackground in main.js) drives which layer is
   active and what image is loaded into the hidden one. */
.ds-bg-layer{
  position:fixed;
  inset:0;
  z-index:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition: opacity 1.2s ease;
}
.ds-bg-layer.is-active{ opacity:1; }
.ds-bg-layer-a{
  background:
    linear-gradient(180deg, rgba(10,6,4,0.35) 0%, rgba(10,6,4,0.68) 78%, rgba(10,6,4,0.84) 100%),
    radial-gradient(ellipse 60% 50% at 75% 55%, rgba(122,30,20,0.35), transparent 70%),
    url('../assets/images/salon-background.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

.ds-stage{
  position:relative;
  z-index:1;
  /* Ensure content area excludes the fixed player bar so the hero sits
     vertically centered above the player instead of being pushed low. */
  min-height: calc(100vh - var(--player-bar-height, 120px));
  display:flex;
  flex-direction:column;
  /* reserve space at the bottom equal to the player so content isn't
     visually obstructed when the player overlays the viewport */
  padding-bottom: var(--player-bar-height, 120px);
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* ============ TOP BAR ============ */
.ds-topbar{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:22px 34px;
  flex-wrap:wrap;
  gap:14px;
}
/* Center the online count visually in the top bar */
.ds-online{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
@media (max-width:900px){
  /* On small screens, restore natural flow so layout doesn't overlap */
  .ds-online{ position:static; transform:none; order:1; margin:6px auto; }
}

.ds-clock{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:'Bebas Neue',sans-serif;
  font-size:20px;
  letter-spacing:0.08em;
  text-shadow:0 2px 8px var(--shadow-dark);
}
.ds-flag-in{
  flex-shrink:0;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,0.35);
}

.ds-online{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  letter-spacing:0.04em;
  text-shadow:0 2px 8px var(--shadow-dark);
}
.ds-online .dot{
  width:9px; height:9px; border-radius:50%;
  background:#8a8378;
  transition:background 0.4s ease;
}
.ds-online .dot.is-live{
  background:#3ecf6a;
  box-shadow:0 0 8px #3ecf6a;
  animation:ds-pulse 1.8s ease-in-out infinite;
}
@keyframes ds-pulse{
  0%,100%{ opacity:1; }
  50%{ opacity:0.4; }
}

.ds-top-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
}
.ds-services{
  display:flex;
  gap:10px;
}
.ds-service-btn{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(0,0,0,0.5);
  border:1px solid var(--panel-border);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ds-service-btn:hover{ background:rgba(0,0,0,0.65); transform:translateY(-1px); }
.ds-service-btn .ico{ width:20px; height:20px; flex-shrink:0; }
.ds-service-spotify:hover{ border-color:#1DB954; box-shadow:0 0 0 1px #1DB954 inset; }
.ds-service-ytmusic:hover{ border-color:#FF0000; box-shadow:0 0 0 1px #FF0000 inset; }

.ds-nav{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  position:relative;
}
.ds-tool-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-radius:999px;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--panel-border);
  color:var(--cream);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.02em;
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ds-tool-btn:hover{ background:rgba(0,0,0,0.5); border-color:var(--amber); transform:translateY(-1px); }
.ds-tool-btn[aria-expanded="true"]{ border-color:var(--amber); color:var(--amber); }

/* ============ MOOD POPOVER ============ */
.ds-mood-wrap{ position:relative; }
.ds-mood-popover{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  z-index:60;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:8px;
  background:#1c130d;
  border:1px solid var(--panel-border);
  border-radius:14px;
  box-shadow:0 16px 36px rgba(0,0,0,0.55);
}
.ds-mood-popover[hidden]{ display:none; }
.ds-mood-option-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  flex-shrink:0;
}
.ds-mood-option{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding:10px 12px;
  border-radius:9px;
  background:none;
  border:1px solid transparent;
  color:var(--cream);
  font-size:14px;
  font-weight:600;
  text-align:left;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.ds-mood-option:hover{ background:rgba(232,163,61,0.12); }
.ds-mood-option[aria-checked="true"]{
  border-color:var(--amber);
  background:rgba(232,163,61,0.18);
  color:var(--amber);
}
.ds-mood-option[aria-checked="true"]::after{
  content:"✓";
  margin-left:auto;
  font-weight:700;
}
/* Single dynamic icon button (before the Mood button) that plays the
   currently active mood's themed sound — icon swaps with the mood. */
.ds-mood-sound-btn{
  /* hidden by default; only shown when .is-visible is applied via JS */
  display:none;
  width:44px; height:44px; padding:8px; border-radius:50%;
  background: rgba(0,0,0,0.45); color: var(--cream); border:1px solid rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  align-items:center; justify-content:center;
  box-shadow:0 6px 14px rgba(0,0,0,0.35); transition:transform 0.12s ease, box-shadow 0.12s ease;
}
.ds-mood-sound-btn.is-visible{ display:flex; }
.ds-mood-sound-btn.is-playing{ box-shadow:0 8px 22px rgba(0,0,0,0.45); transform:translateY(-2px) scale(1.02); border-color:var(--amber); }
.ds-mood-sound-btn[aria-pressed="true"]{ outline:2px solid rgba(232,163,61,0.12); }

.ds-mood-sound-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 18px rgba(0,0,0,0.4); }
.ds-mood-sound-btn svg{ display:block; width:20px; height:20px; }
.ds-mood-sound-btn img.ds-horn-icon{ width:20px; height:20px; display:block; object-fit:contain; }

/* Make the mood popover match the player's glass effect */
.ds-mood-popover{
  background: rgba(10,6,4,0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow:0 16px 36px rgba(0,0,0,0.55);
  border-radius:14px;
} 
@media (prefers-reduced-transparency: reduce) {
  .ds-mood-popover{ -webkit-backdrop-filter:none; backdrop-filter:none; background: rgba(20,12,8,0.88); }
}

/* ============ HERO ============ */
.ds-hero{
  /* Use flex to size the hero between header and fixed player bar
     so it remains vertically centered and doesn't sit too low. */
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 8vw;
  text-align:center;
  min-height:0; /* allow flex to control height on small viewports */
}
.ds-hero-inner{ max-width:640px; margin-top:0; margin-bottom:0; }

.ds-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(52px, 8vw, 96px);
  line-height:1.04;
  color:var(--cream);
  text-shadow:0 6px 28px var(--shadow-dark), 0 1px 0 rgba(0,0,0,0.4);
}

.ds-subtitle{
  margin-top:22px;
  font-family:'Bebas Neue',sans-serif;
  font-size:15px;
  letter-spacing:0.42em;
  color:var(--cream-dim);
  text-transform:uppercase;
}

/* ============ FIXED PLAYER BAR ============
   Stays pinned to the viewport bottom while the page scrolls beneath it,
   so the radio is always reachable — like a persistent streaming player.
   Minimalist, flat, no blur/glassmorphism — a solid dark bar with a
   crisp top edge separating it from scrolling content. */
.ds-player-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:40;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border-top: none;
  box-shadow: none;
}
.ds-player-bar .ds-sponsor{ margin:0; }

/* ============ PLAYER CARD ============ */
.ds-radio{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:480px;
  padding:12px 14px;
  /* Glass effect: translucent background with backdrop blur */
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
}

/* Provide an accessible fallback when reduced-transparency is requested */
@media (prefers-reduced-transparency: reduce) {
  .ds-radio {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(20,12,8,0.88);
    border: 1px solid rgba(255,255,255,0.04);
  }
}

/* Slight inner highlight to mimic frosted glass edge */
.ds-radio::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -6px 18px rgba(0,0,0,0.18);
}


@media (prefers-reduced-transparency: reduce) {
  .ds-radio {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(0,0,0,0.35);
  }
}

.ds-radio-top{
  display:flex;
  align-items:center;
  gap:14px;
}

/* ============ VINYL / ARTWORK ============ */
.ds-vinyl{
  position:relative;
  width:36px; height:36px;
  flex-shrink:0;
  border-radius:50%;
  background: radial-gradient(circle at 50% 50%, #0f0b09 0%, #1c140d 60%, #0f0b09 100%);
  border:2px solid rgba(0,0,0,0.6);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.03), 0 3px 8px rgba(0,0,0,0.6);
  animation: ds-vinyl-spin 6s linear infinite;
  animation-play-state: paused;
}
.ds-vinyl.is-spinning{ animation-play-state: running; will-change: transform; }
.ds-vinyl-label{
  position:absolute; inset:4px;
  border-radius:50%;
  overflow:hidden;
  background:#2a1f16;
}
.ds-vinyl-label img{ width:100%; height:100%; object-fit:cover; display:block; }
@keyframes ds-vinyl-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .ds-vinyl{ animation:none; } }

.ds-player-meta{ min-width:0; flex:1; }
.ds-track-title{
  font-size:14px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
  font-family:'Rajdhani',sans-serif;
}
.ds-track-artist{
  margin-top:2px;
  font-size:12px; color:var(--cream-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%;
}

/* ============ PROGRESS BAR ============
   Large, simple, easy to grab — a single filled track with a thumb,
   not a decorative waveform. Spans the full width of the player card. */
.ds-progress-row{
  display:flex; align-items:center; gap:8px;
  margin-top:12px;
}
.ds-progress-track{
  position:relative;
  flex:1;
  padding:8px 0;
  cursor:pointer;
  touch-action:none;
}
.ds-progress-bar{
  position:relative;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  transition:height 0.15s ease;
}
.ds-progress-track:hover .ds-progress-bar,
.ds-progress-track.is-dragging .ds-progress-bar{ height:8px; }
.ds-progress-fill{
  position:absolute; top:0; left:0; bottom:0;
  width:0%;
  border-radius:999px;
  background:var(--amber);
}
.ds-progress-thumb{
  position:absolute; top:50%; left:0%;
  width:12px; height:12px;
  margin-left:-6px;
  background:var(--cream);
  border-radius:50%;
  transform:translateY(-50%);
  box-shadow:0 1px 4px rgba(0,0,0,0.6);
  opacity:0;
  transition:opacity 0.12s ease, transform 0.1s ease;
  pointer-events:none;
}
.ds-progress-track:hover .ds-progress-thumb{ opacity:1; }
.ds-progress-track.is-dragging .ds-progress-thumb{ opacity:1; transform:translateY(-50%) scale(1.15); }
.ds-time{ font-size:11.5px; color:var(--cream-dim); font-variant-numeric: tabular-nums; white-space:nowrap; flex-shrink:0; min-width:30px; }
.ds-time:last-child{ text-align:right; }

/* ============ CONTROLS ============ */
.ds-controls{ display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto; }
.ds-ctrl-btn{
  background:none; border:none; color:var(--cream-dim);
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  transition:background 0.15s ease, color 0.15s ease;
}
.ds-ctrl-btn:hover:not(:disabled){ background:rgba(255,255,255,0.06); color:var(--cream); }
.ds-play-btn{
  width:44px; height:44px;
  background:transparent;
  border:1px solid rgba(232,163,61,0.18);
  color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  transition: background 0.18s ease, color 0.12s ease, border-color 0.18s ease, transform 0.12s ease;
}
.ds-play-btn:hover:not(:disabled){ background:rgba(232,163,61,0.12); color:#2a1810; border-color:rgba(232,163,61,0.32); transform: translateY(-1px); }
/* Ensure the play/pause SVG inside the button sizes correctly and inherits color */
.ds-play-btn svg,
.ds-play-btn svg path{ width:18px; height:18px; display:block; fill:currentColor; }
.ds-play-btn:focus-visible{ outline:2px solid rgba(232,163,61,0.22); outline-offset:2px; }

/* ============ VOLUME ============ */
.ds-volume{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:6px;
  margin-left:2px;
  border-left:1px solid rgba(244,236,223,0.15);
}
.ds-volume input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  width:56px;
  height:4px;
  border-radius:2px;
  background:linear-gradient(90deg, var(--amber) var(--ds-vol, 100%), rgba(0,0,0,0.45) var(--ds-vol, 100%));
  cursor:pointer;
}
.ds-volume input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:14px; height:14px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 4px rgba(0,0,0,0.5);
  cursor:pointer;
}
.ds-volume input[type="range"]::-moz-range-thumb{
  width:14px; height:14px; border-radius:50%;
  background:var(--amber); border:none;
  cursor:pointer;
}
.ds-volume input[type="range"]:disabled{ opacity:0.4; cursor:default; }

/* ============ MODAL PANELS (Playlists / Songs) ============ */
.ds-panel-overlay{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8,4,3,0.82);
}
.ds-panel-overlay[hidden]{ display:none; }
.ds-panel{
  width:100%;
  max-width:520px;
  max-height:min(640px, 84vh);
  display:flex;
  flex-direction:column;
  background:linear-gradient(165deg, rgba(35,20,14,0.98), rgba(20,12,8,0.98));
  border:1px solid var(--panel-border);
  border-radius:20px;
  box-shadow:0 30px 60px rgba(0,0,0,0.6);
  overflow:hidden;
}
.ds-panel-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:20px 22px 14px;
  border-bottom:1px solid rgba(244,236,223,0.1);
}
.ds-panel-head h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;
  letter-spacing:0.06em;
  color:var(--cream);
}
.ds-panel-subtitle{
  margin-top:4px;
  font-size:12.5px;
  color:var(--cream-dim);
}
.ds-panel-close{
  flex-shrink:0;
  width:32px; height:32px;
  border-radius:50%;
  background:rgba(0,0,0,0.35);
  border:1px solid var(--panel-border);
  color:var(--cream);
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.ds-panel-close:hover{ background:rgba(0,0,0,0.55); border-color:var(--amber); color:var(--amber); }

/* Themed scrollbars (Firefox + WebKit/Blink) so lists match the site's
   dark/amber palette instead of the browser's default grey scrollbar. */
.ds-playlist-list,
.ds-songs-list{
  scrollbar-width: thin;
  scrollbar-color: var(--amber) rgba(0,0,0,0.3);
}
.ds-playlist-list::-webkit-scrollbar,
.ds-songs-list::-webkit-scrollbar{ width:8px; }
.ds-playlist-list::-webkit-scrollbar-track,
.ds-songs-list::-webkit-scrollbar-track{ background:rgba(0,0,0,0.25); border-radius:8px; }
.ds-playlist-list::-webkit-scrollbar-thumb,
.ds-songs-list::-webkit-scrollbar-thumb{ background:var(--amber); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
.ds-playlist-list::-webkit-scrollbar-thumb:hover,
.ds-songs-list::-webkit-scrollbar-thumb:hover{ background:#ffe0a3; background-clip:padding-box; }

/* Playlist cards */
.ds-playlist-list{
  overflow-y:auto;
  padding:14px 16px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ds-playlist-card{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:10px;
  background:rgba(0,0,0,0.25);
  border:1px solid transparent;
  border-radius:14px;
  text-align:left;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.ds-playlist-card:hover:not(:disabled){ background:rgba(0,0,0,0.4); }
.ds-playlist-card.is-active{ border-color:var(--amber); background:rgba(232,163,61,0.12); }
.ds-playlist-card:disabled{ opacity:0.45; cursor:not-allowed; }
.ds-playlist-thumb{
  width:52px; height:52px; flex-shrink:0;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(160deg,#8a5a35,#4a2a16);
  display:flex; align-items:center; justify-content:center;
}
.ds-playlist-thumb img{ width:100%; height:100%; object-fit:cover; }
.ds-playlist-thumb-fallback{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:20px;
  color:var(--amber);
}
.ds-playlist-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ds-playlist-name{ font-size:14px; font-weight:700; color:var(--cream); }
.ds-playlist-mood{ font-size:12px; color:var(--cream-dim); }
.ds-playlist-count{ font-size:11px; color:var(--cream-dim); }
.ds-playlist-disabled-note{
  margin-left:auto;
  font-size:11px;
  color:var(--cream-dim);
  white-space:nowrap;
}

/* Songs list */
.ds-songs-list{
  overflow-y:auto;
  padding:10px 16px 20px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.ds-songs-empty{ padding:24px 8px; color:var(--cream-dim); font-size:13px; text-align:center; }
.ds-song-row{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:8px;
  background:none;
  border:1px solid transparent;
  border-radius:12px;
  text-align:left;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.ds-song-row:hover{ background:rgba(0,0,0,0.3); }
.ds-song-row.is-active{ border-color:var(--amber); background:rgba(232,163,61,0.14); }
.ds-song-thumb{ width:46px; height:46px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.ds-song-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.ds-song-title{
  font-size:13.5px; font-weight:600; color:var(--cream);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ds-song-playlist{ font-size:11.5px; color:var(--cream-dim); }
.ds-song-play{
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--amber);
  background:rgba(232,163,61,0.12);
}
.ds-song-row.is-active .ds-song-play{ background:var(--amber); color:#2a1810; }

.ds-songs-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:12px 16px;
  border-top:1px solid rgba(244,236,223,0.1);
}
.ds-pager-btn{
  padding:7px 14px;
  border-radius:999px;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--panel-border);
  color:var(--cream);
  font-size:12.5px;
  font-weight:600;
  transition:background 0.2s ease, border-color 0.2s ease;
}
.ds-pager-btn:hover:not(:disabled){ border-color:var(--amber); color:var(--amber); }
.ds-pager-btn:disabled{ opacity:0.35; cursor:default; }
.ds-pager-label{ font-size:12px; color:var(--cream-dim); white-space:nowrap; }

/* ============ TOAST ============ */
.ds-toast{
  position:fixed;
  left:50%;
  bottom:calc(var(--player-bar-height, 120px) + 18px);
  transform:translateX(-50%) translateY(8px);
  z-index:90;
  max-width:min(400px, 86vw);
  padding:12px 18px;
  background:rgba(20,12,8,0.96);
  border:1px solid var(--panel-border);
  border-radius:12px;
  color:var(--cream);
  font-size:13px;
  text-align:center;
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.25s ease, transform 0.25s ease;
}
.ds-toast.is-visible{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.ds-contact{
  font-size:12.5px;
  color:var(--cream-dim);
  letter-spacing:0.03em;
}
.ds-contact a{ border-bottom:1px dotted var(--cream-dim); }
.ds-contact a:hover{ color:var(--amber); border-color:var(--amber); }

/* ============ SPONSOR CREDIT ============ */
.ds-sponsor{
  font-size:11.5px;
  color:var(--cream-dim);
  letter-spacing:0.03em;
}
.ds-sponsor a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  vertical-align:middle;
  border-bottom:1px dotted var(--cream-dim);
  transition:color 0.2s ease, border-color 0.2s ease;
}
.ds-sponsor a:hover{ color:var(--amber); border-color:var(--amber); }
.ds-sponsor-logo{
  height:14px;
  width:auto;
  display:block;
  filter:grayscale(1) brightness(1.7);
  opacity:0.8;
  transition:filter 0.2s ease, opacity 0.2s ease;
}
.ds-sponsor a:hover .ds-sponsor-logo{ filter:none; opacity:1; }

/* ============ SITE FOOTER ============
   Flows normally below the hero (page now scrolls); padding-bottom keeps
   its content clear of the fixed player bar so nothing overlaps it. */
.ds-site-footer{
  position:relative;
  z-index:1;
  padding:48px 34px calc(var(--player-bar-height, 200px) + 24px);
  transition: transform 0.28s ease, opacity 0.28s ease;
}
/* When body has .ds-hide-footer, visually hide the footer without breaking layout too badly */
body.ds-hide-footer .ds-site-footer{
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  overflow: hidden;
  padding: 0 34px 0 34px;
  margin: 0;
}
.ds-footer-inner{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }

.ds-footer-brand{ display:flex; align-items:center; gap:14px; }
.ds-footer-badge{
  width:48px; height:48px;
  border-radius:50%;
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Bebas Neue',sans-serif;
  font-size:17px;
  letter-spacing:0.04em;
  color:var(--amber);
  background: radial-gradient(circle at 35% 30%, #3a2620, #20130d 75%);
  border:2px solid var(--amber);
  box-shadow:0 0 12px rgba(232,163,61,0.3);
}
.ds-footer-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:700;
  font-size:19px;
  color:var(--cream);
}
.ds-footer-subtitle{
  font-family:'Bebas Neue',sans-serif;
  font-size:11px;
  letter-spacing:0.3em;
  color:var(--cream-dim);
}

.ds-footer-desc{ font-size:14px; line-height:1.6; color:var(--cream-dim); }

.ds-footer-heading{
  font-family:'Bebas Neue',sans-serif;
  font-size:13px;
  letter-spacing:0.18em;
  color:var(--amber);
  text-transform:uppercase;
  margin-bottom:8px;
}
.ds-rotation-list{
  list-style:none;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 24px;
}
.ds-rotation-link{
  background:none; border:none; padding:4px 0;
  font-size:14px; font-weight:600; color:var(--cream);
  text-align:left;
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.ds-rotation-link:hover{ color:var(--amber); border-color:var(--amber); }

.ds-footer-legal{ font-size:12px; line-height:1.6; color:var(--cream-dim); }
.ds-footer-legal a{ border-bottom:1px dotted var(--cream-dim); }
.ds-footer-legal a:hover{ color:var(--amber); border-color:var(--amber); }

.ds-footer-copyright{
  font-size:11px;
  letter-spacing:0.08em;
  color:var(--cream-dim);
  padding-top:6px;
  border-top:1px solid rgba(244,236,223,0.1);
}

.ds-site-footer .ds-contact{ text-align:left; }

/* ============ YOUTUBE AUDIO ENGINE ============
   The real YouTube IFrame Player driving playback. Kept small and
   tucked in a corner rather than display:none — YouTube's terms
   don't permit the embedded player to be fully hidden. */
.ds-yt-mount{
  position:fixed;
  right:2px;
  bottom:2px;
  width:2px;
  height:2px;
  overflow:hidden;
  opacity:0.01;
  pointer-events:none;
  z-index:-1;
}
.ds-yt-mount iframe{ width:100%; height:100%; display:block; }

.ds-ctrl-btn:disabled{
  opacity:0.4;
  cursor:default;
  pointer-events:none;
}

/* ============ FILE:// WARNING BANNER ============ */
.ds-file-warning{
  position:relative;
  z-index:100;
  padding:12px 20px;
  background:#7a1e14;
  color:var(--cream);
  font-size:13px;
  line-height:1.5;
  text-align:center;
  border-bottom:2px solid var(--amber);
}
.ds-file-warning code{
  background:rgba(0,0,0,0.3);
  padding:1px 6px;
  border-radius:4px;
  font-size:12px;
}

/* ============ FOOTER SOCIAL ICONS ============ */
.ds-footer-social{
  display:flex;
  align-items:center;
  gap:10px;
}
.ds-footer-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px; height:34px;
  border-radius:50%;
  background:rgba(0,0,0,0.3);
  border:1px solid var(--panel-border);
  color:var(--cream);
  transition:background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ds-footer-social a:hover{ transform:translateY(-2px); border-color:var(--amber); }
.ds-footer-social svg{ width:16px; height:16px; }

/* ============ FOOTER PAGE LINKS ============ */
.ds-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.ds-footer-links a{
  font-size:12.5px;
  color:var(--cream-dim);
  border-bottom:1px dotted var(--cream-dim);
}
.ds-footer-links a:hover{ color:var(--amber); border-color:var(--amber); }

/* ============ STATIC PAGES (About / Contact / Privacy / T&C) ============
   Deliberately lightweight: no player bar, no YouTube API load — these
   are rarely-visited utility pages, so they stay fast and simple. Music
   keeps playing on the homepage; use "Back to Deluxe Saloon" to return. */
.ds-page{
  position:relative;
  z-index:1;
  max-width:720px;
  margin:0 auto;
  padding:56px 24px 80px;
}
.ds-page-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--cream-dim);
  border-bottom:1px dotted var(--cream-dim);
  margin-bottom:32px;
}
.ds-page-back:hover{ color:var(--amber); border-color:var(--amber); }
.ds-page-title{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size:clamp(28px, 5vw, 42px);
  color:var(--cream);
  margin-bottom:8px;
}
.ds-page-updated{
  font-size:12px;
  color:var(--cream-dim);
  margin-bottom:32px;
}
.ds-page-content{ font-size:15px; line-height:1.75; color:var(--cream-dim); }
.ds-page-content h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;
  letter-spacing:0.06em;
  color:var(--amber);
  margin:32px 0 10px;
}
.ds-page-content p{ margin-bottom:14px; }
.ds-page-content ul{ margin:0 0 14px 20px; }
.ds-page-content li{ margin-bottom:6px; }
.ds-page-content a{ color:var(--cream); border-bottom:1px dotted var(--cream-dim); }
.ds-page-content a:hover{ color:var(--amber); border-color:var(--amber); }
.ds-page-note{
  margin-top:36px;
  padding:14px 16px;
  background:rgba(0,0,0,0.25);
  border:1px solid var(--panel-border);
  border-radius:10px;
  font-size:12.5px;
  color:var(--cream-dim);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 760px){
  .ds-topbar{ flex-direction:column; }
  .ds-top-right{ align-items:flex-start; width:100%; }
  .ds-services{ flex-wrap:wrap; }
  .ds-nav{ width:100%; }
  .ds-tool-btn{ padding:10px 16px; font-size:14px; }
  .ds-mood-popover{ left:0; right:auto; min-width:220px; }
  .ds-hero{ justify-content:center; text-align:center; padding:0 6vw; min-height:70vh; }
  .ds-radio{ width:100%; }
  .ds-radio-top{ flex-wrap:wrap; row-gap:10px; }
  .ds-player-meta{ min-width:120px; }
  .ds-volume{ order:1; width:100%; padding-left:0; margin-left:0; border-left:none; border-top:1px solid rgba(255,255,255,0.08); padding-top:10px; margin-top:8px; }
  .ds-volume input[type="range"]{ flex:1; width:auto; }
  .ds-controls{ flex-wrap:wrap; row-gap:8px; flex:1 1 100%; margin-left:0; }
  .ds-player-bar{ padding:14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }

  .ds-panel-overlay{ align-items:flex-end; padding:0; }
  .ds-panel{
    max-width:none;
    max-height:80vh;
    border-radius:20px 20px 0 0;
  }
  .ds-playlist-card,
  .ds-song-row{ padding:12px 10px; }
  .ds-ctrl-btn{ width:40px; height:40px; }
  .ds-play-btn{ width:48px; height:48px; }

  .ds-site-footer{ padding:40px 20px calc(var(--player-bar-height, 260px) + 24px); }
  .ds-rotation-list{ grid-template-columns:1fr; }
  .ds-page{ padding:40px 18px 60px; }
}

@media (prefers-reduced-motion: reduce){
  .ds-online .dot{ animation:none; }
  .ds-bg{ transition:none; }
  .ds-bg-layer{ transition:none; }
}