/* ------- playback ------- */
.clip-label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:1.2px;color:var(--dim);margin-bottom:9px}
.clip-label b{color:var(--ink);font-weight:600}
.clip-label .r{color:var(--rose-deep)}
/* slice MEASURED off ribbon_frame_clean.png (837x825, window at 107..723 / 108..714):
   the ribbon is ~110px thick, not the 235 this once guessed -- 235 reached past the
   ribbon into the source's white margin and drew it as a white box round the player.
   background-clip:padding-box keeps the white backing from painting under the
   transparent border, which was the second half of that same white box. */
.reel-frame{position:relative;border:36px solid transparent;border-image:url('../../../assets/kawaii/ribbon_frame_clean.png') 108 113 110 107 round;background:#fff;background-clip:padding-box;box-shadow:var(--shadow);transition:transform .4s var(--spring),box-shadow .4s}
.reel-frame::before{content:'';position:absolute;top:-52px;left:50%;transform:translateX(-50%);width:138px;height:78px;z-index:7;background:url('../../../assets/kawaii/ribbon_bow.png') no-repeat center / contain;pointer-events:none}
.reel-frame:hover{transform:translateY(-6px)}

.reel-frame .yt{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}
.reel-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.reel-frame .bk{border-color:#f2b8ce}
.reel-note{font-size:12px;color:var(--dim);margin-top:10px;font-family:var(--mono);letter-spacing:.6px}