:root {
    --yellow: #f5d93a;
    --soft-yellow: #FEEDB5;
    --dark-blue: #121341;
    --maroon: #6F0642;
    --pink: #F43692;
    --light-text: #FEEDB5;
    --dark-text: #0F131C;
}

body {

    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--soft-yellow);
    color: var(--dark-text);

}

.container {

    width: min(950px, 95%);
    margin: 40px auto;
    background: white;
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

header {

    text-align: center;
    padding-bottom: 20px;
    border-bottom: 3px solid var(--yellow);

}

header h1 {
    color: var(--dark-blue);
    font-size:2.6rem;
    margin-bottom:10px;

}

#station-mode {

    color:var(--maroon);
    font-weight:bold;
    font-size:1.1rem; 
}

.now-playing {

    display: flex;
    gap: 35px;
    align-items: center;
    margin-top: 35px;
    padding:25px;
    background:var(--soft-yellow);
    border-radius:14px;
}

.artwork img {

    width: 220px;
    height: 220px;
    object-fit: cover;
    border-radius: 14px;
    border:4px solid var(--dark-blue);
    box-shadow: 0 10px 25px rgba(0,0,0,.25);

}

.song {

    flex: 1;

}

.song h2{

    color:var(--dark-blue);

    font-size:2rem;

    margin:0;

}

.song h3{

    color:var(--maroon);

    margin-top:10px;

    font-weight:normal;

}

#track-time{

    margin-top:20px;

    font-size:1.1rem;

    color:#444;

}

.player{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-top:35px;
    flex-wrap: wrap;

}
.player button {

    padding: 15px 40px;

    font-size: 20px;

}

.station {
    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-top:35px;
}

.station > div{

    background:white;

    border-left:6px solid var(--pink);

    padding:18px;

    border-radius:10px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);

}

.history {

    margin-top: 45px;

}

.history h2{

    color:var(--dark-blue);

}

.history ul{

    list-style:none;

    padding:0;

    margin:0;

}

.history li{

    padding:14px 18px;

    margin-bottom:10px;

    background: var(--soft-yellow);

    border-left: 5px solid var(--yellow);

    border-radius:8px;

    box-shadow:
        0 2px 8px rgba(0,0,0,.08);

}

.station strong {
    display: block;
    color: var(--dark-blue);
    margin-bottom: 6px;
}

.station span {
    color: var(--maroon);
    font-size: 1.1rem;
}

footer{

    margin-top:50px;

    padding-top:25px;

    border-top:2px solid #ddd;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:25px;

}

footer a{

    color:var(--dark-blue);

    text-decoration:none;

    font-weight:bold;

}

footer a:hover{

    color:var(--pink);

}

.station-indicator {
    position: relative;
    display: inline-block;

    width: 16px;
    height: 16px;

    border-radius: 50%;

    margin-right: 8px;

    vertical-align: middle;

    box-shadow:
        inset 2px 2px 3px rgba(255, 255, 255, 0.55),
        inset -2px -2px 4px rgba(0, 0, 0, 0.25),
        0 0 6px rgba(0, 0, 0, 0.25);
}


/* Glossy highlight */
.station-indicator::after {
    content: "";

    position: absolute;

    top: 2px;
    left: 3px;

    width: 5px;
    height: 4px;

    border-radius: 50%;

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

    filter: blur(0.5px);
}


/* Automation */
.station-indicator.automation {
    background: radial-gradient(
        circle at 35% 30%,
        #ffffff 0%,
        #7cff8a 12%,
        #22c55e 45%,
        #15803d 100%
    );

    box-shadow:
        inset 2px 2px 3px rgba(255, 255, 255, 0.55),
        inset -2px -2px 4px rgba(0, 0, 0, 0.3),
        0 0 8px rgba(34, 197, 94, 0.65);
}


/* Live */
.station-indicator.live {
    background: radial-gradient(
        circle at 35% 30%,
        #ffffff 0%,
        #ff8585 12%,
        #ef4444 45%,
        #991b1b 100%
    );

    box-shadow:
        inset 2px 2px 3px rgba(255, 255, 255, 0.55),
        inset -2px -2px 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(239, 68, 68, 0.75);

    animation: livePulse 1.8s ease-in-out infinite;
}


@keyframes livePulse {

    0%,
    100% {
        box-shadow:
            inset 2px 2px 3px rgba(255, 255, 255, 0.55),
            inset -2px -2px 4px rgba(0, 0, 0, 0.3),
            0 0 7px rgba(239, 68, 68, 0.55);
    }

    50% {
        box-shadow:
            inset 2px 2px 3px rgba(255, 255, 255, 0.55),
            inset -2px -2px 4px rgba(0, 0, 0, 0.3),
            0 0 16px rgba(239, 68, 68, 0.95);
    }

}

.history-music,
.history-live,
.history-advertisement {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.history-time {
    opacity: 0.6;
    font-size: 0.85em;
    white-space: nowrap;
}

#listen-button{

    background:var(--pink);

    color:white;

    border:none;

    border-radius:8px;

    padding:15px 40px;

    font-size:20px;

    cursor:pointer;

    transition:.2s;

}

#listen-button:hover {
    background:var(--maroon);
    transform: translateY(-1px);
}


#listen-button.playing {
    border: 5px solid transparent;
    background:
        linear-gradient(var(--pink), var(--pink)) padding-box,
        conic-gradient(
            from var(--angle),
            #f43692,
            #f5d93a,
            #6f0642,
            #f43692
        ) border-box;
    animation: spin 2s linear infinite;
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin {
    from { --angle: 0deg; }
    to { --angle: 360deg; }
}


#player-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}


#volume-control {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}


#volume-slider {
    width: 250px;
    accent-color:var(--pink);
}


@media (max-width: 700px){

    .now-playing{

        flex-direction:column;

        text-align:center;

    }

    .player{

        flex-direction:column;

        align-items:stretch;

    }

    .station{

        grid-template-columns:1fr;

    }

    #volume-control{

        flex-direction:column;

    }

    #volume-slider{

        width:100%;

    }

}