/* Shared typography, including form controls and generated symbols. */
*, *::before, *::after {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* =========================================================
   637597 RADIO
   ========================================================= */


/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background: #f4f2ed;
}


/* ---------------------------------------------------------
   RADIO APP
   --------------------------------------------------------- */

#radio-app {
    --bg: #f4f2ed;
    --text: #171717;
    --muted: #8f8b80;
    --line: rgba(25, 25, 25, 0.10);
    --green: #7f9d54;

    width: 100%;
    min-height: 100vh;

    background: var(--bg);
    color: var(--text);

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

    overflow: hidden;
    position: relative;
}


/* ---------------------------------------------------------
   PAGE
   --------------------------------------------------------- */

.page {
    width: min(100%, 1440px);
    min-height: 100vh;

    margin: 0 auto;

    position: relative;

    padding: 56px 32px 48px;

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


/* ---------------------------------------------------------
   CENTER COLUMN
   --------------------------------------------------------- */

.center {
    width: min(100%, 520px);

    position: relative;
    z-index: 2;

    text-align: center;

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

    padding-top: 92px;
}


/* =========================================================
   RADIO SIGNAL / WAVES
   ========================================================= */

.signal-zone {
    position: absolute;

    top: 28px;
    left: 50%;

    width: 520px;
    height: 520px;

    transform: translateX(-50%);

    pointer-events: none;

    z-index: -1;

    opacity: 0;

    transition: opacity 1.2s ease;
}


/*
   Waves become visible only while radio is playing.
   radio.js adds the .active class.
*/

.signal-zone.active {
    opacity: 1;
}


/* ---------------------------------------------------------
   INDIVIDUAL WAVE
   --------------------------------------------------------- */

.wave {
    position: absolute;

    left: 50%;
    top: 92px;

    width: 94px;
    height: 94px;

    margin-left: -47px;
    margin-top: -47px;

    border: 1px solid var(--line);
    border-radius: 50%;

    opacity: 0;

    animation: wavePulse 7s linear infinite;
    animation-play-state: paused;
}


/*
   Start animation only when radio is playing.
*/

.signal-zone.active .wave {
    animation-play-state: running;
}


.wave:nth-child(2) {
    animation-delay: 1.75s;
}

.wave:nth-child(3) {
    animation-delay: 3.5s;
}

.wave:nth-child(4) {
    animation-delay: 5.25s;
}


/* ---------------------------------------------------------
   WAVE ANIMATION
   --------------------------------------------------------- */

@keyframes wavePulse {

    0% {
        transform: scale(0.8);
        opacity: 0;
    }

    15% {
        opacity: 0.5;
    }

    70% {
        opacity: 0.20;
    }

    100% {
        transform: scale(5.1);
        opacity: 0;
    }

}


/* =========================================================
   ANTENNA
   ========================================================= */

.antenna {
    width: 72px;
    height: 72px;

    margin-bottom: 8px;

    position: relative;
    z-index: 3;
}


/* =========================================================
   LIVE STATUS
   ========================================================= */

.live-label {
    font-size: 9px;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: 20px;
}


.live-dot {
    display: inline-block;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--green);

    margin-right: 7px;

    vertical-align: 1px;
}


/* =========================================================
   PLAY BUTTON
   ========================================================= */

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

    border-radius: 50%;

    border: 1px solid rgba(0, 0, 0, 0.08);

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

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.08);

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

    cursor: pointer;

    margin-bottom: 32px;

    padding: 0;

    color: var(--text);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}


.play-button:hover {
    transform: scale(1.05);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.11);
}


.play-button:active {
    transform: scale(0.97);
}


.play-icon {
    font-size: 18px;

    line-height: 1;

    margin-left: 2px;
}


/* =========================================================
   NOW PLAYING LABEL
   ========================================================= */

.now-label {
    font-size: 8px;

    letter-spacing: 0.24em;

    text-transform: uppercase;

    color: var(--muted);

    margin-bottom: 8px;
}


/* =========================================================
   TRACK TITLE
   ========================================================= */

.track-title {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 52px;

    font-weight: 400;

    line-height: 0.95;

    margin:
        0
        0
        8px;

    width: 100%;

    max-width: 520px;

    text-align: center;

    overflow-wrap: normal;
    word-break: normal;

    transition:
        font-size 0.45s ease,
        line-height 0.45s ease,
        opacity 0.9s ease;
}


/*
   radio.js selects one of these classes
   depending on title length.
*/


/* 19–30 characters */

.track-title.title-medium {
    font-size: 44px;
}


/* 31–45 characters */

.track-title.title-long {
    font-size: 36px;

    line-height: 0.98;
}


/* More than 45 characters */

.track-title.title-very-long {
    font-size: 30px;

    line-height: 1;
}


/* =========================================================
   ARTIST
   ========================================================= */

.artist {
    font-size: 16px;

    margin-bottom: 4px;

    transition: opacity 0.9s ease;
}


/* =========================================================
   ALBUM / STATUS
   ========================================================= */

.album {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-size: 12px;

    color: var(--muted);

    margin-bottom: 30px;

    transition: opacity 0.9s ease;
}


/* =========================================================
   COVER
   ========================================================= */

.cover {
    width: 250px;

    aspect-ratio: 1;

    border-radius: 14px;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,

            #111 0 10%,
            #555 10% 16%,
            #111 16% 26%,
            #ddd 26% 33%,
            #333 33% 40%,
            #fafafa 40% 47%,
            #111 47% 60%,
            #555 60% 66%,
            #f3f3f3 66% 73%,
            #111 73% 100%
        );

    box-shadow:
        0 16px 30px rgba(0, 0, 0, 0.12);

    opacity: 1;

    transform: scale(1);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}


.track-title.is-track-changing,
.artist.is-track-changing,
.album.is-track-changing {
    opacity: 0;

    transition-duration: 0.6s;
}


.cover.is-track-changing {
    opacity: 0;

    transform: scale(0.985);

    transition-duration: 0.6s;
}


/* =========================================================
   STATISTICS
   ========================================================= */

.stats {
    width: 100%;
    max-width: 430px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 24px;
    margin-top: 24px;
}

.stat {
    min-width: 0;
}

.stat:first-child {
    text-align: left;
}

.stat:last-child {
    text-align: right;
}

.stat-center {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 10px;
}

.center-slogan {
    font-size: 7px;
    line-height: 1.45;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    color: var(--muted);
    white-space: nowrap;
}

.stat-label {
    font-size: 7px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
}

.stat:last-child .stat-label {
    white-space: nowrap;
}

.stat-value {
    font-size: 25px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 980px) {

    .page {
        width: 100%;

        padding:
            40px
            24px
            40px;
    }


    .center {
        padding-top: 74px;
    }


    .signal-zone {
        width: 460px;
        height: 460px;
    }


    .wave {
        top: 80px;
    }


    .track-title {
        font-size: 46px;
    }


    .track-title.title-medium {
        font-size: 40px;
    }


    .track-title.title-long {
        font-size: 34px;
    }


    .track-title.title-very-long {
        font-size: 28px;
    }


    .cover {
        width: 230px;
    }


    .side-info {
        display: none;
    }

}


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

@media (max-width: 640px) {

    #radio-app {
        min-height: 100dvh;
    }


    .page {
        min-height: 100dvh;

        padding:
            22px
            18px
            30px;
    }


    .center {
        width: 100%;

        max-width: 360px;

        padding-top: 42px;
    }


    /* -----------------------------------------------------
       MOBILE SIGNAL
       ----------------------------------------------------- */

    .signal-zone {
        width: 350px;
        height: 350px;

        top: 14px;
    }


    .wave {
        top: 60px;

        width: 78px;
        height: 78px;

        margin-left: -39px;
        margin-top: -39px;
    }


    /* -----------------------------------------------------
       MOBILE ANTENNA
       ----------------------------------------------------- */

    .antenna {
        width: 60px;
        height: 60px;
    }


    /* -----------------------------------------------------
       MOBILE LIVE LABEL
       ----------------------------------------------------- */

    .live-label {
        font-size: 8px;

        margin-bottom: 16px;
    }


    /* -----------------------------------------------------
       MOBILE PLAY BUTTON
       ----------------------------------------------------- */

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

        margin-bottom: 24px;
    }


    /* -----------------------------------------------------
       MOBILE TRACK TITLE
       ----------------------------------------------------- */

    .track-title {
        font-size: 38px;

        max-width: 340px;
    }


    .track-title.title-medium {
        font-size: 34px;
    }


    .track-title.title-long {
        font-size: 29px;
    }


    .track-title.title-very-long {
        font-size: 25px;

        line-height: 1.02;
    }


    /* -----------------------------------------------------
       MOBILE ARTIST
       ----------------------------------------------------- */

    .artist {
        font-size: 15px;
    }


    /* -----------------------------------------------------
       MOBILE ALBUM
       ----------------------------------------------------- */

    .album {
        font-size: 11px;

        margin-bottom: 24px;
    }


    /* -----------------------------------------------------
       MOBILE COVER
       ----------------------------------------------------- */

    .cover {
        width:
            min(
                74vw,
                245px
            );
    }


    /* -----------------------------------------------------
       MOBILE STATS
       ----------------------------------------------------- */

    .stats {
        max-width: 300px;

        gap: 24px;

        margin-top: 20px;
    }


    .stat-label {
        font-size: 6px;
    }


    .stat-value {
        font-size: 22px;
    }

}


/* =========================================================
   NEXT TRACK TIMER VISIBILITY
   ========================================================= */

#nextTrack {
    opacity: 0;

    transform: translateY(6px);

    filter: blur(2px);

    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        filter 0.5s ease;
}


/* Timer is visible only while radio is playing */

#nextTrack.timer-visible {
    opacity: 1;

    transform: translateY(0);

    filter: blur(0);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1280px) {

    .page {
        padding-top: 64px;
    }


    .center {
        width: min(100%, 640px);

        padding-top: 110px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP SIGNAL
       ----------------------------------------------------- */

    .signal-zone {
        width: 620px;
        height: 620px;

        top: 0;
    }


    /*
       Antenna center:
       110px center padding +
       approximately 40px to antenna transmitter point.
    */

    .wave {
        top: 150px;

        width: 108px;
        height: 108px;

        margin-left: -54px;
        margin-top: -54px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP ANTENNA
       ----------------------------------------------------- */

    .antenna {
        width: 84px;
        height: 84px;

        margin-bottom: 10px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP LIVE
       ----------------------------------------------------- */

    .live-label {
        font-size: 10px;

        margin-bottom: 22px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP PLAY
       ----------------------------------------------------- */

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

        margin-bottom: 36px;
    }


    .play-icon {
        font-size: 20px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP NOW PLAYING
       ----------------------------------------------------- */

    .now-label {
        font-size: 9px;

        margin-bottom: 10px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP TITLE
       ----------------------------------------------------- */

    .track-title {
        max-width: 640px;

        font-size: 62px;

        line-height: 0.95;

        margin-bottom: 10px;
    }


    .track-title.title-medium {
        font-size: 54px;
    }


    .track-title.title-long {
        font-size: 44px;
    }


    .track-title.title-very-long {
        font-size: 36px;

        line-height: 1;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP ARTIST
       ----------------------------------------------------- */

    .artist {
        font-size: 18px;

        margin-bottom: 5px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP ALBUM
       ----------------------------------------------------- */

    .album {
        font-size: 14px;

        margin-bottom: 34px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP COVER
       ----------------------------------------------------- */

    .cover {
        width: 320px;

        border-radius: 16px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP STATS
       ----------------------------------------------------- */

    .stats {
        max-width: 520px;

        gap: 54px;

        margin-top: 28px;
    }


    .stat-label {
        font-size: 8px;
    }


    .stat-value {
        font-size: 30px;
    }


    /* -----------------------------------------------------
       LARGE DESKTOP SIDE INFO
       ----------------------------------------------------- */

    .side-info {
        left: 56px;

        top: 460px;

        font-size: 12px;
    }

}


/* =========================================================
   EXTRA LARGE DESKTOP
   ========================================================= */

@media (min-width: 1800px) {

    .center {
        width: min(100%, 720px);

        padding-top: 125px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE SIGNAL
       ----------------------------------------------------- */

    .signal-zone {
        width: 700px;
        height: 700px;

        top: 0;
    }


    /*
       Antenna center:
       125px center padding +
       approximately 44px to transmitter point.
    */

    .wave {
        top: 169px;

        width: 118px;
        height: 118px;

        margin-left: -59px;
        margin-top: -59px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE ANTENNA
       ----------------------------------------------------- */

    .antenna {
        width: 92px;
        height: 92px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE PLAY
       ----------------------------------------------------- */

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

        margin-bottom: 40px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE TITLE
       ----------------------------------------------------- */

    .track-title {
        max-width: 720px;

        font-size: 68px;
    }


    .track-title.title-medium {
        font-size: 58px;
    }


    .track-title.title-long {
        font-size: 48px;
    }


    .track-title.title-very-long {
        font-size: 39px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE ARTIST
       ----------------------------------------------------- */

    .artist {
        font-size: 20px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE ALBUM
       ----------------------------------------------------- */

    .album {
        font-size: 15px;

        margin-bottom: 38px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE COVER
       ----------------------------------------------------- */

    .cover {
        width: 350px;
    }


    /* -----------------------------------------------------
       EXTRA LARGE STATS
       ----------------------------------------------------- */

    .stats {
        max-width: 570px;

        gap: 64px;
    }


    .stat-value {
        font-size: 32px;
    }

}


/* =========================================================
   THREE-COLUMN STATS — MOBILE BALANCE
   ========================================================= */
@media (max-width: 640px) {
    .stats {
        max-width: 340px;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 14px;
        margin-top: 20px;
        align-items: end;
    }

    .stat {
        min-width: 0;
    }

    .stat:first-child {
        text-align: left;
    }

    .stat:last-child {
        text-align: right;
    }

    .stat-label {
        font-size: 5.5px;
        letter-spacing: 0.10em;
        line-height: 1.25;
        margin-bottom: 6px;
    }

    .stat:last-child .stat-label {
        white-space: nowrap;
    }

    .stat-value {
        font-size: 22px;
    }

    .stat-center {
        padding: 0 6px;
        align-self: end;
    }

    .center-slogan {
        font-size: 6px;
        line-height: 1.45;
        letter-spacing: 0.14em;
        white-space: nowrap;
    }
}

@media (max-width: 360px) {
    .stats {
        gap: 10px;
    }

    .stat-label {
        font-size: 5px;
        letter-spacing: 0.07em;
    }

    .center-slogan {
        font-size: 5.5px;
        letter-spacing: 0.10em;
    }
}


/* =========================================================
   PLAY / PAUSE ICON — PLATFORM-INDEPENDENT
   ========================================================= */

/* Hide the text glyph so iOS cannot render ▶ as a blue emoji button. */
.play-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
    margin-left: 0;
    font-size: 0;
    line-height: 0;
}

/* Shared pseudo-elements for CSS-drawn controls. */
.play-icon::before,
.play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* PLAY triangle */
.play-button[aria-pressed="false"] .play-icon::before {
    left: 5px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid currentColor;
}

.play-button[aria-pressed="false"] .play-icon::after {
    display: none;
}

/* PAUSE bars */
.play-button[aria-pressed="true"] .play-icon::before,
.play-button[aria-pressed="true"] .play-icon::after {
    width: 3px;
    height: 12px;
    background: currentColor;
}

.play-button[aria-pressed="true"] .play-icon::before {
    left: 4px;
}

.play-button[aria-pressed="true"] .play-icon::after {
    right: 4px;
}

/* Desktop/tablet: widen the outer columns equally, keeping the slogan centered. */
@media (min-width: 641px) {
    .stats {
        max-width: 510px;
    }

    .stats > .stat:last-child {
        justify-self: stretch;
        text-align: right;
    }
}

@media (min-width: 1280px) {
    .stats {
        max-width: 600px;
    }
}

@media (min-width: 1800px) {
    .stats {
        max-width: 650px;
    }
}

/* Keep both slots in normal flow: only metadata pixels move, never stats. */
.track-metadata {
    --metadata-no-cover-lift: 90px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
    transform: translateY(0);
    transition: transform 0.85s ease;
}
#radio-app.no-cover .track-metadata {
    transform: translateY(var(--metadata-cover-offset, 0px));
}
#radio-app .cover {
    background: transparent;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.85s ease, transform 0.85s ease;
}
#radio-app.has-cover .cover { opacity: 1; }
/* Loading retains the existing cover until its replacement is decoded. */
#radio-app .cover-outgoing {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
    #radio-app *, #radio-app *::before, #radio-app *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Optical centering within the free space above stats. */
@media (max-width: 980px) {
    .track-metadata { --metadata-no-cover-lift: 65px; }
}
@media (max-width: 640px) {
    .track-metadata { --metadata-no-cover-lift: 40px; }
}
/* =========================================================
   PRIVACY PAGE
   ========================================================= */

.privacy-page {
    --privacy-bg: #f4f2ed;
    --privacy-text: #171717;
    --privacy-muted: #8f8b80;
    --privacy-line: rgba(25, 25, 25, 0.10);

    margin: 0;
    background: var(--privacy-bg);
    color: var(--privacy-text);
}

.privacy {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 72px 32px 64px;
}

.privacy-header {
    margin-bottom: 72px;
}

.privacy-back {
    display: inline-block;

    margin-bottom: 72px;

    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;

    color: var(--privacy-muted);
}

.privacy-back:hover {
    color: var(--privacy-text);
}

.privacy-kicker {
    margin: 0 0 18px;

    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;

    color: var(--privacy-muted);
}

.privacy h1 {
    margin: 0 0 18px;

    font-size: 56px;
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.03em;
}

.privacy-updated {
    margin: 0;

    font-size: 11px;
    color: var(--privacy-muted);
}

.privacy-section {
    padding: 32px 0;

    border-top: 1px solid var(--privacy-line);
}

.privacy-section h2 {
    margin: 0 0 18px;

    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.privacy-section p {
    max-width: 680px;

    margin: 0 0 16px;

    font-size: 15px;
    line-height: 1.65;
}

.privacy-section p:last-child {
    margin-bottom: 0;
}

.privacy-section a,
.privacy-footer a {
    color: var(--privacy-text);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.privacy-section a:hover,
.privacy-footer a:hover {
    opacity: 0.6;
}

.privacy-footer {
    padding: 40px 0 0;

    border-top: 1px solid var(--privacy-line);
}

.privacy-footer a {
    font-size: 9px;
    letter-spacing: 0.20em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   PRIVACY — MOBILE
   --------------------------------------------------------- */

@media (max-width: 640px) {

    .privacy {
        padding:
            36px
            20px
            44px;
    }

    .privacy-header {
        margin-bottom: 52px;
    }

    .privacy-back {
        margin-bottom: 52px;
    }

    .privacy h1 {
        font-size: 44px;
    }

    .privacy-section {
        padding: 26px 0;
    }

    .privacy-section p {
        font-size: 14px;
        line-height: 1.65;
    }

}
/* =========================================================
   PRIVACY LINK
   ========================================================= */

.privacy-link {
    position: absolute;
    right: 24px;
    bottom: 20px;
    z-index: 10;

    font-size: 8px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;

    color: #8f8b80;

    transition: opacity 0.25s ease;
}

.privacy-link:hover {
    opacity: 0.55;
}

.privacy-link:focus-visible {
    outline: 1px solid #171717;
    outline-offset: 4px;
}

@media (max-width: 640px) {
    .privacy-link {
        right: 18px;
        bottom: 14px;
        font-size: 7px;
    }
}
/* Optional track video; retain the cover underneath as fallback. */
#cover { position: relative; }
#trackVideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    background: #000;
    opacity: 0;
    pointer-events: none;
}
#radio-app.has-video .cover { opacity: 1; }
#radio-app.has-video #trackVideo { opacity: 1; }
#radio-app.has-video .track-metadata { transform: translateY(0); }

/* =========================================================
   PUBLIC AIR STATUS
   ========================================================= */

.play-button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}


/* Long unbroken tag values must fit the viewport without altering their text. */
#radio-app .track-title,
#radio-app .artist,
#radio-app .album {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

/* TEMP inline notice: no border, background, or animation. */
.temp-notice {
    color: #77746d;
    font-size: 9px;
    line-height: 1.6;
    letter-spacing: .06em;
    text-align: center;
    margin: -14px 0 16px;
    max-width: 100%;
}
.temp-notice[hidden] { display: none; }
.temp-notice-detail { font-size: 8px; letter-spacing: .025em; }

/* Compact Minimal: visual-only, scoped to the One-Click player. */
#radio-app .center > .temp-notice {
    display: flex;
    align-items: center;
    gap: 9px;
    position: relative;
    flex: none;
    width: max-content;
    max-width: 100%;
    padding: 4px 12px;
    margin: 0 0 20px;
    color: #575752;
    font-size: 9px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}
#radio-app .center > .temp-notice[hidden] { display: none; }
#radio-app .center > .temp-notice::before,
#radio-app .center > .temp-notice::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 28px;
    transform: translateY(-50%);
    width: 4px;
    border-top: 1px solid #77746d;
    border-bottom: 1px solid #77746d;
}
#radio-app .center > .temp-notice::before { left: 0; border-left: 1px solid #77746d; }
#radio-app .center > .temp-notice::after { right: 0; border-right: 1px solid #77746d; }
#radio-app .center > .temp-notice .temp-notice-icon {
    width: 18px;
    height: 18px;
    flex: none;
    color: #ff6248;
}
#radio-app .center > .temp-notice .temp-notice-detail {
    margin-top: 2px;
    font-size: 8px;
    letter-spacing: .02em;
}
#radio-app .center > .play-button:has(+ .temp-notice:not([hidden])) { margin-bottom: 20px; }
@media (max-width: 640px) {
    #radio-app .center > .temp-notice {
        gap: 7px;
        padding: 3px 10px;
        margin-bottom: 16px;
        font-size: 8px;
    }
    #radio-app .center > .temp-notice::before,
    #radio-app .center > .temp-notice::after { height: 25px; }
    #radio-app .center > .temp-notice .temp-notice-icon { width: 16px; height: 16px; }
    #radio-app .center > .temp-notice .temp-notice-detail { font-size: 7px; }
    #radio-app .center > .play-button:has(+ .temp-notice:not([hidden])) { margin-bottom: 16px; }
}

/* Clip only while TEMP height is animating; expanded dimensions stay unchanged. */
#radio-app .center > .temp-notice { overflow: hidden; }