html, body {
    margin: 0;
    width: 100%;
    height: var(--siren-vh, 100dvh);
    min-height: var(--siren-vh, 100dvh);
    max-height: var(--siren-vh, 100dvh);
    background: #050505;
    color: #f2f2f2;
    font-family: system-ui, sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    position: fixed;
    inset: 0;
}

:root {
    --siren-right-left: max(20vw, 9rem);
    --siren-right-width: calc(100vw - var(--siren-right-left));
    --siren-right-midpoint: calc(var(--siren-right-left) + (var(--siren-right-width) / 2));
}


#siren-app {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: var(--siren-vh, 100dvh);
    min-height: var(--siren-vh, 100dvh);
    max-height: var(--siren-vh, 100dvh);
    overflow: hidden;
}

@supports (height: 100svh) {
    html {
        --siren-vh: 100svh;
    }
}

#artist-panel {
    position: absolute;
    z-index: 4;
    top: 0;
    left: 0;
    bottom: 0;
    width: 20vw;
    min-width: 9rem;
    max-width: 20vw;
    box-sizing: border-box;
    padding: clamp(.55rem, 1.15vw, 1rem);
    background: rgba(16, 16, 16, .38);
    border-right: 1px solid rgba(255, 255, 255, .18);
    box-shadow: .35rem 0 1.25rem rgba(0, 0, 0, .18);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    backdrop-filter: blur(3px);
}

#artist-panel h1 {
    margin: 0 0 .5rem;
    font-size: clamp(1rem, 2.35vw, 1.35rem);
    line-height: 1.08;
}

.hint, .empty {
    color: #d0d0d0;
    font-size: clamp(.72rem, 1.45vw, .9rem);
    line-height: 1.28;
}

.artist-row {
    display: grid;
    gap: .4rem;
    padding: .65rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    font-size: clamp(.72rem, 1.45vw, .95rem);
}

.artist-toggles {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
}

button {
    cursor: pointer;
    border: 1px solid #555;
    background: rgba(29, 29, 29, .52);
    color: #fff;
    padding: .45rem .65rem;
    border-radius: .35rem;
    font: inherit;
}

button:hover { background: rgba(45, 45, 45, .68); }
button.active, button[aria-pressed="true"] {
    border-color: #e8e8e8;
    background: rgba(58, 58, 58, .70);
}

#stage {
    position: relative;
    overflow: hidden;
    min-width: 0;
    height: var(--siren-vh, 100dvh);
    min-height: var(--siren-vh, 100dvh);
    max-height: var(--siren-vh, 100dvh);
}

#siren-video {
    position: absolute;
    left: var(--siren-right-midpoint, 60vw);
    top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: none;
    max-height: none;
    image-rendering: auto;
}

#now-playing {
    position: absolute;
    z-index: 5;
    left: var(--siren-right-left, 20vw);
    right: auto;
    bottom: 0;
    transform: none;
    width: var(--siren-right-width, 80vw);
    max-width: var(--siren-right-width, 80vw);
    height: var(--siren-meta-height, calc(var(--siren-vh, 100dvh) / 3));
    max-height: var(--siren-meta-height, calc(var(--siren-vh, 100dvh) / 3));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--siren-meta-gap, .08em);
    padding: var(--siren-meta-pad-y, clamp(.18rem, .85vh, .5rem)) var(--siren-meta-pad-x, clamp(.35rem, 1.2vw, .8rem)) max(var(--siren-meta-pad-y, clamp(.18rem, .85vh, .5rem)), env(safe-area-inset-bottom));
    border-radius: .4rem .4rem 0 0;
    background: rgba(0,0,0,.42);
    text-align: center;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: var(--siren-meta-line-height, 1.08);
    font-size: var(--siren-meta-font-size, clamp(.62rem, 1.55vw, 1.05rem));
    font-variant-numeric: tabular-nums;
}

#now-playing .hud-row {
    max-width: 100%;
    min-width: 0;
    white-space: nowrap;
}

#now-playing .hud-title {
    font-weight: 700;
}

#playback-controls {
    position: absolute;
    z-index: 9;
    top: max(.75rem, env(safe-area-inset-top));
    right: auto;
    left: var(--siren-right-left, 20vw);
    width: var(--siren-right-width, 80vw);
    max-width: var(--siren-right-width, 80vw);
    max-height: calc(var(--siren-vh, 100dvh) * .1);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(4.5rem, 1fr) minmax(5.25rem, 1.15fr) clamp(3.4rem, 7vw, 4.75rem) minmax(5.25rem, 1.15fr);
    grid-auto-rows: minmax(0, max-content);
    gap: clamp(.18rem, calc(var(--siren-vh, 100dvh) * .0055), .35rem) clamp(.22rem, .6vw, .35rem);
    align-items: stretch;
    padding: clamp(.18rem, calc(var(--siren-vh, 100dvh) * .0055), .35rem);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: .45rem;
    background: rgba(0, 0, 0, .28);
    box-shadow: 0 .25rem .85rem rgba(0, 0, 0, .16);
    backdrop-filter: blur(3px);
    pointer-events: auto;
}

.control-row {
    display: contents;
}

.control-row button,
.control-row .control-percent {
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    font-size: clamp(.68rem, 1.45vw, 1rem);
    line-height: 1.05;
    padding: clamp(.22rem, calc(var(--siren-vh, 100dvh) * .0065), .45rem) clamp(.32rem, .85vw, .65rem);
}

.control-percent {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #444;
    border-radius: .35rem;
    background: rgba(17, 17, 17, .50);
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}


#siren-account-display {
    position: static;
    z-index: auto;
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: clamp(.18rem, calc(var(--siren-vh, 100dvh) * .0045), .32rem) clamp(.35rem, .75vw, .6rem);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: .35rem;
    background: rgba(0, 0, 0, .26);
    color: #f2f2f2;
    text-align: right;
    font-size: clamp(.68rem, 1.2vw, .95rem);
    line-height: 1.1;
    overflow-wrap: anywhere;
    backdrop-filter: blur(3px);
    pointer-events: none;
}

@media (max-width: 760px) {
    #artist-panel {
        min-width: 7.5rem;
    }

    #now-playing {
        left: var(--siren-right-left, 22vw);
        width: var(--siren-right-width, 78vw);
        max-width: var(--siren-right-width, 78vw);
    }

    #siren-account-display {
        font-size: .78rem;
    }

    #playback-controls {
        top: max(.5rem, env(safe-area-inset-top));
        left: var(--siren-right-left, 22vw);
        right: auto;
        width: var(--siren-right-width, 78vw);
        max-width: var(--siren-right-width, 78vw);
        grid-template-columns: minmax(3.75rem, 1fr) minmax(4.75rem, 1.1fr) clamp(3rem, 8vw, 4rem) minmax(4.75rem, 1.1fr);
    }
}

/* Siren complete rebuild control layout: toggle button immediately left of each control family. */
#playback-controls {
    grid-template-columns:
        minmax(4.25rem, .95fr)
        minmax(4.5rem, 1fr)
        minmax(5.25rem, 1.15fr)
        clamp(3.4rem, 7vw, 4.75rem)
        minmax(4.5rem, 1fr);
}

.control-row input[type="range"] {
    width: 100%;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
}

.control-row button,
.control-row input[type="range"],
.control-row .control-percent {
    align-self: stretch;
}

.toggle-control {
    font-weight: 700;
}

@media (max-width: 760px) {
    #playback-controls {
        grid-template-columns:
            minmax(3.4rem, .9fr)
            minmax(3.75rem, 1fr)
            minmax(4.75rem, 1.1fr)
            clamp(3rem, 8vw, 4rem)
            minmax(3.75rem, 1fr);
    }
}

@media (max-height: 520px) {
    #playback-controls {
        max-height: calc(var(--siren-vh, 100dvh) * .16);
    }
}