*{margin:0;padding:0;box-sizing:border-box}

body{
    font-family:Arial,Helvetica,sans-serif;
    background:radial-gradient(circle at top,#102a66 0%,#050814 45%,#000 100%);
    color:#fff;
    min-height:100vh;
}

.container{
    max-width:1100px;
    margin:auto;
    padding:40px 20px;
}

.radio-box{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#090909,#1b1b1b);
    border:3px solid #7a0202;
    border-radius:25px;
    padding:35px;
    box-shadow:0 0 30px rgba(178,34,34,.35);
}

.radio-box::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:url("../../images/american-flag-1.jpg");
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    opacity:.40;
    filter:sepia(.35) contrast(1.15);
    pointer-events:none;
    z-index:0;
}

.radio-box>*{position:relative;z-index:1}

.live-badge{
    width:max-content;
    margin:0 auto 14px;
    padding:8px 15px;
    border:1px solid #b22222;
    border-radius:999px;
    background:rgba(0,0,0,.78);
    color:#fff;
    font-size:13px;
    font-weight:bold;
    letter-spacing:1px;
}

.live-badge span{
    display:inline-block;
    width:9px;
    height:9px;
    margin-right:7px;
    border-radius:50%;
    background:#e30000;
    box-shadow:0 0 12px #e30000;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{50%{opacity:.35}}

.station-title{
    text-align:center;
    color:#b22222;
    font-size:48px;
    line-height:1.05;
    text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
}

.station-subtitle{
    text-align:center;
    margin-top:8px;
    font-size:18px;
    font-weight:bold;
    letter-spacing:.7px;
}

.now-playing{
    margin:22px auto 10px;
    max-width:700px;
    padding:14px;
    text-align:center;
    background:#020202;
    border:1px solid #315f91;
    border-radius:12px;
    color:#70a9e0;
    font-size:18px;
    font-weight:bold;
}

.song-title{
    text-align:center;
    font-size:26px;
    font-weight:bold;
    margin:20px auto 6px;
    max-width:850px;
    min-height:35px;
    line-height:1.25;
    text-shadow:0 2px 5px #000;
}

.play-time{text-align:center;font-size:17px;font-weight:bold;margin-top:8px}

.progress-wrap{
    max-width:700px;
    height:10px;
    margin:14px auto 0;
    overflow:hidden;
    border:1px solid #333;
    border-radius:999px;
    background:#080808;
}

.progress-bar{
    width:0;
    height:100%;
    background:#8d1111;
    transition:width .4s linear;
}

.play-area{text-align:center;padding:26px 0 15px}

.play-btn{
    width:160px;
    height:160px;
    border-radius:50%;
    border:4px solid #7a0202;
    background:#111;
    color:#b22222;
    font-size:50px;
    cursor:pointer;
    box-shadow:0 0 30px rgba(178,34,34,.35);
    transition:.25s;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.play-btn:hover,.mute-btn:hover,.sync-btn:hover{transform:scale(1.04)}

.pause-icon{display:flex;gap:13px}
.pause-icon span{
    display:block;
    width:17px;
    height:58px;
    background:#b22222;
    border-radius:4px;
}

.secondary-controls{margin-top:16px}

.mute-btn,.sync-btn{
    padding:14px 24px;
    border-radius:40px;
    background:#050505;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:.25s;
    margin:6px;
}

.mute-btn{border:2px solid #315f91;color:#70a9e0}
.sync-btn{border:2px solid #7a0202;color:#d24a4a}

.next-card,.recently-played{
    margin:20px auto 0;
    max-width:850px;
    background:rgba(5,5,5,.92);
    border:2px solid #7a0202;
    border-radius:15px;
    padding:18px;
}

.next-card{text-align:center;font-size:18px;font-weight:bold}
.small-label,.current-label{color:#70a9e0;font-size:13px;font-weight:bold;margin-bottom:6px}

.recent-title{
    color:#b22222;
    font-size:24px;
    text-align:center;
    margin-bottom:12px;
}

.current-card{
    background:linear-gradient(145deg,#201600,#050505);
    border:2px solid #7a0202;
    border-radius:14px;
    padding:15px;
    margin-bottom:15px;
}

.current-song{color:#d74b4b;font-size:20px;font-weight:bold;line-height:1.3}
.current-time{font-size:14px;margin-top:6px}
.recent-list{max-height:300px;overflow-y:auto;padding-right:8px}
.recent-item{padding:11px 10px;border-bottom:1px solid #333;font-size:15px;line-height:1.4}
.recent-item:last-child{border-bottom:0}
.recent-song{font-weight:bold}
.recent-time{color:#d24a4a;font-size:13px;margin-top:4px}

.hidden-youtube{
    width:1px;height:1px;overflow:hidden;opacity:0;
    position:absolute;left:-9999px;top:-9999px;pointer-events:none;
}

footer{text-align:center;padding:30px;color:#999}

@media(max-width:600px){
    .container{width:100%;padding:12px}
    .radio-box{padding:20px 14px;border-radius:18px;border-width:2px}
    .station-title{font-size:34px}
    .station-subtitle{font-size:15px}
    .now-playing{font-size:15px}
    .song-title{font-size:20px}
    .play-btn{width:128px;height:128px;font-size:42px}
    .pause-icon span{width:14px;height:48px}
    .mute-btn,.sync-btn{width:100%;max-width:330px;margin:6px auto;display:block}
    .recently-played,.next-card{padding:14px}
}