/*! SONIC SNOWFLAKE RECORDS — Player Bar */

:root { --player-accent: #B583FF; }

.player-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-player);
  height: var(--player-h);
  background: rgba(10, 6, 18, .88);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  transition: box-shadow var(--dur-med) ease;
  box-shadow: 0 -1px 40px -10px color-mix(in srgb, var(--player-accent) 35%, transparent);
}
@media (max-width: 640px) { .player-bar { height: var(--player-h-mobile); } }

.player-bar__scrub { position: absolute; top: -2px; left: 0; right: 0; height: 3px; }
.player-bar__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 3px; margin: 0;
  background: rgba(255,255,255,.12); cursor: pointer;
}
.player-bar__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--player-accent); box-shadow: 0 0 10px var(--player-accent);
  margin-top: -4.5px; opacity: 0; transition: opacity var(--dur-fast) ease;
}
.player-bar__range:hover::-webkit-slider-thumb, .player-bar__range:focus-visible::-webkit-slider-thumb { opacity: 1; }
.player-bar__range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--player-accent); border: none; }
.player-bar__range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, var(--player-accent) 0%, var(--player-accent) calc(var(--v,0%)), rgba(255,255,255,.12) 0); }

.player-bar__inner {
  height: calc(100% - 3px); margin-top: 3px; display: flex; align-items: center; gap: 22px;
  padding: 0 var(--gutter);
}
@media (max-width: 640px) { .player-bar__inner { flex-wrap: wrap; padding-top: 10px; gap: 10px 16px; } }

.player-bar__track { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 220px; max-width: 320px; }
.player-bar__art { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; flex: none; border: 1px solid var(--line); background: var(--panel-2); box-shadow: 0 0 0 1px rgba(0,0,0,.2); }
.player-bar__art img { width: 100%; height: 100%; object-fit: cover; }
.player-bar__meta { min-width: 0; }
.player-bar__title { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-bar__artist { font-family: var(--font-mono); font-size: .72rem; color: var(--mist); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }

.player-bar__viz { flex: none; opacity: .9; }

.player-bar__controls { display: flex; align-items: center; gap: 14px; flex: none; margin: 0 auto; }
@media (max-width: 640px) { .player-bar__controls { order: 3; width: 100%; justify-content: center; margin-top: 4px; } }
.player-bar__icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--mist); transition: color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}
.player-bar__icon svg { width: 17px; height: 17px; }
.player-bar__icon:hover { color: var(--pearl); background: rgba(255,255,255,.06); }
.player-bar__icon.is-on { color: var(--player-accent); }
.player-bar__toggle {
  width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--player-accent); color: var(--void); box-shadow: 0 0 20px color-mix(in srgb, var(--player-accent) 55%, transparent);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.player-bar__toggle svg { width: 18px; height: 18px; }
.player-bar__toggle:hover { transform: scale(1.08); }

.player-bar__time { font-family: var(--font-mono); font-size: .74rem; color: var(--mist); flex: none; display: flex; gap: 5px; white-space: nowrap; }
.player-bar__time-sep { opacity: .4; }

.player-bar__volume { display: flex; align-items: center; gap: 8px; flex: none; }
.player-bar__volume input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 80px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.14); cursor: pointer;
}
.player-bar__volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: var(--pearl); margin-top: -4px;
}

.player-bar[data-state="empty"] .player-bar__toggle { opacity: .45; pointer-events: none; }