/* DV52 AURA · liquid glass music player. Stage 2 of 6 adds the WebGL canvas (the CSS frost below stays as the no-WebGL fallback).
   The glass (slab, droplet, liquid thread, beads, shadow, caustic) is one WebGL pass in js/glass.js; everything that is
   text or an icon is DOM above it, so it stays sharp. The slab's box is driven by a spring in js/app.js, which writes
   --x/--y/--w/--h/--u on .slab; every size inside the slab is in --u (1u = 1 % of the slab height). */


:root {
  --acc-a: #b56cff; --acc-b: #79c3ff; --ink: #fbeefe;
  --ink-2: rgba(255, 255, 255, .93);
  --ink-3: rgba(255, 255, 255, .82);
  --deep: #1d1a45;
  --frost: rgba(255, 255, 255, .16);
  --frost-line: rgba(255, 255, 255, .42);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --fade: 1.1s;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: only light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--deep); color: #fff; overflow: hidden;
  font: 500 15px/1.35 Montserrat, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 12px; box-shadow: 0 0 0 5px color-mix(in srgb, var(--acc-b) 55%, transparent); }

/* ---------- wallpaper ---------- */
.wall { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--deep); }
.wall-layer { position: absolute; inset: 0; opacity: 0; }
.wall-layer.is-on { opacity: 1; }
.wall-layer img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.gl { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; display: block; }

/* ---------- top bar ---------- */
.top { position: fixed; z-index: 3; left: 0; top: 0; padding: calc(22px + var(--safe-t)) 28px 0; display: flex; align-items: center; gap: 18px; pointer-events: none; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 19px; letter-spacing: .04em; min-height: 44px;
  text-shadow: 0 1px 12px rgba(30, 10, 60, .35); }
.brand b { font-weight: 800; }
.brand span { font-weight: 500; }
.brand-mark { width: 30px; height: 30px; filter: drop-shadow(0 2px 8px rgba(70, 40, 160, .45)); }
.pill { margin: 0; display: inline-flex; align-items: center; gap: 9px; height: 30px; padding: 0 14px 0 12px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .17); border: 1px solid rgba(255, 255, 255, .34);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 18px rgba(30, 10, 70, .16); }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.eq i { width: 2.5px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; transform: scaleY(.35); }
.is-playing .eq i { animation: eq .9s ease-in-out infinite alternate; }
.is-playing .eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.is-playing .eq i:nth-child(3) { animation-duration: 1.05s; animation-delay: -.6s; }
@keyframes eq { 0% { transform: scaleY(.25); } 100% { transform: scaleY(1); } }

/* ---------- the slab ---------- */
.stage { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.slab { --x: 0px; --y: 0px; --w: 800px; --h: 330px; --u: 3.3px; --ex: 26px; --ey: 22px;
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); pointer-events: auto; transform-origin: 0 0;
  border-radius: calc(8.4 * var(--u)); }
.face { position: absolute; inset: 0; border-radius: inherit; transition: opacity .32s var(--ease); }

.art { position: absolute; margin: 0; left: calc(7.6 * var(--u)); top: calc(10 * var(--u)); width: calc(60 * var(--u)); height: calc(60 * var(--u));
  border-radius: calc(3.2 * var(--u)); overflow: hidden; background: #2b1f4f;
  box-shadow: 0 calc(2.4 * var(--u)) calc(6 * var(--u)) rgba(20, 6, 40, .42), 0 0 0 1px rgba(255, 255, 255, .22); }
.art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--fade) var(--ease); }
.art img.is-on { opacity: 1; }
.art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, 0) 32%), linear-gradient(to top, rgba(12, 6, 30, .62) 0%, rgba(12, 6, 30, 0) 42%); }
.art-cap { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(5.4 * var(--u)); text-align: center; text-transform: uppercase; line-height: 1.15; }
.art-cap b { display: block; font-weight: 800; font-size: max(9px, calc(4.6 * var(--u))); letter-spacing: .02em; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
.art-cap span { display: block; font-weight: 600; font-size: max(7px, calc(2.6 * var(--u))); letter-spacing: .14em; color: rgba(255, 255, 255, .8); margin-top: .35em; }

.meta { transition: color var(--fade) var(--ease); position: absolute; left: calc(70 * var(--u)); right: calc(5 * var(--u)); top: calc(9 * var(--u)); text-align: center; color: var(--ink); }
.meta > * { margin: 0; transition: opacity .28s var(--ease), transform .42s var(--ease); }
.kicker { font-style: italic; font-weight: 500; font-size: max(10px, calc(5.6 * var(--u))); color: var(--ink-2); letter-spacing: .01em;
  text-shadow: 0 1px 10px rgba(40, 10, 60, .55), 0 0 3px rgba(40, 10, 60, .35); }
.title { font-weight: 800; font-size: max(14px, calc(10.4 * var(--u))); line-height: 1.12; text-transform: uppercase; letter-spacing: .005em; margin-top: calc(.6 * var(--u)) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-shadow: 0 0 calc(5 * var(--u)) rgba(255, 255, 255, .3), 0 calc(.5 * var(--u)) calc(2.6 * var(--u)) rgba(50, 10, 70, .5), 0 0 1px rgba(60, 20, 80, .35); }
.artist { font-style: italic; font-weight: 500; font-size: max(11px, calc(6 * var(--u))); color: var(--ink-2); margin-top: calc(.6 * var(--u)) !important;
  text-shadow: 0 1px 10px rgba(40, 10, 60, .55), 0 0 3px rgba(40, 10, 60, .35); }

.controls { position: absolute; left: calc(70 * var(--u)); right: calc(5 * var(--u)); top: calc(56 * var(--u)); height: 0; display: flex; align-items: center; justify-content: center; gap: calc(7 * var(--u)); }
.ctl { position: relative; flex: none; width: max(44px, calc(12 * var(--u))); height: max(44px, calc(12 * var(--u))); margin: calc(-6 * var(--u)) 0; display: grid; place-items: center; border-radius: 50%;
  color: rgba(255, 255, 255, .94); transition: transform .3s var(--ease), opacity .3s var(--ease), color .2s; }
.ctl svg { width: max(15px, calc(8.4 * var(--u))); height: auto; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 1px 4px rgba(40, 10, 70, .45)); }
.ctl svg.fill { fill: currentColor; stroke: none; }
.ctl:hover { transform: scale(1.1); }
.ctl:active { transform: scale(.92); }

.play { position: relative; flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); min-width: 44px; min-height: 44px; border-radius: 50%; display: grid; place-items: center; margin: calc(-14 * var(--u)) 0; }
.play svg { position: absolute; width: 38%; height: 38%; fill: #fff; filter: drop-shadow(0 1px 3px rgba(40, 10, 70, .5)) drop-shadow(0 0 8px rgba(255, 255, 255, .35));
  transition: opacity .22s var(--ease), transform .38s var(--ease); }
.play .g-play { transform: translateX(6%); }
.is-playing .play .g-play { opacity: 0; transform: translateX(6%) scale(.5) rotate(-30deg); }
.play .g-pause { opacity: 0; transform: scale(.5) rotate(30deg); }
.is-playing .play .g-pause { opacity: 1; transform: none; }
.play:focus-visible { border-radius: 50%; }

.scrub { position: absolute; left: calc(5.6 * var(--u)); right: calc(5.6 * var(--u)); top: calc(84 * var(--u)); height: 44px; margin-top: -22px; cursor: pointer; touch-action: none; border-radius: 22px; }
.scrub:focus-visible { outline-offset: -4px; }
.time { position: absolute; top: calc(50% + max(9px, calc(3.4 * var(--u)))); font-size: max(10px, calc(3.4 * var(--u))); font-weight: 600; letter-spacing: .04em; color: var(--ink-3);
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s var(--ease); text-shadow: 0 1px 6px rgba(30, 10, 60, .4); }
.t-cur { left: calc(2 * var(--u)); }
.t-dur { right: calc(2 * var(--u)); }
.scrub:focus-visible .time { opacity: 1; }

/* side faces: the engraving sits on the oblique right / bottom faces (skew set from the extrusion in app.js) */
.edge-r, .edge-b { position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden;
  text-transform: uppercase; font-weight: 600; letter-spacing: .2em; color: rgba(255, 255, 255, .86); white-space: nowrap; transition: opacity .3s var(--ease); }
.edge-r { left: 100%; top: calc(18 * var(--u)); height: calc(66 * var(--u)); width: var(--ex); transform-origin: 0 0; transform: skewY(var(--skr, 40deg)); }
.edge-r span { display: block; transform: rotate(-90deg); font-size: max(8px, calc(min(var(--ex), 11 * var(--u)) * .42)); text-shadow: 0 0 6px rgba(255, 255, 255, .45), 0 1px 2px rgba(30, 10, 60, .45); }
.edge-r::before { content: ''; position: absolute; inset: 14% 22%; border-radius: 3px; background: linear-gradient(90deg, rgba(40, 24, 80, .18), rgba(40, 24, 80, .42)); }
.edge-r span { position: relative; }
.edge-b { top: 100%; left: calc(7 * var(--u)); width: calc(38 * var(--u)); height: var(--ey); transform-origin: 0 0; transform: skewX(var(--skb, 50deg)); }
.edge-b::before { content: ''; position: absolute; inset: 18% 0; border-radius: 3px; background: linear-gradient(180deg, rgba(25, 16, 50, .62), rgba(25, 16, 50, .78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.edge-b span { position: relative; font-size: max(7px, calc(var(--ey) * .4)); color: rgba(255, 255, 255, .9); }
.is-phone .edge-r, .is-phone .edge-b { opacity: 0; }

/* the menu */
@keyframes menu-in { from { opacity: 0; transform: scale(.92) translateY(-4px); } }

/* footer */
.foot { position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 28px calc(18px + var(--safe-b)); display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; pointer-events: none;
  font-size: 11.5px; font-weight: 500; color: rgba(255, 255, 255, .78); text-shadow: 0 1px 8px rgba(20, 8, 50, .5); }
.foot p { margin: 0; }
.foot { transition: opacity .3s; }

/* ---------- phone ---------- */
.is-phone .top { padding: calc(14px + var(--safe-t)) 18px 0; }
.is-phone .brand { font-size: 16px; }
.is-phone .brand-mark { width: 26px; height: 26px; }
.is-phone .top .pill { display: none; }
.is-phone .top { opacity: 0; transition: opacity .3s; }
.is-phone .foot { padding-bottom: calc(10px + var(--safe-b)); justify-content: center; font-size: 10.5px; }
.is-phone .slab { border-radius: 34px; }
.is-phone .face { display: flex; flex-direction: column; align-items: center; padding: 18px 22px 30px; }
.is-phone .phead { display: flex; }
.phead { display: none; align-self: stretch; justify-content: space-between; align-items: center; min-height: 44px; }
.phead .pill { height: 28px; font-size: 10.5px; }
.is-phone .art { position: relative; left: auto; top: auto; width: var(--art); height: var(--art); margin: auto 0 0; border-radius: 16px; }
.is-phone .art-cap { bottom: 7%; }
.is-phone .art-cap b { font-size: calc(var(--art) * .068); }
.is-phone .art-cap span { font-size: calc(var(--art) * .036); }
.is-phone .meta { position: relative; left: auto; right: auto; top: auto; width: 100%; margin-top: 22px; }
.is-phone .kicker { font-size: 14px; }
.is-phone .title { font-size: clamp(22px, 7.4vw, 30px); }
.is-phone .artist { font-size: 15px; }
.is-phone .scrub { position: relative; left: auto; right: auto; top: auto; width: 100%; margin: 20px 0 0; flex: none; order: 3; }
.is-phone .time { opacity: 1; font-size: 11px; top: calc(50% + 10px); }
.is-phone .controls { position: relative; left: auto; right: auto; top: auto; height: 84px; width: 100%; margin: 26px 0 auto; gap: 6px; justify-content: space-between; order: 4; }
.is-phone .ctl { margin: 0; }
.is-phone .ctl svg { width: 24px; }
.is-phone .play { width: 84px; height: 84px; margin: 0; }

/* ---------- no WebGL: the same layout with CSS frost ---------- */
.drop-css, .thread-css { display: none; }
.no-gl .face { background: linear-gradient(145deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .16));
  border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 6px rgba(255, 255, 255, .2), var(--ex) var(--ey) 0 -1px rgba(255, 255, 255, .22), 0 30px 70px rgba(20, 6, 50, .35);
  -webkit-backdrop-filter: blur(14px) saturate(1.5) brightness(1.06); backdrop-filter: blur(14px) saturate(1.5) brightness(1.06); }
.no-gl .drop-css { display: block; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, .25) 16%, rgba(255, 255, 255, 0) 38%),
              radial-gradient(circle at 60% 72%, color-mix(in srgb, var(--acc-b) 55%, transparent), transparent 62%), rgba(255, 255, 255, .14);
  border: 1.5px solid rgba(255, 255, 255, .7); box-shadow: inset 0 -6px 14px rgba(255, 255, 255, .3), 0 10px 24px rgba(20, 6, 50, .3);
  -webkit-backdrop-filter: blur(4px) saturate(1.6); backdrop-filter: blur(4px) saturate(1.6); }
.no-gl .thread-css { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px; background: rgba(20, 10, 50, .25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .3); }
.no-gl .thread-css i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--acc-a), var(--acc-b)); box-shadow: 0 0 12px var(--acc-b); }
.no-gl .thread-css i::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(255, 255, 255, .5) 40%, var(--acc-b)); box-shadow: 0 0 10px var(--acc-b); }

/* ---------- reduced motion ---------- */
.is-reduced, .is-reduced * { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}