#audio-player
{
position:fixed;
bottom:0;
left:0;
right:0;

height:80px;

background:linear-gradient(90deg,#0b1220,#0f1c3d);

display:flex;
align-items:center;
justify-content:space-between;

padding:10px 20px;

border-top:1px solid rgba(255,255,255,0.05);

 z-index: 9999; /* 🔥 porta sopra tutto */
}



.player-left
{
display:flex; 
align-items:center;
gap:12px;
}

.player-left img
{
width:65px;
height:65px;

object-fit:contain;
object-position:center;

border-radius:6px;

background:rgba(255,255,255,0.04);

padding:2px;

box-sizing:border-box;
}

.player-info
{
display:flex;
flex-direction:column;
min-width: 0; /* 🔥 importantissimo */

width:320px;
flex:0 0 320px;

justify-content: flex-start;
padding: 0; 
}

#playerName
{
font-weight:600;
}

#nowPlaying
{
font-size:14px;
opacity:0.8;
}

/* ==============================
   PLAYER BOTTOM ROW
============================== */

.player-bottom-row
{
display:flex;
align-items:center;

gap:8px;

margin-top:2px;

min-height:16px;
width:max-content;
}

.player-center
{
display:flex;
align-items:center;
gap:20px;
}

/* ==============================
   NOW PLAYING SCROLL
============================== */

#nowPlaying
{
width:100%;
max-width:320px;

overflow:hidden;
white-space:nowrap;
position:relative;

display:block;
text-align:left;
}

#nowPlaying .nowplaying-scroll-track
{
display:flex;
align-items:center;
gap:50px;

white-space:nowrap;
width:max-content;

will-change:transform;
transform:translateZ(0);
backface-visibility:hidden;

animation:nowPlayingTicker linear infinite;
}

#nowPlaying .nowplaying-scroll-track span
{
flex:0 0 auto;
display:block;
}

@keyframes nowPlayingTicker
{
  from
  {
    transform:translateX(0);
  }

  to
  {
    transform:translateX(calc(-1 * var(--scroll-distance)));
  }
}

#nowPlaying .radio-scroll-track span
{
display:inline-block;
}


.player-center
{
display:flex;
align-items:center;
gap:20px;
}

.wave
{
display:flex;
gap:3px;
align-items:flex-end;
height:16px; /* ↓ più compatta */
}

.wave span
{
width:3px;
height:4px; /* base più bassa */

background:#2ecc71;
border-radius:2px;

transition:height .15s ease;
}

.player-right
{
display:flex;
align-items:center;
justify-content:flex-end;

gap:10px;

width:320px;
flex:0 0 320px;
}

/* ==============================
   PLAYER NAME SCROLL
============================== */

#playerName { 
  width:100%;
  max-width: 320px;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  text-align:left;   /* 🔥 chiave */
}

#playerName.scroll span {
  display: inline-block;
  padding-left: 100%;
  animation: playerScroll 10s linear infinite;
}

@keyframes playerScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* ==============================
   PLAYER SCROLL FIX (NO JUMP)
============================== */

#audio-player:hover .radio-scroll-track
{
  animation-play-state: paused;
}

/* ==============================
   PLAYER SCROLL HARD FIX
============================== */

#playerName .radio-scroll-track
{
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}







/* ==============================
   PREMIUM PLAYER CONTROLS
============================== */

/* bottoni base */
.player-btn
{
width:42px;
height:42px;

border-radius:50%;
border:none;

display:flex;
align-items:center;
justify-content:center;

font-size:16px;
cursor:pointer;

background:linear-gradient(145deg,#1a2b5c,#0f1c3d);
color:white;

box-shadow:
0 4px 12px rgba(0,0,0,0.6),
inset 0 1px 0 rgba(255,255,255,0.1);

transition:all .25s ease;
}

/* hover */
.player-btn:hover
{
transform:translateY(-2px) scale(1.05);

box-shadow:
0 6px 18px rgba(0,0,0,0.7),
0 0 10px rgba(0,224,255,0.25);
}

/* active click */
.player-btn:active
{
/* ❌ niente scale → elimina glitch */
transform:none;

/* feedback visivo alternativo */
box-shadow:
inset 0 2px 6px rgba(0,0,0,0.6),
0 0 8px rgba(92,108,255,0.35);
}

/* PLAY button più importante */
#playToggle
{
/* stessa dimensione degli altri */
width:42px;
height:42px;

font-size:16px;

background:linear-gradient(135deg,#5c6cff,#7a84ff);

box-shadow:
0 6px 16px rgba(92,108,255,0.5),
0 0 10px rgba(92,108,255,0.35);

border-radius:50% !important;
overflow:hidden;


/* stabilizza rendering */
transform:translate3d(0,0,0);
backface-visibility:hidden;

transform: translateZ(0);

/* evita repaint del contenuto */
contain:layout paint;

/* stabilizza rendering testo */
display:flex;
align-items:center; 
justify-content:center;

line-height:1;

font-smooth:always;
-webkit-font-smoothing:antialiased;

appearance:none;
-webkit-appearance:none;

/* elimina highlight mobile */
-webkit-tap-highlight-color: transparent;

/* elimina selezione */
user-select:none;

border:none;
outline:none;


margin-left:8px;

position:relative !important;
right:auto !important;
left:auto !important;
bottom:auto !important;
top:auto !important;




}


/* ==============================
   FIX BUTTON RENDER GLITCH
============================== */

.player-btn,
#playToggle
{
border-radius:50% !important;

/* forza rendering GPU */
transform:translateZ(0);
backface-visibility:hidden;
will-change:transform;

/* evita glitch */
overflow:hidden;
}


/* hover play */
#playToggle:hover
{
transform:scale(1.1);

box-shadow:
0 8px 28px rgba(92,108,255,0.6),
0 0 18px rgba(92,108,255,0.45);
}


#playToggle:active
{
outline:none;
border-radius:50% !important;

/* niente effetti nativi */
background-clip:padding-box;
}

button
{
-webkit-tap-highlight-color: transparent;
}

/* volume slider premium */
#volume
{
appearance:none;
height:4px;
border-radius:4px;

background:linear-gradient(to right,#5c6cff,#00e0ff);

outline:none;
cursor:pointer;
}

/* thumb */
#volume::-webkit-slider-thumb
{
appearance:none;

width:14px;
height:14px;
border-radius:50%;

background:#ffffff;

box-shadow:
0 0 6px rgba(0,224,255,0.6);

cursor:pointer;
}

/* ==============================
   PLAYER STATUS POSITION
============================== */

#status
{
font-size:11px;
opacity:.7;
color:#00e0ff;
margin-bottom:0;
display:inline-block;
line-height:1;
transition:opacity .3s ease;

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}




/* wave più compatta vicino al nome */
.player-info .wave
{
height:13px; /* spazio wave dal nome  */ 
gap:3px;
}

.player-info .wave span
{
width:3px;
}

/* ==============================
   WAVE SCALE FIX (override JS)
============================== */

.wave
{
transform: scaleY(0.6);  /* altezza wave */ 
transform-origin: bottom; 
}


/* ==============================
   PLAY ICON SVG SAFE
============================== */

.icon-play,
.icon-stop
{
display:block;
width:14px;
height:14px;
background:white;
clip-path:polygon(0 0, 100% 50%, 0 100%);
margin-left:2px;
}

/* STOP */
.icon-stop
{
clip-path:none;
width:12px;
height:12px;
}










/* ==============================
   PLAYER MOBILE REFINED
============================== */

@media (max-width:768px)
{

/* player più compatto */
#audio-player
{
height:70px;
padding:8px 10px;

flex-direction:row;
align-items:center;
justify-content:space-between;
}

/* LEFT */
.player-left
{
display:flex;
align-items:center;
gap:10px;
flex:1;
min-width:0;

overflow:hidden; /* 👈 evita che spinga fuori il play */
}

/* info */
.player-info
{
display:flex;
flex-direction:column;
justify-content:center;
min-width:0;
}

/* riga nome + wave PERFETTA */
.player-info > div
{
display:flex;
align-items:center;
gap:6px;
min-width:0;
}

/* nome radio */
#playerName
{
font-size:14px;
text-align:left;   /* 🔥 chiave */
}

/* wave compatta e allineata */
.player-info .wave
{
margin-top:0;
transform:scaleY(0.5);
}

/* STATUS più piccolo */
#status
{
font-size:10px;
margin-bottom:1px;
}

/* nascondi roba inutile */
#nowPlaying
{
display:none;
}

.player-right
{
display:none;
}

/* CENTER → play a destra */
.player-center
{
display:flex;
align-items:center;
justify-content:flex-end;

flex:0 0 auto; /* 👈 fondamentale */
}



/* FIX PLAY OVERLAY */
#playToggle
{
position:relative !important;
right:auto !important;
left:auto !important;
bottom:auto !important;
top:auto !important;
}

#playToggle
{
transform: translateZ(0);
}

}


#status.buffering{
    color:#00e0ff;
        animation:statusPulse 1.2s ease-in-out infinite;
    text-shadow:0 0 8px rgba(0,224,255,0.6);
}





@keyframes statusPulse{
    0%   { opacity:0.4; transform:scale(1); }
    50%  { opacity:1;   transform:scale(1.05); }
    100% { opacity:0.4; transform:scale(1); }
}