/* =========================================================
   NEO PLAYER — Futurista / Neon Glass (Kreactivo)
   ========================================================= */

#player-section{
  position: relative;
  z-index: 2;
}

/* Mantener 2 columnas en escritorio, apilar en móvil */
.section-columns{
  display:flex;
  gap:20px;
  align-items:stretch;
}
@media (max-width: 768px){
  .section-columns{flex-direction:column;}
  .section-column-70,.section-column-30{max-width:100%;flex:0 0 100%;}
}

/* Legacy player oculto pero activo */
.legacyPlayer{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Card base */
.neoPlayer{
  position: relative;
  isolation: isolate;
  border-radius: 26px;
  padding: 18px 16px 16px;
  min-height: 480px;
  height: 480px;
  overflow: hidden;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(255,80,0,0.20), transparent 40%),
              radial-gradient(900px 500px at 100% 20%, rgba(139,92,246,0.25), transparent 45%),
              linear-gradient(180deg, rgba(15,23,42,0.92), rgba(2,6,23,0.92));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 22px 70px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
}

.neoBgGlow{
  position:absolute;
  inset:-2px;
  border-radius: 28px;
  background: conic-gradient(from 180deg,
    rgba(255,80,0,0.00),
    rgba(255,80,0,0.55),
    rgba(139,92,246,0.55),
    rgba(0,200,255,0.45),
    rgba(255,80,0,0.00));
  filter: blur(18px);
  opacity: 0.55;
  z-index: -1;
  animation: neoSpin 10s linear infinite;
}
@keyframes neoSpin{
  to { transform: rotate(360deg); }
}

/* Header */
.neoHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.neoLivePill{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  font-size: 12px;
  color: rgba(255,255,255,0.92);
}
.neoDot{
  width:10px;height:10px;border-radius:50%;
  background: #ff0050;
  box-shadow: 0 0 18px rgba(255,0,80,0.9);
  animation: neoPulse 1.4s ease-in-out infinite;
}
@keyframes neoPulse{
  0%,100%{ transform: scale(1); opacity: 1; }
  50%{ transform: scale(0.65); opacity: 0.6; }
}

.neoMiniStats{
  display:flex;
  gap:10px;
}
.neoStat{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  min-width: 86px;
}
.neoStatLabel{
  font-size:10px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color: rgba(255,255,255,0.55);
  font-weight: 800;
}
.neoStatValue{
  font-size:12px;
  color: rgba(255,255,255,0.92);
  font-weight: 900;
}

/* Body layout */
.neoBody{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  height: calc(100% - 52px);
  padding-top: 12px;
}

/* Cover + orbit */
.neoCoverWrap{
  position: relative;
  width: 190px;
  height: 190px;
  margin-top: 6px;
}
.neoOrbit{
  position:absolute;
  inset:-14px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.neoOrbit::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  background: conic-gradient(from 90deg, rgba(255,80,0,0.0), rgba(255,80,0,0.55), rgba(139,92,246,0.55), rgba(0,200,255,0.45), rgba(255,80,0,0.0));
  filter: blur(0.2px);
  mask: radial-gradient(circle at center, transparent 62%, #000 63%);
  opacity: .7;
  animation: neoSpin 8s linear infinite reverse;
}

.neoCover{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.14);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.04),
    0 18px 50px rgba(0,0,0,0.55),
    0 0 40px rgba(139,92,246,0.35),
    0 0 40px rgba(255,80,0,0.22);
}

/* Meta */
.neoMeta{
  width: 100%;
  text-align:center;
  padding: 12px 10px 4px;
}
.neoTitle{
  font-weight: 950;
  font-size: 18px;
  line-height: 1.25;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 2px 12px rgba(0,0,0,0.7);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
.neoArtist{
  margin-top: 6px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(209,213,219,0.95);
  letter-spacing: .02em;
}

/* Visualizer */
.neoVisualizer{
  display:flex;
  gap:6px;
  height: 28px;
  align-items:flex-end;
  margin: 8px 0 6px;
  opacity: 0.9;
}
.neoVisualizer span{
  width: 6px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,200,255,0.95), rgba(139,92,246,0.85), rgba(255,80,0,0.85));
  height: 30%;
  animation: neoBars 1.2s ease-in-out infinite;
}
.neoVisualizer span:nth-child(2){ animation-delay:.08s;}
.neoVisualizer span:nth-child(3){ animation-delay:.16s;}
.neoVisualizer span:nth-child(4){ animation-delay:.24s;}
.neoVisualizer span:nth-child(5){ animation-delay:.32s;}
.neoVisualizer span:nth-child(6){ animation-delay:.40s;}
.neoVisualizer span:nth-child(7){ animation-delay:.48s;}
.neoVisualizer span:nth-child(8){ animation-delay:.56s;}
@keyframes neoBars{
  0%,100%{ height: 25%; opacity:.65; }
  50%{ height: 100%; opacity:1; }
}

/* Controls */
.neoControls{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding: 6px 8px 8px;
  margin-top: 4px;
}

.neoBtn{
  border: none;
  cursor:pointer;
  font-family: inherit;
}

.neoBtnPlay{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 14px;
  border-radius: 20px;
  color: rgba(255,255,255,0.95);
  font-weight: 1000;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(135deg, rgba(255,0,80,0.98), rgba(255,80,0,0.95));
  box-shadow:
    0 18px 45px rgba(255,0,80,0.30),
    0 18px 45px rgba(255,80,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.25);
  position: relative;
  overflow:hidden;
}
.neoBtnPlay::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-120%);
}
.neoBtnPlay:hover::before{ animation: neoShine .8s ease-out; }
@keyframes neoShine{
  to { transform: translateX(120%); }
}

.neoIcon{
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.neoIconPause{ display:none; }
.neoBtnLabel{ font-size: 12px; }

/* Playing state (toggled by JS) */
.neoPlayer.is-playing .neoBtnPlay{
  background: linear-gradient(135deg, rgba(0,200,255,0.95), rgba(139,92,246,0.95));
  box-shadow:
    0 18px 45px rgba(0,200,255,0.20),
    0 18px 45px rgba(139,92,246,0.22),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.neoPlayer.is-playing .neoIconPlay{ display:none; }
.neoPlayer.is-playing .neoIconPause{ display:block; }

.neoVolume{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
}

.neoBtnIcon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.10);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.92);
}
.neoBtnIcon:hover{
  background: rgba(255,255,255,0.10);
}

.neoVol{
  width:100%;
  accent-color: #ff0050;
  height: 4px;
}

/* Footer ticker */
.neoFooter{
  width:100%;
  padding: 6px 10px 0;
}
.neoTicker{
  font-size: 11px;
  color: rgba(255,255,255,0.62);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow:hidden;
  position: relative;
}
.neoTicker::after{
  content: "";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(2,6,23,0.0), rgba(2,6,23,1));
  pointer-events:none;
}

/* Responsive */
@media (max-width: 1200px){
  .neoPlayer{ min-height: 480px; height: 480px; }
  .neoCoverWrap{ width: 170px; height: 170px; }
}
@media (max-width: 768px){
  .neoPlayer{ min-height: 420px; height: 420px; }
  .neoCoverWrap{ width: 150px; height: 150px; }
}
@media (max-width: 480px){
  .neoPlayer{ min-height: 390px; height: 390px; }
  .neoCoverWrap{ width: 135px; height: 135px; }
}