/*
 * Theme matched to superduperkyle.com / shop.superduperkyle.com:
 * white background, black text, his pink (#eb66ae, sampled directly from
 * the "Add to Cart" button on shop.superduperkyle.com), a retro monospace
 * display font for headings/buttons (his store uses a custom-uploaded font
 * called "VCR" — that file lives on his paid Shopify plan, so this uses
 * VT323, a free/open equivalent with the same VHS-timestamp look; swap in
 * his actual font file here if he wants pixel-perfect matching), and
 * mostly-square corners rather than rounded pill buttons.
 */
@font-face {
  font-family: "VT323";
  src: url("/fonts/vt323-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --border: #e5e5e8;
  --text: #111111;
  --text-dim: #6b6b70;
  --accent: #eb66ae;
  --accent-text: #ffffff;
  --danger: #d1274a;
  --radius: 4px;
  --display-font: "VT323", "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

.site-header {
  padding: 20px 20px 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.header-bar {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; line-height: 0; }
.brand-logo { height: 56px; width: auto; display: block; }
.site-nav { display: flex; align-items: center; gap: 12px; }
.nav-link {
  font-family: var(--display-font);
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.tagline { color: var(--text-dim); margin: 10px 0 0; font-size: 15px; text-align: center; }

/* Full-width hype banner — the team wants this to be the loud, exciting
   element of the header, so it takes the space freed up by pulling the logo
   and "Main Site" link close together above (see .header-bar) instead of
   spreading them across the whole row. */
.countdown-banner {
  max-width: 960px;
  margin: 14px auto 0;
  padding: 14px 20px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}
.countdown-label {
  display: block;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.countdown-clock {
  display: block;
  color: var(--accent);
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 88px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.catalog {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.loading { text-align: center; color: var(--text-dim); }

.section-heading {
  font-family: var(--display-font);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 24px;
}

.featured-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
}
.featured-art { flex: 0 0 44%; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.featured-body {
  flex: 1 1 auto;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.featured-badge {
  align-self: flex-start;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--display-font);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.featured-body h2 { margin: 0 0 6px; font-family: var(--display-font); font-size: 32px; font-weight: 400; }
.featured-body .card-meta { margin: 0 0 20px; }
.featured-body .buy-button { font-size: 14px; padding: 12px 18px; }

/* Sold out — stays fully browsable (art, tracklist, previews), just can't
   be bought. Grayscale + a banner communicates that at a glance without
   hiding the release, and the buy button is restyled but stays clickable
   so fans can still open the modal to look around. */
.is-sold-out .card-art img,
.is-sold-out .featured-art img,
.is-sold-out .art-placeholder {
  filter: grayscale(1) brightness(0.8);
}
.sold-out-banner {
  position: absolute;
  top: 18%;
  left: -8%;
  right: -8%;
  transform: rotate(-8deg);
  background: rgba(17, 17, 17, 0.82);
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.is-sold-out .buy-button {
  background: var(--surface-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.sold-out-notice {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 0 16px;
}

/* Coming Soon -- browsable ahead of release, but not buyable yet. Full-color
   art (unlike Sold Out's grayscale) since this is building anticipation for
   a drop, not marking something as done. */
.coming-soon-banner {
  position: absolute;
  top: 18%;
  left: -8%;
  right: -8%;
  transform: rotate(-8deg);
  background: var(--accent);
  color: var(--accent-text);
  text-align: center;
  padding: 6px 0;
  font-family: var(--display-font);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
}
.is-coming-soon .buy-button {
  background: var(--accent);
  color: var(--accent-text);
  border: none;
}
.coming-soon-notice {
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .featured-card { flex-direction: column; }
  .featured-art { flex: none; width: 100%; }
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(17,17,17,0.10); }

.card-art, .featured-art { position: relative; aspect-ratio: 1 / 1; background: var(--surface-2); overflow: hidden; }
.card-art img, .featured-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s ease; }
.card:hover .card-art img { transform: scale(1.04); }
.art-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #f4f4f5, #e5e5e8); }

.card-body { padding: 14px 16px 18px; }
.card-body h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; }
.card-meta { color: var(--text-dim); font-size: 13px; margin: 0 0 14px; text-transform: capitalize; }

.card-actions { display: flex; gap: 8px; }
.preview-button, .buy-button {
  border: none;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.preview-button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}
.preview-button:disabled { opacity: 0.4; cursor: not-allowed; }
.buy-button {
  background: var(--accent);
  color: var(--accent-text);
  flex: 1 1 auto;
}
.buy-button:hover, .preview-button:hover:not(:disabled) { filter: brightness(1.05); }

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  z-index: 10;
}
.modal-backdrop.hidden { display: none; }

.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 380px;
  width: 100%;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: var(--text-dim);
  font-size: 24px; cursor: pointer; line-height: 1;
}

.modal-art { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--radius); margin-bottom: 14px; background: var(--surface-2); }
.modal h2 { margin: 0 0 4px; font-family: var(--display-font); font-size: 28px; font-weight: 400; }
.modal-subtitle { color: var(--text-dim); font-size: 13px; margin: 0 0 18px; }

.track-list {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
  max-height: 240px;
  overflow-y: auto;
}
.track-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--border);
}
.track-row:last-child { border-bottom: none; }
.track-row-locked { opacity: 0.55; }
.track-play-btn {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.track-play-btn:hover:not(:disabled) { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.track-play-btn:disabled { cursor: not-allowed; }
.track-row-title { flex: 1 1 auto; font-size: 14px; }
.track-row-title em { color: var(--text-dim); font-style: normal; font-size: 12px; }
.track-row-duration { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }

.price-row { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.price-row strong { color: var(--accent); font-family: var(--display-font); font-size: 22px; font-weight: 400; }

.pwyw-note { font-size: 13px; color: var(--text-dim); margin: 0 0 12px; }
.amount-buttons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.amount-chip {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.amount-chip.selected, .amount-chip:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.amount-input-label, .email-label {
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.amount-input-label input, .email-label input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  font-size: 15px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.amount-input-label input:focus, .email-label input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.pay-button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
}
.pay-button:hover { filter: brightness(1.05); }
.pay-button:disabled { opacity: 0.6; cursor: wait; }

.modal-actions { display: flex; gap: 8px; align-items: stretch; }
.modal-actions .pay-button { flex: 1; }
.btn-copy-link {
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.btn-copy-link:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.copy-link-status { font-size: 12px; color: var(--text-dim); text-align: center; margin: 8px 0 0; word-break: break-all; }

.modal-error { color: var(--danger); font-size: 13px; margin-top: 10px; }
.fine-print { color: var(--text-dim); font-size: 11px; text-align: center; margin-top: 14px; }

.notify-form { margin: 0 0 16px; }
.notify-form .email-label { margin-bottom: 10px; }
.notify-status { font-size: 13px; color: var(--text-dim); text-align: center; margin: 8px 0 0; }

.hidden { display: none; }

/* --- Feature Contest leaderboard --- */
.leaderboard-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}
.leaderboard-page h1 {
  font-family: var(--display-font);
  font-size: 34px;
  font-weight: 400;
  margin: 0 0 6px;
}
.leaderboard-sub { color: var(--text-dim); margin: 0 0 28px; }

/* Standing "Follow Kyle on Twitch" nudge -- shown whenever a channel is
   configured (see /api/twitch-status). Used to share this spot with a loud
   "live now" banner, but that became redundant once the actual stream
   could be embedded under the leaderboard entries (see
   .twitch-embed-section below) -- removed rather than layering more
   live-detection styling on top of it. */
.twitch-follow-banner {
  max-width: 960px;
  margin: 14px auto 0;
  text-align: center;
}
.twitch-follow-button {
  display: inline-block;
  background: #9146ff;
  color: #fff;
  font-family: var(--display-font);
  font-size: 16px;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 10px 26px;
  border-radius: var(--radius);
  transition: filter 0.15s ease;
}
.twitch-follow-button:hover { filter: brightness(1.08); }

/* Same "small label, big pink tabular number" treatment as the site's
   countdown banner (see .countdown-clock) — a standout callout card rather
   than a quiet inline caption. */
.leaderboard-stats {
  display: flex;
  justify-content: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 8px 18px;
  margin: 0 0 28px;
}
.stats-item { text-align: center; padding: 0 28px; }

/* Evergreen "what makes a good feature candidate" explainer -- sits right
   under the page heading, before the live stats/round status, since it
   answers "what makes the cut" before showing who's currently in the
   running. */
.criteria-accordion {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 24px;
}
.criteria-accordion summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display-font);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
.criteria-accordion summary::-webkit-details-marker { display: none; }
.criteria-accordion summary::before { content: "▸"; font-size: 12px; }
.criteria-accordion[open] summary::before { content: "▾"; }
.criteria-accordion summary:hover { color: var(--text); }
.criteria-accordion-body { margin-top: 12px; }
.criteria-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.criteria-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fdf1f7;
  border: 1px solid #f3c8e0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
}
.criteria-note {
  margin: 0;
  color: var(--text-dim);
  font-size: 12.5px;
}
.stats-item + .stats-item { border-left: 1px solid var(--border); }
.stats-label {
  display: block;
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.stats-value {
  display: block;
  color: var(--accent);
  font-family: var(--display-font);
  font-weight: 400;
  font-size: clamp(32px, 8vw, 52px);
  line-height: 1.05;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.round-status-pill {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  color: var(--accent);
  font-family: var(--display-font);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius);
  margin: 0 0 20px;
}

.leaderboard-closed {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-dim);
}
.leaderboard-closed h2 { font-family: var(--display-font); font-weight: 400; font-size: 26px; color: var(--text); margin: 0 0 8px; }

.leaderboard-winner-hero {
  text-align: center;
  background: linear-gradient(180deg, rgba(235, 102, 174, 0.12), rgba(235, 102, 174, 0.02));
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 32px 20px;
  margin: 0 0 32px;
  box-shadow: 0 12px 28px rgba(235, 102, 174, 0.16);
}
.winner-hero-trophy { font-size: 40px; line-height: 1; margin-bottom: 6px; }
.winner-hero-label {
  font-family: var(--display-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 15px;
  margin: 0 0 8px;
}
.winner-hero-title { margin: 0 0 6px; font-size: 24px; font-weight: 700; }
.winner-hero-meta { margin: 0 0 16px; color: var(--text-dim); font-size: 13px; }
.winner-hero-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  color: var(--accent-text);
  background: var(--accent);
  text-decoration: none;
  border: none;
  cursor: pointer;
  padding: 9px 20px;
  border-radius: var(--radius);
}
.winner-hero-link:hover { filter: brightness(1.06); }

.leaderboard-date-group { margin: 0 0 28px; }
.leaderboard-date-group:last-child { margin-bottom: 0; }
.leaderboard-date-heading {
  font-family: var(--display-font);
  font-weight: 400;
  font-size: 19px;
  color: var(--text-dim);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.leaderboard-round-heading {
  font-family: var(--display-font);
  font-weight: 400;
  font-size: 22px;
  color: var(--accent);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--accent);
}

/* Collapsed by default, same idiom as the admin hint toggles — the point is
   fans CAN see every pick that entered the contest without it competing for
   attention with who's currently in the running. */
.honorable-mentions {
  margin-top: 32px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
.honorable-mentions summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display-font);
  font-size: 18px;
  color: var(--text-dim);
}
.honorable-mentions summary::-webkit-details-marker { display: none; }
.honorable-mentions summary::before { content: "▸"; font-size: 13px; }
.honorable-mentions[open] summary::before { content: "▾"; }
.honorable-mentions summary:hover { color: var(--text); }
.honorable-count {
  font-size: 13px;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.honorable-mentions-body { margin-top: 16px; }

.leaderboard-list { display: flex; flex-direction: column; gap: 12px; }

.leaderboard-entry {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.leaderboard-entry.is-winner { border-color: var(--accent); background: #fdf1f7; }

.entry-rank {
  font-family: var(--display-font);
  font-size: 26px;
  color: var(--accent);
  flex: 0 0 auto;
  min-width: 40px;
}
.entry-body { flex: 1 1 auto; min-width: 0; }
.entry-body h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.entry-dash { color: var(--text-dim); }
.entry-meta { margin: 0; color: var(--text-dim); font-size: 13px; }

.entry-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.winner-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--display-font);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.favorite-badge {
  display: inline-block;
  background: #fef3c7;
  color: #92400e;
  font-family: var(--display-font);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.stream-pick-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1e40af;
  font-family: var(--display-font);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.entry-play-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-family: inherit;
  color: var(--accent);
  background: none;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
}
.entry-play-btn:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.entry-thumbs {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 5px 10px;
  cursor: pointer;
}
.entry-thumbs:hover:not(:disabled) { border-color: var(--accent); }
.entry-thumbs:disabled { cursor: default; }
.entry-thumbs.is-voted { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.entry-thumbs-count { font-variant-numeric: tabular-nums; }

.leaderboard-confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 40;
}

@media (max-width: 560px) {
  .leaderboard-entry { flex-wrap: wrap; }
  .entry-actions { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .leaderboard-winner-hero { padding: 24px 16px; }
  .winner-hero-trophy { font-size: 32px; }
  .winner-hero-title { font-size: 20px; }
  .stats-item { padding: 0 16px; }
  .leaderboard-round-heading { font-size: 19px; }
  .honorable-mentions summary { font-size: 16px; }
}

/* --- Spotify playlist footer (leaderboard page only) --- */
.spotify-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: #fff;
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(17, 17, 17, 0.08);
}
.spotify-footer-player {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 90px 8px 8px;
}
.spotify-footer-player iframe { display: block; border-radius: 12px; width: 100%; }
.spotify-footer-icon-btn {
  position: absolute;
  top: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.spotify-footer-icon-btn:hover { background: var(--surface-2); }
#spotify-footer-expand { right: 50px; }
#spotify-footer-toggle { right: 12px; }
.spotify-footer-pill {
  display: block;
  width: 100%;
  border: none;
  background: var(--accent);
  color: var(--accent-text);
  font-family: var(--display-font);
  font-size: 15px;
  letter-spacing: 0.02em;
  padding: 10px;
  cursor: pointer;
  text-align: center;
}
.spotify-footer-pill:hover { filter: brightness(1.05); }
.spotify-footer-pill.hidden { display: none; }

.twitch-embed-section {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 0 20px;
  text-align: center;
}
.twitch-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}
.twitch-embed-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.twitch-embed-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--accent);
  text-decoration: none;
}
.twitch-embed-link:hover { text-decoration: underline; }

.success-page {
  max-width: 480px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: center;
}
.success-page h2 { font-family: var(--display-font); font-size: 32px; font-weight: 400; }
.download-list { list-style: none; padding: 0; }
.download-list li { margin-bottom: 10px; }
.download-list a {
  display: block;
  background: var(--accent);
  color: var(--accent-text);
  text-decoration: none;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-weight: 700;
}
.download-list a:hover { filter: brightness(1.05); }
.back-link { display: inline-block; margin-top: 24px; color: var(--text-dim); }

/* --- Storefront footer: Spotify guide banner ---
   Ted wants this obvious to every fan, not buried fine print, so it's a
   full-width bordered banner rather than a quiet text link. Lives only on
   the store page (public/index.html) per Ted's request. */
.site-footer {
  max-width: 720px;
  margin: 32px auto 40px;
  padding: 0 20px;
}
.guide-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fdf1f7;
  border: 2px solid var(--accent);
  border-radius: 8px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text);
}
.guide-banner:hover { filter: brightness(0.98); }
.guide-banner-icon { flex: none; font-size: 26px; line-height: 1; }
.guide-banner-text { flex: 1 1 auto; font-size: 14px; line-height: 1.4; }
.guide-banner-text strong { display: block; font-size: 15px; margin-bottom: 2px; }
.guide-banner-cta {
  flex: none;
  font-family: var(--display-font);
  font-size: 15px;
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .guide-banner { flex-wrap: wrap; }
  .guide-banner-cta { margin-left: 40px; }
}