* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  color: #191009;
  background: repeating-linear-gradient(135deg, #ff8bf1 0 24px, #ffb0f4 24px 48px);
  font: 1rem "Comic Sans MS", "Trebuchet MS", sans-serif;
}

.ticker {
  padding: .55rem;
  border-bottom: 4px solid #130a09;
  background: #c4ff00;
  text-align: center;
  font: bold .9rem monospace;
}

main { max-width: 880px; margin: auto; padding: 24px 20px; }

.hero, .window, .player {
  border: 4px solid #191009;
  box-shadow: 7px 7px #191009;
  margin-bottom: 25px;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 22px clamp(14px, 5vw, 46px);
  background: #ff810f;
}

.sticker {
  display: inline-block;
  transform: rotate(-5deg);
  padding: .35rem .65rem;
  border: 2px solid #191009;
  background: #faff00;
  font: bold .8rem monospace;
}

h1 {
  margin: .15em 0;
  color: #2626bd;
  font-size: clamp(2.8rem, 11vw, 7rem);
  line-height: .79;
  letter-spacing: -.07em;
  text-shadow: 3px 3px #faff00;
}

.hero p { margin: 1rem 0 0; font-weight: bold; }
figure { min-width: 0; margin: 0; text-align: center; transform: rotate(5deg); }
figure img {
  display: block;
  width: clamp(92px, 25vw, 176px);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: #c4ff00;
  border: 4px ridge #faff00;
}
figcaption { padding: .35rem .15rem; background: #c4ff00; font: bold clamp(.7rem, 2.5vw, 1rem) monospace; }

.window { background: #efecdf; }
.bar {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  padding: .45rem .65rem;
  color: white;
  background: #2626bd;
  font: bold .85rem monospace;
}
.window-content { padding: 14px; }
h2 { margin: 0 0 .6rem; }
#catalog-status:empty { display: none; }
.tracks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.track {
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  text-align: left;
  overflow-wrap: anywhere;
}
.track[aria-current="true"] { background: #c4ff00; }
.track img { width: 45px; height: 45px; object-fit: cover; background: #faff00; }
.track small { display: block; font-weight: normal; }
.track-number { font: bold .85rem monospace; }

button {
  min-height: 44px;
  padding: .4rem .6rem;
  border: 3px outset #eadf9c;
  background: #fff39c;
  color: #191009;
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}
button:active { border-style: inset; }
button:disabled { opacity: .6; cursor: default; }
button:focus-visible, a:focus-visible { outline: 3px solid #2626bd; outline-offset: 3px; }

.player {
  position: sticky;
  bottom: 8px;
  padding: 10px;
  background: #c4ff00;
}
.player p { margin: 0 0 6px; overflow-wrap: anywhere; font-weight: bold; }
.controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 3px inset #69518e;
  background: #261638;
  color: #fff39c;
  font: bold .78rem monospace;
}
.transport { display: flex; gap: 4px; }
.transport button { min-width: 44px; white-space: nowrap; }
#toggle { min-width: 78px; background: #ff8bf1; border-color: #f49ce8; }
.timeline, .volume { display: flex; align-items: center; gap: 6px; min-width: 0; }
.timeline span { min-width: 4ch; text-align: center; }
.controls input { min-width: 0; margin: 0; accent-color: #c4ff00; }
#seek { flex: 1; width: 100%; }
#volume { width: 65px; }

@media (max-width: 620px) {
  .controls { grid-template-columns: auto minmax(0, 1fr); }
  .timeline { grid-column: 1 / -1; grid-row: 1; }
  .volume { justify-self: end; }
}

@media (max-width: 380px) {
  .controls { grid-template-columns: minmax(0, 1fr); }
  .volume { justify-self: stretch; }
  #volume { flex: 1; }
}

footer { font-size: .9rem; }
footer a { color: #1d1687; }