/* The player bar, shared by the album pages and the splash. Colours come from
   the page's palette when it defines one and fall back to the splash's cream
   on shade when it doesn't. player.js builds the bar and shows it once a
   track is loaded. */
.player {
  --p-ink: var(--ink, #1a1108);
  --p-cream: var(--cream, #fff3df);
  --p-muted: var(--muted, var(--cream-dim, rgba(255, 243, 223, 0.7)));
  --p-gold: var(--gold, #efd96b);
  --p-rule: var(--rule, rgba(255, 243, 223, 0.12));
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: auto minmax(8rem, 1fr) auto minmax(10rem, 2fr) auto;
  gap: 1.25rem;
  align-items: center;
  padding: 0.7rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--p-ink) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--p-rule);
  color: var(--p-cream);
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.player[hidden] { display: none; }

body.has-player { padding-bottom: 5.5rem; }

.player button {
  appearance: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  color: var(--p-cream);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.player button svg { width: 0.7rem; height: 0.7rem; fill: currentColor; }

.player button:hover,
.player button:focus-visible { background: var(--p-gold); border-color: var(--p-gold); color: var(--p-ink); outline: none; }

.player-art { width: 2.75rem; height: 2.75rem; border-radius: 3px; object-fit: cover; }
.player-art[hidden] { display: none; }

.player-meta { display: grid; gap: 0.15rem; min-width: 0; }
.player-title {
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  color: var(--p-cream);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.player-album { color: var(--p-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-album a { color: inherit; text-decoration: none; padding-bottom: 0.15em; border-bottom: 1px solid transparent; transition: color 0.2s, border-color 0.2s; }
.player-album a:hover,
.player-album a:focus-visible { color: var(--p-cream); border-color: currentColor; outline: none; }

.player-controls { display: flex; gap: 0.5rem; }
.player-controls .toggle { width: 2.25rem; height: 2.25rem; }

.player-progress { display: grid; grid-template-columns: auto 1fr auto; gap: 0.75rem; align-items: center; color: var(--p-muted); letter-spacing: 0.08em; }
.player-seek { width: 100%; accent-color: var(--p-gold); margin: 0; }

.player-dl {
  text-decoration: none;
  color: var(--p-gold);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.55em 1em;
}
.player-dl:hover, .player-dl:focus-visible { background: var(--p-gold); color: var(--p-ink); border-color: var(--p-gold); outline: none; }

@media (max-width: 820px) {
  .player { grid-template-columns: auto 1fr auto; grid-template-areas: 'art meta controls' 'progress progress progress'; gap: 0.6rem 1rem; }
  .player-art { grid-area: art; }
  .player-meta { grid-area: meta; }
  .player-controls { grid-area: controls; }
  .player-progress { grid-area: progress; }
  .player-dl { display: none; }
  body.has-player { padding-bottom: 7.5rem; }
}