/* GymClankers Landing — Dark industrial, crimson glow */

:root {
  --bg: #050505;
  --accent: #BA2525;
  --accent-dim: #851A1A;
  --accent-glow: rgba(186, 37, 37, 0.3);
  --text: #efefef;
  --text-muted: #aaa;
  --surface: rgba(20, 20, 20, 0.85);
}

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

html, body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-user-select: none;
  user-select: none;
}

/* Full-screen background — progressive load */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Tiny inline placeholder (blurred, instant) */
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAMCAIAAAD6TJplAAAD0ElEQVR42gXBSW8bVQAA4LfN5n0bO4uzNi4kVZa2iQg0RBXkUgEHJC5IHDhx56dwqTjAFRBS4VgkkKJKBRGojNo0yuIktaPEHns89oxnPPNme4/vgzPV6ZV5NTbbtTL860ZoGFjNp+RMLp3PFUr5B++uf7y38/qsed233t+87/n+4VnjwdpbgR/8+tv+66MLa2jZg4FpjmQY7i4p87PTsysb3//we3swxhEQ24abyBbHFN5dSLmx2HOhokiTM9Wvv/r84fYWBMJxs21Sxlg8tMemQ9V0ujY38876ymDknF60nLGXEPGjjUp1Ui3N1n785ZnhhDFjJCmJEeOaMdYQhhL5cm/+yQujZaMoDC9bnXbfjgB0PAqH1yYIEfO46523U0OHUmfU6fYhxJmE/NmmiiD6pzHgly9HNJYJiiKIy4V8UhYDBmLGVbUYAfl2Pgih4AHF9qmcULbuLFUr6s/ffvP4uyevnv9x7+3pvUefhNQ5eHV8cXHFAv+jGrzpOZqLDdO2x5RziBEXMcJqoZhOSADiXFqJY36hOWsrtYfL2bO2E0Jxa7UGsdC3nGRxckrN7X24e2tzp2fYELDzN9c3N72dytj1+VGPN9sGwghDCABMSEgiCK7VlmamizHEccTckNEYzVcra4sqc/QTv9Dtm3Q0vLUwS7EyUS7Kkhi7duQ6ba2LUvmVXLBULf70rDmynYSAMMGIx5zzu0vq0XmHAAQjDjFB+ihIJZVKQlYI36+3ttdmP5hLPj46tizn7+cHQioLEEIQJgUQufbyvfsPK8riTPVp/YZSGoZBqVyYm1ZhFJy2emEU5XNpQgi+7Aw9hiAAoiQ6lrc8X8lmUroVdHWz0WhyiCDCcUA54xDBkY/jGP9bPx73OwNKBpatiGhoBlNqNggjvT/iALw4ac+VEjiTyxtulC2VMAJFCTa6NiZELWQQ4E/3DwY9bWd7fXVj9fzkDEIAGSMIffHpLmDR4VGjmM9MlLKu68WMd3Wz2XM8a6B3tLOm1tc0InnDSiKrEOY47thkIAR63ww5Geo9rWuksrn31hcymdTL/6Zab64AALcXp+7MF/SBfUjE+mGjpDt+BAQeZmSs+yiwjLyMkCh1xi7OKyIUJK1vR2E4DHgUMc/zYsaIgLVuX1GUslr6s37aaHYqpYxaTHUM90obUoba+hATghD2KaW+HyJREgQahOlcWiDI9SMciqlkscyjoNPpE0IEjCLq0rGNMXFsp1IpJRW5ftiYmqnaphWEQa48EbrjQjbtehQBlkjIXcMMfD+XkgsZhXqeadqWaRWS0v+UmCJn0twhigAAAABJRU5ErkJggg==') center/cover no-repeat;
  filter: blur(20px);
  transform: scale(1.1);
  transition: filter 0.8s ease, transform 0.8s ease;
}
.bg-overlay.loaded {
  background-image: url('/img/banner_0b.webp');
  filter: blur(0);
  transform: scale(1);
}
.bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.50);
}

/* Hero layout */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem 4rem;
  gap: 1.5rem;
}

/* Logo */
.logo {
  width: 120px;
  height: 120px;
  opacity: 0;
  animation: fadeIn 1s ease 0.5s forwards;
}

.logo-icon {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 8px var(--accent-glow));
  cursor: pointer;
}

/* Robot arm — brighter at rest, flex on hover */
.robot-arm {
  opacity: 0.92;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
  transform-origin: 100px 240px; /* shoulder joint pivot */
}

.logo:hover .robot-arm {
  opacity: 1;
  transform: rotate(-3deg) scaleY(1.03);
  filter: drop-shadow(0 0 4px var(--accent-glow));
}

/* Wordmark SVG */
.wordmark-container {
  width: 90%;
  max-width: 800px;
}

.wordmark {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Electricity trace animation */
.wordmark-glow {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: trace 3s ease-in-out 1s forwards;
  opacity: 0.3;
}

.wordmark-trace {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  animation: trace 3s ease-in-out 1s forwards, flickerGrad 1.8s ease-in 3.5s 1 forwards;
}

.wordmark-fill {
  animation: fillIn 0.8s ease 3.8s forwards;
}

@keyframes trace {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Graduated flicker — 6 blinks that speed up (Safari-safe, single play) */
@keyframes flickerGrad {
  0%  { opacity: 1; }
  8%  { opacity: 0.3; }
  16% { opacity: 1; }
  30% { opacity: 0.3; }
  38% { opacity: 1; }
  48% { opacity: 0.3; }
  54% { opacity: 1; }
  62% { opacity: 0.3; }
  66% { opacity: 1; }
  73% { opacity: 0.3; }
  76% { opacity: 1; }
  82% { opacity: 0.3; }
  85% { opacity: 1; }
  100% { opacity: 1; }
}

/* Letter flicker */
.letter {
  transition: fill-opacity 0.08s ease;
}

.letter.flicker {
  fill-opacity: 0.15;
}

/* Spark particles (added by JS) */
.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 6px var(--accent), 0 0 12px var(--accent-glow);
  animation: sparkFade 0.6s ease-out forwards;
}

@keyframes sparkFade {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}

/* Tagline */
.tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.15em;
  opacity: 0;
  animation: fadeIn 1s ease 4.2s forwards;
}

/* Hero play button */
.hero-play {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.8s ease 4.4s forwards;
}

.hero-play-icon {
  width: 32px;
  height: 32px;
  color: var(--accent);
  margin-left: 4px;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.hero-visualizer {
  display: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
}

/* Playing state */
.hero-play.active .hero-play-icon {
  display: none;
}

.hero-play.active .hero-visualizer {
  display: block;
}

.hero-play:hover {
  background: var(--accent);
  box-shadow: 0 0 30px var(--accent-glow), 0 0 60px rgba(186, 37, 37, 0.15);
  transform: scale(1.08);
}

.hero-play:hover .hero-play-icon {
  color: #000;
}

.hero-play.active:hover .hero-visualizer {
  filter: brightness(0.6);
}

/* Buttons */
.buttons {
  display: flex;
  gap: 1rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 4.6s forwards;
}

.buttons .btn {
  min-width: 220px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 2.5rem;
  border: none;
  border-radius: 6px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-primary {
  background: var(--accent);
  color: #000;
}

.btn-primary:hover {
  background: #D03333;
  box-shadow: 0 0 20px var(--accent-glow), 0 0 40px rgba(186, 37, 37, 0.15);
  transform: translateY(-1px);
}

.btn-disabled {
  position: relative;
  background: transparent;
  color: #777;
  border: 1.5px solid #444;
  cursor: pointer;
  opacity: 0.7;
}

.btn-disabled:hover {
  color: transparent;
}

.btn-disabled::after {
  content: 'soon (tm)';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(120deg, #555 0%, #555 35%, #aaa 50%, #555 65%, #555 100%);
  background-size: 200% 100%;
  background-position: 200% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn-disabled:hover::after {
  opacity: 1;
  animation: shine 4s linear infinite;
}

@keyframes shine {
  from { background-position: 200% center; }
  to { background-position: -200% center; }
}

.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 1.5px solid var(--accent-dim);
}

.btn-secondary:hover {
  border-color: var(--accent);
  box-shadow: 0 0 20px var(--accent-glow);
  transform: translateY(-1px);
}

/* Spotify CTA — electric spin on hover */
.btn-spotify {
  position: relative;
  gap: 0.5rem;
  overflow: hidden;
  font-size: 0.9rem;
  padding: 0.85rem 2.5rem;
}

.btn-spotify-icon {
  width: 18px;
  height: 18px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.btn-spotify span,
.btn-spotify {
  position: relative;
  z-index: 1;
}

/* Rotating electric charge — two bright sparks circling the border */
.btn-spotify::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%;
  aspect-ratio: 1;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255,255,255,0.15) 4%,
    #fff 8%,
    rgba(255,255,255,0.15) 12%,
    transparent 16%,
    transparent 50%,
    rgba(255,255,255,0.1) 54%,
    rgba(255,255,255,0.6) 58%,
    rgba(255,255,255,0.1) 62%,
    transparent 66%
  );
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

/* Inner fill covers center — rotating gradient only visible at 2px border edge */
.btn-spotify::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--accent);
  border-radius: 4px;
  transition: background 0.2s ease;
  z-index: 0;
}

.btn-spotify:hover {
  transform: none;
  box-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(186, 37, 37, 0.1);
}

.btn-spotify:hover::before {
  opacity: 1;
  animation: electricSpin 2s linear infinite;
}

.btn-spotify:hover::after {
  background: #D03333;
}

@keyframes electricSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Social icons */
.socials {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.5rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 4.8s forwards;
}

.social-link {
  color: var(--text-muted);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.social-link svg {
  width: 20px;
  height: 20px;
}

/* Tapered social icon sizes */
.social-xs svg { width: 16px; height: 16px; }
.social-sm svg { width: 20px; height: 20px; }
.social-lg svg { width: 28px; height: 28px; }

.social-link:hover {
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* Community CTA */
.community-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.5rem;
  opacity: 0;
  animation: fadeIn 0.8s ease 5s forwards;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.2s ease, filter 0.2s ease;
}

.community-cta svg {
  width: 20px;
  height: 20px;
}

.community-cta:hover {
  color: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

.community-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* Shared fade-in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Tracklist ─── */
.tracklist {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.tracklist-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(186, 37, 37, 0.25);
}

.tracklist-album {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text);
}

.tracklist-count {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.tracklist-list {
  display: flex;
  flex-direction: column;
}

.tracklist-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.tracklist-row:hover {
  background: rgba(186, 37, 37, 0.1);
  color: var(--text);
}

.tracklist-row.active {
  color: var(--accent);
  background: rgba(186, 37, 37, 0.1);
}

.tracklist-num {
  width: 1.5rem;
  text-align: right;
  flex-shrink: 0;
  font-size: 0.75rem;
  opacity: 0.7;
}

.tracklist-row.active .tracklist-num {
  opacity: 1;
}

.tracklist-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tracklist-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.site-sig {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  color: #888;
}

.sig-line {
  display: block;
  width: 40px;
  height: 1px;
  background: #555;
}

.legal-links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 0.5rem;
  font-size: 0.7rem;
}
.legal-links a {
  color: #888;
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.1em;
}
.legal-links a:hover { color: #bbb; }

/* ─── Mobile-only elements: hidden by default ─── */
.mobile-player-card,
.mobile-viz-wrap,
.scroll-hint,
.mobile-socials,
.mini-bar {
  display: none;
}

/* ─── Mobile ─── */
@media (max-width: 767px) {
  .bg-overlay,
  .bg-overlay.loaded {
    background-position: calc(50% + 11px) center;
  }

  /* Hero becomes scrollable, not full-viewport-locked */
  .hero {
    min-height: 100dvh;
    justify-content: flex-start;
    padding: 3rem 1.5rem 2rem;
    padding-top: max(3rem, env(safe-area-inset-top, 0px));
    gap: 1.2rem;
  }

  .logo {
    width: 80px;
    height: 80px;
  }

  .wordmark-container {
    width: 95%;
  }

  .tagline {
    font-size: 0.9rem;
  }

  .buttons {
    width: 100%;
    max-width: 280px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  /* Disable wordmark flicker + sparks on mobile */
  .wordmark-trace {
    animation: trace 3s ease-in-out 1s forwards;
  }
  .spark { display: none; }

  /* Hide desktop elements on mobile */
  .hero-play { display: none !important; }
  .player-bar { display: none !important; }
  .socials { display: none !important; }
  .community-cta { display: none !important; }

  /* ─── Mobile visualizer ─── */
  .mobile-viz-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 80px;
    max-height: 200px;
    width: 100%;
  }

  .mobile-visualizer {
    width: 100%;
    max-width: 320px;
    height: 100%;
    opacity: 0.6;
  }

  /* ─── Mobile player card ─── */
  .mobile-player-card {
    display: flex;
    flex-direction: column;
    width: calc(100% - 1rem);
    max-width: 360px;
    background: rgba(10, 10, 10, 0.9);
    border-top: 2px solid var(--accent);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    gap: 0.6rem;
  }

  /* Track info row */
  .mpc-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .mpc-name {
    flex: 1;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mpc-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Progress bar — thick, thumb-friendly */
  .mpc-progress {
    position: relative;
    height: 26px;
    margin: 0 0.5rem;
    cursor: pointer;
    touch-action: none;
  }

  .mpc-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 6px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
  }

  .mpc-progress-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: 6px;
    width: 0%;
    transform: translateY(-50%);
    background: var(--accent);
    border-radius: 3px;
    pointer-events: none;
  }

  .mpc-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 6px var(--accent-glow);
  }

  /* Controls row — prev, play, next, volume all inline */
  .mpc-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .mpc-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: color 0.15s ease;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }

  .mpc-btn:active {
    color: var(--text);
  }

  .mpc-btn svg {
    width: 22px;
    height: 22px;
  }

  .mpc-btn-play {
    color: var(--accent);
  }

  .mpc-btn-play svg {
    width: 26px;
    height: 26px;
  }

  /* Volume — inline with transport controls */
  .mpc-vol-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    flex: 1;
    min-width: 0;
  }

  .mpc-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 3px;
    min-width: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
  }

  .mpc-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
  }

  .mpc-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: none;
    cursor: pointer;
  }

  .mpc-volume-btn {
    width: 32px;
    height: 32px;
  }

  .mpc-volume-btn svg {
    width: 18px;
    height: 18px;
  }

  /* ─── Scroll hint ─── */
  .scroll-hint {
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    color: var(--text-muted);
    opacity: 0.55;
    animation: scrollBounce 2s ease-in-out infinite;
  }

  .scroll-hint svg {
    width: 24px;
    height: 24px;
  }

  @keyframes scrollBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
  }

  /* ─── Tracklist mobile ─── */
  .tracklist {
    padding: 2rem 1rem 2rem;
  }

  .tracklist-header {
    justify-content: center;
  }

  .tracklist-row {
    padding: 0.85rem 0.75rem;
    min-height: 56px;
    font-size: 0.9rem;
    color: #aaa;
  }

  .tracklist-footer .site-sig,
  .tracklist-footer .legal-links {
    display: none;
  }

  /* ─── Mobile socials ─── */
  .mobile-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    position: relative;
    z-index: 1;
    padding: 2rem 1.5rem 3rem;
  }

  .ms-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .ms-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--text-muted);
  }

  .ms-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }

  .ms-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 99px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .ms-pill:active {
    border-color: var(--accent);
    color: var(--text);
  }

  .ms-pill svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .ms-pill-sm svg {
    width: 18px;
    height: 18px;
  }

  /* ─── Mini-bar ─── */
  .mini-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 48px;
    background: rgba(10, 10, 10, 0.95);
    border-top: 1px solid rgba(186, 37, 37, 0.25);
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    cursor: pointer;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    -webkit-tap-highlight-color: transparent;
  }

  .mini-bar.visible {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mini-bar-play {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    -webkit-tap-highlight-color: transparent;
  }

  .mini-bar-play svg {
    width: 20px;
    height: 20px;
  }

  .mini-bar-name {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    max-width: 100px;
  }

  .mini-bar-progress {
    flex: 1;
    height: 3px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 2px;
    overflow: hidden;
    min-width: 0;
  }

  .mini-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--accent);
    border-radius: 2px;
  }

  .mini-bar-time {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Landscape safeguard */
  @media (orientation: landscape) {
    .hero {
      min-height: max(100dvh, 500px);
    }
  }
}

/* ─── Player Bar ─── */
.player-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.95);
  border-top: 1px solid rgba(186, 37, 37, 0.3);
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.player-bar.visible {
  transform: translateY(0);
}

/* Progress — full-height behind controls */
.progress-wrap {
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 2;
}

.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: rgba(186, 37, 37, 0.33);
  transition: none;
  pointer-events: none;
}

/* Playhead — vertical line */
.progress-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0%;
  width: 2px;
  background: var(--accent);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0.6;
}

.player-bar.playing .progress-handle {
  opacity: 1;
}

/* Playhead pulse — top to bottom sweep */
.progress-handle::after {
  content: '';
  position: absolute;
  top: 0;
  left: -1px;
  width: 4px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--accent), 0 0 16px var(--accent-glow);
  opacity: 0;
}

.player-bar.playing .progress-handle::after {
  animation: playheadPulse 1.5s ease-in-out infinite;
}

@keyframes playheadPulse {
  0% { top: -4px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: calc(100% - 4px); opacity: 0; }
}

/* Robot runner — draggable scrubber */
.progress-robot {
  position: absolute;
  top: -20px;
  left: 0%;
  transform: translateX(-50%);
  width: 24px;
  height: 24px;
  padding: 4px;
  pointer-events: auto;
  cursor: grab;
  opacity: 0.65;
  transition: opacity 0.3s ease;
  filter: drop-shadow(0 0 3px var(--accent-glow));
  z-index: 4;
}

.progress-robot:active {
  cursor: grabbing;
}

.player-bar.playing .progress-robot {
  opacity: 0.9;
  animation: robotRun 0.4s steps(2) infinite;
}

@keyframes robotRun {
  0% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
  50% { transform: translateX(-50%) translateY(-2px) rotate(3deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(-3deg); }
}

/* Controls row */
.player-controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.player-bar:hover .player-controls {
  opacity: 1;
}

.player-bar.playing .player-controls {
  opacity: 1;
}

.player-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

.player-btn:hover {
  color: var(--text);
}

.player-btn svg {
  width: 16px;
  height: 16px;
}

/* Rune play button */
.play-btn {
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
}

.play-btn .rune-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.play-btn .play-icon,
.play-btn .pause-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
}

/* Outer ring rotates when playing */
.player-bar.playing .rune-ring {
  animation: runeRotate 12s linear infinite;
}

@keyframes runeRotate {
  to { transform: rotate(360deg); }
}

/* Track info */
.track-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 0.5rem;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}

.track-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track-time {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: #777;
  white-space: nowrap;
}

.track-duration {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  color: #666;
  white-space: nowrap;
}

/* Volume controls */
.volume-wrap {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  position: relative;
  z-index: 1;
}

.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  opacity: 0;
  transition: opacity 0.2s ease, width 0.2s ease;
  cursor: pointer;
}

.volume-wrap:hover .volume-slider {
  opacity: 1;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  margin-top: -3.5px;
}

.volume-slider::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 2px;
}

.volume-slider::-moz-range-track {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.15);
}