@font-face {
    font-family: 'Yeezy';
    src: url('/assets/fonts/yeezy-bold.woff2') format('woff2'),
         url('/assets/fonts/yeezy-bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Syne';
    src: url('/assets/fonts/syne-800.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

/* Tabler Icons - font-display override to prevent FOIT */
@font-face {
    font-family: 'tabler-icons';
    src: url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/fonts/tabler-icons.woff2') format('woff2');
    font-display: swap;
}

:root {
    --red: #ff0000;
    --red-glow: rgba(255, 0, 0, 0.5);
    --black: #000000;
    --black-soft: #0a0a0a;
    --black-card: #111111;
    --glass: rgba(0, 0, 0, 0.85);
    --border: rgba(255, 255, 255, 0.12);
    --text: #ffffff;
    --text-muted: rgba(255, 255, 255, 0.55);

    /* Layout alignment - keeps hero, filters, and grid aligned */
    --content-max-width: 1400px;
    --content-padding: 2.5rem;
    --content-align: max(var(--content-padding), calc((100vw - var(--content-max-width)) / 2));
}

/* Preloading state - prevent layout shifts */
body.preloading {
    overflow: hidden;
}

body.preloading * {
    transition: none !important;
    animation: none !important;
}

/* Scrollbar - Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--black-soft);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--red);
    border-radius: 8px;
    border: 2px solid var(--black-soft);
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: #ff3333;
    box-shadow: 0 0 8px var(--red-glow);
}

::-webkit-scrollbar-corner {
    background: var(--black-soft);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Scrollbar - Firefox */
    scrollbar-width: thin;
    scrollbar-color: var(--red) var(--black-soft);
}

body {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-weight: bold;
    background: var(--black);
    color: var(--text);
    min-height: 100vh;
    scrollbar-gutter: stable;
}

body.no-scroll {
    overflow: hidden;
}

/* Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.6rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 0 0 12px 12px;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #fff 3%, transparent),
        inset 0 -1px 0px -0.5px color-mix(in srgb, #fff 5%, transparent),
        0px 2px 8px 0px color-mix(in srgb, #000 30%, transparent),
        0px 4px 16px 0px color-mix(in srgb, #000 15%, transparent);
    transition: opacity 0.3s ease;
}

header::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, #000 40%, transparent);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border-radius: inherit;
    z-index: -1;
}

header.pmv-playing {
    opacity: 0;
    pointer-events: none;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-full {
    height: 20px;
    width: auto;
}

.logo-mobile {
    display: none;
    height: 20px;
    width: 20px;
    object-fit: contain;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

/* Home icon next to the logo — visible at all widths */
.header-home-icon {
    display: flex;
}

.header-left:not(:has(.hamburger-btn)) {
    padding-left: 1.25rem;
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}


.header-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
}

.header-link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.2s ease;
}

.header-link:hover {
    color: var(--text);
}

nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    flex: 1;
}

.nav-icon.nav-search-icon {
    display: flex;
}

/* ============================================
   Premium three-pill header (ALL widths)
   The same floating pill layout applies on every
   device. Mobile-specific size/padding tweaks are
   applied in a follow-up @media block further down.
   `:has(.skeleton-header)` opts out during the
   brief skeleton/loading state so the placeholder
   structure isn't forced into the new grid.
   ============================================ */
@media (min-width: 1px) {
    /* Parent: transparent floating layout container — children carry the glass */
    header:not(:has(.skeleton-header)) {
        left: 1rem;
        right: 1rem;
        margin-top: 1rem;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.75rem;
        padding: 0;
    }
    header:not(:has(.skeleton-header))::before {
        display: none;
    }

    /* Each group becomes its own glass pill */
    header:not(:has(.skeleton-header)) > .header-left,
    header:not(:has(.skeleton-header)) > .header-center,
    header:not(:has(.skeleton-header)) > nav {
        position: relative;
        flex: none;
        padding: 0.4rem 0.9rem;
        border-radius: 999px;
        border: 0.5px solid rgba(255, 255, 255, 0.06);
        background-color: color-mix(in srgb, #000 45%, transparent);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        box-shadow:
            inset 0 0 0 0.5px color-mix(in srgb, #fff 3%, transparent),
            inset 0 -1px 0px -0.5px color-mix(in srgb, #fff 5%, transparent),
            0px 2px 8px 0px color-mix(in srgb, #000 30%, transparent),
            0px 4px 16px 0px color-mix(in srgb, #000 15%, transparent);
    }

    /* Compact icon sizing inside the header (matches hamburger/logo scale).
       Excludes .cult-icon (label+icon, width auto) and .login-icon
       (icon+label glass button, width auto). */
    #site-header .nav-icon:not(.cult-icon):not(.login-icon) {
        width: 32px;
        height: 32px;
    }
    #site-header .nav-icon i {
        font-size: 18px;
    }
    #site-header .nav-icon img {
        width: 16px;
        height: 16px;
    }
    #site-header .nav-icon.cult-icon {
        height: 32px;
        padding: 0 0.5rem;
        gap: 0.3rem;
    }
    #site-header .nav-icons-center,
    #site-header .nav-icons {
        gap: 0.15rem;
    }

    #site-header > .header-left   { justify-self: start; gap: 0.4rem; }
    #site-header > .header-center { justify-self: center; }
    #site-header > nav            { justify-self: end; }

    /* Pull the home icon a touch closer to the hamburger
       (compensates for the hamburger's internal 4px inset) */
    #site-header .header-home-icon {
        margin-left: -0.15rem;
    }

    /* Centre cult icons (Godcock/Video/Playlists/Loyalty/Confess) live in
       the sidebar on desktop — hide them in the header. The free-user
       Subscribe/Buy CTAs inside .header-center remain visible. */
    #site-header .nav-icons-center {
        display: none;
    }
    body:not(.free-user) #site-header > .header-center {
        display: none;
    }
}

.nav-icons-center {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Centre cult icons — label + icon layout */
.nav-icon.cult-icon {
    width: auto;
    padding: 0 0.65rem;
    gap: 0.35rem;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
}

.cult-nav-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    line-height: 1;
}

/* Collapse to icon-only below 1100px */
@media (max-width: 1100px) {
    .cult-nav-label {
        display: none;
    }
    .nav-icon.cult-icon {
        width: 38px;
        padding: 0;
        gap: 0;
    }
}

.mobile-search-close {
    display: none;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-decoration: none;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.nav-btn.silver {
    background: linear-gradient(145deg, #e8e8e8, #b8b8b8);
    color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nav-btn.silver:hover {
    background: linear-gradient(145deg, #f0f0f0, #c8c8c8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.nav-btn.gold {
    background: linear-gradient(145deg, #ffd700, #b8860b);
    color: #1a1a1a;
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.4);
}

.nav-btn.gold:hover {
    background: linear-gradient(145deg, #ffe033, #d4a000);
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.6);
}

.nav-btn.red {
    background: linear-gradient(145deg, #dc2626, #991b1b);
    color: #fff;
    border-color: rgba(220, 38, 38, 0.4);
    box-shadow: 0 2px 8px rgba(153, 27, 27, 0.4);
}

.nav-btn.red:hover {
    background: linear-gradient(145deg, #ef4444, #b91c1c);
    box-shadow: 0 4px 12px rgba(153, 27, 27, 0.6);
}

.vault-plus-icon {
    width: 14px;
    height: 14px;
    object-fit: contain;
    margin-left: 0.2rem;
    vertical-align: middle;
}

.nav-separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 0.25rem;
}

.nav-icons {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.header-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Legacy .header-cta-btn / .header-cta-subscribe / .header-cta-buy
   styling removed — the new inline-pill rules below (search for
   "Subscribe Monthly | Buy Lifetime") own this look entirely. */

/* CLIP badge — shown in the drawer-progress for free logged-in users
   in place of the timestamp readouts. Two badges (left + right) so the
   waveform stays centered just like with the dual time labels. */
.drawer-clip-badge {
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: color-mix(in srgb, var(--red) 35%, color-mix(in srgb, #000 50%, transparent));
    border: 1px solid color-mix(in srgb, var(--red) 60%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--red) 35%, transparent);
    transition: background 0.2s ease, transform 0.15s ease;
    white-space: nowrap;
    line-height: 1;
}
.drawer-clip-badge:hover {
    background: color-mix(in srgb, var(--red) 55%, transparent);
}
body.show-clip-badge .drawer-clip-badge {
    display: inline-flex;
}
body.show-clip-badge #drawer-time-elapsed,
body.show-clip-badge #drawer-time-total {
    display: none;
}

.nav-icon .godcock-icon {
    width: 17px;
    height: 17px;
    object-fit: contain;
    opacity: 0.85;
    filter: brightness(2);
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.nav-icon:hover .godcock-icon {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.8)) drop-shadow(0 0 12px rgba(255, 0, 0, 0.4));
}

/* Bookmark — fill yellow, stay filled while hovered */
.bookmark-nav-icon:hover i {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    transition: color 0.6s ease;
}

/* Video Library — XXX flash on hover */
#nav-videolibrary {
    position: relative;
}

#nav-videolibrary:hover i {
    opacity: 0;
}

#nav-videolibrary::after {
    content: 'XXX';
    position: absolute;
    top: 50%;
    left: 0;
    width: 38px;
    text-align: center;
    transform: translateY(-50%);
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #ff3333;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}

#nav-videolibrary:hover::after {
    opacity: 1;
    animation: xxxFlash 0.6s steps(1) infinite;
}

@keyframes xxxFlash {
    0%   { opacity: 1; color: #ff3333; }
    25%  { opacity: 0.3; }
    50%  { opacity: 1; color: #ffffff; }
    75%  { opacity: 0.4; }
}

/* Playlist (vinyl) — spin on hover, unwind on unhover */
#nav-playlist i {
    transition: transform 0.8s ease-out;
}

#nav-playlist:hover i {
    transform: rotate(720deg);
    transition: transform 1.5s ease-out;
}

#nav-diamond {
    position: relative;
}

#nav-diamond:hover i {
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

#nav-diamond::before,
#nav-diamond::after {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    color: #ffd700;
    font-style: normal;
    font-weight: bold;
    line-height: 1;
    z-index: 1;
    top: 50%;
    left: 50%;
}

#nav-diamond::before {
    content: '+';
    font-size: 7px;
}

#nav-diamond::after {
    content: '*';
    font-size: 8px;
    text-shadow: 0 0 0 transparent;
}

#nav-diamond:hover::before {
    animation: diamondOrbit1 2s ease-in-out forwards;
}

#nav-diamond:hover::after {
    animation: diamondOrbit2 2s ease-in-out forwards, diamondOrbit3Shadow 2s ease-in-out forwards;
}

@keyframes diamondOrbit1 {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate(0, -12px) scale(0); }
    10%  { opacity: 1; transform: translate(-50%, -50%) translate(0, -12px) scale(1); }
    25%  { opacity: 1; transform: translate(-50%, -50%) translate(10px, -6px) scale(1.2); }
    50%  { opacity: 0.8; transform: translate(-50%, -50%) translate(10px, 6px) scale(0.9); }
    75%  { opacity: 1; transform: translate(-50%, -50%) translate(-10px, 6px) scale(1.1); }
    90%  { opacity: 0.6; transform: translate(-50%, -50%) translate(-10px, -6px) scale(0.8); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(0, -12px) scale(0); }
}

@keyframes diamondOrbit2 {
    0%   { opacity: 0; transform: translate(-50%, -50%) translate(10px, 8px) scale(0); }
    15%  { opacity: 1; transform: translate(-50%, -50%) translate(10px, 8px) scale(1); }
    35%  { opacity: 1; transform: translate(-50%, -50%) translate(-8px, 10px) scale(1.1); }
    55%  { opacity: 0.7; transform: translate(-50%, -50%) translate(-12px, -4px) scale(0.9); }
    75%  { opacity: 1; transform: translate(-50%, -50%) translate(4px, -10px) scale(1.2); }
    90%  { opacity: 0.5; transform: translate(-50%, -50%) translate(10px, 4px) scale(0.7); }
    100% { opacity: 0; transform: translate(-50%, -50%) translate(10px, 8px) scale(0); }
}

@keyframes diamondOrbit3Shadow {
    0%   { text-shadow: -14px -4px 0 transparent; }
    12%  { text-shadow: -14px -4px 0 #ffd700; }
    30%  { text-shadow: -4px -14px 0 #ffd700; }
    50%  { text-shadow: 10px -10px 0 rgba(255, 215, 0, 0.8); }
    70%  { text-shadow: 12px 6px 0 #ffd700; }
    85%  { text-shadow: -6px 12px 0 rgba(255, 215, 0, 0.6); }
    100% { text-shadow: -14px -4px 0 transparent; }
}

/* Confess (eye) — red watchful pulse: turns red, glow breathes, subtle scale */
#nav-confess:hover i {
    color: #ff2020;
    animation: confessStare 2s ease-in-out infinite;
}

@keyframes confessStare {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.65));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(255, 0, 0, 1)) drop-shadow(0 0 24px rgba(255, 0, 0, 0.5));
        transform: scale(1.18);
    }
}


.nav-divider {
    display: none !important;
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.15s ease, background 0.15s ease;
}

.nav-icon:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.07);
}

.nav-icon i {
    font-size: 21px;
    line-height: 1;
}

.nav-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

/* Admin menulet — yellow */
.nav-icon.admin-menulet i {
    color: #ffd700;
}
.nav-icon.admin-menulet:hover i {
    color: #ffe44d;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.5));
}

.nav-icon.holo svg {
    width: 18px;
    height: 18px;
    fill: url(#holoGradient);
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
    transition: filter 0.2s ease;
}

.nav-icon.holo:hover svg {
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 12px rgba(147, 51, 234, 0.4));
}

/* Login icon — borderless inside the right pill (the pill itself
   provides the glass surface; nesting another border looks "double") */
.nav-icon.login-icon {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: auto;
    height: auto;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: none;
    transition: color 0.2s ease;
}
.nav-icon.login-icon:hover {
    color: #fff;
}
.nav-icon.login-icon i {
    font-size: 1rem;
}

/* Sign Up pill (logged-out header) */
.nav-signup-link {
    padding: 0.45rem 1rem;
    background: var(--red);
    color: #fff;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: all 0.2s ease;
}
.nav-signup-link:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Account icon (default / not logged in) */
.account-icon {
    width: 30px !important;
    height: 30px !important;
}

.account-icon .ti-user-circle {
    font-size: 26px;
    color: #fff;
}

/* User avatar in header (logged in state) */
.user-avatar-header {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--red);
    box-shadow: 0 0 12px var(--red-glow), 0 0 20px rgba(255, 0, 60, 0.3);
    transition: all 0.3s ease;
}

.account-icon.logged-in {
    position: relative;
    width: 30px !important;
    height: 30px !important;
    overflow: visible;
}

.account-icon.logged-in::after {
    content: '';
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 10px;
    height: 10px;
    background: #00ff88;
    border-radius: 50%;
    border: 2px solid var(--bg);
    box-shadow: 0 0 6px #00ff88;
    z-index: 1;
}

.account-icon.logged-in:hover .user-avatar-header {
    box-shadow: 0 0 16px var(--red-glow), 0 0 30px rgba(255, 0, 60, 0.5);
    transform: scale(1.05);
}


/* Account Menu Dropdown */
.account-wrapper {
    position: relative;
}

.account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    white-space: nowrap;
    background-color: color-mix(in srgb, #000 70%, transparent);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
        inset 0 -2px 0px -1px color-mix(in srgb, #fff 8%, transparent),
        0px 4px 16px 0px color-mix(in srgb, #000 50%, transparent),
        0px 8px 32px 0px color-mix(in srgb, #000 30%, transparent);
}

.account-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.account-menu__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

.account-menu__item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.account-menu__item .ti {
    font-size: 14px;
    opacity: 0.6;
}

.account-menu__item--logout {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 2px;
    padding: 0;
}

.account-menu__item--logout button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: none;
    border: none;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'IBM Plex Mono', monospace;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.account-menu__item--logout button:hover {
    background: rgba(255, 59, 48, 0.1);
    color: var(--red);
}

/* Profile dropdown */
.profile-dropdown {
    position: relative;
    display: none;
}

.profile-dropdown-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--border);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s ease;
}

.profile-dropdown-btn:hover {
    border-color: var(--red);
}

.profile-dropdown-btn .profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 180px;
    background: var(--glass);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    backdrop-filter: blur(20px);
    z-index: 1000;
}

.profile-dropdown.open .profile-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    border-radius: 6px;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.75rem;
    color: var(--text);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: background 0.2s ease;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Filter Bar */
.filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    max-width: var(--content-max-width);
    margin: 1rem auto 0.75rem;
    position: relative;
    z-index: 30;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--red, #ff0000) 20%, rgba(255, 255, 255, 0.08));
    background-color: color-mix(in srgb, var(--red, #ff0000) 8%, color-mix(in srgb, #000 60%, transparent));
    color: color-mix(in srgb, var(--red, #ff0000) 75%, #fff);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 10%, transparent);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-btn i {
    font-size: 0.95rem;
    line-height: 1;
}

.filter-btn:hover {
    background-color: color-mix(in srgb, var(--red, #ff0000) 15%, color-mix(in srgb, #000 50%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 35%, rgba(255, 255, 255, 0.1));
    color: color-mix(in srgb, var(--red, #ff0000) 90%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 12%, transparent),
        0px 2px 8px 0px color-mix(in srgb, var(--red, #ff0000) 15%, transparent);
}

.filter-btn.active {
    background-color: color-mix(in srgb, var(--red, #ff0000) 25%, color-mix(in srgb, #000 40%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 50%, rgba(255, 255, 255, 0.15));
    color: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 15%, transparent),
        0px 2px 12px 0px color-mix(in srgb, var(--red, #ff0000) 25%, transparent);
}

.filter-btn.active:hover {
    background-color: color-mix(in srgb, var(--red, #ff0000) 30%, color-mix(in srgb, #000 35%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 60%, rgba(255, 255, 255, 0.15));
}

/* Free filter — premium glow active state */
.filter-btn--free.active {
    background-color: color-mix(in srgb, var(--red, #ff0000) 35%, color-mix(in srgb, #000 30%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 70%, rgba(255, 255, 255, 0.2));
    color: #fff;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 18%, transparent),
        0px 0px 16px 2px color-mix(in srgb, var(--red, #ff0000) 40%, transparent),
        0px 0px 32px 4px color-mix(in srgb, var(--red, #ff0000) 20%, transparent);
}

.filter-btn--free.active:hover {
    background-color: color-mix(in srgb, var(--red, #ff0000) 40%, color-mix(in srgb, #000 25%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 80%, rgba(255, 255, 255, 0.2));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 14%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 20%, transparent),
        0px 0px 20px 3px color-mix(in srgb, var(--red, #ff0000) 50%, transparent),
        0px 0px 40px 6px color-mix(in srgb, var(--red, #ff0000) 25%, transparent);
}

.filter-divider {
    width: 1px;
    height: 22px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 0.35rem;
    flex-shrink: 0;
}

/* =============================================
   BOOKMARKS & PROFILE SPA PAGES (iframe)
   ============================================= */
#bookmarks-page, #profile-page, #newsroom-page, #godcock-page, #playlist-page, #pmvs-page, #support-page, #admin-page, #search-page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 60px;
    z-index: 50;
    background: var(--black);
}

#profile-page {
    padding-top: 0;
}

#bookmarks-page.hidden, #profile-page.hidden, #newsroom-page.hidden, #godcock-page.hidden, #playlist-page.hidden, #pmvs-page.hidden, #loyalty-page.hidden, #support-page.hidden, #admin-page.hidden, #search-page.hidden, #sanctum-page.hidden, #drops-page.hidden {
    display: none;
}

.spa-iframe-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: var(--black);
    overflow: hidden;
}

.spa-iframe {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 850px) {
    #bookmarks-page, #profile-page, #newsroom-page, #godcock-page, #playlist-page, #pmvs-page, #support-page, #admin-page, #search-page {
        padding-top: 50px;
    }
    #profile-page {
        padding-top: 0;
    }
}

/* Tag Filter Box — glass card */
.filter-tags-box {
    max-width: var(--content-max-width);
    margin: 0 auto;
    background-color: color-mix(in srgb, #000 60%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, #fff 15%, transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, #fff 10%, transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, #000 30%, transparent),
        0px 4px 12px 0px color-mix(in srgb, #000 40%, transparent),
        0px 8px 24px 0px color-mix(in srgb, #000 30%, transparent);
    position: relative;
    z-index: 30;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 1rem;
    border-color: transparent;
    margin-bottom: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease, margin-bottom 0.35s ease, border-color 0.25s ease;
}

.filter-tags-box.open {
    max-height: 400px;
    opacity: 1;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    border-color: rgba(255, 255, 255, 0.1);
}

.filter-tags-header {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.5rem;
}

.filter-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.4rem;
}

.filter-tag-btn {
    --tag-color: #6b7280;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    background-color: color-mix(in srgb, var(--tag-color) 8%, color-mix(in srgb, #000 60%, transparent));
    border: 1px solid color-mix(in srgb, var(--tag-color) 20%, rgba(255, 255, 255, 0.08));
    color: color-mix(in srgb, var(--tag-color) 75%, #fff);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 10%, transparent);
    transition: all 0.2s ease;
}

.filter-tag-btn i {
    font-size: 0.9rem;
    line-height: 1;
    color: var(--tag-color);
    opacity: 0.85;
}

.filter-tag-btn:hover {
    background-color: color-mix(in srgb, var(--tag-color) 15%, color-mix(in srgb, #000 50%, transparent));
    border-color: color-mix(in srgb, var(--tag-color) 35%, rgba(255, 255, 255, 0.1));
    color: color-mix(in srgb, var(--tag-color) 90%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 12%, transparent),
        0px 2px 8px 0px color-mix(in srgb, var(--tag-color) 15%, transparent);
}

.filter-tag-btn.active {
    background-color: color-mix(in srgb, var(--tag-color) 22%, color-mix(in srgb, #000 45%, transparent));
    border-color: color-mix(in srgb, var(--tag-color) 60%, rgba(255, 255, 255, 0.1));
    color: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 15%, transparent),
        0px 2px 10px 0px color-mix(in srgb, var(--tag-color) 30%, transparent);
}

.filter-tag-btn.active i {
    opacity: 1;
}

@media (max-width: 768px) {
    .filter-bar {
        gap: 0.4rem;
        justify-content: flex-start;
    }
    .filter-divider {
        display: none;
    }
    .filter-tags-box {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Pinned Section */
.pinned-section {
    max-width: var(--content-max-width);
    margin: 0 auto 0;
    position: relative;
    z-index: 1;
}

.pinned-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 0;
    color: var(--red);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.pinned-header::before,
.pinned-header::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(to var(--dir), color-mix(in srgb, var(--red) 40%, transparent), transparent);
}

.pinned-header::before {
    --dir: left;
}

.pinned-header::after {
    --dir: right;
}

.pinned-icon {
    width: 16px;
    height: 16px;
    stroke: var(--red);
}

.section-separator {
    max-width: 400px;
    height: 1px;
    margin: 2rem auto;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
}

/* No-match message */
.no-match-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

/* Grid
   IMPORTANT: main padding-top must be >= header height (~5rem) to clear fixed header.
   To reduce gap after hero, adjust .hero-carousel margin-bottom instead. */
main {
    padding: 5rem var(--content-padding) 2rem;
    position: relative;
    z-index: 1;
    /* Allow clicks to pass through main's padding to hero carousel beneath */
    pointer-events: none;
}

main > * {
    pointer-events: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: var(--content-max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
    contain: layout style;
}


@media (max-width: 1000px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mobile-only {
    display: none !important;
}

/* Narrow desktop: only logo compacts, grid/filter scale down */
@media (max-width: 850px) {
    /* Full logo stays visible — header pill is compact enough to fit it.
       The .logo-mobile fallback only kicks in at extreme narrow widths
       (see ≤360px rule below). */

    .grid {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .filter-bar {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .filter-btn {
        padding: 0.35rem 0.65rem;
        font-size: 0.65rem;
    }

    .filter-btn i {
        font-size: 0.85rem;
    }

    .filter-toggle {
        padding: 0.35rem 0.6rem;
        font-size: 0.65rem;
        gap: 0.3rem;
    }

    .filter-toggle .toggle-icon {
        width: 12px;
        height: 12px;
    }
}

/* True mobile: pill-layout-compatible tweaks (touch devices only)
   The pill header layout from above applies. This block only contains
   the bits that survived the mobile→pill rewrite: desktop/mobile-only
   swap, tighter pill insets, smaller icons/logo for narrow widths,
   smaller avatar, login/signup label hides. */
@media (max-width: 480px) and (hover: none) {
    .desktop-only {
        display: none !important;
    }

    .mobile-only {
        display: unset !important;
    }

    /* Tighter outer insets so the pills have more room on a 375px screen */
    header:not(:has(.skeleton-header)) {
        left: 0.5rem;
        right: 0.5rem;
        margin-top: 0.5rem;
        gap: 0.4rem;
    }

    /* Tighter inner pill padding */
    header:not(:has(.skeleton-header)) > .header-left,
    header:not(:has(.skeleton-header)) > .header-center,
    header:not(:has(.skeleton-header)) > nav {
        padding: 0.35rem 0.7rem;
    }

    /* Slightly smaller icons + logo so [hamburger][home][logo] +
       [right pill] fit on a typical phone width without overflow.
       Same exclusions as the desktop rule. */
    #site-header .nav-icon:not(.cult-icon):not(.login-icon) {
        width: 28px;
        height: 28px;
    }
    #site-header .nav-icon i {
        font-size: 16px;
    }
    .logo-full {
        height: 18px;
    }

    /* Avatar in account icon — keep small on mobile */
    .account-icon.logged-in {
        width: 28px !important;
        height: 28px !important;
    }
    .user-avatar-header {
        width: 22px;
        height: 22px;
    }

    /* Login icon (logged-out): no decoration, sits naturally in the right pill */
    .login-label {
        display: none !important;
    }
    #header-login-icon {
        padding: 0;
        background: none;
        border: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        box-shadow: none;
        border-radius: 0;
    }
    body.logged-out .nav-signup-link {
        display: none !important;
    }

    .nav-divider {
        display: none !important;
    }
    .nav-icon .godcock-icon {
        width: 16px;
        height: 16px;
    }
}

/* Free-user: Subscribe Monthly | Buy Lifetime — IS the centre pill.
   The two links fill the pill edge-to-edge (no nested-button look)
   with a vertical divider between them. The pill itself gets a red
   accent border + shadow so it stands out as the primary CTA, while
   matching the size/shape of the other header pills exactly. */
body.free-user #site-header > .header-center {
    background-color: color-mix(in srgb, var(--red) 18%, color-mix(in srgb, #000 50%, transparent));
    border-color: color-mix(in srgb, var(--red) 55%, rgba(255, 255, 255, 0.08));
    box-shadow:
        inset 0 0 0 0.5px color-mix(in srgb, var(--red) 25%, transparent),
        inset 0 -1px 0px -0.5px color-mix(in srgb, #fff 5%, transparent),
        0px 2px 8px 0px color-mix(in srgb, #000 30%, transparent),
        0px 4px 18px 0px color-mix(in srgb, var(--red) 35%, transparent);
    padding: 0;
    overflow: hidden;
    /* Match the height of the left/right pills:
       nav-icon 32px + pill padding 0.4rem × 2 = ~45px desktop, 39px mobile */
    min-height: 45px;
    align-self: center;
}

body.free-user .header-cta {
    display: flex !important;
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 0;
    height: 100%;
}

.header-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    color: #fff;
    text-decoration: none;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 0;
    transition: background 0.2s ease;
    white-space: nowrap;
}
.header-cta-btn:first-child {
    border-radius: 999px 0 0 999px;
    padding-left: 1.15rem;
}
.header-cta-btn:last-child {
    border-radius: 0 999px 999px 0;
    padding-right: 1.15rem;
}
.header-cta-btn:hover {
    background: color-mix(in srgb, var(--red) 35%, transparent);
}
.header-cta-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.header-cta-divider {
    width: 1px;
    align-self: center;
    height: 55%;
    background: rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

/* Default: show full label, hide short label */
.header-cta-label--full  { display: inline; }
.header-cta-label--short { display: none; }

/* Narrow desktop: swap to short labels (Monthly / Lifetime) */
@media (max-width: 900px) {
    .header-cta-label--full  { display: none; }
    .header-cta-label--short { display: inline; }
    .header-cta-btn { padding: 0.4rem 0.7rem; font-size: 0.7rem; }
    .header-cta-btn:first-child { padding-left: 0.85rem; }
    .header-cta-btn:last-child  { padding-right: 0.85rem; }
}

/* Very narrow / mobile: keep the short labels (Subscribe / Buy) so the
   buttons remain recognisable as CTAs — just shrink everything else.
   Hide the home icon and swap the full logo for the small "+" so the
   three pills fit comfortably without overlap on a 360px+ screen. */
@media (max-width: 600px) {
    .header-cta-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.62rem;
        gap: 0.3rem;
        letter-spacing: 0.04em;
    }
    .header-cta-btn:first-child { padding-left: 0.75rem; }
    .header-cta-btn:last-child  { padding-right: 0.75rem; }
    .header-cta-icon { width: 13px; height: 13px; }

    .header-home-icon { display: none !important; }
    .logo-full { display: none; }
    .logo-mobile { display: block; height: 18px; width: 18px; }
}

/* Prevent the centre pill from squeezing the side pills off-screen.
   Grid uses auto/1fr/auto, so the centre pill is bound by 1fr; if its
   content is too wide, it would overflow horizontally. min-width: 0
   tells grid the centre is allowed to shrink past its intrinsic width. */
#site-header > .header-center { min-width: 0; }
body.free-user .header-cta { min-width: 0; }

@media (max-width: 480px) {
    body.free-user #site-header > .header-center {
        min-height: 39px;
    }
    .header-cta-btn {
        padding: 0.35rem 0.7rem;
        font-size: 0.62rem;
        gap: 0.3rem;
    }
    .header-cta-btn:first-child { padding-left: 0.85rem; }
    .header-cta-btn:last-child  { padding-right: 0.85rem; }
    .header-cta-icon {
        width: 14px;
        height: 14px;
    }
}

/* Card */
.card {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: visible;
    background: #111;
}

/* VIP Glow Effect - Subtle box shadow */
.card.vip-glow {
    --vip-glow-color: #d4af37;
    box-shadow: 0 0 20px color-mix(in srgb, var(--vip-glow-color) 40%, transparent);
}

/* Fag Tax Friday — breathing green glow on the 'fin' card (main grid only) */
.card.fagtax-glow {
    animation: fagtaxBreathe 2.8s ease-in-out infinite;
}
@keyframes fagtaxBreathe {
    0%, 100% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.25), 0 0 0 1px rgba(34, 197, 94, 0.25); }
    50%      { box-shadow: 0 0 28px rgba(34, 197, 94, 0.55), 0 0 0 1px rgba(34, 197, 94, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
    .card.fagtax-glow { animation: none; box-shadow: 0 0 18px rgba(34, 197, 94, 0.4), 0 0 0 1px rgba(34, 197, 94, 0.4); }
}

.card-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}

body.logged-out .filter-bar {
    display: none !important;
}

body.logged-out .card {
    overflow: hidden;
}

body.logged-out .card-cover {
    filter: blur(12px);
    transform: scale(1.15);
}

/* Lazy loading skeleton and fade-in */
.card-cover.lazy {
    background: linear-gradient(
        90deg,
        var(--black-card) 0%,
        rgba(255,255,255,0.05) 50%,
        var(--black-card) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.card-cover.lazy.loaded {
    animation: none;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* PMV card lazy loading shimmer */
.pmv-card-media img.lazy {
    background: linear-gradient(90deg, var(--black-card) 0%, rgba(255,255,255,0.05) 50%, var(--black-card) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    min-height: 120px;
}

.pmv-card-media img.lazy.loaded {
    animation: none;
    min-height: auto;
}

.pmv-series-box-art.lazy {
    background: linear-gradient(90deg, var(--black-card) 0%, rgba(255,255,255,0.05) 50%, var(--black-card) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.pmv-series-box-art.lazy.loaded {
    animation: none;
}

/* Skeleton Placeholders — visible during load, replaced by real content */
.skeleton-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
}

.skeleton-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.skeleton-nav {
    display: flex;
    gap: 0.75rem;
}

.skeleton-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.skeleton-card {
    aspect-ratio: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.skeleton-card.fade-out {
    opacity: 0;
}

.skeleton-shimmer {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Card Corner Actions (top-left) */
.card-actions {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    gap: 4px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card:hover .card-actions {
    opacity: 1;
}

.card-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 20px;
    /* Dark base + brightness backdrop-filter — guarantees the chip is
       visible on any cover art (white EPs included). Without the dark base
       and brightness clamp, the previous translucent-white tint vanished on
       light artwork. */
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px) saturate(140%) brightness(0.65);
    -webkit-backdrop-filter: blur(12px) saturate(140%) brightness(0.65);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.15s ease;
    text-decoration: none;
    padding: 0;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.card-action-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

/* Tag Pill */
.card-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 5;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.05) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.card-tag::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--tag-color, #ff0033) 0%, color-mix(in srgb, var(--tag-color, #ff0033) 70%, #000) 100%);
    opacity: 0.85;
    z-index: -1;
}

/* Card Social Actions (top-right, below tag) */
.card-social {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 4px;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.card:hover .card-social { opacity: 1; }

/* Always show if user has liked/bookmarked */
.card-social:has(.active) { opacity: 1; }

.card-social-btn {
    height: 26px;
    border-radius: 20px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(12px) saturate(140%) brightness(0.65);
    -webkit-backdrop-filter: blur(12px) saturate(140%) brightness(0.65);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.card-social-btn i { font-size: 0.75rem; line-height: 1; display: block; }

.card-social-btn:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.card-social-btn.active.card-like-btn {
    color: #e8384f;
    border-color: rgba(232,56,79,0.3);
    background: linear-gradient(135deg, rgba(232,56,79,0.2) 0%, rgba(232,56,79,0.08) 100%);
}

.card-social-btn.active.card-bookmark-btn {
    color: #f59e0b;
    border-color: rgba(245,158,11,0.3);
    background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(245,158,11,0.08) 100%);
}

.card-like-count {
    font-size: 0.6rem;
    font-weight: 600;
}

.card-like-count:empty {
    display: none;
}

@keyframes cardActionPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

.card-social-btn.pop {
    animation: cardActionPop 0.3s ease;
}

/* Lock icon for subscriber-only content (preview only) */
.card-lock {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}

.card-lock img {
    display: block;
    height: 32px !important;
    width: auto !important;
    max-width: none !important;
    object-fit: contain;
    opacity: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

/* Preview badge for free content (non-subscriber preview) */
.card-preview-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    padding: 3px 8px;
    border: 1.5px solid #ff0033;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.6);
    color: #ff0033;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}

/* Vault+ Pill for clips */
.vault-pill {
    position: absolute;
    top: -8px;
    left: -8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px 5px 6px;
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    font-size: 0.6rem;
    font-weight: 600;
    color: #ffd700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    z-index: 5;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

.vault-pill:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border-color: rgba(255, 215, 0, 0.5);
    color: #ffe44d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 20px rgba(255, 215, 0, 0.15);
}

.vault-pill img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

/* Resume Prompt */
/* Resume Prompt — fixed glass card, slides up from bottom */
.resume-prompt {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(calc(100% + 4rem));
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.25rem;
    max-width: 520px;
    width: max-content;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 64px rgba(0, 0, 0, 0.8),
        0 8px 24px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.35s ease;
    pointer-events: none;
}

.resume-prompt.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.resume-art {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, #fff 10%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, #000 40%, transparent);
}

.resume-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.resume-label {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
}

.resume-track {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resume-actions {
    display: flex;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}

.resume-btn {
    padding: 0.45rem 0.9rem;
    border: none;
    border-radius: 8px;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.resume-btn.resume-yes {
    background: var(--red);
    color: #fff;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--red) 35%, transparent);
}

.resume-btn.resume-yes:hover {
    background: #ff2222;
    box-shadow: 0 2px 20px color-mix(in srgb, var(--red) 50%, transparent);
}

.resume-btn.resume-no {
    background: color-mix(in srgb, #fff 8%, transparent);
    color: rgba(255, 255, 255, 0.55);
    border: 1px solid color-mix(in srgb, #fff 8%, transparent);
}

.resume-btn.resume-no:hover {
    background: color-mix(in srgb, #fff 12%, transparent);
    color: rgba(255, 255, 255, 0.8);
    border-color: color-mix(in srgb, #fff 14%, transparent);
}

/* Mobile: full-width card, stacked layout */
@media (max-width: 600px) {
    .resume-prompt {
        bottom: 5rem;
        left: 1rem;
        right: 1rem;
        width: auto;
        max-width: none;
        transform: translateX(0) translateY(calc(100% + 6rem));
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding: 1rem 1.1rem;
    }

    .resume-prompt.visible {
        transform: translateX(0) translateY(0);
    }

    /* Top row: art + text side by side */
    .resume-prompt .resume-art {
        position: absolute;
        top: 1rem;
        left: 1.1rem;
        width: 34px;
        height: 34px;
    }

    .resume-content {
        padding-left: 2.75rem;
    }

    .resume-track {
        max-width: none;
    }

    /* Buttons: full width row below */
    .resume-actions {
        margin-left: 0;
        gap: 0.5rem;
    }

    .resume-btn {
        flex: 1;
        padding: 0.6rem 0.75rem;
        text-align: center;
    }
}

/* Push above player when both visible */
body.player-active .resume-prompt {
    bottom: 6rem;
}

@media (max-width: 600px) {
    body.player-active .resume-prompt {
        bottom: 9rem;
    }
}

/* Player Overlay — Two-State (collapsed mini-bar / expanded panel) */
.player {
    position: absolute;
    bottom: 12px;
    left: 12px;
    right: 12px;
    background-color: color-mix(in srgb, #000 35%, transparent);
    border: 0.5px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #fff 2%, transparent),
        0px 2px 6px 0px color-mix(in srgb, #000 15%, transparent);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


/* Expanded card floats above grid neighbors */
.card:has(.player.expanded) {
    z-index: 10;
}

/* — Collapsed bar (always visible) — */
.player-collapsed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
}

.player-thumb {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.player-title {
    flex: 1;
    min-width: 0;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: width 0.25s ease, opacity 0.25s ease;
}

/* Hide title in collapsed bar when expanded (shown in meta instead) */
.player.expanded .player-collapsed .player-title {
    width: 0;
    opacity: 0;
    flex: 0;
    overflow: hidden;
}

.play-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: var(--red);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.play-btn:hover {
    transform: scale(1.06);
    box-shadow: 0 0 15px var(--red-glow);
}

.play-btn svg {
    width: 12px;
    height: 12px;
    fill: white;
}

.play-btn .icon-play {
    margin-left: 2px;
}

.play-btn.locked {
    background: rgba(255, 255, 255, 0.10);
}

.play-btn .icon-lock {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

/* Active content indicator — card whose content is loaded in bottom player */
.card.active-content .player {
    border-color: var(--red);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--red) 20%, transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, #fff 15%, transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, #fff 10%, transparent),
        0px 0px 20px 0px var(--red-glow),
        0px 4px 12px 0px color-mix(in srgb, #000 40%, transparent);
}

/* — Expanded panel (hidden by default) — */
.player-expanded {
    max-height: 0;
    overflow: hidden;
    padding: 0 12px;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.player.expanded .player-expanded {
    max-height: 280px;
    padding: 6px 12px 12px;
}

/* — Meta row (title + actions) — */
.player-meta {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 2px;
}

.player-info {
    flex: 1;
    min-width: 0;
}

.player-title-full {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

.player-sub {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.info-btn,
.view-btn,
.copy-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    background: transparent;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    text-decoration: none;
}

.info-btn:hover,
.view-btn:hover,
.copy-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.info-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--text-muted);
}

.view-btn svg,
.copy-btn svg {
    width: 16px;
    height: 16px;
    fill: var(--text-muted);
}

.view-btn:hover svg,
.copy-btn:hover svg {
    fill: var(--text);
}

/* Copy Toast */
.copy-toast {
    position: fixed;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 9000;
    backdrop-filter: blur(10px);
    font-size: 0.8rem;
    color: #fff;
}

.copy-toast.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.copy-toast svg {
    width: 18px;
    height: 18px;
    fill: #4ade80;
}

@media (max-width: 600px) {
    .copy-toast {
        bottom: 5rem;
        left: 1rem;
        right: 1rem;
        transform: translateX(0) translateY(20px);
    }
    .copy-toast.visible {
        transform: translateX(0) translateY(0);
    }
}

/* Series title label above tracklist (albums/EPs only) */
.card-series-title {
    padding: 10px 14px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, var(--red), var(--red), #ff6666, var(--red), var(--red));
    background-size: 300% 100%;
    animation: redShine 6s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes redShine {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.card-series-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    margin-left: 3px;
}

/* Card Tracklist (always visible on card) */
.card-tracklist {
    max-height: 140px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 14px 8px;
}

.card-tracklist::-webkit-scrollbar {
    width: 3px;
}

.card-tracklist::-webkit-scrollbar-track {
    background: transparent;
}

.card-tracklist::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.card-track {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.card-track:hover {
    background: rgba(255, 255, 255, 0.06);
}

.card-track.active {
    background: rgba(185, 28, 60, 0.15);
}

.card-track-num {
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.card-track.active .card-track-num {
    color: var(--red);
}

.card-track-name {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.75);
}

.card-track:hover .card-track-name {
    color: rgba(255, 255, 255, 0.9);
}

.card-track.active .card-track-name {
    color: #fff;
}

.card-track-dur {
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Tracklist */
.tracklist {
    max-height: 120px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    margin-top: 6px;
}

.tracklist::-webkit-scrollbar {
    width: 4px;
}

.tracklist::-webkit-scrollbar-track {
    background: transparent;
}

.tracklist::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* LEGACY — .track classes used by card-level tracklists, NOT the player drawer */
.track {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
    transition: background 0.15s ease;
}

.track:hover {
    background: rgba(255, 255, 255, 0.05);
}

.track.active {
    background: rgba(185, 28, 60, 0.15);
}

.track-num {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.track.active .track-num {
    color: var(--red);
}

.track-name {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.track-dur {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background-color: color-mix(in srgb, #000 60%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, #fff 15%, transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, #fff 10%, transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, #000 30%, transparent),
        0px 4px 12px 0px color-mix(in srgb, #000 40%, transparent),
        0px 8px 24px 0px color-mix(in srgb, #000 30%, transparent);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    scrollbar-width: none;
}

.modal::-webkit-scrollbar {
    display: none;
}

.modal-header {
    display: flex;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-cover {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    object-fit: cover;
}

.modal-logo {
    display: block;
    max-width: 80%;
    max-height: 100px;
    object-fit: contain;
    margin: 0 auto;
    padding: 1rem 1.25rem;
}

.modal-info {
    flex: 1;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.modal-series {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.modal-close {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.modal-close svg {
    width: 14px;
    height: 14px;
    fill: var(--text-muted);
}

.modal-body {
    padding: 1.25rem;
}

.modal-desc {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-muted);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Rich text styles — shared between modal + slug page descriptions */
.modal-desc p,
#slug-page .file-description p {
    margin: 0 0 1rem 0;
}
.modal-desc p:last-child,
#slug-page .file-description p:last-child {
    margin-bottom: 0;
}
.modal-desc strong, .modal-desc b,
#slug-page .file-description strong, #slug-page .file-description b {
    color: rgba(255,255,255,0.85);
    font-weight: 600;
}
.modal-desc em, .modal-desc i,
#slug-page .file-description em, #slug-page .file-description i {
    font-style: italic;
    color: rgba(255,255,255,0.7);
}
.modal-desc blockquote,
#slug-page .file-description blockquote {
    border-left: 3px solid var(--red, #ef4444);
    margin: 1rem 0;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.04);
    font-style: italic;
    color: rgba(255,255,255,0.65);
    border-radius: 0 6px 6px 0;
}
.modal-desc blockquote p:last-child,
#slug-page .file-description blockquote p:last-child {
    margin-bottom: 0;
}
.modal-desc a,
#slug-page .file-description a {
    color: var(--red, #ef4444);
    text-decoration: none;
    transition: opacity 0.15s;
}
.modal-desc a:hover,
#slug-page .file-description a:hover {
    text-decoration: underline;
    opacity: 0.85;
}
.modal-desc ul, .modal-desc ol,
#slug-page .file-description ul, #slug-page .file-description ol {
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}
.modal-desc ul { list-style: disc; }
.modal-desc ol { list-style: decimal; }
.modal-desc li,
#slug-page .file-description li {
    margin-bottom: 0.35rem;
}
.modal-desc code,
#slug-page .file-description code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.8em;
    background: rgba(255,255,255,0.08);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}
.modal-desc pre,
#slug-page .file-description pre {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 1rem;
    overflow-x: auto;
    margin: 0.75rem 0;
}
.modal-desc pre code,
#slug-page .file-description pre code {
    background: none;
    padding: 0;
}
.modal-desc h1, .modal-desc h2, .modal-desc h3, .modal-desc h4,
#slug-page .file-description h1, #slug-page .file-description h2,
#slug-page .file-description h3, #slug-page .file-description h4 {
    color: rgba(255,255,255,0.9);
    margin: 1.25rem 0 0.5rem 0;
    line-height: 1.3;
}
.modal-desc h1, #slug-page .file-description h1 { font-size: 1.3rem; }
.modal-desc h2, #slug-page .file-description h2 { font-size: 1.15rem; }
.modal-desc h3, #slug-page .file-description h3 { font-size: 1rem; }
.modal-desc h4, #slug-page .file-description h4 { font-size: 0.9rem; }
.modal-desc h1:first-child, .modal-desc h2:first-child,
.modal-desc h3:first-child, .modal-desc h4:first-child,
#slug-page .file-description h1:first-child, #slug-page .file-description h2:first-child,
#slug-page .file-description h3:first-child, #slug-page .file-description h4:first-child {
    margin-top: 0;
}
.modal-desc hr,
#slug-page .file-description hr {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 1rem 0;
}

/* About Page */
.about-content {
    max-width: 850px;
    margin: 0 auto;
    padding: 2.5rem;
}

.about-hero {
    text-align: center;
    margin-bottom: 3.5rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.about-logo {
    display: block;
    max-width: 420px;
    width: 100%;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 4px 24px rgba(185, 28, 60, 0.3));
}

.about-tagline {
    font-size: 1rem;
    color: var(--red);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 500;
}

.about-section {
    margin-bottom: 2.5rem;
}

.about-section h2 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    position: relative;
    padding-left: 1.25rem;
}

.about-section h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--red);
    border-radius: 2px;
}

.about-section p {
    font-size: 1rem;
    line-height: 2;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 1.25rem;
}

.about-section strong {
    color: #fff;
    font-weight: 600;
}

.about-section em {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
}

.about-section .highlight {
    color: var(--red);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: rgba(185, 28, 60, 0.4);
    text-underline-offset: 3px;
}

.about-section .stars {
    color: #ffd700;
    font-size: 1.3em;
    letter-spacing: 0.1em;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.about-reviews {
    margin: 3rem 0;
    min-height: 200px;
    position: relative;
}

.about-reviews .senja-embed {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.about-reviews.loaded .senja-embed {
    opacity: 1;
}

.about-reviews.loaded .reviews-loading {
    display: none;
}

.reviews-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}

.about-divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
    margin: 3rem 0;
}

.about-video {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 3rem 0;
    border-radius: 12px;
    overflow: hidden;
    background: #0a0a0a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 60px rgba(185, 28, 60, 0.1);
}

.about-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-facade {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.video-facade img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.video-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 3rem 0;
}

.feature-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: all 0.25s ease;
}

.feature-card:hover {
    background: rgba(185, 28, 60, 0.08);
    border-color: rgba(185, 28, 60, 0.25);
    transform: translateY(-3px);
}

.feature-icon {
    font-size: 2.25rem;
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.feature-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.7;
}

.about-framework {
    background: linear-gradient(135deg, rgba(185, 28, 60, 0.15) 0%, rgba(185, 28, 60, 0.03) 100%);
    border: 1px solid rgba(185, 28, 60, 0.3);
    border-radius: 14px;
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
}

.about-framework::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--red), rgba(255, 0, 0, 0.3));
}

.about-framework h2 {
    padding-left: 0;
    text-align: center;
}

.about-framework h2::before {
    display: none;
}

.about-center {
    text-align: center;
    padding-top: 1.5rem;
}

.about-cta-text {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.about-link {
    display: inline-block;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 2.5rem;
    background: var(--red);
    border: none;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(185, 28, 60, 0.4);
}

.about-link:hover {
    background: #c91e42;
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(185, 28, 60, 0.5);
}

@media (max-width: 768px) {
    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-logo {
        max-width: 300px;
    }
}

@media (max-width: 500px) {
    .about-features {
        grid-template-columns: 1fr;
    }
    
    .about-logo {
        max-width: 250px;
    }
    
    .feature-card {
        padding: 1rem;
    }
}

/* Footer */
footer {
    margin-top: 3rem;
    padding: 1.5rem 1.5rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
    transition: padding-bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Add padding when player is active so content isn't hidden */
body.player-active footer {
    padding-bottom: 8rem;
}

.footer-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.footer-logo img {
    height: 32px;
    width: auto;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.footer-logo img:hover {
    opacity: 0.7;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.footer-links a:hover {
    opacity: 0.7;
}

.footer-links img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.footer-links .x-link svg {
    width: 16px;
    height: 16px;
    fill: rgba(255, 255, 255, 1);
}

.footer-copy {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.25);
    text-align: center;
    letter-spacing: 0.02em;
}

.footer-copy a {
    color: rgba(255, 255, 255, 0.3);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-copy a:hover {
    color: rgba(255, 255, 255, 0.5);
}

/* Age Gate */
.age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 1;
    visibility: visible;
    transition: opacity 5s ease, visibility 5s ease;
}

.age-gate.verified {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.age-gate-content {
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.age-gate-logo {
    height: 60px;
    width: auto;
    margin-bottom: 2rem;
}

.age-gate-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.age-gate-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: 2rem;
}

.age-gate-inputs {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.age-select {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    min-width: 80px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 2rem;
}

.age-select:focus {
    outline: none;
    border-color: #fff;
}

.age-select option {
    background: #1a1a1a;
    color: #fff;
}

.age-submit {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.85rem 3rem;
    background: #fff;
    color: var(--red);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.2s ease;
}

.age-submit:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.age-submit:active {
    transform: translateY(0);
}

.hidden {
    display: none;
}

/* Subtle fade-in when inline sections become visible */
#audio-page,
#about-page,
#bookmarks-page,
#newsroom-page,
#pmvs-page,
#godcock-page,
#playlist-page,
#support-page,
#admin-page,
#search-page,
#pages-page,
#slug-page,
#profile-page,
#loyalty-page,
#sirai-page,
#sanctum-page {
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.section-entering {
    opacity: 0 !important;
    transform: translateY(6px) !important;
}

body.full-page-active #site-footer,
body.full-page-active .filter-bar,
body.full-page-active #now-playing,
body.full-page-active .hero-carousel {
    display: none !important;
}
body.sirai-active #now-playing {
    display: flex !important;
}

/* Force-hide player drawer on godcock & video library (CSS fallback — JS inline styles are primary) */
body.hide-player .player-drawer {
    display: none !important;
}

/* (Conversion popup styles removed) */

/* Buffering Indicator */
#buffering-indicator {
    position: fixed;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

#buffering-indicator.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.buffering-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--red);
    border-radius: 50%;
    animation: bufferSpin 0.8s linear infinite;
}

@keyframes bufferSpin {
    to { transform: rotate(360deg); }
}

/* Volume Control */
.now-playing {
    position: fixed;
    bottom: 5.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
    max-width: 200px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: all 0.3s ease;
}

.now-playing.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.now-playing-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.now-playing-bars span {
    width: 3px;
    background: var(--red);
    border-radius: 1px;
    animation: none;
}

.now-playing.playing .now-playing-bars span {
    animation: barPulse 0.8s ease-in-out infinite;
}

.now-playing-bars span:nth-child(1) {
    height: 6px;
    animation-delay: 0s;
}

.now-playing-bars span:nth-child(2) {
    height: 10px;
    animation-delay: 0.2s;
}

.now-playing-bars span:nth-child(3) {
    height: 4px;
    animation-delay: 0.4s;
}

@keyframes barPulse {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}

.now-playing.paused .now-playing-bars span {
    animation: none;
    opacity: 0.5;
}

.now-playing-info {
    overflow: hidden;
}

.now-playing-track {
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.now-playing-series {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .now-playing {
        bottom: 5rem;
        right: 1rem;
        max-width: 160px;
        padding: 0.4rem 0.6rem;
    }
    
    .now-playing-track {
        font-size: 0.65rem;
    }
    
    .now-playing-series {
        font-size: 0.55rem;
    }
}

.volume-control {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 1000;
}

.volume-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.volume-btn:hover {
    background: rgba(50, 50, 50, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

.volume-btn svg {
    width: 22px;
    height: 22px;
    fill: rgba(255, 255, 255, 0.9);
}

.volume-slider-wrap {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 0 1rem;
    height: 48px;
    display: flex;
    align-items: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.volume-control.open .volume-slider-wrap {
    opacity: 1;
    width: 120px;
    padding: 0 1rem;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

@media (max-width: 768px) {
    .volume-control {
        bottom: 1rem;
        right: 1rem;
    }
    
    .volume-btn {
        width: 44px;
        height: 44px;
    }
    
    .volume-slider-wrap {
        height: 44px;
    }
    
    .volume-control.open .volume-slider-wrap {
        width: 100px;
    }
}

/* =============================================
   UNIFIED PLAYER DRAWER
   ============================================= */

/* Player Drawer Container */
/* ============================================================================
   PLAYER DRAWER — Redesigned
   States: full (expanded), collapsed (mini bar), peek (art + title only)
   ============================================================================ */
.player-drawer {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: 340px;
    z-index: 999;
    background: rgba(12, 12, 14, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45),
                0 1px 0 rgba(255, 255, 255, 0.04) inset;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-radius 0.3s ease,
                max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.3s ease,
                border-color 0.3s ease,
                box-shadow 0.3s ease;
    opacity: 0;
    pointer-events: none;
    contain: layout style;
}

body.player-active .player-drawer {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

@media (pointer: coarse) {
    body.player-active .player-drawer.big {
        transform: translateX(0) translateY(0);
    }
}

/* --- State: collapsed (mini bar only) --- */
.player-drawer.collapsed .drawer-content {
    max-height: 0;
    height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
}

/* Handle chevron rotates per state */
.player-drawer .handle-chevron {
    transition: transform 0.3s ease;
}
.player-drawer.collapsed .handle-chevron {
    transform: rotate(180deg);   /* points down → next tap goes to peek */
}
.player-drawer.peek .handle-chevron {
    transform: rotate(0deg);     /* points up → next tap opens full */
}

/* --- State: peek (art + title/artist only) --- */
.player-drawer.peek {
    max-width: 180px;
}
.player-drawer.peek .drawer-content {
    max-height: 0;
    opacity: 0;
    padding: 0 0.75rem;
    overflow: hidden;
}
.player-drawer.peek .drawer-playback {
    display: none;
}
.player-drawer.peek .mini-volume {
    display: none;
}
.player-drawer.peek .drawer-progress {
    display: none;
}
.player-drawer.peek .drawer-mini-row {
    padding: 0.35rem 0.6rem;
}

/* ---- Drawer Handle ---- */
.drawer-handle {
    position: absolute;
    top: -26px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    border: none;
    width: 90px;
    height: 34px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.handle-chevron {
    width: 24px;
    height: 24px;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease, transform 0.3s ease;
}

.drawer-handle:hover .handle-chevron {
    color: rgba(255, 255, 255, 0.9);
}

/* ---- Drawer Content (expanded section) ---- */
.drawer-content {
    padding: 0.75rem 0.75rem 0.5rem;
    max-height: 380px;
    opacity: 1;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, padding 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    will-change: max-height, opacity;
}


/* Mini Volume Control (in mini player bar) */
.mini-volume {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    position: relative;
    transition: opacity 0.25s ease;
}

.mini-volume-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.mini-volume-btn:hover {
    color: rgba(255, 255, 255, 0.85);
}

.mini-volume-btn svg {
    width: 16px;
    height: 16px;
}

.mini-volume-slider-wrap {
    width: 0;
    overflow: hidden;
    opacity: 0;
    transition: width 0.25s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
}

.mini-volume.open .mini-volume-slider-wrap {
    width: 80px;
    opacity: 1;
}

.mini-volume-slider {
    width: 100%;
    height: 28px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    touch-action: none;
}

.mini-volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.mini-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--wave-color, var(--red));
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 6px color-mix(in srgb, var(--wave-color, var(--red)) 40%, transparent);
}

.mini-volume-slider::-moz-range-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    border: none;
}

.mini-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--wave-color, var(--red));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 6px color-mix(in srgb, var(--wave-color, var(--red)) 40%, transparent);
}

.mini-volume-slider::-moz-range-progress {
    background: var(--wave-color, var(--red));
    height: 4px;
    border-radius: 2px;
}

/* ---- Drawer Tracklist (expanded view) ---- */
.drawer-tracklist {
    max-height: 150px;
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 0.35rem;
}

.drawer-tracklist:empty { display: none; }

.drawer-tracklist::-webkit-scrollbar { width: 3px; }
.drawer-tracklist::-webkit-scrollbar-track { background: transparent; }
.drawer-tracklist::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }

.drawer-track {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.drawer-track:hover { background: rgba(255, 255, 255, 0.05); }
.drawer-track.active { background: rgba(185, 28, 60, 0.12); }

.drawer-track-num {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.drawer-track.active .drawer-track-num { color: var(--red); }

.drawer-track-name {
    flex: 1;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.75);
}

.drawer-track.active .drawer-track-name { color: #fff; }

.drawer-track-dur {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.drawer-track-indicator {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 10px;
    color: var(--red);
    opacity: 0;
}

.drawer-track.active .drawer-track-indicator { opacity: 1; }

/* ============================================================================
   MINI PLAYER SECTION (bottom bar — always visible when playing)
   ============================================================================ */
.drawer-mini {
    display: flex;
    flex-direction: column;
    touch-action: manipulation;
}

.drawer-mini-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.5rem 0.15rem;
}

.drawer-cover-wrap {
    flex-shrink: 0;
    border-radius: 6px;
}

.drawer-cover {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
    background: #1a1a1a;
    flex-shrink: 0;
}

.drawer-info {
    flex: 1;
    min-width: 0;
}

.drawer-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--wave-color, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.drawer-artist {
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.drawer-sample-badge {
    display: inline-block;
    padding: 1px 5px;
    border: 1.5px solid #ff0033;
    border-radius: 3px;
    background: rgba(255, 0, 51, 0.12);
    color: #ff0033;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 2px;
    line-height: 1.3;
}

/* ---- Transport Row ----
   [ Visualiser ] [ Prev ] [ Play/Pause ] [ Next ] [ Loop ]
   -------------------------------------------- */
.drawer-playback {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.25s ease, max-height 0.3s ease;
    overflow: hidden;
}

.drawer-transport-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.15s ease, background 0.15s ease;
    position: relative;
    flex-shrink: 0;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.drawer-transport-btn:hover {
    color: #fff;
}

.drawer-transport-btn svg {
    width: 16px;
    height: 16px;
}

/* Touch targets — 44px invisible hit area on touch devices */
@media (pointer: coarse) {
    .drawer-transport-btn::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
    }
}

/* Main play/pause button — accent */
.drawer-transport-btn.main {
    width: 30px;
    height: 30px;
    background: var(--wave-color, var(--red));
    color: #fff;
}

.drawer-transport-btn.main:hover {
    background: var(--wave-color-light, #d91e42);
}

.drawer-transport-btn.main svg {
    width: 16px;
    height: 16px;
}

/* Loop button states */
#drawer-loop-btn i { font-size: 16px; }
#drawer-loop-btn.active {
    color: #22c55e;
    animation: loopGlow 2s ease-in-out infinite;
}
@keyframes loopGlow {
    0%, 100% { box-shadow: none; text-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
    50%      { text-shadow: 0 0 14px rgba(34, 197, 94, 0.6); }
}

@keyframes bigPlayerAmbience {
    0%   { opacity: 0.65; transform: scale(1)    translate(0,   0);    }
    50%  { opacity: 0.90; transform: scale(1.06) translate(2%, -2%);   }
    100% { opacity: 0.70; transform: scale(1.03) translate(-2%, 1%);   }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mini-spin-icon {
    display: none;
    font-size: 22px;
    color: #fff;
    animation: spin 2s linear infinite;
}

/* ============================================================================
   WAVEFORM PROGRESS BAR
   ============================================================================ */
.drawer-progress {
    width: 100%;
    padding: 0rem 0.5rem 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.25s ease, max-height 0.3s ease;
    overflow: hidden;
}

.drawer-waveform {
    flex: 1;
    height: 36px;
    position: relative;
    cursor: pointer;
    touch-action: none;
    overflow: visible;
}

.waveform-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    clip-path: none;
    background: rgba(255, 255, 255, 0.12);
}
.waveform-fill-mask {
    position: absolute;
    top: 0; left: 0;
    width: 0%;
    height: 100%;
    overflow: hidden;
}
.waveform-fill {
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 100%;
    clip-path: none;
    background: linear-gradient(90deg, var(--wave-color, #ff0000), var(--wave-color-light, #ff4d6a));
}

.drawer-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 22px;
    height: 22px;
    background: url('/assets/uigraphics/plus_chrome.png') center/contain no-repeat;
    z-index: 2;
    opacity: 1;
    cursor: grab;
    pointer-events: none;
}

.drawer-progress-thumb:active {
    cursor: grabbing;
}

.drawer-progress-time {
    font-size: 10px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    font-family: 'IBM Plex Mono', monospace;
    min-width: 2rem;
    flex-shrink: 0;
}

#drawer-time-elapsed { text-align: right; }
#drawer-time-total { text-align: left; }

/* ============================================================================
   MOBILE — Player Drawer
   ============================================================================ */
@media (max-width: 600px) {
    /* Float with rounded corners */
    .player-drawer {
        bottom: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        transform: translateY(100%);
        max-width: none;
        width: auto;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    body.player-active .player-drawer {
        transform: translateY(0);
    }

    .drawer-mini {
        position: relative;
    }

    /* ---- Standard + Expanded states: scaled-up ergonomics ---- */
    .player-drawer:not(.peek) .drawer-mini-row {
        padding: 0.55rem 0.7rem 0.3rem;
        gap: 0.5rem;
    }

    .player-drawer:not(.peek) .drawer-cover {
        width: 44px;
        height: 44px;
        border-radius: 8px;
    }

    .player-drawer:not(.peek) .drawer-title {
        font-size: 14px;
        line-height: 1.35;
    }
    .player-drawer:not(.peek) .drawer-artist {
        font-size: 11px;
        line-height: 1.35;
    }

    .player-drawer:not(.peek) .drawer-playback {
        gap: 10px;
    }
    .player-drawer:not(.peek) .drawer-transport-btn {
        width: 32px;
        height: 32px;
    }
    .player-drawer:not(.peek) .drawer-transport-btn.main {
        width: 36px;
        height: 36px;
    }
    .player-drawer:not(.peek) .drawer-transport-btn svg {
        width: 18px;
        height: 18px;
    }
    .player-drawer:not(.peek) .drawer-transport-btn.main svg {
        width: 18px;
        height: 18px;
    }
    .player-drawer:not(.peek) #drawer-loop-btn i {
        font-size: 18px;
    }

    .player-drawer:not(.peek) .drawer-progress {
        padding: 0rem 0.6rem 0.45rem;
        gap: 0.5rem;
    }
    .player-drawer:not(.peek) .drawer-waveform {
        height: 38px;
    }
    .player-drawer:not(.peek) .drawer-progress-time {
        font-size: 11px;
    }
    .player-drawer:not(.peek) .drawer-progress-thumb {
        width: 24px;
        height: 24px;
    }

    .player-drawer:not(.peek) .mini-volume.open .mini-volume-slider-wrap {
        width: 60px;
    }

    /* Expanded tracklist */
    .player-drawer:not(.peek):not(.collapsed) .drawer-content {
        padding: 0.85rem 0.85rem 0.6rem;
    }
    .player-drawer:not(.peek) .drawer-tracklist {
        max-height: 130px;
    }
    .player-drawer:not(.peek) .drawer-track {
        padding: 5px 6px;
        gap: 8px;
    }
    .player-drawer:not(.peek) .drawer-track-name {
        font-size: 13px;
    }
    .player-drawer:not(.peek) .drawer-track-num {
        font-size: 12px;
    }
    .player-drawer:not(.peek) .drawer-track-dur {
        font-size: 12px;
    }

    /* ---- Peek/minimized state: unchanged from original mobile sizes ---- */
    .player-drawer.peek {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    body.player-active .player-drawer.peek {
        transform: translateX(-50%) translateY(0);
    }
    .player-drawer.peek .drawer-mini-row {
        padding: 0.35rem 0.6rem;
    }
    .player-drawer.peek .drawer-cover {
        width: 30px;
        height: 30px;
    }
    .player-drawer.peek .drawer-title {
        font-size: 11px;
    }
    .player-drawer.peek .drawer-artist {
        font-size: 9px;
    }

}

/* ============================================================================
   BIG PLAYER STATE — 6-ZONE LAYOUT
   ============================================================================ */

/* --- Visibility Control --- */
.player-drawer .drawer-big { display: none; }
.player-drawer.big .drawer-big { display: flex; flex-direction: column; }
.player-drawer.big .drawer-mini { display: none; }
.player-drawer.big .drawer-content { max-height: 0; opacity: 0; padding: 0; overflow: hidden; }
.player-drawer.big .handle-chevron { transform: rotate(180deg); }

/* --- Art-Reactive Ambient Gradient --- */
.player-drawer::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 85% 55% at 50% -5%,
            color-mix(in srgb, var(--wave-color, #aa0000) 22%, transparent) 0%,
            transparent 100%),
        radial-gradient(ellipse 55% 40% at 85% 92%,
            color-mix(in srgb, var(--wave-color, #aa0000) 10%, transparent) 0%,
            transparent 100%);
    animation: bigPlayerAmbience 14s ease-in-out infinite alternate;
    animation-play-state: paused;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.player-drawer.big::before {
    opacity: 1;
    animation-play-state: running;
}

/* Ensure player content sits above the gradient overlay */
.player-drawer.big .drawer-big {
    position: relative;
    z-index: 1;
}

/* --- Scaling Custom Properties (defaults = desktop/Tier 4) --- */
.player-drawer {
    --big-art-size: 340px;
    --big-font-title: 18px;
    --big-font-artist: 13px;
    --big-control-size: 40px;
    --big-control-main: 48px;
    --big-control-gap: 22px;
    --big-wave-height: 40px;
    --big-padding: 20px;
    --big-panel-width: 420px;
    /* Zone spacing — replaces uniform gap */
    --big-zone-gap: 16px;
    --big-zone-gap-hero: 20px;
}

/* --- Big Player Container (zones control their own spacing) --- */
.drawer-big {
    position: relative;
    flex-direction: column;
    align-items: center;
    padding: var(--big-padding);
    gap: 0;
    overflow: hidden;
    contain: layout style;
}

/* --- Zone 1: HEADER (dismiss bar) --- */
.big-dismiss-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 4px;
    margin-bottom: var(--big-zone-gap);
}
.big-dismiss-btn {
    margin-left: auto;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.big-dismiss-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.10) 100%);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}

/* --- Zone 2: HERO (cover art) — gets the MOST space --- */
.big-art-wrap {
    width: var(--big-art-size);
    height: var(--big-art-size);
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.6),
        0 0 80px color-mix(in srgb, var(--wave-color, #990000) 22%, transparent);
    margin-bottom: var(--big-zone-gap-hero);
}
.big-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #1a1a1a;
}

/* --- Zone 3: META (title + artist) --- */
.big-info {
    text-align: center;
    width: 100%;
    min-width: 0;
    padding: 0 8px;
    margin-bottom: var(--big-zone-gap);
}
.big-title {
    font-size: var(--big-font-title);
    font-weight: 600;
    color: var(--wave-color-light, #fff);
    font-family: 'Yeezy', 'Segoe UI', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.big-artist {
    font-size: var(--big-font-artist);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-top: 4px;
}
.big-sample-badge {
    display: inline-block;
    padding: 2px 6px;
    border: 1.5px solid #ff0033;
    border-radius: 3px;
    background: rgba(255, 0, 51, 0.12);
    color: #ff0033;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 4px;
}

/* --- Zone 4: SCRUBBER (its own section, not grouped with controls) --- */
.big-progress {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    margin-bottom: var(--big-zone-gap);
}
.big-waveform {
    flex: 1;
    height: var(--big-wave-height);
    position: relative;
    cursor: pointer;
    touch-action: none;
    overflow: visible;
}
.big-time {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    font-variant-numeric: tabular-nums;
    font-family: 'IBM Plex Mono', monospace;
    min-width: 2.5rem;
    flex-shrink: 0;
}
#big-time-elapsed { text-align: right; }
#big-time-total { text-align: left; }

.big-progress-thumb {
    width: 24px;
    height: 24px;
}
.big-progress-thumb.scrubbing {
    transform: translate(-50%, -50%) scale(1.4);
    transition: transform 0.1s ease;
}

/* --- Zone 5: CONTROLS --- */
.big-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Primary row: shuffle / prev / play / next / loop */
.big-controls-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Outer flank buttons (shuffle / loop) — smaller, dimmer */
.big-ctrl-flank {
    width: 34px !important;
    height: 34px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%) !important;
    border-color: rgba(255,255,255,0.07) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}
.big-ctrl-flank:hover {
    color: rgba(255, 255, 255, 0.75) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%) !important;
}

/* Secondary row: volume + queue */
.big-controls-secondary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.big-controls-secondary .big-ctrl-btn {
    width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.5);
    background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
    border-color: rgba(255,255,255,0.07);
    box-shadow: 0 1px 6px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.big-controls-secondary .big-ctrl-btn:hover {
    color: rgba(255, 255, 255, 0.85);
    background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.06) 100%);
    border-color: rgba(255,255,255,0.13);
}
.big-controls-secondary .big-ctrl-btn svg { width: 18px; height: 18px; }
#big-loop-btn i { font-size: 17px; }
#big-loop-btn.active {
    color: #22c55e !important;
    animation: loopGlow 2s ease-in-out infinite;
}
/* Shuffle button active state */
#big-shuffle-btn.active {
    color: #22c55e !important;
    animation: loopGlow 2s ease-in-out infinite;
}
#big-shuffle-btn i { font-size: 17px; }
/* Shuffle indicator in dismiss bar */
.shuffle-indicator {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #22c55e;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}
.shuffle-indicator i { font-size: 13px; }

.big-ctrl-btn {
    width: var(--big-control-size);
    height: var(--big-control-size);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.05) 100%);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.10);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.80);
    transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    padding: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.big-ctrl-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, rgba(255,255,255,0.20) 0%, rgba(255,255,255,0.09) 100%);
    border-color: rgba(255,255,255,0.18);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.14);
}
.big-ctrl-btn svg {
    width: 22px;
    height: 22px;
}
.big-ctrl-btn.main {
    width: var(--big-control-main);
    height: var(--big-control-main);
    background: linear-gradient(135deg, color-mix(in srgb, var(--wave-color, #ff0000) 80%, transparent), color-mix(in srgb, var(--wave-color, #ff0000) 90%, #000));
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--wave-color, #ff0000) 40%, transparent),
                0 1px 0 rgba(255, 255, 255, 0.15) inset;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.big-ctrl-btn.main:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--wave-color, #ff0000) 90%, transparent), color-mix(in srgb, var(--wave-color, #ff0000) 95%, #000));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--wave-color, #ff0000) 50%, transparent),
                0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.big-ctrl-btn.main svg {
    width: 26px;
    height: 26px;
}

/* --- Big Volume (inside secondary row) --- */
.big-volume {
    display: flex;
    align-items: center;
    gap: 6px;
}
.big-volume-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease;
    padding: 0;
}
.big-volume-btn:hover { color: rgba(255, 255, 255, 0.7); }
.big-volume-btn svg { width: 18px; height: 18px; }
.big-volume-slider {
    width: 90px;
    height: 28px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    touch-action: none;
}
.big-volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
.big-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--wave-color, var(--red));
    border-radius: 50%;
    margin-top: -5px;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 6px color-mix(in srgb, var(--wave-color, var(--red)) 40%, transparent);
}
.big-volume-slider::-moz-range-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    border: none;
}
.big-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--wave-color, var(--red));
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 6px color-mix(in srgb, var(--wave-color, var(--red)) 40%, transparent);
}
.big-volume-slider::-moz-range-progress {
    background: var(--wave-color, var(--red));
    height: 4px;
    border-radius: 2px;
}

/* --- Queue Button Active State --- */
#big-queue-btn.active {
    color: var(--red);
}

/* --- Queue Panel (slide-up overlay inside Big Player) --- */
.big-queue-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 65%;
    background: rgba(12, 12, 14, 0.95);
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px 18px 0 0;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 2;
    pointer-events: none;
}
.big-queue-panel.open {
    transform: translateY(0);
    pointer-events: auto;
}

.big-queue-panel-handle {
    display: flex;
    justify-content: center;
    padding: 10px 0 4px;
    cursor: grab;
}
.big-queue-panel-pill {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

.big-queue-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 16px 8px;
}
.big-queue-panel-title {
    font-family: 'Yeezy', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}
.big-queue-panel-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: color 0.2s ease;
}
.big-queue-panel-close:hover {
    color: rgba(255, 255, 255, 0.7);
}

.big-queue-panel-list {
    flex: 1;
    overflow-y: auto;
    padding: 0 12px 12px;
    -webkit-overflow-scrolling: touch;
}
.big-queue-panel-list:empty::after {
    content: 'No tracks in queue';
    display: block;
    text-align: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 13px;
    padding: 24px 0;
}
.big-queue-panel-list::-webkit-scrollbar { width: 3px; }
.big-queue-panel-list::-webkit-scrollbar-track { background: transparent; }
.big-queue-panel-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }

/* Track items inside queue panel — reuse .drawer-track base styles */
.big-queue-panel-list .drawer-track {
    padding: 6px 8px;
    gap: 8px;
}
.big-queue-panel-list .drawer-track-name { font-size: 13px; }
.big-queue-panel-list .drawer-track-num { font-size: 12px; }
.big-queue-panel-list .drawer-track-dur { font-size: 12px; }

/* --- Queue Has Items Indicator --- */
.big-ctrl-btn.queue-has-items {
    color: #f59e0b;
}

/* --- User Queue Panel Items --- */
.queue-panel-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 8px;
}
.queue-panel-header-text {
    font-family: 'Yeezy', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
}
.queue-clear-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.queue-clear-btn:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.4);
}

.queue-panel-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.queue-panel-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.queue-drag-handle {
    color: rgba(255, 255, 255, 0.2);
    cursor: grab;
    font-size: 16px;
    flex-shrink: 0;
    padding: 2px;
}
.queue-drag-handle:hover {
    color: rgba(255, 255, 255, 0.4);
}
.queue-item-cover {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.queue-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.queue-item-title {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.queue-item-artist {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.queue-item-duration {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.queue-item-remove {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    font-size: 14px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}
.queue-item-remove:hover {
    color: #ef4444;
}
.queue-panel-item.queue-dragging {
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.08);
}
.queue-drag-placeholder {
    background: rgba(245, 158, 11, 0.1);
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: 8px;
}

/* --- Transitions --- */
.drawer-big {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.24s cubic-bezier(0.16, 1, 0.3, 1) 0.04s,
                transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) 0.04s;
}
.player-drawer.big .drawer-big {
    opacity: 1;
    transform: translateY(0);
}

/* --- Mobile Scroll Lock (touch devices only — desktop big player is a floating overlay) --- */
@media (pointer: coarse) {
    body.big-player-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }
}

/* ============================================================================
   BIG PLAYER — DEVICE TIERS (zone spacing overrides per tier)
   ============================================================================ */

/* Tier 1 — Small Phones (max-width: 389px) */
@media (max-width: 389px) {
    .player-drawer {
        --big-art-size: clamp(220px, min(88vw, 44vh), 340px);
        --big-font-title: 18px;
        --big-font-artist: 12px;
        --big-control-size: 40px;
        --big-control-main: 48px;
        --big-control-gap: 20px;
        --big-wave-height: 36px;
        --big-padding: 14px;
        --big-zone-gap: clamp(6px, 2vh, 12px);
        --big-zone-gap-hero: clamp(8px, 2.5vh, 16px);
    }
    .player-drawer.big {
        position: fixed;
        inset: 0;
        max-width: none;
        border-radius: 0;
        z-index: 1001;
        background: rgba(5, 5, 7, 0.97);
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        transform: translateX(0) translateY(0);
        width: auto;
        border: none;
        box-shadow: none;
    }
    .player-drawer.big .drawer-big {
        height: 100%;
        justify-content: flex-start;
        padding-top: max(60px, calc(env(safe-area-inset-top) + 46px));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .player-drawer.big .big-dismiss-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: max(14px, env(safe-area-inset-top)) 14px 0;
        margin: 0;
        z-index: 2;
    }
    .player-drawer.big .drawer-handle { display: none; }
    .big-volume { display: none; }
}

/* Tier 2 — Large Phones (390px-428px) */
@media (min-width: 390px) and (max-width: 428px) {
    .player-drawer {
        --big-art-size: clamp(260px, min(88vw, 46vh), 380px);
        --big-font-title: 20px;
        --big-font-artist: 13px;
        --big-control-size: 44px;
        --big-control-main: 52px;
        --big-control-gap: 24px;
        --big-wave-height: 38px;
        --big-padding: 16px;
        --big-zone-gap: clamp(8px, 2vh, 14px);
        --big-zone-gap-hero: clamp(10px, 3vh, 18px);
    }
    .player-drawer.big {
        position: fixed;
        inset: 0;
        max-width: none;
        border-radius: 0;
        z-index: 1001;
        background: rgba(5, 5, 7, 0.97);
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        transform: translateX(0) translateY(0);
        width: auto;
        border: none;
        box-shadow: none;
    }
    .player-drawer.big .drawer-big {
        height: 100%;
        justify-content: flex-start;
        padding-top: max(62px, calc(env(safe-area-inset-top) + 46px));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .player-drawer.big .big-dismiss-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: max(16px, env(safe-area-inset-top)) 16px 0;
        margin: 0;
        z-index: 2;
    }
    .player-drawer.big .drawer-handle { display: none; }
    .big-volume { display: none; }
}

/* Tier 3 — Phablets / Large Phones (429px-767px) */
@media (min-width: 429px) and (max-width: 767px) {
    .player-drawer {
        --big-art-size: clamp(280px, min(74vw, 48vh), 430px);
        --big-font-title: 22px;
        --big-font-artist: 14px;
        --big-control-size: 46px;
        --big-control-main: 54px;
        --big-control-gap: 28px;
        --big-wave-height: 44px;
        --big-padding: 24px;
        --big-zone-gap: clamp(10px, 2.5vh, 20px);
        --big-zone-gap-hero: clamp(12px, 3vh, 24px);
    }
    .player-drawer.big {
        position: fixed;
        inset: 0;
        max-width: none;
        border-radius: 0;
        z-index: 1001;
        background: rgba(5, 5, 7, 0.97);
        backdrop-filter: blur(8px) saturate(120%);
        -webkit-backdrop-filter: blur(8px) saturate(120%);
        transform: translateX(0) translateY(0);
        width: auto;
        border: none;
        box-shadow: none;
    }
    .player-drawer.big .drawer-big {
        height: 100%;
        justify-content: flex-start;
        padding-top: max(70px, calc(env(safe-area-inset-top) + 46px));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    .player-drawer.big .big-dismiss-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: max(20px, env(safe-area-inset-top)) 24px 0;
        margin: 0;
        z-index: 2;
    }
    .player-drawer.big .drawer-handle { display: none; }
}

/* Tier 4 — Tablets / iPads (768px+, touch devices) */
@media (min-width: 768px) and (pointer: coarse) {
    .player-drawer {
        --big-art-size: clamp(320px, min(55vw, 50vh), 540px);
        --big-font-title: 30px;
        --big-font-artist: 18px;
        --big-control-size: 56px;
        --big-control-main: 68px;
        --big-control-gap: 32px;
        --big-wave-height: 56px;
        --big-padding: clamp(24px, 4vw, 48px);
        --big-zone-gap: clamp(14px, 3vh, 36px);
        --big-zone-gap-hero: clamp(16px, 3.5vh, 48px);
    }
    .player-drawer.big {
        position: fixed;
        inset: 0;
        max-width: none;
        border-radius: 0;
        z-index: 1001;
        background: rgba(6, 6, 8, 0.94);
        backdrop-filter: blur(32px) saturate(140%);
        -webkit-backdrop-filter: blur(32px) saturate(140%);
        transform: translateX(0) translateY(0);
        width: auto;
        border: none;
        box-shadow: none;
    }
    .player-drawer.big .drawer-big {
        height: 100%;
        max-width: 720px;
        margin: 0 auto;
        justify-content: center;
        padding-top: max(24px, env(safe-area-inset-top));
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    .player-drawer.big .drawer-handle { display: none; }
    .big-queue-panel { max-height: 55%; }
}

/* Tier 5 — Desktop (≥1025px, mouse/trackpad only) */
@media (min-width: 1025px) and (pointer: fine) {
    .player-drawer.big {
        bottom: 1rem;
        left: 50%;
        transform: translateX(-50%);
        max-width: var(--big-panel-width);
        max-height: 85vh;
        border-radius: 22px;
        overflow: hidden;
        background: rgba(12, 12, 14, 0.72);
        border: 1px solid rgba(255, 255, 255, 0.06);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5),
                    0 1px 0 rgba(255, 255, 255, 0.04) inset;
    }
    .big-dismiss-bar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        padding: 14px 16px 0;
        margin: 0;
        z-index: 2;
    }
    .player-drawer.big .drawer-big { padding-top: 52px; }
    .big-queue-panel { max-height: 75%; }
}

/* Height-Aware Adjustment (short devices / landscape) */
@media (max-height: 600px) {
    .player-drawer {
        --big-art-size: clamp(100px, 25vh, 160px);
        --big-zone-gap: clamp(4px, 1.5vh, 8px);
        --big-zone-gap-hero: clamp(6px, 2vh, 10px);
    }
}

/* HIDE OLD PLAYERS - replaced by unified drawer */
.visualiser-player,
.mini-player,
.volume-control,
.now-playing,
.vis-controls,
.controls-toggle,
.colour-controls {
    display: none !important;
}

/* ============================================================================
   MEMBERSHIP BADGES (Monthly Pig / Lifetime Pig)
   ============================================================================ */
.membership-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: 4px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

/* Shiny sweep animation */
.membership-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.35),
        transparent
    );
    animation: badge-shine 3s ease-in-out infinite;
}

@keyframes badge-shine {
    0% { left: -100%; }
    40%, 100% { left: 150%; }
}

/* Checkmark icon */
.membership-badge svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
}

/* Monthly Pig - Gold/Yellow */
.membership-badge-monthly {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 40%, #d97706 70%, #fbbf24 100%);
    color: #451a03;
    box-shadow:
        0 0 10px rgba(251, 191, 36, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.membership-badge-monthly svg {
    fill: #451a03;
}

/* Lifetime Pig - Red */
.membership-badge-lifetime {
    background: linear-gradient(135deg, #f87171 0%, #ef4444 40%, #dc2626 70%, #f87171 100%);
    color: #fff;
    box-shadow:
        0 0 14px rgba(239, 68, 68, 0.45),
        0 1px 2px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
}

.membership-badge-lifetime svg {
    fill: #fff;
}

/* Container for account icon + badge */
.account-with-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile: stack badge below icon */
@media (max-width: 480px) {
    .account-with-badge {
        flex-direction: column;
        gap: 0.25rem;
    }

    .membership-badge {
        font-size: 0.5rem;
        padding: 0.15rem 0.4rem;
    }

    .membership-badge svg {
        width: 9px;
        height: 9px;
    }
}

/* ============================================================================
   HERO CAROUSEL - Netflix-style banner carousel
   ============================================================================ */

.hero-carousel {
    position: relative;
    width: 100%;
    height: 55vh;
    min-height: 320px;
    max-height: 600px;
    overflow: hidden;
    background: var(--black);
    /* Negative margin pulls main up to overlap hero.
       Adjust this to control gap to content. Do NOT reduce main padding-top. */
    margin-bottom: -10rem;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.hero-carousel.loaded {
    opacity: 1;
}

.hero-carousel.hidden {
    display: none;
}

/* Bottom fade gradient overlay - smooth fade, no hard line */
.hero-carousel::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 280px;
    background: linear-gradient(to top, var(--black) 0%, transparent 100%);
    z-index: 15;
    pointer-events: none;
}

.hero-carousel-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Individual slide */
.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
    z-index: 1;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Background image with Ken Burns effect */
.hero-slide-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-bg-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

/* Gradient overlay */
.hero-slide-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.15) 0%,
        transparent 30%
    ),
    linear-gradient(
        to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.6) 12%,
        rgba(0, 0, 0, 0.35) 28%,
        rgba(0, 0, 0, 0.15) 48%,
        transparent 75%
    );
    pointer-events: none;
}

/* Slide content - constrained to grid width on wide screens */
.hero-slide-content {
    position: absolute;
    bottom: 22%;
    left: var(--content-align);
    max-width: 550px;
    z-index: 10;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                opacity 0.6s ease 0.2s;
}

.hero-slide.active .hero-slide-content {
    transform: translateY(0);
    opacity: 1;
}

/* Logo image (instead of title) */
.hero-slide-logo {
    margin-bottom: 1.25rem;
    display: none;
}

.hero-slide-logo img {
    max-width: 350px;
    max-height: 120px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.hero-slide.has-logo .hero-slide-logo {
    display: block;
}

.hero-slide.has-logo .hero-slide-title {
    display: none;
}

/* Title */
.hero-slide-title {
    font-size: 3rem;
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
    color: #fff;
}

/* Description */
.hero-slide-description {
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.5rem;
    max-width: 450px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* CTA Button */
.hero-slide-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.25rem;
    border-radius: 8px;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
}

.hero-slide-btn svg {
    flex-shrink: 0;
}

.hero-title-icon {
    font-size: 0.85em;
    margin-right: 0.3em;
}

.hero-title-icon img.hero-title-icon-img {
    height: 0.85em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.3em;
    filter: brightness(0) invert(1);
}

.hero-title-icon .ti {
    margin-right: 0.3em;
}

.hero-btn-icon {
    font-size: 1.2em;
    margin-right: 0.25em;
    line-height: 1;
}

img.hero-btn-icon {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin-right: 0.25em;
    filter: brightness(0) invert(1);
}

.hero-btn-icon.ti {
    font-size: 1.2em;
    margin-right: 0.25em;
}

/* Button styles — glass with light colour tint */
.hero-slide-btn.btn-primary {
    background-color: color-mix(in srgb, var(--red, #ff0000) 30%, color-mix(in srgb, #000 35%, transparent));
    border: 1px solid color-mix(in srgb, var(--red, #ff0000) 40%, rgba(255, 255, 255, 0.12));
    color: #fff;
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #fff 8%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 12%, transparent),
        0px 2px 10px 0px color-mix(in srgb, var(--red, #ff0000) 20%, transparent);
}

.hero-slide-btn.btn-primary:hover {
    background-color: color-mix(in srgb, var(--red, #ff0000) 30%, color-mix(in srgb, #000 35%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 55%, rgba(255, 255, 255, 0.15));
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #fff 10%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 15%, transparent),
        0px 4px 16px 0px color-mix(in srgb, var(--red, #ff0000) 30%, transparent);
}

.hero-slide-btn.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-slide-btn.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero-slide-btn.btn-gold {
    background: rgba(255, 214, 10, 0.12);
    border: 1px solid rgba(255, 214, 10, 0.25);
    color: #fff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.hero-slide-btn.btn-gold:hover {
    background: rgba(255, 214, 10, 0.22);
    border-color: rgba(255, 214, 10, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-slide-btn.btn-outline {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hero-slide-btn.btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.hero-slide-btn.btn-custom {
    background-color: color-mix(in srgb, var(--btn-color) 30%, color-mix(in srgb, #000 35%, transparent));
    border: 1px solid color-mix(in srgb, var(--btn-color) 40%, rgba(255, 255, 255, 0.12));
    color: #fff;
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #fff 8%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 12%, transparent),
        0px 2px 10px 0px color-mix(in srgb, var(--btn-color) 20%, transparent);
}
.hero-slide-btn.btn-custom:hover {
    background-color: color-mix(in srgb, var(--btn-color) 40%, color-mix(in srgb, #000 35%, transparent));
    border-color: color-mix(in srgb, var(--btn-color) 55%, rgba(255, 255, 255, 0.15));
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, #fff 10%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 15%, transparent),
        0px 4px 16px 0px color-mix(in srgb, var(--btn-color) 30%, transparent);
}

/* Navigation arrows - hidden, using dots instead */
.hero-nav {
    display: none;
}

/* Dot indicators - simple dots, centered near bottom of banner.
   Must stay above the filter bar (~5rem from carousel bottom). */
.hero-indicators {
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    z-index: 20;
}

.hero-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.hero-indicator:hover {
    background: rgba(255, 255, 255, 0.6);
}

.hero-indicator.active {
    background: #fff;
}

/* Progress bar - hidden */
.hero-progress {
    display: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .hero-carousel {
        height: 60vh;
        min-height: 350px;
    }

    .hero-slide-content {
        left: var(--content-padding);
    }
}

@media (max-width: 768px) {
    :root {
        --content-padding: 1.5rem;
    }

    .hero-carousel {
        height: 55vh;
        min-height: 320px;
        margin-bottom: -8rem;
    }

    .hero-carousel::before {
        height: 120px;
    }

    .hero-slide-content {
        bottom: 12%;
        left: var(--content-padding);
        right: var(--content-padding);
    }

    .hero-slide-title {
        font-size: 2rem;
    }

    .hero-slide-logo img {
        max-width: 200px;
        max-height: 80px;
    }

    .hero-slide-description {
        font-size: 0.875rem;
        margin-bottom: 1rem;
    }

    .hero-slide-btn {
        font-size: 0.8rem;
        padding: 0.45rem 1rem;
    }

    .hero-nav {
        display: none;
    }

    .hero-indicators {
        display: none;
    }

    .hero-indicator {
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .hero-carousel {
        height: 50vh;
        min-height: 280px;
    }
}

/* Touch/swipe indicator on mobile */
@media (hover: none) and (pointer: coarse) {
    .hero-carousel::after {
        content: '';
        position: absolute;
        bottom: 4rem;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: rgba(255, 255, 255, 0.3);
        border-radius: 2px;
        opacity: 0;
        animation: swipeHint 2s ease-in-out 2s;
    }

    @keyframes swipeHint {
        0%, 100% { opacity: 0; transform: translateX(-50%); }
        20%, 80% { opacity: 1; }
        40% { transform: translateX(-70%); }
        60% { transform: translateX(-30%); }
    }
}

/* =============================================
   PROMO HERO (logged-out)
   ============================================= */
.promo-hero {
    position: relative;
    width: 100%;
    height: 62vh;
    max-height: 660px;
    margin-bottom: -10rem;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1.2s ease;
}
.promo-hero.loaded {
    opacity: 1;
}
.promo-hero-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}
.promo-hero-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    max-width: 720px;
    z-index: 2;
    filter: drop-shadow(0 4px 40px rgba(0,0,0,0.6));
}
.promo-hero-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 320px;
    background: linear-gradient(to top, #000 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* Tagline under the logo — Syne, red→black gradient */
.promo-hero-tagline {
    position: absolute;
    top: calc(50% + 5.8rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    font-family: 'Syne', 'Yeezy', sans-serif;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(180deg, #ff3a4d 0%, #b00020 55%, #2a0006 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.85));
    pointer-events: none;
    margin: 0;
}

/* Divider between promo CTAs and content (logged-out only) */
.promo-hero-divider {
    max-width: 400px;
    width: 60%;
    height: 1px;
    margin: 0 auto 0.2rem;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    position: relative;
    z-index: 5;
}

/* Promo CTA buttons under the logo */
.promo-hero-buttons {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    z-index: 4;
    width: max-content;
    max-width: 92vw;
}
.promo-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.25rem;
    border-radius: 999px;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    white-space: nowrap;
}
.promo-hero-btn i {
    font-size: 1rem;
}

/* Monthly — animated red gradient */
.promo-hero-btn--primary {
    color: #fff;
    border: 1px solid color-mix(in srgb, var(--red) 70%, #fff);
    background-image: linear-gradient(
        100deg,
        #5a0010 0%,
        #b00020 22%,
        #ff2a3d 50%,
        #b00020 78%,
        #5a0010 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: promoBtnRedShimmer 7s ease-in-out infinite;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--red) 45%, transparent);
}
.promo-hero-btn--primary:hover {
    box-shadow: 0 6px 32px color-mix(in srgb, var(--red) 70%, transparent);
}
@keyframes promoBtnRedShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Lifetime — animated gold gradient */
.promo-hero-btn--secondary {
    color: #1a1100;
    border: 1px solid rgba(255, 215, 120, 0.7);
    background-image: linear-gradient(
        100deg,
        #6b4a00 0%,
        #b8860b 18%,
        #f7d774 38%,
        #fff2b3 50%,
        #f7d774 62%,
        #b8860b 82%,
        #6b4a00 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    animation: promoBtnGoldShimmer 7s ease-in-out infinite;
    box-shadow: 0 4px 24px rgba(212, 175, 55, 0.45);
}
.promo-hero-btn--secondary:hover {
    box-shadow: 0 6px 32px rgba(212, 175, 55, 0.7);
}
@keyframes promoBtnGoldShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .promo-hero-btn--primary,
    .promo-hero-btn--secondary {
        animation: none;
        background-position: 50% 50%;
    }
}
.promo-hero-btn--ghost {
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.15);
}
.promo-hero-btn--ghost:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

@media (max-width: 480px) {
    .promo-hero-logo {
        top: 36%;
    }
    .promo-hero-tagline {
        top: calc(36% + 3rem);
        bottom: auto;
        font-size: 0.6rem;
        letter-spacing: 0.16em;
    }
    .promo-hero-buttons {
        bottom: 2.5rem;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.45rem;
        width: 86vw;
        max-width: 360px;
    }
    .promo-hero-btn {
        justify-content: center;
        font-size: 0.62rem;
        padding: 0.5rem 0.6rem;
        letter-spacing: 0.05em;
        gap: 0.35rem;
    }
    .promo-hero-btn i {
        font-size: 0.85rem;
    }
    .promo-hero-btn--ghost {
        grid-column: 1 / -1;
    }
}
body.logged-out .hero-carousel,
body.logged-out .pinned-section,
body.logged-out #pinned-section,
body.logged-out .section-separator {
    display: none !important;
}
body.logged-out .promo-hero {
    margin-bottom: -1rem;
}

@media (max-width: 768px) {
    .promo-hero {
        height: 54vh;
        margin-bottom: -8rem;
    }
    .promo-hero-logo {
        width: 75%;
    }
    .promo-hero-fade {
        height: 180px;
    }
}
@media (max-width: 480px) {
    .promo-hero {
        height: 48vh;
        margin-bottom: -6rem;
    }
    .promo-hero-logo {
        width: 85%;
    }
    .promo-hero-fade {
        height: 140px;
    }
}

/* =============================================
   NOTIFICATIONS
   ============================================= */

/* Heart notification icon — always red gradient */
.nav-heart-icon {
    background: linear-gradient(180deg, #ff5555 0%, #cc2233 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: filter 0.2s ease;
}

.nav-icon:hover .nav-heart-icon {
    filter: drop-shadow(0 0 6px rgba(210, 47, 47, 0.4));
}

/* News icon — no filled variant, badge indicates unread */

.chest-wrapper {
    position: relative;
}

.chest-trigger {
    cursor: pointer;
    position: relative;
}

/* Unread count badge */
.chest-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ff4455;
    pointer-events: none;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    display: none;
}

/* Login Prompt Overlay */
.login-prompt-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(40px) saturate(130%);
    -webkit-backdrop-filter: blur(40px) saturate(130%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}

.login-prompt-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.login-prompt {
    position: relative;
    text-align: center;
    padding: 52px 48px 44px;
    max-width: 420px;
    width: 90%;
    border-radius: 20px;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(0, 0, 0, 0.4) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 40px rgba(0, 0, 0, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(0, 0, 0, 0.3);
    transform: scale(0.92) translateY(12px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.login-prompt::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    pointer-events: none;
}

.login-prompt-overlay.visible .login-prompt {
    transform: scale(1) translateY(0);
}

.login-prompt__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    transition: all 0.2s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.login-prompt__close:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.15);
}

.login-prompt__logo {
    display: block;
    margin: 0 auto 28px;
    max-width: 200px;
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 2px 12px rgba(255, 0, 0, 0.15));
}

.login-prompt__text {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 32px;
    padding: 0 8px;
}

.login-prompt__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.2) 0%, rgba(88, 101, 242, 0.08) 100%);
    color: #fff;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid rgba(88, 101, 242, 0.35);
    border-radius: 12px;
    cursor: pointer;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 2px 12px rgba(88, 101, 242, 0.15);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.login-prompt__btn:hover {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.35) 0%, rgba(88, 101, 242, 0.15) 100%);
    border-color: rgba(88, 101, 242, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 24px rgba(88, 101, 242, 0.3);
    transform: translateY(-1px);
}

.login-prompt__btn:active {
    transform: translateY(0);
}

.login-prompt__btn svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    opacity: 0.7;
}

/* =============================================
   HAMBURGER BUTTON
   ============================================= */

.hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3.5px;
    width: 28px;
    height: 28px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 0;
    z-index: 1002;
    position: relative;
}

.hamburger-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
}

.hamburger-btn span {
    display: block;
    width: 14px;
    height: 1.5px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.2s ease;
    opacity: 0.6;
}

.hamburger-btn.open span {
    opacity: 1;
}

.hamburger-btn.open span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.open span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

/* =============================================
   DRAWER NAVIGATION
   ============================================= */

.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.drawer-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 256px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1001;
    transform: translateX(-100%);
    will-change: transform;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.drawer-nav.open {
    transform: translateX(0);
}

.drawer-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    flex-shrink: 0;
}

.drawer-nav-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.25);
}

.drawer-nav-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    opacity: 0.4;
}

.drawer-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.02) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.drawer-nav-close:hover {
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.14) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.3);
}

.drawer-nav-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.drawer-nav-sections,
.drawer-nav-utility {
    padding: 0.25rem 0.75rem;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.drawer-section-title {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.32);
    padding: 1.25rem 1.6rem 0.4rem;
    flex-shrink: 0;
}
.drawer-section-title:first-child,
#sidebar-limey + .drawer-section-title {
    padding-top: 0.85rem;
}

.drawer-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.drawer-nav-item i {
    font-size: 1.15rem;
    width: 1.15rem;
    text-align: center;
    color: var(--red);
    flex-shrink: 0;
    transition: filter 0.25s ease;
}

.drawer-nav-item-img {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
    flex-shrink: 0;
    filter: brightness(0) saturate(100%) invert(15%) sepia(95%) saturate(6000%) hue-rotate(358deg) brightness(100%) contrast(110%);
    transition: filter 0.25s ease;
}

.drawer-nav-item:hover {
    color: #fff;
}

/* Unread bubble for drawer items (Newsroom, etc) — same look as the header
   chest-badge so the two surfaces stay consistent. */
.drawer-nav-badge {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--red, #e8384f);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    letter-spacing: 0;
    box-shadow: 0 0 10px rgba(220, 38, 38, 0.55);
}

.drawer-nav-item:hover i {
    filter: drop-shadow(0 0 6px var(--red));
}

.drawer-nav-item:hover .drawer-nav-item-img {
    filter: drop-shadow(0 0 6px rgba(255, 60, 60, 0.6));
    opacity: 1;
}

/* Muted nav items dim the icon + label per-element rather than via parent
   opacity, so badges (e.g. drawer-nav-comingsoon) keep their full strength. */
.drawer-nav-item--muted i {
    color: rgba(255, 255, 255, 0.3);
}
.drawer-nav-item--muted span:not(.drawer-nav-beta):not(.drawer-nav-comingsoon) {
    color: rgba(255, 255, 255, 0.3);
}

.drawer-nav-beta {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--red);
    background: rgba(255, 60, 60, 0.12);
    border: 1px solid rgba(255, 60, 60, 0.2);
    border-radius: 6px;
    padding: 0.15rem 0.4rem;
    margin-left: auto;
    line-height: 1;
}

.drawer-nav-divider {
    height: 1px;
    margin: 0.35rem 1.25rem;
    background: rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.drawer-nav-links {
    list-style: none;
    margin: 0;
    padding: 0 0.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.drawer-nav-link {
    display: block;
    padding: 0.6rem 1rem;
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 700;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    letter-spacing: -0.02em;
    transition: color 0.2s ease, text-shadow 0.3s ease;
}

.drawer-nav-link:hover {
    color: var(--link-color, var(--red));
    text-shadow: 0 0 20px var(--link-color, var(--red)), 0 0 40px var(--link-color, var(--red));
}

.drawer-nav-separator {
    height: 2px;
    margin: 0.5rem 1rem;
    border-radius: 1px;
    background: var(--sep-color, #e53e3e);
    box-shadow: 0 0 8px var(--sep-color, #e53e3e), 0 0 20px color-mix(in srgb, var(--sep-color, #e53e3e) 40%, transparent);
}
.drawer-nav-separator.labeled {
    display: flex;
    align-items: center;
    gap: 8px;
    height: auto;
    background: none;
    box-shadow: none;
    padding: 0 14px;
    margin: 0.75rem 0 0.25rem;
}
.drawer-nav-separator.labeled::before,
.drawer-nav-separator.labeled::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sep-color, rgba(255,255,255,0.15));
    opacity: 0.35;
    border-radius: 1px;
}
.drawer-nav-separator .sep-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--sep-color, rgba(255,255,255,0.3));
    opacity: 0.75;
}

.drawer-nav-footer {
    display: flex;
    gap: 6px;
    padding: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.drawer-footer-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.85rem 0.5rem;
    border-radius: 12px;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 50%,
        rgba(0, 0, 0, 0.03) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.drawer-footer-btn::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    pointer-events: none;
}

.drawer-footer-btn i {
    font-size: 1.3rem;
    color: var(--red);
}

.drawer-footer-btn:hover {
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.12) 0%,
        rgba(255, 255, 255, 0.04) 50%,
        rgba(0, 0, 0, 0.02) 100%
    );
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.13),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        0 6px 20px rgba(0, 0, 0, 0.3);
}

@media (max-width: 480px) {
    /* Mobile: fullscreen drawer (override the floating-panel dims).
       The internal styling — sticky header, native scroll, inline
       footer, premium glass — is inherited from the unified block. */
    .drawer-nav {
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        transform: translateX(-100%);
    }
    .drawer-nav.open {
        transform: translateX(0);
    }

    /* Slightly tighter inner padding on small screens */
    .limey-sidebar {
        padding: 0 1rem 0.75rem;
        margin-bottom: 0.25rem;
    }

    .drawer-nav-link {
        font-size: 1.2rem;
        padding: 0.5rem 1rem;
    }

    .drawer-nav-item {
        font-size: 0.88rem;
        padding: 0.45rem 1rem;
    }
}

/* =============================================
   DRAWER NAVIGATION — UNIFIED (all widths)
   Premium floating glass panel on desktop;
   fullscreen on touch mobile (with the same
   internal styling: sticky header, native
   scroll, inline footer — no fixed bottom).
   ============================================= */
@media (min-width: 1px) {
    .drawer-nav {
        top: 1rem;
        left: 1rem;
        bottom: auto;
        height: auto;
        max-height: calc(100dvh - 2rem);
        width: 280px;
        max-width: 320px;
        border-radius: 18px;
        border: 0.5px solid rgba(255, 255, 255, 0.06);
        background-color: color-mix(in srgb, #000 45%, transparent);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        box-shadow:
            inset 0 0 0 0.5px color-mix(in srgb, #fff 3%, transparent),
            inset 0 -1px 0px -0.5px color-mix(in srgb, #fff 5%, transparent),
            0px 8px 32px 0px color-mix(in srgb, #000 50%, transparent),
            0px 2px 8px 0px color-mix(in srgb, #000 30%, transparent);
        display: block;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(calc(-100% - 1.5rem));
    }
    .drawer-nav.open {
        transform: translateX(0);
    }

    /* Sticky header — premium soft fade, no hard edge */
    .drawer-nav-header {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 0.95rem 1.1rem 0.85rem;
        background: linear-gradient(
            to bottom,
            color-mix(in srgb, #000 60%, transparent) 0%,
            color-mix(in srgb, #000 35%, transparent) 80%,
            transparent 100%
        );
        backdrop-filter: blur(12px) saturate(140%);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        border-bottom: none;
    }

    /* Refined NAVIGATION title — softer weight, brighter accent */
    .drawer-nav-title {
        font-size: 0.7rem;
        letter-spacing: 0.22em;
        color: rgba(255, 255, 255, 0.45);
    }
    .drawer-nav-logo {
        opacity: 0.55;
    }

    /* Refined close button — flatter, more elegant glass */
    .drawer-nav-close {
        width: 28px;
        height: 28px;
        background: rgba(255, 255, 255, 0.04);
        border: 0.5px solid rgba(255, 255, 255, 0.08);
        border-radius: 8px;
        box-shadow: none;
        font-size: 1rem;
    }
    .drawer-nav-close:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.16);
        box-shadow: none;
    }

    /* Body no longer owns its own scroll — the panel scrolls.
       Top padding gives breathing room between sticky header
       and the first content card (limey).
       Bottom padding prevents the last section (e.g. Showcase)
       from ending flush against the panel's bottom edge. */
    .drawer-nav-body {
        flex: none;
        overflow: visible;
        min-height: 0;
        padding-top: 0.6rem;
        padding-bottom: 1.25rem;
    }

    /* Footer becomes a normal inline section, not stuck to the bottom */
    .drawer-nav-footer {
        margin-top: 0.5rem;
        padding: 0.75rem 0.85rem 1rem;
    }

    /* Lighter overlay on desktop — the floating panel is small enough
       that page context behind it doesn't need to be deeply dimmed */
    .drawer-overlay {
        background: rgba(0, 0, 0, 0.35);
    }
}

/* ─── Countdown Card — Logo + Glass Timer ──────────────────────── */
.card-countdown {
    cursor: default;
    overflow: hidden;
}

/* Blurred cover background */
.card-countdown .card-cover {
    filter: blur(14px) saturate(150%);
    transform: scale(1.2);
    transition: filter 0.8s ease, transform 0.8s ease;
}

/* Series logo — large, centered */
.countdown-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    max-width: 70%;
    max-height: 50%;
    object-fit: contain;
    z-index: 3;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,0.6));
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Fallback when no logo uploaded — title text */
.countdown-logo-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    z-index: 3;
    font-size: 1.4rem;
    font-weight: 800;
    text-align: center;
    padding: 0 20px;
    max-width: 85%;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Bottom section — padlock + glass timer */
.countdown-bottom {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 3;
    transition: opacity 0.8s ease;
}

/* Padlock icon — top of card, larger */
.countdown-padlock {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    height: 42px;
    width: auto;
    opacity: 0.8;
    z-index: 3;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
    transition: opacity 0.8s ease;
}

/* Glass timer bar — cockthoughts.com/styleguide glass material */
.countdown-timer-glass {
    background-color: color-mix(in srgb, #000 60%, transparent);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, #fff 15%, transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, #fff 10%, transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, #000 30%, transparent),
        0px 4px 12px 0px color-mix(in srgb, #000 40%, transparent),
        0px 8px 24px 0px color-mix(in srgb, #000 30%, transparent);
    padding: 10px 16px;
}

/* Digit layout */
.countdown-digits {
    display: flex;
    gap: 10px;
}

.cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
}

.cd-num {
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 1px;
}

.cd-label {
    font-size: 0.5rem;
    text-transform: uppercase;
    opacity: 0.4;
    letter-spacing: 1.5px;
}

/* ─── Final-Minute Pulse ─── */
.cd-final .cd-num {
    color: var(--red);
    text-shadow: 0 0 12px color-mix(in srgb, var(--red) 50%, transparent);
    transition: color 0.3s, text-shadow 0.3s;
}
.cd-final .cd-label {
    color: var(--red);
    opacity: 0.7;
    transition: color 0.3s, opacity 0.3s;
}
.cd-pulse {
    animation: cdPulse 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cdPulse {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.35); }
    60%  { transform: scale(0.9); }
    100% { transform: scale(1); }
}

/* ─── Unlock Animation (3-phase reveal) ─── */

/* Phase 1: Quickly fade out all overlays (300ms) */
.countdown-reveal-1 .countdown-bottom,
.countdown-reveal-1 .countdown-padlock,
.countdown-reveal-1 .countdown-logo,
.countdown-reveal-1 .countdown-logo-fallback {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* Phase 2: Centred padlock flash — injected dynamically */
.countdown-padlock-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    width: 56px;
    height: 56px;
    object-fit: contain;
    z-index: 10;
    opacity: 0;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.6));
    animation: padlockFlash 0.7s ease forwards;
}
@keyframes padlockFlash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    50%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); filter: drop-shadow(0 0 30px rgba(255,255,255,0)); }
}

/* Phase 3: Slowly unblur & unscale cover (1s ease-out) */
.countdown-reveal-2 .card-cover {
    filter: blur(0) saturate(100%) !important;
    transform: scale(1) !important;
    transition: filter 1s ease-out, transform 1s ease-out !important;
}

/* Final card swap entrance */
.card-reveal {
    animation: cardReveal 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes cardReveal {
    from { transform: scale(0.95); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Inline pages (loaded via hamburger menu) */
.pages-content-container {
    min-height: 100vh;
    padding: 1rem 2rem 4rem;
}
.pages-content-container .page-content {
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    word-wrap: break-word;
}
.pages-content-container .page-content img { max-width: 100%; height: auto; }
.pages-content-container .page-content iframe { max-width: 100%; }

@media (max-width: 768px) {
    .pages-content-container { padding: 0.5rem 1rem 3rem; }
}

/* =============================================
   VAULT EMBED CARDS
   ============================================= */
.vault-embed {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 520px;
    padding: 14px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--black-card, #111) 70%, transparent);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    margin: 1rem 0;
    transition: border-color 0.2s, background 0.2s;
}
.vault-embed:hover {
    border-color: rgba(255,255,255,0.15);
    background: color-mix(in srgb, var(--black-card, #111) 85%, transparent);
}
.vault-embed__art {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255,255,255,0.04);
}
.vault-embed__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vault-embed__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.vault-embed__title {
    font-family: 'YeezyFont', 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vault-embed__series {
    font-size: 0.78rem;
    color: var(--text-muted, rgba(255,255,255,0.45));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vault-embed__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.72rem;
    color: var(--text-muted, rgba(255,255,255,0.45));
    margin-top: 2px;
}
.vault-embed__meta .ti { font-size: 0.8rem; vertical-align: -1px; margin-right: 2px; }
.vault-embed__btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--red, #b91c3c) 18%, transparent);
    color: var(--red, #b91c3c);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    pointer-events: none;
    width: fit-content;
}
/* Loading skeleton */
.vault-embed--loading {
    gap: 14px;
}
.vault-embed__art-skel {
    width: 88px;
    height: 88px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(110deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 70%);
    background-size: 200% 100%;
    animation: embed-shimmer 1.5s infinite;
}
.vault-embed__body-skel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.skel-line {
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(110deg, rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 70%);
    background-size: 200% 100%;
    animation: embed-shimmer 1.5s infinite;
}
.skel-w80 { width: 80%; }
.skel-w50 { width: 50%; }
.skel-w60 { width: 60%; }
@keyframes embed-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* Error state */
.vault-embed--error {
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-muted, rgba(255,255,255,0.35));
    font-size: 0.82rem;
}
.vault-embed--error .ti { font-size: 1.1rem; }
@media (max-width: 480px) {
    .vault-embed { max-width: 100%; }
    .vault-embed__art, .vault-embed__art-skel { width: 72px; height: 72px; }
    .vault-embed__title { font-size: 0.9rem; }
}

/* =============================================
   SLUG PAGE (inline SPA view)
   ============================================= */
#slug-page .slug-page-container {
    min-height: 100vh;
    padding: 70px 2rem 4rem;
    display: flex;
    justify-content: center;
}

#slug-page .file-container {
    max-width: 640px;
    width: 100%;
}

#slug-page .file-hero {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    position: relative;
}

#slug-page .file-sub-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.25rem;
}

#slug-page .file-cover {
    width: 280px;
    height: 280px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.06);
    background: linear-gradient(90deg, #111 0%, #1a1a1a 50%, #111 100%);
    background-size: 200% 100%;
    animation: slug-shimmer 1.5s infinite;
}

#slug-page .file-cover:has(img.loaded) {
    animation: none;
}

@keyframes slug-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

#slug-page .file-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#slug-page .file-cover img.loaded {
    opacity: 1;
}

#slug-page .file-logo {
    margin-bottom: 0.5rem;
}

#slug-page .file-logo img {
    max-width: 100%;
    max-height: 90px;
    object-fit: contain;
    object-position: left;
}

#slug-page .file-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#slug-page .file-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    width: fit-content;
}

#slug-page .file-title {
    font-size: clamp(1.25rem, 4vw, 2rem);
    font-weight: 600;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

#slug-page .file-series {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

#slug-page .file-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

#slug-page .file-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background-color: color-mix(in srgb, #fff 4%, color-mix(in srgb, #000 60%, transparent));
    border: 1px solid color-mix(in srgb, #fff 8%, rgba(255,255,255,0.08));
    backdrop-filter: blur(12px) saturate(130%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 10%, transparent);
}

#slug-page .file-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

#slug-page .file-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 1.1rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
    border: none;
    transition: all 0.2s ease;
}

#slug-page .file-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: block;
}

#slug-page .file-action-btn.action-play {
    background: linear-gradient(135deg, #ff1a1a 0%, #cc0000 100%);
    color: #fff;
    box-shadow: 0 2px 12px rgba(255, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    padding: 0.5rem 1.2rem 0.5rem 1rem;
}

#slug-page .file-action-btn.action-play svg {
    fill: #fff;
    margin-right: -0.1rem;
}

#slug-page .file-action-btn.action-play:hover {
    background: linear-gradient(135deg, #ff3333 0%, #e60000 100%);
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

#slug-page .file-action-btn.action-shuffle {
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

#slug-page .file-action-btn.action-shuffle svg {
    fill: #fff;
}

#slug-page .file-action-btn.action-shuffle:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
    box-shadow: 0 2px 14px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#slug-page .slug-tags-section {
    margin-top: 2rem;
}

#slug-page .slug-tags-header {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 0.5rem;
}

#slug-page .slug-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

#slug-page .slug-tags-wrap .filter-tag-btn {
    text-decoration: none;
}

#slug-page .file-description {
    background-color: color-mix(in srgb, #000 60%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, #fff 15%, transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, #fff 10%, transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, #000 30%, transparent),
        0px 4px 12px 0px color-mix(in srgb, #000 40%, transparent),
        0px 8px 24px 0px color-mix(in srgb, #000 30%, transparent);
    padding: 1.5rem;
    margin-bottom: 2rem;
    line-height: 1.7;
    font-size: 0.85rem;
    color: var(--text-muted);
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Rich text child styles now in shared rules above (search "Rich text styles") */

#slug-page .tracks-section {
    background-color: color-mix(in srgb, #000 60%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 2px 3px 0px -2px color-mix(in srgb, #fff 15%, transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, #fff 10%, transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb, #000 30%, transparent),
        0px 4px 12px 0px color-mix(in srgb, #000 40%, transparent),
        0px 8px 24px 0px color-mix(in srgb, #000 30%, transparent);
    overflow: hidden;
}

#slug-page .tracks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

#slug-page .tracks-header-duration {
    font-weight: 500;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
}

#slug-page .tracks-list {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
    padding-bottom: 0.4rem;
}

#slug-page .tracks-list::-webkit-scrollbar {
    width: 4px;
}

#slug-page .tracks-list::-webkit-scrollbar-track {
    background: transparent;
}

#slug-page .tracks-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

#slug-page .track-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 1rem;
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

#slug-page .track-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

#slug-page .track-item.active {
    background: rgba(185, 28, 60, 0.12);
}

#slug-page .track-item.active .track-title {
    color: #fff;
}

#slug-page .track-item:hover .track-num-text {
    display: none;
}

#slug-page .track-item:hover .track-play-icon {
    display: flex;
}

#slug-page .track-num {
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#slug-page .track-num-text {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    font-variant-numeric: tabular-nums;
}

#slug-page .track-play-icon {
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--red);
}

#slug-page .track-play-icon svg {
    width: 14px;
    height: 14px;
}

#slug-page .track-item:hover .track-play-icon {
    color: rgba(255, 255, 255, 0.6);
}

#slug-page .track-title {
    flex: 1;
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(255, 255, 255, 0.8);
}

#slug-page .track-duration {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.3);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

#slug-page .track-icon {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

#slug-page .slug-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    margin-bottom: 2rem;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    padding: 0;
    transition: color 0.2s ease;
}

#slug-page .slug-back-link:hover {
    color: var(--text);
}

#slug-page .file-action-btn.action-like,
#slug-page .file-action-btn.action-bookmark {
    background-color: color-mix(in srgb, #fff 4%, color-mix(in srgb, #000 60%, transparent));
    border: 1px solid color-mix(in srgb, #fff 8%, rgba(255,255,255,0.08));
    backdrop-filter: blur(12px) saturate(130%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
                inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 10%, transparent);
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}

#slug-page .file-action-btn.action-like:hover,
#slug-page .file-action-btn.action-bookmark:hover {
    color: rgba(255,255,255,0.8);
    background-color: color-mix(in srgb, #fff 8%, color-mix(in srgb, #000 60%, transparent));
    border-color: color-mix(in srgb, #fff 14%, rgba(255,255,255,0.12));
}

#slug-page .file-action-btn.action-like .like-count {
    font-size: 0.7rem;
    font-weight: 600;
}

#slug-page .file-action-btn.action-like .like-count:empty {
    display: none;
}

#slug-page .file-action-btn.action-like.active {
    color: #e8384f;
    border-color: rgba(232,56,79,0.3);
    background: rgba(232,56,79,0.1);
}

#slug-page .file-action-btn.action-bookmark.active {
    color: #f59e0b;
    border-color: rgba(245,158,11,0.3);
    background: rgba(245,158,11,0.1);
}

@keyframes slug-actionPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

#slug-page .file-action-btn.action-like.pop,
#slug-page .file-action-btn.action-bookmark.pop {
    animation: slug-actionPop 0.3s ease;
}

/* Per-track like button */
.track-like-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-left: 6px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.2);
    font-size: 1.1rem;
    line-height: 1;
    transform: scale(1);
    transition: color 0.2s ease, transform 0.15s ease;
    will-change: transform;
}
.track-like-btn:hover { color: rgba(255, 255, 255, 0.45); transform: scale(1.05); }
.track-like-btn.active { color: #e8384f; }
.track-like-btn.active:hover { color: #d42e45; transform: scale(1.05); }
@keyframes trackHeartLike { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes trackHeartUnlike { 0% { transform: scale(1); } 50% { transform: scale(0.85); } 100% { transform: scale(1); } }
.track-like-btn.pop-like { animation: trackHeartLike 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.track-like-btn.pop-unlike { animation: trackHeartUnlike 0.25s ease-out; }

/* Per-track queue button */
.track-queue-btn {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    padding: 4px; margin-left: 4px; flex-shrink: 0;
    color: rgba(255, 255, 255, 0.2); font-size: 1.1rem; line-height: 1;
    transform: scale(1); transition: color 0.2s ease, transform 0.15s ease;
    will-change: transform;
}
.track-queue-btn:hover { color: rgba(255, 255, 255, 0.45); transform: scale(1.05); }
.track-queue-btn.added { color: #f59e0b; }
.track-queue-btn.added:hover { color: #d97706; transform: scale(1.05); }
@keyframes trackQueuePop { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(0.95); } 100% { transform: scale(1); } }
.track-queue-btn.pop-queue { animation: trackQueuePop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }

/* Queue confirm popover */
.queue-confirm-popover {
    position: fixed; z-index: 10000;
    background: rgba(20, 20, 24, 0.92);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px; padding: 10px 14px;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5); white-space: nowrap;
}
.queue-confirm-popover button { border: none; padding: 4px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; transition: opacity 0.15s; }
.queue-confirm-popover .qc-yes { background: #f59e0b; color: #000; }
.queue-confirm-popover .qc-no { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.queue-confirm-popover button:hover { opacity: 0.8; }

#slug-page .error-page {
    text-align: center;
    padding-top: 4rem;
}

#slug-page .error-page h1 {
    font-size: 4rem;
    margin-bottom: 1rem;
}

#slug-page .error-page p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Countdown styles for slug page */
#slug-page .slug-countdown {
    margin-bottom: 1.5rem;
}

#slug-page .cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 10px 16px;
    min-width: 56px;
    backdrop-filter: blur(4px);
}

#slug-page .cd-num {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#slug-page .cd-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    opacity: 0.5;
    letter-spacing: 1px;
}

/* Countdown Phase 2: Takeover (60s → 20s) */
.slug-countdown.phase-takeover .cd-unit:not(.cd-seconds) {
    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;
    transition: opacity 0.6s, transform 0.6s;
}

.slug-countdown.phase-takeover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    pointer-events: none;
}

.slug-countdown.phase-takeover > div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slug-countdown.phase-takeover .cd-seconds {
    background: none !important;
    border: none !important;
    backdrop-filter: none !important;
    padding: 0 !important;
    min-width: auto !important;
    transition: all 0.3s ease-out;
}

.slug-countdown.phase-takeover .cd-seconds .cd-num {
    font-size: clamp(4rem, 15vw, 10rem) !important;
    text-shadow: 0 0 20px rgba(255,0,0,0.4);
    transition: font-size 0.3s, text-shadow 0.3s;
}

.slug-countdown.phase-takeover .cd-seconds .cd-label,
.slug-countdown.phase-takeover .cd-seconds > span:last-child {
    display: none !important;
}

/* Countdown: fade surrounding UI during takeover */
.file-hero.cd-takeover-active .file-info .file-title,
.file-hero.cd-takeover-active .file-info > p,
.file-hero.cd-takeover-active .file-info .file-actions,
.file-hero.cd-takeover-active .file-info .file-sub-actions,
.file-hero.cd-takeover-active .file-info .file-tag {
    opacity: 0.1;
    transition: opacity 0.8s;
}

/* Countdown: strobe flash overlay */
.file-cover .strobe-overlay {
    position: absolute;
    inset: 0;
    background: white;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: opacity 0.05s;
    z-index: 3;
}

.file-cover .strobe-overlay.flash {
    opacity: 0.7;
}

.file-cover .strobe-overlay.flash-red {
    opacity: 0.5;
    background: var(--red, #ef4444);
}

/* Countdown Phase 4: Reveal */
.file-hero.countdown-revealing .file-cover img {
    filter: blur(0) saturate(100%) !important;
    transform: scale(1) !important;
    transition: filter 1.2s ease, transform 1.2s ease;
}

.file-hero.countdown-revealing .slug-countdown {
    opacity: 0;
    transition: opacity 0.4s;
}

.file-hero.countdown-revealing .file-cover .lock-overlay {
    opacity: 0;
    transition: opacity 0.6s;
}

.file-hero.countdown-revealing .file-info .file-title,
.file-hero.countdown-revealing .file-info > p {
    opacity: 1;
    transition: opacity 0.8s 0.4s;
}

/* =============================================================================
   LOCKED SLUG PAGE (countdown active)
   — full page renders with description, track list, tags visible.
   — cover blurred, tracks are pointer-events: none with a lock icon.
   — on reveal, innerHTML is replaced with the unlocked render; the transition
     relies on the cover unblur + the strobe flash that precedes it.
   ============================================================================= */

/* Blurred cover + lock overlay */
.file-cover--locked {
    position: relative;
    overflow: hidden;
}
.file-cover--locked .cover-blurred {
    filter: blur(12px) saturate(115%);
    transform: scale(1.08);
}
.file-cover--locked .lock-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: opacity 0.6s ease;
}
.file-cover--locked .lock-overlay i {
    font-size: 2.6rem;
    opacity: 0.75;
    color: rgba(255,255,255,0.95);
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Prominent countdown in locked hero */
.slug-countdown--prominent {
    margin: 0.5rem 0 0.6rem;
}
.slug-countdown--prominent .cd-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.slug-countdown--prominent .cd-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, #fff 6%, color-mix(in srgb, #000 70%, transparent));
    border: 1px solid color-mix(in srgb, #fff 10%, rgba(255,255,255,0.08));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 10px;
    padding: 12px 14px 10px;
    min-width: 64px;
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
        inset 1px 1px 0 -0.5px color-mix(in srgb, #fff 10%, transparent),
        0 4px 14px rgba(0,0,0,0.35);
}
.slug-countdown--prominent .cd-num {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #fff;
    letter-spacing: -0.02em;
}
.slug-countdown--prominent .cd-label {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.55rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.4;
    margin-top: 6px;
}

/* Full-width release strip — sits between the hero and the description.
   Matches the description container's width and glassmorphism frame. */
.cd-release-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1.1rem 1.5rem;
    margin-bottom: 1.25rem;
    background-color: color-mix(in srgb, #000 55%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent),
        inset 1px 1px 0 -0.5px color-mix(in srgb, #fff 10%, transparent),
        0 4px 12px rgba(0,0,0,0.3);
}
.cd-release-text {
    font-family: 'Yeezy', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: rgba(255, 255, 255, 0.82);
}
.cd-release-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--red, #ef4444);
    box-shadow: 0 0 14px var(--red, #ef4444);
    animation: cd-pulse-dot 1.8s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes cd-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.85); }
}

/* Locked tag pill in hero — visually consistent with unlocked */
.file-tag--locked {
    opacity: 0.88;
}

/* Preview tracks — tracks ARE clickable (plays a pre-release clip). The PRE-RELEASE
   CLIP badge is the signal, not a cursor block. Server (api/stream.php) independently
   forces preview mode during countdown regardless of the URL param, so a subscriber
   who clicks Play gets the same clip as anyone else — impossible to leak the full. */
.tracks-section.is-preview .tracks-header-note {
    font-weight: 500;
    color: rgba(255,255,255,0.4);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.62rem;
    margin-left: 4px;
}

.clip-badge {
    display: inline-flex;
    align-items: center;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--red, #ef4444) 18%, transparent);
    color: color-mix(in srgb, var(--red, #ef4444) 65%, #fff 35%);
    border: 1px solid color-mix(in srgb, var(--red, #ef4444) 30%, transparent);
    margin-left: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .clip-badge {
        font-size: 0;
        padding: 4px 5px;
        letter-spacing: 0;
    }
    .clip-badge::before {
        content: "CLIP";
        font-size: 0.5rem;
        letter-spacing: 0.12em;
    }
}

@media (max-width: 768px) {
    .file-hero--locked .slug-countdown--prominent .cd-unit {
        min-width: 54px;
        padding: 10px 10px 8px;
    }
    .file-hero--locked .slug-countdown--prominent .cd-num {
        font-size: 1.7rem;
    }
    .cd-release-strip {
        padding: 0.9rem 1rem;
        gap: 0.6rem;
    }
    .cd-release-text {
        font-size: 0.82rem;
        letter-spacing: 0.12em;
    }
    .cd-release-dot {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 768px) {
    #slug-page .slug-page-container {
        padding: 60px 1rem 3rem;
    }

    #slug-page .file-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #slug-page .file-sub-actions {
        justify-content: center;
    }

    #slug-page .file-cover {
        width: 200px;
        height: 200px;
    }

    #slug-page .file-logo img {
        object-position: center;
    }

    #slug-page .file-meta {
        justify-content: center;
    }

    #slug-page .file-tag {
        margin-left: auto;
        margin-right: auto;
    }

    #slug-page .file-actions {
        justify-content: center;
    }
}

/* =============================================================================
   PMV VIDEO LIBRARY
   ============================================================================= */

/* Header + Filters */
#pmvs-page {
    overflow-y: auto;
    overflow-x: hidden;
}
.pmv-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem 4rem;
}

/* ─── Page heading — Syne 800 with subtle moving red gradient ─────── */
.pmv-page-heading {
    font-family: 'Syne', 'Yeezy', 'IBM Plex Mono', monospace;
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 2rem auto 1.4rem;
    padding: 0 1rem;
    user-select: none;
    -webkit-user-select: none;
}
.pmv-page-heading-inner {
    display: inline-block;
    background-image: linear-gradient(
        100deg,
        #5a0010 0%,
        #b00020 18%,
        #ff2a3d 35%,
        #ff6276 50%,
        #ff2a3d 65%,
        #b00020 82%,
        #5a0010 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pmv-heading-shimmer 7s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(255, 42, 61, 0.18));
}
@keyframes pmv-heading-shimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .pmv-page-heading-inner { animation: none; background-position: 50% 50%; }
}

.pmv-divider {
    height: 1px;
    margin: 0.5rem 1rem;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent);
}

.pmv-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pmv-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--red, #ff0000) 20%, rgba(255, 255, 255, 0.08));
    background-color: color-mix(in srgb, var(--red, #ff0000) 8%, color-mix(in srgb, #000 60%, transparent));
    color: color-mix(in srgb, var(--red, #ff0000) 75%, #fff);
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 5%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 10%, transparent);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pmv-filter-btn i {
    font-size: 0.9rem;
    line-height: 1;
    opacity: 0.85;
}

.pmv-filter-btn:hover {
    background-color: color-mix(in srgb, var(--red, #ff0000) 15%, color-mix(in srgb, #000 50%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 35%, rgba(255, 255, 255, 0.1));
    color: color-mix(in srgb, var(--red, #ff0000) 90%, #fff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 12%, transparent),
        0px 2px 8px 0px color-mix(in srgb, var(--red, #ff0000) 15%, transparent);
}

.pmv-filter-btn.active {
    background-color: color-mix(in srgb, var(--red, #ff0000) 25%, color-mix(in srgb, #000 40%, transparent));
    border-color: color-mix(in srgb, var(--red, #ff0000) 50%, rgba(255, 255, 255, 0.15));
    color: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent),
        inset 1px 1px 0px -0.5px color-mix(in srgb, #fff 15%, transparent),
        0px 2px 12px 0px color-mix(in srgb, var(--red, #ff0000) 25%, transparent);
}

/* Grid */
.pmv-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

@media (max-width: 700px) {
    /* Tighter horizontal padding so the heading has the full row to scale into */
    .pmv-content { padding: 0 0.75rem 4rem; }
    .pmv-grid { grid-template-columns: 1fr; }
    /* Heading: scale-to-fit, no horizontal padding (page already has it),
       tight letter-spacing. clamp min low enough to fit on a 320px viewport. */
    .pmv-page-heading {
        margin: 1.5rem auto 1.1rem;
        padding: 0;
        font-size: clamp(1.1rem, 6.5vw, 2.6rem);
        letter-spacing: 0.02em;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .pmv-page-heading { font-size: clamp(1.1rem, 7vw, 2.2rem); }
}

/* Cards */
.pmv-card {
    background: #111;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
}

.pmv-card:hover {
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.06);
}

.pmv-card-media {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255,255,255,0.02);
}

.pmv-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    -webkit-user-select: none;
    user-select: none;
}

/* Play icon */
.pmv-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
    pointer-events: none;
}

.pmv-card:hover .pmv-play-icon {
    opacity: 1;
}

.pmv-play-icon svg {
    width: 48px;
    height: 48px;
    fill: #fff;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}

/* Processing badge overlay */
.pmv-processing-badge {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--font-yeezy, sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    pointer-events: none;
    z-index: 2;
}
.pmv-processing-badge .ti { animation: spin 1.5s linear infinite; }

/* Duration badge */
.pmv-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(0,0,0,0.75);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: rgba(255,255,255,0.85);
    z-index: 2;
    font-family: 'IBM Plex Mono', monospace;
}

/* Category badge */
.pmv-category-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: rgba(0,0,0,0.6);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--red, #ff0000);
    z-index: 2;
}

/* Sprite hover preview */
.pmv-sprite {
    position: absolute;
    inset: 0;
    background-size: 400% 200%;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1;
    pointer-events: none;
}

/* Card body */
.pmv-card-body {
    padding: 0.7rem 0.85rem;
    position: relative;
}

.pmv-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    padding-right: 5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(90deg, var(--red), var(--red), #ff6666, var(--red), var(--red));
    background-size: 300% 100%;
    animation: redShine 6s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pmv-card-title-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

.pmv-card-series {
    /* legacy fallback for unlinked series text */
    font-size: 0.72rem;
    color: rgba(255,255,255,0.4);
    margin-bottom: 0.25rem;
}

.pmv-series-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.pmv-series-box:hover {
    background: rgba(255,255,255,0.07);
}
.pmv-series-box-art {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.pmv-series-box-info {
    min-width: 0;
    flex: 1;
}
.pmv-series-box-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.35);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.pmv-series-box-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmv-card-desc {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.55);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 0.15rem;
    margin-bottom: 0.75rem;
    line-height: 1.45;
}

/* Social buttons — glass pills */
.pmv-card-actions {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    display: flex;
    gap: 4px;
}

.pmv-like-btn,
.pmv-bookmark-btn {
    height: 26px;
    border-radius: 20px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}

.pmv-like-btn:hover,
.pmv-bookmark-btn:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
    border-color: rgba(255,255,255,0.2);
}
.pmv-like-btn.active {
    color: #e8384f;
    border-color: rgba(232,56,79,0.3);
    background: linear-gradient(135deg, rgba(232,56,79,0.2) 0%, rgba(232,56,79,0.08) 100%);
}
.pmv-bookmark-btn.active {
    color: #f59e0b;
    border-color: rgba(245,158,11,0.3);
    background: linear-gradient(135deg, rgba(245,158,11,0.2) 0%, rgba(245,158,11,0.08) 100%);
}

.pmv-like-btn i, .pmv-bookmark-btn i { font-size: 0.75rem; line-height: 1; display: block; }
.pmv-like-count { font-size: 0.6rem; font-weight: 600; }
.pmv-like-count:empty { display: none; }

/* Empty state */
.pmv-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 4rem 2rem;
    color: rgba(255,255,255,0.3);
}

.pmv-empty i {
    font-size: 3rem;
    opacity: 0.2;
    margin-bottom: 1rem;
    display: block;
}

/* =============================================================================
   PMV VIDEO PLAYER OVERLAY
   ============================================================================= */

.pmv-video-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.pmv-video-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.pmv-video-overlay .video-overlay-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1.25rem;
    z-index: 10001;
    transition: all 0.25s ease, opacity 0.4s ease;
}

.pmv-video-overlay .video-overlay-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.pmv-video-overlay video {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 8px;
    outline: none;
}

.pmv-video-overlay:fullscreen.pmv-controls-hidden,
.pmv-video-overlay:-webkit-full-screen.pmv-controls-hidden {
    cursor: none;
}

.pmv-video-overlay:fullscreen.pmv-controls-hidden .video-overlay-close,
.pmv-video-overlay:fullscreen.pmv-controls-hidden .video-overlay-controls,
.pmv-video-overlay:fullscreen.pmv-controls-hidden .pmv-exit-fullscreen,
.pmv-video-overlay:-webkit-full-screen.pmv-controls-hidden .video-overlay-close,
.pmv-video-overlay:-webkit-full-screen.pmv-controls-hidden .video-overlay-controls,
.pmv-video-overlay:-webkit-full-screen.pmv-controls-hidden .pmv-exit-fullscreen {
    opacity: 0;
    pointer-events: none;
}

.pmv-video-overlay .video-overlay-controls {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.7);
    background: color-mix(in srgb, #000 70%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: opacity 0.4s ease;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    min-width: 400px;
    max-width: 90vw;
}

.pmv-video-overlay .video-ctrl-btn {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1.25rem;
    padding: 4px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.pmv-video-overlay .video-ctrl-btn:hover {
    opacity: 1;
}

.pmv-video-overlay .video-progress-wrap {
    flex: 1;
    height: 6px;
    padding: 10px 0;
    background: transparent;
    background-clip: content-box;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    touch-action: none;
}

.pmv-video-overlay .video-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 3px;
    overflow: hidden;
}

.pmv-video-overlay .video-progress-bar {
    height: 100%;
    background: var(--red, #ff0000);
    border-radius: 3px 0 0 3px;
    width: 0%;
    transition: none;
}

.pmv-video-overlay .video-progress-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: url('/assets/uigraphics/plus_chrome.png') center/contain no-repeat;
    opacity: 0;
    cursor: grab;
    z-index: 2;
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
    filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.4));
    animation: pmvThumbShimmer 2.5s ease-in-out infinite;
}

.pmv-video-overlay .video-progress-wrap:hover .video-progress-thumb {
    opacity: 1;
}

.pmv-video-overlay .video-progress-thumb.scrubbing {
    opacity: 1;
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.3);
    filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.7));
}

@keyframes pmvThumbShimmer {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 0, 0, 0.4)); }
    50% { filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.6)); }
}

.pmv-video-overlay .video-time {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    min-width: 36px;
    text-align: center;
    white-space: nowrap;
}

.pmv-video-overlay .video-loop-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 4px;
    transition: all 0.2s ease;
}

.pmv-video-overlay .video-loop-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.pmv-video-overlay .video-loop-btn.active {
    color: var(--red, #ff0000);
    filter: drop-shadow(0 0 6px rgba(255, 0, 0, 0.5));
}

/* Volume control */
.pmv-video-overlay .pmv-volume {
    display: flex;
    align-items: center;
    position: relative;
}

.pmv-video-overlay .pmv-volume-slider-wrap {
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.25s ease, opacity 0.25s ease;
}

.pmv-video-overlay .pmv-volume-slider-wrap.open {
    width: 80px;
    opacity: 1;
}

.pmv-video-overlay .pmv-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 28px;
    background: transparent;
    outline: none;
    cursor: pointer;
}

.pmv-video-overlay .pmv-volume-slider::-webkit-slider-runnable-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.pmv-video-overlay .pmv-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin-top: -5px;
    transition: transform 0.15s ease;
}

.pmv-video-overlay .pmv-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.pmv-video-overlay .pmv-volume-slider::-moz-range-track {
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    border: none;
}

.pmv-video-overlay .pmv-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

@media (max-width: 600px) {
    .pmv-video-overlay .pmv-volume-slider-wrap.open {
        width: 60px;
    }
}

.video-watermark-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* PMV Fullscreen */
.pmv-video-overlay:fullscreen,
.pmv-video-overlay:-webkit-full-screen {
    background: #000;
}

.pmv-video-overlay:fullscreen #pmvVideoContainer,
.pmv-video-overlay:-webkit-full-screen #pmvVideoContainer {
    display: flex !important;
    align-items: center;
    justify-content: center;
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100vw;
    height: 100vh;
}

.pmv-video-overlay:fullscreen video,
.pmv-video-overlay:-webkit-full-screen video {
    max-width: 100vw !important;
    max-height: 100vh !important;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
}

.pmv-video-overlay:fullscreen .video-overlay-controls,
.pmv-video-overlay:-webkit-full-screen .video-overlay-controls {
    max-width: 80vw;
}

/* Exit fullscreen button — only visible in fullscreen */
.pmv-exit-fullscreen {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #fff;
    font-size: 1.4rem;
    z-index: 10;
    transition: all 0.2s ease;
}

.pmv-exit-fullscreen:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.pmv-video-overlay:fullscreen .pmv-exit-fullscreen,
.pmv-video-overlay:-webkit-full-screen .pmv-exit-fullscreen {
    display: flex;
}

.pmv-video-overlay:fullscreen .video-overlay-close,
.pmv-video-overlay:-webkit-full-screen .video-overlay-close {
    display: none;
}

@media (max-width: 700px) {
    .pmv-video-overlay .video-overlay-controls {
        min-width: unset;
        width: 94vw;
        padding: 0.6rem 1rem;
        gap: 0.5rem;
    }
    .pmv-video-overlay .video-ctrl-btn { font-size: 1rem; }
    .pmv-video-overlay .video-time { font-size: 0.65rem; min-width: 28px; }
}


/* =============================================
   LOYALTY PAGE
   ============================================= */

#loyalty-page {
    padding: 1rem 0;
}

/* loyalty grid follows the base .grid responsive rules (3→2→1 col with
   max-width 400px at ≤850px). Only horizontal padding is loyalty-specific. */
#loyalty-page .grid {
    padding: 0 1rem;
}

.loyalty-cta-banner {
    position: relative;
    margin: 0 1rem 0;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(ellipse at center top, rgba(15, 0, 0, 1) 0%, rgba(8, 0, 0, 1) 30%, #000 70%);
}

.loyalty-cta-divider {
    height: 1px;
    margin: 1.5rem 1rem;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08) 20%, rgba(255, 255, 255, 0.08) 80%, transparent);
}

.loyalty-cta-img {
    display: block;
    width: 65%;
    height: auto;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.loyalty-cta-img.loaded { opacity: 1; }

.loyalty-cta-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

.loyalty-cta-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6rem;
    padding: 1rem 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
}

.loyalty-cta-btn {
    padding: 0.5rem 1.75rem;
    background: linear-gradient(145deg, #ff1a1a, #cc0000);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

.loyalty-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px rgba(255, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.loyalty-cta-btn:active {
    transform: translateY(0);
}

.loyalty-cta-cancel {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    font-weight: 500;
}

.loyalty-cta-cancel .ti {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.45);
}

.loyalty-filter-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 1rem 0;
}

.loyalty-subscribed-bar {
    flex-direction: column;
    gap: 0.5rem;
}
.loyalty-subscribed-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: linear-gradient(135deg, #ff1a1a, #ff6b6b, #ff1a1a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.loyalty-subscribed-badge .ti {
    -webkit-text-fill-color: #ff1a1a;
    font-size: 1.2rem;
}
.loyalty-subscribed-thanks {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}
/* =============================================
   LOYALTY — sibling of vault-join-modal.
   Same design tokens (glass container, Yeezy sans 0.85rem, red primary,
   verify-existing ghost secondary, label-left / price-right buttons).
   ============================================= */

/* LOYALTY page logo — diamond icon + crystal-text image, side-by-side. */
.loyalty-page-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(0.6rem, 1.5vw, 1.2rem);
    margin: 1.4rem auto 1.5rem;
    padding: 0 1rem;
    font-size: 0;
    line-height: 0;
}
.loyalty-page-icon {
    display: inline-block;
    width: clamp(48px, 7vw, 88px);
    height: auto;
    object-fit: contain;
    filter:
        drop-shadow(0 0 14px rgba(110, 231, 255, 0.22))
        drop-shadow(0 0 28px rgba(255, 122, 217, 0.12))
        drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    flex-shrink: 0;
}
.loyalty-page-logo {
    display: inline-block;
    width: clamp(220px, 32vw, 400px);
    height: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

@font-face {
    font-family: 'Sir1';
    src: url('/assets/fonts/Sir1-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ─── Hot Pig Summer — viewport-locked premium teaser ────────────
   On-brand fonts only (Syne / Inter / IBM Plex Mono / Sir1 for the
   "SIR" wordmark inside the eyebrow). Position-fixed when active so
   the layout never scrolls and the cloud bg always covers the whole
   viewport, regardless of resize. */
#hot-pig-summer-page:not(.hidden) {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    z-index: 30;
    background: #000;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}
.hps-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.92;
    filter: contrast(118%) saturate(150%) brightness(108%);
    pointer-events: none;
}
.hps-veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(0,0,0,0.2), rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.92) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.15) 25%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.7) 100%);
}

.hps-top {
    position: relative;
    z-index: 2;
    padding: 5.5rem 2rem 0;
    text-align: center;
    flex-shrink: 0;
}
.hps-center {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1rem 1.5rem;
    text-align: center;
    pointer-events: none;
}
.hps-center > * { pointer-events: auto; }
/* Bottom + footer are absolutely positioned so the .hps-center column
   keeps the full viewport height and the logo stays in the true page
   centre regardless of how tall the bottom row gets. */
.hps-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4.25rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    text-align: center;
    pointer-events: none;
}
.hps-bottom > * { pointer-events: auto; }
.hps-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.25rem 2rem 1.5rem;
    text-align: center;
    flex-shrink: 0;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.5);
}
.hps-footer em {
    color: var(--red, #e8384f);
    font-style: normal;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(220, 38, 38, 0.4);
}

.hps-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    padding: 0.28rem 0.75rem 0.28rem 0.4rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    line-height: 1;
}
.hps-eyebrow-eye {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: var(--red, #e8384f);
    -webkit-mask: url(/assets/uigraphics/culteye-white.svg) center/contain no-repeat;
            mask: url(/assets/uigraphics/culteye-white.svg) center/contain no-repeat;
    filter: drop-shadow(0 0 4px rgba(220, 38, 38, 0.5));
}
.hps-eyebrow-sir {
    font-family: 'Sir1', 'Syne', sans-serif;
    font-size: 1.05em;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--red, #e8384f);
    text-shadow: 0 0 6px rgba(220, 38, 38, 0.35);
    line-height: 1;
    transform: translateY(1px);
}

/* Logo as Syne text — words stack via flex-wrap on narrow viewports.
   Colour alternates between bright red and bright blue with a hard flash. */
.hps-logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: 0 clamp(0.4rem, 1.5vw, 1rem);
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: 'Syne', 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 11vw, 9rem);
    line-height: 0.95;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    text-align: center;
    overflow-wrap: anywhere;
    color: #ff1f3a;
    text-shadow: none;
    animation: hpsLogoFlash 0.18s steps(2, end) infinite;
    user-select: none;
    -webkit-user-drag: none;
}
.hps-logo span { display: inline-block; }

@keyframes hpsLogoFlash {
    0%,   49.99% { color: #ff1f3a; }
    50%, 100%    { color: #2461ff; }
}
@media (prefers-reduced-motion: reduce) {
    .hps-logo { animation: none; color: #fff; }
}

.hps-trailer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.15rem 0.6rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.hps-trailer-btn i { font-size: 0.95rem; color: var(--red, #e8384f); }
.hps-trailer-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Bare countdown — no chrome, just numbers + labels with text-shadow for
   legibility against the cloud bg. */
.hps-countdown {
    display: inline-flex;
    align-items: flex-start;
    gap: clamp(0.65rem, 2vw, 1.25rem);
    padding: 0;
    background: none;
    border: 0;
    margin: 0.25rem 0;
}
.hps-cd-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    line-height: 1;
}
.hps-cd-num {
    font-family: 'Syne', 'Inter', sans-serif;
    font-size: clamp(1.15rem, 2.4vw, 1.6rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 3px 16px rgba(0, 0, 0, 0.85);
}
.hps-cd-lbl {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.hps-countdown.is-live .hps-cd-num { color: var(--red, #e8384f); }

.hps-ctas {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.25rem;
}
.hps-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.4rem;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hps-cta i { font-size: 1.05rem; }
.hps-cta--rsvp {
    background: linear-gradient(180deg, #ff2839 0%, #c8121f 100%);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 8px 24px -8px rgba(255, 40, 57, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.24);
}
.hps-cta--rsvp:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 32px -8px rgba(255, 40, 57, 0.85),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.hps-cta--watch {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.65);
}
.hps-cta--watch i { color: rgba(255, 255, 255, 0.45); }
.hps-cta--watch:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.85);
}

/* ─── Trailer modal ──────────────────────────────────────────────
   Class-toggle visibility (no `hidden` attr) — opacity + visibility
   transition so it can't paint mid-state. position:fixed escapes
   the position-fixed parent container too. */
.hps-trailer-modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.hps-trailer-modal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.hps-trailer-modal__frame {
    position: relative;
    width: 100%;
    max-width: 1100px;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
    background: #000;
}
.hps-trailer-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.15s ease, transform 0.12s ease;
}
.hps-trailer-modal__close:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.05); }
.hps-trailer-modal__frame video { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

@media (max-width: 720px) {
    .hps-top { padding-top: 4rem; }
    .hps-cta { flex-basis: 100%; justify-content: center; }
    .hps-cd-num { font-size: 1.4rem; }
    .hps-logo { font-size: clamp(2.4rem, 14vw, 5rem); }
}

/* Container — vault-join-modal idiom, wider for the icon+text+side-by-side
   buttons composition. */
.loyalty-pitch {
    background: color-mix(in srgb, #000 30%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 1.6rem 1.75rem;
    max-width: 640px;
    width: calc(100% - 2rem);
    margin: 0 auto 2rem;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Icon-left, explainer-right row. */
.loyalty-pitch__row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}
.loyalty-pitch__icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
.loyalty-pitch__text {
    flex: 1;
    margin: 0;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.85rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.7);
    text-align: left;
}

/* Side-by-side buttons (Subscribe + Reclaim/No Active). Stacks on narrow
   widths via flex-wrap. When stacked, the primary button switches from
   "label-left / price-right" to centered so it visually matches the
   secondary button beneath it. */
.loyalty-pitch__buttons {
    display: flex;
    flex-direction: row;
    gap: 0.65rem;
    flex-wrap: wrap;
}
.loyalty-pitch__buttons .loyalty-btn { flex: 1 1 220px; }
@media (max-width: 560px) {
    .loyalty-pitch__buttons .loyalty-btn--primary {
        justify-content: center;
        gap: 0.7rem;
    }
}

/* Shared button base — mirrors .vault-join-option exactly. */
.loyalty-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.15rem;
    border-radius: 8px;
    font-family: 'Yeezy', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}
.loyalty-btn:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.4);
    outline-offset: 2px;
}
.loyalty-btn__price {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
    text-transform: none;
    letter-spacing: 0;
}

/* Primary — red glass with internal glow + soft red bloom. */
.loyalty-btn--primary {
    background:
        linear-gradient(135deg, rgba(255, 30, 30, 0.92) 0%, rgba(180, 0, 0, 0.92) 100%);
    color: #fff;
    border-color: rgba(255, 80, 80, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 4px 16px rgba(255, 0, 0, 0.22);
}
.loyalty-btn--primary:hover {
    background:
        linear-gradient(135deg, rgba(255, 60, 60, 1) 0%, rgba(200, 10, 10, 1) 100%);
    border-color: rgba(255, 110, 110, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2),
        0 6px 24px rgba(255, 0, 0, 0.4);
    transform: translateY(-1px);
}
.loyalty-btn--primary:active { transform: translateY(0); }

/* Reclaim — frosted glass, secondary action, hover lifts to brighter tint. */
.loyalty-btn--reclaim {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.025) 100%);
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    justify-content: center;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
.loyalty-btn--reclaim:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.13) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18),
        0 4px 14px rgba(255, 255, 255, 0.06);
}
.loyalty-btn--reclaim:active { transform: translateY(0); }

/* Inactive — same glass shape but muted; explicitly NOT clickable. */
.loyalty-btn--inactive {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    color: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: default;
    justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.loyalty-btn--inactive:hover {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.015) 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    transform: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Quiet meta foot — small status line, not a focal element. */
.loyalty-pitch__meta {
    margin: 1rem 0 0;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
}

/* Subscriber confirmation — same idiom, single chip. */
.loyalty-subscribed {
    text-align: center;
    margin: 0 auto 2rem;
    padding: 0 1.25rem;
}
.loyalty-subscribed__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.92);
    background: color-mix(in srgb, #000 30%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}
.loyalty-subscribed__chip .ti {
    font-size: 1rem;
    color: #4ade80;
}

@media (max-width: 480px) {
    .loyalty-page-logo-wrap { margin: 1rem auto 1.1rem; gap: 0.5rem; }
    .loyalty-page-icon { width: clamp(36px, 11vw, 60px); }
    .loyalty-page-logo { width: clamp(160px, 52vw, 240px); }
    .loyalty-pitch {
        padding: 1.4rem;
        margin: 0 1rem 1.5rem;
        width: calc(100% - 2rem);
    }
    .loyalty-pitch__row { gap: 0.7rem; margin-bottom: 1.1rem; }
    .loyalty-pitch__icon { width: 34px; height: 34px; }
    .loyalty-pitch__text { font-size: 0.8rem; line-height: 1.4; }
    .loyalty-btn { padding: 0.65rem 0.85rem; font-size: 0.8rem; }
    .loyalty-btn__price { font-size: 0.65rem; }
    .loyalty-pitch__meta { font-size: 0.65rem; margin-top: 0.85rem; }
    .loyalty-subscribed { margin-bottom: 1.5rem; }
    .loyalty-subscribed__chip { font-size: 0.72rem; padding: 0.5rem 1rem; }
}


/* =============================================
   LOYALTY STASH — tabs + content + lock + lightbox
   Same idiom as vault-join-modal: dark glass, Yeezy uppercase,
   subtle borders, white-tint surfaces.
   ============================================= */

/* Top tabs (Hypno | Stash) — site brand-red idiom (matches filter-btn). */
.loyalty-tabs {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    margin: 2.25rem auto 1.75rem;
    padding: 0 1rem;
    flex-wrap: wrap;
}
.loyalty-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1.75rem;
    border-radius: 10px;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 90, 90, 0.85);
    background: rgba(255, 0, 0, 0.04);
    border: 1px solid rgba(255, 50, 50, 0.32);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.loyalty-tab .ti { font-size: 1rem; opacity: 0.85; }
.loyalty-tab:hover {
    color: #ff8080;
    background: rgba(255, 0, 0, 0.09);
    border-color: rgba(255, 60, 60, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 14px rgba(255, 0, 0, 0.18);
}
.loyalty-tab.is-active {
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.55), rgba(180, 0, 0, 0.55));
    border-color: rgba(255, 80, 80, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 22px rgba(255, 0, 0, 0.35);
}
.loyalty-tab.is-active .ti {
    opacity: 1;
    filter: drop-shadow(0 0 3px rgba(255, 100, 100, 0.5));
}

/* Stash lock screen — same dimensions as the Hypno lock for consistency. */
.stash-locked {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    background: color-mix(in srgb, #000 30%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 2.25rem 2.5rem;
    max-width: 920px;
    width: calc(100% - 2rem);
    margin: 1rem auto 2rem;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4);
}

/* Stacked-teaser graphic: two wallpapers + two folder icons fanned out
   inside a fixed aspect box, with a lock badge floating over them. */
.stash-locked__media {
    position: relative;
    flex: 0 0 320px;
    aspect-ratio: 4 / 3;
    pointer-events: none;
    user-select: none;
}
.stash-locked__sample {
    position: absolute;
    border-radius: 8px;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.55),
        0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    object-fit: cover;
    background: rgba(0, 0, 0, 0.4);
}
.stash-locked__sample--wp1 {
    width: 64%; aspect-ratio: 16 / 9;
    top: 8%; left: 4%;
    transform: rotate(-7deg);
    z-index: 1;
}
.stash-locked__sample--wp2 {
    width: 64%; aspect-ratio: 16 / 9;
    top: 22%; left: 30%;
    transform: rotate(5deg);
    z-index: 2;
}
.stash-locked__sample--ic1 {
    width: 30%; aspect-ratio: 1 / 1;
    bottom: 6%; left: 14%;
    transform: rotate(-10deg);
    object-fit: contain;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    padding: 6%;
    z-index: 3;
}
.stash-locked__sample--ic2 {
    width: 28%; aspect-ratio: 1 / 1;
    bottom: 14%; right: 8%;
    transform: rotate(8deg);
    object-fit: contain;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    padding: 6%;
    z-index: 4;
}
.stash-locked__lock {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 5;
}

.stash-locked__body {
    flex: 1;
    min-width: 0;
}
.stash-locked__title {
    font-family: 'Syne', 'Yeezy', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0 0 0.7rem;
    background-image: linear-gradient(135deg, #ffffff 0%, #c9c9c9 50%, #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.stash-locked__text {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.3rem;
}
.stash-locked__cta { width: auto; }

/* HYPNO lock screen — same architecture as Stash lock but bigger media side
   (loyalty cover art is the visual centerpiece). Subscribe-only, no preview. */
.hypno-locked {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    background: color-mix(in srgb, #000 30%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 2.25rem 2.5rem;
    max-width: 920px;
    width: calc(100% - 2rem);
    margin: 1rem auto 2rem;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(0, 0, 0, 0.4);
}
.hypno-locked__media {
    position: relative;
    flex: 0 0 320px;
    aspect-ratio: 4 / 3;
    pointer-events: none;
    user-select: none;
}
.hypno-locked__sample {
    position: absolute;
    border-radius: 8px;
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
    object-fit: cover;
    background: rgba(0, 0, 0, 0.4);
    aspect-ratio: 1 / 1;
    width: 42%;
}
/* Five fanned cover tiles — center is biggest, others tilt around it. */
.hypno-locked__sample--c1 { top: 5%;  left: 4%;   transform: rotate(-12deg); z-index: 1; width: 38%; }
.hypno-locked__sample--c2 { top: 14%; left: 24%;  transform: rotate(-3deg);  z-index: 2; width: 42%; }
.hypno-locked__sample--c3 { top: 6%;  left: 50%;  transform: rotate(7deg);   z-index: 3; width: 44%; }
.hypno-locked__sample--c4 { top: 38%; left: 12%;  transform: rotate(5deg);   z-index: 4; width: 38%; }
.hypno-locked__sample--c5 { top: 42%; left: 48%;  transform: rotate(-6deg);  z-index: 5; width: 40%; }
.hypno-locked__lock {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 1.3rem;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 10;
}
.hypno-locked__body { flex: 1; min-width: 0; }
.hypno-locked__title {
    font-family: 'Syne', 'Yeezy', sans-serif;
    font-weight: 800;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
    margin: 0 0 0.7rem;
    background-image: linear-gradient(135deg, #ffffff 0%, #c9c9c9 50%, #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.hypno-locked__text {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 0.85rem;
}
.hypno-locked__count {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 1.4rem;
    padding: 0.6rem 1.1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
}
.hypno-locked__count .ti {
    color: rgba(255, 90, 90, 0.95);
    font-size: 1.15rem;
}
.hypno-locked__sep { color: rgba(255, 255, 255, 0.18); }
.hypno-locked__cta { width: auto; }
.hypno-locked[hidden] { display: none !important; }
#loyalty-hypno-grid-wrap[hidden] { display: none !important; }

/* Stash content area */
.stash-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Loyalty segmented control — used for both Hypno's Recent/Oldest/A-Z
   sort AND Stash's Wallpapers/Folder Icons sub-tabs. One pill, multiple
   inset segments, identical spacing across both contexts. */
.lyl-switcher-wrap {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto 1.5rem;
    padding: 0 1rem;
}
.lyl-segmented {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
    backdrop-filter: blur(12px) saturate(130%);
    -webkit-backdrop-filter: blur(12px) saturate(130%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}
.lyl-segmented::-webkit-scrollbar { display: none; }
.lyl-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.6rem 1.1rem;
    border-radius: 8px;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.55);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.lyl-seg .ti { font-size: 0.85rem; opacity: 0.85; }
.lyl-seg:hover {
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.04);
}
.lyl-seg.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.2);
}
.lyl-seg.active .ti { opacity: 1; }

/* Sections within a sub-tab pane */
.stash-section { margin: 0 0 2.5rem; }
.stash-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.stash-section__title {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.stash-section__title .ti {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
}

/* "Download all" pack button (per icon section) */
.stash-pack-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 8px;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.18);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.stash-pack-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}
.stash-pack-btn .ti { font-size: 0.85rem; }

/* Item grid */
.stash-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.stash-grid--icons {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

/* Card */
.stash-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.15s ease, background 0.2s ease;
}
.stash-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-1px);
}
.stash-card__thumb {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    cursor: zoom-in;
    border: none;
    padding: 0;
    overflow: hidden;
    position: relative;
}
.stash-card__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.stash-card__thumb:hover img { transform: scale(1.04); }
.stash-card--wallpaper .stash-card__thumb { aspect-ratio: 16 / 9; }
.stash-card--icon .stash-card__thumb {
    aspect-ratio: 1 / 1;
    background:
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%) 0 0 / 16px 16px,
        linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 75%) 8px 8px / 16px 16px,
        rgba(0,0,0,0.3);
}
.stash-card--icon .stash-card__thumb img { object-fit: contain; padding: 14%; }
.stash-card__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
}
.stash-card__name {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.stash-card__dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.stash-card__dl:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}
.stash-card__dl .ti { font-size: 0.95rem; }

/* Loading + error */
.stash-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 3rem 1rem;
    font-family: 'Yeezy', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.4);
}
.stash-loading__spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: stash-spin 0.7s linear infinite;
}
@keyframes stash-spin { to { transform: rotate(360deg); } }

/* The HTML `hidden` attribute normally implies display:none, but our CSS
   rules below set explicit display values which would override it. Force
   the attribute to win for every Stash element that uses it. */
.stash-lightbox[hidden],
.stash-loading[hidden],
.stash-content[hidden],
.stash-locked[hidden],
.stash-pane-inner[hidden],
.loyalty-pane[hidden] { display: none !important; }

/* Lightbox — desktop only */
.stash-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.86);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 10500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    cursor: zoom-out;
    animation: stash-lb-fade 0.18s ease;
}
@keyframes stash-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.stash-lightbox__img {
    max-width: min(1600px, 100%);
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.7);
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}
.stash-lightbox__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.stash-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Coarse pointers (touch) — disable click-to-zoom; download only. */
@media (hover: none), (pointer: coarse) {
    .stash-card__thumb { cursor: default; }
    .stash-card__thumb:hover img { transform: none; }
    .stash-lightbox { display: none !important; }
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .loyalty-tabs { gap: 0.5rem; margin: 1.5rem auto 1.25rem; }
    .loyalty-tab { padding: 0.7rem 1.3rem; font-size: 0.75rem; letter-spacing: 0.08em; }
    .loyalty-tab .ti { font-size: 0.9rem; }
    .stash-content { padding: 0 0.85rem; }
    .lyl-switcher-wrap { margin: 1.1rem auto 1.1rem; }
    .lyl-segmented { padding: 3px; }
    .lyl-seg { padding: 0.5rem 0.85rem; font-size: 0.66rem; letter-spacing: 0.06em; }
    .lyl-seg .ti { font-size: 0.78rem; }
    .stash-section { margin-bottom: 1.75rem; }
    .stash-section__head { gap: 0.6rem; flex-wrap: wrap; }
    .stash-section__title { font-size: 0.7rem; }
    .stash-pack-btn { font-size: 0.58rem; padding: 0.4rem 0.75rem; }
    .stash-grid { gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .stash-grid--icons { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.55rem; }
    .stash-card__body { padding: 0.45rem 0.55rem; }
    .stash-card__name { font-size: 0.62rem; letter-spacing: 0.04em; }
    .stash-card__dl { width: 26px; height: 26px; }
    .stash-locked__title { font-size: clamp(1.5rem, 8vw, 2rem); }
    .stash-locked__text { font-size: 0.8rem; }
    .hypno-locked__title { font-size: clamp(1.5rem, 8vw, 2rem); }
    .hypno-locked__text { font-size: 0.8rem; }
    .hypno-locked__count { font-size: 0.78rem; gap: 0.5rem; padding: 0.5rem 0.95rem; }
    .hypno-locked__count .ti { font-size: 1rem; }
}

/* Lock screens collapse to vertical earlier (≤900px) than the rest of the
   mobile breakpoint (600px). The side-by-side layout needs ~900px to give
   the title room not to clip when text+media share the row. */
@media (max-width: 900px) {
    .stash-locked,
    .hypno-locked {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        padding: 1.75rem 1.5rem;
    }
    .stash-locked__media { flex: 0 0 auto; width: clamp(200px, 50vw, 280px); }
    .hypno-locked__media { flex: 0 0 auto; width: clamp(220px, 55vw, 300px); }
    .stash-locked__body,
    .hypno-locked__body { width: 100%; }
    .stash-locked__cta,
    .hypno-locked__cta {
        width: 100%;
        max-width: 320px;
        /* Block-level flex doesn't honor text-align on parent — explicit
           auto margins center it horizontally inside the body wrapper. */
        margin-left: auto;
        margin-right: auto;
    }
    /* Keep the count pill on a single line where it fits, otherwise wrap
       cleanly with controlled spacing. */
    .hypno-locked__count {
        white-space: normal;
        text-align: center;
        line-height: 1.4;
    }
}
/* ── Loyalty Banner Stars ─────────────────────────── */

.loyalty-stars, .loyalty-stars2, .loyalty-stars3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.loyalty-stars:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow:
        /* Left quarter (0-500) */
        12px 18px 0 rgba(255,255,255,0.55),
        47px 82px 0 rgba(255,255,255,0.7),
        93px 241px 0 rgba(255,255,255,0.48),
        138px 112px 0 rgba(255,255,255,0.62),
        185px 329px 0 rgba(255,255,255,0.8),
        221px 156px 0 rgba(255,255,255,0.45),
        267px 473px 0 rgba(255,255,255,0.72),
        312px 188px 0 rgba(255,255,255,0.58),
        29px 501px 0 rgba(255,255,255,0.66),
        76px 267px 0 rgba(255,255,255,0.81),
        124px 612px 0 rgba(255,255,255,0.43),
        169px 445px 0 rgba(255,255,255,0.75),
        214px 749px 0 rgba(255,255,255,0.52),
        389px 89px 0 rgba(255,255,255,0.88),
        448px 377px 0 rgba(255,255,255,0.7),
        341px 556px 0 rgba(255,255,255,0.69),
        467px 193px 0 rgba(255,255,255,0.84),
        /* Center-left (500-1000) */
        564px 502px 0 rgba(255,255,255,0.53),
        601px 141px 0 rgba(255,255,255,0.75),
        697px 370px 0 rgba(255,255,255,0.49),
        705px 542px 0 rgba(255,255,255,0.88),
        728px 230px 0 rgba(255,255,255,0.8),
        779px 699px 0 rgba(255,255,255,0.62),
        865px 66px 0 rgba(255,255,255,0.42),
        530px 831px 0 rgba(255,255,255,0.63),
        920px 470px 0 rgba(255,255,255,0.89),
        585px 295px 0 rgba(255,255,255,0.71),
        652px 718px 0 rgba(255,255,255,0.54),
        810px 405px 0 rgba(255,255,255,0.78),
        935px 182px 0 rgba(255,255,255,0.65),
        748px 893px 0 rgba(255,255,255,0.58),
        892px 612px 0 rgba(255,255,255,0.82),
        /* Center-right (1000-1500) */
        1023px 311px 0 rgba(255,255,255,0.93),
        1040px 608px 0 rgba(255,255,255,0.49),
        1100px 147px 0 rgba(255,255,255,0.86),
        1162px 445px 0 rgba(255,255,255,0.53),
        1221px 759px 0 rgba(255,255,255,0.72),
        1310px 229px 0 rgba(255,255,255,0.68),
        1065px 893px 0 rgba(255,255,255,0.49),
        1331px 517px 0 rgba(255,255,255,0.65),
        1438px 347px 0 rgba(255,255,255,0.77),
        1148px 82px 0 rgba(255,255,255,0.73),
        1479px 640px 0 rgba(255,255,255,0.98),
        1295px 442px 0 rgba(255,255,255,0.56),
        1385px 128px 0 rgba(255,255,255,0.81),
        1207px 571px 0 rgba(255,255,255,0.64),
        1452px 815px 0 rgba(255,255,255,0.72),
        1128px 268px 0 rgba(255,255,255,0.85),
        /* Right quarter (1500-2000) */
        1509px 210px 0 rgba(255,255,255,0.81),
        1561px 466px 0 rgba(255,255,255,0.7),
        1709px 148px 0 rgba(255,255,255,0.5),
        1752px 577px 0 rgba(255,255,255,0.92),
        1828px 317px 0 rgba(255,255,255,0.45),
        1896px 741px 0 rgba(255,255,255,0.53),
        1961px 190px 0 rgba(255,255,255,0.46),
        1989px 534px 0 rgba(255,255,255,0.92),
        1550px 738px 0 rgba(255,255,255,0.67),
        1635px 329px 0 rgba(255,255,255,0.82),
        1778px 92px 0 rgba(255,255,255,0.64),
        1855px 485px 0 rgba(255,255,255,0.76),
        1680px 612px 0 rgba(255,255,255,0.58),
        1935px 381px 0 rgba(255,255,255,0.71),
        1590px 55px 0 rgba(255,255,255,0.88),
        1845px 658px 0 rgba(255,255,255,0.63),
        1720px 428px 0 rgba(255,255,255,0.79);
    animation: loyalty-twinkle-slow 5s ease-in-out infinite;
}

.loyalty-stars2:after {
    content: '';
    position: absolute;
    width: 1.5px;
    height: 1.5px;
    background: transparent;
    box-shadow:
        /* Left quarter (0-500) */
        22px 34px 0 rgba(255,255,255,0.61),
        68px 298px 0 rgba(255,255,255,0.78),
        115px 55px 0 rgba(255,255,255,0.52),
        161px 437px 0 rgba(255,255,255,0.85),
        207px 122px 0 rgba(255,255,255,0.67),
        252px 578px 0 rgba(255,255,255,0.49),
        298px 293px 0 rgba(255,255,255,0.91),
        343px 712px 0 rgba(255,255,255,0.56),
        38px 448px 0 rgba(255,255,255,0.74),
        131px 178px 0 rgba(255,255,255,0.88),
        376px 171px 0 rgba(255,255,255,0.68),
        446px 520px 0 rgba(255,255,255,0.75),
        418px 349px 0 rgba(255,255,255,0.63),
        84px 612px 0 rgba(255,255,255,0.43),
        /* Center-left (500-1000) */
        544px 172px 0 rgba(255,255,255,0.96),
        648px 435px 0 rgba(255,255,255,0.52),
        811px 269px 0 rgba(255,255,255,0.8),
        822px 521px 0 rgba(255,255,255,0.5),
        720px 98px 0 rgba(255,255,255,0.74),
        995px 386px 0 rgba(255,255,255,0.53),
        580px 618px 0 rgba(255,255,255,0.71),
        675px 312px 0 rgba(255,255,255,0.84),
        910px 145px 0 rgba(255,255,255,0.65),
        765px 712px 0 rgba(255,255,255,0.58),
        855px 448px 0 rgba(255,255,255,0.79),
        945px 592px 0 rgba(255,255,255,0.67),
        /* Center-right (1000-1500) */
        1099px 319px 0 rgba(255,255,255,0.48),
        1111px 525px 0 rgba(255,255,255,0.85),
        1218px 182px 0 rgba(255,255,255,0.77),
        1273px 654px 0 rgba(255,255,255,1.0),
        1336px 408px 0 rgba(255,255,255,0.9),
        1383px 82px 0 rgba(255,255,255,0.64),
        1427px 539px 0 rgba(255,255,255,0.8),
        1467px 244px 0 rgba(255,255,255,0.54),
        1059px 718px 0 rgba(255,255,255,0.73),
        1175px 455px 0 rgba(255,255,255,0.62),
        1305px 148px 0 rgba(255,255,255,0.88),
        1440px 365px 0 rgba(255,255,255,0.57),
        1248px 612px 0 rgba(255,255,255,0.81),
        1155px 88px 0 rgba(255,255,255,0.69),
        /* Right quarter (1500-2000) */
        1540px 349px 0 rgba(255,255,255,0.41),
        1606px 132px 0 rgba(255,255,255,0.57),
        1674px 536px 0 rgba(255,255,255,0.58),
        1708px 413px 0 rgba(255,255,255,0.82),
        1739px 685px 0 rgba(255,255,255,0.5),
        1791px 255px 0 rgba(255,255,255,0.67),
        1805px 541px 0 rgba(255,255,255,0.93),
        1929px 167px 0 rgba(255,255,255,0.55),
        1968px 441px 0 rgba(255,255,255,0.45),
        1985px 592px 0 rgba(255,255,255,0.96),
        1565px 88px 0 rgba(255,255,255,0.76),
        1650px 712px 0 rgba(255,255,255,0.59),
        1735px 148px 0 rgba(255,255,255,0.83),
        1870px 355px 0 rgba(255,255,255,0.64),
        1580px 498px 0 rgba(255,255,255,0.72),
        1910px 622px 0 rgba(255,255,255,0.51);
    animation: loyalty-twinkle 6s ease-in-out 1s infinite;
}

.loyalty-stars3:after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        35px 48px 0 rgba(255,255,255,0.82),
        82px 125px 0 rgba(255,255,255,0.65),
        128px 78px 0 rgba(255,255,255,0.94),
        175px 168px 0 rgba(255,255,255,0.58),
        220px 45px 0 rgba(255,255,255,0.87),
        265px 218px 0 rgba(255,255,255,0.72),
        310px 135px 0 rgba(255,255,255,0.91),
        45px 295px 0 rgba(255,255,255,0.54),
        92px 365px 0 rgba(255,255,255,0.83),
        138px 328px 0 rgba(255,255,255,0.67),
        185px 412px 0 rgba(255,255,255,0.95),
        232px 458px 0 rgba(255,255,255,0.51),
        278px 392px 0 rgba(255,255,255,0.89),
        325px 498px 0 rgba(255,255,255,0.76),
        58px 532px 0 rgba(255,255,255,0.63),
        417px 541px 0 rgba(255,255,255,0.7),
        515px 105px 0 rgba(255,255,255,0.46),
        537px 331px 0 rgba(255,255,255,0.84),
        632px 747px 0 rgba(255,255,255,0.94),
        684px 268px 0 rgba(255,255,255,0.78),
        725px 1147px 0 rgba(255,255,255,0.93),
        833px 317px 0 rgba(255,255,255,0.96),
        868px 567px 0 rgba(255,255,255,0.43),
        1130px 876px 0 rgba(255,255,255,0.74),
        230px 155px 0 rgba(255,255,255,0.97),
        304px 881px 0 rgba(255,255,255,0.48),
        431px 512px 0 rgba(255,255,255,0.8),
        1416px 306px 0 rgba(255,255,255,0.73),
        1631px 82px 0 rgba(255,255,255,0.94),
        1710px 757px 0 rgba(255,255,255,0.75);
    animation: loyalty-twinkle-bright 8s ease-in-out 2s infinite;
}

@keyframes loyalty-twinkle-slow {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 0.7; }
}

@keyframes loyalty-twinkle {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.9; }
}

@keyframes loyalty-twinkle-bright {
    0%, 100% { opacity: 0.25; }
    40% { opacity: 1; }
    50% { opacity: 0.4; }
    60% { opacity: 1; }
    70% { opacity: 0.25; }
}

@media (max-width: 600px) {
    .loyalty-cta-banner {
        margin: 0 0.75rem 0;
        display: flex;
        flex-direction: column;
    }
    .loyalty-cta-img {
        width: 80%;
    }
    .loyalty-cta-bar {
        position: relative;
        gap: 1.5rem;
        padding: 0.75rem 1rem;
        margin-top: -1.5rem;
    }
    .loyalty-cta-btn {
        padding: 0.45rem 1.25rem;
        font-size: 0.75rem;
    }
    .loyalty-cta-cancel {
        font-size: 0.65rem;
    }
    .loyalty-subscribed-badge {
        font-size: 0.85rem;
    }
    .loyalty-subscribed-thanks {
        font-size: 0.65rem;
    }
    .loyalty-filter-bar {
        padding: 0.75rem 0.75rem 0;
    }
    #loyalty-page .grid { padding: 0 0.75rem; }
}

.system-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20, 20, 20, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: rgba(255, 255, 255, 0.85);
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    white-space: nowrap;
}

.system-toast i {
    margin-right: 0.5rem;
    color: var(--red, #ff3b3b);
}

.system-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.vault-gate-toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(20px); background:rgba(20,20,20,0.92); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); color:rgba(255,255,255,0.85); padding:0.75rem 1.5rem; border-radius:12px; font-size:0.85rem; font-weight:500; z-index:9999; opacity:0; transition:opacity 0.3s ease,transform 0.3s ease; pointer-events:none; white-space:nowrap; }
.vault-gate-toast i { margin-right:0.5rem; color:var(--red,#ff3b3b); }
.vault-gate-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }


/* =============================================
   SANCTUM — COMMUNITY DISCOVERY (v4)
   ============================================= */
.sanctum-container { max-width: 960px; margin: 0 auto; padding: 3rem 1.5rem 0; }

.sanctum-header { text-align: center; margin-bottom: 1.5rem; }
.sanctum-logo { max-width: 320px; height: auto; margin: 0 auto 1.75rem; display: block; }
.sanctum-divider { height: 1px; margin: 0 0 3rem; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); }

/* Controls */
.sanctum-controls { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.85rem; flex-wrap: wrap; }
.sanctum-search-wrap { position: relative; flex: 1; min-width: 220px; }
.sanctum-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.35); font-size: 1.15rem; pointer-events: none; }
.sanctum-search {
    width: 100%; padding: 0.8rem 1.1rem 0.8rem 2.85rem;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px;
    color: #fff; font-size: 1rem; font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    outline: none; transition: border-color 0.2s ease, background 0.2s ease;
}
.sanctum-search:focus { border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.07); }
.sanctum-search::placeholder { color: rgba(255,255,255,0.22); }
.sanctum-privacy-note {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.78rem; color: rgba(255,255,255,0.3); margin-bottom: 1.5rem;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace; letter-spacing: 0.03em;
}
.sanctum-privacy-note i { font-size: 0.82rem; opacity: 0.5; }

/* Stats */
.sanctum-stats { display: flex; align-items: center; justify-content: center; gap: 0.65rem; flex-wrap: wrap; }
.sanctum-stat { font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.5); white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.sanctum-stat i { font-size: 0.95rem; color: var(--red); opacity: 0.5; }
.sanctum-stat-sep { color: rgba(255,255,255,0.12); font-size: 0.45rem; }
.sanctum-freshness { color: rgba(255,255,255,0.35); font-size: 0.9rem; }
.sanctum-freshness i { color: #4ade80; opacity: 0.8; font-size: 0.95rem; }

/* Section labels */
.sanctum-section { margin-bottom: 3.5rem; }
.sanctum-section-label {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace; font-size: 1.1rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45);
    margin-bottom: 1.75rem; padding-left: 2px; display: flex; align-items: center; gap: 0.55rem;
}
.sanctum-section-label i { font-size: 1.2rem; color: var(--red); opacity: 0.5; }

/* Top 3 Plaques */
.sanctum-top3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.sanctum-featured-card {
    --accent: rgba(255,255,255,0.12);
    display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none;
    padding: 2.75rem 1.5rem 2.25rem; border-radius: 22px;
    background: linear-gradient(165deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
    border: 1.5px solid var(--accent);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; overflow: hidden;
    box-shadow: 0 6px 28px rgba(0,0,0,0.2);
}
.sanctum-featured-card::before {
    content: ''; position: absolute; top: -1px; left: 6%; right: 6%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.sanctum-featured-card:hover { transform: translateY(-4px); box-shadow: 0 14px 52px rgba(0,0,0,0.4); }

@keyframes sanctumShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.sanctum-featured-card--r1 {
    --accent: rgba(212,168,67,0.4);
    background: linear-gradient(135deg, rgba(212,168,67,0.12) 0%, rgba(212,168,67,0.04) 40%, rgba(212,168,67,0.1) 60%, rgba(212,168,67,0.03) 100%),
                linear-gradient(90deg, transparent 30%, rgba(212,168,67,0.06) 50%, transparent 70%);
    background-size: 100% 100%, 200% 100%;
    animation: sanctumShimmer 6s ease-in-out infinite;
    box-shadow: 0 6px 28px rgba(0,0,0,0.25), 0 0 24px rgba(212,168,67,0.08);
}
.sanctum-featured-card--r1:hover { box-shadow: 0 14px 52px rgba(0,0,0,0.4), 0 0 40px rgba(212,168,67,0.14); }
.sanctum-featured-card--r2 {
    --accent: rgba(180,180,180,0.3);
    background: linear-gradient(135deg, rgba(180,180,180,0.1) 0%, rgba(180,180,180,0.03) 40%, rgba(180,180,180,0.08) 60%, rgba(180,180,180,0.02) 100%),
                linear-gradient(90deg, transparent 30%, rgba(180,180,180,0.05) 50%, transparent 70%);
    background-size: 100% 100%, 200% 100%;
    animation: sanctumShimmer 7s ease-in-out infinite;
    box-shadow: 0 6px 28px rgba(0,0,0,0.2), 0 0 16px rgba(180,180,180,0.05);
}
.sanctum-featured-card--r2:hover { box-shadow: 0 14px 52px rgba(0,0,0,0.4), 0 0 28px rgba(180,180,180,0.08); }
.sanctum-featured-card--r3 {
    --accent: rgba(184,115,51,0.3);
    background: linear-gradient(135deg, rgba(184,115,51,0.1) 0%, rgba(184,115,51,0.03) 40%, rgba(184,115,51,0.08) 60%, rgba(184,115,51,0.02) 100%),
                linear-gradient(90deg, transparent 30%, rgba(184,115,51,0.05) 50%, transparent 70%);
    background-size: 100% 100%, 200% 100%;
    animation: sanctumShimmer 8s ease-in-out infinite;
    box-shadow: 0 6px 28px rgba(0,0,0,0.2), 0 0 16px rgba(184,115,51,0.05);
}
.sanctum-featured-card--r3:hover { box-shadow: 0 14px 52px rgba(0,0,0,0.4), 0 0 28px rgba(184,115,51,0.08); }

.sanctum-rank {
    position: absolute; top: 14px; left: 16px;
    font-size: 1rem; font-weight: 700; font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    letter-spacing: 0.05em; display: flex; align-items: center; gap: 5px;
    color: rgba(255,255,255,0.25);
}
.sanctum-rank i { font-size: 1.15rem; }
.sanctum-featured-card--r1 .sanctum-rank { color: #d4a843; }
.sanctum-featured-card--r1 .sanctum-rank i { color: #d4a843; }
.sanctum-featured-card--r2 .sanctum-rank { color: #b0b0b0; }
.sanctum-featured-card--r2 .sanctum-rank i { color: #b0b0b0; }
.sanctum-featured-card--r3 .sanctum-rank { color: #c48844; }
.sanctum-featured-card--r3 .sanctum-rank i { color: #c48844; }

.sanctum-featured-avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 2.5px solid rgba(255,255,255,0.12); margin-bottom: 0.6rem; }
.sanctum-featured-card--r1 .sanctum-featured-avatar { border-color: rgba(212,168,67,0.35); }
.sanctum-featured-card--r2 .sanctum-featured-avatar { border-color: rgba(168,168,168,0.25); }
.sanctum-featured-card--r3 .sanctum-featured-avatar { border-color: rgba(184,115,51,0.25); }

.sanctum-featured-hours {
    font-size: 2rem; font-weight: 700; color: rgba(255,255,255,0.8);
    font-family: 'Yeezy', 'IBM Plex Mono', monospace; margin-bottom: 0.3rem; line-height: 1.1;
}
.sanctum-featured-hours span { font-size: 0.9rem; font-weight: 500; opacity: 0.5; }

.sanctum-featured-name { font-family: 'Yeezy', 'IBM Plex Mono', monospace; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 0.35rem; }

.sanctum-featured-location { font-size: 0.9rem; color: rgba(255,255,255,0.55); margin-bottom: 0.45rem; display: flex; align-items: center; justify-content: center; gap: 0.25rem; }
.sanctum-featured-location i { font-size: 0.8rem; opacity: 0.5; }

.sanctum-archetype {
    display: inline-block; padding: 0.3rem 0.85rem; font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em; color: var(--red);
    background: rgba(255,60,60,0.1); border: 1px solid rgba(255,60,60,0.18);
    border-radius: 20px;
}

/* Top 4-20 */
.sanctum-top-rest { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.7rem; }
.sanctum-compact-card {
    display: flex; align-items: center; gap: 0.85rem; padding: 0.8rem 1.1rem;
    text-decoration: none; border-radius: 14px;
    background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.2s ease, border-color 0.2s ease;
}
.sanctum-compact-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.14); }
.sanctum-compact-rank { font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.3); min-width: 28px; font-family: 'Yeezy', 'IBM Plex Mono', monospace; }
.sanctum-compact-avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sanctum-compact-name { font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,0.9); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanctum-compact-hours { font-size: 0.88rem; color: rgba(255,255,255,0.4); font-family: 'Yeezy', 'IBM Plex Mono', monospace; flex-shrink: 0; display: flex; align-items: center; gap: 0.3rem; }
.sanctum-compact-hours i { font-size: 0.78rem; opacity: 0.5; }

/* Vault Pulse */
.sanctum-pulse { display: flex; flex-direction: column; gap: 1.75rem; }
.sanctum-pulse-group { min-width: 0; position: relative; }
.sanctum-pulse-group::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 60px;
    background: linear-gradient(to right, transparent, var(--black, #000));
    pointer-events: none; z-index: 1;
}
.sanctum-pulse-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.85rem; position: relative; z-index: 2; }
.sanctum-pulse-arrows { display: flex; gap: 0.4rem; }
.sanctum-pulse-arrow {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.45); font-size: 1rem; cursor: pointer; transition: all 0.2s ease;
}
.sanctum-pulse-arrow:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.sanctum-pulse-label { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 0.45rem; font-family: 'Yeezy', 'IBM Plex Mono', monospace; }
.sanctum-pulse-label i { font-size: 1rem; color: var(--red); opacity: 0.5; }
.sanctum-pulse-scroll {
    display: flex; gap: 0.9rem; overflow-x: scroll; overflow-y: hidden;
    padding-bottom: 0.75rem; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; max-width: 100%;
}
.sanctum-pulse-scroll::-webkit-scrollbar { height: 3px; }
.sanctum-pulse-scroll::-webkit-scrollbar-track { background: transparent; }
.sanctum-pulse-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.sanctum-pulse-card {
    flex-shrink: 0; scroll-snap-align: start; width: 165px; cursor: pointer;
    border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
    overflow: hidden; transition: border-color 0.2s ease, transform 0.2s ease;
}
.sanctum-pulse-card:hover { border-color: rgba(255,255,255,0.15); transform: translateY(-2px); }
.sanctum-pulse-cover { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.sanctum-pulse-info { padding: 0.7rem 0.75rem; }
.sanctum-pulse-title { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 0.25rem; }
.sanctum-pulse-plays { font-size: 0.8rem; color: rgba(255,255,255,0.45); display: flex; align-items: center; gap: 0.3rem; }
.sanctum-pulse-plays i { font-size: 0.72rem; color: var(--red); opacity: 0.5; }

/* Sort Pills */
.sanctum-sort { display: flex; gap: 0.45rem; flex-wrap: nowrap; flex-shrink: 0; }
.sanctum-sort-pill {
    padding: 0.55rem 1.15rem; font-size: 0.9rem; font-weight: 600;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.04em;
    color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; cursor: pointer;
    transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 0.35rem;
}
.sanctum-sort-pill:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.sanctum-sort-pill i { font-size: 0.92rem; }
.sanctum-sort-pill--active { color: var(--red); background: rgba(255,60,60,0.1); border-color: rgba(255,60,60,0.22); }

/* Community Grid */
.sanctum-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; transition: opacity 0.2s ease; }
.sanctum-grid.sanctum-loading { opacity: 0.4; pointer-events: none; }
.sanctum-card {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem;
    text-decoration: none; border-radius: 16px;
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.sanctum-card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.16); transform: translateY(-2px); }
.sanctum-card-avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); }
.sanctum-card-info { min-width: 0; flex: 1; }
.sanctum-card-name { font-size: 1.05rem; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanctum-card-location { font-size: 0.85rem; color: rgba(255,255,255,0.55); margin-top: 3px; display: flex; align-items: center; gap: 0.3rem; }
.sanctum-card-location i { font-size: 0.72rem; opacity: 0.5; }
.sanctum-card-archetype { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--red); opacity: 0.85; margin-top: 3px; }

/* Empty */
.sanctum-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1rem; color: rgba(255,255,255,0.35); font-size: 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.sanctum-empty i { font-size: 2.5rem; opacity: 0.3; }

/* Last active on cards */
.sanctum-card-active { font-size: 0.72rem; color: rgba(255,255,255,0.3); margin-top: 2px; display: flex; align-items: center; gap: 0.2rem; }
.sanctum-card-active i { font-size: 0.65rem; opacity: 0.5; }

/* ── Trending ── */
.sanctum-trending { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
.sanctum-trend-item {
    display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.85rem;
    border-radius: 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
}
.sanctum-trend-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sanctum-trend-cover { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sanctum-trend-info { flex: 1; min-width: 0; }
.sanctum-trend-title { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanctum-trend-meta { font-size: 0.72rem; color: rgba(255,255,255,0.35); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sanctum-trend-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.06); margin-top: 5px; overflow: hidden; }
.sanctum-trend-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.sanctum-trend-fill--completed { background: #4ade80; }
.sanctum-trend-fill--playing { background: #f59e0b; }
.sanctum-trend-fill--abandoned { background: var(--red); opacity: 0.6; }
.sanctum-trend-fill--started { background: rgba(255,255,255,0.15); }
.sanctum-trend-status { flex-shrink: 0; font-size: 1rem; }
.sanctum-trend-status--completed { color: #4ade80; }
.sanctum-trend-status--playing { color: #f59e0b; }
.sanctum-trend-status--abandoned { color: var(--red); opacity: 0.5; }
.sanctum-trend-status--started { color: rgba(255,255,255,0.2); }

/* ── Sanctum Wall ── */
.sanctum-wall {
    background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 16px; overflow: hidden;
}
.swall-composer {
    padding: 1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.swall-input {
    width: 100%; padding: 0.65rem 0.85rem; min-height: 48px; max-height: 100px; resize: none;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px;
    color: #fff; font-size: 0.88rem; font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    outline: none; transition: border-color 0.2s ease;
}
.swall-input:focus { border-color: rgba(255,255,255,0.18); }
.swall-input::placeholder { color: rgba(255,255,255,0.2); }
.swall-composer-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.45rem; }
.swall-charcount { font-size: 0.7rem; color: rgba(255,255,255,0.2); font-family: 'Yeezy', 'IBM Plex Mono', monospace; }
.swall-post-btn {
    padding: 0.4rem 1.1rem; font-size: 0.78rem; font-weight: 600;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace; text-transform: uppercase;
    color: #fff; background: var(--red); border: none; border-radius: 8px; cursor: pointer;
    transition: opacity 0.2s ease;
}
.swall-post-btn:hover { opacity: 0.85; }
.swall-post-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.swall-cooldown {
    padding: 0.85rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.swall-cooldown-bar {
    height: 4px; border-radius: 2px; background: rgba(255,255,255,0.06); overflow: hidden; margin-bottom: 0.5rem;
}
.swall-cooldown-fill {
    height: 100%; border-radius: 2px; background: var(--red); opacity: 0.6;
    transition: width 1s linear;
}
.swall-cooldown-text {
    font-size: 0.78rem; color: rgba(255,255,255,0.3); font-family: 'Yeezy', 'IBM Plex Mono', monospace;
}
.swall-messages {
    max-height: 680px; overflow-y: auto; padding: 0.5rem 1.25rem;
}
.swall-messages::-webkit-scrollbar { width: 4px; }
.swall-messages::-webkit-scrollbar-track { background: transparent; }
.swall-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.swall-msg {
    display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.04); position: relative;
}
.swall-msg:last-of-type { border-bottom: none; }
.swall-msg-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.swall-msg-body { flex: 1; min-width: 0; }
.swall-msg-header { display: flex; align-items: baseline; gap: 0.45rem; margin-bottom: 0.15rem; }
.swall-msg-name { font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none; }
.swall-msg-name:hover { color: #fff; }
.swall-msg-time { font-size: 0.68rem; color: rgba(255,255,255,0.2); }
.swall-msg-text { font-size: 0.85rem; color: rgba(255,255,255,0.6); line-height: 1.4; word-break: break-word; }
.swall-msg-delete {
    position: absolute; top: 0.7rem; right: 0; background: none; border: none;
    color: rgba(255,255,255,0.12); font-size: 0.8rem; cursor: pointer; opacity: 0;
    transition: opacity 0.2s ease, color 0.2s ease;
}
.swall-msg:hover .swall-msg-delete { opacity: 1; }
.swall-msg-delete:hover { color: var(--red); }
.swall-load-more {
    display: block; width: 100%; padding: 0.6rem; margin: 0;
    background: none; border: none; border-top: 1px solid rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.35); font-size: 0.78rem; font-weight: 600;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace; text-transform: uppercase; cursor: pointer;
    transition: color 0.2s ease;
}
.swall-load-more:hover { color: rgba(255,255,255,0.6); }

/* Pagination */
.sanctum-pagination { display: flex; justify-content: center; gap: 0.45rem; margin-top: 2rem; }
.sanctum-page-btn {
    min-width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    font-size: 0.92rem; font-weight: 600; color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px; cursor: pointer; transition: all 0.2s ease;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
}
.sanctum-page-btn:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); }
.sanctum-page-btn--active { color: var(--red); background: rgba(255,60,60,0.12); border-color: rgba(255,60,60,0.28); }

/* ── Responsive: Tablet / Narrow ── */
@media (max-width: 768px) {
    .sanctum-container { padding: 1.5rem 1rem 0; }
    .sanctum-logo { max-width: 220px; }

    /* Top 3 */
    .sanctum-top3 { grid-template-columns: 1fr; gap: 1rem; }
    .sanctum-featured-card { flex-direction: column; text-align: center; padding: 2rem 1.25rem 1.5rem; }
    .sanctum-featured-avatar { width: 84px; height: 84px; }
    .sanctum-featured-name { font-size: 1.25rem; word-break: break-word; }
    .sanctum-featured-hours { font-size: 1.4rem; }
    .sanctum-featured-hours span { font-size: 0.8rem; }
    .sanctum-featured-location { justify-content: center; }
    .sanctum-rank { position: absolute; top: 12px; left: 14px; }

    /* Compact 4-20 */
    .sanctum-top-rest { grid-template-columns: 1fr; }
    .sanctum-compact-card { padding: 0.85rem 1rem; }
    .sanctum-compact-avatar { width: 44px; height: 44px; }

    /* Controls */
    .sanctum-controls { flex-direction: column; gap: 0.65rem; }
    .sanctum-search-wrap { min-width: 100%; }
    .sanctum-search { padding: 0.85rem 1.1rem 0.85rem 2.85rem; }
    .sanctum-sort { flex-wrap: wrap; gap: 0.5rem; }
    .sanctum-sort-pill { padding: 0.6rem 1rem; }

    /* Grid */
    .sanctum-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .sanctum-card { padding: 1rem 1.1rem; }
    .sanctum-card-avatar { width: 50px; height: 50px; }

    /* Trending */
    .sanctum-trending { grid-template-columns: 1fr; }
    .sanctum-trend-item { padding: 0.75rem 0.9rem; }
    .sanctum-trend-cover { width: 48px; height: 48px; }

    /* Pulse */
    .sanctum-pulse-card { width: 145px; }
    .sanctum-pulse-arrow { width: 38px; height: 38px; font-size: 1.05rem; }

    /* Pagination */
    .sanctum-page-btn { min-width: 46px; height: 46px; font-size: 0.9rem; }

    /* Wall */
    .sanctum-wall { border-radius: 12px; }
    .swall-messages { max-height: 500px; }
}

/* ── Responsive: Phone ── */
@media (max-width: 480px) {
    .sanctum-container { padding: 1.25rem 0.75rem 0; }
    .sanctum-logo { max-width: 180px; margin-bottom: 1.25rem; }
    .sanctum-divider { margin-bottom: 2rem; }
    .sanctum-section { margin-bottom: 2.5rem; }
    .sanctum-section-label { font-size: 0.95rem; margin-bottom: 1.25rem; }

    /* Stats */
    .sanctum-stats { flex-direction: column; gap: 0.3rem; }
    .sanctum-stat-sep { display: none; }

    /* Top 3 */
    .sanctum-featured-card { padding: 1.75rem 1rem 1.25rem; }
    .sanctum-featured-avatar { width: 76px; height: 76px; }
    .sanctum-featured-hours { font-size: 1.2rem; }
    .sanctum-featured-hours span { font-size: 0.75rem; }
    .sanctum-featured-name { font-size: 1.1rem; }
    .sanctum-featured-location { font-size: 0.82rem; }
    .sanctum-archetype { font-size: 0.72rem; padding: 0.2rem 0.65rem; }

    /* Compact */
    .sanctum-compact-name { font-size: 0.95rem; }
    .sanctum-compact-hours { font-size: 0.82rem; }

    /* Sort */
    .sanctum-sort-pill { padding: 0.55rem 0.85rem; font-size: 0.82rem; }

    /* Grid */
    .sanctum-card-name { font-size: 0.98rem; }
    .sanctum-card-location { font-size: 0.78rem; }
    .sanctum-card-archetype { font-size: 0.72rem; }

    /* Trending */
    .sanctum-trend-title { font-size: 0.82rem; }
    .sanctum-trend-cover { width: 42px; height: 42px; }

    /* Pulse */
    .sanctum-pulse-card { width: 135px; }
    .sanctum-pulse-title { font-size: 0.82rem; }
    .sanctum-pulse-plays { font-size: 0.72rem; }

    /* Pagination */
    .sanctum-page-btn { min-width: 44px; height: 44px; font-size: 0.85rem; }

    /* Wall */
    .sanctum-wall { border-radius: 10px; }
    .swall-composer { padding: 0.85rem 1rem; }
    .swall-messages { max-height: 420px; padding: 0.4rem 1rem; }
    .swall-msg { gap: 0.55rem; padding: 0.6rem 0; }
    .swall-msg-avatar { width: 30px; height: 30px; }
    .swall-msg-name { font-size: 0.82rem; }
    .swall-msg-text { font-size: 0.82rem; }
    .swall-msg-time { font-size: 0.65rem; }
}
.sanctum-footer { border-top: 1px solid rgba(255,255,255,0.06); }

/* =============================================
   SIR AI — INLINE SPA SECTION
   ============================================= */

#sirai-page {
    padding: 0 !important;
    position: relative;
    --sirai-sw: min(600px, 88vw);
    --sirai-sh: 52px;
    --sirai-sr: 26px;
    margin-top: -5rem;
    margin-left: calc(-1 * var(--content-padding));
    margin-right: calc(-1 * var(--content-padding));
    margin-bottom: -2rem;
    min-height: calc(100dvh - 5rem);
}

/* no overflow:hidden here — body.no-scroll handles scroll lock,
   and overflow:hidden clips the search bar glow on mobile */

/* ===== ANIMATED BACKGROUND — Red & Black ===== */
.sirai-bg {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    background: #000;
    pointer-events: none;
}

/* Layer 2 — Primary red lights: multiple radial gradients drifting slowly */
.sirai-bg-oil {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 75% 65% at 15% 25%, rgba(210, 0, 0, 0.85) 0%, transparent 65%),
        radial-gradient(ellipse 55% 50% at 85% 75%, rgba(150, 0, 0, 0.75) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 60% 85%, rgba(80, 0, 0, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse 35% 40% at 75% 15%, rgba(255, 20, 0, 0.55) 0%, transparent 50%),
        radial-gradient(ellipse 50% 35% at 40% 50%, rgba(40, 0, 0, 0.9) 0%, transparent 60%);
    filter: blur(48px);
    animation: sirai-red-drift 20s ease-in-out infinite alternate;
}

@keyframes sirai-red-drift {
    0%   { transform: translate(0, 0)       scale(1);    opacity: 0.80; }
    25%  { transform: translate(4%, -3%)    scale(1.04); opacity: 0.90; }
    50%  { transform: translate(-3%, 4%)    scale(0.97); opacity: 0.75; }
    75%  { transform: translate(3%, 3%)     scale(1.05); opacity: 0.88; }
    100% { transform: translate(-4%, -2%)   scale(1.02); opacity: 0.82; }
}

/* Layer 3 — Crimson accent: second drifting layer, deep reds and near-black */
.sirai-bg-depth {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 60% 50% at 80% 20%, rgba(180, 0, 0, 0.6) 0%, transparent 60%),
        radial-gradient(ellipse 50% 60% at 20% 80%, rgba(100, 0, 0, 0.7) 0%, transparent 55%),
        radial-gradient(ellipse 40% 40% at 50% 45%, rgba(60, 0, 0, 0.5) 0%, transparent 50%);
    filter: blur(70px);
    animation: sirai-depth-drift 26s ease-in-out infinite alternate-reverse;
}

@keyframes sirai-depth-drift {
    0%   { transform: translate(0, 0)      scale(1);    opacity: 0.85; }
    33%  { transform: translate(-5%, 3%)   scale(1.06); opacity: 0.70; }
    66%  { transform: translate(4%, -4%)   scale(0.96); opacity: 0.90; }
    100% { transform: translate(-3%, -3%)  scale(1.03); opacity: 0.80; }
}

/* Layer 4 — Deep vignette: heavy black edges to ground the composition */
.sirai-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 80% at center, transparent 35%, rgba(0,0,0,0.65) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Layer 5 — Fine cinematic grain */
.sirai-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    opacity: 0.28;
    mix-blend-mode: soft-light;
    pointer-events: none;
    z-index: 3;
    animation: sirai-grain-drift 4s steps(3) infinite;
}

@keyframes sirai-grain-drift {
    0%   { transform: translate(0, 0); }
    33%  { transform: translate(-3%, -2%); }
    66%  { transform: translate(2%, -3%); }
    100% { transform: translate(0, 0); }
}

/* ===== LANDING STATE ===== */
.sirai-landing {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: calc(100dvh - 5rem);
    padding: 0 2rem;
    overflow: hidden;
}

.sirai-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 2rem;
    display: block;
    opacity: 0;
    animation: sirai-enter-logo 600ms 200ms cubic-bezier(0.16,1,0.3,1) forwards,
               sirai-logo-idle 4s 1s ease-in-out infinite;
}

@keyframes sirai-logo-idle {
    0%, 100% { filter: drop-shadow(0 0 20px rgba(255, 220, 50, 0.4)) drop-shadow(0 0 40px rgba(255, 220, 50, 0.15)); transform: scale(1) rotate(0deg); }
    50%      { filter: drop-shadow(0 0 35px rgba(255, 220, 50, 0.6)) drop-shadow(0 0 60px rgba(255, 220, 50, 0.2)); transform: scale(1.03) rotate(2.5deg); }
}

@keyframes sirai-enter-logo {
    from { opacity: 0; transform: scale(0.5) rotate(-10deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.sirai-greeting {
    font-size: clamp(1.1rem, 3vw, 1.25rem);
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin: 0 0 0.75rem;
    letter-spacing: 0.1em;
    text-shadow: 0 0 40px rgba(255, 255, 255, 0.06);
    opacity: 0;
    animation: sirai-enter-greeting 500ms 600ms cubic-bezier(0.25,0.46,0.45,0.94) forwards;
}

@keyframes sirai-enter-greeting {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sirai-greeting .name-accent {
    background: linear-gradient(135deg, #a8d8ea, #c4b5fd, #93e9be, #a8d8ea, #ddd6fe);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: sirai-name-iridescent 4s ease infinite;
    text-shadow: none;
}

@keyframes sirai-name-iridescent {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes sirai-enter-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sirai-subline {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    margin: 0 0 3rem;
    letter-spacing: 0.02em;
    opacity: 0;
    animation: sirai-enter-fade 400ms 1000ms ease-out forwards;
}

@keyframes sirai-enter-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== SEARCH INPUT (Landing) ===== */
.sirai-search-wrap {
    width: min(600px, 88vw);
    margin: 0 auto;
    position: relative;
    opacity: 0;
    animation: sirai-enter-search 500ms 1300ms cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes sirai-enter-search {
    from { opacity: 0; transform: scale(0.9) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ===== SHINE BORDER ===== */
@property --sirai-shine-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes sirai-shine-rotate {
    to { --sirai-shine-angle: 360deg; }
}

.sirai-search-orb {
    position: relative;
    width: var(--sirai-sw);
    height: var(--sirai-sh);
    border-radius: calc(var(--sirai-sr) + 2px);
    padding: 1.5px;
    isolation: isolate;
    --sirai-shine-angle: 0deg;
    background: conic-gradient(
        from var(--sirai-shine-angle),
        transparent 0%,
        transparent 68%,
        rgba(140, 20, 20, 0.5) 76%,
        rgba(210, 55, 55, 0.85) 80%,
        rgba(255, 185, 185, 0.9) 81.5%,
        rgba(210, 55, 55, 0.85) 83%,
        rgba(140, 20, 20, 0.5) 86%,
        transparent 90%,
        transparent 100%
    );
    animation: sirai-shine-rotate 4.5s linear infinite;
    box-shadow: 0 0 28px 6px rgba(180, 30, 30, 0.1),
                0 4px 20px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.4s ease;
}

/* Old glow layer divs — hidden */
.sirai-ss-glow,
.sirai-ss-border,
.sirai-ss-border-dark,
.sirai-ss-white {
    display: none;
}

/* Focus — brighter beam, faster sweep */
.sirai-search-orb:focus-within {
    animation-duration: 2.5s;
    background: conic-gradient(
        from var(--sirai-shine-angle),
        transparent 0%,
        transparent 68%,
        rgba(160, 35, 35, 0.6) 76%,
        rgba(230, 70, 70, 0.9) 80%,
        rgba(255, 210, 210, 1) 81.5%,
        rgba(230, 70, 70, 0.9) 83%,
        rgba(160, 35, 35, 0.6) 86%,
        transparent 90%,
        transparent 100%
    );
    box-shadow: 0 0 40px 8px rgba(200, 40, 40, 0.18),
                0 4px 20px rgba(0, 0, 0, 0.4);
}

.sirai-input-container {
    position: relative;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 52px;
    padding: 8px 48px 8px 18px;
    background: #0d0d0d;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
                inset 0 1px 0px 0px rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 26px;
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.sirai-search-orb:focus-within .sirai-input-container {
    background: #0a0a0a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
                inset 0 1px 0px 0px rgba(255, 255, 255, 0.12);
}

#sirai-input {
    flex: 1;
    min-width: 120px;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

#sirai-input::placeholder {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.25);
}

.sirai-search-btn {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: color 0.2s, background 0.2s, box-shadow 0.2s;
    z-index: 4;
}
.sirai-search-btn:hover {
    color: #fff;
    background: rgba(255, 0, 0, 0.12);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.2);
}

/* Tag chips inside search input */
.sirai-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    background: color-mix(in srgb, var(--tag-color, #6b7280) 12%, rgba(255,255,255,0.04));
    border: 1px solid color-mix(in srgb, var(--tag-color, #6b7280) 25%, rgba(255,255,255,0.08));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #fff;
}

.sirai-chip i { color: var(--tag-color, #6b7280); font-size: 0.8rem; }

.sirai-chip-x {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0 0 0 2px;
    line-height: 1;
    transition: color 0.2s;
}
.sirai-chip-x:hover { color: #fff; }

/* ===== SEARCHING STATE ===== */
.sirai-searching {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.sirai-search-term {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    margin: 0;
    padding: 0.5em 1.2em;
    background: color-mix(in srgb, #000 70%, transparent);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05),
                0 4px 20px rgba(0,0,0,0.4);
    animation: sirai-term-pulse 2s ease-in-out infinite;
}

@keyframes sirai-term-pulse {
    0%, 100% { border-color: rgba(232, 56, 79, 0.15); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 0 8px rgba(232, 56, 79, 0.05); }
    50%      { border-color: rgba(255, 220, 50, 0.3); box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.05), 0 0 12px rgba(255, 220, 50, 0.08); }
}

.sirai-searching-text {
    font-size: 0.75rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.3);
    text-transform: lowercase;
    letter-spacing: 0.1em;
}

.sirai-dots::after {
    content: '';
    animation: sirai-ellipsis 1.5s steps(4, end) infinite;
}

@keyframes sirai-ellipsis {
    0%  { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.sirai-thinking-ring {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sirai-thinking-ring::before,
.sirai-thinking-ring::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 220, 50, 0.3);
    animation: sirai-ripple 2s ease-out infinite;
}
.sirai-thinking-ring::after {
    animation-delay: 1s;
}

@keyframes sirai-ripple {
    0%   { transform: scale(0.8); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

.sirai-logo-thinking {
    width: 56px;
    height: 56px;
    display: block;
    animation: sirai-think-pulse 1.5s ease-in-out infinite;
}

@keyframes sirai-think-pulse {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 220, 50, 0.3)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 25px rgba(255, 220, 50, 0.6)); transform: scale(1.08); }
}

/* ===== RESULTS STATE ===== */
.sirai-results {
    position: relative;
    z-index: 1;
    max-width: var(--content-max-width, 1100px);
    margin: 0 auto;
    padding: 80px 2rem 4rem;
}

.sirai-section {
    margin-bottom: 3rem;
}

.sirai-section-label {
    font-family: 'Yeezy', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sirai-label-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    filter: drop-shadow(0 0 6px rgba(255, 220, 50, 0.4));
}

.sirai-matched-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, #fff 3%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sirai-matched-label {
    font-size: 0.75rem;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: center;
    margin-right: 0.5rem;
}

/* Did you mean — title match suggestions (glass box + tile grid) */
.sirai-title-matches {
    margin: 0 auto 24px;
    background: color-mix(in srgb, var(--red) 5%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 12%, transparent);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 16px 18px;
}
.sirai-title-matches-list {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sirai-title-matches-list::-webkit-scrollbar { height: 3px; }
.sirai-title-matches-list::-webkit-scrollbar-track { background: transparent; }
.sirai-title-matches-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 2px; }
.sirai-title-match-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 150px;
    gap: 8px;
    padding: 12px 8px;
    background: color-mix(in srgb, var(--red) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--red) 10%, transparent);
    border-radius: 10px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    text-align: center;
    text-decoration: none;
}
.sirai-title-match-row:hover {
    background: color-mix(in srgb, var(--red) 14%, transparent);
    border-color: color-mix(in srgb, var(--red) 30%, transparent);
}
.sirai-title-match-row.active-content {
    border-color: var(--red);
    box-shadow: 0 0 14px 0 var(--red-glow);
}
.sirai-tm-cover { width: 120px; height: 120px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.sirai-tm-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; width: 100%; align-items: center; }
.sirai-tm-title { font-family: 'Yeezy', sans-serif; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sirai-tm-tag { font-family: 'Yeezy', sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.45; }
.sirai-tm-dur { font-family: 'Yeezy', sans-serif; font-size: 11px; opacity: 0.35; font-variant-numeric: tabular-nums; }

/* Card stagger animation */
.sirai-results .card {
    opacity: 0;
    transform: translateY(20px);
}
.sirai-results .card.sirai-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ===== EMPTY STATE ===== */
.sirai-empty {
    text-align: center;
    padding: 4rem 2rem;
    background: color-mix(in srgb, #fff 3%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.sirai-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.5rem;
    display: block;
    opacity: 0.5;
    filter: drop-shadow(0 0 12px rgba(255, 220, 50, 0.3));
}

.sirai-empty p {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 0.25rem;
}

.sirai-empty .sirai-empty-sub {
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.25);
}

/* ===== QUICK-SEARCH (from results state) ===== */
.sirai-results-search {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.sirai-results-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255, 220, 50, 0.4));
    animation: sirai-results-icon-idle 3s ease-in-out infinite;
}

@keyframes sirai-results-icon-idle {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 220, 50, 0.4)); transform: scale(1); }
    50%      { filter: drop-shadow(0 0 14px rgba(255, 220, 50, 0.6)); transform: scale(1.04); }
}

.sirai-results-search-input {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 42px;
    padding: 6px 42px 6px 14px;
    background: color-mix(in srgb, #000 75%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 4%, transparent),
                inset 0 1px 0 0 color-mix(in srgb, #fff 6%, transparent),
                0 4px 16px color-mix(in srgb, #000 40%, transparent);
    position: relative;
    transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.sirai-results-search-input:focus-within {
    background: color-mix(in srgb, #000 80%, transparent);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent),
                inset 0 1px 0 0 color-mix(in srgb, #fff 10%, transparent),
                0 4px 16px color-mix(in srgb, #000 40%, transparent),
                0 0 16px rgba(255, 0, 0, 0.06);
}

.sirai-results-search-input input {
    flex: 1;
    min-width: 100px;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 400;
}

.sirai-results-search-input input::placeholder {
    font-weight: 600;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.25);
}

/* ===== FAST ENTRANCE (for auto-search from header) ===== */
.sirai-fast .sirai-logo     { animation-delay: 0ms; animation-duration: 300ms; }
.sirai-fast .sirai-greeting { animation-delay: 100ms; animation-duration: 300ms; }
.sirai-fast .sirai-subline  { animation-delay: 200ms; animation-duration: 200ms; }
.sirai-fast .sirai-search-wrap { animation-delay: 300ms; animation-duration: 300ms; }

/* ===== SIR AI MOBILE ===== */
@media (max-width: 768px) {
    .sirai-landing { padding: 0 1.5rem; }
    .sirai-logo { width: 56px; height: 56px; margin-bottom: 1rem; }
    .sirai-greeting { font-size: 1.1rem; }
    .sirai-subline { font-size: 0.8rem; margin-bottom: 2rem; }
    .sirai-search-wrap { width: min(600px, 94vw); }
    .sirai-input-container {
        min-height: 46px;
        padding: 6px 40px 6px 14px;
        border-radius: 23px;
    }
    #sirai-input { font-size: 0.95rem; }
    .sirai-results { padding: 90px 1rem 3rem; }
    .sirai-section-label { font-size: 0.65rem; }
    .sirai-results-icon { width: 22px; height: 22px; }

    /* Kill glow layers on tablet */
    .sirai-ss-glow,
    .sirai-ss-border { opacity: 0; visibility: hidden; filter: none; }

    .sirai-ss-glow::before,
    .sirai-ss-border::before { animation: none; }

    .sirai-title-matches { padding: 12px; }
    .sirai-title-matches-list { gap: 8px; }
    .sirai-tm-cover { width: 90px; height: 90px; }
    .sirai-title-match-row { width: 120px; }

    .sirai-results .card.sirai-visible {
        transition-duration: 0.3s;
    }

    /* Use dvh instead of position:fixed to avoid double-fixed-layer Safari crash */
    #sirai-page.sirai-state-landing .sirai-landing {
        min-height: 100dvh;
    }

    /* Mobile touch targets — minimum 44px */
    .sirai-search-btn {
        padding: 10px;
        font-size: 1.3rem;
    }
    .sirai-title-match-row {
        min-height: 44px;
        padding: 14px 10px;
    }
}

@media (max-width: 500px) {
    .sirai-ss-glow,
    .sirai-ss-border { opacity: 0; visibility: hidden; filter: none; }

    .sirai-ss-glow::before,
    .sirai-ss-border::before { animation: none; }

}

@media (max-width: 400px) {
    .sirai-greeting { font-size: 1rem; }
    .sirai-search-wrap { width: min(600px, 95vw); }
    .sirai-input-container { min-height: 44px; border-radius: 22px; }
    #sirai-input { font-size: 0.85rem; }
}

/* ===== STATE CROSSFADE TRANSITIONS ===== */
.sirai-landing, .sirai-searching, .sirai-results {
    transition: opacity 0.4s ease, visibility 0.4s ease;
}
.sirai-state-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

/* Spinner icon for searching state */
.sirai-spin-icon {
    display: inline-block;
    animation: sirai-icon-spin 1s linear infinite;
    margin-right: 0.3em;
}
@keyframes sirai-icon-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sirai-logo { animation: sirai-enter-logo 200ms forwards !important; }
    .sirai-greeting { animation: sirai-enter-fade 200ms forwards !important; }
    .sirai-subline { animation: sirai-enter-fade 200ms forwards !important; }
    .sirai-search-wrap { animation: sirai-enter-fade 200ms forwards !important; }
    .sirai-ss-glow::before, .sirai-ss-border-dark::before,
    .sirai-ss-white::before, .sirai-ss-border::before { animation: none !important; }
    .sirai-thinking-ring::before, .sirai-thinking-ring::after { animation: none !important; }
    .sirai-results .card.sirai-visible { transition-duration: 0.1s; }
}

#content-count {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 1rem 0;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-family: var(--font-body);
}

/* =============================================
   UPGRADE CELEBRATION MODAL
   ============================================= */
.upgrade-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: upgrade-fade-in 0.5s ease both;
}
.upgrade-overlay.dismiss {
    animation: upgrade-fade-out 0.4s ease both;
}
@keyframes upgrade-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes upgrade-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
.upgrade-modal {
    text-align: center;
    padding: 2.5rem 2rem;
    max-width: 420px;
    width: 90%;
    background: color-mix(in srgb, #000 30%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06),
                inset 0 -1px 0 rgba(0, 0, 0, 0.3),
                0 8px 32px rgba(0, 0, 0, 0.4);
    animation: upgrade-modal-in 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s both;
}
.upgrade-overlay.dismiss .upgrade-modal {
    animation: upgrade-modal-out 0.3s ease both;
}
@keyframes upgrade-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes upgrade-modal-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}
.upgrade-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin: 0 auto 1.25rem;
    display: block;
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.25))
            drop-shadow(0 0 60px rgba(255, 200, 200, 0.1));
}
.upgrade-heading {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
    background: linear-gradient(180deg, #fff 0%, #e0e0e0 25%, #aaa 50%, #d0d0d0 75%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.upgrade-sub {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    line-height: 1.5;
}
.upgrade-confetti {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
}
@media (max-width: 480px) {
    .upgrade-heading { font-size: 1.4rem; }
    .upgrade-modal { padding: 2rem 1.5rem; }
    .upgrade-icon { width: 48px; height: 48px; }
}

/* Sir monitoring indicator */
.sir-monitor-indicator {
    position: fixed;
    bottom: 12px;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: color-mix(in srgb, #000 75%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 998;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.sir-monitor-indicator.hidden { display: none; }
.sir-monitor-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}
.sir-monitor-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
    animation: sir-pulse 2s ease-in-out infinite;
}
.sir-monitor-text {
    font-family: 'Yeezy', sans-serif;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
@keyframes sir-pulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(74, 222, 128, 0.5); }
    50% { opacity: 0.5; box-shadow: 0 0 12px rgba(74, 222, 128, 0.3); }
}
/* Speaking state icon */
.sir-monitor-speak-icon {
    font-size: 14px;
    color: #f87171;
    animation: sir-speak-pulse 1s ease-in-out infinite;
}
/* Speaking state: red glow on border */
.sir-monitor-indicator.speaking {
    border-color: rgba(248, 113, 113, 0.15);
}
.sir-monitor-indicator.speaking .sir-monitor-text {
    color: rgba(255, 255, 255, 0.65);
}
@keyframes sir-speak-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
body.player-active .sir-monitor-indicator {
    bottom: 70px;
}
@media (max-width: 600px) {
    .sir-monitor-indicator {
        bottom: 10px;
        right: 1rem;
        padding: 8px 12px;
    }
    .sir-monitor-indicator .sir-monitor-text {
        font-size: 10px;
    }
    body.player-active .sir-monitor-indicator {
        bottom: 62px;
    }
}

/* ─── Findom Tip CTA ─────────────────────────────────────────────────────── */
.findom-tip-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    cursor: pointer;
    /* Collapsed by default — no gap in layout */
    opacity: 0;
    max-height: 0;
    padding: 0 20px;
    margin: 0 auto;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 3s ease, max-height 3s ease, padding 3s ease, margin 3s ease,
                background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    animation: findomPulse 4s ease-in-out infinite;
}
.findom-tip-cta .ti {
    font-size: 1rem;
    margin-left: 4px;
    color: var(--wave-color, var(--red));
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--wave-color, var(--red)) 50%, transparent));
}
.findom-tip-cta.visible {
    opacity: 1;
    max-height: 50px;
    padding: 10px 20px;
    margin: 0 auto;
    pointer-events: auto;
}
.findom-tip-cta:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
}
@keyframes findomPulse {
    0%, 100% {
        box-shadow: 0 4px 20px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    50% {
        box-shadow: 0 4px 24px rgba(0,0,0,0.4),
                    0 0 16px color-mix(in srgb, var(--wave-color, #aa0000) 12%, transparent),
                    inset 0 1px 0 rgba(255,255,255,0.08);
    }
}
/* Big player: centered in flow between info and progress */
.player-drawer.big .findom-tip-cta {
    display: inline-flex;
    margin-bottom: var(--big-zone-gap, 12px);
}
/* Only visible in big player */
.player-drawer:not(.big) .findom-tip-cta {
    display: none;
}
@media (max-width: 480px) {
    .findom-tip-cta {
        font-size: 0.65rem;
        gap: 6px;
    }
    .findom-tip-cta.visible {
        padding: 8px 16px;
    }
}

/* =============================================
   FLOATING FAG TAX CTA
   ============================================= */
.fagtax-float-cta {
    position: fixed;
    bottom: 5.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px 11px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 28px;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    cursor: pointer;
    z-index: 998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.fagtax-float-cta .ti {
    font-size: 0.95rem;
    color: var(--wave-color, var(--red));
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--wave-color, var(--red)) 40%, transparent));
    flex-shrink: 0;
}
.fagtax-float-cta.active {
    opacity: 1;
    pointer-events: auto;
}
.fagtax-float-cta.active.scrolled-away {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(3px);
}
.fagtax-float-cta:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 4px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.08);
}
@media (max-width: 600px) {
    .fagtax-float-cta {
        font-size: 0.65rem;
        padding: 10px 16px 10px 12px;
        bottom: 5rem;
    }
}

/* =============================================
   TRAINING MODE — GREEN GLASS THEME
   ============================================= */
.training-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 5px 12px 5px 10px;
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 14px;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(34, 197, 94, 0.9);
    white-space: nowrap;
}
.training-badge .ti {
    font-size: 0.8rem;
}
.player-drawer.training-mode .training-badge {
    opacity: 1;
    pointer-events: auto;
}
.player-drawer.training-mode {
    --wave-color: #22c55e;
    --wave-color-light: #4ade80;
    background: rgba(8, 32, 18, 0.82);
    border-color: rgba(34, 197, 94, 0.12);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(34, 197, 94, 0.06) inset;
}
.player-drawer.training-mode .big-dismiss-btn {
    background: linear-gradient(135deg, rgba(34,197,94,0.15) 0%, rgba(34,197,94,0.06) 100%);
    border-color: rgba(34,197,94,0.2);
}
.player-drawer.training-mode .big-dismiss-btn:hover {
    background: linear-gradient(135deg, rgba(34,197,94,0.25) 0%, rgba(34,197,94,0.12) 100%);
    border-color: rgba(34,197,94,0.3);
}
.player-drawer.training-mode .big-ctrl-btn {
    background: linear-gradient(135deg, rgba(34,197,94,0.14) 0%, rgba(34,197,94,0.04) 100%);
    border-color: rgba(34,197,94,0.18);
}
.player-drawer.training-mode .big-ctrl-btn:hover {
    background: linear-gradient(135deg, rgba(34,197,94,0.22) 0%, rgba(34,197,94,0.08) 100%);
    border-color: rgba(34,197,94,0.25);
}
.player-drawer.training-mode .big-ctrl-btn.main {
    background: linear-gradient(135deg, rgba(34,197,94,0.8), rgba(22,163,74,0.9));
}
.player-drawer.training-mode .big-queue-panel {
    background: rgba(8, 32, 18, 0.95);
    border-color: rgba(34,197,94,0.12);
}
.player-drawer.training-mode .waveform-bg {
    background: rgba(34, 197, 94, 0.12);
}
.player-drawer.training-mode .drawer-transport-btn.main {
    color: #22c55e;
}
.player-drawer.training-mode .big-ctrl-flank.active i,
.player-drawer.training-mode .big-ctrl-flank:hover i {
    color: #22c55e;
}
.player-drawer.training-mode .findom-tip-cta {
    opacity: 1;
    max-height: 50px;
    padding: 10px 20px;
    pointer-events: auto;
}
@media (max-width: 768px) {
    .training-badge {
        font-size: 0.55rem;
        padding: 4px 9px 4px 7px;
        margin-right: 6px;
    }
}

/* =============================================
   SNIFF & CONFESS OVERLAY
   ============================================= */
.confess-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: #ff0000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.confess-overlay.open {
    opacity: 1;
    visibility: visible;
}
/* "What is Sniff & Confess?" button — bottom right */
.confess-overlay__whatbtn {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 0.75rem;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    z-index: 10;
}
.confess-overlay__whatbtn:hover {
    color: rgba(0, 0, 0, 0.45);
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}
.confess-overlay__whatbtn .ti { font-size: 14px; }
.confess-overlay__whatbtn span { white-space: nowrap; }
@media (max-width: 600px) {
    .confess-overlay__whatbtn span { display: none; }
    .confess-overlay__whatbtn { padding: 0.45rem; border-radius: 50%; width: 34px; height: 34px; justify-content: center; }
    .confess-overlay__whatbtn .ti { font-size: 16px; }
}
.confess-overlay.confess-inverted .confess-overlay__whatbtn {
    color: rgba(255, 0, 0, 0.2);
    background: rgba(255, 0, 0, 0.04);
    border-color: rgba(255, 0, 0, 0.08);
}
.confess-overlay.confess-inverted .confess-overlay__whatbtn:hover {
    color: rgba(255, 0, 0, 0.4);
    background: rgba(255, 0, 0, 0.08);
    border-color: rgba(255, 0, 0, 0.15);
}
/* Info about modal — full blurred backdrop + centered glass box */
.confess-about-modal {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(40px) saturate(130%);
    -webkit-backdrop-filter: blur(40px) saturate(130%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}
.confess-about-modal.open {
    opacity: 1;
    visibility: visible;
}
.confess-about-modal__box {
    position: relative;
    text-align: center;
    padding: 3.25rem 2.5rem 2.25rem;
    max-width: 520px;
    width: 92%;
    border-radius: 20px;
    background: linear-gradient(
        165deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(0, 0, 0, 0.03) 100%
    );
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.08),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 4px 20px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.04);
    transform: scale(0.92) translateY(12px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.confess-about-modal__box::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(220, 38, 38, 0.35), transparent);
    pointer-events: none;
}
.confess-about-modal.open .confess-about-modal__box {
    transform: scale(1) translateY(0);
}
.confess-about-modal__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.confess-about-modal__close:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}
.confess-about-modal__logo {
    display: block;
    height: 42px;
    width: auto;
    margin: 0.75rem auto 1.25rem;
    opacity: 0.9;
}
.confess-about-modal__desc {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 2rem;
    line-height: 1.75;
    text-align: justify;
    letter-spacing: 0.01em;
}
.confess-about-modal__badge {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    z-index: 1;
}
.confess-about-modal__badge img {
    height: 20px;
    width: 20px;
    object-fit: contain;
    border-radius: 50%;
}
.confess-about-modal__badge span {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.02em;
}
.confess-about-modal__cards {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.confess-about-modal__card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    padding: 1rem 1.15rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: background 0.2s ease;
}
.confess-about-modal__card:hover {
    background: rgba(255, 255, 255, 0.05);
}
.confess-about-modal__card .ti {
    font-size: 1.35rem;
    color: rgba(220, 38, 38, 0.6);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.confess-about-modal__card div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.confess-about-modal__card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.01em;
}
.confess-about-modal__card-sub {
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.55;
    text-align: justify;
}
.confess-about-modal__card--legal {
    margin-top: 0.25rem;
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.04);
}
.confess-about-modal__card--legal .ti {
    color: rgba(255, 255, 255, 0.25);
}
.confess-about-modal__card--legal .confess-about-modal__card-title {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.45);
}
.confess-about-modal__card--legal .confess-about-modal__card-sub {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.32);
    line-height: 1.55;
}
@media (max-width: 480px) {
    .confess-about-modal__box {
        padding: 2rem 1.25rem 1.5rem;
        max-width: calc(100vw - 2rem);
    }
    .confess-about-modal__logo { height: 30px; }
}
.confess-overlay__close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.6);
    font-size: 28px;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.confess-overlay__close:hover {
    color: #000;
    background: rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.3);
}
/* Spiral canvas */
.confess-spiral {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    transition: opacity 1.5s ease;
}
/* Textarea — dead centre */
.confess-overlay__center {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    padding: 0 2.5rem;
}
.confess-overlay__textarea {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    background: transparent;
    border: none;
    outline: none;
    color: #000;
    font-size: 1.65rem;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.6;
    resize: none;
    text-align: center;
    caret-color: #000;
    caret-shape: block;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 50vh;
    scrollbar-width: none;
}
.confess-overlay__textarea::-webkit-scrollbar { display: none; }
.confess-overlay__textarea::placeholder { color: transparent; }
.confess-overlay__textarea.hint-active {
    color: rgba(0, 0, 0, 0.25);
}
.confess-overlay.confess-inverted .confess-overlay__textarea.hint-active {
    color: rgba(255, 0, 0, 0.25);
}
/* Bottom cluster: typewriter + count + divider + logo */
.confess-overlay__bottom {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.confess-typewriter {
    color: rgba(0, 0, 0, 0.3);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    pointer-events: none;
    white-space: nowrap;
}
.confess-typewriter__cursor {
    display: inline-block;
    font-size: 1.35rem;
    font-weight: 700;
    animation: confess-blink 0.7s step-end infinite;
}
.confess-overlay__count {
    font-size: 0.75rem;
    color: rgba(0, 0, 0, 0.2);
    letter-spacing: 0.04em;
    transition: color 0.2s ease;
}
.confess-overlay__count.near-limit {
    color: rgba(0, 0, 0, 0.6);
}
.confess-overlay__divider {
    display: none;
}
.confess-logo {
    height: 22px;
    width: auto;
    margin-top: 0.75rem;
}
.confess-logo--red {
    display: none;
}
.confess-overlay__credit {
    font-size: 0.6rem;
    color: rgba(0, 0, 0, 0.2);
    letter-spacing: 0.04em;
    margin-top: 0.25rem;
}
@keyframes confess-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
/* Inverted state: black bg, red text — toggled by JS class for single-repaint swap */
.confess-overlay.confess-inverted {
    background: #000 !important;
}
.confess-overlay.confess-inverted .confess-overlay__textarea {
    color: #ff0000;
    caret-color: #ff0000;
}
.confess-overlay.confess-inverted .confess-overlay__close {
    color: rgba(255, 0, 0, 0.6);
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.15);
}
.confess-overlay.confess-inverted .confess-overlay__count {
    color: rgba(255, 0, 0, 0.18);
}
.confess-overlay.confess-inverted .confess-overlay__count.near-limit {
    color: rgba(255, 0, 0, 0.6);
}
.confess-overlay.confess-inverted .confess-overlay__divider {
    background: rgba(255, 0, 0, 0.15);
}
.confess-overlay.confess-inverted .confess-logo--black {
    display: none;
}
.confess-overlay.confess-inverted .confess-logo--red {
    display: inline;
}
.confess-overlay.confess-inverted .confess-typewriter {
    color: rgba(255, 0, 0, 0.35);
}
.confess-overlay.confess-inverted .confess-overlay__credit {
    color: rgba(255, 0, 0, 0.18);
}
/* --- Sniff countdown --- */
.sniff-zone {
    position: absolute;
    top: 2rem;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    z-index: 1;
}
.sniff-zone.visible {
    opacity: 1;
    visibility: visible;
}
.sniff-zone.fading {
    opacity: 0;
    visibility: hidden;
}
.sniff-bottle {
    height: 80px;
    width: auto;
}
.sniff-instruction {
    color: #000;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.sniff-nostril {
    color: #000;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.sniff-bar-wrap {
    width: 220px;
    height: 32px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 0;
    overflow: hidden;
    position: relative;
}
.sniff-bar {
    width: 100%;
    height: 100%;
    background: #000;
    position: absolute;
    top: 0;
    left: 0;
}
.sniff-bar-num {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 2;
    /* Readable on both filled and empty portions */
    mix-blend-mode: difference;
}
/* Inverted state colours */
.confess-overlay.confess-inverted .sniff-instruction {
    color: #ff0000;
}
.confess-overlay.confess-inverted .sniff-nostril {
    color: #ff0000;
}
.confess-overlay.confess-inverted .sniff-bar-wrap {
    background: rgba(255, 0, 0, 0.15);
}
.confess-overlay.confess-inverted .sniff-bar {
    background: #ff0000;
}
.confess-overlay.confess-inverted .sniff-bar-num {
    color: #000;
}
.sniff-done-icon {
    font-size: 2.5rem;
    color: #000;
}
.confess-overlay.confess-inverted .sniff-done-icon {
    color: #ff0000;
}
/* --- Findom tribute CTA --- */
.confess-findom-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.15rem 0.55rem 0.6rem;
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(0.92);
    transition: opacity 0.7s ease, visibility 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                background 0.2s ease, border-color 0.2s ease;
    pointer-events: none;
}
@keyframes findomNudge {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-2px) scale(1.04); }
    60%  { transform: translateY(1px) scale(0.99); }
    100% { transform: translateY(0) scale(1); }
}
.confess-findom-cta.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: findomNudge 0.8s 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.confess-findom-cta:hover {
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(0, 0, 0, 0.25);
}
.confess-findom-cta__img {
    height: 28px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}
.confess-findom-cta__text {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: rgba(0, 0, 0, 0.7);
    white-space: nowrap;
}
/* CTA inverted state */
.confess-overlay.confess-inverted .confess-findom-cta {
    background: rgba(255, 0, 0, 0.1);
    border-color: rgba(255, 0, 0, 0.15);
}
.confess-overlay.confess-inverted .confess-findom-cta:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: rgba(255, 0, 0, 0.3);
}
.confess-overlay.confess-inverted .confess-findom-cta__text {
    color: rgba(255, 0, 0, 0.7);
}
/* --- Tribute modal (on top of confess overlay) --- */
.confess-tribute-modal {
    position: fixed;
    inset: 0;
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(40px) saturate(130%);
    -webkit-backdrop-filter: blur(40px) saturate(130%);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease;
}
.confess-tribute-modal.open {
    opacity: 1;
    visibility: visible;
}
.confess-tribute-modal__content {
    position: relative;
    text-align: center;
    padding: 44px 24px 32px;
    max-width: 400px;
    width: 90%;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.08), rgba(0, 0, 0, 0.85));
    border: 1px solid rgba(220, 38, 38, 0.25);
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        0 8px 40px rgba(0, 0, 0, 0.6),
        0 2px 12px rgba(0, 0, 0, 0.4);
    transform: scale(0.92) translateY(12px);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.confess-tribute-modal.open .confess-tribute-modal__content {
    transform: scale(1) translateY(0);
}
.confess-tribute-modal__bottle {
    display: block;
    margin: 0 auto 16px;
    height: 64px;
    width: auto;
    object-fit: contain;
}
.confess-tribute-modal__content .limey-stripe-loading .spinner {
    border-color: rgba(220, 38, 38, 0.2);
    border-top-color: rgba(220, 38, 38, 0.8);
}
.confess-tribute-modal__content .limey-stripe-wrap {
    width: 100%;
}
.confess-tribute-modal__content .limey-stripe-wrap stripe-buy-button {
    display: block;
    width: 100%;
}
@media (max-width: 480px) {
    .confess-tribute-modal__content {
        padding: 36px 16px 24px;
        max-width: calc(100vw - 32px);
    }
}

#nav-confess.disabled {
    opacity: 0.25;
    filter: grayscale(1);
}

@media (pointer: coarse) {
    /* Sniff & Confess: hide on touch devices */
    #nav-confess,
    #nav-confess + .nav-divider,
    .confess-overlay,
    .confess-findom-cta {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   GRID FEATURE — editorial box with mini content cards inside
═══════════════════════════════════════════════════════════════ */

.grid-feature {
    --gf-accent: #ff2b2b;
    grid-column: 1 / -1;                   /* always span the full grid row */
    padding: 1.25rem 1.25rem 1.5rem;
    border-radius: 16px;
    background: rgba(18, 18, 20, 0.85);     /* solid dark — always readable */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 2px solid var(--gf-accent);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    position: relative;
}

/* Accent presets — only change the accent color, background stays solid dark */
.grid-feature.gf-style-red    { --gf-accent: #ff2b2b; }
.grid-feature.gf-style-pink   { --gf-accent: #ff6aa4; }
.grid-feature.gf-style-gold   { --gf-accent: #d4a74a; }
.grid-feature.gf-style-silver { --gf-accent: #c6ccd2; }
.grid-feature.gf-style-dark   { --gf-accent: #7d7d7d; }

/* Header */
.gf-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 1rem;
}
.gf-heading {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--gf-accent);
}
.gf-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.005em;
    line-height: 1.2;
}
.gf-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    max-width: 640px;
    line-height: 1.45;
    margin-top: 0.15rem;
}

/* Cards container — one grid, column count varies by item count */
.gf-cards {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(var(--gf-cols, 5), 1fr);
}
.grid-feature.gf-n-1 .gf-cards { --gf-cols: 1; max-width: 340px; }
.grid-feature.gf-n-2 .gf-cards { --gf-cols: 2; }
.grid-feature.gf-n-3 .gf-cards { --gf-cols: 3; }
.grid-feature.gf-n-4 .gf-cards { --gf-cols: 4; }
.grid-feature.gf-n-5 .gf-cards { --gf-cols: 5; }

/* Mini card — mirrors native grid card: cover + glass title bar */
.gf-card {
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 240ms ease, box-shadow 240ms ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.04);
}
.gf-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--gf-accent) 40%, transparent);
}
.gf-card:focus-visible {
    outline: 2px solid var(--gf-accent);
    outline-offset: 3px;
}

.gf-card-cover {
    position: absolute;
    inset: 0;
}
.gf-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 500ms ease;
}
.gf-card:hover .gf-card-cover img { transform: scale(1.05); }
.gf-card-cover-blank {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

/* Play icon — shown on hover */
.gf-card-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent 55%);
    opacity: 0;
    transition: opacity 220ms;
    pointer-events: none;
}
.gf-card-play i {
    font-size: 2.4rem;
    color: #fff;
    text-shadow: 0 2px 14px var(--gf-accent);
    background: color-mix(in srgb, var(--gf-accent) 60%, transparent);
    width: 56px; height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
}
.gf-card:hover .gf-card-play { opacity: 1; }

/* Glass title bar — anchored to bottom of card */
.gf-card-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.6rem 0.75rem 0.7rem;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    pointer-events: none;
}
.gf-card-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.gf-card-meta {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.05em;
    margin-top: 0.15rem;
    text-transform: uppercase;
    font-weight: 500;
}

/* N=1: bigger card, center it (with cap) */
.grid-feature.gf-n-1 .gf-card {
    margin: 0 auto;
    width: 100%;
}
.grid-feature.gf-n-1 .gf-card-title { font-size: 1rem; }

/* Responsive */
@media (max-width: 1000px) {
    .grid-feature.gf-n-4 .gf-cards,
    .grid-feature.gf-n-5 .gf-cards { --gf-cols: 3; }
}
@media (max-width: 720px) {
    .grid-feature { padding: 1rem 1rem 1.25rem; }
    .gf-title { font-size: 1.1rem; }
    .grid-feature.gf-n-2 .gf-cards,
    .grid-feature.gf-n-3 .gf-cards,
    .grid-feature.gf-n-4 .gf-cards,
    .grid-feature.gf-n-5 .gf-cards { --gf-cols: 2; }
    .grid-feature.gf-n-1 .gf-cards { max-width: 100%; }
    .gf-card-title { font-size: 0.8rem; }
    .gf-card-meta { font-size: 9px; }
}
@media (max-width: 420px) {
    .grid-feature.gf-n-3 .gf-cards,
    .grid-feature.gf-n-5 .gf-cards { --gf-cols: 1; }
}

/* Autotrance sidebar icon — dimmed "coming soon" look for all users */
.drawer-nav-item--autotrance i {
    color: #7a1e1e !important;               /* dim red — "not yet lit" */
    filter: none !important;
}
.drawer-nav-item--autotrance span:not(.drawer-nav-comingsoon) {
    color: rgba(255, 255, 255, 0.45);
}
.drawer-nav-item--autotrance:hover i {
    color: var(--red, #ff2b2b) !important;
    filter: drop-shadow(0 0 4px rgba(255, 43, 43, 0.4)) !important;
}
.drawer-nav-item--autotrance:hover span:not(.drawer-nav-comingsoon) {
    color: #fff;
}
.drawer-nav-comingsoon {
    /* inherits drawer-nav-beta look; just override text */
    font-size: 0.5rem;
}

/* Online / Offline status badges — Drops (and any future toggled feature) */
.drawer-nav-online {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.25);
    font-size: 0.5rem;
}
.drawer-nav-offline {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.25);
    font-size: 0.5rem;
}

/* ═══════════════════════════════════════════════════════════════
   AUTOTRANCE — Realtime Hypno Mixer Overlay (simplified)
═══════════════════════════════════════════════════════════════ */

.autotrance-overlay {
    position: fixed;
    inset: 0;
    z-index: 10002;
    background: #ff0000;
    color: #fff;
    display: none;
    font-family: 'Yeezy TSTAR', 'Inter', system-ui, sans-serif;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
}
/* Visualizer canvas — full viewport, behind controls */
.at-visualizer {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
}
.autotrance-overlay > .at-topbar,
.autotrance-overlay > .at-tabs,
.autotrance-overlay > .at-rack,
.autotrance-overlay > .at-foot {
    z-index: 2;
}

/* Tabs row sits just above the rack at the bottom dock */
.autotrance-overlay > .at-tabs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12.5rem;       /* sits above the tile rack */
    padding: 0 1.5rem;
    justify-content: center;
}
/* Bottom rack — tile strip pinned to bottom, single horizontal scrolling row */
.autotrance-overlay > .at-rack {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4.5rem;        /* leave room for the foot */
    padding: 0 1.5rem;
    max-width: none;
    flex: none;
}
.autotrance-overlay > .at-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.75rem;
    margin-top: 0;
}
.autotrance-overlay.open {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Close button — sits inside .at-topbar (right edge) */
.autotrance-overlay .at-close {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: all 160ms;
}
.autotrance-overlay .at-close:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* Footer — small logo + copyright (mirrors Sniff & Confess pattern). Sits at bottom of viewport via .at-rack flex-grow. */
.at-foot {
    margin-top: 2.5rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}
.at-foot-logo {
    height: 22px;
    width: auto;
    opacity: 0.7;
    user-select: none;
    -webkit-user-drag: none;
}
.at-foot-credit {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.04em;
}

/* Tabs — single-active category switcher to handle hundreds of tiles without a vertical wall */
.at-tabs {
    width: 100%;
    max-width: 980px;
    display: flex;
    gap: 0.4rem;
    margin-bottom: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.at-tabs::-webkit-scrollbar { display: none; }
.at-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 160ms;
}
.at-tab:hover {
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
}
.at-tab.is-active {
    background: #000;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.at-tab-count {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.45);
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}
.at-tab.is-active .at-tab-count {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}
.at-tab-active {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
    background: transparent;
    color: transparent;
    transition: background 200ms, color 200ms;
}
.at-tab-active.on {
    background: #fff;
    color: #000;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.65);
}

/* Rack — only the active group is visible (others are display:none) */
.at-rack {
    width: 100%;
    max-width: 980px;
    flex: 1 0 auto;
}
.at-rack-empty {
    padding: 4rem 1.5rem;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.at-group { display: none; }
.at-group.is-active { display: block; }

/* Tile strip — horizontal-scroll single row at the bottom dock */
.at-tiles {
    display: flex;
    flex-direction: row;
    gap: 0.55rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.4) transparent;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
.at-tiles::-webkit-scrollbar { height: 6px; }
.at-tiles::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.4); border-radius: 3px; }
.at-tiles::-webkit-scrollbar-track { background: transparent; }

/* Tile — fixed-width button in the horizontal strip; tap anywhere to engage. */
.at-tile {
    --tile-tint: #ff2b2b;
    flex: 0 0 132px;
    height: 96px;
    position: relative;
    padding: 0.7rem 0.75rem;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    text-align: left;
    transition: background 160ms, border-color 160ms, transform 120ms;
    -webkit-tap-highlight-color: transparent;
}
.at-tile:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.25);
}
.at-tile:active { transform: scale(0.97); }
.at-tile.engaged {
    background: rgba(0, 0, 0, 0.65);
    border-color: rgba(255, 255, 255, 0.85);
}
.at-tile-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    flex-shrink: 0;
}
.at-tile-led {
    --led-intensity: 0.15;
    position: absolute;
    top: 0.7rem;
    right: 0.75rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: background 400ms;
}
.at-tile.engaged .at-tile-led,
.at-tile.fading .at-tile-led {
    background: #fff;
    box-shadow: 0 0 calc(var(--led-intensity, 0.5) * 14px) rgba(255, 255, 255, 0.9);
}
.at-tile.fading .at-tile-led {
    animation: at-led-pulse 1.6s ease-in-out infinite;
}
@keyframes at-led-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
.at-tile-title {
    margin-top: auto;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.at-tile.loading {
    opacity: 0.85;
    pointer-events: none;
}
.at-tile.loading .at-tile-led {
    background: rgba(255, 255, 255, 0.4);
    animation: at-led-pulse 1s ease-in-out infinite;
}
.at-tile.disabled {
    opacity: 0.4;
    pointer-events: none;
}
.at-tile.errored {
    border-color: rgba(255, 80, 80, 0.4);
}
.at-tile.errored .at-tile-led {
    background: rgba(255, 80, 80, 0.6);
}

/* Top bar — stop-all, master volume, close */
.at-topbar {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    pointer-events: none;
}
.at-topbar > * { pointer-events: auto; }
.at-stopall {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    height: 38px;
    padding: 0 0.85rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    cursor: pointer;
    transition: all 160ms;
}
.at-stopall:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}
.at-stopall i { font-size: 14px; }

.at-search {
    flex: 0 1 280px;
    height: 38px;
    padding: 0 0.85rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    outline: none;
    transition: border-color 160ms, background 160ms;
}
.at-search::placeholder { color: rgba(255, 255, 255, 0.45); }
.at-search:focus {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(0, 0, 0, 0.45);
}

.at-master {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    height: 38px;
    padding: 0 0.85rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    margin-left: auto;
    margin-right: 0.5rem;
}
.at-master i { font-size: 14px; }
.at-master-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 130px;
    height: 2px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.at-master-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
}
.at-master-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 0;
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   VENUS SHOWCASE — Editorial brutalist magazine layout.
   Cream bg, monochrome b&w photography, huge bold sans-serif statement
   type overlapping imagery. Reference: bold zine / fashion editorial.
═══════════════════════════════════════════════════════════════ */

:root {
    --vx-pink: #FF1493;
    --vx-pink-deep: #D1006F;
    --vx-pink-soft: #FF66B8;
    --vx-ink: #0a0a0a;
    --vx-ink-soft: rgba(10, 10, 10, 0.62);
    --vx-ink-faint: rgba(10, 10, 10, 0.35);
    --vx-rule: rgba(10, 10, 10, 0.22);
    --vx-display: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Showcase hero wordmarks — Venus uses ED Manteca, Tikes uses Haribo SVG, Doggos uses Punk.
   Only loaded once a showcase partial is included on the page. Heavy SVG-OT fonts (Haribo,
   Punk) embed full color glyphs, so file sizes are tens of MB — that's expected. */
@font-face {
    font-family: 'ED Manteca';
    src: url('/assets/fonts/ED-Manteca-Black-Regular.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Haribo SVG';
    src: url('/assets/fonts/Haribo-SVG.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Punk';
    src: url('/assets/fonts/Punk.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Per-showcase wordmark fonts (override the default Manteca for the hero word) */
#showcase-tikes-page .vx-statement--1 {
    font-family: 'Haribo SVG', 'ED Manteca', 'Inter', sans-serif;
    font-weight: normal;
    letter-spacing: 0;
}
#showcase-doggos-page .vx-statement--1 {
    font-family: 'Punk', 'ED Manteca', 'Inter', sans-serif;
    font-weight: normal;
    letter-spacing: 0;
}

/* Tikes showcase — warm baby yellow + red highlights */
#showcase-tikes-page {
    --vx-pink: #FFD75A;        /* warm baby yellow */
    --vx-pink-deep: #C99A1F;
    --vx-pink-soft: #FFE89E;
    --vx-accent-hot: #E63946;  /* coral red for emphasis + button hover */
}
#showcase-tikes-page .vx-prose p em,
#showcase-tikes-page .vx-prose p strong,
#showcase-tikes-page .vx-deck em,
#showcase-tikes-page .vx-stbreak-italic,
#showcase-tikes-page .vx-prose-callout {
    color: var(--vx-accent-hot);
}
#showcase-tikes-page .vx-prose-callout {
    border-left-color: var(--vx-accent-hot);
}
#showcase-tikes-page .vx-btn--solid:hover {
    background: var(--vx-accent-hot);
    border-color: var(--vx-accent-hot);
    color: #fff;
}

/* Side-effects warning panel — list of regression symptoms (replaces commands grid) */
#showcase-tikes-page .tx-effects {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border: 2px dashed var(--vx-ink);
    background: rgba(255, 255, 255, 0.18);
}
#showcase-tikes-page .tx-effects li {
    padding: 1.25rem 1.4rem;
    border-bottom: 1px dashed var(--vx-ink);
    display: flex;
    align-items: baseline;
    gap: 1rem;
}
#showcase-tikes-page .tx-effects li:nth-child(odd) { border-right: 1px dashed var(--vx-ink); }
#showcase-tikes-page .tx-effects li:nth-last-child(-n+2) { border-bottom: 0; }
#showcase-tikes-page .tx-effect-num {
    font-family: 'ED Manteca', 'Inter', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--vx-accent-hot);
    flex-shrink: 0;
    min-width: 2.5rem;
}
#showcase-tikes-page .tx-effects p {
    font-family: var(--vx-display);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--vx-ink);
    margin: 0;
}
@media (max-width: 720px) {
    #showcase-tikes-page .tx-effects { grid-template-columns: 1fr; }
    #showcase-tikes-page .tx-effects li { border-right: 0 !important; }
    #showcase-tikes-page .tx-effects li:last-child { border-bottom: 0; }
    #showcase-tikes-page .tx-effects li:nth-last-child(2) { border-bottom: 1px dashed var(--vx-ink); }
}

/* Doggos showcase — same .vx-* layout but brat-green palette + RED highlights */
#showcase-doggos-page {
    --vx-pink: #8ACE00;        /* brat green */
    --vx-pink-deep: #5C8B00;
    --vx-pink-soft: #B5E040;
    --vx-accent-hot: #FF2B2B;  /* red used for emphasis + button hover */
}

/* Italic / bold emphasis + callouts go red on the green page */
#showcase-doggos-page .vx-prose p em,
#showcase-doggos-page .vx-prose p strong,
#showcase-doggos-page .vx-deck em,
#showcase-doggos-page .vx-stbreak-italic,
#showcase-doggos-page .vx-prose-callout {
    color: var(--vx-accent-hot);
}
#showcase-doggos-page .vx-prose-callout {
    border-left-color: var(--vx-accent-hot);
}
#showcase-doggos-page .vx-btn--solid:hover {
    background: var(--vx-accent-hot);
    border-color: var(--vx-accent-hot);
    color: #fff;
}

/* Commands grid — 6-cell list (replaces Venus TOC for distinct doggos presentation) */
#showcase-doggos-page .dx-commands-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--vx-ink);
    border-left: 1px solid var(--vx-ink);
}
#showcase-doggos-page .dx-commands-list li {
    padding: 1.75rem 1.6rem;
    border-right: 1px solid var(--vx-ink);
    border-bottom: 1px solid var(--vx-ink);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: background 220ms;
}
#showcase-doggos-page .dx-commands-list li:hover {
    background: rgba(0, 0, 0, 0.05);
}
#showcase-doggos-page .dx-cmd {
    font-family: 'ED Manteca', 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 3.8rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--vx-ink);
    text-transform: uppercase;
}
#showcase-doggos-page .dx-commands-list p {
    font-family: var(--vx-display);
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--vx-ink-soft);
    margin: 0;
}
#showcase-doggos-page .dx-commands-list p strong { color: var(--vx-ink); font-weight: 900; }
@media (max-width: 720px) {
    #showcase-doggos-page .dx-commands-list { grid-template-columns: 1fr; }
}

/* All showcase pages share the same full-bleed bg + wavy bottom clip.
   Each showcase scopes its own --vx-pink (and friends) to recolour the same template. */
[id^="showcase-"][id$="-page"] {
    background: var(--vx-pink);
    color: var(--vx-ink);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -5rem;
    padding: 5rem var(--content-padding, 1.5rem) 0;
    min-height: 100vh;
    overflow-x: hidden;
    /* 32-point soft sine — amplitude 25..55px (range 30px), gradual transitions */
    -webkit-clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - 38px),
        97% calc(100% - 32px),
        94% calc(100% - 30px),
        90% calc(100% - 35px),
        87% calc(100% - 42px),
        83% calc(100% - 48px),
        80% calc(100% - 52px),
        77% calc(100% - 50px),
        73% calc(100% - 45px),
        70% calc(100% - 40px),
        66% calc(100% - 36px),
        63% calc(100% - 32px),
        60% calc(100% - 30px),
        57% calc(100% - 33px),
        53% calc(100% - 38px),
        50% calc(100% - 44px),
        47% calc(100% - 50px),
        43% calc(100% - 54px),
        40% calc(100% - 52px),
        37% calc(100% - 48px),
        33% calc(100% - 42px),
        30% calc(100% - 38px),
        27% calc(100% - 34px),
        23% calc(100% - 32px),
        20% calc(100% - 35px),
        17% calc(100% - 40px),
        13% calc(100% - 45px),
        10% calc(100% - 48px),
        7% calc(100% - 46px),
        4% calc(100% - 42px),
        0 calc(100% - 36px)
    );
    clip-path: polygon(
        0 0, 100% 0,
        100% calc(100% - 38px),
        97% calc(100% - 32px),
        94% calc(100% - 30px),
        90% calc(100% - 35px),
        87% calc(100% - 42px),
        83% calc(100% - 48px),
        80% calc(100% - 52px),
        77% calc(100% - 50px),
        73% calc(100% - 45px),
        70% calc(100% - 40px),
        66% calc(100% - 36px),
        63% calc(100% - 32px),
        60% calc(100% - 30px),
        57% calc(100% - 33px),
        53% calc(100% - 38px),
        50% calc(100% - 44px),
        47% calc(100% - 50px),
        43% calc(100% - 54px),
        40% calc(100% - 52px),
        37% calc(100% - 48px),
        33% calc(100% - 42px),
        30% calc(100% - 38px),
        27% calc(100% - 34px),
        23% calc(100% - 32px),
        20% calc(100% - 35px),
        17% calc(100% - 40px),
        13% calc(100% - 45px),
        10% calc(100% - 48px),
        7% calc(100% - 46px),
        4% calc(100% - 42px),
        0 calc(100% - 36px)
    );
}

.venus-showcase {
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.5rem 0 8rem;
    font-family: var(--vx-display);
    color: var(--vx-ink);
}

.venus-showcase [data-reveal] {
    transition: transform 800ms cubic-bezier(.2,.7,.2,1), opacity 800ms cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
    .venus-showcase [data-reveal].pending-reveal {
        opacity: 0;
        transform: translateY(20px);
    }
    .venus-showcase [data-reveal].pending-reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
}

.vx-meta-label {
    font-family: var(--vx-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vx-ink);
    line-height: 1;
}

/* ── HERO — broken-grid statement overlapping a B&W photograph ── */
.vx-hero {
    position: relative;
    padding: 2rem 0 5rem;
    border-bottom: 1px solid var(--vx-rule);
    margin-bottom: 4rem;
    overflow: hidden;       /* prevent any oversized statement from breaking layout */
}
.vx-hero-meta { position: absolute; z-index: 3; }
.vx-hero-meta--top { top: 0; left: 0; }
.vx-hero-meta--top-right { top: 0; right: 0; text-align: right; }
.vx-hero-meta--bottom-left { bottom: 0; left: 0; max-width: 360px; }
.vx-hero-meta--bottom-right { bottom: 0; right: 0; }

.vx-hero-stage {
    position: relative;
    margin: 4rem auto;
    max-width: 1100px;
    aspect-ratio: 21 / 12;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vx-hero-photo {
    position: relative;
    z-index: 1;
    width: 46%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    filter: grayscale(1) contrast(1.05);
}
.vx-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 35% 35%;
    display: block;
}
.vx-statement {
    position: absolute;
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: clamp(4rem, 13vw, 13rem);
    line-height: 0.82;
    letter-spacing: -0.04em;
    color: var(--vx-ink);
    z-index: 2;
    pointer-events: none;
}
.vx-statement--1 {
    top: 0;
    left: 0;
    /* "Venus" wordmark — ED Manteca Black */
    font-family: 'ED Manteca', 'Inter', sans-serif;
    font-weight: 900;
    letter-spacing: -0.02em;
}
.vx-statement--2 { top: 38%; right: 6%; z-index: 3; }
.vx-statement--3 {
    bottom: -0.1em;
    left: 4%;
    right: 4%;
    z-index: 3;
    color: var(--vx-ink);
    text-align: center;
}

.vx-deck {
    font-family: var(--vx-display);
    font-weight: 500;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--vx-ink);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.vx-cta-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ── Buttons — minimal editorial ─────────────────────────────── */
.vx-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.3rem;
    font-family: var(--vx-display);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border: 1px solid var(--vx-ink);
    border-radius: 0;
    cursor: pointer;
    text-decoration: none;
    transition: background 160ms, color 160ms, transform 120ms;
}
.vx-btn:active { transform: scale(0.97); }
.vx-btn--solid { background: var(--vx-ink); color: var(--vx-pink); }
.vx-btn--solid:hover { background: #fff; border-color: #fff; color: var(--vx-ink); }
.vx-btn--ghost { background: transparent; color: var(--vx-ink); }
.vx-btn--ghost:hover { background: var(--vx-ink); color: var(--vx-pink); }
.vx-btn--large { padding: 1.1rem 1.8rem; font-size: 0.85rem; }
.vx-btn-arrow { font-weight: 500; margin-left: 0.2rem; }

/* ── Section common ─────────────────────────────────────────── */
.vx-section {
    padding: 4rem 0;
    border-bottom: 1px solid var(--vx-rule);
}
.vx-section:last-of-type { border-bottom: 0; }
.vx-section-head {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 3rem;
    max-width: 880px;
}
.vx-section-title {
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.88;
    letter-spacing: -0.035em;
    color: var(--vx-ink);
    margin: 0;
    text-transform: uppercase;
}

/* ── Series grid — prominent full-colour cards ───────────────── */
.vx-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2.5rem;
}
.vx-card {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--vx-ink);
    font-family: inherit;
    transition: transform 240ms cubic-bezier(.2,.7,.2,1);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vx-card:hover, .vx-card:focus-visible { transform: translateY(-4px); outline: none; }
.vx-card-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-family: var(--vx-display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--vx-ink);
    border-bottom: 2px solid var(--vx-ink);
    padding-bottom: 0.6rem;
}
.vx-card-num { font-weight: 900; font-size: 0.88rem; letter-spacing: 0.05em; }
.vx-card-tag { color: var(--vx-ink-soft); }
.vx-card-photo {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--vx-pink-deep);
    box-shadow: 0 18px 36px -18px rgba(0, 0, 0, 0.45);
}
.vx-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(.2,.7,.2,1);
}
.vx-card:hover .vx-card-photo img { transform: scale(1.05); }
.vx-card-title {
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: 1.65rem;
    line-height: 1.0;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    margin: 0;
    color: var(--vx-ink);
}
.vx-card-blurb {
    font-family: var(--vx-display);
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--vx-ink-soft);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.vx-empty {
    padding: 3rem;
    text-align: center;
    color: var(--vx-ink-soft);
    border: 1px dashed var(--vx-ink-faint);
}

/* ── Statement break — text overlapping seascape photo (hero pattern) ── */
.vx-statement-break {
    padding: 5rem 0;
    border-bottom: 1px solid var(--vx-rule);
    overflow: hidden;
}
.vx-statement-stage {
    position: relative;
    margin: 0 auto;
    max-width: 1100px;
    aspect-ratio: 21 / 12;
}
.vx-stbreak-photo {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    filter: grayscale(1) contrast(1.05);
}
.vx-stbreak-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vx-stbreak-word,
.vx-stbreak-italic {
    position: absolute;
    font-family: var(--vx-display);
    color: var(--vx-ink);
    z-index: 2;
    pointer-events: none;
    line-height: 0.85;
}
.vx-stbreak-word {
    font-weight: 900;
    font-size: clamp(3rem, 10vw, 9rem);
    letter-spacing: -0.04em;
    text-transform: uppercase;
}
.vx-stbreak-italic {
    font-style: italic;
    font-weight: 500;
    font-size: clamp(2.2rem, 7vw, 6rem);
    letter-spacing: -0.02em;
    text-transform: lowercase;
}
.vx-stbreak-word--1 { top: 0; left: 0; }                   /* SHE */
.vx-stbreak-word--2 { top: 12%; right: 4%; z-index: 3; }   /* IS */
.vx-stbreak-italic--top { top: 30%; left: 12%; z-index: 3; } /* the voice */
.vx-stbreak-word--3 { bottom: 22%; right: 3%; z-index: 3; } /* YOU */
.vx-stbreak-word--4 { bottom: 4%; left: 8%; z-index: 3; }  /* FALL */
.vx-stbreak-italic--bottom { bottom: 0; right: 14%; z-index: 3; } /* into. */

/* ── Stats strip — editorial fact band under hero ───────────── */
.vx-stats {
    padding: 2.5rem 0 4rem;
    border-bottom: 1px solid var(--vx-rule);
}
.vx-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}
.vx-stats-grid > div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-left: 1px solid var(--vx-rule);
    padding-left: 1.25rem;
}
.vx-stats-grid > div:first-child {
    border-left: 0;
    padding-left: 0;
}
.vx-stat-num {
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: clamp(2.4rem, 5vw, 4rem);
    line-height: 1;
    letter-spacing: -0.04em;
    color: var(--vx-ink);
}
.vx-stat-num sup {
    font-size: 0.5em;
    vertical-align: super;
    margin-left: 0.05em;
}
.vx-stat-label {
    font-family: var(--vx-display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vx-ink-soft);
}

.vx-prose--wide { max-width: 880px; }
.vx-prose p em {
    font-style: italic;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
}

/* ── About — two-column with portrait photo ─────────────────── */
.vx-about-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 4rem;
    align-items: start;
}
.vx-about-photo {
    margin: 0;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--vx-ink);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
}
.vx-about-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── About / prose ──────────────────────────────────────────── */
.vx-prose { max-width: 720px; }
.vx-prose p {
    font-family: var(--vx-display);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.6;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0 0 1.4rem;
    color: var(--vx-ink);
}
.vx-prose p strong { font-weight: 900; }
.vx-prose p em {
    font-style: italic;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0;
}
.vx-prose-callout {
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.005em !important;
    border-left: 3px solid var(--vx-ink);
    padding-left: 1rem;
    margin-top: 2rem !important;
}

/* ── Path / TOC ─────────────────────────────────────────────── */
.vx-toc { list-style: none; margin: 0; padding: 0; }
.vx-toc li {
    display: grid;
    grid-template-columns: minmax(80px, 110px) 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.5rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--vx-rule);
    align-items: baseline;
}
.vx-toc li:last-child { border-bottom: 1px solid var(--vx-rule); }
.vx-toc-num {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    color: var(--vx-ink);
    letter-spacing: -0.02em;
}
.vx-toc h4 {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin: 0 0 0.6rem;
    color: var(--vx-ink);
}
.vx-toc p {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--vx-display);
    font-weight: 500;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--vx-ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    max-width: 560px;
}

/* ── Final CTA — two-column with bubbles photo ───────────────── */
.vx-cta {
    padding: 6rem 0 3rem;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 4rem;
    align-items: center;
}
.vx-cta-photo {
    margin: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--vx-pink-deep);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.5);
}
.vx-cta-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.vx-cta-body-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
}
.vx-cta-title {
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: clamp(4rem, 12vw, 10rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: var(--vx-ink);
    margin: 0.5rem 0;
}
.vx-cta-body {
    font-family: var(--vx-display);
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--vx-ink);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    max-width: 480px;
    margin: 0 0 1rem;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
    [id^="showcase-"][id$="-page"] { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -5rem; padding: 5rem 1rem 0; }
    .venus-showcase { padding: 1rem 0 4rem; }
    .vx-hero { padding-top: 4rem; }
    .vx-hero-stage {
        margin: 1rem auto 2rem;
        aspect-ratio: 4 / 5;
    }
    .vx-hero-photo { width: 78%; aspect-ratio: 1 / 1; }
    .vx-statement--1 { top: 0; left: 0; }
    .vx-statement--2 { top: auto; right: 4%; bottom: 38%; }
    .vx-statement--3 { bottom: 0; left: 0; }
    .vx-hero-meta--bottom-left, .vx-hero-meta--bottom-right {
        position: relative;
        bottom: auto; left: auto; right: auto;
        max-width: none;
        margin-top: 1.5rem;
    }
    .vx-cta-row { justify-content: flex-start; }
    .vx-section { padding: 3rem 0; }
    .vx-section-head { margin-bottom: 2rem; }
    .vx-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .vx-statement-break { padding: 4rem 0; }
    .vx-statement-stage { aspect-ratio: 4 / 5; max-width: 100%; }
    .vx-stbreak-photo { width: 80%; aspect-ratio: 4 / 5; }
    .vx-stbreak-word { font-size: clamp(2.6rem, 14vw, 5rem); }
    .vx-stbreak-italic { font-size: clamp(2rem, 11vw, 4rem); }
    .vx-toc li { grid-template-columns: 60px 1fr; column-gap: 1rem; padding: 1.25rem 0; }
    .vx-about-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .vx-about-photo { max-height: 480px; }
    .vx-stats { padding: 2rem 0 3rem; }
    .vx-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 1rem;
    }
    .vx-stats-grid > div:nth-child(odd) {
        border-left: 0;
        padding-left: 0;
    }
    .vx-stats-grid > div:nth-child(even) {
        border-left: 1px solid var(--vx-rule);
        padding-left: 1rem;
    }
    .vx-cta {
        padding: 4rem 0 2rem;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .vx-cta-photo { max-height: 360px; }
}
@media (max-width: 480px) {
    .vx-grid { grid-template-columns: 1fr; }
}

/* ── Related (more tagged 'venus') ──────────────────────────── */
.vx-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.5rem;
}
.vx-rel-card {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
    color: var(--vx-ink);
    font-family: inherit;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.vx-rel-card:hover, .vx-rel-card:focus-visible {
    transform: translateY(-3px);
    outline: none;
}
.vx-rel-photo {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--vx-pink-deep);
    filter: grayscale(1) contrast(1.05);
    transition: filter 320ms;
}
.vx-rel-card:hover .vx-rel-photo { filter: grayscale(0) contrast(1); }

/* Loyalty highlight — kept in colour even at rest, ink-frame, visible badge */
.vx-rel-card--loyalty .vx-rel-photo {
    filter: grayscale(0) contrast(1);
    box-shadow: inset 0 0 0 3px var(--vx-ink);
}
.vx-rel-badge {
    position: absolute;
    top: 0.6rem;
    left: 0.6rem;
    z-index: 2;
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vx-pink);
    background: var(--vx-ink);
    padding: 0.32rem 0.65rem;
    border-radius: 0;
    line-height: 1;
}
.vx-rel-card--loyalty .vx-rel-title {
    /* small visual lift — slight italic accent for the highlighted slot */
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}
.vx-rel-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.vx-rel-card:hover .vx-rel-photo img { transform: scale(1.04); }
.vx-rel-meta {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.vx-rel-type {
    font-family: var(--vx-display);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vx-ink-soft);
}
.vx-rel-title {
    font-family: var(--vx-display);
    font-weight: 900;
    font-size: 0.95rem;
    line-height: 1.15;
    letter-spacing: -0.005em;
    text-transform: uppercase;
    margin: 0;
    color: var(--vx-ink);
}

@media (max-width: 480px) {
    .vx-related-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

/* SFX category — circular icon-only one-shot triggers; tighter packing for many */
.at-tiles--sfx {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.5rem;
}
.at-sfx {
    --tile-tint: #ff2b2b;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 100ms ease, background 160ms, border-color 160ms, box-shadow 160ms;
    -webkit-tap-highlight-color: transparent;
}
.at-sfx:hover {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.32);
}
.at-sfx:active,
.at-sfx.triggered {
    transform: scale(0.94);
    background: rgba(255, 255, 255, 0.95);
    color: #0a0a0a;
    border-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.15);
}
.at-sfx.loading {
    opacity: 0.6;
    pointer-events: none;
}
.at-sfx.disabled,
.at-sfx.errored {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 720px) {
    .at-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .at-tiles--sfx { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
    .at-rack, .at-tabs { max-width: 100%; }
    .at-topbar {
        top: 0.75rem;
        left: 0.75rem;
        right: 0.75rem;
        gap: 0.5rem;
    }
    .at-stopall span { display: none; }
    .at-stopall { padding: 0 0.6rem; }
    .at-search { flex: 1 1 0; min-width: 0; }
    .at-master-slider { width: 80px; }
    .at-master { padding: 0 0.6rem; }
}
@media (max-width: 480px) {
    .at-search { display: none; }
    .at-tab { padding: 0.55rem 0.75rem; font-size: 10px; }
    .at-tab-label { letter-spacing: 0.1em; }
}

/* ============================================================
   MOBILE STABILITY OVERRIDES
   Disables GPU-heavy effects on touch/small devices to prevent
   browser/system UI crashes on low-RAM phones (Galaxy A15, older
   iPhones). Keep at end of file so these rules win the cascade.
   ============================================================ */
@media (pointer: coarse) and (max-width: 1024px) {
    /* Strip every backdrop-filter / blur — each one is a GPU compositor layer */
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Kill the heaviest infinite-blur backgrounds on Sir AI page */
    .sirai-bg-oil, .sirai-depth-drift, .sirai-red-drift {
        animation: none !important;
        filter: none !important;
        opacity: 0.15 !important;
    }
    /* Tone down expensive box-shadow blooms on hover (touch devices don't hover anyway) */
    .sanctum-featured-card:hover, .card:hover {
        box-shadow: none !important;
    }

    /* Glass surfaces lost their backdrop-filter blur above. Their original
       low-alpha backgrounds (white-tint or 35% black) are near-invisible
       without blur. Replace with darker, solidly-translucent surfaces so
       every glass element on the index/cards/header/player stays readable. */

    /* Card overlays (action buttons, tag pill, badges, lock, vault pill) */
    .card-action-btn,
    .card-tag,
    .card-social-btn,
    .card-preview-badge,
    .card-lock,
    .card-vault-pill {
        background: rgba(20, 20, 22, 0.85) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

    /* Card tracklist player strip — the main culprit; appears on every card */
    .player {
        background-color: rgba(10, 10, 12, 0.85) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
    }

    /* Bottom audio drawer (mini + big) and peek tab */
    .player-drawer,
    .now-playing,
    .resume-prompt,
    .queue-confirm-popover,
    .copy-toast,
    .system-toast,
    .vault-gate-toast,
    .findom-tip-cta,
    .fagtax-float-cta {
        background: rgba(15, 15, 17, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* Big-player controls + drawer nav */
    .big-ctrl-btn,
    .big-ctrl-btn.main,
    .big-dismiss-btn,
    .big-queue-panel,
    .drawer-nav,
    .drawer-nav-close,
    .volume-btn,
    .volume-slider-wrap,
    .account-menu,
    .profile-dropdown-menu {
        background: rgba(20, 20, 22, 0.88) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
    }

    /* Limey sidebar button (uses inline white-tint gradient with no
       backdrop-filter — relies on the drawer's blur for legibility) */
    .limey-sidebar-btn {
        background: rgba(28, 28, 32, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
    }
    .limey-sidebar-btn:hover {
        background: rgba(40, 40, 44, 0.95) !important;
        border-color: rgba(255, 255, 255, 0.22) !important;
    }
    .limey-sidebar-btn.given {
        background: rgba(36, 28, 16, 0.92) !important;
        border-color: rgba(255, 200, 80, 0.28) !important;
    }
    .limey-toast,
    .limey-modal {
        background: rgba(15, 15, 17, 0.94) !important;
        border-color: rgba(255, 255, 255, 0.16) !important;
    }

    /* Modals + overlays */
    .modal,
    .modal-overlay,
    .upgrade-modal,
    .upgrade-overlay,
    .login-prompt,
    .login-prompt__btn,
    .login-prompt__close,
    .login-prompt-overlay,
    .confess-about-modal,
    .confess-tribute-modal {
        background: rgba(12, 12, 14, 0.92) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* Hero CTAs (touch devices only — header CTAs handled by inline-pill rule) */
    .hero-slide-btn.btn-primary,
    .hero-slide-btn.btn-secondary,
    .hero-slide-btn.btn-custom,
    .hero-slide-btn.btn-gold,
    .hero-slide-btn.btn-outline {
        background: rgba(20, 20, 22, 0.85) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

    /* Countdown timer + slug-page glass */
    .countdown-timer-glass,
    .cd-release-strip,
    #buffering-indicator,
    #slug-page .cd-unit,
    #slug-page .file-action-btn.action-bookmark,
    #slug-page .file-description,
    #slug-page .file-meta span,
    #slug-page .tracks-section,
    .slug-countdown--prominent .cd-unit,
    .slug-countdown.phase-takeover .cd-seconds {
        background: rgba(15, 15, 17, 0.85) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* Sirai search surfaces */
    .sirai-chip,
    .sirai-empty,
    .sirai-input-container,
    .sirai-matched-tags,
    .sirai-results-search-input,
    .sirai-search-term,
    .sirai-title-match-row,
    .sirai-title-matches,
    .sir-monitor-indicator {
        background: rgba(18, 18, 20, 0.88) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
    }

    /* PMV controls */
    .pmv-bookmark-btn,
    .pmv-category-badge,
    .pmv-duration,
    .pmv-exit-fullscreen,
    .pmv-filter-btn,
    .pmv-video-overlay .video-overlay-controls {
        background: rgba(15, 15, 17, 0.85) !important;
        border-color: rgba(255, 255, 255, 0.14) !important;
    }

    /* Locked file overlay */
    .file-cover--locked .lock-overlay {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    /* Filter tag pills under the search bar — preserve per-tag colour tint */
    .filter-tag-btn,
    .filter-tags-box,
    .filter-btn {
        background-color: color-mix(in srgb, var(--tag-color, #6b7280) 12%, rgba(15, 15, 17, 0.88)) !important;
        border-color: color-mix(in srgb, var(--tag-color, #6b7280) 30%, rgba(255, 255, 255, 0.15)) !important;
    }
    .filter-tag-btn.active {
        background-color: color-mix(in srgb, var(--tag-color) 28%, rgba(15, 15, 17, 0.85)) !important;
    }
}

/* Pause every CSS animation on a hidden section — applies to all devices.
   Animation state is restored automatically when .hidden is removed. */
.hidden, .hidden *, .hidden *::before, .hidden *::after {
    animation-play-state: paused !important;
}


/* ═══════════════════════════════════════════════════════════════
   DROPS — LIMITED STORE DROPS PAGE
═══════════════════════════════════════════════════════════════ */

/* ── Page shell ── */
#drops-page {
    min-height: calc(100vh - 7rem);   /* 5rem main top padding + 2rem main bottom padding */
    display: flex;
    flex-direction: column;
}
.drops-container {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.drops-page-inner {
    flex: 1;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/* ── Heading — Syne, mirrors PMV heading exactly ── */
.drops-heading {
    font-family: 'Syne', 'Yeezy', 'IBM Plex Mono', monospace;
    font-weight: 800;
    font-size: clamp(2rem, 6vw, 3.6rem);
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    margin: 0 auto 1rem;
    padding: 0 1rem;
    user-select: none;
    -webkit-user-select: none;
}
.drops-heading-inner {
    display: inline-block;
    background-image: linear-gradient(
        100deg,
        #5a0010 0%, #b00020 18%, #ff2a3d 35%,
        #ff6276 50%, #ff2a3d 65%, #b00020 82%, #5a0010 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: pmv-heading-shimmer 7s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(255, 42, 61, 0.18));
}
@media (prefers-reduced-motion: reduce) {
    .drops-heading-inner { animation: none; background-position: 50% 50%; }
}

/* ── Header block ── */
.drops-header { text-align: center; margin-bottom: 1.4rem; }
.drops-divider {
    height: 1px;
    margin: 0.5rem 1rem 2rem;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.08) 80%, transparent);
}

/* ── State messages ── */
.drops-msg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 4rem 2rem;
    text-align: center;
    color: rgba(255,255,255,0.3);
    font-size: 0.9rem;
}
.drops-msg i   { font-size: 2.2rem; color: rgba(255,255,255,0.15); }
.drops-msg p   { margin: 0; }
.drops-msg--offline i { color: rgba(248,113,113,0.5); }
.drops-msg--error   i { color: rgba(255,45,45,0.6); }

/* ── Loading spinner ── */
.drops-loading {
    display: flex; align-items: center; justify-content: center;
    padding: 5rem 2rem; color: rgba(255,255,255,0.2); font-size: 2rem;
}
@keyframes drops-spin { to { transform: rotate(360deg); } }
.drops-spin { display: inline-block; animation: drops-spin 0.8s linear infinite; }

/* ── Grid ── */
.drops-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

/* ── Card ── */
.drops-card {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    display: flex;
    flex-direction: column;
}
.drops-card:hover {
    border-color: rgba(255,255,255,0.13);
    background: rgba(255,255,255,0.05);
}
.drops-card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}
.drops-card-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.drops-card-img.is-active { opacity: 1; }
/* Single-image cards still need to be visible */
.drops-card[data-img-count="1"] .drops-card-img { opacity: 1; }
.drops-card-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.1); font-size: 2.5rem;
}

/* Badge — single subtle pill */
.drops-card-badge {
    position: absolute;
    top: 0.65rem; left: 0.65rem;
    font-size: 0.58rem; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    padding: 0.22rem 0.55rem;
    border-radius: 20px;
    border: 1px solid rgba(255,60,60,0.22);
    background: rgba(255,60,60,0.1);
    color: var(--red, #ff2d2d);
    pointer-events: none;
}
.drops-card-badge--soldout {
    color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

/* Card body */
.drops-card-body {
    padding: 1rem 1.1rem 1.1rem;
    display: flex; flex-direction: column; flex: 1; gap: 0.45rem;
}
.drops-card-title {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.98rem; font-weight: 700;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: #fff; margin: 0; line-height: 1.3;
}
.drops-card-desc {
    font-size: 0.84rem;
    color: rgba(255,255,255,0.65);
    margin: 0; line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.drops-card-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem; margin-top: auto; padding-top: 0.35rem;
}
.drops-card-price {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 1.05rem; font-weight: 700; color: #fff;
    letter-spacing: 0.02em;
}
.drops-card-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.32rem 0.6rem;
    border-radius: 999px;
    color: #34d399;
    background: rgba(52,211,153,0.1);
    border: 1px solid rgba(52,211,153,0.25);
}
.drops-card-stock::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 6px currentColor;
    flex-shrink: 0;
}
.drops-card-stock--soldout {
    color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.drops-card-stock--soldout::before { box-shadow: none; opacity: 0.6; }
.drops-card-stock--low {
    color: #fb7185;
    background: rgba(251,113,133,0.12);
    border-color: rgba(251,113,133,0.3);
    animation: drops-stock-pulse 1.6s ease-in-out infinite;
}
.drops-card-stock--low::before {
    animation: drops-stock-pulse-dot 1s ease-in-out infinite;
}
@keyframes drops-stock-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(251,113,133,0); }
    50%     { box-shadow: 0 0 0 4px rgba(251,113,133,0.18); }
}
@keyframes drops-stock-pulse-dot {
    0%,100% { transform: scale(1);   opacity: 1; }
    50%     { transform: scale(1.3); opacity: 0.7; }
}

/* Buy button */
.drops-buy-btn {
    display: block; width: 100%; margin-top: 0.6rem;
    padding: 0.6rem 1rem;
    background: var(--red, #ff2d2d); color: #fff;
    border: none; border-radius: 10px;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.drops-buy-btn:hover:not(:disabled) { background: #ff3b3b; }
.drops-buy-btn--soldout,
.drops-buy-btn:disabled {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.25);
    cursor: not-allowed;
    border: 1px solid rgba(255,255,255,0.07);
}

/* ── Inline detail view ── */
.drops-detail-view {
    animation: drops-detail-in 0.22s ease both;
}
@keyframes drops-detail-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.drops-detail-back {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: none; border: none;
    color: rgba(255,255,255,0.45);
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer; padding: 0; margin-bottom: 2rem;
    transition: color 0.2s ease;
}
.drops-detail-back:hover { color: #fff; }
.drops-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: start;
}
.drops-detail-media {
    border-radius: 14px; overflow: hidden;
    aspect-ratio: 1 / 1;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
}
.drops-detail-img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.drops-detail-stage { position: relative; height: 100%; }
.drops-detail-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.drops-detail-nav:hover {
    background: rgba(0,0,0,0.8);
    color: #fff;
}
.drops-detail-nav:active { transform: translateY(-50%) scale(0.94); }
.drops-detail-nav--prev { left: 0.6rem; }
.drops-detail-nav--next { right: 0.6rem; }
.drops-detail-nav i { font-size: 1.25rem; }
.drops-detail-img-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.1); font-size: 4rem;
}
.drops-detail-thumbs {
    display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap;
}
.drops-detail-thumb {
    width: 54px; height: 54px; border-radius: 8px; overflow: hidden;
    border: 1.5px solid transparent; cursor: pointer; padding: 0;
    background: rgba(255,255,255,0.04); flex-shrink: 0;
    transition: border-color 0.15s ease;
}
.drops-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drops-detail-thumb.active,
.drops-detail-thumb:hover { border-color: var(--red, #ff2d2d); }
.drops-detail-info { display: flex; flex-direction: column; gap: 0.9rem; }
.drops-detail-title {
    font-family: 'Syne', 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 1.5rem; font-weight: 800;
    letter-spacing: 0.02em; text-transform: uppercase; color: #fff; margin: 0;
}
.drops-detail-price {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 1.5rem; font-weight: 700; color: #fff;
    letter-spacing: 0.02em;
}
.drops-detail-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    padding: 0.55rem 0.95rem;
    border-radius: 12px;
    color: #34d399;
    background: rgba(52,211,153,0.1);
    border: 1px solid rgba(52,211,153,0.28);
    width: fit-content;
}
.drops-detail-stock::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
    flex-shrink: 0;
}
.drops-detail-stock--soldout {
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.12);
}
.drops-detail-stock--soldout::before { box-shadow: none; opacity: 0.6; }
.drops-detail-stock--low {
    color: #fb7185;
    background: rgba(251,113,133,0.14);
    border-color: rgba(251,113,133,0.35);
    animation: drops-stock-pulse 1.6s ease-in-out infinite;
}
.drops-detail-stock--low::before {
    animation: drops-stock-pulse-dot 1s ease-in-out infinite;
}
.drops-detail-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.78);
    line-height: 1.65;
    margin: 0;
}
.drops-detail-buy-btn {
    display: block; width: 100%; padding: 0.75rem 1rem; margin-top: 0.4rem;
    background: var(--red, #ff2d2d); color: #fff;
    border: none; border-radius: 12px;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    cursor: pointer; transition: background 0.2s ease;
}
.drops-detail-buy-btn:hover:not(:disabled) { background: #ff3b3b; }
.drops-detail-buy-btn.drops-buy-btn--soldout,
.drops-detail-buy-btn:disabled {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.25);
    cursor: not-allowed;
    border: 1px solid rgba(255,255,255,0.07);
}

/* Variant pickers (colour, size) */
.drops-variant-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.drops-variant-label {
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
}
.drops-variant-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.drops-variant-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.drops-variant-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    padding: 0.55rem 0.95rem;
    font-family: 'Yeezy', 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.drops-variant-pill:hover {
    color: #fff;
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.07);
}
.drops-variant-radio:checked + .drops-variant-pill {
    color: #fff;
    background: rgba(255,45,45,0.15);
    border-color: rgba(255,45,45,0.5);
    box-shadow: 0 0 0 1px rgba(255,45,45,0.3);
}
.drops-variant-radio:focus-visible + .drops-variant-pill {
    outline: 2px solid var(--red, #ff2d2d);
    outline-offset: 2px;
}

/* Footer */
.drops-footer {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 2rem 1.5rem 3rem;
}

/* Responsive */
@media (max-width: 640px) {
    .drops-page-inner { padding: 1.5rem 1rem 3rem; }
    .drops-grid { grid-template-columns: 1fr 1fr; gap: 0.85rem; }
    .drops-detail-content { grid-template-columns: 1fr; gap: 1.5rem; }
    .drops-detail-title { font-size: 1.2rem; }
    .drops-detail-price { font-size: 1.2rem; }
}
@media (max-width: 400px) {
    .drops-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   MOBILE WEBCONTENT STABILITY (iOS Safari crash-loop fix)
   ================================================================
   Diagnosis (2026-05-12): ~42% of mobile sessions site-wide were
   ending after a single pageshow beacon — the iOS "this webpage
   was reloaded because a problem occurred" loop. Server, account
   data and network were healthy. Cause = WebContent process being
   killed by iOS jetsam on idle homepage load.

   Single biggest contributor on the GPU/compositor side is the
   sitewide use of backdrop-filter (~190 rules). WebKit on iOS
   allocates a separate compositor layer per blurred element, and
   the SPA keeps the player drawer, header, sidebar, sirai chips,
   sanctum cards, modals, peek-tab, etc. all in the DOM on every
   page — easily exceeding per-tab GPU budget on 3-4 GB iPhones.

   On mobile widths we disable backdrop-filter entirely. The
   existing background-color of each glass surface already carries
   the dark smoke (most are rgba(0,0,0,0.4-0.7) + border) and
   stays readable without the blur. Desktop is untouched. Pointer
   media query keeps real desktop "narrow window" sessions on the
   rich blur — only touch devices and sub-900px mobiles fall back.
   ================================================================ */
@media (max-width: 900px), (pointer: coarse) {
    *,
    *::before,
    *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* The few glass surfaces whose original bg was a very faint
       white tint and relied on the blur to be visible. Bump to a
       darker smoke so they remain legible without blur.        */
    .fagtax-bar,
    .filter-tag-btn,
    .sirai-chip,
    .queue-confirm-popover,
    .search-pl-badge,
    .toast {
        background-color: rgba(20, 20, 22, 0.85) !important;
    }

    /* Pause CSS animations on hidden SPA sections so they stop
       driving compositor work while the user is on another tab.  */
    section[id$="-page"].hidden *,
    section[id$="-page"].hidden *::before,
    section[id$="-page"].hidden *::after {
        animation-play-state: paused !important;
    }
}