/* =====================================================================
   SaReGaMaLu — Homepage redesign v7
   Retheme pass: entire site now uses the deep maroon/red/white palette
   extracted from colour.jpg (a Spotify "Now Playing" screen — dynamic
   background color pulled from album art, deep red-to-near-black
   gradient, white text, vivid red accent panel, white filled controls).
   Structure/layout from v6 (theme.png mockup + YT Music card
   conventions) is unchanged — only color tokens and the handful of
   hardcoded hex values that lived outside them.

   Color (named, from colour.jpg):
     --bg        #2B0B0B   page ground — deep near-black maroon
     --bg-warm   #451212   alternating panels (top bar, search, chips)
     --bg-card   #551815   card surface, one step lighter than warm
     --bg-hover  #6B1F19   hover state, lighter still
     --ink       #FFFFFF   primary text — white, not dark-on-light anymore
     --ink-soft  rgba(255,255,255,.62)  muted text (was warm grey)
     --orange    #E63328   primary accent — the vivid red from "DAMN."
                            and the Lyrics panel in the reference
     --orange-dk #C22A20   hover/active state of the accent
     --gold      #FF6A4D   secondary warm highlight (was literal gold —
                            the reference has no yellow, so this now
                            reads as a coral-red gradient partner)
     --line      rgba(255,255,255,.14)  borders on dark surfaces

   Buttons: primary filled controls are white with dark text (matching
   the reference's white pause button on a red ground) rather than
   colored-on-white — the contrast direction flips with the theme.
   ===================================================================== */

:root {
  --bg: #2B0B0B;
  --bg-warm: #451212;
  --bg-card: #551815;
  --bg-hover: #6B1F19;
  --ink: #FFFFFF;
  --ink-soft: rgba(255,255,255,0.62);
  --orange: #E63328;
  --orange-dk: #C22A20;
  --gold: #FF6A4D;
  --gold-dk: #E2503A;
  --line: rgba(255,255,255,0.14);
  --shadow-soft: 0 8px 20px -10px rgba(0,0,0,0.5);
  --shadow: 0 16px 34px -16px rgba(230,51,40,0.5);

  --radius-card: 10px;
  --radius-panel: 16px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;

  /* Height of the sticky top bar. The mobile breakpoint overrides this
     because the search moves onto its own row there, and the fixed
     sidebar's offset/height are derived from it. */
  --topbar-h: 66px;
  --sidebar-w: 236px;
  /* Computed to exactly fit one 20px icon: 20 + (12px link padding x2)
     + (8px rail padding x2) = 60px — no leftover whitespace either side. */
  --sidebar-w-collapsed: 60px;
  --rail-w: 300px;
  --font-body: Roboto, Arial, sans-serif;
  /* "Google Sans" isn't distributed on the public Google Fonts API (it's
     Google's internal product typeface) — no @import can actually load
     it. Named first so it's used automatically on any device that
     already has it installed (e.g. Android/ChromeOS), falling back to
     Poppins/Roboto so headings still render correctly everywhere else. */
  --font-heading: "Google Sans", "Product Sans", Roboto, "Poppins", -apple-system, sans-serif;

  /* Material-standard "ease" curve — fast start, gentle settle. Used
     everywhere a transition happens so the whole page moves consistently
     instead of every element picking its own timing. */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* text-decoration:none here, once, at the base — without it every link
   that doesn't have its own component-level override (i.e. anything
   from the_content(), lyrics/meaning text, comments, or any link added
   later) falls back to the browser's default underline. Corporate/pro
   convention: links read through color/weight, not underline. */
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; text-wrap: balance; margin: 0; }
h2 { font-size: 34px; line-height: 28.5px; font-weight: 700; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.tabular { font-variant-numeric: tabular-nums; }
button { font-family: inherit; }

/* ---------- Top bar ---------- */
.top-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--space-4);
  background: transparent;
  border-bottom: 1px solid transparent;
  padding: var(--space-3) var(--space-5);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Applied by script.js once the page scrolls past ~10px. */
.top-bar.is-scrolled {
  background: rgba(43,11,11,0.92);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,0.35);
}
/* Width matches --sidebar-w-collapsed and the negative margin cancels
   .top-bar's own left padding, so this button spans the exact same
   0-60px zone as the collapsed sidebar rail below it — the icon lands
   on the same vertical column as the collapsed rail's icons, the way
   YT Music's hamburger sits directly above its own icon rail rather
   than floating at an unrelated padding offset. */
.menu-toggle {
  flex: none; width: var(--sidebar-w-collapsed); height: 40px;
  margin-left: calc(var(--space-5) * -1);
  border-radius: var(--radius-pill);
  border: none; background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .18s var(--ease);
}
.menu-toggle:hover { background: var(--bg-hover); }
.menu-toggle svg { width: 22px; height: 22px; }
.brand { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; flex: none; }
.brand img { height: 34px; width: auto; }
.search-bar {
  flex: 1; max-width: 560px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-warm); border: 1px solid var(--line);
  border-radius: var(--radius-pill); padding: 10px var(--space-4);
  color: var(--ink-soft); font-size: 14px;
}
.search-bar svg { flex: none; width: 16px; height: 16px; stroke: var(--ink-soft); }
.search-bar input[type="search"] {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--ink); font-size: 14px; font-family: inherit; padding: 0;
}
.search-bar input[type="search"]::placeholder { color: var(--ink-soft); }
.search-bar input[type="search"]::-webkit-search-decoration,
.search-bar input[type="search"]::-webkit-search-cancel-button,
.search-bar input[type="search"]::-webkit-search-results-button,
.search-bar input[type="search"]::-webkit-search-results-decoration { display: none; }
.search-bar input[type="search"] { -webkit-appearance: none; appearance: none; }
.top-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }

/* Filled = white on dark, matching the reference's white pause button —
   the contrast direction flips from the old light theme's dark-on-gold. */
.btn-filled {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: #fff; color: var(--bg);
  border-radius: var(--radius-pill); padding: 0 18px;
  height: 40px; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; text-decoration: none;
  transition: background .18s var(--ease), transform .18s var(--ease-spring);
}
.btn-filled:hover { background: #f1e6e6; transform: translateY(-1px); }
.btn-filled--sm { height: 32px; padding: 0 14px; font-size: 13.5px; }
.btn-outline {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: transparent; color: var(--ink);
  border-radius: var(--radius-pill); padding: 0 16px;
  height: 36px; font-size: 14px; font-weight: 600;
  border: 1.5px solid var(--line); cursor: pointer; text-decoration: none;
}
.btn-outline:hover { border-color: var(--orange); color: var(--orange); }
.icon-btn {
  width: 38px; height: 38px; border-radius: 50%; border: none; background: transparent;
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center; cursor: pointer;
  position: relative;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--ink); }
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); border: 2px solid var(--bg); }
.user-chip { display: flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--gold)); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; overflow: hidden;
}

/* ---------- App shell: sidebar + main + right rail ---------- */
.app-shell { display: flex; align-items: flex-start; }

.side-nav {
  /* flex-basis:auto (not a fixed length) so the `width` property below
     actually governs sizing — a fixed flex-basis here would silently
     win over width and make the collapse toggle a no-op. */
  flex: 0 0 auto;
  width: var(--sidebar-w);
  background: var(--bg);
  border-right: 1px solid var(--line);
  padding: var(--space-4) var(--space-3);
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .32s var(--ease), padding .32s var(--ease);
}
/* Collapsed: a snug icon-only rail, each link centered — width is tuned
   to fit exactly one 20px icon + its padding, not an arbitrary number. */
.side-nav.is-collapsed { width: var(--sidebar-w-collapsed); padding-left: var(--space-2); padding-right: var(--space-2); }
.side-nav.is-collapsed .side-link { justify-content: center; }
.side-nav.is-collapsed .side-link .badge { opacity: 0; max-width: 0; margin-left: 0; padding: 0; }
.side-nav.is-collapsed .side-section-label { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
.side-nav.is-collapsed .create-playlist { justify-content: center; }
.side-nav.is-collapsed .create-playlist span { opacity: 0; max-width: 0; margin-left: 0; }

.side-link {
  display: flex; align-items: center;
  padding: 10px var(--space-3); border-radius: var(--space-2);
  font-size: 14px; font-weight: 500; color: var(--ink);
  text-decoration: none; white-space: nowrap;
  transition: background .18s var(--ease), justify-content 0s;
}
.side-link svg { flex: none; width: 20px; height: 20px; stroke: currentColor; }
/* The label itself carries the reveal/hide animation (opacity + width +
   margin together) instead of display:none, so collapsing genuinely
   animates rather than snapping the text away instantly. */
.side-link span:not(.badge) {
  display: inline-block; margin-left: 16px; opacity: 1; max-width: 160px; overflow: hidden;
  transition: opacity .2s var(--ease), max-width .32s var(--ease), margin-left .32s var(--ease);
}
.side-nav.is-collapsed .side-link span:not(.badge) { opacity: 0; max-width: 0; margin-left: 0; }
.side-link:hover { background: var(--bg-hover); }
.side-link.active { background: var(--orange); color: #fff; font-weight: 700; }
.side-link .badge {
  display: inline-block; margin-left: auto; background: var(--orange); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .03em;
  padding: 2px 6px; border-radius: var(--radius-pill);
  transition: opacity .2s var(--ease), max-width .32s var(--ease), margin-left .32s var(--ease), padding .32s var(--ease);
}
.side-divider { height: 1px; background: var(--line); margin: var(--space-3) var(--space-2); }
.side-section-label {
  overflow: hidden; max-height: 32px;
  transition: opacity .2s var(--ease), max-height .32s var(--ease), padding .32s var(--ease);
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); padding: var(--space-2) var(--space-3) var(--space-2); white-space: nowrap;
}
.create-playlist {
  display: flex; align-items: center;
  margin: var(--space-3) var(--space-2) 0; padding: 10px var(--space-3);
  border: 1.5px dashed var(--line); border-radius: var(--space-2);
  font-size: 14px; font-weight: 600; color: var(--ink-soft);
  background: none; cursor: pointer; width: calc(100% - 16px);
  transition: border-color .18s var(--ease), color .18s var(--ease), justify-content 0s;
}
.create-playlist:hover { border-color: var(--orange); color: var(--orange); }
.create-playlist svg { width: 16px; height: 16px; flex: none; }
.create-playlist span {
  display: inline-block; margin-left: var(--space-2); opacity: 1; max-width: 160px; overflow: hidden;
  transition: opacity .2s var(--ease), max-width .32s var(--ease), margin-left .32s var(--ease);
}

.main-col { flex: 1; min-width: 0; }

/* ---------- Content + right rail as a 2-col grid ---------- */
.page-grid { display: grid; grid-template-columns: 1fr var(--rail-w); gap: var(--space-5); padding: var(--space-5) var(--space-5) 0; max-width: 1600px; }
@media (max-width: 1180px) { .page-grid { grid-template-columns: 1fr; } .side-rail { display: none; } }

.content { min-width: 0; padding-bottom: var(--space-6); }
.shelf-block { margin-bottom: 24px; opacity: 0; }
/* Hero renders above the fold on load — skip the scroll-in fade so it's
   never left invisible if GSAP is slow to init or fails to load. */
.shelf-block--hero { opacity: 1; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 32px 0 16px 0; }
.shelf-head .see-all { font-size: 14px; font-weight: 600; color: var(--ink-soft); text-decoration: none; }
.shelf-head .see-all:hover { color: var(--orange); }

/* ---------- Hero banner (Featured Song) ----------
   Source thumbnails are only 150x150 — a contained album-art panel
   (not a stretched full-bleed background) keeps them sharp. Gradient
   now reads directly off colour.jpg's red-to-maroon background instead
   of the old gold. */
.hero-banner {
  position: relative; overflow: hidden;
  border-radius: var(--radius-panel);
  background: linear-gradient(120deg, #8B2020 0%, var(--orange) 55%, var(--orange-dk) 100%);
  padding: var(--space-5);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.hero-banner__art {
  flex: none; width: 200px; height: 200px; border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5);
}
.hero-banner__art img { width: 100%; height: 100%; object-fit: cover; }
.hero-banner__body { position: relative; z-index: 1; max-width: 420px; }
.hero-banner__eyebrow { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #FFD9D2; margin-bottom: var(--space-2); }
/* line-height explicit: h1 has no line-height of its own (see the
   global h1,h2,h3 rule above), so this was inheriting body's 19px
   against a 30px font-size — negative leading. Invisible with the
   mockup's short placeholder titles, but real post titles ("Dekhlenge
   Saala Song Lyrics – Ustaad Bhagat Singh | Telugu & English") wrap to
   2-3 lines and the wrapped lines overlapped each other and the eyebrow
   label above. Same root cause as the earlier h2 fix. */
.hero-banner__title {
  font-size: 30px; line-height: 1.2; font-weight: 700; color: #fff; margin: var(--space-1) 0 var(--space-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-banner__meta { font-size: 14px; font-weight: 600; color: #FFE3DE; margin-bottom: 2px; }
.hero-banner__credit { font-size: 13.5px; color: rgba(255,255,255,0.75); margin-bottom: var(--space-4); }
.hero-banner__actions { display: flex; align-items: center; gap: var(--space-3); }
.play-now {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: #fff; color: var(--orange-dk); border: none; border-radius: var(--radius-pill);
  padding: 0 var(--space-5); height: 44px; font-size: 14.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 24px -8px rgba(0,0,0,0.45);
}
.play-now:hover { background: #f1e6e6; }
.play-now svg { width: 16px; height: 16px; }
.round-btn {
  width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.22);
  color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.round-btn:hover { background: rgba(255,255,255,0.34); }
.round-btn svg { width: 18px; height: 18px; }
.hero-banner__dots { position: absolute; right: var(--space-4); bottom: var(--space-4); display: flex; gap: 6px; z-index: 1; }
.hero-banner__dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.hero-banner__dots span.active { background: #fff; width: 18px; border-radius: 3px; }

/* ---------- Category pill row (below hero) — 4 equal-width tiles
   filling the full row, YT Music's New Releases/Charts/Moods/Podcasts
   row but stretched edge-to-edge instead of left-aligned auto-width. */
.pill-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 20px; border-radius: var(--space-3);
  background: var(--bg-card); border: 1px solid var(--line);
  color: var(--ink); font-size: 15px; font-weight: 600;
  text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.pill:hover { background: var(--bg-hover); border-color: var(--orange); transform: translateY(-2px); }
.pill .ic { width: 22px; height: 22px; color: var(--orange); flex: none; }
@media (max-width: 860px) { .pill-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pill-row { grid-template-columns: 1fr; } }

/* ---------- List-row grid (3-column) — YT Music's "Covers and
   remixes" pattern: compact rows (small thumb + title/sub inline),
   not the square shelf cards used elsewhere on the page. ---------- */
.list-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2) var(--space-5); }
.list-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) 0; text-decoration: none; color: var(--ink);
  border-radius: var(--space-1);
  transition: background .15s var(--ease);
}
.list-row:hover { background: var(--bg-hover); }
.list-row .thumb { flex: none; width: 56px; height: 56px; border-radius: var(--space-1); overflow: hidden; background: var(--bg-warm); box-shadow: var(--shadow-soft); }
.list-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.list-row .meta { display: flex; flex-direction: column; min-width: 0; }
.list-row .title { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-row .sub { font-size: 14px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .list-grid { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1180px) { .list-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Mood chips ----------
   Pastel light chips don't work on a dark ground — rebuilt as translucent
   white-on-dark tiles, each keeping its own accent hue for the text/icon
   only (still visually distinct, just not a light background anymore). */
/* Matches the reference "Moods & genres" grid: rectangular tags with a
   colored left border (not a fully-colored pill), 6 per row. */
.tag-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.tag-chip {
  display: flex; align-items: center;
  padding: 16px 18px; border-radius: var(--space-2);
  background: var(--bg-card); border-left: 4px solid var(--chip-c, var(--orange));
  color: var(--ink); font-size: 14.5px; font-weight: 600;
  text-decoration: none;
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.tag-chip:hover { background: var(--bg-hover); transform: translateY(-2px); }
.tag-chip--rose    { --chip-c: #FF7A9C; }
.tag-chip--blue    { --chip-c: #6FB2FF; }
.tag-chip--orange  { --chip-c: #FF9662; }
.tag-chip--pink    { --chip-c: #FF6FA8; }
.tag-chip--purple  { --chip-c: #B79CFF; }
.tag-chip--green   { --chip-c: #5FD98A; }
.tag-chip--skyblue { --chip-c: #6FCBFF; }
@media (max-width: 1180px) { .tag-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 760px) { .tag-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Shelves: YT-Music card conventions ---------- */
.shelf {
  display: flex; gap: var(--space-4); overflow-x: auto;
  scroll-snap-type: x proximity; padding: 2px 2px var(--space-2);
  margin: 16px 0px 24px;
  scrollbar-width: thin;
}
.song-card { flex: 0 0 168px; min-width: 0; scroll-snap-align: start; text-decoration: none; color: var(--ink); }
.song-card .art {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 1/1; margin-bottom: var(--space-2); background: var(--bg-warm);
  box-shadow: var(--shadow-soft);
}
.song-card .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.song-card:hover .art img { transform: scale(1.06); }
.song-card .play-dot {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--orange); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .2s var(--ease), transform .2s var(--ease-spring);
  box-shadow: 0 8px 18px rgba(230,51,40,0.5);
}
.song-card:hover .play-dot { opacity: 1; transform: translateY(0) scale(1); }
/* Title/subtitle block — 16px/500 title, 16px/400 subtitle at 70% white opacity, 19px line-height on both, 2px gap between the two. */
.song-card .title { font-size: 16px; font-weight: 500; line-height: 19px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-card .sub { color: rgba(255,255,255,0.7); font-size: 16px; font-weight: 400; line-height: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.artist-item { flex: 0 0 106px; min-width: 0; text-align: center; text-decoration: none; color: var(--ink); scroll-snap-align: start; }
/* If any thumbnail 404s (CDN reorganized, post removed, etc.), script.js
   adds .media-fallback to the containing box and .is-broken to the <img>
   — this renders a branded gradient + music-note glyph instead of the
   browser's broken-image icon. */
.media-fallback { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--orange), var(--gold)) !important; }
.media-fallback::after { content: "\266A"; color: #fff; font-size: 26px; font-weight: 800; }
.media-fallback img.is-broken { display: none; }

.artist-item .photo { width: 100px; height: 100px; border-radius: 50%; margin: 0 auto var(--space-2); overflow: hidden; background: var(--bg-warm); box-shadow: var(--shadow-soft); }
.artist-item .photo img { width: 100%; height: 100%; object-fit: cover; }
/* No real artist photos exist in the media library yet — an initials
   avatar (same brand gradient as the top-bar avatar) reads as a
   deliberate placeholder, not a broken image. */
.photo--initials { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--orange), var(--gold)); }
.photo--initials span { color: #fff; font-size: 22px; font-weight: 800; }
.artist-item .name { font-size: 14px; font-weight: 700; }

/* Full directory grid (/lyricist/ page) — same card, wrapped instead of
   a horizontal-scroll shelf, so flex:0 0 106px is overridden to fill
   its grid cell. */
.artist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: var(--space-4); padding: var(--space-2) 0; }
.artist-grid .artist-item { flex: none; width: 100%; }

/* ---------- Video cards (Popular Music Videos) — wide 16:9 thumbnails
   with a centered play triangle, matching the reference's video shelf
   instead of the square song-card art used elsewhere. ---------- */
.video-card { flex: 0 0 260px; min-width: 0; scroll-snap-align: start; text-decoration: none; color: var(--ink); }
.video-card .art {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  aspect-ratio: 16/9; margin-bottom: var(--space-2); background: var(--bg-warm);
  box-shadow: var(--shadow-soft);
}
.video-card .art img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease); }
.video-card:hover .art img { transform: scale(1.05); }
.video-card .play-tri {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18);
}
.video-card .play-tri svg { width: 46px; height: 46px; color: rgba(255,255,255,0.92); filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4)); }
.video-card .title { font-size: 14px; font-weight: 700; line-height: 1.3; margin-bottom: 2px; }
.video-card .sub { font-size: 13px; font-weight: 500; color: var(--ink-soft); }

/* ---------- Playlist tiles (Suggested Playlists) — gradient square
   art with the playlist name overlaid, no photo needed. ---------- */
.playlist-card { flex: 0 0 160px; min-width: 0; scroll-snap-align: start; text-decoration: none; color: var(--ink); }
.playlist-card .art {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius-card);
  margin-bottom: var(--space-2); overflow: hidden; box-shadow: var(--shadow-soft);
  display: flex; align-items: flex-end; padding: var(--space-3);
}
.playlist-card .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55)); }
.playlist-card .art span { position: relative; z-index: 1; color: #fff; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.playlist-card .sub { font-size: 13px; color: var(--ink-soft); }
.playlist-card--1 .art { background: linear-gradient(135deg, #FF7A9C, #E63328); }
.playlist-card--2 .art { background: linear-gradient(135deg, #6FCBFF, #2B6FD1); }
.playlist-card--3 .art { background: linear-gradient(135deg, var(--gold), var(--orange)); }
.playlist-card--4 .art { background: linear-gradient(135deg, #B79CFF, #7B2FF7); }
.playlist-card--5 .art { background: linear-gradient(135deg, #5FD98A, #1E8E4E); }
.playlist-card--6 .art { background: linear-gradient(135deg, #6B1F19, #2B0B0B); }

/* Play row (Guess the Song / Song Battle) */
.play-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.play-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-5); box-shadow: var(--shadow-soft); }
.play-card .kicker { font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange); }
.play-card h3 { font-size: 16px; font-weight: 700; margin: var(--space-2) 0 var(--space-3); }
.clue { font-style: italic; font-size: 14px; color: var(--ink); background: var(--bg-warm); border-radius: var(--space-2); padding: 10px var(--space-3); margin-bottom: var(--space-3); }
.opt-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-2); }
.opt { border: 1.5px solid var(--line); background: var(--bg-warm); color: var(--ink); border-radius: var(--space-2); padding: 9px 11px; font-size: 13.5px; font-weight: 600; text-align: left; }
.opt:hover { border-color: var(--orange); color: var(--orange); }
.battle-vs { display: flex; align-items: center; gap: var(--space-3); }
.battle-side { flex: 1; }
.battle-side .name { font-size: 13.5px; font-weight: 700; margin-bottom: var(--space-2); }
.battle-side .bar { height: 7px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; margin-bottom: var(--space-1); }
.battle-side .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), var(--gold)); transform-origin: left; }
.battle-side .pct { font-size: 12.5px; color: var(--orange); font-weight: 700; }
.battle-vs .vs { color: var(--ink-soft); font-size: 12.5px; font-weight: 700; }
@media (max-width: 620px) { .play-row { grid-template-columns: 1fr; } }

/* ---------- Right rail ---------- */
.side-rail { display: flex; flex-direction: column; gap: var(--space-4); padding-top: 2px; }
.rail-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-4); box-shadow: var(--shadow-soft); }
.rail-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-3); }

.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.quick-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-2); border-radius: var(--space-2);
  background: var(--bg-warm); text-decoration: none; color: var(--ink); text-align: center;
  border: 1px solid var(--line); position: relative;
}
.quick-tile:hover { border-color: var(--orange); }
.quick-tile .ic { width: 26px; height: 26px; color: var(--orange); }

.sgm-sotd { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-panel); overflow: hidden; box-shadow: var(--shadow-soft); }
.sgm-sotd__media { display: block; aspect-ratio: 16/9; overflow: hidden; }
.sgm-sotd__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sgm-sotd__body { padding: var(--space-4); }
.sgm-sotd__eyebrow { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-2); }
.sgm-sotd__title { font-size: 18px; line-height: 1.3; font-weight: 700; margin: 0 0 var(--space-2); }
.sgm-sotd__title a { color: var(--ink); text-decoration: none; }
.sgm-sotd__title a:hover { color: var(--orange); }
.sgm-sotd__note { font-size: 14px; color: var(--ink-soft); margin: 0 0 var(--space-3); }
.sgm-sotd__cta { display: inline-block; font-size: 14px; font-weight: 600; color: var(--orange); text-decoration: none; }
.sgm-sotd__cta:hover { color: var(--gold); }
.quick-tile .lbl { font-size: 13px; font-weight: 700; }
.quick-tile .sub { font-size: 12px; color: var(--ink-soft); }
.quick-tile .badge { position: absolute; top: 6px; right: 6px; background: var(--orange); color: #fff; font-size: 10.5px; font-weight: 800; padding: 2px 5px; border-radius: var(--radius-pill); }

.promo-card { border-radius: var(--radius-panel); padding: var(--space-4); color: #fff; position: relative; overflow: hidden; }
.promo-card--karaoke { background: linear-gradient(135deg, var(--orange), var(--gold)); }
.promo-card--voice { background: linear-gradient(135deg, #7B2FF7, #C13584); }
.promo-card .tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: rgba(255,255,255,0.22); padding: 3px 8px; border-radius: var(--radius-pill); margin-bottom: var(--space-2); }
.promo-card h4 { font-size: 15px; font-weight: 700; margin-bottom: var(--space-2); }
.promo-card p { font-size: 13px; opacity: .92; margin: 0 0 var(--space-3); }
.promo-card .btn-light { display: inline-flex; background: #fff; color: var(--bg); font-size: 13.5px; font-weight: 700; padding: 8px var(--space-4); border-radius: var(--radius-pill); text-decoration: none; }

.songbook-card { display: flex; gap: var(--space-3); }
.songbook-card img { width: 84px; height: 108px; object-fit: cover; border-radius: var(--space-1); box-shadow: var(--shadow-soft); flex: none; }
.songbook-card .name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.songbook-card .movie { font-size: 12.5px; color: var(--ink-soft); margin-bottom: var(--space-2); }
.songbook-card ul { list-style: none; margin: 0 0 var(--space-2); padding: 0; font-size: 12.5px; color: var(--ink-soft); }
.songbook-card ul li { margin-bottom: 2px; }
.songbook-card .price { font-size: 15px; font-weight: 800; color: var(--orange); margin-right: var(--space-2); }

/* ---------- Bottom mini-player — vivid red, matches the Lyrics panel in colour.jpg ---------- */
.mini-player {
  position: sticky; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 260px 1fr 220px; align-items: center; gap: var(--space-4);
  background: linear-gradient(90deg, var(--orange-dk), var(--orange) 55%, #FF5A46);
  padding: var(--space-3) var(--space-5);
  box-shadow: 0 -12px 32px -14px rgba(230,51,40,0.6);
}
/* Hidden for now — the rule above is untouched, so reverting is just
   deleting this one override rather than rebuilding the player. */
.mini-player { display: none; }
.mini-player__track { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.mini-player__track img { width: 50px; height: 50px; border-radius: var(--space-2); object-fit: cover; flex: none; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
.mini-player__meta { min-width: 0; }
.mini-player__meta .t { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player__meta .a { font-size: 12.5px; color: rgba(255,255,255,0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-player__controls { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mini-player__buttons { display: flex; align-items: center; gap: var(--space-3); }
.mini-player__buttons button { background: none; border: none; color: rgba(255,255,255,0.85); cursor: pointer; display: flex; transition: color .15s var(--ease), transform .15s var(--ease); }
.mini-player__buttons button:hover { color: #fff; transform: scale(1.1); }
.mini-player__buttons svg { width: 18px; height: 18px; }
.play-pause {
  width: 38px; height: 38px; border-radius: 50%; background: #fff !important; color: var(--orange-dk) !important;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  transition: transform .18s var(--ease-spring), box-shadow .18s var(--ease) !important;
}
.play-pause:hover { transform: scale(1.08) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.32); }
.mini-player__scrub { display: flex; align-items: center; gap: var(--space-2); width: 100%; font-size: 12px; color: rgba(255,255,255,0.85); }
.mini-player__scrub .track { flex: 1; height: 4px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.28); overflow: hidden; }
.mini-player__scrub .fill { height: 100%; width: 38%; background: #fff; border-radius: var(--radius-pill); }
.mini-player__extra { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.mini-player__extra .lyrics-btn {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
  color: #fff; border: 1.5px solid rgba(255,255,255,0.4); border-radius: var(--radius-pill);
  padding: 6px var(--space-3); text-decoration: none;
  transition: background .18s var(--ease), border-color .18s var(--ease);
}
.mini-player__extra .lyrics-btn:hover { background: rgba(255,255,255,0.15); border-color: #fff; }
.mini-player__extra .icon-btn { color: rgba(255,255,255,0.85); }
.mini-player__extra .icon-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
@media (max-width: 860px) { .mini-player { grid-template-columns: 1fr auto; } .mini-player__controls, .mini-player__extra .lyrics-btn { display: none; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-5) var(--space-5) var(--space-6); font-size: 13.5px; color: var(--ink-soft); background: var(--bg-warm); margin-top: var(--space-6); }
.site-footer .foot-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.foot-links { display: flex; gap: 20px; list-style: none; padding: 0; margin: 0; }
.foot-links a { text-decoration: none; color: var(--ink-soft); font-weight: 600; }
.foot-links a:hover { color: var(--orange); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .side-nav { position: fixed; left: 0; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); z-index: 35; box-shadow: var(--shadow); }
  .side-nav.is-collapsed { width: 0; padding: 0; border: none; overflow: hidden; }
  .page-grid { padding: var(--space-4) var(--space-3) 0; }

  /* The top bar's five controls cannot fit 375px on one row — they
     overflowed the viewport and squeezed the search to ~109px. Wrap the
     search onto its own full-width row and drop the Upload button (still
     reachable from the page itself), which keeps everything legible and
     removes the page's horizontal scroll. --topbar-h follows the taller
     bar so the fixed sidebar stays anchored to it. */
  /* 106px = 40 (row 1 controls) + 8 (row gap) + 41 (search) + 16 (padding)
     + 1 (border). Must track the bar's real height or the fixed sidebar
     leaves a gap below it. */
  :root { --topbar-h: 106px; }
  .top-bar { padding: var(--space-2) var(--space-3); flex-wrap: wrap; gap: var(--space-2); }
  /* Mobile top-bar's left padding is --space-3, not desktop's --space-5
     — the toggle's own negative margin has to match whichever is
     active or it drifts off the collapsed rail's column. */
  .menu-toggle { margin-left: calc(var(--space-3) * -1); }
  .top-bar .btn-outline { display: none; }
  .search-bar { order: 5; flex: 1 0 100%; max-width: none; }
  .brand img { height: 30px; }

  /* 34px/28.5px is a negative leading — fine for the single-line desktop
     headings it was specified for, but wrapped mobile headings overlapped
     each other. Smaller type with real leading at this width. */
  h2 { font-size: 22px; line-height: 1.25; }
  .hero-banner { flex-direction: column-reverse; text-align: center; }
  .hero-banner__art { width: 140px; height: 140px; }
  .hero-banner__title { font-size: 22px; }
  .hero-banner__actions { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-block { opacity: 1 !important; transform: none !important; }
}

/* ---------- Detail pages: album.html / single.html ---------- */

/* Immersive backdrop (single.html) — checked against YT Music's actual
   ytmusic-browse-response markup: the blurred art sits in a page-level
   layer (fixed to the viewport, not boxed inside the hero), full width,
   behind the sticky top bar and sidebar, with a dark gradient fading it
   into the page background. z-index:-1 puts it below all normal in-flow
   content automatically (CSS paints negative-z-index layers under
   non-positioned content) without having to hunt down and raise every
   element that needs to sit above it. */
.page-immersive-bg { position: fixed; top: 0; left: 0; width: 100vw; height: 420px; z-index: -1; overflow: hidden; pointer-events: none; }
.page-immersive-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) saturate(1.6) brightness(0.9); transform: scale(1.3); }
.page-immersive-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(43,11,11,0.3) 0%, var(--bg) 100%); }
@media (max-width: 860px) { .page-immersive-bg { height: 260px; } }

/* Split album hero: centered art/meta column on the left, tracklist on the
   right — matching the YT Music playlist page layout. */
.detail-hero-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-6); align-items: start; padding: var(--space-5) 0; }
/* min-width:0 lets the columns shrink below their content's min-content
   width. Without it the nowrap tab bar forced a 448px track inside a
   351px container on mobile, pushing the page sideways. */
.detail-hero-split__left, .detail-hero-split__right { min-width: 0; }
.detail-hero-split__left { text-align: center; }
.detail-hero-split__art { width: 240px; margin: 0 auto var(--space-4); aspect-ratio: 1/1; border-radius: var(--radius-panel); overflow: hidden; background: var(--bg-warm); box-shadow: var(--shadow-soft); }
.detail-hero-split__art img { width: 100%; height: 100%; object-fit: cover; }

/* Rotating disc (single.html) — the poster itself is printed on a round
   CD, like a physical movie Blu-ray disc label (ref: cd.png), rather than
   a square cover sitting beside a plain vinyl disc. */
.hero-media { width: 240px; max-width: 100%; margin: 0 auto var(--space-4); }
.cd-poster {
  position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.65), 0 0 0 5px rgba(255,255,255,0.06) inset;
  animation: cd-spin 9s linear infinite;
}
.cd-poster img { width: 100%; height: 100%; object-fit: cover; }
/* Sweeping specular highlight, like light catching the disc surface —
   rotates with the disc since it's a pseudo-element on the same node. */
.cd-poster::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg,
    rgba(255,255,255,0.28) 0deg, transparent 25deg,
    transparent 160deg, rgba(255,255,255,0.16) 190deg, transparent 230deg);
  mix-blend-mode: overlay; pointer-events: none;
}
/* Punched spindle hole in the centre, matching the reference disc. */
.cd-hole {
  position: absolute; top: 50%; left: 50%; width: 15%; height: 15%;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.22) inset, 0 2px 5px rgba(0,0,0,0.5);
}
@keyframes cd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cd-poster { animation: none; } }
.detail-hero-split__title { font-size: 32px; line-height: 1.15; margin: 0 0 var(--space-3); }
.detail-hero-split__creator { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: 14px; font-weight: 600; margin-bottom: var(--space-2); }
.avatar-sm { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--gold), var(--orange)); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.detail-hero-split__meta { font-size: 14px; color: var(--ink-soft); line-height: 1.7; margin-bottom: var(--space-4); }

/* single.html: composer avatar, movie link, language and date collapsed
   into one wrapping row rather than a stacked block. */
.detail-hero-split__meta-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 6px var(--space-2); font-size: 14px; color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.detail-hero-split__meta-row strong { color: var(--ink); font-weight: 600; }
.detail-hero-split__meta-row a { color: var(--ink); text-decoration: none; font-weight: 600; }
.detail-hero-split__meta-row a:hover { color: var(--gold); }
.detail-hero-split__meta-row .sep { color: var(--line); }

/* Song DNA as compact single-row meters, replacing the old wrapping pill
   chips — reads more like a stat strip than a tag list. */
/* Song DNA block, shown at the top of the Overview tab (single.html) —
   boxed and labelled so it reads as its own unit before the synopsis. */
.overview-dna { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-4); margin: 0 0 var(--space-5); }
.overview-dna__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px var(--space-3); margin-bottom: var(--space-3); }
.overview-dna__title { font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.overview-dna__note { font-size: 13.5px; color: var(--ink-soft); }
.dna-meter-row { display: flex; gap: var(--space-4); margin: 0; text-align: left; }
.dna-meter { flex: 1; min-width: 0; }
.dna-meter-label { display: flex; justify-content: space-between; gap: 4px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: 4px; }
.dna-meter-label span:last-child { color: var(--ink); font-weight: 700; }
.dna-meter-track { height: 4px; border-radius: 2px; background: var(--bg-card); overflow: hidden; }
.dna-meter-fill { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--gold), var(--orange)); }
.dna-meter-fill.w-95 { width: 95%; }
.dna-meter-fill.w-60 { width: 60%; }
.dna-meter-fill.w-35 { width: 35%; }
.dna-meter-fill.w-15 { width: 15%; }

.detail-hero-split__actions { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }

/* Song credits moved out of the right-side tabs (single.html) — plain
   stacked rows, no card chrome, sitting quietly below the action buttons. */
.mini-info-list { margin: var(--space-5) 0 0; text-align: left; }
.mini-info-list div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.mini-info-list dt { color: var(--ink-soft); margin: 0; flex: none; }
.mini-info-list dd { margin: 0; font-weight: 600; text-align: right; }
.play-now-lg {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: #fff; color: var(--bg); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft); transition: transform .18s var(--ease-spring);
}
.play-now-lg:hover { transform: scale(1.07); }
.shelf-head--tight { padding-top: 0; }
@media (max-width: 980px) { .detail-hero-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }

/* Track list — numbered rows, reused by album.html */
.track-list { list-style: none; margin: 0; padding: 0; }
.track-row {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: center;
  gap: var(--space-3); padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-card); text-decoration: none; color: var(--ink);
  transition: background .16s var(--ease);
}
.track-row:hover { background: var(--bg-card); }
.track-row .num { color: var(--ink-soft); font-size: 14px; text-align: center; }
.track-row .num .play-tri-sm { display: none; }
.track-row:hover .num .idx { display: none; }
.track-row:hover .num .play-tri-sm { display: block; }
.track-row .num .play-tri-sm svg { width: 14px; height: 14px; }
.track-row .info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.track-row .info .title { font-size: 15px; font-weight: 600; }
.track-row .info .sub { font-size: 14px; color: var(--ink-soft); }
.track-row .dur { font-size: 14px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Single-song lyrics layout */
.lyrics-text { font-size: 15px; line-height: 1.9; color: var(--ink); }
.lyrics-text p { margin: 0 0 1em; white-space: pre-line; }
.lyrics-text p:last-child { margin-bottom: 0; }
.lyrics-text br + br { display: none; }
.lyrics-text.meaning { color: var(--ink-soft); }

/* Song details stage: one toggle bar (Song/Video/Lyrics/Meaning/Karaoke/Song Info)
   switching a single content well below it — YT-Music inspired. */
.stage-toggle {
  display: flex; gap: var(--space-5);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
.stage-btn {
  border: none; background: transparent; color: var(--ink-soft);
  font-family: var(--font-body); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  padding: 0 0 var(--space-3); cursor: pointer;
  /* Sits on top of the container's own border so the active underline
     replaces that 1px line rather than stacking below it. */
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.stage-btn:hover { color: var(--ink); }
.stage-btn.active { color: var(--ink); border-bottom-color: var(--ink); }
.stage-body { min-height: 220px; }
.stage-view { display: none; }
.stage-view.active { display: block; }
/* Every tab renders plain on the page now — no card box around any of
   them, lyrics included. */
.stage-art { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden; background: var(--bg-warm); }
.stage-art img { width: 100%; height: 100%; object-fit: cover; }
.stage-play-tri { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.35); }
.stage-play-tri svg { width: 60px; height: 60px; color: rgba(255,255,255,0.92); filter: drop-shadow(0 4px 12px rgba(0,0,0,0.45)); }
.panel-note { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 var(--space-4); }
.info-list { margin: 0; }
.info-list > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.info-list > div:last-child { border-bottom: none; }
.info-list dt { color: var(--ink-soft); margin: 0; }
.info-list dd { margin: 0; font-weight: 600; text-align: right; }
.info-list dd a { color: var(--ink); text-decoration: none; }
.info-list dd a:hover { color: var(--gold); }

/* ---------- Movies A-Z (movies.html) ---------- */
.page-head { margin-bottom: var(--space-4); }
.page-title { font-size: 34px; line-height: 1.1; margin: 0 0 var(--space-2); }
.page-sub { font-size: 14px; color: var(--ink-soft); margin: 0; }

/* Sticky jump nav — stays reachable while scrolling through 20+ letter
   sections, like the reference site's own A-Z index. */
.az-nav {
  position: sticky; top: var(--topbar-h); z-index: 20;
  display: flex; flex-wrap: wrap; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: var(--space-3); margin: 0 0 var(--space-5);
}
.az-nav a, .az-nav__disabled {
  width: 28px; height: 28px; border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.az-nav a { color: var(--ink); text-decoration: none; transition: background .16s var(--ease), color .16s var(--ease); }
.az-nav a:hover { background: var(--orange); color: #fff; }
.az-nav__disabled { color: var(--ink-soft); opacity: .4; }

.movie-letter { margin-bottom: var(--space-5); scroll-margin-top: calc(var(--topbar-h) + 60px); }
.movie-letter h2 { font-size: 20px; color: var(--gold); margin-bottom: var(--space-3); }
.movie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2); }
.movie-chip {
  display: flex; align-items: center;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: var(--space-3); font-size: 14px; font-weight: 600; color: var(--ink);
  text-decoration: none; transition: background .16s var(--ease), border-color .16s var(--ease);
}
.movie-chip:hover { background: var(--bg-hover); border-color: var(--orange); }
@media (max-width: 640px) { .az-nav { position: static; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: var(--space-6); padding: var(--space-6) var(--space-5) var(--space-5); }
.site-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-6); max-width: 1180px; margin: 0 auto; }
.site-footer__logo { height: 50px; width: auto; margin-bottom: 10px; display: block; }
.site-footer__brand p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; max-width: 32ch; margin: 0; }
.site-footer__col { display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__heading { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: var(--space-1); }
.site-footer__col a { font-size: 14px; color: var(--ink); text-decoration: none; }
.site-footer__col a:hover { color: var(--orange); }
.site-footer__bottom { max-width: 1180px; margin: var(--space-5) auto 0; padding-top: var(--space-4); border-top: 1px solid var(--line); }
.site-footer__bottom p { font-size: 13px; color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .site-footer__top { grid-template-columns: 1fr; } }

/* ---------- Guess the Song / Song Battle (mu-plugin markup) ---------- */
.sgm-quiz, .sgm-battle {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-panel);
  padding: var(--space-5); box-shadow: var(--shadow-soft);
}
.sgm-quiz__title, .sgm-battle__title { font-size: 18px; font-weight: 700; margin: 0 0 var(--space-2); color: var(--ink); }
.sgm-quiz__clue { font-size: 15px; font-style: italic; color: var(--ink-soft); margin: 0 0 var(--space-4); }
.sgm-quiz__options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }
.sgm-quiz__option {
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-align: left;
  background: var(--bg-warm); border: 1px solid var(--line); border-radius: var(--space-2);
  padding: var(--space-3) var(--space-4); cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease);
}
.sgm-quiz__option:hover:not(:disabled) { border-color: var(--orange); }
.sgm-quiz__option:disabled { cursor: default; opacity: .6; }
.sgm-quiz__option--correct { background: rgba(76, 175, 80, 0.16); border-color: #4caf50; opacity: 1; }
.sgm-quiz__option--wrong { background: rgba(220, 53, 69, 0.16); border-color: #dc3545; opacity: 1; }
.sgm-quiz__result { margin-top: var(--space-4); font-size: 14px; color: var(--ink-soft); }
.sgm-quiz__result a { color: var(--orange); text-decoration: none; font-weight: 600; }
.sgm-quiz__result a:hover { color: var(--gold); }
.sgm-quiz__result--correct { color: #4caf50; }
.sgm-quiz__result--wrong { color: #e17a86; }

.sgm-battle__prompt { font-size: 14px; color: var(--ink-soft); margin: 0 0 var(--space-4); }
.sgm-battle__sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-3); }
.sgm-battle__side {
  font-family: inherit; text-align: left; background: var(--bg-warm); border: 1px solid var(--line);
  border-radius: var(--space-2); padding: var(--space-3) var(--space-4); cursor: pointer;
  display: flex; flex-direction: column; gap: var(--space-2); transition: border-color .16s var(--ease);
}
.sgm-battle__side:hover:not(:disabled) { border-color: var(--orange); }
.sgm-battle__side:disabled { cursor: default; }
.sgm-battle__label { font-size: 14px; font-weight: 600; color: var(--ink); }
.sgm-battle__bar { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.sgm-battle__fill { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--gold)); transition: width .3s var(--ease); }
.sgm-battle__pct { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.sgm-battle--voted .sgm-battle__side { cursor: default; }
.sgm-battle__vs { font-size: 12px; font-weight: 800; color: var(--ink-soft); letter-spacing: .04em; }
.sgm-battle__links { margin: var(--space-4) 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.sgm-battle__links a { color: var(--ink-soft); text-decoration: none; }
.sgm-battle__links a:hover { color: var(--orange); }
@media (max-width: 480px) { .sgm-quiz__options { grid-template-columns: 1fr; } .sgm-battle__sides { grid-template-columns: 1fr; } .sgm-battle__vs { text-align: center; } }

/* Song DNA chip row, reused on single.html */