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

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

html,
body {

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #050505;

    color: white;

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


/* =====================================================
   APP
===================================================== */

#app {

    width: 100vw;
    height: 100vh;

    position: relative;

    overflow: hidden;

    background: #050505;
}


/* =====================================================
   BACKGROUND
===================================================== */

.background {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(0,0,0,0.72),
            rgba(0,0,0,0.72)
        ),

        url("DISCOBG.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    z-index: 1;
}


/* =====================================================
   GRAIN
===================================================== */

.background::after {

    content: "";

    position: absolute;

    inset: -50%;

    opacity: .10;

    background-image:

        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

    pointer-events: none;
}


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

.header {

    position: absolute;

    top: 25px;

    left: 28px;

    right: 28px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    z-index: 30;
}


/* =====================================================
   TOP LEFT LOGO
===================================================== */

.corner-logo {

    width: 190px;

    opacity: 0;

    transform:
        translateY(-10px);

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


.corner-logo.visible {

    opacity: 1;

    transform:
        translateY(0);
}


/* =====================================================
   TOP RIGHT
===================================================== */

.status {

    text-align: right;

    font-size: 9px;

    letter-spacing: 3px;

    line-height: 1.8;

    opacity: .45;
}


/* =====================================================
   LANDING
===================================================== */

.landing {

    position: absolute;

    inset: 0;

    z-index: 20;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition:
        opacity 1s ease;
}


.landing.hidden {

    opacity: 0;

    pointer-events: none;
}


/* =====================================================
   HERO LOGO
===================================================== */

.hero-logo {

    width:
        min(460px, 72vw);

    max-height: 45vh;

    object-fit: contain;

    animation:
        breathing 6s
        ease-in-out
        infinite;
}


@keyframes breathing {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }

}


/* =====================================================
   ENTER
===================================================== */

.enter {

    margin-top: 50px;

    background: transparent;

    border: none;

    color: white;

    cursor: pointer;

    font-size: 16px;

    letter-spacing: 4px;

    opacity: .70;

    transition:
        opacity .3s ease,
        letter-spacing .3s ease;
}


.enter:hover {

    opacity: 1;

    letter-spacing: 6px;
}


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

.radio {

    position: absolute;

    inset: 0;

    z-index: 10;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(15px);

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


.radio.active {

    opacity: 1;

    pointer-events: auto;

    transform:
        translateY(0);
}


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

.player {

    width:
        min(480px, 82vw);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


/* =====================================================
   ARTWORK
===================================================== */

.artwork {

    width:
        min(350px, 65vw);

    aspect-ratio: 1 / 1;

    object-fit: cover;

    background: rgba(255,255,255,.03);

    margin-bottom: 32px;

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.75);

    transition:
        transform 1s ease;
}


.artwork.playing {

    transform:
        scale(1.02);
}


/* =====================================================
   ON AIR
===================================================== */

.on-air {

    font-size: 9px;

    letter-spacing: 4px;

    opacity: .4;

    margin-bottom: 15px;
}


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

.song-title {

    font-size: 19px;

    margin-bottom: 8px;

    max-width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


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

.song-artist {

    font-size: 10px;

    letter-spacing: 2.5px;

    opacity: .5;

    max-width: 100%;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


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

.controls {

    width: 100%;

    margin-top: 35px;
}


/* =====================================================
   TIME
===================================================== */

.time {

    display: flex;

    justify-content: space-between;

    font-size: 8px;

    letter-spacing: 1px;

    opacity: .35;

    margin-bottom: 9px;
}


/* =====================================================
   PROGRESS
===================================================== */

.progress {

    width: 100%;

    height: 1px;

    background:
        rgba(255,255,255,.18);

    cursor: pointer;

    position: relative;

    margin-bottom: 28px;
}


.progress-fill {

    position: absolute;

    left: 0;

    top: 0;

    width: 0%;

    height: 100%;

    background: white;
}


/* =====================================================
   BUTTONS
===================================================== */

.player-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 32px;

    margin-top: 2px;
}


.player-button {

    border: none;

    background: transparent;

    color: white;

    padding: 0;

    cursor: pointer;

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

    font-size: 10px;

    letter-spacing: 3px;

    opacity: .55;

    transition:
        opacity .25s ease,
        letter-spacing .25s ease;
}


.player-button:hover {

    opacity: 1;

    letter-spacing: 4px;
}


.player-button.main {

    font-size: 14px;

    opacity: .9;
}


.player-button.main:hover {

    opacity: 1;
}


/* =====================================================
   VOLUME
===================================================== */

.volume {

    position: fixed;

    right: 28px;

    bottom: 27px;

    z-index: 30;

    display: flex;

    align-items: center;

    gap: 8px;

    opacity: .55;
}


.volume span {

    font-size: 8px;

    letter-spacing: 2px;
}


.volume input {

    width: 75px;

    accent-color: white;

    cursor: pointer;
}


/* =====================================================
   BOTTOM LEFT
===================================================== */

.bottom-left {

    position: fixed;

    left: 28px;

    bottom: 27px;

    z-index: 30;

    font-size: 8px;

    letter-spacing: 3px;

    opacity: .3;
}


/* =====================================================
   LOADING
===================================================== */

.loading {

    position: fixed;

    left: 50%;

    bottom: 70px;

    transform:
        translateX(-50%);

    z-index: 50;

    font-size: 8px;

    letter-spacing: 3px;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .3s ease;
}


.loading.show {

    opacity: .5;
}


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

@media(max-width:600px) {

    .header {

        top: 18px;

        left: 18px;

        right: 18px;
    }


    .corner-logo {

        width: 130px;
    }


    .hero-logo {

        width: 78vw;
    }


    .enter {

        margin-top: 38px;
    }


    .artwork {

        width: 74vw;

        margin-bottom: 26px;
    }


    .song-title {

        font-size: 16px;
    }


    .controls {

        margin-top: 27px;
    }


    .player-buttons {

        gap: 22px;
    }


    .player-button {

        font-size: 9px;

        letter-spacing: 2px;
    }


    .volume {

        right: 18px;

        bottom: 18px;
    }


    .bottom-left {

        left: 18px;

        bottom: 18px;
    }

}


/* VIX 94' — equal-size player controls */
.player-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.player-button,
.player-button.main {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 92px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 600px) {
    .player-buttons {
        gap: 8px;
    }

    .player-button,
    .player-button.main {
        width: 29vw !important;
        min-width: 0 !important;
        max-width: 92px !important;
        height: 40px !important;
        min-height: 40px !important;
        max-height: 40px !important;
        flex: 1 1 29vw !important;
    }
}


/* VIX 94' — ONLINE INDICATOR */
.online-status {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
    font-size: 8px;
    letter-spacing: 2px;
    line-height: 1;
    opacity: .7;
}

.online-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #555;
}

.online-dot.online-active {
    background: #32d66b;
    box-shadow: 0 0 8px rgba(50,214,107,.95);
}

/* VIX 94' — ALL THREE BUTTONS IDENTICAL */
.player-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
}

.player-button,
.player-button.main {
    width: 92px !important;
    min-width: 92px !important;
    max-width: 92px !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    flex: 0 0 92px !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

@media (max-width: 600px) {
    .player-buttons { gap: 8px !important; }
    .player-button,
    .player-button.main {
        width: calc((100% - 16px) / 3) !important;
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        height: 40px !important;
    }
}

/* FINAL VIX 94' ONLINE + BUTTON OVERRIDES */
.online-status {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:6px !important;
    margin-top:4px !important;
    font-size:8px !important;
    letter-spacing:2px !important;
}
.online-dot {
    display:inline-block !important;
    width:7px !important;
    height:7px !important;
    flex:0 0 7px !important;
    border-radius:50% !important;
    background:#555 !important;
}
.online-dot.online-active {
    background:#32d66b !important;
    box-shadow:0 0 8px rgba(50,214,107,.95) !important;
}
.player-buttons {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    width:100% !important;
}
.player-button,
.player-button.main {
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    flex:0 0 92px !important;
    box-sizing:border-box !important;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}
@media (max-width:600px) {
    .player-buttons { gap:8px !important; }
    .player-button,
    .player-button.main {
        width:calc((100% - 16px)/3) !important;
        min-width:0 !important;
        max-width:none !important;
        flex:1 1 0 !important;
        height:40px !important;
    }
}


/* =====================================================
   VIX 94' — FLASHING LIVE LISTENER LIGHT
   ===================================================== */

.online-status {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin-top: 4px !important;
    font-size: 8px !important;
    letter-spacing: 2px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.online-dot {
    display: inline-block !important;
    width: 7px !important;
    height: 7px !important;
    flex: 0 0 7px !important;
    border-radius: 50% !important;
    background: #555 !important;
    box-shadow: none !important;
}

.online-dot.online-active {
    background: #35d36b !important;
    box-shadow: 0 0 5px rgba(53,211,107,.85) !important;
    animation: vix94LivePulse 1.25s ease-in-out infinite !important;
}

@keyframes vix94LivePulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 4px rgba(53,211,107,.75);
    }
    50% {
        opacity: .35;
        transform: scale(.78);
        box-shadow: 0 0 12px rgba(53,211,107,1);
    }
}

/* FINAL LISTENER COUNTER DISPLAY */
.online-status {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
    margin-top: 4px !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8px !important;
    letter-spacing: 2px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    opacity: .72 !important;
}

.online-dot {
    width: 7px !important;
    height: 7px !important;
    min-width: 7px !important;
    border-radius: 50% !important;
    display: inline-block !important;
    background: #444 !important;
    box-shadow: none !important;
}

.online-dot.online-active {
    background: #32d66b !important;
    animation: vix94OnlineFlash 1s ease-in-out infinite !important;
}

@keyframes vix94OnlineFlash {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 3px rgba(50,214,107,.65);
    }
    50% {
        opacity: .25;
        box-shadow: 0 0 11px rgba(50,214,107,1);
    }
}

/* =====================================================
   VIX 94' — MOBILE BROWSER OPTIMIZATION
   ===================================================== */

/* Prevent mobile browsers from resizing text or creating horizontal overflow */
html {
    width: 100%;
    min-width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
}

body {
    width: 100%;
    min-width: 100%;
    height: 100%;
    min-height: 100dvh;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#app {
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    max-height: 100dvh;
    overflow: hidden;
    padding:
        env(safe-area-inset-top)
        env(safe-area-inset-right)
        env(safe-area-inset-bottom)
        env(safe-area-inset-left);
    box-sizing: border-box;
}

/* Keep the main layout centered without forcing desktop dimensions */
.container,
.wrapper,
.main,
.radio-container {
    max-width: 100%;
    box-sizing: border-box;
}

/* Prevent long metadata from breaking the layout */
.song-title,
.song-artist,
#songTitle,
#songArtist {
    max-width: 90vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Touch-friendly controls */
button,
input,
.player-button,
#enter,
#playButton,
#previousButton,
#nextButton {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Volume slider works naturally with a finger */
.volume input[type="range"] {
    min-width: 80px;
    height: 32px;
    cursor: pointer;
    touch-action: pan-x;
}

/* Phones */
@media screen and (max-width: 600px) {

    body {
        font-size: 14px;
    }

    #app {
        padding:
            max(10px, env(safe-area-inset-top))
            max(12px, env(safe-area-inset-right))
            max(12px, env(safe-area-inset-bottom))
            max(12px, env(safe-area-inset-left));
    }

    /* Logo */
    #logo,
    .logo,
    .site-logo {
        max-width: 70vw;
        height: auto;
    }

    /* Header/status */
    .status {
        font-size: 8px !important;
        letter-spacing: 2px !important;
    }

    .online-status {
        font-size: 7px !important;
        letter-spacing: 1.5px !important;
        gap: 5px !important;
    }

    .online-dot {
        width: 6px !important;
        height: 6px !important;
        min-width: 6px !important;
    }

    /* Player controls: three equal-width controls */
    .player-buttons {
        width: 100% !important;
        max-width: 360px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        gap: 7px !important;
    }

    .player-button,
    .player-button.main {
        width: calc((100% - 14px) / 3) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 42px !important;
        min-height: 42px !important;
        max-height: 42px !important;
        flex: 1 1 0 !important;
        font-size: 8px !important;
        letter-spacing: 1.2px !important;
        box-sizing: border-box !important;
    }

    /* Volume remains inside the player */
    .volume {
        position: relative !important;
        width: 100% !important;
        margin: 16px auto 0 !important;
        justify-content: center !important;
        gap: 7px !important;
    }

    .volume input[type="range"] {
        width: min(110px, 32vw) !important;
    }

    /* Enter button */
    #enter {
        min-width: 120px;
        min-height: 44px;
        padding: 10px 18px;
    }

    /* Artwork */
    #artwork,
    .artwork {
        max-width: 72vw;
        max-height: 34vh;
        width: auto;
        height: auto;
    }

    /* Prevent fixed desktop offsets from creating a clipped mobile page */
    .volume,
    .player-buttons,
    .controls {
        right: auto !important;
        left: auto !important;
    }
}

/* Very small phones */
@media screen and (max-width: 380px) {

    .player-buttons {
        gap: 5px !important;
    }

    .player-button,
    .player-button.main {
        height: 38px !important;
        min-height: 38px !important;
        font-size: 7px !important;
        letter-spacing: 1px !important;
    }

    .volume {
        margin-top: 12px !important;
    }

    #artwork,
    .artwork {
        max-width: 65vw;
        max-height: 30vh;
    }
}

/* Landscape phones */
@media screen and (max-width: 900px) and (orientation: landscape) {

    #app {
        padding-top: max(6px, env(safe-area-inset-top));
        padding-bottom: max(6px, env(safe-area-inset-bottom));
    }

    #artwork,
    .artwork {
        max-height: 34vh;
    }

    .player-button,
    .player-button.main {
        height: 36px !important;
        min-height: 36px !important;
    }

    .volume {
        margin-top: 8px !important;
    }
}

/* iOS Safari dynamic viewport fallback */
@supports (-webkit-touch-callout: none) {
    body,
    #app {
        min-height: -webkit-fill-available;
    }
}