/* [CORE & FONTS] */
:root {
    /* `only` is the opt-out keyword: plain `dark` merely says "dark is supported", which still
       lets Chrome's Auto Dark Theme / Samsung Internet re-tint author colours. `only dark` tells
       the UA the page is already dark and must not be auto-adjusted — this is what keeps the
       signature red (#f2112c) from being washed out in mobile dark mode. */
    color-scheme: only dark;
    --font-display: 'Roboto', sans-serif;
    --font-body: 'Poppins', sans-serif;

    --bg-main: #151515;
    --bg-card: #0D0D0D;

    --color-text: #EAEAEA;
    --color-text-muted: #7A7A7A;

    --neon-music: #7C3AED;
    /* Deep Violet — creative, premium */
    --neon-party: #F59E0B;
    /* Amber Gold  — celebration, festive */
    --neon-live: #f2112c;
    /* PIF Signature Red */
    --neon-pif-red: #f2112c;

    --shadow-music: rgba(124, 58, 237, 0.45);
    --shadow-party: rgba(245, 158, 11, 0.45);
    --shadow-live: rgba(242, 17, 44, 0.4);
    --shadow-pif-red: rgba(242, 17, 44, 0.6);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    scroll-behavior: smooth;
    color-scheme: only dark;
}

body {
    background-color: var(--bg-main);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow: hidden;
    /* `forced-color-adjust: none` was removed here on 2026-07-27, for the same three reasons the
       duplicate at the end of this file was removed: it is unscoped so it reaches Chrome/Safari/iOS
       which never had a problem; it does nothing for Samsung's forced-dark (a different mechanism —
       the on-device measurement found background-clip:text is the actual fix); and it switches off
       Windows High Contrast Mode site-wide for the users who deliberately enabled it. */
}

/* Hardware GPU Acceleration & Buttery Smooth 60/120fps Layer Promotion */
.gateway-card,
.content-section,
.event-modal,
.item-card,
.lightbox-nav-btn,
.lightbox-main-media,
.close-btn {
    transform: translateZ(0);
    backface-visibility: hidden;
}

a {
    color: var(--color-text);
    text-decoration: none;
}

#noise-overlay,
#vignette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1000;
    transform: translateZ(0); /* Force GPU compositing layer to keep animations buttery smooth */
    will-change: transform, opacity;
}

#noise-overlay {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
}

#vignette-overlay {
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
}

/* [HEADER] */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 40px;
    z-index: 999;
    /* Float above all content sections, just below modals */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    border: none;
    pointer-events: auto;
    transition: all 0.3s ease;
}

/* Truly optically center the nav between logo and social icons */
#main-header nav {
    position: absolute;
    left: calc(50% - 36px);
    transform: translateX(-50%);
    pointer-events: none;
    /* let clicks pass through gap */
}

#main-header nav a {
    pointer-events: all;
}

.logo img {
    height: 26px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.logo:hover img {
    opacity: 1;
}

.social-links-header {
    display: flex;
    gap: 22px;
    font-size: 1.1rem;
}

.social-links-header a {
    color: var(--color-text-muted);
    transition: all 0.3s ease;
}

.social-links-header a:hover {
    color: var(--color-text);
    transform: scale(1.1);
}

/* [MAIN LAYOUT] */
#main-content {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* [GATEWAYS] */
#gateways {
    display: flex;
    width: 100%;
    height: 100%;
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
    transform: scale(0.98);
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
}

#gateways.visible {
    opacity: 1;
    transform: scale(1);
}

.gateway-card {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    contain: layout paint;
    box-sizing: border-box;
    transition: flex 0.7s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, flex;
}

.gateway-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%) brightness(0.52) contrast(1.08);
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 0;
    overflow: hidden;
    contain: paint layout;
    will-change: transform, filter;
}

.gateway-bg video,
.global-bg video,
.content-section > video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
    filter: grayscale(100%) brightness(0.55) contrast(1.08);
    transition: filter 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#gateway-music .gateway-bg {
    background-image: url('../images/backgrounds/music_poster.webp');
}

#gateway-party .gateway-bg {
    background-image: url('../images/backgrounds/party_poster.webp');
}

#gateway-live .gateway-bg {
    background-image: url('../images/backgrounds/live_poster.webp');
}

/* Prevent double-layer ghosting/bleed-through when video is loaded inside gateway-bg */
.gateway-bg:has(video),
.gateway-bg.has-video {
    background-image: none !important;
    background-color: #0d0d0d;
}

.gateway-bg video {
    background-color: #0d0d0d;
    backface-visibility: hidden;
}

/* Soft Feather Vignette Mask & Ambient Depth Layer */
.gateway-card::after {
    content: '';
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(12, 12, 18, 0.45) 75%, rgba(5, 5, 10, 0.88) 100%);
    pointer-events: none;
    z-index: 1;
    transition: background 0.5s ease, opacity 0.5s ease;
}

.gateway-logo {
    height: 100px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translate3d(0, 0, 50px);
    will-change: transform;
    z-index: 2;
}

.gateway-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: 5px;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translate3d(0, 0, 30px);
    text-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
    will-change: transform;
    z-index: 2;
}

.gateway-card::before {
    /* 3D Glassmorphism Neon Border Sealed Fit */
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 3;
    pointer-events: none;
}

/* --- Hover & Active States (Grayscale to Vibrant Color & 3D Ambient Glow) --- */
.gateway-card:hover .gateway-bg,
.gateway-card:hover .gateway-bg video,
.gateway-card.touch-active .gateway-bg,
.gateway-card.touch-active .gateway-bg video {
    filter: grayscale(0%) brightness(0.95) contrast(1.12); /* Smooth transition to vivid full color without 0.1px layer separation */
}

.gateway-card:hover::after {
    background: radial-gradient(ellipse at center, transparent 48%, rgba(12, 12, 18, 0.22) 80%, rgba(5, 5, 10, 0.65) 100%);
}

.gateway-card:hover .gateway-logo {
    transform: translate3d(0, 0, 70px) scale(1.03);
}

.gateway-card:hover .gateway-title {
    transform: translate3d(0, 0, 50px) scale(1.03);
}

/* Signature per-section neon: Music = purple (--neon-music #7C3AED),
   Party = amber/yellow (--neon-party #F59E0B), Live = red (--neon-live #f2112c).
   Applied on hover (PC) and touch-active (mobile sticky-hover) for parity. */
#gateway-music:hover::before,
#gateway-music.touch-active::before {
    border-color: rgba(124, 58, 237, 0.7);
    box-shadow: 0 0 25px rgba(124, 58, 237, 0.4), inset 0 0 20px rgba(124, 58, 237, 0.25);
}

#gateway-party:hover::before,
#gateway-party.touch-active::before {
    border-color: rgba(245, 158, 11, 0.7);
    box-shadow: 0 0 25px rgba(245, 158, 11, 0.4), inset 0 0 20px rgba(245, 158, 11, 0.25);
}

#gateway-live:hover::before,
#gateway-live.touch-active::before {
    border-color: rgba(242, 17, 44, 0.7);
    box-shadow: 0 0 25px rgba(242, 17, 44, 0.4), inset 0 0 20px rgba(242, 17, 44, 0.25);
}


/* [CONTENT SECTIONS] */
.content-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 100%;
    background-color: rgba(21, 21, 21, 0.92); /* Matches custom #151515 color scheme */
    backdrop-filter: blur(12px); /* Reduced from 20px for high performance rendering */
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.5s ease, visibility 0s 0.5s, transform 0.5s ease;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 100px 60px 260px !important;
    border: 1px solid rgba(255, 255, 255, 0.03);
    box-sizing: border-box;
}

/* Ambient Radial Glow Backdrops for each section */
#music::before,
#party::before,
#live::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    pointer-events: none;
    z-index: -1;
    filter: blur(120px);
    opacity: 0.45;
    transition: all 0.5s ease;
}

#music::before {
    top: -10%;
    right: -5%;
    background: radial-gradient(circle, var(--neon-music) 0%, rgba(0, 0, 0, 0) 70%);
}

#party::before {
    top: -10%;
    right: -5%;
    background: radial-gradient(circle, var(--neon-party) 0%, rgba(0, 0, 0, 0) 70%);
}

#live::before {
    top: -10%;
    right: -5%;
    background: radial-gradient(circle, var(--neon-live) 0%, rgba(0, 0, 0, 0) 70%);
}

.content-section.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.content-section h2 {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

#music h2 {
    color: var(--neon-music);
    text-shadow: 0 0 15px var(--shadow-music);
}

#party h2 {
    color: var(--neon-party);
    text-shadow: 0 0 15px var(--shadow-party);
}

#live h2 {
    color: var(--neon-live);
    text-shadow: 0 0 15px var(--shadow-live);
}


/* ====== GLOBAL FLOATING FIXED BACK BUTTON (100% SCREEN VIEWPORT FIXED) ====== */
.content-section > .close-btn {
    display: none !important;
}

#global-section-close-btn {
    position: fixed;
    top: 105px;
    right: 40px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.25s ease, border-color 0.25s ease;
    background: rgba(12, 12, 16, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7), 0 0 12px rgba(255, 255, 255, 0.08);
}

/* Base Visible State: Visible when idle/still */
#global-section-close-btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* While actively scrolling: Fade out smoothly */
#global-section-close-btn.visible.is-scrolling {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-6px) !important;
}

#global-section-close-btn.menu-open,
#global-section-close-btn.modal-open {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(-10px) !important;
}

#global-section-close-btn:hover {
    transform: scale(1.06);
    background: #fff;
    color: #151515;
}

#global-section-close-btn.theme-music:hover {
    background: var(--neon-music);
    color: #151515;
    border-color: var(--neon-music);
    box-shadow: 0 0 20px var(--shadow-music);
}

#global-section-close-btn.theme-party:hover {
    background: var(--neon-party);
    color: #151515;
    border-color: var(--neon-party);
    box-shadow: 0 0 20px var(--shadow-party);
}

#global-section-close-btn.theme-live:hover {
    background: var(--neon-live);
    color: #151515;
    border-color: var(--neon-live);
    box-shadow: 0 0 20px var(--shadow-live);
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
}

/* Card styles from old CSS - can be adapted here */
/* For now, just a placeholder */
.item-card {
    background: var(--bg-card);
    border-radius: 8px;
    border: 1px solid #222;
    overflow: visible;
    /* Changed from hidden to allow badge pop-out */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    position: relative;
    transform: translate3d(0, 0, 0); /* GPU acceleration */
    will-change: transform, box-shadow;
}

.item-card:hover {
    transform: translate3d(0, -5px, 0);
}

#music .item-card:hover {
    border-color: var(--neon-music);
    box-shadow: 0 10px 30px -10px var(--shadow-music);
}

#party .item-card:hover {
    border-color: var(--neon-party);
    box-shadow: 0 10px 30px -10px var(--shadow-party);
}

.item-img-wrapper {
    width: 100%;
    aspect-ratio: 1/1;
    background: #1a1a1a;
    position: relative;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    transform: translateZ(0);
}

.item-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translateZ(0);
    will-change: transform;
}

.item-info {
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.item-date {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--neon-party);
    letter-spacing: 0.5px;
}

.item-title {
    display: block;
    font-weight: 700;
    font-size: 1.1rem;
    color: #fff;
    line-height: 1.35;
}

.item-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}

/* [LIVE SECTION] */
#live-container {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 60px;
}

.onair-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 50px;
    background: transparent;
    padding: 0;
}

.onair-info {
    flex: 1 1 420px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.onair-player {
    flex: 1 1 480px;
    min-width: 0;
}

/* PIF Brand */
.pif-brand {
    display: flex;
    align-items: center;
    gap: 16px;
}

.show-logo {
    height: 32px;
    max-height: 36px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(242, 17, 44, 0.55));
}

.show-title {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--neon-live);
    text-shadow: 0 0 20px rgba(242, 17, 44, 0.5);
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.pif-tag {
    background: rgba(242, 17, 44, 0.12);
    border: 1px solid rgba(242, 17, 44, 0.35);
    color: var(--neon-live);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.show-desc {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.7;
}

/* Timer */
.timer-box {
    background: rgba(242, 17, 44, 0.05);
    border: 1px solid rgba(242, 17, 44, 0.25);
    border-radius: 14px;
    padding: 20px 24px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.timer-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
    flex-wrap: wrap;
}

.timer-label-main {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.pif-schedule-tag {
    font-size: 0.65rem;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.pif-schedule-tag.special {
    background: linear-gradient(135deg, rgba(255, 180, 0, 0.25), rgba(255, 120, 0, 0.15));
    border: 1px solid rgba(255, 180, 0, 0.7);
    color: #ffc107;
    box-shadow: 0 0 14px rgba(255, 180, 0, 0.4);
}

.pif-schedule-tag.regular {
    background: rgba(242, 17, 44, 0.15);
    border: 1px solid rgba(242, 17, 44, 0.45);
    color: var(--neon-live);
}

.schedule-date-card {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.date-main-text {
    font-size: 1rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-main-text i {
    color: var(--neon-live);
    font-size: 0.9rem;
}

.day-highlight {
    color: var(--neon-live);
    font-weight: 900;
}

.time-main-text {
    font-size: 0.88rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.time-main-text i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.82rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-live);
    display: inline-block;
    animation: pulseDot 2s infinite;
}

#countdown {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--neon-live);
    letter-spacing: 3px;
}

/* [World Time List] */
.world-time-box {
    margin-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    width: 100%;
}

.world-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 0.85rem;
    color: #999;
    font-family: monospace;
    letter-spacing: -0.5px;
}

.world-row.highlight {
    color: var(--neon-live);
    font-weight: 700;
}

.w-time {
    font-weight: 700;
    color: #fff;
    width: 50px;
    text-align: right;
}

.world-row.highlight .w-time {
    color: var(--neon-live);
}

.w-zone {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-left: 5px;
    width: 40px;
    text-align: left;
}

.w-city {
    flex: 1;
    text-align: left;
    padding-left: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes pulseDot {
    0% {
        box-shadow: 0 0 0 0 var(--shadow-live);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Platform chips */
.platform-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plat-head {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.plat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.plat-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-text);
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.plat-chip:hover {
    background: var(--neon-live);
    border-color: var(--neon-live);
    color: #151515;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 148, 0.3);
}

/* Video card */
.video-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #111;
    border: 1px solid #222;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(242, 17, 44, 0.15);
    border-color: rgba(242, 17, 44, 0.3);
}

.video-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.video-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: var(--neon-live);
    color: #151515;
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
}

.play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.video-card:hover .play-overlay {
    opacity: 1;
}

.play-icon {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    filter: drop-shadow(0 0 20px rgba(242, 17, 44, 0.6));
}

.video-title-overlay {
    padding: 14px 16px;
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    min-height: 48px;
}

/* [Replay Archive Carousel] */
.archive-container {
    width: 100%;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.archive-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.archive-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 1px;
}

.archive-scroll {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 24px 8px 28px 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 17, 44, 0.15) transparent;
    transition: scrollbar-color 0.3s ease;
}

.archive-scroll:hover {
    scrollbar-color: rgba(242, 17, 44, 0.6) transparent;
}

.archive-scroll::-webkit-scrollbar {
    height: 6px;
}

.archive-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.archive-scroll::-webkit-scrollbar-thumb {
    background: rgba(242, 17, 44, 0.15);
    border-radius: 10px;
    transition: background 0.3s ease;
}

.archive-scroll:hover::-webkit-scrollbar-thumb {
    background: rgba(242, 17, 44, 0.6);
}

.archive-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--neon-live);
    box-shadow: 0 0 10px var(--shadow-live);
}

.archive-scroll-wrapper {
    position: relative;
    width: 100%;
}

.view-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) scale(1);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(10, 10, 10, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
}

.view-btn:hover {
    background: rgba(20, 20, 20, 0.85);
    color: #fff;
    border-color: rgba(242, 17, 44, 0.55);
    box-shadow: 0 0 16px rgba(242, 17, 44, 0.5), 0 6px 20px rgba(0, 0, 0, 0.6);
    transform: translateY(-50%) scale(1.08);
}

.view-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.prev-btn {
    left: -14px;
}

.next-btn {
    right: -14px;
}

.archive-item {
    flex: 0 0 220px;
    min-width: 0 !important;
    max-width: 220px;
    scroll-snap-align: start;
    cursor: pointer;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

.archive-item:hover {
    transform: translate3d(0, -8px, 0) scale(1.03);
}

.archive-thumb-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #151515;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateZ(0);
}

.archive-item:hover .archive-thumb-box {
    border-color: var(--neon-live);
    box-shadow: 0 10px 25px var(--shadow-live);
}

.archive-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.65;
    transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transform: translateZ(0);
    will-change: transform;
}

.archive-item:hover .archive-thumb {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.06);
}

.more-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #888;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.archive-item:hover .more-box {
    background: linear-gradient(135deg, var(--neon-live), rgba(242, 17, 44, 0.6));
    color: white;
    border-color: var(--neon-live);
    box-shadow: 0 10px 25px var(--shadow-live);
}

.more-text {
    text-align: center;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 1px;
}
}

/* [GIGS / PARTY LAYOUT] */
.party-layout {
    display: flex;
    gap: 40px;
    margin-top: 30px;
    width: 100%;
}

.upcoming-section {
    flex: 0 0 62%;
    display: flex;
    flex-direction: column;
}

.past-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 40px;
}

.section-title {
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.glow-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
    0% {
        transform: scale(0.9);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* Upcoming grid */
.gigs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

.gig-card {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease !important;
}

.gig-card:hover {
    border-color: var(--neon-party) !important;
    box-shadow: 0 10px 25px var(--shadow-party) !important;
}

.gig-card .item-img-wrapper {
    aspect-ratio: 4 / 5 !important;
    background: #151515 !important;
}

.gig-card .item-media {
    object-fit: contain !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #151515;
}

/* Past Gigs - same card grid as Upcoming */
.past-gigs-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
}

/* PAST badge (muted grey, greyscale contrast to UPCOMING amber) */
.past-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    z-index: 10;
    background: rgba(80, 80, 80, 0.95);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    /* backdrop-filter removed 2026-07-27 (perf): the fill is 95% opaque, so only 5% of the backdrop
       showed through — a blur on that is not perceptible, but each instance still forced its own
       compositing layer. Pure cost, no visible effect. */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.upcoming-badge {
    position: absolute;
    top: -10px;
    left: 12px;
    z-index: 10;
    background: rgba(242, 17, 44, 0.95);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 5px 12px;
    border-radius: 4px;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(242, 17, 44, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Gig posters idle in mono and come to full colour only on the hovered card — for BOTH the
   Upcoming and Past grids. This used to be scoped to .past-gig-card only, so Upcoming cards had
   no rule at all and hovering them changed nothing.
   .item-media is on the poster <img> AND on the <video> that playHoverVideoInternal injects
   (className = 'item-media party-video-media'), so one selector covers the still and the clip —
   the auto-rotating carousel therefore plays in mono and only the card under the cursor is
   full colour, which is the intended "hovered one wins" read. */
/* UPCOMING cards are always full colour — no filter at all. Only the PAST grid is muted, and it
   comes to full colour on the hovered card. .item-media is on the poster <img> AND on the <video>
   playHoverVideoInternal injects (className 'item-media party-video-media'), so the still and the
   clip are covered by one selector. */
.past-gig-card .item-media {
    filter: grayscale(100%) brightness(0.8);
    transition: filter 0.35s ease;
}

/* Desktop: the hovered card wins (unchanged).
   Touch devices have no hover at all, so a past card could never come to colour there. On those
   devices `.in-view` is toggled by an IntersectionObserver (registerPastCardViewColor in
   script.js) as the card scrolls through the viewport — that is the mobile equivalent of hover.
   The class is only ever added under `(hover: none)`, so desktop behaviour is untouched. */
/* `.media-playing` is set by script.js from the <video>'s own playing/pause events while a past
   card's poster clip is actually rolling — so a moving poster is always in colour, and a still one
   stays mono. Event-driven rather than set alongside the play() call, because play() can be
   refused and a refused clip must not be left sitting in colour. */
.past-gig-card:hover .item-media,
.past-gig-card.in-view .item-media,
.past-gig-card.media-playing .item-media {
    filter: grayscale(0%) brightness(1);
}

/* Respect reduced-motion: keep the colour change, drop the fade. */
@media (prefers-reduced-motion: reduce) {
    .past-gig-card .item-media { transition: none; }
}

/* No-poster placeholder */
.gig-no-poster {
    width: 100%;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.2);
}

.gig-no-poster i {
    font-size: 2rem;
}

.gig-no-poster span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ====== GIG DETAILS MODAL ====== */
.event-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(4, 4, 4, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: max(20px, env(safe-area-inset-top, 20px)) 0 max(20px, env(safe-area-inset-bottom, 20px));
    box-sizing: border-box;
}

.event-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.event-modal-content {
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    width: 90%;
    max-width: 880px;
    height: 84vh;
    max-height: 88vh;
    overflow-y: auto;
    display: flex;          /* flex column so grid child can stretch */
    flex-direction: column;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(245, 158, 11, 0.08);
    transform: scale(0.93) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.3) rgba(255, 255, 255, 0.02);
}

.event-modal.visible .event-modal-content {
    transform: scale(1) translateY(0);
}

.close-event-modal {
    position: fixed;
    top: 30px;
    right: 30px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    z-index: 2001;
    display: none;
    /* Only show in desktop when modal is visible */
}

.event-modal.visible~.close-event-modal,
.event-modal.visible .close-event-modal {
    display: block;
}

.close-event-modal:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* Event detail content grid */
.event-detail-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    width: 100%;
    flex: 1;            /* stretch to fill flex parent (.event-modal-content) */
    min-height: 0;      /* allow grid to shrink inside flex */
    overflow: hidden;
}

.event-detail-poster-box {
    background: #0d0d0d;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    /* height comes from grid row = full grid height */
}

.event-detail-poster-box img,
.event-detail-poster-box video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Maintain natural proportions without layout break */
    display: block;
}

.event-detail-info-box {
    padding: 28px 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;       /* the whole info-box scrolls if needed */
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.2) rgba(255, 255, 255, 0.02);
    -webkit-overflow-scrolling: touch;
}

/* Desc text scroll container — fixed height, text scrolls inside */
.event-detail-scroll-content {
    max-height: 130px;      /* limit text area to ~4 lines visible */
    min-height: 48px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(245, 158, 11, 0.25) rgba(255, 255, 255, 0.02);
    -webkit-overflow-scrolling: touch;
}

.evt-detail-desc-box {
    min-height: 40px;
}

.desc-body {
    font-size: 0.88rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-wrap;
    word-break: break-word;
}

.desc-header {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.35);
    text-transform: uppercase;
}

.event-detail-scroll-content::-webkit-scrollbar {
    width: 6px;
}

.event-detail-scroll-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 3px;
}

.event-detail-scroll-content::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.25);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.event-detail-scroll-content::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.6);
}

/* Static bottom actions & gallery container inside the info box */
.event-detail-static-bottom {
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 14px;
    padding-bottom: 24px;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Custom premium scrollbar for Event details */
.event-detail-info-box::-webkit-scrollbar {
    width: 6px;
}

.event-detail-info-box::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 3px;
}

.event-detail-info-box::-webkit-scrollbar-thumb {
    background: rgba(245, 158, 11, 0.2); /* Accent Party Gold tone, subtle */
    border-radius: 3px;
    transition: background 0.3s ease;
}

.event-detail-info-box::-webkit-scrollbar-thumb:hover {
    background: rgba(245, 158, 11, 0.6);
}

.evt-detail-badge {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--neon-party);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 6px 12px;
    border-radius: 30px;
    align-self: flex-start;
    letter-spacing: 1.5px;
}

.evt-detail-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0;
}

.evt-detail-meta-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 0;
}

.evt-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.evt-detail-meta-item i {
    font-size: 1.2rem;
    color: var(--neon-party);
    width: 24px;
    text-align: center;
}

.evt-detail-meta-item .meta-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.evt-detail-meta-item .meta-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.evt-detail-desc-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.evt-detail-desc-box .desc-header {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
}

.evt-detail-desc-box .desc-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

.evt-detail-action {
    margin-top: 10px;
}

.event-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 14px 28px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
    transition: all 0.3s ease;
}

.event-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5), 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 900px) {
    .archive-item {
        flex: 0 0 140px !important;
        min-width: 0 !important;
        max-width: 140px !important;
    }

    .archive-item .archive-thumb-box {
        margin-bottom: 3px;
        border-radius: 4px;
    }

    .archive-item div:last-child {
        font-size: 0.7rem !important;
    }

    .archive-item .fa-play {
        font-size: 0.9rem !important;
    }

    .archive-scroll {
        padding: 10px 0 20px 0;
        gap: 10px;
    }

    .more-box i {
        font-size: 1.1rem !important;
        margin-bottom: 2px !important;
    }

    .onair-container {
        flex-direction: column;
        gap: 30px;
    }

    .onair-info,
    .onair-player {
        flex: none;
        width: 100%;
    }

    .show-title {
        font-size: 1.6rem;
    }

    #countdown {
        font-size: 1.4rem;
    }

    /* Gigs Party Responsive */
    .party-layout {
        flex-direction: column;
        gap: 30px;
    }

    .upcoming-section {
        flex: none;
        width: 100%;
    }

    .past-section {
        flex: none;
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        padding-left: 0;
        padding-top: 30px;
    }

    .event-detail-grid {
        grid-template-columns: 1fr;
        flex: none;         /* no flex stretch on mobile, natural height */
        min-height: unset;
        overflow: visible;
    }

    .event-detail-poster-box {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        max-height: 260px;
        height: 260px;
        position: sticky;
        top: 0;
        z-index: 100;
        background: #0d0d0d;
        width: 100%;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    }

    .event-detail-info-box {
        padding: 20px;
        gap: 12px;
        min-height: unset;
        overflow: visible;
        box-sizing: border-box;
    }

    .event-detail-scroll-content {
        max-height: 120px;
        min-height: 44px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 6px;
        margin-top: 4px;
        scrollbar-width: thin;
        scrollbar-color: rgba(245, 158, 11, 0.25) rgba(255, 255, 255, 0.02);
    }

    .event-detail-static-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 14px;
        padding-bottom: 36px;
        margin-top: 10px;
        box-sizing: border-box;
    }

    .evt-detail-title {
        font-size: 1.4rem;
    }

    .event-modal-content {
        height: auto;
        max-height: 88dvh;
        width: 92%;
        max-width: 760px;
        display: block;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 36px;
        box-sizing: border-box;
    }

    .close-event-modal {
        top: 20px;
        right: 20px;
        font-size: 1.25rem;
    }
}

/* ===================================================
   [EVENT POPUP MODAL - LANDSCAPE & TABLET SHORT RESPONSIVE ENGINE]
   Prevents bottom cutoff on tablet landscape & awkward/short screens
   =================================================== */
@media (max-height: 850px) and (min-width: 769px) {
    .event-modal-content {
        height: auto !important;
        max-height: 88dvh !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .event-detail-grid {
        grid-template-columns: min(280px, 32vw) 1fr !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .event-detail-poster-box {
        max-height: 75vh !important;
    }

    .event-detail-info-box {
        padding: 20px 24px 30px !important;
    }

    .event-detail-scroll-content {
        max-height: 100px !important;
    }
}

@media (max-height: 660px) {
    .event-modal-content {
        height: auto !important;
        max-height: 92dvh !important;
        max-height: 92vh !important;
        width: 94% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 24px !important;
    }

    .event-detail-grid {
        grid-template-columns: min(220px, 28vw) 1fr !important;
    }

    .event-detail-info-box {
        padding: 16px 20px 24px !important;
        gap: 8px !important;
    }

    .event-detail-static-bottom {
        padding-bottom: 16px !important;
    }
}


/* ===================================================
   [MOBILE & TABLET PORTRAIT RESPONSIVE ENGINE]
   Header is position:fixed (~60px tall on mobile).
   Player bar is position:fixed at bottom (~90px).
   Footer copyright sits ~50px above player bar.
   #main-content starts at viewport top (behind header).
   Strategy: make #gateways height:auto, center it in
   #main-content via asymmetric padding that accounts for
   BOTH footer and player bar at the bottom.
   =================================================== */
@media (max-width: 1024px) and (orientation: portrait), (max-width: 960px) {

    #main-content {
        height: 100dvh !important;
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        /* top: header clearance (~65px)
           bottom: player bar (~90px) + footer text (~50px) + breathing room (~60px) = ~200px
           → cards naturally sit at optical center of visible usable area */
        padding-top: 65px !important;
        padding-bottom: 210px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #gateways {
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;           /* KEY FIX: wrap content, don't fill viewport */
        max-height: none !important;
        margin: 0 auto !important;
        padding: 0 16px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        gap: 12px !important;
    }

    .gateway-card {
        width: 100% !important;
        flex: 0 0 auto !important;          /* Fixed height, not stretchy */
        height: clamp(90px, 18dvh, 130px) !important;
        max-height: 130px !important;
        min-height: 90px !important;
        padding: 10px 16px !important;
        justify-content: center !important;
        align-items: center !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }

    .gateway-logo {
        height: clamp(30px, 4.5vh, 42px) !important;
        max-height: 42px !important;
        max-width: 65% !important;
        margin-bottom: 4px !important;
        object-fit: contain !important;
    }

    .gateway-title {
        font-size: clamp(1.15rem, 3.5vw, 1.7rem) !important;
        letter-spacing: 2.5px !important;
    }
}


/* [FOOTER] */
footer {
    position: fixed;
    bottom: calc(105px + env(safe-area-inset-bottom, 0px));
    left: 0;
    width: 100%;
    text-align: center;
    padding: 6px 20px;
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    color: rgba(255, 255, 255, 0.45);
    z-index: 100;
    text-transform: uppercase;
    pointer-events: none;
    transition: bottom 0.3s ease, opacity 0.3s ease;
}

footer p {
    margin: 2px 0;
}

.footer-credit, .mobile-footer-credit {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 1.5px;
    margin-top: 2px;
}

.footer-credit a, .mobile-footer-credit a {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    text-decoration: none;
    pointer-events: auto;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.footer-credit a:hover, .mobile-footer-credit a:hover {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
    footer {
        bottom: calc(90px + env(safe-area-inset-bottom, 0px));
        font-size: 0.62rem;
        padding: 4px 10px;
    }
    .footer-credit {
        font-size: 0.58rem;
        letter-spacing: 1px;
    }
}

@media (max-height: 500px) {
    footer {
        bottom: calc(75px + env(safe-area-inset-bottom, 0px));
        font-size: 0.58rem;
    }
    .footer-credit {
        font-size: 0.54rem;
    }
}


/* ===================================================
   [MOBILE RESPONSIVE — 768px tablets & large phones]
   =================================================== */
@media (max-width: 768px) {

    /* Header */
    #main-header {
        padding: 14px 20px;
        flex-wrap: nowrap;
    }

    .logo img {
        height: 20px;
    }

    /* nav stays optically centered between logo and social icons */
    #main-header nav {
        position: absolute;
        left: calc(50% - 28px);
        transform: translateX(-50%);
    }

    #crew-btn {
        font-size: 0.65rem;
        letter-spacing: 2.5px;
    }

    .social-links-header {
        font-size: 0.9rem;
        gap: 12px;
    }

    /* Content sections */
    .content-section {
        padding: 70px 16px 240px !important;
        overflow-y: auto;
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }

    .content-section h2 {
        font-size: 1.8rem;
        margin-bottom: 24px;
    }

    #global-section-close-btn {
        top: 68px;
        right: 14px;
        font-size: 0.72rem;
        font-weight: 800;
        padding: 7px 14px;
        border-radius: 20px;
        z-index: 99999;
    }

    /* Archive (Compact 50% Mobile Card Size) */
    .archive-container {
        margin-top: 20px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .archive-scroll-wrapper {
        position: relative;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .archive-scroll {
        display: flex;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 18px 4px 18px 4px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .archive-item {
        flex: 0 0 100px !important;
        width: 100px !important;
        max-width: 100px !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .archive-thumb-box {
        margin-bottom: 4px;
        border-radius: 6px;
    }

    .archive-item div[style*="font-size"],
    .archive-item .archive-title {
        font-size: 0.65rem !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
    }

    .view-btn {
        display: none;
    }

    /* Grid cards */
    .grid-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    /* Footer: keep visible and elevated above bottom bar */
    footer {
        display: block;
    }
}


/* ===================================================
   [MOBILE RESPONSIVE — 480px small phones]
   =================================================== */
@media (max-width: 480px) {

    /* Header tighter */
    #main-header {
        padding: 10px 12px;
    }

    .logo img {
        height: 20px;
    }

    #crew-btn {
        font-size: 0.78rem;
        padding: 6px 8px;
    }

    .social-links-header {
        font-size: 0.85rem;
        gap: 10px;
    }

    /* Content section */
    .content-section {
        padding: 60px 12px 220px !important;
    }

    .content-section h2 {
        font-size: 1.5rem;
        letter-spacing: 1px;
        margin-bottom: 18px;
    }

    .close-btn {
        top: 60px;
        right: 12px;
        font-size: 0.7rem;
        padding: 6px 10px;
        z-index: 300;
    }

    .pif-brand {
        max-width: calc(100% - 75px);
    }

    .show-logo {
        max-height: 22px;
    }

    /* Crew modal: single column on very small screens */
    .crew-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .crew-nickname {
        font-size: 1rem;
    }

    .crew-role {
        font-size: 0.75rem;
    }

    .crew-card-info {
        padding: 8px;
    }

    .crew-card-initials {
        font-size: 3rem;
    }

    /* LIVE */
    .show-title {
        font-size: 1.2rem;
    }

    #countdown {
        font-size: 1.2rem;
        letter-spacing: 1px;
    }

    .show-desc {
        font-size: 0.9rem;
    }

    .timer-box {
        padding: 10px 12px;
    }

    .plat-chip {
        padding: 7px 10px;
        font-size: 0.75rem;
        gap: 5px;
    }

    .plat-head {
        font-size: 0.7rem;
    }

    /* Archive */
    .archive-item {
        flex: 0 0 92px !important;
        width: 92px !important;
        max-width: 92px !important;
        min-width: 0 !important;
    }

    .archive-title {
        font-size: 0.75rem;
    }


    /* Grid */
    .grid-container {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* World time — hide timezone code on tiny screens */
    .w-zone {
        display: none;
    }
}

/* ====== STICKY COMPACT PODCAST & RADIO PLAYER BAR ====== */
.podcast-player {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(300px);
    width: 92%;
    max-width: 860px;
    z-index: 999;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: visible;
}

.podcast-player.active {
    transform: translateX(-50%) translateY(0);
}

.pcast-compact-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    /* Real glass, restrained. Blur reads as "material" (much less than the 28px this design
       replaced — at that radius everything behind turns to mush and the bar still reads as
       "covering" the site even with light passing through). Dimming via `brightness` does the
       legibility work instead: it preserves shape and motion, where blur destroys them.
       Everything that used to sit on top of this base — a top-edge sheen, a red outer glow, an
       inset highlight/shade pair, a tinted border, saturate(170%) — is deliberately gone; that
       is mid-2000s glass vocabulary (Aero gloss, neon rim, simulated bevel), and it, not the
       transparency itself, is what dated the bar. Colour belongs to the content — red appears
       only on the play button and the tag, never as a ring around the panel.
       Tint 0.38→0.30 and brightness 0.74→0.80 (owner: "조금 더 투명하게") raises the light that
       reaches the eye from ~46% to ~58% (computed: L·brightness·(1−alpha) + tintL·alpha over a
       full-white worst case). The per-title scrim below is widened to compensate so the text
       itself doesn't lose the ground this gains — only the field around it gets more transparent. */
    background: rgba(16, 16, 19, 0.30);
    backdrop-filter: blur(18px) saturate(118%) brightness(0.80);
    -webkit-backdrop-filter: blur(18px) saturate(118%) brightness(0.80);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    padding: 8px 18px;
    /* single wide ambient shadow — it seats the bar in the page without the heavy drop that made
       it read as a candy slab pasted on top */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.36);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

/* Without backdrop-filter there is no dimming to lean on, so those browsers keep a mostly-opaque
   bar rather than leaving white text floating over raw page content. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pcast-compact-bar {
        background: rgba(10, 10, 12, 0.94);
    }
}

.pcast-compact-bar:hover {
    border-color: rgba(242, 17, 44, 0.7);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.9), 0 0 25px rgba(242, 17, 44, 0.4);
}

.pcast-thumb-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #151515;
    border: 1px solid rgba(255, 255, 255, 0.15);
    flex-shrink: 0;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
}

.pcast-thumb-wrap:hover {
    transform: scale(1.08);
}

.pcast-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pcast-info-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Local legibility scrim. The bar is deliberately see-through, which is fine over the site's
       dark chrome but marginal when a bright event poster scrolls behind it. Darkening the whole
       bar would undo the transparency the owner asked for, so only the text strip gets extra
       separation, feathered at both ends so no hard edge shows on the glass.
       Raised 0.22→0.36 when the bar itself went more transparent (0.38→0.30 tint, 0.74→0.80
       brightness): solving L·(1−x) + scrimL·x = L_old for x keeps the luminance actually sitting
       behind the title the same as before the bar-wide change, so the field around the text reads
       more open while the text itself doesn't lose ground. (Computed, not screenshot-verified —
       the preview pane isn't compositing frames this session; worth a real device check.) */
    background: linear-gradient(90deg,
        rgba(10, 10, 13, 0) 0%,
        rgba(10, 10, 13, 0.36) 12%,
        rgba(10, 10, 13, 0.36) 86%,
        rgba(10, 10, 13, 0) 100%);
    /* The scrim needs to reach past the text for the fade to work, but must not cost the title
       any width — the negative margin gives back exactly what the padding takes, so the content
       box is unchanged and only the painted area grows. */
    padding-inline: 10px;
    margin-inline: -10px;
}

.pcast-top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}

.pcast-tag {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--neon-live);
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pcast-top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
    gap: 10px;
}

.pcast-tag {
    font-size: 0.62rem;
    font-weight: 800;
    color: var(--neon-live);
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.pcast-time-display {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.8);
    /* `tabular-nums` gives fixed-width digits in the body face, so the clock stops jittering as it
       counts without dragging in Courier — which was the one dated element in this bar. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.04em;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.28);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.pcast-progress-container {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    margin-top: 5px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: height 0.2s ease, background 0.2s ease;
}

.pcast-progress-container:hover {
    height: 6px;
    background: rgba(255, 255, 255, 0.25);
}

.pcast-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--neon-live), #ff4d6d);
    border-radius: 2px;
    transition: width 0.15s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 0 10px rgba(242, 17, 44, 0.75);
    will-change: width;
}

.pcast-marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.pcast-marquee-track {
    display: inline-block;
    /* Track-label treatment, not a headline: small caps size, wide open tracking, the same
       register as .pcast-tag above it ("PIF LIVE PODCAST REPLAYS") so the two lines read as one
       family instead of a heading sitting over a caption. This is the opposite move from the
       tight negative-tracking pass before it — that read as compact and dense, which on
       reflection was the wrong reference (dense/tight is a 2000s media-player habit); a current
       transport label leans spacious and quiet, closer to a boarding-pass field or a fashion
       wordmark than a song title. Weight stays 700 — only Poppins 400/700 are loaded, and the
       text is in constant motion, where 400 would blur softer against a moving backdrop. */
    font-size: 0.8rem;
    font-weight: 700;
    color: #f4f4f6;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* the bar is glass now, so the title needs its own contrast floor */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
    white-space: nowrap;
    will-change: transform;
    padding-left: 0; /* Visible title text at start/pause state */
}

.pcast-marquee-track.playing {
    padding-left: 100%;
    animation: pcastMarquee 18s linear infinite;
    animation-play-state: running; /* Run animation ONLY when playing */
}

.pcast-marquee-track:hover {
    animation-play-state: paused;
}

@keyframes pcastMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.pcast-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ±5s scrub. The circular arrow carries the direction and the numeral sits inside it, which is the
   convention every podcast app uses — it reads instantly and needs no label. Slightly recessed
   next to the play button so the transport hierarchy stays play > scrub > episode. */
.pcast-seek-btn {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.09);
}

/* The arrow is sized so its ring has room for a legible numeral inside — at the original 1rem the
   "5" measured 6.4px tall and 3.6px wide, which is painted but not actually readable. */
.pcast-seek-btn i {
    font-size: 1.15rem;
    line-height: 1;
}

.pcast-seek-num {
    position: absolute;
    top: 50%;
    left: 50%;
    /* optically centred inside the arrow ring, which is not vertically symmetric */
    transform: translate(-50%, -42%);
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
    /* inherits `color` from .pcast-btn so it always tracks the icon it sits inside */
}

/* Docked (side-rail) mode collapses to just the play button — the scrub pair goes with the
   episode buttons that are already hidden there. */
.podcast-player.docked .pcast-controls .pcast-seek-btn {
    display: none;
}

.pcast-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Restrained hover. The old state flipped the button to solid white and bounced it 10% — the
   same era as the gloss and the glow. A translucent control should stay translucent on hover and
   just gain a little presence; the scale is small enough to feel like feedback rather than a pop.
   The play button keeps its solid red because that one IS the primary action. */
.pcast-btn:hover {
    transform: scale(1.04);
    background: rgba(255, 255, 255, 0.17);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
}

.pcast-btn:active {
    transform: scale(0.96);
}

@media (prefers-reduced-motion: reduce) {
    .pcast-btn,
    .pcast-btn:hover,
    .pcast-btn:active {
        transform: none;
    }
}

.pcast-btn.play-main {
    background: var(--neon-live);
    color: #fff;
    width: 38px;
    height: 38px;
    border-color: var(--neon-live);
    box-shadow: 0 0 14px rgba(242, 17, 44, 0.55);
}

.pcast-btn.play-main:hover {
    background: #fff;
    color: var(--neon-live);
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.pcast-volume-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pcast-slider {
    width: 65px;
    accent-color: var(--neon-live);
    cursor: pointer;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.2);
}

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

.pcast-chip-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.pcast-chip-btn:hover {
    background: #fff;
    color: #151515;
    transform: scale(1.1);
}

.pcast-chip-btn.yt:hover {
    background: #ff0000;
    color: #fff;
    border-color: #ff0000;
}

.pcast-toggle-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.95rem;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease, transform 0.3s ease;
}

.pcast-toggle-btn:hover {
    color: #fff;
}

.pcast-toggle-btn #pcast-chevron {
    transition: transform 0.4s ease;
}

/* Extended Container with Dual Tab Drawer */
.podcast-frame-wrapper {
    /* Flex column so the body is constrained to the wrapper's height instead of sizing to its own
       content and overflowing it. Without this the body grew to its natural 515px inside a 471px
       wrapper and the load-more footer fell outside the clip — the original cut-off. */
    display: flex;
    flex-direction: column;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin 0.3s ease;
    border-radius: 14px;
    margin-top: 0;
    /* Same neutral material as the compact bar so the two read as one object — no sheen, no
       bevel here either. A step denser only because the drawer carries a scrolling list of small
       text and thumbnails, which needs more contrast than a single-line title does. */
    background: rgba(14, 14, 17, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px) saturate(118%) brightness(0.66);
    -webkit-backdrop-filter: blur(20px) saturate(118%) brightness(0.66);
    position: relative;
}

#apple-podcast-iframe {
    width: 100% !important;
    height: 380px !important;
    border: none;
    display: block;
}

.podcast-player.expanded .podcast-frame-wrapper {
    /* One cap for the whole drawer; the header, the scrolling list and the pinned load-more
       footer divide it with flexbox below. It used to be a hard 400px while the children were
       capped in dvh (55dvh body, 42dvh grid) — on a 812px phone those added up to ~437px, so the
       bottom 37px, which is exactly the load-more bar, was clipped by the wrapper's
       overflow:hidden. The `min()` keeps it from swallowing the screen on a tall phone while
       `100dvh - 190px` reserves room for the compact bar above it and the bottom inset. */
    max-height: min(58dvh, calc(100dvh - 190px), 520px);
    opacity: 1;
    margin-top: 10px;
    border-color: rgba(242, 17, 44, 0.5);
    box-shadow: 0 15px 50px rgba(242, 17, 44, 0.3);
}

.podcast-player.expanded #pcast-chevron {
    transform: rotate(180deg);
}

/* Extremely Compact Docked Square Mini Player Icon (56px x 56px) */
.podcast-player.docked {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    left: auto !important;
    right: 18px !important;
    bottom: 20px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.95), 0 0 20px rgba(242, 17, 44, 0.6) !important;
    transform: translateY(0) !important;
    border: 1px solid var(--neon-live) !important;
    background: #0a0a0a !important;
}

.podcast-player.docked .pcast-compact-bar {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.podcast-player.docked .pcast-thumb-wrap {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    border: none !important;
    opacity: 0.35;
}

.podcast-player.docked .pcast-info-wrap,
.podcast-player.docked .pcast-controls #pcast-prev-btn,
.podcast-player.docked .pcast-controls #pcast-next-btn,
.podcast-player.docked .pcast-volume-wrap,
.podcast-player.docked .pcast-actions .pcast-chip-btn:not(.side-dock-btn),
.podcast-player.docked .pcast-actions .pcast-toggle-btn {
    display: none !important; /* Hide title & extra controls completely */
}

.podcast-player.docked .pcast-controls {
    position: relative;
    z-index: 2;
}

.podcast-player.docked .pcast-btn.play-main {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.88rem !important;
    background: var(--neon-live) !important;
    box-shadow: 0 0 12px rgba(242, 17, 44, 0.8) !important;
}

.podcast-player.docked .pcast-actions {
    position: absolute !important;
    top: 3px;
    right: 3px;
    z-index: 3;
}

.podcast-player.docked .pcast-actions .side-dock-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.55rem !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.podcast-player.docked #pcast-dock-icon {
    transform: rotate(180deg);
}

/* Single Episode Browser Drawer Header */
.pcast-drawer-header {
    padding: 12px 16px;
    /* a faint lift off the drawer rather than its own slab of colour — an opaque header would cut
       a hard band across the glass */
    background: rgba(255, 255, 255, 0.032);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--neon-live);
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pcast-browser-body {
    display: flex;
    flex-direction: column;
    /* the wrapper above owns the cap now — a second one here is what let the two disagree.
       `flex: 1 1 auto` + `min-height: 0` makes this fill exactly the space the header leaves and
       shrink below its content, which is what keeps the footer inside the clip. */
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.pcast-drawer-header {
    flex: 0 0 auto;
}

.pcast-ep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 10px;
    padding: 14px;
    /* takes whatever height is left after the header and the pinned footer, and scrolls inside it
       — so "load more" can keep appending without ever pushing anything off the bottom */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* stops the page behind from taking over the scroll when the list hits its end */
    overscroll-behavior: contain;
}

.pcast-load-more-wrap {
    /* pinned footer: never shrinks, never scrolls away */
    flex: 0 0 auto;
    padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)) 14px;
    display: flex;
    justify-content: center;
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.pcast-load-more-btn {
    background: rgba(242, 17, 44, 0.12);
    border: 1px solid var(--neon-live);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.8px;
}

.pcast-load-more-btn:hover {
    background: var(--neon-live);
    color: #fff;
    box-shadow: 0 0 16px rgba(242, 17, 44, 0.6);
    transform: translateY(-1px);
}

.pcast-load-more-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
    transform: none;
    box-shadow: none;
}

.pcast-ep-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.pcast-ep-card:hover {
    border-color: var(--neon-live);
    background: rgba(242, 17, 44, 0.1);
    transform: translateY(-2px);
}

.pcast-ep-card.active {
    border-color: var(--neon-live);
    background: rgba(242, 17, 44, 0.2);
    box-shadow: 0 0 12px rgba(242, 17, 44, 0.3);
}

.pcast-ep-thumb {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

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

.pcast-ep-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcast-ep-sub {
    font-size: 0.65rem;
    color: var(--neon-live);
    font-weight: 800;
    margin-top: 2px;
}

/* Mobile Responsive Podcast Bar & Typography */
@media (max-width: 768px) {
    .podcast-player {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: 95%;
    }

    .pcast-compact-bar {
        padding: 5px 10px;
        gap: 8px;
    }

    .pcast-top-info {
        gap: 6px;
        margin-bottom: 2px;
    }

    .pcast-tag {
        font-size: 0.55rem;
        letter-spacing: 0.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 155px;
    }

    .pcast-time-display {
        font-size: 0.6rem;
        padding: 1px 6px;
        letter-spacing: 0.5px;
        flex-shrink: 0;
    }

    .pcast-marquee-track {
        font-size: 0.78rem;
    }

    .pcast-volume-wrap {
        display: none;
    }

    .pcast-actions .pcast-chip-btn:not(.side-dock-btn) {
        display: none;
    }

    .pcast-btn {
        width: 30px;
        height: 30px;
        font-size: 0.75rem;
    }

    .pcast-btn.play-main {
        width: 34px;
        height: 34px;
    }

    /* Five buttons now share this row. Tightening the gap and trimming the scrub pair keeps the
       transport from eating the space the title needs. */
    .pcast-controls {
        gap: 5px;
    }

    .pcast-seek-btn {
        width: 28px;
        height: 28px;
    }

    .pcast-seek-btn i {
        font-size: 1.02rem;
    }

    .pcast-seek-num {
        font-size: 0.53rem;
    }
}

@media (max-width: 480px) {
    .pcast-tag {
        max-width: 115px;
        font-size: 0.52rem;
    }

    .pcast-time-display {
        font-size: 0.58rem;
        padding: 1px 4px;
    }

}

/* Below ~540px five transport buttons squeeze the title block down to where the tag and the clock
   almost collide (measured: 133.7px of info for 127.8px of content at 481px). Episode stepping is
   what gives way — prev/next are still one tap away in the episode browser drawer, whereas ±5s
   scrubbing has no other home. */
@media (max-width: 540px) {
    #pcast-prev-btn,
    #pcast-next-btn {
        display: none;
    }

    .pcast-controls {
        gap: 6px;
    }
}

/* ====== INSTAGRAM STYLE ALL GALLERIES FEED ====== */
.content-section > *:last-child {
    margin-bottom: 140px !important;
}

.insta-feed-section {
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 30px;
    margin-bottom: 140px !important;
}

.insta-feed-header {
    margin-bottom: 20px;
    text-align: left;
}

.insta-feed-sub {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    margin-top: 4px;
    display: block;
}

.insta-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.insta-feed-item {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    contain: content;
    content-visibility: auto;
    contain-intrinsic-size: 160px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.insta-feed-item:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: var(--neon-party);
    box-shadow: 0 10px 30px rgba(235, 94, 40, 0.35);
}

.insta-feed-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.insta-feed-item:hover .insta-feed-media {
    transform: scale(1.08);
}

.insta-feed-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    /* Was rgba(0,0,0,0.75) + backdrop-filter: blur(8px). Measured 2026-07-27: this badge renders
       ~30 times in the Instagram feed, and each blur forced its own compositing layer — by far the
       heaviest GPU item on the page, which matters on the low-end phones this site targets.
       The blur is dropped and the fill raised 0.75 → 0.82 to compensate: the small amount of
       backdrop that does show through is now sharp rather than blurred, and the extra opacity
       keeps the icon just as legible over a busy photo. */
    background: rgba(0, 0, 0, 0.82);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 2;
}

.insta-feed-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 3;
}

.insta-feed-item:hover .insta-feed-overlay {
    opacity: 1;
}

.insta-feed-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.insta-feed-date {
    font-size: 0.65rem;
    color: var(--neon-party);
    font-weight: 800;
    margin-top: 2px;
}

/* ====== GALLERY LIGHTBOX MODAL (ULTRA FAST LOW-END GPU OPTIMIZED) ====== */
.gallery-lightbox-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(5, 5, 5, 0.96);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.gallery-lightbox-modal.active {
    display: flex;
    opacity: 1;
}

.lightbox-close-btn {
    position: absolute;
    top: 20px;
    right: 25px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
}

.lightbox-close-btn:hover {
    background: #fff;
    color: #111;
    transform: scale(1.1);
}

.lightbox-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.lightbox-nav-btn:hover {
    background: var(--neon-party);
    color: #fff;
    border-color: var(--neon-party);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(235, 94, 40, 0.6);
}

.lightbox-prev-btn {
    left: 20px;
}

.lightbox-next-btn {
    right: 20px;
}

.lightbox-content {
    position: relative;
    max-width: 920px;
    width: 100%;
    max-height: 90vh;
    background: #0c0c0c;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.95), 0 0 40px rgba(235, 94, 40, 0.25);
}

.lightbox-media-container {
    flex: 1;
    min-height: 320px;
    max-height: 70vh;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pan-y;
    position: relative;
}

.lightbox-media-container img,
.lightbox-media-container video {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    display: block;
    will-change: transform;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-media-container.dragging img,
.lightbox-media-container.dragging video {
    transition: none !important;
}

.lightbox-media-container.snap-anim img,
.lightbox-media-container.snap-anim video {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lightbox-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: rgba(18, 18, 18, 0.98);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lightbox-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
}

.lightbox-date {
    font-size: 0.75rem;
    color: var(--neon-party);
    font-weight: 700;
    margin-top: 2px;
}

.lightbox-download-btn {
    background: var(--neon-party);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 10px 22px;
    border-radius: 30px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 0 16px rgba(235, 94, 40, 0.5);
}

.lightbox-download-btn:hover {
    background: #fff;
    color: var(--neon-party);
    transform: scale(1.05);
    box-shadow: 0 0 24px rgba(255, 255, 255, 0.8);
}

@media (max-width: 768px) {
    .insta-feed-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 8px;
    }

    .lightbox-footer {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .lightbox-download-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ====== HEADER SUB-TAB NAVIGATION ====== */
.header-nav-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.nav-tab-link {
    font-size: 0.75rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.75);
    letter-spacing: 1px;
    padding: 6px 14px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    white-space: nowrap;
}

.nav-tab-link:hover {
    color: #fff;
    background: rgba(242, 17, 44, 0.15);
    border-color: var(--neon-live);
    box-shadow: 0 0 12px rgba(242, 17, 44, 0.3);
}

@media (max-width: 1100px) and (min-width: 769px) {
    .header-nav-tabs {
        gap: 6px !important;
    }

    .nav-tab-link {
        font-size: 0.68rem !important;
        padding: 5px 10px !important;
        letter-spacing: 0.5px !important;
    }
}

/* ====== ABOUT MODAL 4-SUB TABS ====== */
.pif-about-tab-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
    padding-bottom: 14px;
    width: 100%;
    box-sizing: border-box;
}

.pif-about-tab-bar::-webkit-scrollbar {
    display: none;
}

.pif-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 800;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex: 0 1 auto;
    text-align: center;
}

.pif-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.pif-tab-btn.active {
    background: var(--neon-live);
    color: #fff;
    border-color: var(--neon-live);
    box-shadow: 0 0 14px rgba(242, 17, 44, 0.5);
}

@media (max-width: 600px) {
    .pif-about-tab-bar {
        gap: 8px;
    }

    .pif-tab-btn {
        font-size: 0.72rem;
        padding: 7px 10px;
        flex: 1 1 calc(50% - 8px);
        max-width: calc(50% - 8px);
        box-sizing: border-box;
    }
}

.pif-tab-content {
    display: none;
}

.pif-tab-content.active {
    display: block;
    animation: fadeInTab 0.3s ease;
}

@keyframes fadeInTab {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ABOUT INTRO */
.pif-about-intro {
    text-align: center;
    margin-bottom: 24px;
}

.pif-about-logo-2line {
    width: 240px;
    max-width: 85%;
    height: auto;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 12px rgba(242, 17, 44, 0.4));
}

.pif-about-tagline {
    font-size: 0.82rem;
    color: var(--neon-live);
    font-weight: 700;
    margin-top: 4px;
}

/* BRAND BIOGRAPHY CARD */
.pif-bio-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 24px;
}

.bio-title {
    font-size: 0.85rem;
    font-weight: 900;
    color: var(--neon-live);
    letter-spacing: 1.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bio-text {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 10px;
}

.bio-subtext {
    font-size: 0.82rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.65);
}

/* CREW & TEAM SECTION */
.crew-section-header {
    margin-bottom: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 20px;
}

.crew-section-header h3 {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.crew-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-top: 2px;
}

/* ROSTER ARTISTS GRID */
.roster-header {
    text-align: center;
    margin-bottom: 20px;
}

.roster-header h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.roster-header p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.roster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    max-height: 480px;
    overflow-y: auto;
    padding: 12px 10px 16px 10px;
}

.roster-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: all 0.2s ease;
}

.roster-card:hover {
    border-color: var(--neon-live);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(242, 17, 44, 0.25);
}

.roster-thumb {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 2px solid var(--neon-live);
}

.roster-name {
    font-size: 0.9rem;
    font-weight: 800;
    color: #fff;
}

.roster-role {
    font-size: 0.72rem;
    color: var(--neon-live);
    font-weight: 700;
    margin-top: 2px;
}

.roster-links {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.roster-chip {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    transition: color 0.2s ease;
}

.roster-chip:hover {
    color: var(--neon-live);
}

/* DEMO SUBMISSION CARD */
.demo-sub-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(242, 17, 44, 0.4);
    border-radius: 16px;
    padding: 35px 24px;
    text-align: center;
    margin: 10px 0;
}

.demo-icon-wrap {
    font-size: 2.5rem;
    color: var(--neon-live);
    margin-bottom: 12px;
}

.demo-sub-card h2 {
    font-size: 1.3rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: 1.5px;
}

.demo-badge {
    display: inline-block;
    background: rgba(242, 17, 44, 0.15);
    color: var(--neon-live);
    border: 1px solid var(--neon-live);
    font-size: 0.7rem;
    font-weight: 800;
    padding: 4px 14px;
    border-radius: 20px;
    margin: 10px 0 16px 0;
    letter-spacing: 1.2px;
}

.demo-sub-card p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.6;
    max-width: 500px;
    margin: 0 auto 20px auto;
}

.demo-features {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.demo-features span {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
}

.demo-features i {
    color: var(--neon-live);
}

/* CONTACT CARD & ANTI-SPAM FORM */
.contact-card {
    padding: 10px 0;
}

.contact-header {
    text-align: center;
    margin-bottom: 20px;
}

.contact-header h2 {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}

.contact-header p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.contact-action-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.method-icon {
    width: 42px;
    height: 42px;
    background: rgba(242, 17, 44, 0.15);
    border: 1px solid var(--neon-live);
    color: var(--neon-live);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.method-info {
    flex: 1;
    min-width: 180px;
}

.method-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: #fff;
    display: block;
}

.method-email-obfuscated {
    font-size: 0.75rem;
    color: var(--neon-live);
    font-family: monospace;
    font-weight: 700;
}

.contact-direct-btn {
    background: var(--neon-live);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 0 12px rgba(242, 17, 44, 0.4);
}

.contact-direct-btn:hover {
    background: #fff;
    color: var(--neon-live);
    transform: scale(1.04);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-form .form-row {
    display: flex;
    gap: 12px;
}

.contact-input,
.contact-textarea {
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 10px 14px;
    color: #fff;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s ease;
}

.contact-input:focus,
.contact-textarea:focus {
    border-color: var(--neon-live);
    box-shadow: 0 0 10px rgba(242, 17, 44, 0.3);
}

.contact-submit-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contact-submit-btn:hover {
    background: var(--neon-live);
    border-color: var(--neon-live);
    box-shadow: 0 0 16px rgba(242, 17, 44, 0.5);
}

/* ====== HEADER RIGHT ZONE LAYOUT (PREVENT OVERLAPPING) ====== */
.header-right-zone {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links-header {
    display: flex;
    gap: 14px;
    align-items: center;
}

/* ====== ASOT STYLE HAMBURGER & FLOATING RIGHT POPUP PANEL ====== */
.mobile-hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 19px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100001;
    padding: 0;
    margin-left: 6px;
}

.mobile-hamburger-btn span {
    width: 100%;
    height: 2.5px;
    background: #fff;
    border-radius: 4px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.mobile-hamburger-btn:hover span {
    /* colour change only, no glow — matches the player bar's restraint: the red marks the
       interactive state, it doesn't need a halo to prove it */
    background: var(--neon-live);
}

.mobile-hamburger-btn.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    background: var(--neon-live);
}

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

.mobile-hamburger-btn.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    background: var(--neon-live);
}

/* FLOATING RIGHT-SIDE ASOT POPUP DRAWER
   Same glass material as the podcast player (see .pcast-compact-bar / .podcast-frame-wrapper):
   near-opaque 0.96 slab + a red glow ring replaced with a neutral translucent tint, restrained
   hairline border, and one soft ambient shadow — no colour halo. Density matches the podcast
   drawer rather than the leaner compact bar, since this panel is also mostly text (nav links)
   that benefits from the same higher contrast floor. */
.mobile-nav-overlay {
    position: fixed;
    top: 75px;
    right: 25px;
    width: 340px;
    max-width: 92vw;
    max-height: 82vh;
    z-index: 99999;
    background: rgba(14, 14, 17, 0.55);
    backdrop-filter: blur(20px) saturate(118%) brightness(0.66);
    -webkit-backdrop-filter: blur(20px) saturate(118%) brightness(0.66);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    padding: 22px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px) scale(0.96);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden; /* border-radius 내부 클리핑 보장 */
    box-sizing: border-box;
}

/* Without backdrop-filter, fall back to a mostly-opaque panel rather than leaving nav text
   floating over raw page content — same reasoning as the podcast player's fallback. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mobile-nav-overlay {
        background: rgba(10, 10, 10, 0.96);
    }
}

.mobile-nav-overlay.active {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-nav-logo {
    width: 42px;
    height: 42px;
}

.mobile-nav-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: 25px 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #f2112c rgba(255, 255, 255, 0.04);
}

/* Webkit (Chrome, Safari, iOS) */
.mobile-nav-body::-webkit-scrollbar {
    width: 4px;
}

.mobile-nav-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.mobile-nav-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f2112c 0%, #ff4d6d 100%);
    border-radius: 10px;
}

.mobile-nav-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff2a45 0%, #ff6b85 100%);
}

.mobile-nav-group {
    display: flex;
    flex-direction: column;
}

.mobile-group-label {
    font-size: 0.68rem;
    font-weight: 900;
    color: var(--neon-live);
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.mobile-nav-item {
    font-size: 1.15rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.mobile-nav-item i {
    font-size: 1.1rem;
    color: var(--neon-live);
    width: 24px;
    text-align: center;
}

.mobile-nav-item:hover,
.mobile-nav-item:active {
    color: var(--neon-live);
    padding-left: 8px;
}

.mobile-nav-footer {
    padding-top: 25px;
    padding-bottom: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.mobile-social-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 18px;
}

.mobile-social-row a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.3rem;
    transition: color 0.2s ease;
}

.mobile-social-row a:hover {
    color: var(--neon-live);
}

.mobile-nav-footer p {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 1px;
    margin: 4px 0;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }

    .mobile-hamburger-btn {
        display: flex;
    }

    /* 모바일: top~bottom 제약으로 플레이어바 위까지만, 테두리 잘림 방지 */
    .mobile-nav-overlay {
        top: 68px;
        bottom: calc(100px + env(safe-area-inset-bottom, 0px));
        right: 12px;
        width: calc(100% - 24px);
        max-width: 390px;
        max-height: none; /* top+bottom이 높이 결정 */
        overflow: hidden;
        box-sizing: border-box;
    }

    /* 내부 스크롤 영역이 남은 공간 다 채우도록 */
    .mobile-nav-overlay .mobile-nav-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        min-height: 0; /* flexbox에서 flex:1 overflow 올바르게 동작 */
    }

    /* 모바일: 드로어 내 하단 푸터 — 슬림 & 초미니멀 설계로 본문 스크롤 영역 극대화 */
    .mobile-nav-footer {
        padding-top: 8px !important;
        padding-bottom: 6px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
        flex-shrink: 0 !important; /* 축소되지 않고 내용만큼만 최소 차지 */
    }

    .mobile-social-row {
        gap: 16px !important;
        margin-bottom: 4px !important;
    }

    .mobile-social-row a {
        font-size: 0.95rem !important;
    }

    .mobile-nav-footer p {
        font-size: 0.55rem !important;
        letter-spacing: 0.5px !important;
        margin: 1px 0 !important;
        line-height: 1.2 !important;
        opacity: 0.6;
    }

    .mobile-nav-footer .mobile-footer-credit {
        font-size: 0.52rem !important;
        margin-top: 0 !important;
        opacity: 0.5;
    }
}

/* ====== PIF DEV MONITOR HUD (SECRET LIVE NETWORK & MEDIA INSPECTOR) ====== */
#pif-dev-hud {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 999999;
    width: 320px;
    background: rgba(10, 12, 18, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(0, 242, 254, 0.4);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 242, 254, 0.25);
    border-radius: 14px;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.78rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

#pif-dev-hud.collapsed {
    width: 180px;
}

#pif-dev-hud.collapsed .pif-hud-body {
    display: none;
}

.pif-hud-header {
    background: linear-gradient(90deg, rgba(0, 242, 254, 0.2), rgba(79, 172, 254, 0.1));
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 242, 254, 0.25);
    cursor: pointer;
}

.pif-hud-title {
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #00f2fe;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pif-hud-controls {
    display: flex;
    gap: 6px;
}

.pif-hud-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ccc;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.7rem;
    transition: all 0.2s;
}

.pif-hud-btn:hover {
    background: rgba(0, 242, 254, 0.4);
    color: #fff;
}

.pif-hud-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 440px;
    overflow-y: auto;
}

.pif-hud-stat-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
}

.pif-hud-stat-label {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pif-hud-stat-value {
    font-size: 1.15rem;
    font-weight: 900;
    color: #fff;
    font-family: 'Courier New', monospace;
}

.pif-hud-savings-badge {
    display: inline-block;
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 800;
}

.pif-hud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.pif-hud-mini-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 8px;
}

.pif-hud-mini-val {
    font-size: 0.95rem;
    font-weight: 800;
    color: #00f2fe;
    font-family: 'Courier New', monospace;
}

.pif-hud-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0, 0, 0, 0.35);
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.72rem;
    font-weight: 700;
}

.pif-media-inspect-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 99999;
    background: rgba(10, 12, 18, 0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 242, 254, 0.6);
    color: #00f2fe;
    padding: 3px 7px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    font-weight: 800;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* ====== MERCHANDISE & STORE STYLING ====== */
.merch-hero-banner {
    text-align: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(242, 17, 44, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 16px;
    padding: 24px 20px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.merch-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.merch-hero-banner h2 {
    font-size: 1.4rem;
    font-weight: 900;
    letter-spacing: 2px;
    color: #fff;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.merch-hero-sub-en {
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2px;
}

.merch-hero-sub-kr {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 16px;
}

.merch-notice-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.notice-tag {
    font-size: 0.72rem;
    font-weight: 800;
    color: #f59e0b;
    letter-spacing: 1px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.notice-desc-kr {
    font-size: 0.82rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 6px 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.notice-desc-en {
    font-size: 0.72rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* Merch Cards Grid */
.merch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    width: 100%;
}

.merch-card {
    background: rgba(20, 20, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease;
}

.merch-card:hover {
    transform: translateY(-4px);
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 20px rgba(245, 158, 11, 0.12);
}

.merch-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(245, 158, 11, 0.9);
    color: #000;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.merch-img-box {
    width: 100%;
    height: 170px;
    background: rgba(10, 10, 10, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.merch-icon-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.merch-icon-svg {
    height: 44px;
    opacity: 0.85;
    filter: drop-shadow(0 0 10px rgba(245, 158, 11, 0.4));
    transition: transform 0.3s ease;
}

.merch-card:hover .merch-icon-svg {
    transform: scale(1.1) rotate(5deg);
    opacity: 1;
}

.merch-cat-icon {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.4);
}

.merch-info {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.merch-category {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--neon-party, #f59e0b);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: block;
}

.merch-title {
    font-size: 1.02rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.25;
    margin: 0 0 2px 0;
    letter-spacing: 0.5px;
}

.merch-title-kr {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 12px;
    display: block;
}

.merch-desc {
    font-size: 0.78rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 16px 0;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.04);
    flex: 1;
}

.desc-en {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    margin-top: 4px;
    font-style: italic;
}

.merch-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 14px;
}

.price-box {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
}

.merch-price {
    font-size: 1.15rem;
    font-weight: 900;
    color: #f59e0b;
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.merch-status-pill {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.merch-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(242, 17, 44, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: #f59e0b;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 11px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.merch-buy-btn:hover {
    background: #f59e0b;
    color: #000;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.5);
    border-color: #f59e0b;
}

/* ==========================================================================
   ULTRA-FLUID APPLE IOS HARDWARE GPU ACCELERATION FOR VIDEO & CARDS
   ========================================================================== */
.gig-card,
.gateway-card,
.media-preview,
.gig-card video,
.gateway-card video,
.media-preview video {
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.gig-card video,
.gateway-card video,
.media-preview video {
    object-fit: cover;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

/* PREVENT HOVER FLICKERING ON CARD INNER ELEMENTS */
.gateway-card > *:not(.gateway-bg),
.gig-card > *:not(.gig-card-media) {
    pointer-events: none;
}
.gateway-card,
.gig-card {
    pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   SIGNATURE COLOUR LOCK — Samsung Internet "어둡게 보기"
   Samsung runs a forced-dark pass AFTER the cascade, so `color-scheme: only dark` alone does not
   always stop it: it recomputes `color` and `background-color` and washes the PIF red out.
   That pass does NOT recompute `-webkit-text-fill-color`, and it skips `background-image`, so we
   restate the identical colour through those two properties to pin it.
   Rendering is unchanged everywhere else — each gradient is a single flat colour.
   OPAQUE fills only: layering a translucent red over the same background-color would compound
   the alpha and darken the tint, so rgba()/shadow-var backgrounds are intentionally left alone.
   Regenerate if the signature colours change.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* text */
#live h2 { -webkit-text-fill-color: var(--neon-live); }
.show-title { -webkit-text-fill-color: var(--neon-live); }
.pif-tag { -webkit-text-fill-color: var(--neon-live); }
.pif-schedule-tag.regular { -webkit-text-fill-color: var(--neon-live); }
.date-main-text i { -webkit-text-fill-color: var(--neon-live); }
.day-highlight { -webkit-text-fill-color: var(--neon-live); }
#countdown { -webkit-text-fill-color: var(--neon-live); }
.world-row.highlight { -webkit-text-fill-color: var(--neon-live); }
.world-row.highlight .w-time { -webkit-text-fill-color: var(--neon-live); }
.pcast-tag { -webkit-text-fill-color: var(--neon-live); }
.pcast-btn.play-main:hover { -webkit-text-fill-color: var(--neon-live); }
.pcast-drawer-header { -webkit-text-fill-color: var(--neon-live); }
.pcast-ep-sub { -webkit-text-fill-color: var(--neon-live); }
.pif-about-tagline { -webkit-text-fill-color: var(--neon-live); }
.bio-title { -webkit-text-fill-color: var(--neon-live); }
.roster-role { -webkit-text-fill-color: var(--neon-live); }
.roster-chip:hover { -webkit-text-fill-color: var(--neon-live); }
.demo-icon-wrap { -webkit-text-fill-color: var(--neon-live); }
.demo-badge { -webkit-text-fill-color: var(--neon-live); }
.demo-features i { -webkit-text-fill-color: var(--neon-live); }
.method-icon { -webkit-text-fill-color: var(--neon-live); }
.method-email-obfuscated { -webkit-text-fill-color: var(--neon-live); }
.contact-direct-btn:hover { -webkit-text-fill-color: var(--neon-live); }
.mobile-group-label { -webkit-text-fill-color: var(--neon-live); }
.mobile-nav-item i { -webkit-text-fill-color: var(--neon-live); }
.mobile-nav-item:hover, .mobile-nav-item:active { -webkit-text-fill-color: var(--neon-live); }
.mobile-social-row a:hover { -webkit-text-fill-color: var(--neon-live); }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   PART 1b — THE TEXT RULES ABOVE DO NOT WORK. MEASURED 2026-07-26.

   On device (Samsung Internet 30.0 / Chrome 143) `-webkit-text-fill-color` renders IDENTICALLY to
   plain `color`: both wash out to pale pink. The diagnostic page put the two side by side and they
   matched exactly, which is why the mobile menu's icons and labels stayed pink through several
   rounds of "fixes" — the entire list above was a no-op the whole time. It is left in place only
   because it is harmless (the value equals the `color` it sits beside) and may still do something
   on older Samsung builds; nothing new should be added to it.

   What forced dark actually does: it LIGHTENS dark text (red #f2112c → pink) and DARKENS light
   backgrounds. Red *backgrounds* are dark enough to pass untouched — which is the escape route.
   `background-clip: text` paints the glyphs from a background layer, so the text inherits the
   background pipeline's immunity. Measured: the only text technique that survives.

   Applied only to text that owns NO background of its own. `background-clip: text` clips the
   element's whole background to the glyphs, so running it on a chip/badge/button would delete that
   chip's fill. Those are listed as exclusions further down.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

html[data-sigfix="1"] #live h2,
html[data-sigfix="1"] .show-title,
html[data-sigfix="1"] .date-main-text i,
html[data-sigfix="1"] .day-highlight,
html[data-sigfix="1"] .world-row.highlight,
html[data-sigfix="1"] .world-row.highlight .w-time,
html[data-sigfix="1"] .pcast-tag,
html[data-sigfix="1"] .pif-about-tagline,
html[data-sigfix="1"] .bio-title,
html[data-sigfix="1"] .roster-role,
html[data-sigfix="1"] .roster-chip:hover,
html[data-sigfix="1"] .demo-features i,
html[data-sigfix="1"] .method-email-obfuscated,
html[data-sigfix="1"] .mobile-group-label,
html[data-sigfix="1"] .mobile-nav-item i,
html[data-sigfix="1"] .mobile-nav-item:hover,
html[data-sigfix="1"] .mobile-nav-item:active,
html[data-sigfix="1"] .mobile-social-row a:hover {
    background-image: linear-gradient(var(--neon-pif-red), var(--neon-pif-red));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* `.pcast-drawer-header` also carries a 3.2% white wash, which the clip would eat. The wash is
   re-delivered as a spread inset shadow — shadows are painted outside the background pipeline the
   clip consumes, so both survive together. */
html[data-sigfix="1"] .pcast-drawer-header {
    background-image: linear-gradient(var(--neon-pif-red), var(--neon-pif-red));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.032);
}

/* These two hover states flip to a WHITE fill with red text. Forced dark darkens white, so on
   device that lands as pink text on a grey pill — worse than not flipping at all. Under Samsung
   only, keep the red fill and use white text, which forced dark leaves alone because it is already
   light. Other browsers keep the original white-flip untouched. */
html[data-sigfix="1"] .pcast-btn.play-main:hover,
html[data-sigfix="1"] .contact-direct-btn:hover {
    background-color: transparent;
    background-image: linear-gradient(var(--neon-pif-red), var(--neon-pif-red));
    color: #fff;
    -webkit-text-fill-color: #fff;
}

/* DELIBERATELY NOT CONVERTED — each would break if clipped, verified individually:
     #countdown          — script.js injects <span style="color:…" + a blink keyframe> for the ON
                           AIR state; the animated span forms its own painting group and would
                           inherit `-webkit-text-fill-color: transparent`, i.e. go invisible while
                           actually live. Worst possible moment to fail.
     .demo-icon-wrap     — its only glyph is a permanently `fa-spin` rotated child; a clipped
                           gradient is painted in the parent's static space and cannot follow it.
     .pcast-ep-sub       — script.js injects `style="color:#fff"` on this label; the clip would
                           override that inline white and repaint a deliberately white string red.
     .pif-tag, .pif-schedule-tag.regular, .demo-badge, .method-icon
                         — real chips/pills whose translucent red fill and red ring are load-bearing
                           (already delivered as padding-box/border-box gradients by PART 4, which
                           DOES survive). Their text stays pink under forced dark; on a red chip at
                           these small sizes that is far less conspicuous than pink on near-black.
                           An inset-box-shadow swap could free the background for a text clip, but
                           that is unverified on device — do not ship it without measuring first. */

/* opaque fills */
#global-section-close-btn.theme-live:hover { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.live-dot { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.plat-chip:hover { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.video-badge { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.archive-scroll::-webkit-scrollbar-thumb:hover { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.pcast-btn.play-main { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.podcast-player.docked .pcast-btn.play-main { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.pcast-load-more-btn:hover { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.pif-tab-btn.active { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.contact-direct-btn { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.contact-submit-btn:hover { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.mobile-hamburger-btn:hover span { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.mobile-hamburger-btn.active span:nth-child(1) { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }
.mobile-hamburger-btn.active span:nth-child(3) { background-image: linear-gradient(var(--neon-live), var(--neon-live)); }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   SIGNATURE COLOUR LOCK — PART 2: IMAGES (Samsung Internet only)

   The block above pins TEXT (`-webkit-text-fill-color`) and BACKGROUNDS (flat `linear-gradient`).
   Neither reaches an `<img>`, which is why the red logos still washed out to pale pink in Samsung's
   "어둡게 보기" while everything else held — Samsung's forced-dark pass re-tints image PIXELS.

   Fix: stop the colour coming from pixels. Every PIF logo is a single flat #F2112C SVG with no
   gradient and no raster (verified across all 9 files), so the shape can be carried by a `mask`
   while the colour is painted by the same flat `linear-gradient` that is already proven immune.
   `content:` swaps the element's own bitmap for a 1×1 transparent GIF so no image pixel is painted
   at all; `aspect-ratio` (taken from each SVG's viewBox) replaces the intrinsic ratio that the
   swap discards, so the layout box is unchanged.

   Gated on `html[data-sigfix="1"]` (set by a UA check in index.php's <head>) because the repaint
   costs the `drop-shadow` glow — a filter is applied before the mask, so a glow cast by the
   gradient RECTANGLE gets clipped away to nothing. Correct colour beats the glow under forced
   dark; every other browser renders these logos correctly today and is left completely alone.

   On-device A/B without a rebuild:  ?sigfix=1  forces on,  ?sigfix=0  forces off.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* Shared: stop the element painting its own bitmap. `content:` swaps the <img>'s raster for a
   1×1 transparent GIF, so nothing goes through the image pipeline Samsung re-tints. The colour is
   then supplied by CSS below — either a flat gradient through a mask (single-colour art) or the
   SVG itself as a background (multi-colour art). */
html[data-sigfix="1"] .logo img,
html[data-sigfix="1"] .mobile-nav-logo,
html[data-sigfix="1"] .merch-icon-svg,
html[data-sigfix="1"] .gateway-logo,
html[data-sigfix="1"] .show-logo,
html[data-sigfix="1"] .pif-about-logo-2line {
    content: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    /* a filter is applied before the mask, so a glow cast by the gradient rectangle is clipped
       off to nothing — drop it rather than pay for something that cannot be seen */
    filter: none;
}

/* ── Single-colour art: flat gradient + SVG as mask ──────────────────────────────────────────
   These files are pure #F2112C with no second colour, so a mask loses nothing and the colour
   comes from the gradient, which Samsung's pass does not recompute. */
html[data-sigfix="1"] .gateway-logo[src*="PIF_Music"],
html[data-sigfix="1"] .gateway-logo[src*="PIF_Live"],
html[data-sigfix="1"] .pif-about-logo-2line,
html[data-sigfix="1"] .show-logo {
    background-image: linear-gradient(var(--neon-pif-red), var(--neon-pif-red));
}

html[data-sigfix="1"] .gateway-logo[src*="PIF_Music"],
html[data-sigfix="1"] .pif-about-logo-2line {
    -webkit-mask-image: url("../images/pif-logos/PIF_Music/PIF_Music.svg");
            mask-image: url("../images/pif-logos/PIF_Music/PIF_Music.svg");
}
html[data-sigfix="1"] .gateway-logo[src*="PIF_Live"] {
    -webkit-mask-image: url("../images/pif-logos/PIF_Live/PIF_Live.svg");
            mask-image: url("../images/pif-logos/PIF_Live/PIF_Live.svg");
}
html[data-sigfix="1"] .show-logo {
    -webkit-mask-image: url("../images/pif-logos/PIF_Live/PIF_1LINE_Live.svg");
            mask-image: url("../images/pif-logos/PIF_Live/PIF_1LINE_Live.svg");
    aspect-ratio: 4026.93 / 260;
}
html[data-sigfix="1"] .gateway-logo,
html[data-sigfix="1"] .pif-about-logo-2line {
    aspect-ratio: 1892.87 / 665.16;
}

/* ── Multi-colour art: TWO STACKED MASK LAYERS ───────────────────────────────────────────────
   MEASURED ON DEVICE 2026-07-26 (Samsung Internet 30.0 / Chrome 143), via darkmode-test.html.
   That test settled what four rounds of guessing could not:

     survives  →  every CSS colour property tested: color, background-color, border-color,
                  box-shadow, outline-color, accent-color, and mask+gradient on SVG
     REPAINTED →  <img src=svg>, background-image:url(svg), and inline <svg fill="…">

   So the ONLY thing Samsung re-tints on this site is artwork delivered as image pixels, and the
   only technique that survives for artwork is mask + flat gradient (the colour then comes from
   CSS, and the SVG contributes shape/alpha only).

   The previous attempt here used `background-image: url(svg)` for the two-colour art. The test
   proves that FAILS — it fixed the earlier "뭉개짐" (the icon collapsing to a plain red square)
   but never stopped the wash-out, which is why the top-left icon still looked wrong.

   A single mask can only carry one colour, so the two-colour icon is rebuilt as two registered
   layers: the tile (red) painted by the element itself, and the "PIF" letterforms (white) painted
   by a pseudo-element on its PARENT — pseudo-elements do not render on a replaced <img>, so they
   have to hang off the container. Both masks share PIF_Icon.svg's 100×100 viewBox, so they line
   up exactly at any size. Split shapes: PIF_Icon_square.svg + PIF_Icon_letters.svg. */

html[data-sigfix="1"] .logo img,
html[data-sigfix="1"] .mobile-nav-logo,
html[data-sigfix="1"] .merch-icon-svg {
    background-image: linear-gradient(var(--neon-pif-red), var(--neon-pif-red));
    -webkit-mask-image: url("../images/pif-logos/PIF_Icon_square.svg");
            mask-image: url("../images/pif-logos/PIF_Icon_square.svg");
    aspect-ratio: 1 / 1;
}

/* letter layer — white, registered on top of the tile above */
html[data-sigfix="1"] .logo,
html[data-sigfix="1"] .mobile-nav-header,
html[data-sigfix="1"] .merch-icon-placeholder {
    position: relative;
}

/* `.logo` is an inline <a>, so its line box is taller than the 20/26px icon inside it (measured
   27.9px vs 20px) — `inset: 0` would then stretch the letter layer over that extra descender space
   and slide it out of register with the tile. inline-flex makes the anchor shrink-wrap the icon
   exactly, at every breakpoint, without touching the header's own flex layout. */
html[data-sigfix="1"] .logo {
    display: inline-flex;
    align-items: center;
}

html[data-sigfix="1"] .logo::after,
html[data-sigfix="1"] .mobile-nav-header::after,
html[data-sigfix="1"] .merch-icon-placeholder::after {
    content: '';
    position: absolute;
    pointer-events: none;
    background-image: linear-gradient(#fff, #fff);
    -webkit-mask: url("../images/pif-logos/PIF_Icon_letters.svg") center / contain no-repeat;
            mask: url("../images/pif-logos/PIF_Icon_letters.svg") center / contain no-repeat;
}

/* `.logo` is an <a> wrapping nothing but the icon, so it shrink-wraps and inset:0 registers
   exactly — no hardcoded size needed, and it stays correct at the 26px/20px breakpoints.
   The opacity mirrors `.logo img`'s own 0.7 (and its 1 on hover) — without this the letter layer
   would sit at full strength over a dimmed tile and the two halves of one logo would disagree. */
html[data-sigfix="1"] .logo::after {
    inset: 0;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

html[data-sigfix="1"] .logo:hover::after {
    opacity: 1;
}

/* These two containers hold siblings besides the icon, so the overlay is pinned to the icon's own
   box instead of the container's: the nav logo is the first flex item on the left (42×42), and the
   merch icon is the first item in a centred flex column (44×44, with a <i> below it). */
html[data-sigfix="1"] .mobile-nav-header::after {
    top: 0;
    left: 0;
    width: 42px;
    height: 42px;
}

html[data-sigfix="1"] .merch-icon-placeholder::after {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    opacity: 0.85; /* matches .merch-icon-svg's own opacity so both layers stay in step */
}

/* PIF_Party.svg also carries white sub-text, but splitting it would mean regenerating a 6 KB
   multi-path wordmark. Masking it whole keeps the signature red correct — the trade is that the
   small white sub-text renders red too. Correct colour on the main wordmark is worth more than the
   sub-text's tint here; revisit with a split file if it reads badly on device. */
html[data-sigfix="1"] .gateway-logo[src*="PIF_Party"] {
    background-image: linear-gradient(var(--neon-pif-red), var(--neon-pif-red));
    -webkit-mask-image: url("../images/pif-logos/PIF_Party/PIF_Party.svg");
            mask-image: url("../images/pif-logos/PIF_Party/PIF_Party.svg");
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   SIGNATURE COLOUR LOCK — PART 3: TRANSLUCENT FILLS AND BORDERS
   (kept where it was; PART 4 below is the sitewide sweep for the same pattern)

   Part 1 pinned opaque fills and text; it deliberately skipped `rgba()` fills, because layering a
   translucent gradient on top of the same `background-color` compounds the alpha and darkens the
   tint. It also left `border-color` alone entirely. Those two gaps are most of the red in the PIF
   LIVE tab — episode cards, the load-more button and the active tab all colour themselves with a
   translucent red fill and a red border — which is why that tab still shifted under forced dark
   after the rest of the site held.

   Both are fixed with one declaration per element: paint the fill into the *padding box* and the
   border colour into the *border box*, and set the real `background-color`/`border-color` to
   transparent so nothing compounds. Everything visible is then a `background-image`, which the
   forced-dark pass does not recompute — and unlike `border-image`, this technique still follows
   `border-radius`.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

html[data-sigfix="1"] .pcast-ep-card:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.10), rgba(242, 17, 44, 0.10)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

html[data-sigfix="1"] .pcast-ep-card.active {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.20), rgba(242, 17, 44, 0.20)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

html[data-sigfix="1"] .pcast-load-more-btn {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.12), rgba(242, 17, 44, 0.12)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* hover swaps to the solid fill; the border stays pinned the same way */
html[data-sigfix="1"] .pcast-load-more-btn:hover,
html[data-sigfix="1"] .pif-tab-btn.active {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* the play button is the one red control that sits outside the LIVE tab too */
html[data-sigfix="1"] .pcast-btn.play-main {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════
   SIGNATURE COLOUR LOCK — PART 4: SITEWIDE BORDER SWEEP (2026-07-26)

   Owner's actual ask: stop chasing individual reports one at a time — the site is fully dark
   already, forced-dark shouldn't be touching it at all. `color-scheme: only dark` is set both as
   a <meta> tag AND as CSS on two roots already (see index.php, :root) and still isn't enough on
   Samsung Internet on its own — that was established before this block existed, which is WHY the
   per-property workarounds in Parts 1–3 exist at all. There is no known single switch that fully
   disables Samsung's pass, so "as complete as possible" means finding every remaining place a red
   `border-color` (solid or translucent) is still expressed as a plain colour value, and moving it
   to the same `background: … padding-box, … border-box` technique Part 3 uses — a family of
   properties (`background-image`) Samsung's pass does not recompute, verified across Parts 1–3.

   Rule for every entry below: the padding-box layer reproduces EXACTLY the element's real fill —
   copied from its own CSS, not simplified or assumed — so nothing about the non-Samsung look
   changes and no other browser's background is touched (`html[data-sigfix]` never matches without
   the Samsung UA check in index.php's <head>). Where the original rule uses `!important` (the two
   `.podcast-player.docked` cases), the override matches it, because forced-dark repaints whatever
   colour actually WINS the normal cascade — a non-important override can never take effect against
   an !important original regardless of source order (confirmed one live instance of exactly this:
   `.podcast-player.docked .pcast-btn.play-main`'s Part-2 fix, added earlier, was silently losing to
   the original's `!important` the entire time).

   Scope: the LIVE tab (the one still reported as drifting) plus the podcast player and the home
   gateway cards (global chrome, visible regardless of tab). NOT yet extended to every red border
   sitewide (party grid, merch, contact, roster/crew each still have their own untouched instances,
   e.g. `.method-icon`, `.contact-textarea:focus`, `.roster-card:hover`) — same technique, just not
   applied yet. `box-shadow` (glow) has no equivalent fix: there is no background/border-adjacent
   property a glow's colour can hide behind, so every red glow sitewide is still whatever Samsung's
   pass decides to do with it. That is a real, currently-open gap, not something this pass hides.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* Home gateway card — mobile touch-active red ring (::before is a pure border overlay, no fill) */
html[data-sigfix="1"] #gateway-live:hover::before,
html[data-sigfix="1"] #gateway-live.touch-active::before {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.7), rgba(242, 17, 44, 0.7)) border-box;
}

/* LIVE tab: schedule tag, countdown box, "regular" broadcast pill */
html[data-sigfix="1"] .pif-tag {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.12), rgba(242, 17, 44, 0.12)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.35), rgba(242, 17, 44, 0.35)) border-box;
}

html[data-sigfix="1"] .timer-box {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.05), rgba(242, 17, 44, 0.05)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.25), rgba(242, 17, 44, 0.25)) border-box;
}

html[data-sigfix="1"] .pif-schedule-tag.regular {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.15), rgba(242, 17, 44, 0.15)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.45), rgba(242, 17, 44, 0.45)) border-box;
}

/* LIVE tab: replay archive — card hover ring, thumbnail hover ring */
html[data-sigfix="1"] .video-card:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(#111, #111) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.3), rgba(242, 17, 44, 0.3)) border-box;
}

html[data-sigfix="1"] .view-btn:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(10, 10, 10, 0.55), rgba(10, 10, 10, 0.55)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.55), rgba(242, 17, 44, 0.55)) border-box;
}

html[data-sigfix="1"] .archive-item:hover .archive-thumb-box {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(#151515, #151515) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* the fill here is already a two-stop gradient (background-image family, already immune) —
   reproduced verbatim so only the border-color half of this rule actually changes */
html[data-sigfix="1"] .archive-item:hover .more-box {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(135deg, var(--neon-pif-red), rgba(242, 17, 44, 0.6)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* Global close button, LIVE theme hover (fill was already correct via Part 2 — consolidated here
   so fill and border are declared together instead of split across two blocks) */
html[data-sigfix="1"] #global-section-close-btn.theme-live:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* Podcast player — visible on every tab, not just LIVE */
html[data-sigfix="1"] .pcast-compact-bar:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(16, 16, 19, 0.30), rgba(16, 16, 19, 0.30)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.7), rgba(242, 17, 44, 0.7)) border-box;
}

html[data-sigfix="1"] .podcast-player.expanded .podcast-frame-wrapper {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(14, 14, 17, 0.55), rgba(14, 14, 17, 0.55)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.5), rgba(242, 17, 44, 0.5)) border-box;
}

/* Docked mini-player: the original rule is `!important` (it has to win over the expanded-state
   layout rules), so the override has to be too, plus higher specificity — a bare, non-important
   override here would silently lose, same as the bug this pass found and fixed below. */
html[data-sigfix="1"] .podcast-player.docked {
    background-color: transparent !important;
    border-color: transparent !important;
    background:
        linear-gradient(#0a0a0a, #0a0a0a) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box !important;
}

/* BUGFIX: Part 2's `.podcast-player.docked .pcast-btn.play-main { background-image: … }` (below,
   unchanged) has been dead code since it was written — the original docked play-button rule sets
   `background: var(--neon-live) !important`, and an !important shorthand always beats a
   non-important longhand regardless of source order. This is the only override in the file that
   actually needs `!important` to take effect at all. */
html[data-sigfix="1"] .podcast-player.docked .pcast-btn.play-main {
    background-color: transparent !important;
    border-color: transparent !important;
    background:
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box !important;
}

/* REMOVED 2026-07-27 — `html { forced-color-adjust: none; }` used to sit here as a speculative
   belt-and-suspenders guess. Three reasons it is gone and must not come back:
     1. It was the only rule in this entire lock that was NOT scoped to html[data-sigfix="1"], so it
        applied to Chrome, Safari, iOS — browsers that never had a problem.
     2. It never worked. Forced Colors Mode (Windows High Contrast) is a different mechanism from
        Samsung's forced-dark repaint; the on-device measurement later found the real fix
        (background-clip:text), which had nothing to do with this.
     3. It is actively harmful: it disables High Contrast Mode site-wide for the users who
        deliberately turned that accessibility feature on. */

/* ═══════════════════════════════════════════════════════════════════════════════════════
   SIGNATURE COLOUR LOCK — PART 5: REMAINING TABS (2026-07-26, second pass)

   Part 4 confirmed the mechanism actually works on a real Samsung Internet phone
   (owner: `?sigfix=1` visibly held more red than `?sigfix=0`) — the remaining drift the owner
   was still seeing wasn't the technique failing, it was scope: Part 4 only covered the LIVE tab
   and the podcast player. Every border/translucent-fill on the About/Roster/Demo/Contact/Merch
   tabs was still untouched. This closes that gap using the same proven pattern.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

html[data-sigfix="1"] .nav-tab-link:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.15), rgba(242, 17, 44, 0.15)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

html[data-sigfix="1"] .roster-card:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* Always-on, not a hover state — the roster avatar ring. Works the same way on an <img>: the fill
   layer just has nothing to paint (transparent), only the border ring carries colour. */
html[data-sigfix="1"] .roster-thumb {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* Always-on dashed border. Known trade-off: painting the border-box as a filled ring means this
   renders as a SOLID red ring under sigfix instead of a dashed one — there is no equivalent
   background-property escape hatch for `border-style`. A solid ring in the right colour reads
   closer to intent than a dashed ring in the wrong (washed-out) one, so this is taken as an
   acceptable trade rather than left broken. */
html[data-sigfix="1"] .demo-sub-card {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)) padding-box,
        linear-gradient(rgba(242, 17, 44, 0.4), rgba(242, 17, 44, 0.4)) border-box;
}

html[data-sigfix="1"] .demo-badge {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.15), rgba(242, 17, 44, 0.15)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

html[data-sigfix="1"] .method-icon {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(242, 17, 44, 0.15), rgba(242, 17, 44, 0.15)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* Focus ring on both contact inputs (grouped in the original rule too) */
html[data-sigfix="1"] .contact-input:focus,
html[data-sigfix="1"] .contact-textarea:focus {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* Fill was already correct via Part 2 (background-image, opaque) — consolidated here so the
   border-color half isn't left exposed on its own. */
html[data-sigfix="1"] .contact-submit-btn:hover {
    background-color: transparent;
    border-color: transparent;
    background:
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) padding-box,
        linear-gradient(var(--neon-pif-red), var(--neon-pif-red)) border-box;
}

/* Party "UPCOMING" ribbon — near-opaque translucent fill (0.95), no red border to preserve
   (its border is neutral white), so this is a single-layer background-image fix, not the
   double padding-box/border-box form. */
html[data-sigfix="1"] .upcoming-badge {
    background-color: transparent;
    background-image: linear-gradient(rgba(242, 17, 44, 0.95), rgba(242, 17, 44, 0.95));
}