html, body {
  padding: 0;
  overflow-x: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: min(100vh, 1440px);
  flex-direction: column;
  padding: 0 0 50px;
}

main {
  width: 100%;
}

/* ── Hero Header ── */
/* Pill-shaped. Explicit width so the matching actions pill at the bottom
   can use the same width for top/bottom symmetry. */
.hero-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 38rem;
  max-width: calc(100vw - 2rem);
  margin: 2rem auto;
  padding: 0.4rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-heavy);
}

.hero-tagline {
  font-size: 2.2rem;
  font-weight: 500;
  font-family: 'Funnel Display', sans-serif;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.hero-tagline::before {
  content: '';
  display: block;
  height: 50px;
  margin-bottom: -43px;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 50'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%237ec8ff' stop-opacity='0.55'/><stop offset='1' stop-color='%237ec8ff' stop-opacity='0'/></linearGradient></defs><path d='M0,8 C10,3 20,13 30,8 C40,3 50,13 60,8 C70,3 80,13 90,8 C100,3 110,13 120,8 L120,50 L0,50 Z' fill='url(%23g)'/><path d='M0,8 C10,3 20,13 30,8 C40,3 50,13 60,8 C70,3 80,13 90,8 C100,3 110,13 120,8' fill='none' stroke='%237ec8ff' stroke-opacity='0.7' stroke-width='2.5'/></svg>");
  background-repeat: repeat-x;
  background-size: 120px 50px;
}

.hero-tagline em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

/* ── Container & Grid ── */
.container {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  padding: 0 1rem;
}

.sc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-content: center;
  justify-items: center;
  row-gap: 16px;
  column-gap: 28px;
}

/* When a filter narrows results to 1–3 mixes, collapse the grid to N
   tracks instead of leaving 2–3 empty columns on the right. Combined
   with `justify-content: center` on the grid above, the remaining
   tracks stay visually centred under the hero/actions pills. Desktop
   only — tablet (≤900px) and mobile (≤600px) already have their own
   column counts and don't suffer the same off-centre effect. */
@media (min-width: 901px) {
  .sc-grid:has(> :nth-child(1):last-child) {
    grid-template-columns: minmax(0, 600px);
  }
  .sc-grid:has(> :nth-child(2):last-child) {
    grid-template-columns: repeat(2, minmax(0, 600px));
  }
  .sc-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 600px));
  }
}

/* ── Embed Wrapper (grid child) ── */
.sc-embed {
  min-width: 0;
  width: 100%;
  max-width: 450px;
  position: relative;
  text-align: center;
}

.sc-embed .sc-player {
  width: 100%;
  max-height: min(calc((100vh - 255px) / 2), 600px);
  border: none;
}

.sc-grid.has-playing .sc-player {
  opacity: 0.55;
  filter: brightness(0.85);
}

.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
}

.sc-grid.has-playing .sc-player.is-playing {
  opacity: 1;
  filter: brightness(1.1);
}

/* Shimmer stagger per embed position — 0.4s increment = shimmer duration (3s) / max embeds (8) */
.sc-embed:nth-child(2) .sc-player { animation-delay: -0.4s; }
.sc-embed:nth-child(3) .sc-player { animation-delay: -0.8s; }
.sc-embed:nth-child(4) .sc-player { animation-delay: -1.2s; }
.sc-embed:nth-child(5) .sc-player { animation-delay: -1.6s; }
.sc-embed:nth-child(6) .sc-player { animation-delay: -2.0s; }
.sc-embed:nth-child(7) .sc-player { animation-delay: -2.4s; }
.sc-embed:nth-child(8) .sc-player { animation-delay: -2.8s; }

/* ── Embed Label ── */
.embed-label {
  position: absolute;
  z-index: 2;
  bottom: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  padding: 0.25em 0.7em;
  background: #fff;
  color: #1b1918;
  border: 3px solid var(--accent);
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}

.embed-label:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Actions: hero buttons in a pill container ── */
/* Matches the hero-header pill at the top for top/bottom symmetry —
   same width and same outer dimensions. Buttons space-evenly inside. */
.actions {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  width: 38rem;
  max-width: calc(100vw - 2rem);
  margin: calc(2rem + 30px) auto 2rem;
  padding: 0.4rem 1.25rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-heavy);
}

#filterBtn,
#randomBtn {
  margin: 0;
  /* Container provides the shadow — buttons don't need their own. */
  box-shadow: none;
}

/* Filter button: flex layout so the label and Clear halves are equal-width,
   keeping the divider at the visual centre regardless of word length
   ("Filter" vs "Clear"). */
#filterBtn {
  display: flex;
  align-items: center;
  justify-content: center;
}

#filterLabel,
.filter-clear-inline {
  flex: 1;
  text-align: center;
  /* Explicit font-family — spans inside <button> don't always inherit
     the button's font-family across browsers/OSes, which made "Filter"
     render in the system font (Segoe UI / etc.) while "Random" (text
     directly inside the button) correctly used Funnel Display. */
  font-family: inherit;
}

/* Filter active — text goes red. The inline "Clear" affordance appearing
   is the primary signal; the colour shift reinforces it. */
#filterBtn.is-active {
  color: var(--accent);
}

/* Divider between Filter label and inline Clear. */
.filter-divider {
  flex: 0 0 auto;
  width: 1px;
  height: 0.9em;
  margin: 0 0.55em;
  background: currentColor;
  opacity: 0.45;
}

.filter-clear-inline {
  color: inherit;
  cursor: pointer;
}

/* Reserve the divider + Clear space even when inactive so the Filter
   button's width stays constant. Prevents Filter/Random from shifting
   when a filter is applied/cleared — only visibility toggles. */
.filter-divider[hidden],
.filter-clear-inline[hidden] {
  display: inline-block;
  visibility: hidden;
}

/* Latest mode (Ctrl+L) — Filter, Clear, and Random all go white to match
   the hero tagline. Distinct from the default (Filter white / Random red)
   so the author can see they've left random mode. */
.actions.is-paginating #filterLabel,
.actions.is-paginating .filter-clear-inline,
.actions.is-paginating .hero-btn-primary {
  color: #fff;
}

/* Filter-active wins over Latest mode: if a filter is applied, the Filter
   label and its inline Clear stay red to preserve the active-filter signal,
   even when the rest of the pill is in Latest-mode white. */
.actions.is-paginating #filterBtn.is-active #filterLabel,
.actions.is-paginating #filterBtn.is-active .filter-clear-inline {
  color: var(--accent);
}

/* Hero buttons are plain text inside the pill — no backgrounds, borders,
   or shadows. The pill container provides the visual frame. */
.hero-btn,
.archive-btn {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 400;
  font-family: 'Funnel Display', sans-serif;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: color 0.2s;
  text-decoration: none;
}

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

/* Random echoes the red "Lost" accent in the hero tagline. */
.hero-btn-primary {
  color: var(--accent);
}

/* Underline on hover per-portion of the Filter button (label / clear) and
   on the whole Random button. */
#filterLabel:hover,
.filter-clear-inline:hover {
  text-decoration: underline;
}

.hero-btn-primary:hover {
  text-decoration: underline;
}

/* ── Accessibility ── */
.hero-btn:focus-visible,
.archive-btn:focus-visible,
.embed-label:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}


/* ── Hidden author tool: track-ID popover (Alt+click on embed label) ── */
.track-id-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: var(--shadow-heavy);
  z-index: 10000;
  font-family: 'Funnel Display', sans-serif;
}

.track-id-popover-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.track-id-popover-value {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1.35rem;
  color: var(--text);
  user-select: all;
  letter-spacing: 0.02em;
}

.track-id-popover-copy {
  background: none;
  border: 1px solid var(--border);
  color: var(--accent);
  padding: 0.3rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s, color 0.15s;
}

.track-id-popover-copy:hover {
  border-color: var(--accent);
}

.track-id-popover-copy.is-copied {
  color: var(--text);
  border-color: var(--text);
}


/* ── Responsive: 1440p+ ── */
@media (min-height: 1100px) and (min-width: 1200px) {
  .sc-embed .sc-player {
    max-height: min(calc((100vh - 320px) / 2), 560px);
  }
  .sc-embed {
    max-width: min(calc((100vh - 320px) / 2), 560px);
  }
  .container {
    max-width: min(calc((100vh - 320px) * 2 + 80px), 2360px);
  }
}

/* ── Responsive: 1080p desktops ── */
@media (max-height: 1100px) and (min-width: 1200px) {
  .container {
    max-width: min(calc((100vh - 205px) * 2 + 80px), 1830px);
  }
  .sc-embed {
    max-width: min(calc((100vh - 205px) / 2), 450px);
  }
  .sc-embed .sc-player {
    max-height: min(calc((100vh - 205px) / 2), 450px);
  }
  .hero-tagline {
    font-size: 1.8rem;
  }
  .hero-header {
    padding: 0.4rem 1.25rem;
    margin: 0.75rem auto;
  }
  .embed-label {
    font-size: 0.75rem;
  }
  .hero-btn,
  .archive-btn {
    font-size: 1.1rem;
  }
  .actions {
    margin-top: calc(1.25rem + 30px);
  }
}


/* ── Responsive: Tablets ── */
@media (max-width: 900px) {
  .hero-header {
    padding: 0.5rem 0;
  }
  .sc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sc-embed {
    max-width: 350px;
  }
  .sc-embed .sc-player {
    max-height: none;
  }
}


/* ── Responsive: Mobile ── */
@media (max-width: 600px) {
  body {
    padding: 1rem 0;
  }
  .sc-grid {
    grid-template-columns: 1fr;
  }
  .sc-embed {
    max-width: 100%;
  }
  .sc-embed .sc-player {
    max-height: none;
  }
  .hero-tagline {
    font-size: 1.35rem;
    line-height: 1.35;
  }
  .hero-header {
    padding: 0.25rem 0.5rem;
  }
  .actions {
    margin-top: 2.5rem;
    padding: 0.5rem 1rem;
  }
  .hero-btn,
  .archive-btn {
    font-size: 1rem;
  }
}


/* Directory panel styles live in directory.css (centered modal overlay). */

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .sc-player {
    animation: none !important;
  }
}