/* mr-jukebox.css — MetaRecords (hero + painel de vidro) */
:root{
  --mr-blue:#0B74C9;
  --mr-cyan:#27A0FF;
  --mr-deep:#0C1A26;
  --mr-neon-a: rgba(15,150,255,.55);
  --mr-neon-b: rgba(0,115,230,.35);
}

/* HOTSPOT alinhável por variáveis inline no container .mr-jukebox */
.mr-jukebox{
  --coin-top: 59.8%;
  --coin-left: 50%;
  --coin-width: 22%;
  --coin-ratio: 4.2; /* largura/altura */
  position:relative; display:block; max-width: 980px; margin: 0 auto;
}
.mr-jukebox__frame{ position:relative; width:100%; border-radius:20px;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.25));
  transition: transform .25s ease, filter .25s ease; }
.mr-jukebox__img{ width:100%; height:auto; display:block; border-radius:20px; max-height:80vh; object-fit:contain; }

.mr-jukebox--playing .mr-jukebox__frame{
  transform: translateY(-2px);
  filter:
    drop-shadow(0 0 10px var(--mr-neon-a))
    drop-shadow(0 0 24px var(--mr-neon-b));
  animation: mr-neon 1.8s ease-in-out infinite;
}
@keyframes mr-neon{
  0%,100%{ filter: drop-shadow(0 0 10px var(--mr-neon-a)) drop-shadow(0 0 22px var(--mr-neon-b)); }
  50%    { filter: drop-shadow(0 0 18px rgba(80,175,255,.8)) drop-shadow(0 0 36px rgba(35,140,255,.55)); }
}

/* Hotspot INSERT COIN */
.mr-jukebox__coin{
  position:absolute; left:var(--coin-left); top:var(--coin-top); transform:translate(-50%,-50%);
  width:var(--coin-width); aspect-ratio: var(--coin-ratio) / 1; background: transparent; border: 0; cursor: pointer;
  border-radius:12px; outline-offset:6px; animation: mr-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(39,160,255,0.0);
}
.mr-jukebox__coin::before{
  content:""; position:absolute; inset:0; border-radius: inherit;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35), 0 0 10px rgba(39,160,255,.35) inset;
  pointer-events:none;
}
.mr-jukebox--playing .mr-jukebox__coin{ animation:none; }
@keyframes mr-pulse{ 0%{ box-shadow:0 0 0 0 rgba(39,160,255,0);} 50%{ box-shadow:0 0 0 10px rgba(39,160,255,.22);} 100%{ box-shadow:0 0 0 0 rgba(39,160,255,0);} }

.mr-jukebox__status{
  position:absolute; left:50%; bottom:5.2%; transform: translateX(-50%);
  padding:.5rem .8rem; border-radius:999px; background: rgba(0,0,0,.55); color:#fff;
  font: 800 .9rem/1.1 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  backdrop-filter: blur(6px); pointer-events:none; user-select:none; white-space:nowrap; border:1px solid rgba(255,255,255,.18);
}
@media (max-width:520px){ .mr-jukebox__status{ font-size:.78rem; bottom:4.4%; } }

/* === Painel de Vidro (controles) === */
.mr-jukebox__controls{
  display:none;
  margin: 14px auto 0;
  width: min(980px, 96%);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 8px 22px rgba(0,0,0,.25);
}
.mr-jukebox--controls .mr-jukebox__controls{ display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap; }

.mr-btn{
  appearance:none; border:0; cursor:pointer;
  border-radius: 10px; padding: 10px 12px; font-weight: 800;
  color: #001021; background: #27A0FF; min-width: 44px;
}
.mr-btn[aria-pressed="true"]{ background:#7dd3fc; }

.mr-sep{ width:2px; height:28px; background: rgba(255,255,255,.16); border-radius:2px; }

.mr-vol{
  display:flex; align-items:center; gap:8px;
  color:#e6f5ff; font: 700 12px/1 system-ui;
}
.mr-vol input[type="range"]{
  -webkit-appearance:none; appearance:none;
  height: 6px; width: 180px; border-radius: 999px;
  background: linear-gradient(90deg, #27A0FF, #7dd3fc);
  outline:none; border: 1px solid rgba(255,255,255,.16);
}
.mr-vol input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px; border-radius:50%;
  background:#fff; border:2px solid #27A0FF; cursor:pointer;
  box-shadow: 0 0 10px rgba(39,160,255,.45);
}