/* 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%);              /* ajuste fino via vars */
  transform: translate(-50%,-50%);
  width: var(--coin-width, 10.8%);           /* ajuste fino via vars */
  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; }

/* Status */
.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 (desktop) */
  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-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);
}

/* =========================================================
   MOBILE ONLY — piso mínimo + controles sem overflow
   (não altera desktop)
   ========================================================= */

/* Piso mínimo: evita o DevTools "esmagar" o layout abaixo de 300px */
@media (max-width:520px){
  body{ min-width: 300px; }
  .mr-jukebox{ min-width: 300px; }

  /* Hotspot no mobile: continua proporcional (em %) */
  .mr-jukebox{
    --coin-left: 50%;
    --coin-top: 49.7%;
    --coin-width: 11.0%;
    --coin-ratio: 5.6;
  }

  /* Controles: cabem no retrato e quebram linha */
  .mr-jukebox__controls{
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 10px 10px;
    overflow-x: hidden;
  }

  .mr-jukebox--controls .mr-jukebox__controls{
    display:flex;                 /* sobrescreve inline-flex no mobile */
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    row-gap: 10px;
  }

  .mr-sep{ display:none; }

  .mr-vol{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  /* slider responsivo para não empurrar o container */
  .mr-vol input[type="range"]{
    width: min(240px, calc(100vw - 170px));
  }
}

/* Mobile em paisagem: ainda protege contra overflow */
@media (max-width:900px) and (orientation: landscape){
  body{ min-width: 300px; }
  .mr-jukebox{ min-width: 300px; }

  /* Hotspot proporcional (em %) */
  .mr-jukebox{
    --coin-left: 50%;
    --coin-top: 49.5%;
    --coin-width: 10.6%;
    --coin-ratio: 5.6;
  }

  .mr-jukebox__controls{
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    padding: 8px 10px;
    overflow-x: hidden;
  }

  .mr-jukebox--controls .mr-jukebox__controls{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    row-gap: 8px;
  }

  .mr-sep{ display:none; }

  .mr-btn{
    min-width: 42px;
    padding: 7px 9px;
  }

  .mr-vol{
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  /* slider menor no landscape */
  .mr-vol input[type="range"]{
    width: min(220px, calc(100vw - 220px));
  }
}

/* Mobile muito pequeno: microajustes */
@media (max-width:380px){
  .mr-vol input[type="range"]{
    width: min(210px, calc(100vw - 170px));
  }
  .mr-btn{
    min-width: 40px;
    padding: 7px 9px;
  }
}