:root {
  --bg: #0b0d17;
  --panel: #151a2c;
  --panel-2: #1c2238;
  --line: #262d48;
  --text: #f3f5ff;
  --muted: #9aa3c7;
  --accent: #ff4d6d;
  --accent-2: #ffb84d;
  --ok: #3ddc97;
  --radius: 18px;
  --glow: #1d2350;
}
html[data-season="halloween"] {
  --bg: #0d0a12; --panel: #1a1222; --panel-2: #24182f; --line: #3a2747;
  --muted: #b3a3c4; --accent: #ff7a1a; --accent-2: #b86bff; --glow: #3b1a4f;
}
html[data-season="christmas"] {
  --bg: #08110e; --panel: #111d19; --panel-2: #172822; --line: #24392f;
  --muted: #a6bdb2; --accent: #e63946; --accent-2: #f4c95d; --glow: #12402f;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: radial-gradient(1200px 600px at 50% -200px, var(--glow) 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 24px 16px calc(96px + env(safe-area-inset-bottom)); }

.top { text-align: center; margin-bottom: 20px; }
.top h1 { margin: 0; font-size: 1.6rem; letter-spacing: .02em; line-height: 0; }
.top .logo { display: block; width: 160px; height: 160px; margin: 0 auto; mix-blend-mode: screen; } /* black logo background blends into the page */
.sub { margin: 6px 0 0; color: var(--muted); }

.label { margin: 0 0 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }

.now {
  display: flex; gap: 16px; align-items: center;
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: 0 10px 40px rgba(0,0,0,.35);
}
.art {
  flex: 0 0 88px; height: 88px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)) center / cover no-repeat;
}
.art.playing { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 28px rgba(255,77,109,.55); } }
.now-body { flex: 1; min-width: 0; }
.now h2 { margin: 0; font-size: 1.3rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.artist { margin: 2px 0 0; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.artist:empty { display: none; }

.progress { margin-top: 12px; }
.bar { height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 1s linear; }
.times { display: flex; justify-content: space-between; margin-top: 6px; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.next { margin-top: 16px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.next ol { margin: 0; padding-left: 20px; }
.next li { padding: 2px 0; }
.next li small { color: var(--muted); }

.songs { margin-top: 24px; }
.songs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.songs-head h3 { margin: 0; font-size: 1.05rem; }
#search {
  flex: 0 1 180px; min-width: 0; padding: 8px 12px; border-radius: 99px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); font: inherit;
}

.list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.song {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.song:hover:not(:disabled) { background: var(--panel-2); border-color: #3a4370; }
.song:active:not(:disabled) { transform: scale(.98); }
.song:disabled { opacity: .45; cursor: not-allowed; }
.song .thumb { flex: 0 0 44px; height: 44px; border-radius: 10px; background: var(--line) center / cover no-repeat; }
.song .meta { flex: 1; min-width: 0; }
.song .t { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song .a { display: block; font-size: .85rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song .act { flex: 0 0 auto; font-size: .8rem; font-weight: 600; padding: 6px 12px; border-radius: 99px; background: var(--accent); color: #fff; }
.song:disabled .act { background: var(--line); color: var(--muted); }
.song .votes { flex: 0 0 auto; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--accent-2); font-weight: 700; }
.song .votes:empty { display: none; }

.empty { color: var(--muted); text-align: center; padding: 24px 0; }
.foot { margin-top: 24px; text-align: center; font-size: .8rem; color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 99px;
  background: var(--text); color: var(--bg); font-weight: 600; box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.toast.ok { background: var(--ok); }

@media (prefers-reduced-motion: reduce) {
  .art.playing { animation: none; }
  .bar span, .song { transition: none; }
}