/* ============================================================
   Noisy Lyrics — dark music app
   Design read: consumer music web app, dark-locked theme,
   single accent, restrained motion, mobile-first.
   Fonts self-safe: system stack (no external font dependency).
   ============================================================ */

:root {
  --bg: #0a0b0f;
  --bg-elev: #12141c;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-2: rgba(255, 255, 255, 0.07);
  --stroke: rgba(255, 255, 255, 0.09);
  --stroke-strong: rgba(255, 255, 255, 0.16);
  --text: #f4f6fb;
  --muted: #9aa3bd;
  --faint: #5b6480;
  --accent: #5b8cff;
  --accent-2: #22d3ee;
  --radius: 16px;
  --radius-lg: 24px;
  --pill: 999px;
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.7);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Ambient background (accent-tinted, subtle) ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.aurora span {
  position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.32;
  will-change: transform;
}
.aurora-a { width: 44vw; height: 44vw; background: var(--accent); top: -12vw; left: -8vw; }
.aurora-b { width: 40vw; height: 40vw; background: var(--accent-2); bottom: -14vw; right: -10vw; opacity: 0.22; }
.grain {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Intro splash (once per tab) ---------- */
.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(91,140,255,0.14), transparent 60%),
    radial-gradient(90% 70% at 50% 100%, rgba(34,211,238,0.10), transparent 55%),
    #07080c;
  overflow: hidden;
}
/* Fade + slight zoom the whole overlay out when done. */
.splash.hide { animation: splash-out .6s var(--ease) forwards; }
@keyframes splash-out { to { opacity: 0; transform: scale(1.04); visibility: hidden; } }
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 24px; }
/* Equalizer + wordmark. */
.splash-logo { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.splash-eq { display: flex; align-items: flex-end; gap: 6px; height: 74px; }
.splash-eq span {
  width: 9px; border-radius: 6px; height: 30%;
  background: linear-gradient(var(--accent-2), var(--accent));
  box-shadow: 0 0 18px rgba(91,140,255,0.55);
  animation: splash-eq 1.05s var(--ease) infinite;
}
.splash-eq span:nth-child(1){ animation-delay: 0s;    }
.splash-eq span:nth-child(2){ animation-delay: .15s;  }
.splash-eq span:nth-child(3){ animation-delay: .3s;   }
.splash-eq span:nth-child(4){ animation-delay: .45s;  }
.splash-eq span:nth-child(5){ animation-delay: .6s;   }
@keyframes splash-eq { 0%,100%{ height: 26%; opacity: .7; } 50%{ height: 100%; opacity: 1; } }
.splash-word {
  font-size: clamp(1.8rem, 7vw, 2.9rem); font-weight: 600; letter-spacing: -0.02em; color: var(--muted);
  opacity: 0; animation: splash-word .6s var(--ease) .15s forwards;
}
.splash-word b { color: var(--text); font-weight: 800; }
@keyframes splash-word { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.splash-bar { width: min(220px, 60vw); height: 4px; border-radius: 4px; background: rgba(255,255,255,0.10); overflow: hidden; }
.splash-bar-fill {
  display: block; height: 100%; width: 40%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 12px rgba(91,140,255,0.6);
  animation: splash-load 1.7s var(--ease) forwards;
}
@keyframes splash-load { 0%{ width: 0%; } 60%{ width: 72%; } 100%{ width: 100%; } }
.splash-tag { color: var(--faint); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; opacity: 0; animation: splash-word .6s var(--ease) .35s forwards; }
@media (prefers-reduced-motion: reduce) {
  .splash-eq span, .splash-bar-fill { animation: none !important; }
  .splash-eq span { height: 70%; }
  .splash-bar-fill { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .aurora-a { animation: float-a 22s var(--ease) infinite; }
  .aurora-b { animation: float-b 26s var(--ease) infinite; }
}
@keyframes float-a { 0%,100%{transform:translate(0,0)} 50%{transform:translate(5vw,4vw)} }
@keyframes float-b { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-4vw,-3vw)} }

/* ---------- Shell ---------- */
.shell { width: 100%; max-width: 1160px; margin: 0 auto; padding: 24px 20px 28px; }
.view { animation: fade .5s var(--ease) both; }
[hidden] { display: none !important; }
@keyframes fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Reveal (additive; content visible by default) ---------- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise .7s var(--ease) both; }
  .reveal:nth-child(1){animation-delay:.02s}
  .reveal:nth-child(2){animation-delay:.10s}
  .reveal:nth-child(3){animation-delay:.18s}
  .reveal:nth-child(4){animation-delay:.26s}
  .reveal:nth-child(5){animation-delay:.34s}
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ---------- Buttons ---------- */
.btn-primary {
  border: 0; cursor: pointer; font: inherit; font-weight: 600; color: #0a0b0f;
  background: linear-gradient(120deg, var(--accent-2), var(--accent));
  padding: 0 22px; height: 48px; border-radius: var(--pill); white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s;
  box-shadow: 0 8px 24px -8px rgba(91, 140, 255, 0.7);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  color: var(--muted); background: var(--surface); border: 1px solid var(--stroke);
  padding: 8px 14px 8px 10px; border-radius: var(--pill); transition: all .2s var(--ease);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.btn-ghost svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ghost:hover { color: var(--text); border-color: var(--stroke-strong); transform: translateX(-2px); }

/* ---------- Hero ---------- */
/* Sticky-footer layout: the hero is exactly one viewport tall. `margin-top:auto`
   on BOTH the brand (first child) and the footer (last child) pins the footer to
   the bottom edge while the main content group sits centered above it — so the
   bottom of the page is never empty. Autos collapse to 0 on short screens, so the
   title is never clipped. */
.hero { min-height: calc(100dvh - 52px); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 22px; }
.hero > .brand:first-child { margin-top: auto; }
.hero > .site-footer:last-child { margin-top: auto; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 26px; }
.brand-mark span { width: 4px; border-radius: 3px; background: linear-gradient(var(--accent-2), var(--accent)); height: 40%; }
.brand-mark span:nth-child(1){height:55%} .brand-mark span:nth-child(2){height:100%} .brand-mark span:nth-child(3){height:70%} .brand-mark span:nth-child(4){height:40%}
@media (prefers-reduced-motion: no-preference) {
  .brand-mark span { animation: bounce 1.4s var(--ease) infinite; }
  .brand-mark span:nth-child(2){animation-delay:.15s} .brand-mark span:nth-child(3){animation-delay:.3s} .brand-mark span:nth-child(4){animation-delay:.45s}
}
@keyframes bounce { 0%,100%{transform:scaleY(.6)} 50%{transform:scaleY(1)} }
.brand-name { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--muted); }
.brand-name b { color: var(--text); font-weight: 700; }

.hero-title { font-size: clamp(2rem, 6vw, 3.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; max-width: 16ch; }
.hero-sub { color: var(--muted); font-size: clamp(1rem, 2.4vw, 1.2rem); max-width: 46ch; }

.search {
  width: min(640px, 100%); display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid var(--stroke); border-radius: var(--pill);
  padding: 7px 7px 7px 20px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.search:hover { border-color: var(--stroke-strong); }
.search:focus-within {
  border-color: rgba(91, 140, 255, 0.6);
  box-shadow: 0 0 0 4px rgba(91, 140, 255, 0.14), var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
}
.search-icon { width: 20px; height: 20px; fill: none; stroke: var(--faint); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; transition: stroke .25s var(--ease); }
.search:focus-within .search-icon { stroke: var(--accent-2); }
#search-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: 1.05rem; height: 50px; letter-spacing: -0.01em; }
#search-input::placeholder { color: var(--faint); }

.hints { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; color: var(--faint); font-size: .9rem; }
.chip {
  cursor: pointer; font: inherit; font-size: .88rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--stroke); padding: 7px 14px; border-radius: var(--pill);
  transition: all .2s var(--ease);
}
.chip:hover { border-color: var(--stroke-strong); background: var(--surface-2); transform: translateY(-1px); }

/* ---------- Section bar ---------- */
.bar { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.bar-title { font-size: 1.15rem; font-weight: 600; color: var(--muted); }

/* ---------- Results grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.card {
  cursor: pointer; text-align: left; border: 1px solid var(--stroke); border-radius: var(--radius);
  background: var(--surface); padding: 12px; overflow: hidden; color: inherit; font: inherit;
  transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--stroke-strong); background: var(--surface-2); }
.card .thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: var(--bg-elev); }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.card:hover img { transform: scale(1.05); }
.card .thumb::after {
  content: ""; position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(10, 11, 15, 0.4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 42px no-repeat;
  opacity: 0; transition: opacity .25s var(--ease);
}
.card:hover .thumb::after { opacity: 1; }
.card h3 { font-size: .98rem; font-weight: 600; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card p { color: var(--muted); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Player stage ---------- */
.stage { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 32px; align-items: start; }
.now { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }

.video-frame { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--bg-elev); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.video-frame iframe, #yt-player, #yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fallback { position: absolute; inset: 0; }
.video-fallback img { width: 100%; height: 100%; object-fit: cover; }

.now-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.now-artist { color: var(--accent-2); font-size: 1rem; margin-top: 2px; }
.now-source {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  color: var(--muted); font-size: .78rem; line-height: 1.3; min-width: 0;
}
.now-source svg { width: 13px; height: 13px; flex-shrink: 0; fill: var(--accent-2); opacity: .9; }
.now-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.transport { display: flex; align-items: center; gap: 12px; }
.play-btn { position: relative; width: 50px; height: 50px; flex-shrink: 0; border: 0; cursor: pointer; border-radius: 50%; background: linear-gradient(135deg, var(--accent-2), var(--accent)); transition: transform .15s var(--ease), filter .2s; box-shadow: 0 8px 22px -8px rgba(91, 140, 255, 0.8); }
.play-btn:hover:not(:disabled) { transform: scale(1.06); }
.play-btn:active:not(:disabled) { transform: scale(0.95); }
.play-btn:disabled { opacity: .4; cursor: default; }
.play-btn svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 22px; height: 22px; fill: #0a0b0f; }
.play-btn .ic-pause { display: none; }
.play-btn.playing .ic-play { display: none; }
.play-btn.playing .ic-pause { display: block; }

.seek { flex: 1; height: 6px; border-radius: var(--pill); background: var(--surface-2); cursor: pointer; overflow: hidden; }
.seek-fill { height: 100%; width: 0%; border-radius: var(--pill); background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; flex-shrink: 0; min-width: 84px; text-align: right; }

.sync-tools { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 15px; border: 1px solid var(--stroke); border-radius: var(--radius); background: linear-gradient(180deg, rgba(91,140,255,0.06), var(--surface)); }
.sync-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sync-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text); font-size: .86rem; font-weight: 650; }
.sync-label svg { width: 15px; height: 15px; fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sync-note { color: var(--muted); font-size: .77rem; line-height: 1.4; }
.sync-note b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.nudge { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.nudge button { cursor: pointer; font: inherit; font-size: .8rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--stroke); border-radius: var(--pill); padding: 5px 10px; transition: all .2s var(--ease); }
.nudge button:hover { border-color: var(--stroke-strong); }
#offset-val { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .82rem; min-width: 40px; text-align: center; }

/* ---------- Source picker (multiple video sources) ---------- */
.sources { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--stroke); border-radius: var(--radius); background: var(--surface); }
.sources-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sources-label { color: var(--text); font-size: .9rem; font-weight: 600; }
.sources-hint { color: var(--faint); font-size: .76rem; font-variant-numeric: tabular-nums; }
.sources-list { display: flex; flex-direction: column; gap: 8px; max-height: 216px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--stroke-strong) transparent; }
.sources-list::-webkit-scrollbar { width: 6px; }
.sources-list::-webkit-scrollbar-thumb { background: var(--stroke-strong); border-radius: var(--pill); }

.source {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--stroke);
  border-radius: 12px; padding: 9px 12px; transition: border-color .2s var(--ease), background .2s var(--ease), transform .12s var(--ease);
}
.source:hover { border-color: var(--stroke-strong); background: rgba(255,255,255,0.1); }
.source:active { transform: scale(0.99); }
.source.active { border-color: rgba(91,140,255,0.6); background: rgba(91,140,255,0.12); }
.source-idx {
  display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  background: var(--bg-elev); color: var(--muted); font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.source.active .source-idx { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: #0a0b0f; }
.source-body { flex: 1; min-width: 0; }
.source { align-items: flex-start; }
.source-idx { margin-top: 1px; }
.source-title { font-size: .86rem; font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.source-meta { display: flex; align-items: center; gap: 7px; margin-top: 2px; color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }
.source-match { color: var(--accent-2); }
.source-playing { flex-shrink: 0; }
.source-playing .eq-mini { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.source.active .source-playing .eq-mini { display: flex; }
.eq-mini span { width: 2.5px; border-radius: 2px; background: linear-gradient(var(--accent-2), var(--accent)); height: 40%; }
@media (prefers-reduced-motion: no-preference) {
  .source.active .eq-mini span { animation: eq .9s var(--ease) infinite; }
  .eq-mini span:nth-child(2){animation-delay:.15s} .eq-mini span:nth-child(3){animation-delay:.3s}
}

/* ---------- Lyrics ---------- */
.lyrics-wrap {
  position: relative; height: min(70dvh, 640px); overflow: hidden;
  border-radius: var(--radius-lg);
  -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent);
}
.lyrics-track { height: 100%; overflow-y: auto; scrollbar-width: none; padding: 38% 8px; text-align: left; }
.lyrics-track::-webkit-scrollbar { display: none; }
.lyric-line {
  font-size: clamp(1.25rem, 2.4vw, 1.9rem); font-weight: 700; letter-spacing: -0.02em;
  color: #39415f; padding: 9px 12px; border-radius: 10px; line-height: 1.28;
  transition: color .35s var(--ease), opacity .35s var(--ease), transform .35s var(--ease), background .35s var(--ease);
  transform-origin: left center;
}
.lyric-line.clickable { cursor: pointer; }
.lyric-line.clickable:hover { color: var(--muted); background: var(--surface); }
.lyric-line.past { color: var(--faint); }
.lyric-line.active { color: var(--text); transform: scale(1.03); }
.lyric-line.active.clickable:hover { background: transparent; }
.lyric-line.static { color: var(--muted); font-weight: 600; }
.lyrics-track.plain { padding: 8px 12px; text-align: left; }
.lyrics-empty { color: var(--faint); font-size: 1.05rem; font-weight: 500; padding: 12px; }

/* ---------- Loader ---------- */
.loader { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(10, 11, 15, 0.8); backdrop-filter: blur(8px); }
.eq { display: flex; gap: 6px; align-items: flex-end; height: 40px; }
.eq span { width: 6px; height: 100%; border-radius: 4px; background: linear-gradient(var(--accent-2), var(--accent)); animation: eq 1s var(--ease) infinite; }
.eq span:nth-child(2){animation-delay:.15s} .eq span:nth-child(3){animation-delay:.3s} .eq span:nth-child(4){animation-delay:.45s}
@keyframes eq { 0%,100%{transform:scaleY(.3)} 50%{transform:scaleY(1)} }
.loader p { color: var(--muted); font-size: .92rem; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(140%);
  background: var(--bg-elev); border: 1px solid var(--stroke-strong); color: var(--text);
  padding: 13px 22px; border-radius: 14px; font-size: .92rem; z-index: 60; box-shadow: var(--shadow);
  max-width: min(92vw, 420px); transition: transform .4s var(--ease);
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* ---------- Global top bar (results/player) ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px;
  padding: 12px clamp(16px, 4vw, 28px);
  background: linear-gradient(180deg, rgba(10,11,15,0.92), rgba(10,11,15,0.66));
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--stroke);
  padding-top: max(12px, env(safe-area-inset-top));
}
.brand-mini {
  display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; cursor: pointer;
  font: inherit; font-size: 1.02rem; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; padding: 4px; letter-spacing: -0.01em;
  text-decoration: none;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.brand-mini:hover { color: var(--text); transform: translateX(-1px); }
.brand-mini b { color: var(--text); }
.brand-mark.sm { height: 17px; gap: 2px; }
.brand-mark.sm span { width: 3px; }
.top-search {
  flex: 1; min-width: 0; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--stroke); border-radius: var(--pill);
  padding: 5px 6px 5px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.top-search:hover { border-color: var(--stroke-strong); background: rgba(255,255,255,0.07); }
.top-search:focus-within {
  border-color: rgba(91,140,255,0.6);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 4px rgba(91,140,255,0.14), inset 0 1px 0 rgba(255,255,255,0.05);
}
.top-search .search-icon { flex-shrink: 0; transition: stroke .25s var(--ease); }
.top-search:focus-within .search-icon { stroke: var(--accent-2); }
#top-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: .98rem; height: 42px; }
#top-input::placeholder { color: var(--faint); }
.btn-primary.sm { height: 42px; padding: 0 20px; font-size: .92rem; box-shadow: 0 6px 18px -8px rgba(91,140,255,0.7); }

/* ---------- Developers (hero) ---------- */
.devs { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(640px, 100%); }
.devs-label { color: var(--faint); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; }
.dev-cards { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; width: 100%; }
.dev {
  position: relative; display: flex; align-items: center; gap: 14px; text-decoration: none; color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025));
  border: 1px solid var(--stroke); border-radius: 18px;
  padding: 12px 18px 12px 12px;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease), box-shadow .25s var(--ease);
  min-width: 0; flex: 1 1 260px; max-width: 320px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}
.dev:hover {
  border-color: rgba(91,140,255,0.45); background: linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(91,140,255,0.12);
}
.dev-ava {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; object-fit: cover;
  background: var(--bg-elev);
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px rgba(91,140,255,0.55), 0 4px 12px -4px rgba(0,0,0,0.6);
}
.dev-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; text-align: left; }
.dev-name { font-size: 1rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.dev-name em { font-style: normal; color: var(--faint); font-weight: 500; font-size: .82rem; }
.dev-links { display: flex; flex-wrap: wrap; gap: 6px; }
.dev-link {
  display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: .76rem; font-weight: 500;
  background: rgba(255,255,255,0.05); border: 1px solid var(--stroke);
  padding: 3px 9px 3px 7px; border-radius: var(--pill);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.dev:hover .dev-link { border-color: var(--stroke-strong); }
.dev-link { text-decoration: none; cursor: pointer; }
.dev-link:hover { color: var(--text); border-color: rgba(91,140,255,0.5); background: rgba(91,140,255,0.12); }
.dev-link:active { transform: scale(0.96); }
.dev-link svg { width: 13px; height: 13px; fill: currentColor; flex-shrink: 0; opacity: .85; }

/* ---------- Site footer (legal links on hero) ---------- */
.site-footer {
  margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding-top: 22px; width: 100%;
  border-top: 1px solid var(--stroke);
}
.footer-links { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.footer-links a, .footer-link {
  color: var(--muted); text-decoration: none; font-size: .86rem; font-weight: 500;
  transition: color .2s var(--ease);
}
.footer-link { background: transparent; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.footer-links a:hover, .footer-link:hover { color: var(--text); }
.footer-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); }
.footer-copy { color: var(--faint); font-size: .78rem; text-align: center; }

/* When the mini player floats over the hero, shrink the hero by the mini bar's
   height so the sticky footer lands just above it (never hidden behind it). The
   shell needs no extra bottom padding — the sticky-footer layout already pins
   the footer to the bottom of the (now shorter) hero, so there's no empty gap. */
body.has-mini .hero { min-height: calc(100dvh - 52px - 132px); }
/* Keep the footer above the floating mini player so its links stay clickable. */
body.has-mini .site-footer { position: relative; z-index: 46; }

/* ---------- Legal pages (privacy / terms) ---------- */
.shell.legal { max-width: 820px; padding-top: 28px; padding-bottom: 80px; }
.shell.legal .back { align-self: flex-start; margin-bottom: 22px; }
.legal-doc {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid var(--stroke); border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.legal-title { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.legal-updated { color: var(--faint); font-size: .82rem; margin-top: 6px; margin-bottom: 22px; }
.legal-doc h2 { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-top: 26px; margin-bottom: 8px; letter-spacing: -0.01em; }
.legal-doc p { color: var(--muted); font-size: .96rem; line-height: 1.7; margin-bottom: 10px; }
.legal-doc strong { color: var(--text); font-weight: 600; }
.legal-doc ul { color: var(--muted); font-size: .96rem; line-height: 1.7; padding-left: 22px; margin-bottom: 10px; }
.legal-doc li { margin-bottom: 6px; }
.legal-doc li::marker { color: var(--accent-2); }
.legal-nav {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--stroke);
}
.legal-nav a { color: var(--accent); text-decoration: none; font-size: .9rem; font-weight: 500; transition: color .2s var(--ease); }
.legal-nav a:hover { color: var(--accent-2); }
.legal-nav span { color: var(--faint); }

/* ---------- Legal modal (in-page privacy/terms overlay) ---------- */
.legal-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.legal-modal-backdrop { position: absolute; inset: 0; background: rgba(5,6,10,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s var(--ease) both; }
.legal-modal-panel {
  position: relative; width: min(720px, 100%); max-height: min(82dvh, 760px); overflow-y: auto;
  background: linear-gradient(180deg, #14161f, #0e1017);
  border: 1px solid var(--stroke-strong); border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 40px); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.9);
  animation: rise .32s var(--ease) both; -webkit-overflow-scrolling: touch;
}
.legal-modal-x {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--stroke); color: var(--muted); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.legal-modal-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.legal-modal-x:hover { color: #ff8080; border-color: rgba(255,128,128,0.4); background: rgba(255,128,128,0.1); }
.legal-modal-x:active { transform: scale(0.92); }
/* The doc content reuses .legal-doc typography but drops its own card chrome. */
.legal-modal-body .legal-doc { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
.legal-modal-body .legal-nav { display: none; }
body.legal-open { overflow: hidden; }

/* ---------- Persistent YouTube host + mini player ---------- */
/* The dock is ALWAYS a fixed child of <body> and never reparented (moving an
   iframe reloads it and kills playback). On the player view, JS sets its
   top/left/width/height inline to overlay the #video-frame; otherwise .parked
   pushes it off-screen while it keeps playing. */
.yt-dock { position: fixed; z-index: 30; border-radius: var(--radius); overflow: hidden; }
.yt-dock.parked { top: 0 !important; left: -9999px !important; width: 320px !important; height: 180px !important; z-index: -5; pointer-events: none; }
#yt-player, #yt-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.mini {
  position: fixed; z-index: 45; right: 22px; left: auto;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  width: min(420px, calc(100vw - 44px));
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(145deg, rgba(30, 34, 48, 0.82), rgba(14, 16, 23, 0.86));
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 22px;
  padding: 10px 12px 15px;
  box-shadow: 0 26px 64px -22px rgba(0, 0, 0, 0.92), 0 3px 10px -4px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.1);
  animation: mini-rise .4s var(--ease) both;
}
@keyframes mini-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* Accent glow hugging the top edge — gives the bar a premium, lit-from-within feel. */
.mini::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(91,140,255,0.16), transparent 42%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.mini.playing::before { opacity: 1; }
.mini-open {
  flex: 1; display: flex; align-items: center; gap: 13px; cursor: pointer;
  background: transparent; border: 0; font: inherit; color: inherit; padding: 0; min-width: 0;
  border-radius: 12px;
}
.mini-thumb {
  position: relative; width: 50px; height: 50px; flex-shrink: 0; border-radius: 13px;
  background: var(--bg-elev) center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14), 0 6px 16px -6px rgba(0,0,0,0.7);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mini-open:hover .mini-thumb { transform: scale(1.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 8px 20px -6px rgba(0,0,0,0.75); }
/* Little equalizer badge overlaid on the artwork; only animates while playing. */
.mini-eq {
  position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; gap: 2.5px;
  padding-bottom: 9px; border-radius: inherit;
  background: linear-gradient(transparent 40%, rgba(0,0,0,0.62)); opacity: 0;
  transition: opacity .25s var(--ease);
}
.mini-eq span { width: 3px; height: 30%; border-radius: 2px; background: var(--accent-2); box-shadow: 0 0 6px rgba(34,211,238,0.6); }
.mini.playing .mini-eq { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .mini.playing .mini-eq span { animation: eq .9s var(--ease) infinite; }
  .mini.playing .mini-eq span:nth-child(2){animation-delay:.15s} .mini.playing .mini-eq span:nth-child(3){animation-delay:.3s}
}
.mini-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; text-align: left; }
.mini-title { font-size: .96rem; font-weight: 650; color: var(--text); letter-spacing: -0.01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-artist { font-size: .78rem; color: var(--accent-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-bar { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; }
.mini-fill { display: block; height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); box-shadow: 0 0 8px rgba(91,140,255,0.5); }
.play-btn.sm { width: 46px; height: 46px; flex-shrink: 0; box-shadow: 0 8px 18px -6px rgba(91,140,255,0.85); }
.play-btn.sm svg { width: 18px; height: 18px; }
.mini-close {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--stroke); color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.mini-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.mini-close:hover { color: #ff8080; border-color: rgba(255,128,128,0.4); background: rgba(255,128,128,0.1); }
.mini-close:active { transform: scale(0.92); }

/* Hide (collapse) button — folds the bar down into the spinning disc. */
.mini-hide {
  width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--stroke); color: var(--muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), transform .15s var(--ease);
}
.mini-hide svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mini-hide:hover { color: var(--text); border-color: var(--stroke-strong); background: var(--surface); }
.mini-hide:active { transform: scale(0.92); }

/* ---------- Collapsed disc (mini player hidden) ---------- */
/* A spinning vinyl record parked in the corner; tap to expand the bar again. */
.mini-disc {
  position: fixed; z-index: 45; right: 22px; left: auto;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  width: 62px; height: 62px; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 15%, rgba(255,255,255,0.05) 15% 16%, transparent 16% 100%),
    repeating-radial-gradient(circle at 50% 50%, #14161f 0 2px, #0d0f16 2px 4px);
  box-shadow: 0 18px 40px -14px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.1);
  display: grid; place-items: center; overflow: hidden;
  animation: mini-rise .4s var(--ease) both;
}
.mini-disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  background: linear-gradient(145deg, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
}
/* Album art as the record's label; spins while a song plays. */
.mini-disc-art {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg-elev) center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.mini-disc.playing .mini-disc-art { animation: spin 4.5s linear infinite; }
.mini-disc-hole {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: #05060a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
}
.mini-disc:hover { transform: scale(1.06); }
.mini-disc:active { transform: scale(0.94); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Responsive ---------- */
/* Tablet / small laptop: single-column player. On phones the lyrics should sit
   right under the video (so you sing along without scrolling past the source
   list), with the sync tools + source picker moved BELOW the lyrics. We flatten
   .now with display:contents so its children join the stage flow, then use
   `order` to place: video → meta → transport → lyrics → sync → sources. */
@media (max-width: 860px) {
  .stage { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .now { display: contents; }
  .video-frame { order: 1; width: 100%; }
  .now-meta   { order: 2; }
  .transport  { order: 3; }
  .lyrics-wrap { order: 4; height: 56dvh; }
  .sync-tools { order: 5; }
  .sources    { order: 6; }
  .lyrics-track { padding: 30% 4px; text-align: center; }
}

/* Large phones / small tablets. */
@media (max-width: 640px) {
  .shell { padding: 18px 16px 22px; }
  .hero { min-height: calc(100dvh - 40px); gap: 18px; }
  .devs { margin-top: 6px; }
  .dev-cards { flex-direction: column; align-items: stretch; }
  .dev { width: 100%; max-width: none; flex-basis: auto; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .lyrics-wrap { height: 52dvh; }
  .top-search .btn-primary.sm { padding: 0 16px; }
  body.has-mini .hero { min-height: calc(100dvh - 40px - 120px); }
  .shell.legal { padding-top: 20px; }
  /* On phones the mini bar spans the width (centered) instead of hugging the corner. */
  .mini { right: 12px; left: 12px; width: auto; }
}

/* Phones. */
@media (max-width: 520px) {
  .shell { padding: 16px 14px 20px; }
  .search { padding-left: 14px; gap: 6px; }
  .btn-primary { padding: 0 16px; height: 44px; }
  #search-input { height: 44px; font-size: 1rem; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .card { padding: 8px; border-radius: 14px; }
  .card h3 { font-size: .9rem; }
  .card p { font-size: .78rem; }
  .now-title { font-size: 1.25rem; }
  .bar { margin-bottom: 18px; gap: 12px; }
  .bar-title { font-size: 1.02rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Compact back button on results/player: chevron only, no wrapping label. */
  .results .bar .back, .player .bar .back { padding: 8px 12px; }
  .results .bar .back svg, .player .bar .back svg { margin: 0; }
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .brand-mini span:not(.brand-mark) { display: none; } /* keep only the mark on tight widths */
  .top-search { padding-left: 12px; }
  .sync-tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .sync-tools .nudge { justify-content: space-between; }
  .nudge button { flex: 1; }
  .transport { gap: 10px; }
  .time { min-width: 74px; font-size: .78rem; }
  .mini { gap: 8px; padding: 8px 8px 12px; border-radius: 18px; }
  .mini-thumb { width: 44px; height: 44px; }
}

/* Small phones (iPhone SE / 360px Androids). */
@media (max-width: 380px) {
  .shell { padding: 14px 12px 18px; }
  .grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-title { font-size: 1.7rem; }
  .hero-sub { font-size: .95rem; }
  .chip { font-size: .82rem; padding: 6px 12px; }
  .hints { font-size: .82rem; }
  .dev-ava { width: 48px; height: 48px; }
  .mini { gap: 7px; }
  .mini-thumb { width: 42px; height: 42px; border-radius: 11px; }
  .mini-title { font-size: .84rem; }
  .mini-artist { font-size: .74rem; }
  .play-btn.sm { width: 42px; height: 42px; }
  .mini-close, .mini-hide { width: 34px; height: 34px; }
  .btn-primary.sm { padding: 0 14px; font-size: .86rem; }
  .now-title { font-size: 1.15rem; }
  .legal-doc { padding: 20px 16px; }
}

/* Very narrow (≤320px, old/small Androids): stack search vertically so the
   button never overflows the viewport. */
@media (max-width: 320px) {
  .search { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; border-radius: var(--radius); }
  .search .search-icon { display: none; }
  #search-input { height: 42px; }
  .search .btn-primary { width: 100%; }
  .grid { grid-template-columns: 1fr; }
  .top-search .btn-primary.sm { padding: 0 12px; }
}

/* Landscape phones: keep the lyrics usable when height is scarce. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 40px 0; }
  .hero > .brand:first-child, .hero > .site-footer:last-child { margin-top: 0; }
  .lyrics-wrap { height: 70dvh; }
  .devs { display: none; } /* free vertical space in cramped landscape */
}

/* Coarse pointers (touch): larger hit targets, no hover-only reveals. */
@media (hover: none) {
  .card .thumb::after { display: none; }
  .source { padding: 12px; }
  .nudge button { padding: 8px 14px; }
  .card:active { transform: scale(0.98); }
  .dev:active { transform: scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span, .brand-mark span, .eq span { animation: none !important; }
  .reveal, .view, .card, .mini { animation: none !important; opacity: 1 !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}