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

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;

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

    padding: 20px;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #000000;
}


/* =========================================================
   PLAYER SHELL
   ========================================================= */

.rsw-player {
    width: 100%;
    max-width: 700px;

    overflow: hidden;

    border-radius: 18px;
}


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

.rsw-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        14px
        18px;
}

.live-status {
    display: flex;
    align-items: center;

    gap: 8px;

    font-size: 0.84rem;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.status-dot {
    width: 10px;
    height: 10px;

    border-radius: 50%;
}

.station-label {
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.13em;
}


/* =========================================================
   NOW PLAYING AREA
   ========================================================= */

.now-playing {
    padding:
        30px
        24px
        26px;

    text-align: center;
}

.station-logo {
    display: block;

    height: auto;
    max-width: 100%;

    margin:
        0
        auto
        18px;

    object-fit: contain;
}


/* Wide / banner-style station logos */

.station-logo-wide {
    width: 92%;
}


/* Square / compact station logos */

.station-logo-square {
    width: 180px;
    max-width: 40%;
}

.now-playing-label {
    margin-bottom: 14px;

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.18em;
}

.artist-name {
    margin-bottom: 10px;

    font-family:
        "Arial Black",
        Impact,
        sans-serif;

    font-size:
        clamp(
            1.45rem,
            5vw,
            2.25rem
        );

    line-height: 1.15;
}


/* =========================================================
   SONG TITLE
   ========================================================= */

.song-title-window {
    position: relative;

    width: 100%;
    max-width: 620px;
    height: 34px;

    margin: 0 auto;

    overflow: hidden;

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

.song-title {
    display: block;

    width: max-content;
    max-width: none;

    font-size:
        clamp(
            1rem,
            3vw,
            1.3rem
        );

    line-height: 34px;

    white-space: nowrap;
}

.song-title.is-scrolling {
    position: absolute;

    left: 0;

    animation:
        title-scroll
        var(--scroll-duration, 12s)
        linear
        infinite;
}

@keyframes title-scroll {

    from {
        transform:
            translateX(
                var(--scroll-start)
            );
    }

    to {
        transform:
            translateX(
                var(--scroll-end)
            );
    }

}


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

.player-controls {
    display: flex;
    align-items: center;

    gap: 18px;

    margin:
        0
        18px
        20px;

    padding: 18px;

    border-radius: 14px;
}

.play-button {
    flex: 0 0 auto;

    width: 68px;
    height: 68px;

    border-radius: 50%;

    font-size: 1.6rem;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        filter 0.15s ease;
}

.play-button:hover,
.play-button:focus {
    transform: scale(1.04);
    filter: brightness(1.12);
}

.control-info {
    flex: 1;

    min-width: 0;
}

.play-state {
    margin-bottom: 13px;

    font-size: 0.76rem;
    font-weight: 900;

    letter-spacing: 0.12em;
}

.volume-control {
    display: flex;
    align-items: center;

    gap: 10px;
}

.volume-icon {
    flex: 0 0 auto;

    font-size: 1rem;
}

.volume-control input {
    flex: 1;

    min-width: 60px;
}

.volume-value {
    min-width: 42px;

    font-size: 0.82rem;
    text-align: right;
}


/* =========================================================
   FOOTER / RSW BRANDING
   ========================================================= */

.rsw-footer {
    padding:
        14px
        18px
        17px;

    text-align: center;
}

.powered-by {
    font-size: 0.84rem;
}

.mission {
    margin-top: 4px;

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

/* =========================================================
   EMBED PANEL
   ========================================================= */

.embed-panel {
    width: 100%;
    max-width: 700px;

    margin-top: 18px;
    padding: 18px;

    border-radius: 14px;
}

.embed-title {
    margin-bottom: 10px;

    font-size: 0.78rem;
    font-weight: 900;

    letter-spacing: 0.14em;
    text-align: center;
}

.embed-description {
    margin-bottom: 12px;

    font-size: 0.85rem;
    line-height: 1.5;
    text-align: center;
}

.embed-row {
    display: flex;
    align-items: stretch;

    gap: 10px;
}

.embed-code {
    flex: 1;

    min-width: 0;
    height: 82px;

    padding: 10px 12px;

    resize: none;

    border-radius: 8px;

    font-family:
        Consolas,
        "Courier New",
        monospace;

    font-size: 0.78rem;
    line-height: 1.4;
}

.copy-embed-button {
    flex: 0 0 auto;

    min-width: 92px;

    padding:
        10px
        16px;

    border-radius: 8px;

    font-size: 0.78rem;
    font-weight: 900;

    letter-spacing: 0.08em;

    cursor: pointer;
}


/*
 * Do not show the embed instructions when the
 * player itself is being displayed inside an iframe.
 */
html.is-embedded .embed-panel {
    display: none;
}

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

@media (max-width: 500px) {

    body {
        padding: 8px;
    }

    .rsw-player {
        border-radius: 14px;
    }

    .rsw-player-header {
        padding:
            12px
            14px;
    }

    .now-playing {
        padding:
            24px
            15px
            22px;
    }

.station-logo-wide {
    width: 96%;
}

.station-logo-square {
    width: 140px;
    max-width: 42%;
}

    .player-controls {
        margin:
            0
            10px
            14px;

        padding: 14px;

        gap: 12px;
    }

    .play-button {
        width: 58px;
        height: 58px;

        font-size: 1.35rem;
    }

    .song-title-window {
        max-width: 100%;
    }

}