:root{
    --bg-1:#0a0a0f;
    --bg-2:#15131a;
    --text-primary:#f5f5f7;
    --text-secondary:rgba(245,245,247,0.62);
    --text-tertiary:rgba(245,245,247,0.4);
    --glass-fill:rgba(255,255,255,0.06);
    --glass-border:rgba(255,255,255,0.13);
    --accent-onair:#ff5a5f;
    --accent-signal:#2dd4bf;
    --ambient-a:#7a2d3d;
    --ambient-b:#1f3a4d;
    --radius-card:28px;
    --font-display:"Space Grotesk",system-ui,sans-serif;
    --font-body:"Inter",system-ui,sans-serif;
    --font-mono:"JetBrains Mono",monospace;
}

*{box-sizing:border-box;}

body{
    margin:0;
    min-height:100vh;
    background:radial-gradient(ellipse at top,var(--bg-2),var(--bg-1) 60%);
    color:var(--text-primary);
    font-family:var(--font-body);
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    transition:padding-bottom 0.25s ease;
}

.ambient{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
}
.ambient-blob{
    position:absolute;
    width:60vmax;
    height:60vmax;
    border-radius:50%;
    filter:blur(90px);
    opacity:0.45;
    transition:background 1.2s ease;
    will-change:transform;
}
.ambient-blob-a{
    background:var(--ambient-a);
    top:-20vmax;
    left:-15vmax;
    animation:drift-a 26s ease-in-out infinite;
}
.ambient-blob-b{
    background:var(--ambient-b);
    bottom:-25vmax;
    right:-15vmax;
    animation:drift-b 30s ease-in-out infinite;
}
@keyframes drift-a{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(6vmax,4vmax);}
}
@keyframes drift-b{
    0%,100%{transform:translate(0,0);}
    50%{transform:translate(-5vmax,-6vmax);}
}
@media (prefers-reduced-motion: reduce){
    .ambient-blob{animation:none;}
}

.site-header{
    position:relative;
    z-index:1;
    padding:24px clamp(20px,5vw,48px);
}
.brand{
    font-family:var(--font-display);
    font-weight:600;
    font-size:18px;
    letter-spacing:0.01em;
}
.brand-accent{color:var(--accent-onair);}

.hero{
    position:relative;
    z-index:1;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px 20px 48px;
}

.glass{
    background:var(--glass-fill);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
}

.player-card{
    width:100%;
    max-width:360px;
    border-radius:var(--radius-card);
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,0.5);
}

.art-wrap{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    background:linear-gradient(160deg,#3a1f2a,#1a2230);
    outline:none;
}
.hidden-controls{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    background:rgba(8,8,12,0.42);
    backdrop-filter:blur(3px) saturate(120%);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.25s ease;
}
.art-wrap:hover .hidden-controls,
.art-wrap:focus-within .hidden-controls,
.art-wrap.controls-visible .hidden-controls{
    opacity:1;
    pointer-events:auto;
}
@media (prefers-reduced-motion: reduce){
    .hidden-controls{transition:none;}
}
.cover-art{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:0;
    transition:opacity 0.5s ease;
}
.cover-art.is-loaded{opacity:1;}
.art-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(0,0,0,0) 55%,rgba(15,13,18,0.92) 96%);
}

.visualizer{
    position:absolute;
    left:18px;
    right:18px;
    bottom:14px;
    height:30px;
    display:flex;
    align-items:flex-end;
    gap:3px;
    pointer-events:none;
}
.visualizer-bar{
    flex:1;
    min-height:3px;
    height:3px;
    border-radius:2px;
    background:linear-gradient(to top,var(--accent-signal),var(--accent-onair));
    opacity:0.85;
}

.onair-badge{
    position:absolute;
    top:16px;
    left:16px;
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(10,10,15,0.55);
    backdrop-filter:blur(8px);
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:500;
    letter-spacing:0.04em;
    color:var(--text-secondary);
}
.onair-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--text-tertiary);
}
.onair-badge.is-live{color:#ffd7d8;}
.onair-badge.is-live .onair-dot{
    background:var(--accent-onair);
    box-shadow:0 0 8px var(--accent-onair);
    animation:pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot{
    0%,100%{opacity:1;transform:scale(1);}
    50%{opacity:0.5;transform:scale(0.8);}
}
@media (prefers-reduced-motion: reduce){
    .onair-badge.is-live .onair-dot{animation:none;}
}

.listeners-badge{
    position:absolute;
    top:16px;
    right:16px;
    display:flex;
    align-items:center;
    gap:5px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(10,10,15,0.55);
    backdrop-filter:blur(8px);
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--text-secondary);
}

.now-playing{
    padding:20px 24px 26px;
    text-align:center;
}

.track-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:clamp(19px,5vw,22px);
    margin:0 0 4px;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.track-artist{
    font-size:14px;
    color:var(--text-secondary);
    margin:0 0 20px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.progress-row{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}
.mono{font-family:var(--font-mono);}
.time{
    font-size:11px;
    color:var(--text-tertiary);
    min-width:34px;
}
#time-duration{text-align:right;}
.progress-track{
    flex:1;
    height:4px;
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    overflow:hidden;
}
.progress-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg,var(--accent-signal),var(--accent-onair));
    border-radius:999px;
    transition:width 0.6s linear;
}
.progress-track.is-indeterminate .progress-fill{
    width:35% !important;
    transition:none;
    animation:indeterminate-slide 1.6s ease-in-out infinite;
}
@keyframes indeterminate-slide{
    0%{margin-left:-35%;}
    100%{margin-left:100%;}
}
@media (prefers-reduced-motion: reduce){
    .progress-track.is-indeterminate .progress-fill{animation:none;width:100% !important;opacity:0.35;}
}

.ctrl-btn{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--glass-border);
    background:rgba(255,255,255,0.04);
    color:var(--text-secondary);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background 0.2s ease,color 0.2s ease;
}
.ctrl-btn:hover{
    background:rgba(255,255,255,0.09);
    color:var(--text-primary);
}
.ctrl-btn .icon svg{display:block;width:18px;height:18px;}

.quality-btn{width:auto;padding:0 14px;font-size:11px;letter-spacing:0.03em;}

.play-btn{
    width:64px;
    height:64px;
    border-radius:50%;
    border:none;
    background:var(--text-primary);
    color:var(--bg-1);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
    transition:transform 0.15s ease;
}
.play-btn:hover{transform:scale(1.04);}
.play-btn:active{transform:scale(0.97);}
.play-btn .icon svg{display:block;width:24px;height:24px;}
.play-btn.is-loading{opacity:0.7;cursor:wait;}

.volume-control{position:relative;}

.volume-popup{
    position:absolute;
    bottom:calc(100% + 14px);
    left:50%;
    transform:translateX(-50%);
    width:130px;
    padding:12px 14px;
    border-radius:999px;
    background:rgba(20,18,24,0.94);
    border:1px solid var(--glass-border);
    backdrop-filter:blur(16px);
    box-shadow:0 12px 28px rgba(0,0,0,0.45);
    z-index:5;
}
.volume-popup::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:rgba(20,18,24,0.94);
}
.volume-popup input[type=range]{
    width:100%;
    display:block;
    accent-color:var(--accent-signal);
}

.stream-toast{
    min-height:16px;
    margin:14px 0 0;
    font-size:12px;
    color:var(--accent-signal);
}

.marquee-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:50;
    display:flex;
    align-items:stretch;
    background:rgba(10,9,13,0.88);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    border-top:1px solid var(--glass-border);
    box-shadow:0 -8px 24px rgba(0,0,0,0.3);
}
.marquee-label{
    flex-shrink:0;
    display:flex;
    align-items:center;
    background:var(--accent-onair);
    color:#fff;
    font-family:var(--font-mono);
    font-weight:600;
    font-size:11px;
    letter-spacing:0.06em;
    padding:0 14px;
}
.marquee-track-wrap{
    flex:1;
    overflow:hidden;
    display:flex;
    align-items:center;
    padding:10px 0;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
}
.marquee-track{
    display:flex;
    width:max-content;
    gap:48px;
    white-space:nowrap;
    font-size:13px;
    color:var(--text-secondary);
    animation:marquee-scroll linear infinite;
    padding-left:24px;
}
@keyframes marquee-scroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;overflow-x:auto;}
}

body.has-marquee{padding-bottom:40px;}
@supports (padding: env(safe-area-inset-bottom)){
    body.has-marquee{padding-bottom:calc(40px + env(safe-area-inset-bottom));}
}

.site-footer{
    position:relative;
    z-index:1;
    text-align:center;
    padding:8px 20px 28px;
    font-size:12px;
    color:var(--text-tertiary);
}

@media (max-width:380px){
    .player-card{max-width:100%;}
    .now-playing{padding:18px 18px 22px;}
}