/* ===== Custom Font ===== */
@font-face {
    font-family: "VaultFont";
    src: url("https://ShygxdDataBase.b-cdn.net/Fonts/Creepster-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --fontHead: "VaultFont", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --wfNavH: 55px;
    --bg: #000;
    --text: rgba(255,255,255,0.92);
    --muted: rgba(255,255,255,0.65);
    --accent: #c1fffd;
    --pill: 999px;
    --r-md: 18px;
    --bottomNavH: 56px;
    --playbarH: 62px;
    --npHeadH: 56px;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --pbPad: 18px;
    --arrowSize: 44px;
    --arrowGutter: 12px;
    --dockPad: 0px;
}

.vault h1, .vault h2, .vault h3,
.vp-hero-title, .vp-loader-title, .vp-np-title {
    font-family: var(--fontHead);
    color: var(--accent);
    letter-spacing: .1em;
}


/* ===== Base reset (prevents default body margins causing off-center gutters) ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

img {
    max-width: 100%;
    display: block;
}

button, input {
    font: inherit;
}

 /* ---------- Base ---------- */
* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    color: var(--text, rgba(255,255,255,0.92));
    background: radial-gradient(70rem 70rem at 50% -10%, rgba(193,255,253,0.10), transparent 60%), var(--bg, #000);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    overflow-x: hidden;
}

button, input {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

.vault, .vault-sections, .vault-section, .vault-section-inner {
    min-width: 0;
    max-width: 100%;
}

.vault-row {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

/* =========================================================
   Loader (Featured Hero)
========================================================= */
.vp-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    background: #000;
    transition: opacity 320ms ease;
    overflow-y: auto;
}

    .vp-loader.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

.vp-loader-inner {
    width: min(1100px,94vw);
    margin: 0 auto;
    display: grid;
    min-height: 100vh;
    align-content: center;
    justify-items: center;
    gap: 14px;
    padding: calc(18px + var(--safe-t)) 0 calc(16px + var(--safe-b));
}

.vp-loader-title {
    margin: 0;
    text-align: center;
    font-size: clamp(28px,4.2vw,44px);
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 0 0 12px 0;
}

.vp-loader-desc {
    margin: 2px 0 0;
    text-align: center;
    color: rgba(255,255,255,0.72);
    font-size: 14px;
    line-height: 1.5;
    max-width: 62ch;
}


.vp-hero {
    position: relative;
    width: min(1100px,94vw);
    aspect-ratio: 16/9;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.40);
    max-height: 56vh;
}

.vp-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    z-index: 0;
}

.vp-hero-grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(800px 520px at 220px 160px, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.28) 40%, rgba(0,0,0,0.00) 72%), linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.18) 100%);
}

.vp-hero-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px;
    padding-bottom: calc(22px + var(--safe-b));
    display: grid;
    gap: 10px;
    z-index: 2;
    width: 100%;
    justify-items: center;
    background: rgba(0,0,0,0.10);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 100%);
}

    .vp-hero-content::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -80px;
        height: 80px;
        pointer-events: none;
        background: linear-gradient(to bottom, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.30) 100%);
    }

.vp-hero-kicker {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(193,255,253,0.95);
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
}

.vp-hero-title {
    font-weight: 950;
    font-size: clamp(26px,3.4vw,44px);
    line-height: 1.05;
    text-shadow: 0 16px 60px rgba(0,0,0,0.65);
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
}

.vp-hero-meta {
    color: rgba(255,255,255,0.70);
    font-size: 14px;
    max-width: 64ch;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
}

.vault-enter-btn {
    margin-top: 6px;
    width: fit-content;
    padding: 14px 26px;
    border-radius: var(--pill);
    border: 1px solid rgba(193,255,253,0.35);
    background: rgba(193,255,253,0.16);
    box-shadow: 0 10px 28px rgba(0,0,0,0.45);
    border-color: rgba(193,255,253,0.55);
    text-shadow: 0 2px 18px rgba(0,0,0,0.55);
    font-weight: 900;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

    .vault-enter-btn:active {
        transform: scale(0.98);
    }

/* =========================================================
   Main Layout
========================================================= */
.vault {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 18px calc(18px + var(--safe-b) + var(--bottomNavH) + var(--playbarH));
}

.vault-header {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.vault-title {
    margin: 0 0 6px;
    font-size: clamp(26px,3vw,40px);
    font-weight: 950;
    letter-spacing: 0.01em;
}

.vault-subtitle {
    margin-top: -2px;
    color: var(--muted);
    font-size: 13px;
}

.vault-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
}

.vault-search {
    width: min(520px,100%);
    height: 44px;
    padding: 0 14px;
    border-radius: var(--pill);
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    outline: none;
}

    .vault-search::placeholder {
        color: rgba(255,255,255,0.45);
    }

/* =========================================================
   Playbar (fixed, above bottom nav)
========================================================= */
.vp-playbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--bottomNavH);
    height: var(--playbarH);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10,12,12,0.88);
    border-top: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: bottom 220ms ease;
}

/* IMPORTANT:
   DO NOT absolute-center vp-pb-center.
   Absolute centering here is what breaks/steals space from vp-pb-side. */
/* side buttons pinned to edges of the playbar (your rule preserved) */
.vp-pb-btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    background: transparent;
    padding: 10px;
    margin: 0;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 140ms ease, opacity 140ms ease;
}

    .vp-pb-btn:active {
        transform: scale(0.98);
        opacity: 0.90;
    }


    .vp-pb-btn:disabled,
    .vp-pb-btn[aria-disabled="true"] {
        opacity: 0.35;
        cursor: not-allowed;
        transform: none !important;
        filter: none !important;
    }

        .vp-pb-btn:disabled svg,
        .vp-pb-btn[aria-disabled="true"] svg {
            stroke: rgba(255,255,255,0.45);
        }

    /* icon styling (DO NOT TOUCH) */
    .vp-pb-btn svg {
        width: 26px;
        height: 26px;
        stroke: rgba(255,255,255,0.95);
        fill: none;
        stroke-width: 1.5px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.vp-pb-play svg {
    width: 30px;
    height: 30px;
}

.vp-ico-pause {
    display: none;
    stroke-width: 0;
}

.vp-playbar.is-playing .vp-ico-play {
    display: none;
}

.vp-playbar.is-playing .vp-ico-pause {
    display: block;
    stroke-width: 1.5px;
}

/* =========================================================
   Bottom Nav
========================================================= */
.vault-nav {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    bottom: 0;
    height: var(--bottomNavH);
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 0 14px;
    padding-bottom: var(--safe-b);
    background: rgba(14,16,16,0.86);
    border-top: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transition: transform 220ms ease, opacity 220ms ease;
    overflow-y: hidden;
    overscroll-behavior: contain;
    touch-action: pan-x;
    white-space: nowrap;
}

    .vault-nav::-webkit-scrollbar {
        display: none;
    }

.vault-nav-link {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 10px 8px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.72);
    position: relative;
    white-space: nowrap;
}

    .vault-nav-link:active {
        transform: translateY(1px);
    }

    .vault-nav-link.is-active {
        color: rgba(193,255,253,0.98);
    }

        .vault-nav-link.is-active::after {
            content: "";
            position: absolute;
            left: 8px;
            right: 8px;
            bottom: 6px;
            height: 2px;
            border-radius: 999px;
            background: rgba(193,255,253,0.85);
        }

/* =========================================================
   Sections + rails
========================================================= */
.vault-sections {
    display: grid;
    gap: 22px;
    margin-top: 6px;
}

.vault-section {
    position: relative;
    overflow: visible;
}

.vault-section-inner {
    position: relative;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
    --railInset: calc(var(--arrowSize) + var(--arrowGutter));
    overflow-x: clip;
}

.vault-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.vault-section-title {
    font-size: 22px;
    font-weight: 950;
    margin: 0;
}

.vault-section-sub {
    font-size: 12px;
    color: var(--muted);
}

.vault-row {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    padding: 2px var(--railInset) 10px;
    scroll-padding-left: var(--railInset);
    scroll-padding-right: var(--railInset);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.35) rgba(255,255,255,0.10);
}

    .vault-row::-webkit-scrollbar {
        height: 8px;
    }

    .vault-row::-webkit-scrollbar-track {
        background: rgba(255,255,255,0.10);
        border-radius: 999px;
    }

    .vault-row::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,0.35);
        border-radius: 999px;
    }

        .vault-row::-webkit-scrollbar-thumb:active {
            background: rgba(193,255,253,0.55);
        }

.vault-card {
    flex: 0 0 auto;
    width: clamp(220px,22vw,260px);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--r-md);
    overflow: hidden;
    scroll-snap-align: start;
}

    .vault-card:active {
        transform: scale(0.995);
    }

.vault-card-art {
    width: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    display: block;
    background: rgba(255,255,255,0.06);
}

.vault-card-body {
    padding: 10px 10px 12px;
    display: grid;
    gap: 6px;
}

.vault-card-title {
    font-weight: 950;
    font-size: 14px;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rail arrows */
.rail-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(10,10,10,0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text, rgba(255,255,255,0.92));
    cursor: pointer;
    z-index: 5;
    transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
    touch-action: manipulation;
}

.rail-arrow--left {
    left: 8px;
}

.rail-arrow--right {
    right: 8px;
}

@media (hover:hover) {
    .rail-arrow {
        opacity: 0;
    }

    .vault-section:hover .rail-arrow {
        opacity: 1;
    }

    .rail-arrow:hover {
        background: rgba(193,255,253,0.18);
        transform: translateY(-50%) scale(1.05);
    }
}

@media (max-width:767px) {
    .rail-arrow {
        width: 48px;
        height: 48px;
        opacity: 1 !important;
    }
}

/* Full Catalog grid */
.vault-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, minmax(0,1fr));
}

    .vault-grid .vault-card {
        width: 100% !important;
        flex: none !important;
    }

@media (max-width:1024px) {
    .vault-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

@media (max-width:767px) {
    .vault-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 10px;
    }
}

/* =========================================================
   Intro animation states
========================================================= */
.vp-loader-title,
.vp-loader-desc,
#vpHeroCard,
#vpNewRow .vp-mini-card {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 420ms ease, transform 420ms ease;
    will-change: opacity, transform;
}

    .vp-loader-title.is-intro-center {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: center;
        margin: 0;
        pointer-events: none;
        z-index: 3;
        transform: translateY(10px);
    }

        /* Loader paragraph follows the title into the centered intro state */
        .vp-loader-title.is-intro-center + .vp-loader-desc {
            position: fixed;
            left: 50%;
            top: 50%;
            width: min(62ch, 92vw);
            margin: 0;
            pointer-events: none;
            z-index: 3;
            text-align: center;
            /* sit under the title */
            transform: translate(-50%, calc(-50% + 44px));
        }

    /* Fade-in state */
    .vp-loader-desc.is-on {
        opacity: 1;
        transform: translateY(0);
    }

    /* When title is centered, keep paragraph anchored under it (avoid transform override) */
    .vp-loader-title.is-intro-center + .vp-loader-desc.is-on {
        transform: translate(-50%, calc(-50% + 44px));
    }

    /* When intro completes, hide the paragraph too */
    .vp-loader-desc.is-done {
        display: none !important;
    }


    .vp-loader-title.is-on,
    .vp-loader-desc.is-on,
    #vpHeroCard.is-on,
    #vpNewRow .vp-mini-card.is-on {
        opacity: 1;
        transform: translateY(0);
    }

    .vp-loader-title.is-done {
        display: none !important;
    }

@media (prefers-reduced-motion:reduce) {
    .vp-loader-title,
    .vp-loader-desc,
    #vpHeroCard,
    #vpNewRow .vp-mini-card {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}



/* Kill hover on touch */
@media (hover:none),(pointer:coarse) {
    *:hover {
        box-shadow: none !important;
    }

    .vault-card:hover,
    .rail-arrow:hover,
    .vault-nav-link:hover {
        background: inherit !important;
        box-shadow: none !important;
        transform: none !important;
        filter: none !important;
    }
}

/* Desktop/Laptop gutters (your “wider” tuning) */
@media (min-width:1024px) {

    .vault {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        padding-left: clamp(25px, 2.2vw, 44px);
        padding-right: clamp(25px, 2.2vw, 44px);
        padding-top: clamp(25px, 2.2vw, 44px);
        padding-bottom: calc(clamp(25px, 2.2vw, 44px) + var(--bottomNavH) + var(--playbarH) + var(--safe-b));
    }

    .vp-loader-inner,
    .vp-hero {
        width: min(1200px, 96vw);
    }
}

/* =========================================================
   Now Playing Overlay
========================================================= */
.vp-np {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: none;
}

    .vp-np.is-open {
        display: block;
    }

.vp-np-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.72);
    z-index: 0;
}

.vp-np-panel {
    position: absolute;
    inset: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    z-index: 1;
    transform: translateY(10px);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
    padding-top: var(--wfNavH);
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.vp-np.is-open .vp-np-panel {
    transform: translateY(0);
    opacity: 1;
}

.vp-np-head {
    height: var(--npHeadH);
    padding: 0 18px;
    display: grid;
    grid-template-columns: 56px 1fr 56px;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.92);
}

.vp-np-headTitle {
    text-align: center;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 13px;
    text-transform: uppercase;
    opacity: 0.95;
}

.vp-np-btn {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.92);
    padding: 10px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

    .vp-np-btn svg {
        width: 22px;
        height: 22px;
        stroke: rgba(255,255,255,0.95);
        fill: none;
        stroke-width: 1.5px;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

/* NP body: center stack with FLEX (no grid) */
.vp-np-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center; /* center children horizontally */
    justify-content: center; /* center whole stack vertically */
    gap: 16px;
    padding: 0 18px;
    text-align: center;
    overflow: hidden; /* prevents any growth spill */
}

/* Track block centered */
.vp-np-track {
    width: min(680px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vp-np-trackTitle {
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0.01em;
    opacity: 0.95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-np-trackMeta {
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 0.04em;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Canvas: responsive width, FIXED height (no height:auto) */
.vp-scope {
    width: 100%;
    height: 240px; /* pick your vibe */
    flex: 0 0 auto; /* don't grow/shrink */
    display: block;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

@media (min-width:768px) {
    .vp-scope {
        height: 220px;
    }
}

/* NP open state: nav fades down, playbar drops to bottom */
body.np-open .vault-nav {
    transform: translateY(18px);
    opacity: 0;
    pointer-events: none;
}

body.np-open .vp-playbar {
    bottom: 0;
}

/* Mobile: stop sticky “tap transforms” */
@media (hover:none) and (pointer:coarse) {
    .vp-pb-btn,
    .vault-nav-link,
    .vp-np-btn,
    .rail-arrow,
    .vp-drawer-close,
    .vp-drawer-item {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

        .vp-pb-btn:active,
        .vault-nav-link:active,
        .vp-np-btn:active,
        .rail-arrow:active,
        .vp-drawer-close:active,
        .vp-drawer-item:active,
        .vp-pb-btn:focus,
        .vault-nav-link:focus,
        .vp-np-btn:focus,
        .rail-arrow:focus,
        .vp-drawer-close:focus,
        .vp-drawer-item:focus,
        .vp-pb-btn:focus-visible,
        .vault-nav-link:focus-visible,
        .vp-np-btn:focus-visible,
        .rail-arrow:focus-visible,
        .vp-drawer-close:focus-visible,
        .vp-drawer-item:focus-visible {
            transform: none !important;
            opacity: 1 !important;
            filter: none !important;
            outline: none !important;
        }
}

/* =========================================================
   Drawer (Bottom Sheet)
========================================================= */
.vp-drawer {
    position: fixed;
    inset: 0;
    z-index: 5000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

    .vp-drawer.is-open {
        opacity: 1;
        pointer-events: auto;
    }

.vp-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 0;
}

.vp-drawer-panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    height: calc(100vh - var(--safe-t) - var(--npHeadH));
    max-height: calc(100vh - var(--safe-t) - var(--npHeadH));
    background: rgba(10,10,10,0.98);
    border-top: 1px solid rgba(255,255,255,0.08);
    transform: translateY(12px);
    transition: transform 180ms ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.vp-drawer.is-open .vp-drawer-panel {
    transform: translateY(0);
}

.vp-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
}

.vp-drawer-title {
    font-size: 14px;
    letter-spacing: 0.02em;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-drawer-close {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    line-height: 1;
    padding: 6px 8px;
    cursor: pointer;
}

.vp-drawer-body {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.vp-drawer-list {
    padding: 8px 0;
}

.vp-drawer-section {
    padding: 10px 14px 6px;
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.vp-drawer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid rgba(255,255,255,0.06);
    user-select: none;
}

    .vp-drawer-item:first-child {
        border-top: 0;
    }

    .vp-drawer-item.is-current {
        background: rgba(255,255,255,0.06);
    }

.vp-drawer-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
    flex: 0 0 auto;
}

.vp-drawer-item.is-current .vp-drawer-dot {
    background: rgba(193,255,253,0.95);
}

.vp-drawer-name {
    font-size: 14px;
    opacity: 0.92;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vp-np-trackTitle,
.vp-np-trackMeta {
    width: min(680px, 100%);
}

/* =========================================================
   Playbar centering (clean + stable)
   - Centers transport group without absolute positioning
   - Does NOT modify your .vp-pb-side rule
========================================================= */
/* Transport: true center is the PLAY slot */
/* Make buttons fill their slot so center is real */
.vp-pb-center .vp-pb-btn {
    width: 56px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
}

/* --- Now Playing header: true center (equal left/right) --- */
/* left + right buttons live in fixed slots */
.vp-np-head .vp-np-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
}

    .vp-np-head .vp-np-btn:first-child {
        grid-column: 1;
        justify-self: start;
    }

    .vp-np-head .vp-np-btn:last-child {
        grid-column: 3;
        justify-self: end;
    }

.vp-np-trackTitle,
.vp-np-trackMeta {
    width: min(680px, 100%);
}

/* =========================================================
   iOS/Webflow FIXED BAR HARDENING + SAFE AREA
   - Fixes iOS swipe-bar collision without inflating bar heights
   - Helps override Webflow collisions where fixed layers appear "unstyled/unfixed"
========================================================= */

/* Make sure these stay fixed even if Webflow injects conflicting styles */
#vpPlaybar, .vault-nav, #vpNowPlaying, #vpDrawer {
    position: fixed !important;
}

/* Bottom nav: include safe-area in its total height */
.vault-nav {
    height: calc(var(--bottomNavH) + var(--safe-b));
    padding-bottom: var(--safe-b);
}

/* Playbar sits above bottom nav + safe-area */
.vp-playbar {
    padding: 0;
    bottom: calc(var(--bottomNavH) + var(--safe-b));
    height: var(--playbarH);
}

/* NP open: playbar drops to bottom but still respects safe-area */
body.np-open .vp-playbar {
    bottom: var(--safe-b);
}

/* Restore playbar gutters and make side buttons respect them */
/* Prevent 100vw drift (can visually de-center on iOS) */
.vp-playbar, .vault-nav, .vp-np, .vp-np-panel, .vp-drawer, .vp-drawer-panel {
    width: auto;
    max-width: 100%;
    left: 0;
    right: 0;
}
/* When NP is open, push the whole NP overlay down */
.vp-np {
    top: var(--wfNavH);
    height: calc(100vh - var(--wfNavH));
}

/* Keep panel/backdrop aligned with the shifted vp-np box */
.vp-np-backdrop,
.vp-np-panel {
    top: 0;
    bottom: 0;
}


/* =========================================================
   Playbar layout (canonical)
   - Side buttons respect --pbPad
   - Transport group centered with equal slots
   - Does NOT change your svg styling
========================================================= */
.vp-pb-center .vp-pb-btn {
    width: 56px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
}

/* side buttons pinned to edges of the playbar (your rule preserved) */


/* --- Playbar scrubber (fixed at top of playbar) --- */
.vp-scrub {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 12px;
    padding: 0 var(--pbPad);
    z-index: 6;
    display: flex;
    align-items: center;
    pointer-events: none; /* only the input should capture */
}

.vp-scrub-track {
    position: absolute;
    left: var(--pbPad);
    right: var(--pbPad);
    height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.14);
    overflow: hidden;
}

.vp-scrub-fill {
    width: 0%;
    height: 100%;
    border-radius: 999px;
    background: rgba(193,255,253,0.85);
}

.vp-scrub-input {
    position: absolute;
    left: var(--pbPad);
    right: var(--pbPad);
    width: calc(100% - (var(--pbPad) * 2));
    height: 12px;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    touch-action: none;
}

    .vp-scrub-input::-webkit-slider-runnable-track {
        height: 4px;
        background: transparent;
    }

    .vp-scrub-input::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.55);
        background: rgba(0,0,0,0.35);
        margin-top: -4px; /* centers on 4px track */
    }

    .vp-scrub-input::-moz-range-track {
        height: 4px;
        background: transparent;
    }

    .vp-scrub-input::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.55);
        background: rgba(0,0,0,0.35);
    }

    .vp-scrub-input:focus {
        outline: none;
    }

    .vp-scrub-input:active::-webkit-slider-thumb {
        transform: scale(1.05);
    }

@media (hover:none) {
    /* no funky tap animations on mobile */
    .vp-scrub-input:active::-webkit-slider-thumb {
        transform: none;
    }
}

.vp-playbar-inner {
    width: 100%;
    max-width: none;
    padding: 0 var(--pbPad);
    position: relative; /* anchors vp-pb-side */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
}

.vp-pb-center {
    display: grid;
    grid-template-columns: 56px 56px 56px;
    align-items: center;
    justify-content: center;
    column-gap: 20px;
}

.vp-pb-side {
    position: absolute;
    top: 0%;
    transform: none;
}

/* Make side buttons respect playbar padding */
.vp-pb-slot-left .vp-pb-side {
    left: var(--pbPad);
}

.vp-pb-slot-right .vp-pb-side {
    right: var(--pbPad);
}


.vp-pb-now {
    left: var(--pbPad);
}

.vp-pb-saver {
    right: var(--pbPad);
}
/* =========================
   Now Playing: true centering
========================= */
.vp-np-head {
    display: grid;
    grid-template-columns: 44px 1fr 44px; /* equal side slots */
    align-items: center;
    padding: 0 18px; /* match your gutter */
}

.vp-np-headTitle {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    width: 100%;
    margin: 0;
}

/* make sure any left/right NP header buttons sit in the side slots */
.vp-np-head > :first-child {
    grid-column: 1;
    justify-self: start;
}

.vp-np-head > :last-child {
    grid-column: 3;
    justify-self: end;
}

/* center the track title/meta block too */
.vp-np-track {
    text-align: center;
    display: grid;
    justify-items: center;
    padding: 0 18px;
}

/* ===== Loader: center hero, remove reliance on extra rows ===== */
#vpLoader {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 18px;
    box-sizing: border-box;
}

    /* whatever wrapper you use inside the loader */
    #vpLoader .vp-loader-inner,
    #vpLoader .vp-loaderWrap,
    #vpLoader .vp-loaderContent {
        width: 100%;
        margin: 0 auto;
        display: grid;
        justify-items: center;
        gap: 14px;
    }

/* hero card stays centered */
#vpHeroCard {
    margin: 0 auto;
}

/* if you still have any spacing rules tied to the old New row, neutralize it */
#vpNewRow {
    display: none !important;
}
/* =========================================================
   Responsive
========================================================= */
@media (max-width:767px) {




    .vp-hero {
        width: 100%;
        height: 100dvh;
        max-height: none;
        aspect-ratio: auto;
        border-radius: 0;
        border: 0;
    }

    .vp-hero-content {
        padding: 18px;
    }

    #vpLoader {
        padding: 0;
    }

    .vp-loader-inner {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    .vp-loader {
        place-items: start stretch;
    }

    .vault-header {
        align-items: center;
        text-align: center;
    }

    .vault-search {
        margin-left: auto;
        margin-right: auto;
    }

    .vault-nav {
        justify-content: flex-start;
        padding-left: 14px;
        padding-right: 14px;
        margin-left: -14px;
        margin-right: -14px;
        scroll-padding-left: 14px;
        scroll-padding-right: 14px;
    }

    .vault-nav-link {
        scroll-snap-align: start;
    }

    .vault-sections {
        gap: 34px;
        margin-top: 12px;
    }

    .vault-section-head {
        margin-bottom: 14px;
    }

    .vault-row {
        padding-bottom: 18px;
        margin-bottom: 10px;
    }

    :root {
        --dockPad: 18px; /* your “18px” but applied as real dock clearance */
    }

    /* Bottom nav: make the bar itself taller + keep its background */
    .vault-nav {
        height: calc(var(--bottomNavH) + var(--safe-b) + var(--dockPad));
        padding-bottom: calc(var(--safe-b) + var(--dockPad));
    }

    /* Playbar: sit above the (now taller) nav and also become taller */
    .vp-playbar {
        bottom: calc(var(--bottomNavH) + var(--safe-b) + var(--dockPad));
        height: calc(var(--playbarH) + var(--dockPad));
        box-sizing: border-box;
        padding-bottom: var(--dockPad); /* moves icons up, BUT background grows too */
        align-items: center; /* keep your existing vertical centering vibe */
    }

    /* When NP is open you drop the playbar to the bottom — still respect dockPad */
    body.np-open .vp-playbar {
        bottom: calc(var(--safe-b) + var(--dockPad));
    }

    /* Content buffer: the page needs to reserve the *new* taller bars */
    .vault {
        padding-bottom: calc( 18px + var(--safe-b) + var(--bottomNavH) + var(--playbarH) + (var(--dockPad) * 2) );
    }
}
/* ==============================
   NP OPEN: playbar sits flush
================================ */
body.np-open .vp-playbar {
    bottom: 0;
    height: calc(var(--playbarH) + var(--safe-b) + var(--dockPad));
    padding-bottom: calc(var(--safe-b) + var(--dockPad));
    box-sizing: border-box;
}

/* Optional: ensure NP content never hides behind the playbar */
body.np-open .vp-np {
    padding-bottom: calc(var(--playbarH) + var(--safe-b) + var(--dockPad));
}
/* ==============================
   Lock main vault scroll in NP
================================ */
body.np-open {
    overflow: hidden; /* kills page scroll */
    overscroll-behavior: none; /* prevents bounce/scroll chaining */
}

    /* If your main scroll is on .vault, lock that too */
    body.np-open .vault {
        overflow: hidden !important;
    }

/* Hide scrollbar visuals (desktop) while NP is open */
body.np-open {
    scrollbar-width: none; /* Firefox */
}

    body.np-open::-webkit-scrollbar {
        width: 0;
        height: 0;
    }
/* =========================================
   Bottom nav: prevent vertical touch-pan
========================================= */
.vault-nav {
    touch-action: pan-x; /* allow horizontal, block vertical pan */
    overscroll-behavior: contain;
}

/* =========================================================
   Default playbar stays unchanged (your current look)
   (No safe-area height growth here)
========================================================= */
.vp-playbar {
    height: var(--playbarH);
    padding-bottom: 0;
}


/* Keep the page from drifting, but don't clip the main containers */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* REMOVE overflow-x:clip from #vaultRoot and .vault */
#vaultRoot, .vault {
    overflow-x: visible;
}

/* It's fine to clip overlays/bars themselves (they're fixed anyway) */
.vp-loader,
.vp-np,
.vp-playbar {
    overflow-x: clip;
}


/* Bottom nav must remain horizontally scrollable on narrow screens */
.vault-nav {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
}


/* Safety: anything using 100vw can cause drift on some setups */
.vault, .vp-loader-inner, .vp-hero {
    width: 100%;
}

html, body {
    width: 100%;
    overflow-x: hidden;
}

@media (max-width: 820px) {
    .vault-nav {
        overflow-x: auto !important;
    }
}

body.is-scrubbing .vp-drawer,
body.is-scrubbing #vpNowPlaying {
    pointer-events: auto; /* make sure UI doesn’t get blocked */
}
/* Mobile-only: give the loader hero more breathing room at the bottom */
@media (max-width: 767px) {
    /* adjust this selector to whichever element wraps the featured card */
    #vpHeroCard,
    .vp-heroCard {
        padding-bottom: 25px; /* try 22–34px */
    }

    #vpLoader .vp-hero,
    #vpLoader .vp-heroWrap,
    #vpLoader {
        padding-bottom: 60px;
        overflow: hidden;
    }
}

.vault-nav {
    display: none;
}
/* ===== Playbar: flush bottom + iOS safe-area clearance ===== */

/* 1) Ensure the bar is truly docked to the bottom */
#vpPlaybar,
.vp-playbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0; /* FLUSH */
    z-index: 5000;
}

/* 2) Add safe-area padding so content clears iOS swipe-up zone */
:root {
    --iosSafe: env(safe-area-inset-bottom, 0px);
    --pbExtra: 15px; /* tweak: extra clearance above swipe zone */
}

/* Put padding on the inner container so the bar stays flush but content lifts */
#vpPlaybar .vp-playbar-inner,
.vp-playbar .vp-playbar-inner {
    padding-bottom: calc(var(--iosSafe) + var(--pbExtra));
}

/* 3) Optional: if you have a bottom nav under/near it, keep playbar above it */
:root {
    /* if you already have these vars, don’t duplicate—just keep the next rule */
    /* --bottomNavH: 56px; */
}

body {
    /* so page content doesn’t hide behind fixed UI */
    padding-bottom: calc(var(--playbarH, 52px) + var(--bottomNavH, 0px) + var(--iosSafe));
}
/* Clear the sticky site navbar (55px) */
:root {
    --siteNavH: 58px;
}

#vpVault,
.vault,
.vault-body,
#vaultMain {
    padding-top: var(--siteNavH);
}
/* Intentional vertical rhythm inside the playbar */
:root {
    --pbGap: 10px; /* tweak 8–14px */
}

/* If your playbar inner is a column */
#vpPlaybar .vp-playbar-inner,
.vp-playbar .vp-playbar-inner {
    display: flex;
    flex-direction: column;
}

/* Add spacing between the seek/scrub area and the controls row */
#vpPlaybar .vp-seek,
#vpPlaybar .vp-seekSurface,
#vpPlaybar .vp-scrub,
.vp-playbar .vp-seek,
.vp-playbar .vp-seekSurface,
.vp-playbar .vp-scrub {
    margin-bottom: var(--pbGap);
}

/* If your controls are in a row wrapper, give it breathing room too */
#vpPlaybar .vp-controls,
#vpPlaybar .vp-controlsRow,
.vp-playbar .vp-controls,
.vp-playbar .vp-controlsRow {
    padding-top: 2px;
}
/* Grid-friendly spacing: add a divider-like gap */
:root {
    --pbGap: 10px;
}

#vpPlaybar .vp-seek,
#vpPlaybar .vp-seekSurface {
    margin-bottom: var(--pbGap);
}
/* ==============================
   V7.0 PATCH: Drawer snaps to NP header bottom
================================ */

/* Drawer overlay should live inside NP vertical space */
.vp-drawer {
    top: var(--wfNavH);
    height: calc(100vh - var(--wfNavH));
}

/* Backdrop only covers NP area (so it feels attached to NP) */
.vp-drawer-backdrop {
    top: 0;
    bottom: 0;
}

/* Panel top aligns EXACTLY under the NP header */
.vp-drawer-panel {
    top: var(--npHeadH);
    bottom: 0;
    height: auto;
    max-height: none;
}

/* =========================================================
   V7.0 FULL PATCH (appended)
   - More space under scrubber for easier control
   - Keeps drawer snapped under NP header (CSS side)
========================================================= */

/* Give the scrubber a bigger touch lane and create intentional spacing below it */
:root {
    --playbarH: 72px; /* slightly taller playbar for room */
}

/* Larger scrub area */
.vp-scrub {
    height: 18px !important;
    padding-bottom: 6px; /* extra space under the scrub lane */
}

.vp-scrub-input {
    height: 18px !important;
}

    .vp-scrub-input::-webkit-slider-thumb {
        width: 14px !important;
        height: 14px !important;
        margin-top: -5px !important; /* centers on 4px track */
    }

    .vp-scrub-input::-moz-range-thumb {
        width: 14px !important;
        height: 14px !important;
    }

/* Push the control cluster down a bit so the scrubber doesn’t feel cramped */
.vp-playbar-inner {
    padding-top: 12px !important;
}

/* Drawer snap guarantee (in case earlier rules fight it) */
.vp-drawer-panel {
    top: var(--npHeadH) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
}
/* ==============================
   Playbar spacing fix (V7.0)
   Goal: add space BETWEEN scrubber and controls
   without shifting side buttons upward
================================ */

:root {
    --playbarH: 78px; /* slightly taller background */
    --scrubGap: 18px; /* the actual spacing you want */
}

/* scrubber lane size stays comfortable */
.vp-scrub {
    height: 18px !important;
    padding-bottom: 0 !important; /* remove bottom padding that was affecting layout */
    margin-bottom: var(--scrubGap) !important; /* <-- THIS creates the gap */
}

/* undo the earlier push that affected button alignment */
.vp-playbar-inner {
    padding-top: 0 !important;
}
/* ==============================
   Loader Featured Hero = Fullscreen
   Keep title/desc/enter centered at bottom
================================ */

/* Let the loader be full-bleed */
.vp-loader-inner {
    width: 100% !important;
    min-height: 100vh !important;
    padding: 0 !important;
    gap: 0 !important;
    align-content: stretch !important;
    justify-items: stretch !important;
}

/* Fullscreen hero */
#vpHeroCard,
.vp-hero {
    width: 100vw !important;
    height: 100vh !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    border-radius: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Background fills */
#vpHeroBg,
.vp-hero-bg {
    transform: none !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Put the title/desc/enter INTO the hero overlay at the bottom */
.vp-hero-content {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    padding: 26px 18px !important;
    padding-bottom: calc(26px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Keep your title + description visible and stacked */

.vp-loader-desc {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    max-width: 62ch !important;
}

/* The title/desc were originally above the hero — move them visually into the bottom overlay */


.vp-loader-desc {
    margin: 0 0 14px !important;
}

/* Optional: slightly stronger overlay so white text stays readable on bright hero images */
.vp-hero-grad {
    background: radial-gradient(900px 520px at 50% 75%, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.00) 85%), linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.22) 100%) !important;
}
/* Hide horizontal scrollbars on vault section rails (keep scrolling) */
.vault-row {
    -ms-overflow-style: none; /* IE/Edge legacy */
    scrollbar-width: none; /* Firefox */
}

    .vault-row::-webkit-scrollbar {
        height: 0;
        width: 0;
        display: none; /* Chrome/Safari */
    }