/* =========================
RESET
========================= */

*{
box-sizing:border-box;
}

html,body{
margin:0;
padding:0;
width:100%;
font-family:Arial,sans-serif;
background:linear-gradient(135deg,#0f172a,#1e293b);
color:#fff;
overflow-x:hidden;
}

/* =========================
HEADER
========================= */

.app-header{
padding:20px 15px;
text-align:center;
}

.app-header h1{
margin:0;
font-size:24px;
}

.app-header p{
margin-top:6px;
opacity:0.8;
font-size:13px;
}

/* =========================
LAYOUT
========================= */

.streams-container{
width:100%;
max-width:1100px;
margin:0 auto;
padding:20px;
padding-bottom:160px;
}

/* =========================
STREAM GRID
========================= */

#streams{
display:grid;
gap:30px;
justify-items:center;
}

@media (min-width:1024px){
#streams{
grid-template-columns:repeat(4,1fr);
}
}

@media (min-width:769px) and (max-width:1023px){
#streams{
grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:768px){
#streams{
grid-template-columns:repeat(2,1fr);
}
}

/* =========================
STREAM CARD
========================= */

.stream-card{
text-align:center;
cursor:pointer;
width:100%;
max-width:180px;
transition:transform .25s ease;
}

.stream-card:hover{
transform:translateY(-5px);
}

.stream-card img{
width:100px;
height:100px;
object-fit:cover;
border-radius:50%;
box-shadow:0 0 18px rgba(0,150,255,0.6);
transition:.3s;
display:block;
margin:0 auto;
}

/* actieve stream */

.stream-card.active img{
box-shadow:0 0 35px gold;
animation:playingGlow 2s infinite alternate;
}

@keyframes playingGlow{
0%{box-shadow:0 0 20px gold;}
100%{box-shadow:0 0 45px gold;}
}

.stream-card div{
margin-top:10px;
font-size:14px;
}

/* =========================
FOOTER
========================= */

.footer-rieksie{
position:fixed;
bottom:120px;
width:100%;
text-align:center;
font-size:12px;
opacity:0.7;
z-index:998;
}

/* =========================
PLAYER BAR
========================= */

.player-bar{
position:fixed;
bottom:0;
left:0;
width:100%;
padding:12px;
padding-bottom:calc(12px + env(safe-area-inset-bottom));
z-index:999;

background:rgba(0,0,0,0.85);
backdrop-filter:blur(12px);
border-top:1px solid rgba(255,255,255,0.08);
box-shadow:0 -3px 15px rgba(0,0,0,0.6);
}

.player-center{
max-width:1100px;
margin:0 auto;

display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:6px;
}

/* logo */

.player-logo{
width:60px;
height:60px;
border-radius:50%;
object-fit:cover;
}

/* info */

.player-info{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
}

#stationName{
margin:0;
font-size:18px;
color:#4ea8ff;
font-weight:bold;
}

.track-title{
font-size:13px;
opacity:0.8;
}

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

.controls{
display:flex;
align-items:center;
gap:12px;
margin-top:5px;
}

/* play knop */

.play-btn{
background:#1db954;
border:none;
color:#fff;

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

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

font-size:16px;
cursor:pointer;

transition:.2s;
}

.play-btn:hover{
transform:scale(1.1);
background:#1ed760;
}

/* =========================
VOLUME SLIDER
========================= */

#volumeSlider{
appearance:none;
width:90px;
height:4px;
background:#444;
border-radius:2px;
outline:none;
}

#volumeSlider::-webkit-slider-thumb{
appearance:none;
width:12px;
height:12px;
border-radius:50%;
background:#1db954;
cursor:pointer;
}

#volumeSlider::-moz-range-thumb{
width:12px;
height:12px;
border-radius:50%;
background:#1db954;
cursor:pointer;
border:none;
}

/* =========================
LIVE BADGE
========================= */

.live-badge{
display:inline-block;
font-size:12px;
font-weight:bold;
padding:4px 10px;
border-radius:20px;
background:#1e40af;
color:#fff;
}

/* LIVE STATUS */

.live-badge.live{
background:#16a34a;
animation:livePulse 1.2s infinite;
will-change:transform;
}

/* mobiele vriendelijke pulse animatie */

@keyframes livePulse{

0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(34,197,94,0.7);
}

50%{
transform:scale(1.08);
box-shadow:0 0 0 12px rgba(34,197,94,0);
}

100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(34,197,94,0);
}

}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

.streams-container{
padding-bottom:180px;
}

.footer-rieksie{
bottom:140px;
}

.player-logo{
width:50px;
height:50px;
}

.play-btn{
width:36px;
height:36px;
}

#volumeSlider{
width:80px;
}

}