body{
box-sizing: border-box;
background: #E4EBF5;
}
.broadcast-container {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
padding: 1rem;
}

.popular-card {
display: flex;
align-items: center;
background-color: #E4EBF5;
border-radius: 16px;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
padding: 0.7rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.popular-card:hover {
transform: translateY(-4px);
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
}

.popular-card .cardimg {
overflow: hidden;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 14px;
margin-right: 1rem;
flex-shrink: 0;
border: 0px solid #FFF;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
}
.popular-card .cardimg a img.img_container {
width: 120px;
height: 120px;
object-fit: cover;
transition: 1s ease-in-out;
}
.popular-card .info {
flex: 1;
}

.game_title {
margin: 0 0 6px 0;
font-size: 0.85rem;
font-weight: bold;
color:#344A67;
}

.Loading, .listen{
margin: 0;
font-size: 0.75rem;
color:#344A67;
line-height: 1.5;
}

.play_button {
font-size: .9rem;
font-weight:700;
padding: 7px 20px;
margin: 5px 0;
max-width:90%;
text-align:center;
-webkit-appearance: none;
appearance: none;
background-color: #ff0081;
color: #fff;
border-radius: 4px;
border: none;
cursor: pointer;
position: relative;
transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5);
}

.play_button:hover {
transform: scale(1.03);
background-color:#FF3E9E;
}

.popular-card .cardimg a img.img_container:hover {
transform: scale(1.2);
filter: brightness(1.05) contrast(1.15) saturate(1.4) hue-rotate(-10deg);
/*filter: brightness(0.9) saturate(1.8);*/
}
.cast-button{
display:none;
margin-top: 10px;
text-align:center;
}