/* 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 */
/* Hotspot retangular (sem cantos arredondados) */
.mr-jukebox__coin{
  position:absolute;
  left: var(--coin-left, 50%);
  top:  var(--coin-top, 49.2%);              /* ↓ desce ~10px (ajuste fino aí) */
  transform: translate(-50%,-50%);
  width: var(--coin-width, 10.8%);           /* ≈ 67% do tamanho anterior */
  aspect-ratio: var(--coin-ratio, 5.6) / 1;  /* altura = width/ratio */
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: 2px;                         /* quase reto */
  outline-offset: 3px;
  animation: mr-pulse 1.4s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(39,160,255,0);
}
.mr-jukebox__coin::before{
  content:""; position:absolute; inset:0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.5),
              0 0 6px rgba(39,160,255,.35) inset;
  pointer-events:none;
}
@keyframes mr-pulse{
  0%   { box-shadow: 0 0 0 0   rgba(39,160,255,0); }
  60%  { box-shadow: 0 0 0 5px rgba(39,160,255,.22); }
  100% { box-shadow: 0 0 0 0   rgba(39,160,255,0); }
}
.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 – SOMENTE o tamanho dos elementos e centralizado */
.mr-jukebox__controls{
  display:none;
  margin: 14px auto 0;
  padding: 8px 14px;
  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);
  width: max-content;             /* ⟵ pega só o necessário */
  max-width: calc(100vw - 32px);  /* segura em telas pequenas */
}
.mr-jukebox--controls .mr-jukebox__controls{
  display:inline-flex;            /* ⟵ impede esticar */
  align-items:center;
  justify-content:center;
  gap:12px;
}
.mr-btn, .mr-vol { flex: 0 0 auto; }  /* ⟵ nada cresce sozinho */

/* volume compacto */
.mr-vol input[type="range"]{
  -webkit-appearance:none; appearance:none;
  height:6px; width:140px; border-radius:999px;
  background:linear-gradient(90deg,#27A0FF,#7dd3fc);
  outline:none; border:1px solid rgba(255,255,255,.16);
}

.mr-btn{
  appearance:none; border:0; cursor:pointer;
  border-radius: 10px; padding: 8px 10px;
  font-weight:800; color:#001021; background:#27A0FF;
  min-width:44px;
}
.mr-sep{ width:2px; height:26px; 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:140px; 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:16px; height:16px; border-radius:50%;
  background:#fff; border:2px solid #27A0FF; cursor:pointer;
  box-shadow:0 0 10px rgba(39,160,255,.45);
}