/* La Movida Liquid Glass Player - styles (v2 translucent) */
:root{
  --lmv-height: 74px;
  --lmv-padding: 12px;
  --lmv-radius: 18px;
  --lmv-glow: 24px;
  --lmv-blur: 16px;
}

#lamovida-player{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  height: var(--lmv-height);
  padding: var(--lmv-padding);
  pointer-events: none;
  /* Animated tropical gradient backdrop (translucent) */
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(255,210,111,0.55), rgba(252,182,159,0.55),
    rgba(255,154,158,0.55), rgba(250,208,196,0.55),
    rgba(251,194,235,0.55), rgba(161,196,253,0.55),
    rgba(194,255,216,0.55), rgba(255,210,111,0.55));
  background-size: 200% 200%;
  animation: lmvGradient 18s ease infinite;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
}

@keyframes lmvGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.lmv-glass{
  max-width: 1100px;
  margin: 0 auto;
  height: calc(var(--lmv-height) - var(--lmv-padding)*2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--lmv-radius);
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(var(--lmv-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--lmv-blur)) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 8px 30px rgba(0,0,0,.2), inset 0 0 var(--lmv-glow) rgba(255,255,255,.25);
  pointer-events: auto;
}

.lmv-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.lmv-logo{
  height: 48px;
  width: auto;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.25);
  background: rgba(255,255,255,.7);
  padding: 4px 6px;
}

.lmv-title{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color:#0b132b;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
}

.lmv-title strong{
  font-weight:700;
  font-size: 14px;
}

.lmv-status{
  font-size: 12px;
  opacity: .8;
}

.lmv-controls{
  display:flex;
  align-items:center;
  gap: 12px;
}

.lmv-btn{
  height: 44px;
  width: 44px;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow: 0 10px 20px rgba(0,0,0,.2), inset 0 -4px 10px rgba(0,0,0,.12);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .2s ease;
}

.lmv-btn:active{
  transform: translateY(1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.2), inset 0 -2px 8px rgba(0,0,0,.12);
}

.lmv-icon{
  width: 0;
  height: 0;
  border-style: solid;
}

.lmv-icon-play{
  border-width: 9px 0 9px 16px;
  border-color: transparent transparent transparent #0b132b;
  margin-left: 2px;
}

.lmv-icon-pause{
  width: 16px;
  height: 16px;
  background: linear-gradient(90deg, #0b132b 0 40%, transparent 40% 60%, #0b132b 60% 100%);
  border: none;
}

.lmv-volume{
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  width: min(32vw, 220px);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  outline: none;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.15);
}

.lmv-volume::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0b132b;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  cursor: pointer;
}

@media (max-width: 560px){
  :root{ --lmv-height: 84px; }
  .lmv-title strong{ font-size: 13px;}
  .lmv-title .lmv-status{ font-size: 11px;}
  .lmv-volume{ width: 40vw;}
}