/* ============================================================================
   THE SONG — what is left of the ported record player.

   The turntable itself is gone: the song now starts on the single tap that
   opens the invitation, so there is nothing to click. Only the floating mini
   player survives, and it earns its place — it is the ONLY way to stop the
   music. Sound that starts on its own with no visible off switch is the thing
   people actually hate, so this is not optional furniture.

   The @keyframes spin below is still used by .mini-disc.
   ========================================================================== */

@keyframes spin{ to{ transform:rotate(360deg) } }

/* ── the floating mini player, once the needle is down ─────────────────── */
.mini-player{
  position:fixed; left:clamp(.8rem,3vw,1.4rem); bottom:clamp(1.1rem,3.5vh,1.7rem);
  z-index:55; display:flex; align-items:center; gap:.65rem;
  padding:.5rem .95rem .5rem .5rem; border-radius:999px;
  background:linear-gradient(150deg,rgba(20,32,63,.9),rgba(6,11,24,.94));
  border:1px solid var(--gold-line);
  box-shadow:0 16px 36px -20px rgba(0,0,0,.95);
  backdrop-filter:blur(8px);
  opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.mini-player.in{ opacity:1; transform:none }
.mini-disc{
  position:relative; width:30px; height:30px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 50% 50%, #12203D 0 22%, #080D1A 22% 100%);
  box-shadow:0 0 0 1px rgba(201,162,75,.35);
  display:grid; place-items:center;
}
.mini-disc.spin{ animation:spin 2.6s linear infinite }
.mini-disc i{
  width:9px; height:9px; border-radius:50%; display:block;
  background:radial-gradient(circle at 38% 32%, #F0DAA4, #C9A24B 60%, #97722E);
}
.mini-meta{ display:flex; flex-direction:column; align-items:flex-start; gap:.1rem; min-width:0 }
.mini-meta b{
  font-family:var(--serif); font-weight:300; font-size:.78rem; color:#FBF5E9;
  letter-spacing:.02em; max-width:38vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mini-meta em{
  font-family:var(--sans); font-weight:200; font-style:normal; font-size:.45rem;
  letter-spacing:.24em; text-indent:.24em; text-transform:uppercase; color:var(--gold);
}

@media (min-width:900px){
  .tt-platter{ width:430px }
  .mini-meta b{ max-width:180px }
}

/* ── FITTING THE PLATTER TO THIS BUILD ───────────────────────────────────────
   The port's own width is min(380px,86vw), which suited nathan-amara's roomy
   stage padding. This build's panel is much tighter, and the TONEARM is the
   part that bites: it pivots at 90% of the platter and parks rotated 30° out
   past the rim, so it reaches roughly a tenth of the platter's width beyond
   the right edge. At the ported size that pushed the document 34 px wide —
   and because the bottom nav is fixed with left:0/right:0, it stretched to the
   scroll width too and overflowed with it. Size the platter for the ARM, not
   for the disc. */
.tt-platter{ width:min(300px,66vw) }
@media (min-width:900px){ .tt-platter{ width:min(380px,42vw) } }

/* The sleeve, on the mini player's disc. The gold spindle stays on top, so a
   record with a printed label is what you get rather than a photo in a circle.
   `.has-art` is only added once the image has actually decoded — see initSong. */
.mini-disc.has-art{ background-size:cover; background-position:center }
.mini-disc.has-art i{
  width:7px; height:7px;
  box-shadow:0 0 0 2px rgba(7,12,24,.75);
}


/* ⚠ The bottom nav is fixed and 49px tall. The ported mini player sits at the
   same corner, so without this it is half-hidden behind the nav and the track
   name is unreadable — which matters, because the mini player is the only way
   to stop the music. Clear the bar, plus the phone's home indicator. */
.mini-player{ bottom:calc(4.5rem + env(safe-area-inset-bottom, 0px)) }