:root {
  --glass: rgba(40, 22, 14, 0.42);
  --line: rgba(255, 240, 220, 0.18);
  --text: #fff8ef;
  --muted: rgba(255, 244, 230, 0.7);
  --accent: #ff5a3c;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

/* hide the page scrollbar (scrolling with wheel / touch / keys still works) */
html, body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

body {
  background: #1a0d08;
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

/* first screen: background + title + player; content scrolls up over it */
.stage { position: relative; height: 100vh; height: 100svh; }

button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }

/* ---------- background ---------- */
.bg {
  position: fixed; inset: -2%;
  background: url("assets/bg.webp") 62% center / cover no-repeat;
  z-index: -3;
  animation: drift 40s ease-in-out infinite alternate;
  animation-play-state: paused;
}
body.playing .bg { animation-play-state: running; }
@keyframes drift { to { transform: scale(1.06) translate(-1%, -1%); } }

.shade {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 18%, transparent 65%, rgba(0,0,0,.45) 100%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.45) 100%);
}

/* ---------- top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 32px;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  z-index: 5;
  transition: opacity .3s;
}
body.scrolled .topbar { opacity: 0; pointer-events: none; }
.status { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.status .sep { width: 1px; height: 16px; background: rgba(255,255,255,.4); }
.live { color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: #2ee66b; box-shadow: 0 0 8px #2ee66b; }

.icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: #2a160c;
  transition: transform .15s;
}
.icon-btn:hover { transform: scale(1.08); }

/* ---------- hero ---------- */
.hero {
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-110%);
  text-align: center; pointer-events: none;
}
.title {
  font-family: Mukta, sans-serif;
  font-weight: 800;
  font-size: clamp(48px, 5.4vw, 84px);
  line-height: 1.1;
  text-shadow: 0 4px 24px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
  opacity: .75; /* a little see-through so the video shows behind it */
  transition: opacity .6s ease;
}
/* fade it further while a music video is playing in the background */
body.playing.video-mode.has-played .title { opacity: .2; }

/* ---------- player ---------- */
.player {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%);
  width: min(740px, calc(100% - 32px));
  display: flex; gap: 22px; align-items: center;
  padding: 14px 30px 14px 16px;
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: 999px;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  box-shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.art {
  width: 104px; height: 104px; flex: none;
  border-radius: 50%;
  /* song's YouTube thumbnail (set in app.js); 134% height crops off its black letterbox bars */
  background: #2a160c center / auto 134% no-repeat;
  transition: background-image .3s;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  animation: spin 18s linear infinite; animation-play-state: paused;
}
body.playing .art { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }

.meta { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 16px; }
.text { flex: 1; min-width: 0; }
.track-title { font-size: 21px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.track-artist { color: var(--muted); font-size: 15px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.controls { display: flex; align-items: center; gap: 10px; flex: none; }
.ctrl {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.14);
  transition: transform .15s, background .2s, color .2s;
}
.ctrl:hover { background: rgba(255,255,255,.26); }
.ctrl:active { transform: scale(.9); }
.ctrl.play {
  width: 54px; height: 54px;
  background: rgba(0,0,0,.25);
  border: 2.5px solid var(--text);
}
.ctrl.play:hover { background: rgba(0,0,0,.4); }
.divider { width: 1px; height: 26px; background: var(--line); margin: 0 10px; }
#likeBtn[aria-pressed="true"] { color: var(--accent); }
#likeBtn[aria-pressed="true"] path { fill: currentColor; }

.progress-row {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.bar { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.22); cursor: pointer; position: relative; }
.bar::before { content: ""; position: absolute; inset: -8px 0; } /* bigger hit area */
#fill { height: 100%; width: 0; border-radius: 2px; background: var(--text); }

/* ---------- content below the fold ---------- */
.content {
  position: relative;
  padding: 160px max(24px, calc((100% - 1100px) / 2)) 120px;
  background: linear-gradient(180deg, rgba(14, 9, 8, 0) 0, rgba(14, 9, 8, .92) 140px, #0c0a0b 360px);
}
.eyebrow {
  color: #f0a35a; font-size: 14px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.headline, .section-title {
  font-family: "Baloo 2", Inter, sans-serif; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.05;
}
.headline { font-size: clamp(38px, 5vw, 64px); margin-top: 14px; max-width: 780px; }
.lede { margin-top: 26px; max-width: 720px; font-size: 19px; line-height: 1.75; color: rgba(255, 244, 230, .78); }
.section-title { font-size: clamp(30px, 3.4vw, 44px); margin-top: 120px; }

.cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 56px;
}
.section-title + .cards { margin-top: 32px; }
.card {
  padding: 28px; border-radius: 18px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: rgba(240, 163, 90, .45); transform: translateY(-2px); }
.card h3 { font-family: "Baloo 2", Inter, sans-serif; font-size: 20px; font-weight: 600; }
.card p { margin-top: 10px; color: rgba(255, 244, 230, .66); line-height: 1.65; font-size: 16px; }

.yt-link {
  display: inline-block; margin-top: 44px;
  color: #f0a35a; font-weight: 600; font-size: 17px;
  text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
.yt-link:hover { color: #ffc27f; }

/* ---------- playlist drawer ---------- */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 100%);
  background: rgba(26, 13, 8, .9);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .3s ease;
  display: flex; flex-direction: column; z-index: 10;
}
.drawer.open { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); }
.drawer h2 { font-family: Mukta, sans-serif; font-size: 24px; }
.drawer-actions { display: flex; gap: 8px; align-items: center; }
.chip { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.drawer-body { flex: 1; overflow-y: auto; padding-bottom: 24px; }
.list-title, .queue-head h3 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.list-title { padding: 16px 16px 4px; }
#list, #queueList { list-style: none; padding: 8px; }
#list li, #queueList li { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 12px; cursor: pointer; }
#list li:hover, #queueList li:hover { background: rgba(255,255,255,.06); }
#list li.active { background: rgba(255, 90, 60, .16); }
#list img, #queueList img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex: none; }
.info { min-width: 0; }
.info .t, .info .a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info .t { font-weight: 600; font-size: 14px; }
.info .a { color: var(--muted); font-size: 13px; }
#list li.active .t { color: var(--accent); }
.row-end { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.heart { color: var(--muted); font-size: 13px; font-weight: 600; }
.heart.mine { color: var(--accent); }

/* add-to-queue / remove buttons on each row */
.q-btn {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line);
  transition: background .2s, color .2s, border-color .2s;
}
.q-btn:hover { color: var(--text); border-color: var(--text); }
.q-btn.queued { background: var(--accent); border-color: var(--accent); color: #fff; }

.queue { margin: 12px 8px 4px; padding-top: 8px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.queue-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 12px 0 16px; }
.queue .chip { padding: 4px 12px; font-size: 12px; }
#queueList { counter-reset: q; }
#queueList li { gap: 10px; padding-left: 4px; user-select: none; }
#queueList li::before { counter-increment: q; content: counter(q); order: 1; width: 14px; flex: none; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); }
#queueList li > * { order: 2; }
#queueList li > .grip { order: 0; }
.grip {
  width: 26px; height: 40px; flex: none; display: grid; place-items: center;
  color: var(--muted); border-radius: 8px; cursor: grab; touch-action: none;
}
.grip:hover, .grip:focus-visible { color: var(--text); background: rgba(255,255,255,.08); }
.grip:active { cursor: grabbing; }
/* while reordering: other rows glide out of the way, the held row follows the pointer */
.reordering #queueList li { transition: transform .18s ease; }
.reordering, .reordering * { cursor: grabbing !important; }
#queueList li.dragging {
  position: relative; z-index: 2;
  transition: none !important;
  background: #3a1d14; outline: 1px solid var(--accent);
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  scale: 1.02;
}
#queueList img { width: 40px; height: 40px; }

/* little "Added to queue" message */
.toast {
  position: fixed; left: 50%; top: 24px; translate: -50% -20px; z-index: 40;
  max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 999px;
  background: rgba(20, 10, 6, .9); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; pointer-events: none; transition: opacity .25s ease, translate .25s ease;
}
.toast.show { opacity: 1; translate: -50% 0; }

/* ---------- music video as background ---------- */
.video-layer {
  /* off: tiny + invisible, but the player inside keeps playing audio */
  position: fixed; left: -10px; bottom: -10px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none; z-index: -2;
}
/* In video mode the player is full-screen size from the very start (still invisible until something
   plays). YouTube picks quality from the player's size, so this makes it go straight to HD (1080p on
   a full-HD screen) instead of starting tiny and slowly stepping up. */
body.video-mode .video-layer { inset: 0; width: auto; height: auto; }
body.video-mode.has-played .video-layer {
  opacity: 1;
  background: #000;
  animation: fadeIn .5s ease;
}
@keyframes fadeIn { from { opacity: 0; } }
/* "cover" a 16:9 iframe over any screen shape; never clickable, so YouTube's UI stays out of the way */
body.video-mode .video-layer :is(iframe, video) {
  /* scale 1.35 crops the black cinema bars many music videos have baked in */
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.35);
  width: max(100vw, 177.78vh); height: max(56.25vw, 100vh);
  pointer-events: none;
}
/* the local loop clip has no black bars, so skip the 1.35 zoom — less stretching, sharper picture */
body.video-mode .video-layer #ytBg { transform: translate(-50%, -50%); object-fit: cover; }
/* …except a little while Trippy drifts/tilts it, so no edge ever shows */
body.video-mode[data-fx="trippy"] .video-layer #ytBg { transform: translate(-50%, -50%) scale(1.15); }
body.video-mode.has-played .bg { visibility: hidden; }
/* songs without a video: show the muted loop visuals instead of the (audio-only) song player */
body.loop-bg .video-layer #yt, body:not(.loop-bg) .video-layer #ytBg { visibility: hidden; }
body.video-mode.has-played .shade {
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.6) 100%);
}
#videoBtn[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* ---------- YouTube ads ----------
   While an ad plays, the real YouTube player is shown in a box in the middle of the screen, unstyled
   and clickable, so the visitor can press YouTube's own "Skip Ad" button. #ids beat the video-mode rules. */
.ad-note { display: none; margin-top: 10px; font-size: 13px; color: var(--muted); }
.ad-note b { color: var(--text); }
body.ad-playing .ad-note { display: block; }
body.ad-playing .progress-row { display: none; }
body.ad-playing #videoLayer {
  inset: auto; left: 50%; top: 42%; translate: -50% -50%;
  width: min(720px, calc(100vw - 32px)); height: auto; aspect-ratio: 16 / 9;
  opacity: 1; overflow: hidden; z-index: 25; pointer-events: auto;
  border-radius: 16px; border: 1px solid var(--line); background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: fadeIn .3s ease;
}
body.ad-playing #videoLayer #yt {
  visibility: visible; position: absolute; inset: 0; width: 100%; height: 100%;
  transform: none; translate: none; rotate: none; scale: none;
  filter: none; animation: none; pointer-events: auto;
}
@media (max-width: 760px) {
  /* above the stacked player card, and small enough to stay clear of it */
  body.ad-playing #videoLayer {
    top: 64px; translate: -50% 0;
    width: min(calc(100vw - 32px), max(280px, calc((100svh - 420px) * 16 / 9)));
  }
}
body.ad-playing #videoLayer #ytBg, body.ad-playing #videoLayer .fx { display: none; }
body.ad-playing .bg { visibility: visible !important; }
body.ad-playing .shade { background: rgba(0,0,0,.6); }

/* ---------- video effects (body[data-fx]) ---------- */
.video-layer :is(iframe, video) { transition: filter .6s ease; }
.fx, .fx i { position: absolute; inset: 0; pointer-events: none; }
.fx i { opacity: 0; transition: opacity .6s ease; }

.fx-tint { mix-blend-mode: soft-light; }
.fx-lines {
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
.fx-grain {
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  animation: grain .5s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-6%, 4%); }
  50% { transform: translate(5%, -7%); }
  75% { transform: translate(-3%, 6%); }
}
.fx-band { /* VHS tracking line rolling down the screen */
  top: -20%; bottom: auto; height: 14%;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.08) 45%, rgba(255,255,255,.14) 50%, rgba(255,255,255,.08) 55%, transparent);
  animation: band 7s linear infinite;
}
@keyframes band { to { transform: translateY(900%); } }

/* Film: warm, slightly faded, grainy — matches the poster art */
body[data-fx="film"] .video-layer :is(iframe, video) { filter: sepia(.35) saturate(1.25) contrast(1.08) brightness(.95); }
body[data-fx="film"] .fx-tint { opacity: .55; background: linear-gradient(160deg, #ff9a4a, #7a1f1f); }
body[data-fx="film"] .fx-grain { opacity: .22; }

/* VHS: punchy colour, scanlines, rolling band, flicker */
body[data-fx="vhs"] .video-layer :is(iframe, video) { filter: saturate(1.6) contrast(1.2) hue-rotate(-10deg); animation: flick 3s infinite; }
body[data-fx="vhs"] .fx-lines { opacity: 1; }
body[data-fx="vhs"] .fx-band { opacity: 1; }
body[data-fx="vhs"] .fx-grain { opacity: .12; }
@keyframes flick { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .85; } 98% { opacity: .95; } }

/* Noir: black & white, hard contrast, heavy grain */
body[data-fx="noir"] .video-layer :is(iframe, video) { filter: grayscale(1) contrast(1.35) brightness(.9); }
body[data-fx="noir"] .fx-grain { opacity: .3; }

/* Neon: hot pink / cyan grade */
body[data-fx="neon"] .video-layer :is(iframe, video) { filter: saturate(1.8) contrast(1.15) brightness(1.05); }
body[data-fx="neon"] .fx-tint { opacity: .7; background: linear-gradient(120deg, #ff2d95, #2a1aff 55%, #00e5ff); }
body[data-fx="neon"] .fx-lines { opacity: .35; }

/* Trippy: colours cycle through the rainbow, the picture slowly sways and breathes,
   and a spinning rainbow wash melts over everything */
/* the video slowly floats around the screen (drift), tilts, and gently breathes in and out.
   `translate`/`rotate`/`scale` stack on top of the iframe's own centring transform. */
body[data-fx="trippy"] .video-layer :is(iframe, video) {
  animation:
    trip-hue 8s linear infinite,
    trip-drift 22s ease-in-out infinite,
    trip-pulse 1.9s ease-in-out infinite alternate;
}
body[data-fx="trippy"]:not(.playing) .video-layer :is(iframe, video) { animation-play-state: running, paused, paused; }
@keyframes trip-drift {
  0%, 100% { translate: 0 0;        rotate: -3deg; }
  25%      { translate: 3vw -2vh;   rotate: 2deg; }
  50%      { translate: -2vw 3vh;   rotate: 3deg; }
  75%      { translate: -3vw -2.5vh; rotate: -2deg; }
}
@keyframes trip-pulse { to { scale: 1.04; } }
@keyframes trip-hue {
  from { filter: saturate(2.2) contrast(1.15) hue-rotate(0deg); }
  to   { filter: saturate(2.2) contrast(1.15) hue-rotate(360deg); }
}
body[data-fx="trippy"] .fx-tint {
  inset: -50%; opacity: .45; mix-blend-mode: overlay;
  background: conic-gradient(from 0deg, #ff0080, #ff8c00, #ffe600, #00ff85, #00c3ff, #8a2bff, #ff0080);
  animation: trip-spin 14s linear infinite;
}
@keyframes trip-spin { to { rotate: 360deg; } }
body[data-fx="trippy"] .fx-grain { opacity: .1; }

.top-actions { display: flex; align-items: center; gap: 10px; }
.fx-chip {
  display: none; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 13px; font-weight: 600; text-shadow: none;
}
.fx-chip:hover { border-color: var(--accent); }
body.video-mode.has-played .fx-chip { display: inline-flex; }
#videoBtn[hidden] { display: none; }

/* "Press F11" line sitting just above the player */
.f11-hint {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -12px);
  white-space: nowrap; pointer-events: none;
  font-family: Mukta, Inter, sans-serif; font-weight: 800; font-size: 19px;
  color: var(--text); text-shadow: 0 2px 10px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.6);
  transition: opacity .4s ease;
}
.f11-hint kbd {
  font: inherit; padding: 0 8px; margin: 0 2px; border-radius: 6px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3);
}
/* not needed when the browser is already full screen, or on phones (no F11 key) */
body.is-fullscreen .f11-hint { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
@media (max-width: 760px), (hover: none) { .f11-hint { display: none; } }

/* ---------- full screen: only the background / video stays ---------- */
/* title flies up, player drops down; `translate` stacks on top of their existing transforms */
.topbar, .hero, .player, .content {
  transition: translate .8s cubic-bezier(.7, 0, .25, 1), opacity .5s ease;
}
body.focus-mode { overflow: hidden; cursor: pointer; }
body.focus-mode.idle { cursor: none; }
body.focus-mode .topbar, body.focus-mode .hero, body.focus-mode .player, body.focus-mode .content {
  pointer-events: none;
}
body.focus-mode .hero { translate: 0 -100vh; opacity: 0; transition-delay: 0s, .3s; }
body.focus-mode .topbar { translate: 0 -150%; opacity: 0; transition-delay: .05s, .3s; }
body.focus-mode .player { translate: 0 100vh; opacity: 0; transition-delay: .05s, .3s; }
body.focus-mode .content { opacity: 0; }
body.focus-mode .drawer { display: none; }
body.focus-mode .shade { opacity: .5; }
.exit-hint {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 999px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 14px; color: var(--muted); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .5s ease; z-index: 30;
}
body.focus-mode:not(.idle) .exit-hint { opacity: 1; }

/* ---------- desktop: UI at 80% size (background/video stay full-screen) ---------- */
@media (min-width: 761px) {
  .topbar, .hero, .player, .content, .drawer { zoom: .8; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  .topbar { padding: 16px; }
  .bg { background-position: 72% center; }
  .hero { transform: translateY(-160%); }
  .player { flex-direction: column; border-radius: 32px; padding: 20px; gap: 14px; bottom: 32px; text-align: center; }
  .art { width: 88px; height: 88px; }
  .row { flex-direction: column; gap: 14px; }
  .text { width: 100%; }
  .content { padding-top: 120px; }
  .lede { font-size: 17px; }
  .cards { grid-template-columns: 1fr; gap: 14px; margin-top: 40px; }
  .section-title { margin-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}