/* ============================================================
   music.css - the BGM float: a diagonal translucent scrim that
               rises out of the bottom-right corner toward the
               left, with the transport riding on its thick end.
   ============================================================ */

/* Full-stage clipping frame; only the controls take clicks. It carries
   no z-index of its own on purpose, so the scrim can sit BEHIND the duo
   while the copy and the transport ride above everything.
   It also owns the geometry of the diagonal, because the copy in
   copy.css has to sit on the same line. --sheen-tan must stay tan() of
   --sheen-angle; they are the only two numbers worth touching. */
.music-float{
  --sheen-angle:-30deg;
  --sheen-tan:0.5774;
  --sheen-top:20vh;

  /* Where the name block and the status readout start across the stage:
     just past ぴよち (the pair spans 1.09 x --ny-w from --duo-left), so
     neither ever lands on the chick. Clamped at both ends - past 68vw a
     block runs out of room, since each row sits further right than the
     one above as the stack steps along the diagonal. */
  --copy-x:clamp(56vw,
                 calc(var(--duo-left) + var(--ny-w) * 1.09 + 1vw),
                 68vw);

  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

/* ---------- the scrim ---------- */
/* The plate hangs off its own top-right corner, pinned to the right edge
   at --sheen-top, and is turned --sheen-angle so that corner becomes the
   high end of the diagonal: the edge then runs down and to the left, off
   the bottom of the screen around 40vw, with the dark mass below it.
   Anchoring on that corner means the rotation can never uncover the
   bottom-right, which is where the transport sits.
   The fade runs along the plate's own length, so the band is dense under
   the transport and gone by the time it leaves the screen. */
.music-sheen{
  position:absolute;
  right:0;
  top:var(--sheen-top);
  width:150vw;
  height:150vh;
  transform-origin:100% 0;
  transform:rotate(var(--sheen-angle));
  /* behind the duo: the pair stays fully lit and simply stands in front
     of the band, instead of the leading edge slicing across ぴよち */
  z-index:var(--z-float);

  /* density across the band: a hard leading edge (just enough of a
     ramp to keep it from aliasing) and a flat, heavy fill under it */
  background:linear-gradient(180deg,
    rgba(2,1,7,0)    0%,
    rgba(2,1,7,0.92) 0.35%,
    rgba(2,1,7,0.92) 100%);

  /* and the fade along its length, applied to the hairline as well.
     It has to be at full strength by the time the copy starts (~60vw)
     or the text would sit half on the lit stage floor. */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 34%, rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.8) 60%, #000 70%);
  mask-image:linear-gradient(90deg,
    transparent 34%, rgba(0,0,0,0.35) 50%,
    rgba(0,0,0,0.8) 60%, #000 70%);
}

/* gold hairline riding the leading edge (the length fade above applies
   to it too, so it dies away exactly where the scrim does) */
.music-sheen::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(90deg,
    rgba(255,216,115,0)    40%,
    rgba(255,216,115,0.55) 58%,
    rgba(255,216,115,0.95) 74%,
    rgba(255,216,115,0.95) 100%);
  box-shadow:0 0 14px rgba(255,216,115,0.45);
}

/* ---------- transport ---------- */
/* No box of its own any more - the scrim is its surface. */
.music-control{
  position:absolute;
  right:2.6vw;
  bottom:3.2vh;
  width:clamp(200px, 23vw, 270px);
  display:flex;
  align-items:center;
  gap:0.7em;
  pointer-events:auto;
  z-index:var(--z-panel);
}

.play-btn{
  flex:none;
  width:clamp(34px,3.4vw,44px);
  height:clamp(34px,3.4vw,44px);
  border-radius:50%;
  border:none;
  background:linear-gradient(135deg,var(--pink),var(--sky));
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.18) inset;
  transition:transform .15s ease, box-shadow .15s ease;
}

.play-btn:hover{
  transform:scale(1.07);
  box-shadow:0 6px 18px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.3) inset;
}

.play-btn svg{ width:44%; height:44%; }

.music-meta{ flex:1; min-width:0; }

.music-title{
  font-size:clamp(9px,0.95vw,11.5px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:0.92;
  margin-bottom:0.4em;
  text-shadow:0 1px 6px rgba(0,0,0,0.8);
}

/* ---------- volume slider ---------- */
/* --val is kept in sync by js/music.js so the filled portion of the
   track matches the thumb position. */
input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:4px;
  border-radius:4px;
  background:linear-gradient(to right,
    var(--gold) var(--val,70%),
    rgba(255,255,255,0.25) var(--val,70%));
  outline:none;
  cursor:pointer;
}

input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--gold-deep);
  box-shadow:0 1px 4px rgba(0,0,0,0.4);
}

input[type=range]::-moz-range-thumb{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--gold-deep);
}