/* Corner music toggle. Lives at the end of the footer flex so it lands in the
   bottom-right corner without covering the score or the control pads. */
.music{display:flex;align-items:center;flex:0 0 auto}
.musicVideo{position:absolute;width:1px;height:1px;overflow:hidden;opacity:.01;pointer-events:none}
.musicVideo iframe{width:200px;height:112px;border:0}

.musicToggle{display:flex;align-items:center;justify-content:center;width:48px;height:48px;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.45);border-radius:15px;color:#fff;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  -webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
  box-shadow:0 10px 30px rgba(20,12,30,.28),inset 0 1px 0 rgba(255,255,255,.6),
             inset 0 -1px 0 rgba(255,255,255,.12);
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.musicToggle:hover{transform:translateY(-2px);background:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,.14))}
.musicToggle.playing{background:linear-gradient(150deg,rgba(139,0,9,.82),rgba(139,0,9,.5));
  border-color:rgba(255,255,255,.6);color:#fff;
  box-shadow:0 10px 30px rgba(90,0,8,.4),inset 0 1px 0 rgba(255,255,255,.45)}
.musicToggle.loading{opacity:.55;cursor:wait}
.musicToggle:disabled{opacity:.35;cursor:not-allowed;transform:none}
.musicToggle svg{display:block}
.musicToggle.playing svg{animation:musicPulse 1.6s ease-in-out infinite}
@keyframes musicPulse{50%{transform:translateY(-1.5px)}}
@media(prefers-reduced-motion:reduce){.musicToggle,.musicToggle.playing svg{transition:none;animation:none}}

/* the footer wraps on small screens, so pin the order: stamina + hook mode,
   then the score row with the toggle pushed to its right edge, then the pads */
@media(max-width:700px){
  .stamina{order:0}
  #hookMode{order:1}
  .score{order:2}
  footer .music{order:3;margin-left:auto}
  .controls{order:4}
}