/* === GLOBAL STYLES & VARIABLES === */
:root {
    --bg-color: #1a1c20;
    --card-color: #212328;
    --font-color: #e1e1e1;
    --subtle-font-color: #8c8c8c;
    --accent-color: #00f0ff;
    --accent-color-dim: rgba(0, 240, 255, 0.2);
    --accent-glow: 0 0 20px rgba(0, 240, 255, 0.5);
    --font-title: 'Exo 2', sans-serif;
    --font-body: 'Exo 2', sans-serif;
    --card-border-radius: 16px;

    /* Dynamic viewport units for mobile */
    --mobile-vw: 100vw;
    --mobile-vh: 100vh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent !important;
}

/* Smooth scroll behavior for all pages */
html {
    scroll-behavior: smooth;
}

/* Fallback for older browsers */
@supports not (scroll-behavior: smooth) {
    html {
        scroll-behavior: auto;
    }
}

/* Prevent text selection on all interactive elements */
button,
.nav-button,
.control-btn,
.panel-toggle,
.category-toggle,
.effect-toggle-btn,
.icon-button,
.support-button,
.gallery-arrow,
a {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

body {
    font-family: var(--font-body);
    background-color: var(--bg-color);
    color: var(--font-color);
    background-image: linear-gradient(rgba(26, 28, 32, 0.97), rgba(26, 28, 32, 0.97)), url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJmIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjAyIiBudW1PY3RhdmVzPSI1Ii8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2YpIiBvcGFjaXR5PSIwLjMiLz48L3N2Zz4=');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: manipulation;
    /* Prevent browser default zoom, allow custom double-tap */
    position: relative;
    box-sizing: border-box;
    overscroll-behavior: none;
}

/* === MAIN LAYOUT (RESTORED) === */
/* === MAIN LAYOUT (MOBILE FIRST REFACTOR) === */
.main-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: auto;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.75rem;
    animation: fadeIn 1.2s ease-out;
    box-sizing: border-box;
    transform-origin: center center;
    padding-bottom: 80px;
    /* Space for scroll */
}

/* Default Item Placement (Vertical Stacking) */
.left-top-section,
.dynamic-showcase,
.useful-links {
    grid-column: 1 !important;
    grid-row: auto !important;
    width: 100%;
}

/* Support Me section hidden per user request - only on main index page */
/* The main index.html has inline style="display: none !important;" on .support-me-placeholder */
/* So support-me will only be visible on V2 where the placeholder doesn't have that style */
.main-grid:has(.support-me-placeholder[style*="display: none"]) .support-me {
    display: none !important;
}

/* Hide placeholder only if it has inline display:none style (main index) */
.support-me-placeholder[style*="display: none"] {
    display: none !important;
}

/* Show support-me section on V2 (where placeholder doesn't have inline style) */
.support-me {
    display: flex !important;
}

.left-top-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dynamic-showcase {
    position: relative;
    /* Ensure height on mobile */
    min-height: 300px;
}

.useful-links.card,
.support-me.card {
    padding: 1rem;
    height: auto;
    max-height: 260px;
    overflow-y: auto;
}

/* === DESKTOP LAYOUT (Landscape Tablets & PC > 1200px) === */
@media (min-width: 1200px) {
    .main-grid {
        grid-template-columns: 1fr 1.5fr;
        grid-template-rows: 1fr auto;
        height: calc(100vh - 3rem);
        max-height: 800px;
        transform: scale(1.1);
        padding-bottom: 0;
        min-height: auto;
        grid-template-rows: 1fr 260px;
    }

    .left-top-section {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .dynamic-showcase {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }

    .useful-links {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .support-me {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }
}


/* === GENERAL CARD STYLING & HOVER EFFECTS === */
.card {
    background-color: var(--card-color);
    border-radius: var(--card-border-radius);
    padding: 1.5rem;
    border: 2px solid var(--accent-color-dim);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    overflow: hidden;
}

/* Pre-highlighting effect */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--card-border-radius);
    background: linear-gradient(45deg, transparent, rgba(0, 240, 255, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
}

.card:hover::before {
    opacity: 1;
}

.card:hover {
    border-color: var(--accent-color);
    box-shadow: var(--accent-glow);
    transform: translateY(-4px);
    z-index: 10;
    animation: pulseGlow 0.6s ease-in-out;
}

@keyframes pulseGlow {
    0% {
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.1);
    }

    50% {
        box-shadow: var(--accent-glow);
    }

    100% {
        box-shadow: var(--accent-glow);
    }
}

.card h2 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
    text-align: left;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    pointer-events: auto !important;
}

.card h2::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10px;
    right: -10px;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(0, 240, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: -1;
    border-radius: 4px;
}

.card h2:hover {
    color: #ffffff;
    text-shadow: 0 0 20px var(--accent-color);
    transform: translateX(5px);
    letter-spacing: 2px;
}

.card h2:hover::before {
    opacity: 1;
}

/* Split Text Animation Styles */
.split-text-wrapper {
    display: inline-block;
}

.split-char {
    display: inline-block;
    transform-origin: center;
    will-change: transform, opacity;
}

.accessible-text {
    opacity: 0;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* === INFO BUTTON & HEADER SECTION === */
.header-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Button order: info button first, then gallery, then v2 (next to counter) */
.card-header .info-button {
    order: 0 !important;
}

.card-header .gallery-button {
    order: 1 !important;
}

.card-header .v2-button {
    order: 2 !important;
}

.header-title-section h2 {
    margin-bottom: 0;
}

.info-button {
    background: rgba(33, 35, 40, 0.95);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 50%;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1000;
    pointer-events: auto;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Force perfect circle on mobile devices */
@media (max-width: 768px) {
    .info-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1 !important;
        animation: infoButtonPulse 4s ease-in-out infinite;
    }

    .info-button:active {
        animation: none !important;
    }

    /* Fix mobile layout issues */
    .main-grid {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        grid-template-rows: auto auto !important;
    }

    .dynamic-showcase {
        min-height: 37vh !important;
    }

    /* Fix mobile arrow centering - position relative to dynamic showcase */
    .dynamic-showcase .gallery-arrow {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .dynamic-showcase:not(.mobile-fullscreen) .gallery-arrow.prev {
        left: 1rem !important;
    }

    .dynamic-showcase:not(.mobile-fullscreen) .gallery-arrow.next {
        right: 1rem !important;
    }

    /* Ensure mobile buttons are always visible */
    .mobile-fullscreen-exit {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Fix toolbar visibility on mobile */
    .threejs-controls {
        z-index: 10000 !important;
        position: relative !important;
    }
}


.info-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.info-button:hover::before {
    opacity: 1;
}

.info-button:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.6);
    border-color: #00f0ff;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(0, 240, 255, 0.3));
}

.info-button:active {
    transform: translateY(0) scale(1.05);
}

.info-button::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(0, 240, 255, 0.0);
    transition: box-shadow 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

@keyframes infoButtonPulse {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        box-shadow: 0 0 18px rgba(0, 240, 255, 0.12);
    }

    25% {
        transform: translateY(0) scale(1.05) rotate(120deg);
        box-shadow: 0 0 28px rgba(0, 240, 255, 0.3);
    }

    50% {
        transform: translateY(0) scale(1.08) rotate(220deg);
        box-shadow: 0 0 36px rgba(0, 240, 255, 0.42);
    }

    75% {
        transform: translateY(0) scale(1.05) rotate(320deg);
        box-shadow: 0 0 28px rgba(0, 240, 255, 0.3);
    }

    100% {
        transform: translateY(0) scale(1) rotate(360deg);
        box-shadow: 0 0 18px rgba(0, 240, 255, 0.12);
    }
}

.info-icon {
    width: 16px;
    height: 16px;
    color: var(--accent-color);
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.info-button:hover .info-icon {
    color: #ffffff;
    transform: rotate(360deg);
}

/* === GALLERY BUTTON === */
.gallery-button {
    background: rgba(33, 35, 40, 0.95);
    border: 2px solid rgba(200, 0, 255, 0.8);
    /* Brighter border */
    border-radius: 50%;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1000;
    pointer-events: auto;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .gallery-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        border-radius: 50% !important;
        flex-shrink: 0 !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1 !important;
        animation: galleryButtonPulse 4s ease-in-out infinite;
    }

    .gallery-button:active {
        animation: none !important;
    }
}

.gallery-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.gallery-button:hover::before {
    opacity: 1;
}

.gallery-button:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 8px 25px rgba(200, 0, 255, 0.6);
    border-color: rgba(255, 0, 255, 0.6);
    background: linear-gradient(135deg, rgba(200, 0, 255, 0.2), rgba(255, 0, 255, 0.3));
}

.gallery-button:active {
    transform: translateY(0) scale(1.05);
}

.gallery-button::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    box-shadow: 0 0 0 rgba(200, 0, 255, 0.0);
    transition: box-shadow 0.3s ease;
    pointer-events: none;
    z-index: 0;
}

@keyframes galleryButtonPulse {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        box-shadow: 0 0 18px rgba(200, 0, 255, 0.12);
    }

    25% {
        transform: translateY(0) scale(1.05) rotate(120deg);
        box-shadow: 0 0 28px rgba(200, 0, 255, 0.3);
    }

    50% {
        transform: translateY(0) scale(1.08) rotate(220deg);
        box-shadow: 0 0 36px rgba(200, 0, 255, 0.42);
    }

    75% {
        transform: translateY(0) scale(1.05) rotate(320deg);
        box-shadow: 0 0 28px rgba(200, 0, 255, 0.3);
    }

    100% {
        transform: translateY(0) scale(1) rotate(360deg);
        box-shadow: 0 0 18px rgba(200, 0, 255, 0.12);
    }
}

.gallery-icon {
    width: 16px;
    height: 16px;
    color: rgba(200, 0, 255, 0.8);
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.gallery-button:hover .gallery-icon {
    color: #ffffff;
    transform: rotate(360deg);
}

/* === V2 BUTTON === */
.v2-button {
    background: rgba(33, 35, 40, 0.95);
    border: 2px solid rgba(255, 0, 153, 0.8);
    /* Hot Pink - Brighter */
    border-radius: 50%;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1000;
    pointer-events: auto;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    margin-left: 8px;
    /* Spacing */
}

/* Pre-highlight effect for v2 button */
.v2-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 0, 153, 0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
    border-radius: 50%;
}

.v2-button:hover::before {
    opacity: 1;
}

.v2-button:hover {
    transform: translateY(-2px) scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 0, 153, 0.6);
    border-color: rgba(255, 0, 153, 0.8);
    background: linear-gradient(135deg, rgba(255, 0, 153, 0.2), rgba(255, 0, 153, 0.3));
}

.v2-button:active {
    transform: translateY(0) scale(1.05);
}

.v2-icon {
    width: 18px;
    height: 18px;
    color: rgba(255, 0, 153, 0.8);
    z-index: 2;
    position: relative;
    transition: all 0.3s ease;
}

.v2-button:hover .v2-icon {
    color: #ffffff;
    transform: rotate(360deg);
}

/* === HEADER CARD === */
.header-card .header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    perspective: 600px;
}

.header-card .logo {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 0 12px var(--accent-color));
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(2deg);
    }
}

.header-card .logo:hover {
    transform: scale(1.2) rotate(360deg);
    filter: drop-shadow(0 0 25px var(--accent-color)) drop-shadow(0 0 50px var(--accent-color)) brightness(1.3);
    animation: logoGlitch 0.3s ease-in-out;
}

@keyframes logoGlitch {

    0%,
    100% {
        transform: scale(1.2) rotate(360deg);
    }

    25% {
        transform: scale(1.15) rotate(355deg) translateX(-2px);
    }

    75% {
        transform: scale(1.25) rotate(365deg) translateX(2px);
    }
}

/* Logo wrapper for duplication effect */
.logo-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    transform-style: preserve-3d;
    cursor: pointer;
}

.logo-duplicate {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
}

.header-card h1 {
    font-family: var(--font-title);
    font-size: 2rem;
    line-height: 1;
    perspective: 600px;
    cursor: pointer;
    transform-style: preserve-3d;
    text-align: center;
}

/* Split text word styling - removed to match test exactly */
/* OPTIONAL: Uncomment below for extra glow effect on hover
.header-card h1 .word {
    display: inline-block;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    margin: 0 0.2em;
}

.header-card h1:hover .word {
    color: var(--accent-color);
    text-shadow: 0 0 20px var(--accent-color);
}
*/

.header-card p {
    font-size: 1rem;
    color: var(--subtle-font-color);
}

.header-card .bio-text {
    margin-top: 1rem;
}

/* === SOCIAL & USEFUL LINKS === */
.social-links {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.social-links.card,
.useful-links.card {
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
    min-height: auto;
}

.icon-grid {
    display: grid;
    gap: 1rem;
}

.social-grid {
    grid-template-columns: repeat(4, 1fr);
}

.useful-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* === XBOX STYLE FOR USEFUL LINKS (RECTANGLE) === */
.useful-links .icon-button {
    /* Reverted circle style per user request */
    border-radius: 12px;
    /* Standard rounded rectangle */
    height: 65px;
    /* Consistent height */
    border: 2px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(0, 0, 0, 0.5);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy pop */
}

.useful-links .icon-button:hover {
    transform: translateY(-5px) scale(1.05) !important;
    border-color: #fff;
    box-shadow: 0 0 30px var(--accent-color), inset 0 0 10px rgba(255, 255, 255, 0.5);
    z-index: 100;
}

.useful-links .icon-button svg,
.useful-links .icon-button img {
    /* Adjusted size to allow border padding, consistent with social links */
    width: 2.2rem;
    height: 2.2rem;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
}

.social-links .icon-grid {
    margin-top: auto;
}

.icon-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Pre-highlighting for icon buttons */
.icon-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.icon-button:hover::before {
    opacity: 1;
}

.icon-button:hover {
    transform: translateY(-6px) scale(1.05);
    filter: brightness(1.4);
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.5);
    z-index: 10;
}

.icon-button img,
.icon-button svg {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.icon-button.tiktok {
    background-color: #000;
}

.icon-button.youtube {
    background-color: #FF0000;
}

.icon-button.twitter {
    background-color: #14171A;
}

.icon-button.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.icon-button.artstation {
    background-color: #13AFF0;
}

.icon-button.unrealFab {
    background-color: #101014;
}

.icon-button.gumroad {
    background-color: #FF90E8;
}

.icon-button.behance {
    background-color: #053EFF;
}

.icon-button.patreon {
    background-color: #F96854;
}

.icon-button.email {
    background-color: #333;
}

.icon-button.email svg {
    stroke: #fff;
}

.icon-button.xbox {
    background-color: #107C10;
}

.icon-button.steam {
    background-color: #1b2838;
}

.icon-button.sketchfab {
    background-color: #1faad8;
}

.icon-button.linkedin {
    background-color: #0A66C2;
}

/* === DYNAMIC SHOWCASE === */
.dynamic-showcase {
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    padding-bottom: 1rem;
    z-index: 100;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    position: sticky;
    top: 0;
    z-index: 2147483647;
    background: var(--bg-color);
    pointer-events: auto !important;
}

/* Desktop: Keep v2 button on the right (default behavior) */

/* Ensure all buttons in header are always clickable */
.card-header button,
.card-header .nav-button,
.card-header .info-button,
.card-header .gallery-button {
    pointer-events: auto !important;
    position: relative;
    z-index: 2147483647;
}

.card-header h2 {
    margin-bottom: 0;
}

.showcase-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#gallery-counter {
    font-size: 0.9rem;
    color: var(--subtle-font-color);
    margin-right: 1rem;
}

.nav-button {
    background: none;
    border: none;
    color: var(--subtle-font-color);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-button svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.nav-button:hover {
    color: var(--font-color) !important;
    background-color: #2c2f35 !important;
    transform: scale(1.05) !important;
}

.nav-button.active {
    color: var(--accent-color);
}

.showcase-content-wrapper {
    position: relative;
    flex: 1;
    padding-top: 0;
    margin-top: -1rem;
}

.showcase-viewer {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background-color: #000;
    z-index: 1;
    flex: 1;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Position three.js controls within the dynamic showcase area */

.threejs-controls {
    position: absolute !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 999 !important;
    background: rgba(33, 35, 40, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    border-radius: 12px !important;
    padding: 0.25rem !important;
    gap: 0.25rem !important;
    border: 1px solid transparent !important;
    border-top: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    height: 60px !important;
    overflow: hidden !important;
    width: auto !important;
}

/* Ensure showcase viewer doesn't interfere with YouTube */
.showcase-viewer:has(.gallery-item[data-type="youtube"].active) {
    overflow: visible;
}

.gallery-container {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.gallery-container.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Higher than threejs container (z-index: 1) */
}

/* Ensure gallery containers are visible in mobile fullscreen */
.dynamic-showcase.mobile-fullscreen .gallery-container.active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* Critical fix for gallery items in mobile fullscreen - only show active items from active gallery */
.dynamic-showcase.mobile-fullscreen .gallery-container:not(.active) .gallery-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.dynamic-showcase.mobile-fullscreen .gallery-container.active .gallery-item:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.dynamic-showcase.mobile-fullscreen .gallery-container.active .gallery-item.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide Three.js viewer when not in model mode - but keep dimensions */
.dynamic-showcase.mobile-fullscreen:not(:has(#model-gallery.active)) .threejs-viewer,
.dynamic-showcase.mobile-fullscreen:not(:has(#model-gallery.active)) #threejs-container {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Dimensions are maintained because element stays in flow */
}

/* Ensure canvas inside hidden threejs viewer also doesn't block clicks */
.dynamic-showcase.mobile-fullscreen:not(:has(#model-gallery.active)) .threejs-viewer canvas,
.dynamic-showcase.mobile-fullscreen:not(:has(#model-gallery.active)) #threejs-container canvas {
    pointer-events: none !important;
}

.dynamic-showcase.mobile-fullscreen .gallery-item.active img {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: auto !important;
    position: relative !important;
}

.dynamic-showcase.mobile-fullscreen .gallery-item.active video {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dynamic-showcase.mobile-fullscreen .gallery-item.active iframe {
    display: block !important;
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
    border: none !important;
}

/* YouTube iframe fixes for mobile fullscreen */
.dynamic-showcase.mobile-fullscreen .youtube-player-container {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1000 !important;
}

.dynamic-showcase.mobile-fullscreen .youtube-player-container iframe {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1001 !important;
    pointer-events: auto !important;
}

/* Three.js viewer fixes for mobile fullscreen */
.dynamic-showcase.mobile-fullscreen .threejs-viewer {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    background: #000 !important;
    /* CRITICAL: Maintain aspect ratio - don't stretch */
    object-fit: contain !important;
}

.dynamic-showcase.mobile-fullscreen .threejs-viewer canvas {
    display: block !important;
    /* CRITICAL: Use 100% instead of 100vw/100vh to maintain aspect ratio */
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
    touch-action: none !important;
    pointer-events: auto !important;
    image-rendering: auto !important;
    /* CRITICAL: Maintain aspect ratio - don't stretch */
    object-fit: contain !important;
}

.dynamic-showcase.mobile-fullscreen #threejs-container {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

/* Ensure gallery gesture handling (Swipe vs Pan vs Zoom) */
.gallery-container,
.gallery-item,
.gallery-item img,
.gallery-item video,
.showcase-content-wrapper {
    /* Allow vertical scroll (if needed) and pinch-zoom */
    /* BLOCK horizontal scroll so JS can handle swipe */
    touch-action: pan-y pinch-zoom !important;
    overscroll-behavior: none !important;
}

/* Base styles for gallery items */
.gallery-item {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.gallery-item.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.gallery-item img,
.gallery-item video {
    width: 100%;
    height: 100%;
    border: none;
    object-fit: contain;
    /* Image protection - prevent selection, drag, and save */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    /* iOS long-press menu */
    pointer-events: auto;
}

.gallery-item iframe,
.youtube-player-container {
    width: 100%;
    height: 100%;
    border: none;
}

/* YouTube player specific styling - simplified */
.youtube-player-container {
    position: relative;
    background: #000;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.youtube-player-container iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    z-index: 999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    display: block !important;
    touch-action: manipulation !important;
}

/* Gallery arrows are always visible - removed hiding rule */

.gallery-arrow {
    position: absolute;
    top: 50%;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
    visibility: visible;
    pointer-events: auto;
    z-index: 10;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Larger click area */
/* .gallery-arrow::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: transparent;
    z-index: -1;
} */

.showcase-viewer:hover .gallery-arrow {
    opacity: 0.8;
    transform: translateY(-50%) scale(1.05);
}

.gallery-arrow:hover {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.9);
    border-color: var(--accent-color);
    transform: translateY(-50%) scale(1.15);
    box-shadow: 0 0 20px var(--accent-color);
}

.gallery-arrow:active {
    transform: translateY(-50%) scale(1.05);
}

.gallery-arrow.prev {
    left: 60px;
    transform: translateY(-50%);
}

/* Moved inward for slick interface */
.gallery-arrow.next {
    right: 60px;
    transform: translateY(-50%);
}

/* Moved inward for slick interface */

.showcase-caption-area {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.25rem;
    position: relative;
    min-height: 30px;
}

.showcase-caption {
    color: var(--font-color);
    text-align: center;
}

/* When panel is open (non-fullscreen), arrows hide when controls expand */
.dynamic-showcase:has(.master-control-panel.panel-open) .gallery-arrow.prev,
.dynamic-showcase:has(.master-control-panel.panel-open) .gallery-arrow.next,
.dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow {
    z-index: 900 !important;
    /* Below viewer (10000) so panel can draw over */
    opacity: 0 !important;
    /* Hide arrows when panel expands in model view only */
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure mobile fullscreen exit button is hidden in normal mode */
.mobile-fullscreen-exit {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Show mobile fullscreen exit button ONLY in mobile fullscreen mode */
html.mobile-fullscreen-active .mobile-fullscreen-exit,
body.mobile-fullscreen-active .mobile-fullscreen-exit {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 50% !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 20px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
}



/* MOBILE: Panel draws over arrows in ALL modes */
@media (max-width: 768px) {

    /* Base arrow z-index */
    .dynamic-showcase .gallery-arrow {
        z-index: 900 !important;
    }

    /* When panel is open: raise entire stacking context */
    .dynamic-showcase .master-control-panel.panel-open {
        z-index: 999999999 !important;
        /* Must be above arrows (10001) */
    }

    .dynamic-showcase .master-control-panel.panel-open~.showcase-viewer,
    .dynamic-showcase:has(.master-control-panel.panel-open) .showcase-viewer {
        z-index: 10000 !important;
    }

    .dynamic-showcase .master-control-panel.panel-open .panel-content {
        z-index: 10051 !important;
    }

    /* Arrows hide when panel expands (below viewer (10000) so panel can draw over them) */
    .dynamic-showcase:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    .dynamic-showcase:has(.master-control-panel.panel-open) .gallery-arrow.next,
    .dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow {
        z-index: 900 !important;
        opacity: 0 !important;
        /* Hide arrows when panel expands in model view only */
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* MOBILE FULLSCREEN: Same overlay rules */
@media (max-width: 768px) {

    .dynamic-showcase.mobile-fullscreen .master-control-panel.panel-open,
    body.mobile-fullscreen-active .master-control-panel.panel-open,
    html.mobile-fullscreen-active .master-control-panel.panel-open {
        z-index: 999999999 !important;
        /* Must be above arrows (10001) */
    }

    .dynamic-showcase.mobile-fullscreen:has(.master-control-panel.panel-open) .showcase-viewer,
    body.mobile-fullscreen-active .dynamic-showcase:has(.master-control-panel.panel-open) .showcase-viewer,
    html.mobile-fullscreen-active .dynamic-showcase:has(.master-control-panel.panel-open) .showcase-viewer {
        z-index: 10000 !important;
    }

    /* Arrows hide when panel expands in mobile fullscreen (model view only) */
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow,
    body.mobile-fullscreen-active .dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    body.mobile-fullscreen-active .dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    body.mobile-fullscreen-active .dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow,
    html.mobile-fullscreen-active .dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    html.mobile-fullscreen-active .dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    html.mobile-fullscreen-active .dynamic-showcase.model-view:has(.master-control-panel.panel-open) .gallery-arrow {
        z-index: 900 !important;
        /* Below viewer (10000) so panel can draw over */
        opacity: 0 !important;
        /* Hide arrows when panel expands in model view only */
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

/* Desktop mode - ensure threejs-controls work properly */
@media (min-width: 769px) {

    /* Desktop threejs-controls - positioned within dynamic showcase */
    html body .dynamic-showcase #threejs-controls.threejs-controls {
        position: absolute !important;
        bottom: 10px !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        z-index: 999 !important;
        background: rgba(33, 35, 40, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 8px !important;
        padding: 0.25rem !important;
        gap: 0.125rem !important;
        border: 1px solid transparent !important;
        border-top: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        height: 60px !important;
        max-height: 60px !important;
        overflow: hidden !important;
    }

    /* Desktop - show controls when model gallery is active */
    .dynamic-showcase:has(#model-gallery.active) .threejs-controls {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* NUCLEAR DESKTOP VISIBILITY - Force controls to be visible on desktop */
    .dynamic-showcase:has(#model-gallery.active) .threejs-controls,
    .dynamic-showcase:has(#model-gallery.active) .threejs-controls *,
    .dynamic-showcase:has(#model-gallery.active) .controls-row,
    .dynamic-showcase:has(#model-gallery.active) .control-btn,
    .dynamic-showcase:has(#model-gallery.active) .control-select,
    .dynamic-showcase:has(#model-gallery.active) .control-slider {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
        clip: auto !important;
    }

    html body .dynamic-showcase .threejs-controls .controls-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        margin-bottom: 2px !important;
        align-items: center !important;
        width: 100% !important;
    }


    /* Desktop sliders - quarter horizontal size */
    .dynamic-showcase .threejs-controls .control-slider {
        width: 2.5px !important;
        height: 5px !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 3px !important;
        cursor: pointer !important;
        margin: 0 1px !important;
        flex-shrink: 0 !important;
    }

    /* Desktop labels - normal size */
    .dynamic-showcase .threejs-controls label[for="metalness-slider"],
    .dynamic-showcase .threejs-controls label[for="roughness-slider"] {
        font-size: 0.7rem !important;
        color: var(--font-color) !important;
        margin: 0 2px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}



/* Desktop control button styling */
@media (min-width: 769px) {

    html body .dynamic-showcase .threejs-controls .control-btn,
    html body .dynamic-showcase .threejs-controls .control-select {
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        padding: 0 !important;
        font-size: 0.6rem !important;
        margin: 0 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        border-radius: 3px !important;
        cursor: pointer !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 1 1 0 !important;
    }

    html body .dynamic-showcase .threejs-controls #animation-select {
        flex: 1.5 1 0 !important;
    }

    /* Make HDRI and lighting buttons same as other working buttons */
    #hdri-toggle,
    #hdri-cycle,
    #lighting-cycle {
        width: 70px !important;
        height: 20px !important;
        min-width: 70px !important;
        min-height: 20px !important;
        max-height: 20px !important;
        padding: 2px 4px !important;
        font-size: 0.6rem !important;
    }

    /* Desktop button hover effects */
    .dynamic-showcase .threejs-controls .control-btn:hover,
    .dynamic-showcase .threejs-controls .control-select:hover {
        background: rgba(255, 255, 255, 0.3) !important;
        border-color: var(--accent-color) !important;
        transform: translateY(-1px) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }


    .mobile-fullscreen-exit {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* === SUPPORT ME CARD === */
.support-me {
    display: flex;
}

.support-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

.support-button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 0.8rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
    height: 38px;
}

.support-button:hover {
    transform: translateY(-3px);
    filter: brightness(1.2);
}

.support-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.support-button.coffee {
    background-color: #BD34A3;
}

.support-button.coffee:hover {
    box-shadow: 0 0 15px #BD34A3;
}

.support-button.paypal {
    background-color: #0070ba;
}

.support-button.paypal:hover {
    box-shadow: 0 0 15px #0070ba;
}

.support-button.paypal svg {
    fill: #fff;
}

.card-caption-area {
    margin-top: auto;
    padding-top: 1.5rem;
}

.footer-brand {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--subtle-font-color);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
    position: relative;
}

.footer-brand::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transform: translateX(-50%);
    transition: width 0.4s ease;
}

.footer-brand:hover,
.footer-brand.active {
    color: var(--accent-color);
    text-shadow: 0 0 20px var(--accent-color);
    transform: scale(1.1) translateY(-2px);
    letter-spacing: 2px;
}

.footer-brand:hover::before,
.footer-brand.active::before {
    width: 100%;
}

/* === TOUCH SCREEN IMPROVEMENTS === */
@media (hover: none) and (pointer: coarse) {

    /* Touch screen optimizations */
    .gallery-arrow {
        width: 52px;
        height: 52px;
        font-size: 1.3rem;
        opacity: 0.8;
    }

    .icon-button {
        min-height: 70px;
        padding: 10px;
    }

    .nav-button {
        padding: 12px;
        min-width: 44px;
        min-height: 44px;
    }

    .support-button {
        min-height: 50px;
        font-size: 1.1rem;
    }

    /* MOBILE FIX: Ensure control buttons are touch-friendly */
    .control-btn {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        font-size: 1.2rem;
    }

    /* Ensure lighting cycle button is visible on mobile */
    #lighting-cycle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Ensure YouTube controls are touch-friendly */
    .youtube-player-container iframe {
        touch-action: manipulation;
    }
}

/* === FULLSCREEN & RESPONSIVE === */

/* Hide scrollbars when in fullscreen mode */
html:has(.dynamic-showcase:fullscreen),
body:has(.dynamic-showcase:fullscreen) {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.dynamic-showcase:fullscreen:has(#image-gallery.active) {
    overflow: hidden !important;
}

.dynamic-showcase:fullscreen {
    background-color: var(--bg-color);
    border: 2px solid var(--accent-color);
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: var(--accent-glow);
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Desktop fullscreen - CYAN BORDER FILLS ENTIRE SCREEN */

.dynamic-showcase:fullscreen .showcase-content-wrapper {
    flex: 1 1 auto !important;
    /* Take remaining space */
    min-height: 0 !important;
    /* Allow flexbox to shrink */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

.dynamic-showcase:fullscreen .showcase-viewer {
    aspect-ratio: auto;
    flex: 1 1 auto !important;
    overflow: visible !important;
    /* Allow shading overlay to show */
    /* Take remaining space */
    min-height: 0 !important;
    /* Allow flexbox to shrink */
    overflow: hidden !important;
    /* Prevent scrolling */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    position: relative !important;
}

/* Let fullscreen behave naturally - remove forced positioning */

/* Removed problematic rule that was breaking fullscreen */

.dynamic-showcase:fullscreen .gallery-container:not(.active) .gallery-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.dynamic-showcase:fullscreen .gallery-container.active .gallery-item:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Hide inactive gallery items in regular mode - prevents YouTube API conflicts */
.gallery-item:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.dynamic-showcase:fullscreen .gallery-container.active .gallery-item.active {
    width: 100%;
    height: 100%;
    display: flex !important;
    pointer-events: auto !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Ensure image gallery container has pointer events in fullscreen */
.dynamic-showcase:fullscreen:has(#image-gallery.active) #image-gallery,
.dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) #image-gallery {
    pointer-events: auto !important;
}

/* Hide Three.js viewer when not in model mode - but keep dimensions */
.dynamic-showcase:fullscreen:not(:has(#model-gallery.active)) .threejs-viewer,
.dynamic-showcase:fullscreen:not(:has(#model-gallery.active)) #threejs-container {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    /* Dimensions are maintained because element stays in flow */
}

/* Ensure canvas inside hidden threejs viewer also doesn't block clicks */
.dynamic-showcase:fullscreen:not(:has(#model-gallery.active)) .threejs-viewer canvas,
.dynamic-showcase:fullscreen:not(:has(#model-gallery.active)) #threejs-container canvas {
    pointer-events: none !important;
}

.dynamic-showcase:fullscreen .gallery-container {
    width: 100%;
    height: 100%;
    display: flex !important;
    /* CRITICAL: Override base display: none rule for fullscreen */
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
    /* Prevent scrollbars in fullscreen */
}

/* Prevent scrollbars in image gallery fullscreen */
.dynamic-showcase:fullscreen:has(#image-gallery.active),
.dynamic-showcase:fullscreen:has(#image-gallery.active) .gallery-container,
.dynamic-showcase:fullscreen:has(#image-gallery.active) .gallery-item,
.dynamic-showcase:fullscreen:has(#image-gallery.active) .gallery-item img,
.dynamic-showcase:fullscreen:has(#image-gallery.active) .showcase-viewer,
.dynamic-showcase.mobile-fullscreen:has(#image-gallery.active),
.dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .gallery-container,
.dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .gallery-item {
    overflow: hidden !important;
    max-height: 100vh !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    max-width: 100vw !important;
    pointer-events: auto !important;
}

/* Ensure model gallery is visible in fullscreen so shading overlay shows */
/* Override base .gallery-container rule with higher specificity */
.dynamic-showcase:fullscreen #model-gallery,
.dynamic-showcase:fullscreen #model-gallery.gallery-container,
.dynamic-showcase:fullscreen #model-gallery.gallery-container.active,
.dynamic-showcase:fullscreen:has(#model-gallery.active) #model-gallery,
.dynamic-showcase:fullscreen:has(#model-gallery) #model-gallery {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}


/* CRITICAL: Prevent browser scroll/zoom on touch for image gallery in fullscreen */
.dynamic-showcase:fullscreen #image-gallery,
.dynamic-showcase:fullscreen #image-gallery.gallery-container,
.dynamic-showcase:fullscreen .gallery-container.active,
.dynamic-showcase:fullscreen .gallery-item,
.dynamic-showcase:fullscreen .gallery-item.active {
    touch-action: none !important;
}

.dynamic-showcase:fullscreen .gallery-container.active .gallery-item.active img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    pointer-events: auto !important;
    touch-action: none !important;
}

.dynamic-showcase:fullscreen .gallery-container.active .gallery-item.active video {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
}

.dynamic-showcase:fullscreen .gallery-container.active .gallery-item.active iframe {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* Three.js canvas in fullscreen - ensure it takes full screen without scrollbars */
.dynamic-showcase:fullscreen .threejs-viewer,
.dynamic-showcase:fullscreen .threejs-viewer canvas {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    /* CRITICAL: Maintain aspect ratio - don't stretch */
    object-fit: contain !important;
}

/* Fullscreen controls - same as desktop */
html body .dynamic-showcase:fullscreen #threejs-controls.threejs-controls {
    position: fixed !important;
    display: flex;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10000 !important;
    bottom: 10px !important;
    width: auto !important;
    max-width: none !important;
    left: 0.1rem !important;
    right: 0.1rem !important;
    transform: none !important;
    margin: 0 !important;
    pointer-events: auto !important;
}

/* Hide model controls in image/video fullscreen */
.dynamic-showcase:fullscreen:has(#image-gallery.active) #threejs-controls,
.dynamic-showcase:fullscreen:has(#video-gallery.active) #threejs-controls,
.dynamic-showcase:fullscreen:has(#image-gallery.active) .master-control-panel,
.dynamic-showcase:fullscreen:has(#video-gallery.active) .master-control-panel {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Mobile fullscreen portrait controls: centered with max-width */
/* Landscape overrides this at line 3236+ */
/* Portrait fullscreen: ensure 2-row layout with proper flex */
@media (max-width: 768px) and (orientation: portrait) {

    body.mobile-fullscreen-active #threejs-controls.threejs-controls,
    html.mobile-fullscreen-active #threejs-controls.threejs-controls,
    html body .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) #threejs-controls.threejs-controls {
        position: fixed !important;
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10000 !important;
        bottom: 10px !important;
        left: 0.1rem !important;
        right: 0.1rem !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0.25rem !important;
        gap: 0.25rem !important;
        height: auto !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    /* Hide model controls in image/video mobile fullscreen */
    body.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) #threejs-controls,
    body.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) #threejs-controls,
    html.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) #threejs-controls,
    html.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) #threejs-controls,
    body.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) .master-control-panel,
    body.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) .master-control-panel,
    html.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) .master-control-panel,
    html.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) .master-control-panel {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Portrait fullscreen: ensure controls-row wraps to 2 rows */
    body.mobile-fullscreen-active .threejs-controls .controls-row,
    html.mobile-fullscreen-active .threejs-controls .controls-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    /* Portrait fullscreen: buttons with flex to fit in 2 rows */
    body.mobile-fullscreen-active .threejs-controls .control-btn,
    html.mobile-fullscreen-active .threejs-controls .control-btn,
    body.mobile-fullscreen-active .threejs-controls .control-select,
    html.mobile-fullscreen-active .threejs-controls .control-select {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: auto !important;
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
    }
}

/* Gallery arrows in fullscreen - moved both inward to make room for model buttons */
.dynamic-showcase:fullscreen .gallery-arrow {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 900 !important;
    /* Base z-index - consistent with mobile */
    pointer-events: auto !important;
}

.dynamic-showcase:fullscreen .gallery-arrow.prev {
    left: 80px !important;
    top: 45% !important;
    /* Moved inward to make room for model buttons on left */
}

.dynamic-showcase:fullscreen .gallery-arrow.next {
    right: 80px !important;
    top: 45% !important;
    /* Moved inward to balance layout */
}

/* When panel is open in fullscreen, arrows hide when controls expand */
.dynamic-showcase:fullscreen:has(.master-control-panel.panel-open) .gallery-arrow.prev,
.dynamic-showcase:fullscreen:has(.master-control-panel.panel-open) .gallery-arrow.next,
.dynamic-showcase.model-view:fullscreen:has(.master-control-panel.panel-open) .gallery-arrow {
    z-index: 900 !important;
    /* Below viewer (10000) so panel can draw over */
    opacity: 0 !important;
    /* Hide arrows when panel expands in model view only */
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Lighting info element removed - no longer needed */

/* Show lighting info only for model gallery in fullscreen - proper layout with model name and counter */
.dynamic-showcase:fullscreen:has(#model-gallery.active) .lighting-info {
    position: fixed !important;
    top: 120px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 10002 !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(33, 35, 40, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--font-color) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    font-weight: normal !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    animation: fadeOut 3s ease-in-out 2s forwards !important;
}

/* Model name on the left */
.dynamic-showcase:fullscreen:has(#model-gallery.active) .lighting-info .model-name {
    flex: 1 !important;
    text-align: left !important;
    font-weight: bold !important;
}

/* Lighting info in center */
.dynamic-showcase:fullscreen:has(#model-gallery.active) .lighting-info .lighting-status {
    flex: 1 !important;
    text-align: center !important;
}

/* Counter on the right */
.dynamic-showcase:fullscreen:has(#model-gallery.active) .lighting-info .model-counter {
    flex: 1 !important;
    text-align: right !important;
}

/* Auto-fade animation for lighting info */
@keyframes fadeOut {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Hide lighting info for image/video galleries in fullscreen */
.dynamic-showcase:fullscreen:has(#image-gallery.active) .lighting-info,
.dynamic-showcase:fullscreen:has(#video-gallery.active) .lighting-info {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Buttons in fullscreen use normal styling - no custom overrides */

/* Top header row in fullscreen - keep all buttons in same row */
.dynamic-showcase:fullscreen .card-header {
    position: relative !important;
    /* Keep in document flow */
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    z-index: 10000 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: rgba(33, 35, 40, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 0 !important;
    /* No border radius in fullscreen */
    padding: 0.75rem 1rem !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    /* Don't shrink */
}

/* Gallery buttons in header - remove circles and keep in row */
/* Ensure navigation buttons are clickable in fullscreen */
.dynamic-showcase:fullscreen .card-header .nav-button,
.dynamic-showcase.mobile-fullscreen .card-header .nav-button {
    z-index: 10002 !important;
    pointer-events: auto !important;
    position: relative !important;
}

.dynamic-showcase:fullscreen .card-header .nav-button {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    color: white !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure info button keeps its styling in fullscreen */
.dynamic-showcase:fullscreen .card-header .info-button,
.dynamic-showcase.mobile-fullscreen .card-header .info-button {
    background: rgba(33, 35, 40, 0.95) !important;
    border: 1px solid rgba(0, 240, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 0.25rem !important;
}

.dynamic-showcase:fullscreen .card-header .info-button .info-icon,
.dynamic-showcase.mobile-fullscreen .card-header .info-button .info-icon {
    width: 16px !important;
    height: 16px !important;
    color: var(--accent-color) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure gallery button keeps its styling in fullscreen */
.dynamic-showcase:fullscreen .card-header .gallery-button,
.dynamic-showcase.mobile-fullscreen .card-header .gallery-button {
    background: rgba(33, 35, 40, 0.95) !important;
    border: 1px solid rgba(200, 0, 255, 0.3) !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    margin: 0 0.25rem !important;
}

.dynamic-showcase:fullscreen .card-header .gallery-button .gallery-icon,
.dynamic-showcase.mobile-fullscreen .card-header .gallery-button .gallery-icon {
    width: 16px !important;
    height: 16px !important;
    color: rgba(200, 0, 255, 0.8) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Consistent font size for all toolbar buttons */
.dynamic-showcase:fullscreen .card-header .nav-button,
.dynamic-showcase:fullscreen .card-header #maximize-btn,
.dynamic-showcase.mobile-fullscreen .card-header .nav-button,
.dynamic-showcase.mobile-fullscreen .card-header #maximize-btn {
    font-size: 14px !important;
    font-weight: normal !important;
    z-index: 100001 !important;
    position: relative !important;
    font-family: Arial, sans-serif !important;
    padding: 8px 12px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* Keep showcase nav in same row for fullscreen - no separate positioning needed */

.dynamic-showcase:fullscreen .nav-button {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    /* Use normal button styling - no custom sizing */
}

/* Exit button positioned absolutely within model-gallery container */
#model-gallery {
    position: relative !important;
}

#model-gallery #mobile-exit-btn {
    position: fixed !important;
    top: 70px !important;
    left: 15px !important;
    z-index: 999999 !important;
    background-color: rgba(33, 35, 40, 0.95) !important;
    color: var(--accent-color) !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: 50% !important;
    width: 35px !important;
    height: 35px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    font-family: Arial, sans-serif !important;
    display: none;
    visibility: visible !important;
    pointer-events: auto !important;
}

/* Hover effect to match gallery arrows */
#model-gallery #mobile-exit-btn:hover {
    opacity: 1 !important;
    background-color: rgba(0, 0, 0, 0.9) !important;
    border-color: var(--accent-color) !important;
    transform: scale(1.15) !important;
    box-shadow: 0 0 20px var(--accent-color) !important;
}

/* Hide exit button when not in model gallery */
.dynamic-showcase:not(:has(#model-gallery.active)) #model-gallery #mobile-exit-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* Reset fullscreen button state after exit - remove any persistent styling */
.dynamic-showcase:not(:fullscreen) .nav-button {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

/* Mobile fullscreen viewer height is handled in media queries below */
.dynamic-showcase.mobile-fullscreen {
    position: fixed;
    top: 0;
    overflow: hidden !important;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-width: 100vw;
    min-height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    /* Force browser to calculate proper dimensions */
    box-sizing: border-box;
    overflow: hidden;
    /* Ensure content is visible */
    min-height: 100vh;
    min-width: 100vw;
    z-index: 9999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 2px solid var(--accent-color) !important;
    box-shadow: var(--accent-glow) !important;
    /* background: #000 !important; - removed to prevent grey box */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure showcase content wrapper has proper dimensions in mobile fullscreen */
.dynamic-showcase.mobile-fullscreen .showcase-content-wrapper {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Mobile fullscreen content handled by desktop-style rules above */

/* Hide all other page elements when in mobile fullscreen */
html.mobile-fullscreen-active,
.mobile-fullscreen-active {
    overflow: hidden !important;
    /* Prevent scrolling in fullscreen */
    padding: 0 !important;
    /* NO PADDING - fill entire screen */
    margin: 0 !important;
    /* NO MARGIN - fill entire screen */
    display: block !important;
    /* Override flex centering */
    justify-content: unset !important;
    align-items: unset !important;
    background-color: transparent !important;
    /* No grey background */
}

.mobile-fullscreen-active .left-top-section,
.mobile-fullscreen-active .useful-links,
.mobile-fullscreen-active .support-me {
    display: none !important;
}

/* Ensure body has no padding/margin in mobile fullscreen ONLY */
.mobile-fullscreen-active body {
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    justify-content: unset !important;
    align-items: unset !important;
}

/* MOBILE FULLSCREEN: Override for all small devices */
@media (max-width: 768px),
(max-height: 768px),
(max-width: 1024px) and (orientation: portrait) {
    .dynamic-showcase.mobile-fullscreen {
        padding: 0 !important;
        margin: 0 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        width: var(--mobile-vw, 100vw) !important;
        width: 100dvw !important;
        height: 100vh !important;
        height: var(--mobile-vh, 100vh) !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        max-height: 100vh !important;
        z-index: 99999 !important;
        background: var(--bg-color) !important;
        display: flex !important;
        flex-direction: column !important;
        border-radius: 0 !important;
        border: none !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
    }

    /* Force mobile fullscreen to fill entire screen like desktop - NO WHITE BORDERS */
    .mobile-fullscreen-active,
    html.mobile-fullscreen-active,
    body.mobile-fullscreen-active {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        justify-content: unset !important;
        align-items: unset !important;
        overflow: hidden !important;
        background-color: #000 !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    .mobile-fullscreen-active .dynamic-showcase {
        padding: 0 !important;
        margin: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 9999 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .mobile-fullscreen-active .dynamic-showcase .showcase-viewer {
        height: calc(100vh - 80px) !important;
        width: 100vw !important;
        overflow: hidden !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #000 !important;
        position: relative !important;
    }

    .mobile-fullscreen-active .dynamic-showcase:has(.master-control-panel.panel-open) .showcase-viewer {
        z-index: 10000 !important;
        /* Raise above arrows when panel open */
    }

    body.mobile-fullscreen-active .dynamic-showcase:has(.master-control-panel.panel-open) .showcase-viewer,
    html.mobile-fullscreen-active .dynamic-showcase:has(.master-control-panel.panel-open) .showcase-viewer {
        z-index: 10000 !important;
        /* Raise above arrows when panel open */
    }

    .mobile-fullscreen-active .dynamic-showcase .card-header {
        padding: 0.5rem !important;
        margin: 0 !important;
        min-height: auto !important;
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }
}

/* Ensure the dynamic showcase is visible and properly positioned in fullscreen */
/* Duplicate rule removed - using the one at line 1637 instead */

/* Orientation-based image switching - Mobile first approach */
.landscape-image {
    display: none !important;
    /* Hidden by default on mobile */
    width: 100%;
    height: auto;
}

.portrait-image {
    display: block !important;
    /* Show portrait by default on mobile */
    width: 100%;
    height: auto;
}

/* Mobile portrait orientation - show portrait image */
@media (max-width: 768px) and (orientation: portrait) {
    .landscape-image {
        display: none !important;
    }

    .portrait-image {
        display: block !important;
    }
}

/* Mobile landscape orientation - show landscape image */
@media (max-width: 768px) and (orientation: landscape) {
    .landscape-image {
        display: block !important;
    }

    .portrait-image {
        display: none !important;
    }

    /* Note: Controls positioning handled by specific landscape fullscreen/non-fullscreen rules below */
}

/* Desktop - always show landscape image */
@media (min-width: 769px) {
    .landscape-image {
        display: block !important;
    }

    .portrait-image {
        display: none !important;
    }
}

/* Fullscreen mode - ensure only one image shows based on orientation */
.dynamic-showcase:fullscreen .gallery-item.active .landscape-image,
.dynamic-showcase.mobile-fullscreen .gallery-item.active .landscape-image {
    display: none !important;
}

.dynamic-showcase:fullscreen .gallery-item.active .portrait-image,
.dynamic-showcase.mobile-fullscreen .gallery-item.active .portrait-image {
    display: block !important;
}

/* Fullscreen landscape orientation - show landscape images, hide portrait images */
@media (orientation: landscape) {

    .dynamic-showcase:fullscreen .gallery-item.active .landscape-image,
    .dynamic-showcase.mobile-fullscreen .gallery-item.active .landscape-image {
        display: block !important;
        max-height: 80vh !important;
        max-width: 90vw !important;
        object-fit: contain !important;
    }

    .dynamic-showcase:fullscreen .gallery-item.active .portrait-image,
    .dynamic-showcase.mobile-fullscreen .gallery-item.active .portrait-image {
        display: none !important;
    }

    /* Regular images without orientation classes - optimize for landscape */
    .dynamic-showcase:fullscreen .gallery-item.active img:not(.landscape-image):not(.portrait-image),
    .dynamic-showcase.mobile-fullscreen .gallery-item.active img:not(.landscape-image):not(.portrait-image) {
        max-height: 80vh !important;
        max-width: 90vw !important;
        object-fit: contain !important;
    }
}

/* Fullscreen portrait orientation - show portrait images, hide landscape images */
@media (orientation: portrait) {

    .dynamic-showcase:fullscreen .gallery-item.active .portrait-image,
    .dynamic-showcase.mobile-fullscreen .gallery-item.active .portrait-image {
        display: block !important;
        max-height: 85vh !important;
        max-width: 95vw !important;
        object-fit: contain !important;
    }

    .dynamic-showcase:fullscreen .gallery-item.active .landscape-image,
    .dynamic-showcase.mobile-fullscreen .gallery-item.active .landscape-image {
        display: none !important;
    }

    /* Regular images without orientation classes - optimize for portrait */
    .dynamic-showcase:fullscreen .gallery-item.active img:not(.landscape-image):not(.portrait-image),
    .dynamic-showcase.mobile-fullscreen .gallery-item.active img:not(.landscape-image):not(.portrait-image) {
        max-height: 85vh !important;
        max-width: 95vw !important;
        object-fit: contain !important;
    }
}

/* Mobile adjustments - 2 rows like desktop */
@media (max-width: 768px) {

    /* Move controls just under main menu bar on mobile */
    .dynamic-showcase .threejs-controls {
        display: none;
    }

    /* Mobile arrow positioning - positioned relative to dynamic showcase */
    .dynamic-showcase .arrow-left,
    .dynamic-showcase .arrow-right {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 900 !important;
        /* Below showcase-viewer (10000) when panel opens */
        background: rgba(33, 35, 40, 0.9) !important;
        backdrop-filter: blur(10px) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    }

    .dynamic-showcase .arrow-left {
        left: 10px !important;
    }

    .dynamic-showcase .arrow-right {
        right: 10px !important;
    }

    .dynamic-showcase .arrow-left:hover,
    .dynamic-showcase .arrow-right:hover {
        background: rgba(33, 35, 40, 1) !important;
        transform: translateY(-50%) scale(1.1) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    }

    /* Mobile landscape: Move arrows up 25px */
    @media (orientation: landscape) {

        .dynamic-showcase .arrow-left,
        .dynamic-showcase .arrow-right {
            top: calc(50% - 25px) !important;
            /* Move up 25px from center */
        }

        .dynamic-showcase .arrow-left:hover,
        .dynamic-showcase .arrow-right:hover {
            transform: translateY(-50%) scale(1.1) !important;
            /* Keep hover transform */
        }
    }

    /* Ensure arrows are positioned relative to dynamic showcase, not social links */
    .dynamic-showcase {
        position: relative !important;
    }

    /* CRITICAL: Hide model-info-fade-container UNLESS it has .show class (animated version only) */
    /* This applies to mobile - only .show version should be visible */
    .dynamic-showcase .model-info-fade-container:not(.show) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide model-info-fade-container in image and video galleries */
    .dynamic-showcase:has(#image-gallery.active) .model-info-fade-container,
    .dynamic-showcase:has(#video-gallery.active) .model-info-fade-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide #model-name-display directly in image and video galleries */
    .dynamic-showcase:has(#image-gallery.active) #model-name-display,
    .dynamic-showcase:has(#video-gallery.active) #model-name-display {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Lighting info element removed - no longer needed */

    /* Regular mobile view - 2 rows like desktop */
    .dynamic-showcase .controls-row {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        margin-bottom: 6px;
        overflow-x: auto;
    }

    .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) .threejs-controls .controls-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 6px !important;
    }

    /* Mobile sliders - consistent sizing */
    .dynamic-showcase .control-slider {
        width: 60px !important;
        height: 24px !important;
        margin: 0 3px !important;
        flex-shrink: 0 !important;
    }

    .dynamic-showcase label[for="metalness-slider"],
    .dynamic-showcase label[for="roughness-slider"] {
        font-size: 0.6rem !important;
        margin: 0 1px !important;
        flex-shrink: 0 !important;
    }

    .dynamic-showcase.mobile-fullscreen {
        padding: 0.5rem;
        border: 2px solid var(--accent-color);
        box-shadow: var(--accent-glow);
        /* Add safe area for header and controls */
        padding-top: 60px !important;
        padding-bottom: 80px !important;
    }

    /* Header with all navigation - MUST be at very top of screen */
    .dynamic-showcase.mobile-fullscreen .card-header {
        padding: 0.5rem !important;
        /* Padding for proper spacing */
        margin: 0 !important;
        /* NO MARGIN - UI must be at very top like desktop */
        flex-shrink: 0;
        min-height: auto !important;
        /* Auto height */
        position: fixed !important;
        /* Fixed positioning to stay at top */
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        z-index: 10001 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        /* Separate left and right button groups */
        height: auto !important;
        /* Ensure auto height for proper centering */
        background: rgba(0, 0, 0, 0.8) !important;
        /* Semi-transparent background for visibility */
        gap: 0.25rem !important;
        /* Tighter gap like desktop */
    }

    .dynamic-showcase.mobile-fullscreen .card-header .header-title-section {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        /* Left align utility buttons */
        gap: 0.1rem !important;
        /* Very tight gap to move V2 even further left */
        flex: 0 0 auto !important;
        /* Don't grow, just fit content */
        margin: 0 !important;
        margin-left: -10px !important;
        /* Move entire left button group left by 10px */
    }

    .dynamic-showcase.mobile-fullscreen .card-header h2 {
        font-size: 0.875rem;
        margin: 0;
        line-height: 1.2;
        padding: 0;
        /* No padding for proper centering */
    }

    /* Hide "DYNAMIC SHOWCASE" title in mobile portrait mode to save space */
    @media (orientation: portrait) {

        .dynamic-showcase .card-header h2,
        .dynamic-showcase.mobile-fullscreen .card-header h2 {
            display: none !important;
            visibility: hidden !important;
        }
    }

    /* Show "DYNAMIC SHOWCASE" title in mobile landscape mode (more room) */
    @media (orientation: landscape) {

        .dynamic-showcase .card-header h2,
        .dynamic-showcase.mobile-fullscreen .card-header h2 {
            display: block !important;
            visibility: visible !important;
        }
    }

    /* Size utility buttons (info, gallery, v2) smaller to prevent cutoff */
    /* CRITICAL: Override base mobile styles with !important */
    .dynamic-showcase.mobile-fullscreen .card-header .info-button,
    .dynamic-showcase.mobile-fullscreen .card-header .gallery-button,
    .dynamic-showcase.mobile-fullscreen .card-header .v2-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
        box-sizing: border-box !important;
    }

    .dynamic-showcase.mobile-fullscreen .card-header .info-button svg,
    .dynamic-showcase.mobile-fullscreen .card-header .gallery-button svg,
    .dynamic-showcase.mobile-fullscreen .card-header .v2-button svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Additional override for info button specifically */
    .dynamic-showcase.mobile-fullscreen .info-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .dynamic-showcase.mobile-fullscreen .gallery-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .dynamic-showcase.mobile-fullscreen .v2-button {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }

    .dynamic-showcase.mobile-fullscreen .showcase-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        /* Right align content buttons */
        gap: 0.2rem !important;
        /* Tighter gap - reduced from 0.25rem */
        flex: 0 0 auto !important;
        /* Don't grow, just fit content */
        padding: 0 !important;
    }

    /* Mobile portrait: Apply bevel border styling to nav buttons in windowed mode */
    @media (orientation: portrait) {

        /* Reduce gaps in portrait mode */
        .dynamic-showcase .showcase-nav {
            gap: 0.2rem !important;
            /* Tighter gap in portrait */
        }

        .dynamic-showcase .header-title-section {
            gap: 0.1rem !important;
            /* Very tight gap to move V2 even further left */
            margin-left: -10px !important;
            /* Move entire left button group left by 10px */
        }

        .dynamic-showcase .nav-button {
            padding: 0 !important;
            min-width: 34px;
            min-height: 34px;
            width: 34px !important;
            height: 34px !important;
            pointer-events: auto !important;
            z-index: 99999 !important;
            visibility: visible !important;
            opacity: 1 !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            -webkit-tap-highlight-color: transparent !important;
            /* Add desktop-style grey bevel border */
            background: rgba(44, 47, 53, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.15) !important;
            border-radius: 8px !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
        }

        .dynamic-showcase .nav-button svg {
            width: 30px;
            height: 30px;
        }

        /* Show gallery counter in portrait mode */
        #gallery-counter {
            display: block !important;
            font-size: 0.7rem;
        }

        /* Show eye icon in portrait windowed mode */
        .model-info-toggle {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        /* Move gallery button right 10px */
        .dynamic-showcase .gallery-button {
            margin-left: 10px !important;
            /* Reduced from 15px - moved left 5px */
        }

        /* Move V2 button right 5px */
        .dynamic-showcase .v2-button {
            margin-left: 5px !important;
            /* Reduced from 10px - moved left 5px */
        }

        /* Collapse model info by default in portrait windowed mode */
        .model-info-overlay .model-info-content,
        #model-info-overlay .model-info-content {
            display: none !important;
        }

        .model-info-overlay.expanded .model-info-content,
        #model-info-overlay.expanded .model-info-content {
            display: flex !important;
            flex-direction: column !important;
        }

        /* Make model info header clickable in windowed mode */
        .model-info-header,
        #model-info-overlay .model-info-header {
            cursor: pointer !important;
            user-select: none !important;
        }
    }

    .dynamic-showcase.mobile-fullscreen .nav-button {
        padding: 0;
        min-width: 40px;
        min-height: 40px;
        width: 40px !important;
        height: 40px !important;
        pointer-events: auto !important;
        z-index: 99999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0 !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
        /* Add desktop-style grey bevel border */
        background: rgba(44, 47, 53, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        border-radius: 8px !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    }

    .dynamic-showcase.mobile-fullscreen .nav-button svg {
        width: 36px;
        height: 36px;
        /* Large icons but with padding from border */
    }

    /* Ensure maximize button is always clickable in fullscreen */
    .dynamic-showcase.mobile-fullscreen #maximize-btn {
        pointer-events: auto !important;
        z-index: 99999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
    }

    /* Position model info overlay on left edge in fullscreen - COLLAPSED by default */
    .dynamic-showcase.mobile-fullscreen .model-info-overlay,
    .dynamic-showcase.mobile-fullscreen #model-info-overlay {
        position: fixed !important;
        left: 0 !important;
        top: 60px !important;
        z-index: 2147483646 !important;
        max-width: 150px !important;
        width: 150px !important;
    }

    /* Allow collapsed state to be small */
    .dynamic-showcase.mobile-fullscreen .model-info-overlay.hidden,
    .dynamic-showcase.mobile-fullscreen #model-info-overlay.hidden {
        width: 32px !important;
        max-width: 32px !important;
        min-width: 32px !important;
    }

    /* Collapse model info content by default - only show header */
    .dynamic-showcase.mobile-fullscreen .model-info-content,
    .dynamic-showcase.mobile-fullscreen #model-info-overlay .model-info-content {
        display: none !important;
        /* Hidden by default - collapsed */
    }

    /* Show content when overlay has 'expanded' class */
    .dynamic-showcase.mobile-fullscreen .model-info-overlay.expanded .model-info-content,
    .dynamic-showcase.mobile-fullscreen #model-info-overlay.expanded .model-info-content {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Make model info header clickable */
    .dynamic-showcase.mobile-fullscreen .model-info-header,
    .dynamic-showcase.mobile-fullscreen #model-info-overlay .model-info-header {
        cursor: pointer !important;
        user-select: none !important;
    }

    /* Portrait fullscreen: Ensure model info is collapsed by default but can expand */
    @media (orientation: portrait) {

        /* Collapsed by default */
        body.mobile-fullscreen-active .model-info-overlay:not(.expanded) .model-info-content,
        body.mobile-fullscreen-active #model-info-overlay:not(.expanded) .model-info-content,
        .dynamic-showcase.mobile-fullscreen .model-info-overlay:not(.expanded) .model-info-content,
        .dynamic-showcase.mobile-fullscreen #model-info-overlay:not(.expanded) .model-info-content {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
            max-height: 0 !important;
        }

        /* Expanded when .expanded class is present */
        body.mobile-fullscreen-active .model-info-overlay.expanded .model-info-content,
        body.mobile-fullscreen-active #model-info-overlay.expanded .model-info-content,
        .dynamic-showcase.mobile-fullscreen .model-info-overlay.expanded .model-info-content,
        .dynamic-showcase.mobile-fullscreen #model-info-overlay.expanded .model-info-content {
            display: flex !important;
            flex-direction: column !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: auto !important;
            max-height: none !important;
            /* Allow full vertical expansion */
            overflow-y: auto !important;
        }

        /* Remove width constraint when expanded to allow vertical layout */
        body.mobile-fullscreen-active .model-info-overlay.expanded,
        body.mobile-fullscreen-active #model-info-overlay.expanded,
        .dynamic-showcase.mobile-fullscreen .model-info-overlay.expanded,
        .dynamic-showcase.mobile-fullscreen #model-info-overlay.expanded {
            width: auto !important;
            max-width: 200px !important;
            /* Slightly wider for vertical stats */
        }

        /* Move eye button above Controls in fullscreen portrait */
        /* Move eye button above Controls in fullscreen portrait */
        /* Move eye button above Controls in fullscreen portrait */
        body.mobile-fullscreen-active .model-info-toggle,
        body.mobile-fullscreen-active #model-info-toggle {
            top: 135px !important;
            /* Moved down 100px from 35px */
            right: 10px !important;
            /* Moved right 25px from 35px */
            left: auto !important;
            z-index: 2147483647 !important;
            /* Maximum z-index to appear above Controls */
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }

        /* Ensure joystick is visible in fullscreen portrait */
        body.mobile-fullscreen-active #joystick-container,
        body.mobile-fullscreen-active .joystick-container,
        body.mobile-fullscreen-active [id*="joystick"],
        body.mobile-fullscreen-active [class*="joystick"],
        .dynamic-showcase.mobile-fullscreen #joystick-container,
        .dynamic-showcase.mobile-fullscreen .joystick-container,
        .dynamic-showcase.mobile-fullscreen [id*="joystick"],
        .dynamic-showcase.mobile-fullscreen [class*="joystick"] {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }



        /* Move V2 button to LEFT in portrait fullscreen */
        /* v2 button stays on right in mobile fullscreen */

        .dynamic-showcase.mobile-fullscreen .gallery-button {
            margin-left: 10px !important;
        }

    }

    /* Ensure joystick is visible in ALL fullscreen modes (portrait and landscape) */
    body.mobile-fullscreen-active #joystick-container,
    body.mobile-fullscreen-active .joystick-container,
    body.mobile-fullscreen-active [id*="joystick"],
    body.mobile-fullscreen-active [class*="joystick"],
    .dynamic-showcase.mobile-fullscreen #joystick-container,
    .dynamic-showcase.mobile-fullscreen .joystick-container,
    .dynamic-showcase.mobile-fullscreen [id*="joystick"],
    .dynamic-showcase.mobile-fullscreen [class*="joystick"],
    .dynamic-showcase.mobile-fullscreen canvas[id*="joystick"],
    .dynamic-showcase.mobile-fullscreen div[id*="joystick"],
    body.mobile-fullscreen-active canvas[id*="joystick"],
    body.mobile-fullscreen-active div[id*="joystick"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 99999 !important;
    }

    /* Ensure joystick parent containers are also visible */
    .dynamic-showcase.mobile-fullscreen *:has(> [id*="joystick"]),
    .dynamic-showcase.mobile-fullscreen *:has(> [class*="joystick"]),
    body.mobile-fullscreen-active *:has(> [id*="joystick"]),
    body.mobile-fullscreen-active *:has(> [class*="joystick"]) {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }



    /* Move exit button down further to avoid clipping - High Specificity Override */
    .dynamic-showcase.mobile-fullscreen .mobile-fullscreen-exit,
    .dynamic-showcase.mobile-fullscreen #mobile-exit-btn,
    .dynamic-showcase.mobile-fullscreen #model-gallery #mobile-exit-btn {
        position: fixed !important;
        top: 135px !important;
        /* Moved to align with model info eye (was 60px) */
        right: 10px !important;
        z-index: 2147483647 !important;
    }

    .dynamic-showcase.mobile-fullscreen .showcase-content-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .dynamic-showcase.mobile-fullscreen .showcase-viewer {
        flex: 1;
        position: relative;
        min-height: 0;
        height: calc(100vh - 80px) !important;
        /* Account for header height */
        overflow: auto !important;
        /* Allow scrolling */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        padding: 0 !important;
        /* NO PADDING - fill entire remaining space like desktop */
    }

    /* OVERLAY FIX: Raise viewer above arrows when panel open */
    .dynamic-showcase.mobile-fullscreen:has(.master-control-panel.panel-open) .showcase-viewer {
        z-index: 10000 !important;
    }

    /* Let mobile fullscreen behave naturally - remove forced positioning */

    /* Removed problematic rule that was breaking mobile fullscreen */

    .dynamic-showcase.mobile-fullscreen .gallery-item.active img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .dynamic-showcase.mobile-fullscreen .gallery-item.active video {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Three.js canvas in mobile fullscreen - ensure it takes full screen */
    .dynamic-showcase.mobile-fullscreen .threejs-viewer,
    .dynamic-showcase.mobile-fullscreen .threejs-viewer canvas {
        /* CRITICAL: Use 100% instead of 100vw/100vh to maintain aspect ratio */
        width: 100% !important;
        height: 100% !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 1 !important;
        /* Canvas takes full viewport, fixed header/controls overlay */
        /* CRITICAL: Maintain aspect ratio - don't stretch */
        object-fit: contain !important;
    }

    /* Gallery arrows - ensure they're always visible */
    .dynamic-showcase.mobile-fullscreen .gallery-arrow {
        display: flex !important;
        visibility: visible !important;
        opacity: 0.8 !important;
        pointer-events: auto !important;
        z-index: 900 !important;
        /* Base z-index - will be raised to 10001 when panel is open */
        width: 52px !important;
        height: 52px !important;
        font-size: 1.3rem !important;
        position: absolute !important;
    }

    /* Mobile fullscreen exit button - HIDDEN BY DEFAULT */
    .mobile-fullscreen-exit {
        display: none !important;
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        width: 35px;
        height: 35px;
        background: rgba(33, 35, 40, 0.9);
        border: 2px solid var(--accent-color);
        border-radius: 50%;
        color: var(--accent-color);
        cursor: pointer;
        z-index: 1001;
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        transition: all 0.2s ease;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    .mobile-fullscreen-exit:hover {
        background: rgba(33, 35, 40, 1);
        transform: scale(1.05);
    }

    .mobile-fullscreen-exit:active {
        transform: scale(0.95);
    }

    /* Exit button styles handled by #model-gallery #mobile-exit-btn rule */

    /* Ensure mobile fullscreen exit button is always clickable */
    .dynamic-showcase.mobile-fullscreen .mobile-fullscreen-exit:hover {
        background: rgba(33, 35, 40, 1) !important;
        transform: scale(1.1) !important;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.8) !important;
    }

    .dynamic-showcase.mobile-fullscreen .mobile-fullscreen-exit:active {
        transform: scale(0.95) !important;
        background: rgba(33, 35, 40, 0.8) !important;
    }

    /* Ensure gallery content is visible in fullscreen */
    .dynamic-showcase.mobile-fullscreen .gallery-item.active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: 100% !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
    }

    .dynamic-showcase.mobile-fullscreen .gallery-item.active img,
    .dynamic-showcase.mobile-fullscreen .gallery-item.active video {
        pointer-events: auto !important;
        display: block !important;
    }

    .dynamic-showcase.mobile-fullscreen .showcase-viewer {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
    }



    /* Hide controls in image and video galleries in mobile fullscreen */
    .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .threejs-controls,
    .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .threejs-controls {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Ensure YouTube players work properly in mobile fullscreen */
    .dynamic-showcase.mobile-fullscreen .youtube-player-container {
        z-index: 1000 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    .dynamic-showcase.mobile-fullscreen .youtube-player-container iframe {
        z-index: 1001 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Buttons inside container should receive clicks */
    .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) .threejs-controls .control-slider {
        pointer-events: auto !important;
        z-index: 1001 !important;
        position: relative !important;
        touch-action: manipulation !important;
        max-width: 100px;
    }

    /* Mobile fullscreen image/video centering - restored */
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-container.active .gallery-item.active img,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-container.active .gallery-item.active video {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        max-width: 90vw !important;
        max-height: 90vh !important;
        z-index: 10000 !important;
        display: block !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Ensure gallery arrows work in mobile fullscreen */
    .dynamic-showcase.mobile-fullscreen .gallery-arrow {
        pointer-events: auto !important;
        z-index: 900 !important;
        /* Base - will be raised to 10001 when panel opens */
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Arrows hide when panel expands in mobile fullscreen (model view only) */
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow {
        z-index: 900 !important;
        /* Below viewer (10000) so panel can draw over */
        opacity: 0 !important;
        /* Hide arrows when panel expands in model view only */
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Mobile fullscreen arrow positioning - moved inward to prevent cutoff */
    /* Portrait: center vertically (45%) */
    /* Landscape: moved up significantly in landscape media query below to clear joystick */
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-arrow.prev {
        left: 3rem !important;
        top: 45% !important;
        /* Portrait default - landscape overrides below */
        transform: translateY(-50%) !important;
        position: fixed !important;
        z-index: 900 !important;
        /* Base - raised when panel opens */
    }

    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-arrow.next {
        right: 3rem !important;
        top: 45% !important;
        /* Portrait default - landscape overrides below */
        transform: translateY(-50%) !important;
        position: fixed !important;
        z-index: 900 !important;
        /* Base - raised when panel opens */
    }

    /* Keep arrows below viewer when panel opens */
    /* Arrows hide when panel expands in mobile fullscreen (model view only) */
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow {
        z-index: 900 !important;
        /* Below viewer (10000) so panel can draw over */
        opacity: 0 !important;
        /* Hide arrows when panel expands in model view only */
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* NOTE: Mobile landscape fullscreen arrow positioning is handled in main landscape media query (line 3331) */

    /* Force all buttons to be clickable */
    .dynamic-showcase.mobile-fullscreen .control-btn,
    .dynamic-showcase.mobile-fullscreen .control-select,
    .dynamic-showcase.mobile-fullscreen .control-slider {
        pointer-events: auto !important;
        z-index: 9999 !important;
        position: relative !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* NUCLEAR ANIMATION DROPDOWN FIX - 100x20 size and always clickable */
    .dynamic-showcase.mobile-fullscreen .control-select,
    .dynamic-showcase.mobile-fullscreen #animation-select {
        pointer-events: auto !important;
        z-index: 99999 !important;
        position: relative !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid var(--accent-color) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: inline-block !important;
        width: 100px !important;
        height: 20px !important;
        min-width: 200px !important;
        max-width: 100px !important;
        font-size: 0.7rem !important;
        color: white !important;
    }

    /* Force animation dropdown options to be visible */
    .dynamic-showcase.mobile-fullscreen #animation-select option {
        background: rgba(0, 0, 0, 0.9) !important;
        color: white !important;
        padding: 5px !important;
        font-size: 0.7rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* NUCLEAR DROPDOWN OPTIONS FIX - ensure dropdown opens */
    .dynamic-showcase.mobile-fullscreen #animation-select {
        -webkit-appearance: menulist !important;
        -moz-appearance: menulist !important;
        appearance: menulist !important;
        background-image: none !important;
    }

    .dynamic-showcase.mobile-fullscreen #animation-select:focus {
        outline: 2px solid var(--accent-color) !important;
        outline-offset: 2px !important;
    }


    /* Remove any blocking elements around left arrow */
    .dynamic-showcase.mobile-fullscreen .gallery-arrow.prev::before,
    .dynamic-showcase.mobile-fullscreen .gallery-arrow.prev::after {
        display: none !important;
        content: none !important;
    }

    /* NUCLEAR BLOCKING ELEMENT REMOVAL - remove any elements that might block clicks */
    .dynamic-showcase.mobile-fullscreen .model-info,
    .dynamic-showcase.mobile-fullscreen .showcase-caption-area {
        pointer-events: none !important;
    }

    .dynamic-showcase.mobile-fullscreen .gallery-arrow.prev,
    .dynamic-showcase.mobile-fullscreen .gallery-arrow.next,
    .dynamic-showcase.mobile-fullscreen .control-select,
    .dynamic-showcase.mobile-fullscreen #animation-select,
    .dynamic-showcase.mobile-fullscreen .control-btn,
    .dynamic-showcase.mobile-fullscreen .control-slider,
    .dynamic-showcase.mobile-fullscreen .nav-btn,
    .dynamic-showcase.mobile-fullscreen #show-image-btn,
    .dynamic-showcase.mobile-fullscreen #show-video-btn,
    .dynamic-showcase.mobile-fullscreen #show-model-btn,
    .dynamic-showcase.mobile-fullscreen #play-stop-toggle {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        /* Disable double-tap zoom */
    }

    /* NUCLEAR PLAY/STOP BUTTON FIX - ensure it's always clickable */
    .dynamic-showcase.mobile-fullscreen #play-stop-toggle {
        pointer-events: auto !important;
        z-index: 99999 !important;
        position: relative !important;
        background: rgba(255, 255, 255, 0.2) !important;
        border: 2px solid var(--accent-color) !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        visibility: visible !important;
        opacity: 1 !important;
        display: inline-block !important;
        width: 45px !important;
        height: 20px !important;
        font-size: 0.6rem !important;
        color: white !important;
    }







    /* Force buttons to wrap by limiting width */

    /* Mobile fullscreen sliders - consistent sizing */
    .dynamic-showcase.mobile-fullscreen .control-slider {
        width: 80px !important;
        height: 24px !important;
        margin: 0 3px !important;
        flex-shrink: 0 !important;
    }

    .dynamic-showcase.mobile-fullscreen label[for="metalness-slider"],
    .dynamic-showcase.mobile-fullscreen label[for="roughness-slider"] {
        font-size: 0.75rem !important;
        margin: 0 1px !important;
        flex-shrink: 0 !important;
    }

    /* CRITICAL: Hide model-info-fade-container UNLESS it has .show class (animated version only) */
    /* This applies to mobile fullscreen - only .show version should be visible */
    .dynamic-showcase.mobile-fullscreen .model-info-fade-container:not(.show) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide model-info-fade-container in image and video galleries in mobile fullscreen */
    .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .model-info-fade-container,
    .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .model-info-fade-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide #model-name-display directly in image and video galleries in mobile fullscreen */
    .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) #model-name-display,
    .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) #model-name-display {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Duplicate controls-row rule removed - using rule at line 1393 instead */
}

@media (max-width: 480px) {


    /* Small devices sliders - consistent sizing */
    .dynamic-showcase .control-slider {
        width: 50px !important;
        height: 20px !important;
        margin: 0 2px !important;
        flex-shrink: 0 !important;
    }

    .dynamic-showcase label[for="metalness-slider"],
    .dynamic-showcase label[for="roughness-slider"] {
        font-size: 0.5rem !important;
        margin: 0 1px !important;
        flex-shrink: 0 !important;
    }

    .dynamic-showcase.mobile-fullscreen {
        padding: 0.5rem;
        border: 2px solid var(--accent-color);
        /* Add safe area for header and controls */
        padding-top: 60px !important;
        padding-bottom: 80px !important;
    }


    .dynamic-showcase.mobile-fullscreen .nav-button {
        padding: 0.125rem;
        min-width: 48px;
        min-height: 48px;
    }

    .dynamic-showcase.mobile-fullscreen .nav-button svg {
        width: 24px;
        height: 24px;
    }

    .dynamic-showcase.mobile-fullscreen .showcase-content-wrapper {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
    }

    .dynamic-showcase.mobile-fullscreen .showcase-viewer {
        flex: 1;
        position: relative;
        min-height: 0;
        height: calc(100vh - 80px) !important;
        /* Account for header height */
        overflow: auto !important;
        /* Allow scrolling */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: 0 !important;
        padding: 0 !important;
        /* NO PADDING - fill entire remaining space like desktop */
    }

    /* OVERLAY FIX: Raise viewer above arrows when panel open */
    .dynamic-showcase.mobile-fullscreen:has(.master-control-panel.panel-open) .showcase-viewer {
        z-index: 10000 !important;
    }

    /* Let mobile fullscreen behave naturally - remove forced positioning */

    /* Removed problematic rule that was breaking mobile fullscreen */

    .dynamic-showcase.mobile-fullscreen .gallery-item.active img {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    .dynamic-showcase.mobile-fullscreen .gallery-item.active video {
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
    }

    /* Three.js canvas in mobile fullscreen - ensure it takes full screen */
    .dynamic-showcase.mobile-fullscreen .threejs-viewer,
    .dynamic-showcase.mobile-fullscreen .threejs-viewer canvas {
        width: 100vw !important;
        height: 100vh !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 12 !important;
    }

    /* Gallery arrows for small screens */
    .dynamic-showcase.mobile-fullscreen .gallery-arrow {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
        z-index: 900 !important;
        /* Base - will be raised to 10001 when panel opens */
        position: absolute !important;
        pointer-events: auto !important;
    }

    /* Arrows hide when panel expands in mobile fullscreen (model view only) */
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow {
        z-index: 900 !important;
        /* Below viewer (10000) so panel can draw over */
        opacity: 0 !important;
        /* Hide arrows when panel expands in model view only */
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .dynamic-showcase.mobile-fullscreen .model-info {
        padding: 0.125rem 0.25rem;
        min-height: 24px;
        font-size: 0.875rem;
        line-height: 1.1;
        background: transparent !important;
    }


}

/* Mobile controls visibility - always show in dynamic showcase area */
@media (max-width: 768px) {

    /* Keep left/right navigation arrows always visible */
    .dynamic-showcase .gallery-arrow {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}


/* Removed conflicting rules - using .active selector instead */

/* Ensure gallery containers are visible in mobile fullscreen */
.dynamic-showcase.mobile-fullscreen .gallery-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Removed conflicting rules - using :not(.active) selector instead */

/* Removed conflicting rules - using .active selector instead */

/* Specific YouTube iframe styling for mobile fullscreen */
.dynamic-showcase.mobile-fullscreen .gallery-item iframe {
    /* Allow full height for YouTube controls */
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: 16/9;
    object-fit: contain;
}

/* Ensure YouTube iframes work properly on mobile */
@media (max-width: 768px) {
    .gallery-item iframe {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
    }

    .youtube-player-container iframe {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        z-index: 10 !important;
    }

    /* Ensure gallery arrows work on mobile */
    .gallery-arrow {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }
}

/* Three.js viewer in fullscreen */
.dynamic-showcase.mobile-fullscreen .threejs-viewer {
    width: 100%;
    height: 100%;
}

/* Ensure caption area is visible in mobile fullscreen */
.dynamic-showcase.mobile-fullscreen .showcase-caption-area {
    position: fixed;
    bottom: 50px;
    left: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(5px);
    border-top: none;
    padding: 0.5rem;
    z-index: 1000;
}

/* Landscape images need higher positioning in mobile fullscreen */
.dynamic-showcase.mobile-fullscreen:has(.landscape-image) .showcase-caption-area {
    bottom: 0px !important;
}

/* Portrait images need lower positioning in mobile fullscreen */
.dynamic-showcase.mobile-fullscreen:has(.portrait-image) .showcase-caption-area {
    bottom: 50px;
}

.dynamic-showcase.mobile-fullscreen .showcase-caption {
    margin: 0;
    font-size: 0.875rem;
    text-align: center;
}

/* Ensure caption area is visible in desktop fullscreen */
.dynamic-showcase:fullscreen .showcase-caption-area {
    position: fixed;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    background: rgba(33, 35, 40, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--accent-color);
    padding: 0.5rem 0.75rem;
    z-index: 1000;
}

.dynamic-showcase:fullscreen .showcase-caption {
    margin: 0;
    font-size: 0.875rem;
    text-align: center;
}

@media (max-width: 900px) {
    body {
        display: block;
        justify-content: flex-start;
        align-items: flex-start;
        height: auto;
        min-height: 100vh;
        padding: 1.25rem;
        padding-top: 1.85rem;
        padding-bottom: 1.85rem;
    }

    .main-grid {
        grid-template-columns: 1fr;
        grid-template-rows: 5fr auto;
        height: auto;
        max-height: none;
        gap: 1rem;
    }

    .left-top-section,
    .dynamic-showcase,
    .useful-links,
    .support-me {
        grid-column: 1;
        grid-row: auto;
    }

    .dynamic-showcase {
        grid-row: 2;
    }

    .left-top-section {
        grid-row: 1;
    }

    .useful-links {
        grid-row: 3;
    }

    .support-me {
        grid-row: 4;
        max-height: 260px !important;
        overflow: hidden !important;
    }

    .support-me .support-buttons {
        gap: 0.4rem !important;
    }

    .support-me .card-caption-area {
        padding-top: 0.8rem !important;
        padding-bottom: 0 !important;
    }

    .header-card,
    .card h2 {
        text-align: center;
    }

    .header-card .header-top {
        justify-content: center;
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    #gallery-counter {
        display: none;
    }

    /* Mobile-specific layout - bio first - grid-template-rows handled by earlier rule */
    .main-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .left-top-section {
        grid-row: 1;
    }

    /* Bio first on mobile */
    .dynamic-showcase {
        grid-row: 2;
    }

    /* Second on mobile */
    .useful-links {
        grid-row: 3;
    }

    .support-me {
        grid-row: 4;
    }

    /* Reduce overall padding for mobile */
    body {
        padding: 1.25rem 0.85rem 1.75rem;
    }

    .card {
        padding: 0.75rem;
    }

    /* Smaller header for mobile */
    .header-card {
        padding: 0.5rem;
    }

    .header-card h1 {
        font-size: 1.5rem;
    }

    /* Reduce Three.js controls height for regular mobile screens */
    .threejs-controls {
        overflow: visible !important;
        padding: 0.5rem;
        gap: 0.25rem;
    }

    .threejs-controls .model-info {
        padding: 0.125rem 0.25rem;
        min-height: 16px;
        font-size: 0.75rem;
        line-height: 1.2;
    }



    .threejs-controls .controls-row {
        gap: 0.125rem;
    }

    .header-card p {
        font-size: 0.7rem;
    }

    /* Keep header layout horizontal on mobile */
    /* Centered header Layout on mobile */
    .header-card .header-top {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
        margin-left: 0;
        text-align: center;
    }

    /* Center Sticky Nav Logo */
    .sticky-nav .nav-container {
        justify-content: flex-start;
        padding: 0.5rem 1rem;
        position: relative;
    }

    .sticky-nav .nav-logo {
        margin: 0 !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 1.5rem;
        z-index: 10;
        white-space: nowrap;
        text-align: center;
        transition: transform 0.2s ease !important;
        /* Smooth animation */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .sticky-nav .nav-logo img {
        height: 32px !important;
        width: auto !important;
        max-height: 32px !important;
        display: block !important;
    }

    /* Fix click/active effect for centered logo in portrait */
    .sticky-nav .nav-logo:active,
    .sticky-nav .nav-logo:focus {
        /* Preserve centering while scaling */
        transform: translateX(-50%) scale(0.95) !important;
    }

    /* Push toggle to the right */
    .sticky-nav .nav-toggle {
        margin-left: auto;
    }

    .sticky-nav .nav-links {
        position: fixed;
        right: 0;
        left: 0;
        top: 60px;
        flex-direction: column;
        background: rgba(10, 14, 26, 0.98);
        width: 100%;
        text-align: center;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
        padding: 0.5rem 0;
        backdrop-filter: blur(10px);
        border-bottom: none;
        transform: translateX(100%);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }

    .sticky-nav .nav-links a {
        padding: 0.5rem 1rem;
        display: block;
        color: var(--font-color);
        text-decoration: none;
        transition: all 0.3s ease;
        position: relative;
    }

    .sticky-nav .nav-links a::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent, rgba(0, 240, 255, 0.1), transparent);
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: -1;
    }

    .sticky-nav .nav-links a:hover {
        color: #ffffff;
        text-shadow: 0 0 10px var(--accent-color);
        transform: translateX(5px);
    }

    .sticky-nav .nav-links a:hover::before {
        opacity: 1;
    }

    .sticky-nav .nav-links.active {
        transform: translateX(0);
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
    }

    /* === MOBILE PORTRAIT LAYOUT: Social & Useful Links === */
    /* Force rectangular buttons (full width of grid cell, fixed height) */
    .icon-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.35rem !important;
        /* Slightly more breathing room */
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-items: stretch !important;
    }

    .icon-button {
        /* Rectangular dimensions */
        width: 100% !important;
        height: 48px !important;
        aspect-ratio: auto !important;
        /* Crucial override for square ratios */

        /* Reset constraints */
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;

        /* Layout */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
    }

    .icon-button svg,
    .icon-button img {
        width: auto !important;
        height: 55% !important;
        max-width: 28px !important;
        max-height: 28px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 768px) and (orientation: landscape) {
    body {
        padding: 1.85rem 1.75rem 2.35rem !important;
        display: block !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        min-height: 100dvh !important;
        height: auto !important;
    }

    .main-grid {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto !important;
        padding: 0 0.75rem !important;
        transform: none !important;
        box-sizing: border-box !important;
    }

    .card {
        margin: 0 auto 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* === MOBILE LANDSCAPE LAYOUT === */
    /* Force rectangular buttons in landscape too */
    .icon-button {
        width: 100% !important;
        height: 48px !important;
        min-width: 0 !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .icon-button svg,
    .icon-button img {
        width: auto !important;
        height: 55% !important;
        max-width: 28px !important;
        max-height: 28px !important;
        object-fit: contain !important;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    body {
        display: block !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        height: auto !important;
        min-height: 100dvh !important;
        padding: 1.85rem 1.75rem 2.35rem !important;
    }

    .main-grid {
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto !important;
        padding: 0 0.75rem !important;
        transform: none !important;
        box-sizing: border-box !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto !important;
        gap: 0.75rem !important;
    }

    .card {
        margin: 0 auto 1rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .header-card .header-top {
        margin-left: 0 !important;
        justify-content: center !important;
    }

    .info-button {
        animation: infoButtonPulse 4s ease-in-out infinite !important;
    }

    /* === MOBILE LANDSCAPE (Short Screen) LAYOUT === */
    /* Align with standard landscape layout */
    .icon-button {
        width: 100% !important;
        height: 48px !important;
        min-width: 0 !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        padding: 0 !important;
        border-radius: 12px !important;
    }

    .icon-button svg,
    .icon-button img {
        width: auto !important;
        height: 55% !important;
        max-width: 28px !important;
        max-height: 28px !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {

    .threejs-controls .model-info {
        padding: 0.03125rem 0.0625rem;
        min-height: 10px;
        font-size: 0.5rem;
        line-height: 1.1;
    }

    .threejs-controls .controls-row {
        gap: 0.0625rem;
    }

    .model-info-row {
        margin-bottom: 0.125rem;
    }

    .model-info {
        transform: scale(1);
        background: transparent;
        padding: 8px;
        border-radius: 4px;
    }


    /* Bio text should be readable on mobile */
    .header-card .bio-text {
        font-size: 1rem;
        margin-top: 0.25rem;
        /* Reduce gap between bio and other text */
    }

    /* Make the experience text same size as bio text */
    .header-card p:not(.bio-text) {
        font-size: 1rem;
    }

    /* Reduce header spacing on mobile */
    .header-card .header-top {
        margin-bottom: 0.5rem;
        /* Reduce gap between header and content */
    }

    /* Compact social links with breathing room */
    .social-links,
    .useful-links {
        gap: 0.5rem;
        padding-bottom: 1.5rem !important;
        /* Increased spacing */
    }

    /* Icon grid rules moved to max-width: 768px block */

    /* Give more space to dynamic showcase on mobile - removed conflicting rule */

    .model-info {
        padding: 1px 4px;
        border-radius: 3px;
        min-height: 20px;
    }

    .model-name {
        font-size: 0.55rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Ensure model name display stays on one line in model view */
    .dynamic-showcase:has(#model-gallery.active) #model-name-display {
        font-size: 0.55rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
        display: inline-block !important;
    }

    .model-counter {
        font-size: 0.6rem;
        line-height: 1.2;
    }

    .dynamic-showcase.mobile-fullscreen .control-btn,
    .dynamic-showcase.mobile-fullscreen .control-select {
        padding: 2px 4px;
        font-size: 0.5rem;
        border-radius: 3px;
        min-height: 20px;
        height: 20px;
    }

    .controls-row {
        gap: 0px;
    }
}


/* === THREE.JS VIEWER === */
.threejs-viewer {
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    position: relative;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0;
}

.threejs-viewer canvas {
    width: 100% !important;
    height: 100% !important;
    touch-action: none;
    user-select: none;
}

#model-gallery {
    position: relative;
}

.shading-overlay {
    position: absolute;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    right: 18px;
    background: rgba(6, 9, 15, 0.78);
    border: 1px solid rgba(0, 240, 255, 0.25);
    border-radius: 14px;
    padding: 6px 12px;
    display: none;
    /* Hidden by default - only show for model gallery */
    flex-direction: row;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    z-index: 10060;
    pointer-events: auto;
    visibility: hidden;
    opacity: 0;
}

/* Shading overlay visibility driven by .model-view class */
.dynamic-showcase.model-view #shading-overlay,
body.model-view-active #shading-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.dynamic-showcase:not(.model-view) #shading-overlay,
body:not(.model-view-active) #shading-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.shading-overlay__label {
    font-size: 0.58rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
    text-align: right;
}

.shading-overlay__buttons {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

.shade-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: rgba(5, 8, 14, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.shade-btn:hover {
    transform: translateY(-2px) scale(1.04);
    border-color: rgba(255, 255, 255, 0.45);
}

.shade-btn.active {
    border-color: var(--accent-color, #00f0ff);
    box-shadow: 0 0 14px rgba(0, 240, 255, 0.35);
}

.shade-icon {
    width: 18px;
    height: 18px;
}

.shade-icon--wire circle {
    fill: #0d141d;
}

/* === MODEL INFO OVERLAY === */
.model-info-overlay {
    position: absolute;
    top: 0;
    /* Touch top of canvas */
    left: 0;
    /* Touch left edge of canvas */
    background: linear-gradient(135deg,
            rgba(10, 10, 15, 0.45) 0%,
            rgba(33, 35, 40, 0.35) 50%,
            rgba(0, 240, 255, 0.03) 100%);
    border: 2px solid rgba(0, 240, 255, 0.35);
    border-radius: 0 8px 8px 0;
    /* Rounded on right side only */
    padding: 0;
    /* No padding - let header control it */
    font-family: 'Exo 2', sans-serif;
    font-size: 0.8rem;
    /* Readable font size */
    color: #e1e1e1;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    z-index: 900;
    /* Below arrows (z-index: 10) to avoid overlap */
    min-width: 160px;
    max-width: 200px;
    /* Compact width to avoid arrow */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth slide animation */
    box-shadow: 0 8px 32px rgba(0, 240, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    pointer-events: auto;
    /* Always allow interaction */
}

/* Collapsed state - show only circle icon button */
.model-info-overlay.hidden {
    max-height: 32px;
    overflow: hidden;
    background: rgba(10, 10, 15, 0.6);
    border-width: 1px;
    min-width: 32px;
    max-width: 32px;
    padding: 0;
}

.model-info-overlay.hidden .model-info-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

.model-info-overlay.hidden .model-info-title {
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, width 0.2s ease;
}

.model-info-overlay.hidden .model-info-header {
    border-bottom: none;
    padding: 4px;
    justify-content: center;
}

.model-info-overlay.hidden .model-info-toggle {
    transform: rotate(180deg);
    padding: 0.5rem;
}

/* Expanded state animations */
.model-info-content {
    transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;
}

.model-info-title {
    transition: opacity 0.3s ease-out, width 0.3s ease-out;
    white-space: nowrap;
}

/* Only show in model view */
.dynamic-showcase:not(.model-view) .model-info-overlay,
body:not(.model-view-active) .model-info-overlay {
    display: none;
}

.model-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 240, 255, 0.1);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
}

.model-info-title {
    font-weight: 600;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.title-text {
    display: inline;
}

.title-name {
    font-weight: 500;
    color: #e1e1e1;
    text-transform: none;
    letter-spacing: 0;
}

.model-info-overlay:not(.hidden) .title-name {
    display: none;
}

.model-info-toggle {
    background: none;
    border: none;
    color: var(--accent-color);
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.2s, opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.model-info-toggle:hover {
    transform: scale(1.1);
    opacity: 0.8;
}

.model-info-overlay.hidden .model-info-toggle {
    padding: 0.5rem;
}

.model-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 6px 8px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.4;
}

.info-label {
    color: #a1a1a1;
    font-size: 0.7rem;
}

.info-value {
    color: #e1e1e1;
    font-weight: 500;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
}

/* Fullscreen positioning - move down to avoid being cut off */
.dynamic-showcase:fullscreen .model-info-overlay {
    position: fixed;
    top: 75px;
    /* Move down 75px from top */
    left: 10px;
    /* Small margin from left */
    min-width: 220px;
    max-width: 280px;
    font-size: 0.95rem;
}

/* Desktop fullscreen collapsed - collapse to circle like windowed mode */
.dynamic-showcase:fullscreen .model-info-overlay.hidden {
    min-width: 32px;
    max-width: 32px;
    max-height: 32px;
}

.dynamic-showcase:fullscreen .model-info-title {
    font-size: 0.85rem;
}

.dynamic-showcase:fullscreen .info-label {
    font-size: 0.8rem;
}

.dynamic-showcase:fullscreen .info-value {
    font-size: 0.85rem;
}

/* Mobile adjustments - collapsed by default, show circle icon */
@media (max-width: 768px) {
    .model-info-overlay {
        top: 0;
        left: 0;
        font-size: 0.75rem;
        min-width: 150px;
        max-width: 150px;
        width: 150px;
        z-index: 900;
    }

    /* Mobile fullscreen - align with Controls panel vertically */
    .dynamic-showcase.mobile-fullscreen .model-info-overlay,
    body.mobile-fullscreen-active .model-info-overlay,
    html.mobile-fullscreen-active .model-info-overlay {
        position: fixed !important;
        top: 64px !important;
        /* Align with Controls panel */
        left: 0.5rem !important;
        z-index: 1000 !important;
    }

    /* When collapsed on mobile, show only the circle icon */
    .model-info-overlay.hidden {
        min-width: 35px;
        max-width: 35px;
        padding: 0;
    }

    /* Mobile fullscreen collapsed - STAY IN POSITION, don't fly off */
    .dynamic-showcase.mobile-fullscreen .model-info-overlay.hidden,
    body.mobile-fullscreen-active .model-info-overlay.hidden,
    html.mobile-fullscreen-active .model-info-overlay.hidden {
        position: fixed !important;
        top: 64px !important;
        /* LINE TO TWEAK: Same as expanded - stays below header */
        left: 9rem !important;
        /* LINE TO TWEAK: Left position */
        right: auto !important;
        /* Prevent flying off to the right */
        transform: none !important;
        /* Prevent any transforms from moving it */
        z-index: 1000 !important;
    }

    .model-info-overlay.hidden .model-info-header {
        padding: 4px;
        justify-content: center;
    }

    .model-info-overlay.hidden .model-info-toggle {
        padding: 0.5rem;
    }

    .model-info-title {
        font-size: 0.7rem;
    }

    .info-label {
        font-size: 0.65rem;
    }

    .info-value {
        font-size: 0.7rem;
    }
}

/* Mobile non-fullscreen: smaller size - bottom right corner like desktop */
@media (max-width: 768px) {
    .dynamic-showcase.model-view #shading-overlay {
        left: auto !important;
        right: 18px !important;
        /* Match desktop - bottom right corner */
        transform: none !important;
        /* No centering */
        width: auto;
        padding: 4px 10px;
        bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    }

    .shading-overlay__label {
        display: none;
    }

    .shading-overlay__buttons {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 5px;
    }

    .shade-btn {
        width: 24px;
        height: 24px;
    }

    .shade-icon {
        width: 16px;
        height: 16px;
    }
}

/* Portrait non-fullscreen: even smaller */
@media (max-width: 768px) and (orientation: portrait) {

    /* Move v2 button to left in mobile portrait */
    .card-header .v2-button {
        order: -1 !important;
        margin-left: 0 !important;
        margin-right: 8px !important;
    }

    .card-header .header-title-section {
        order: -1;
    }

    /* Ensure V1/V2 button is first on the left in portrait mode */
    .sticky-nav #v1-btn,
    .sticky-nav #v2-btn {
        order: -10 !important;
        /* Force it to be the very first item on the left */
        margin-left: 0 !important;
        margin-right: 15px !important;
    }

    /* Ensure sticky nav logo is centered in portrait */
    .sticky-nav .nav-logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .sticky-nav .nav-logo:active,
    .sticky-nav .nav-logo:focus {
        transform: translateX(-50%) scale(0.95) !important;
    }

    body:not(.mobile-fullscreen-active) #shading-overlay {
        padding: 3px 8px !important;
        position: absolute !important;
        right: 18px !important;
        left: auto !important;
        bottom: 10px !important;
        top: auto !important;
    }

    body:not(.mobile-fullscreen-active) .shade-btn {
        width: 20px !important;
        height: 20px !important;
    }

    body:not(.mobile-fullscreen-active) .shade-icon {
        width: 14px !important;
        height: 14px !important;
    }

    body:not(.mobile-fullscreen-active) .shading-overlay__buttons {
        gap: 4px !important;
    }
}

/* Landscape non-fullscreen: position shading overlay bottom right (above buttons) */
/* Standard media query: max-width 768px matches all phones - iPhone, Android (Pixel, Galaxy, etc.) */
@media (max-width: 768px) and (orientation: landscape) {
    .dynamic-showcase.model-view:not(.mobile-fullscreen):has(#model-gallery.active) #shading-overlay {
        position: absolute !important;
        left: auto !important;
        right: 18px !important;
        /* Bottom right corner like desktop */
        transform: none !important;
        /* No centering */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
        /* Buttons at 5px, 2 rows ~52px tall, 15px gap = 72px */
        z-index: 10090 !important;
        /* Above buttons */
        padding: 4px 10px !important;
        width: auto !important;
    }
}

/* ============================================================
   FULLSCREEN SHADING OVERLAY: Base Visibility
   ============================================================
   Base rule for fullscreen modes - specific orientation rules override
   ============================================================ */
body.mobile-fullscreen-active.model-view-active #shading-overlay {
    position: fixed !important;
    right: 18px !important;
    /* Bottom-right by default - portrait/landscape rules override if needed */
    left: auto !important;
    transform: none !important;
    /* No centering - CRITICAL */
    z-index: 10070;
    display: flex;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

/* Desktop fullscreen: Positioned to align with canvas edge */
.dynamic-showcase:fullscreen.model-view #shading-overlay {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 80px) !important;
    left: auto !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 10070 !important;
    /* right position is set via JavaScript for desktop fullscreen */
}

.dynamic-showcase:fullscreen.model-view:has(.master-control-panel) #shading-overlay {
    right: calc(160px + 8px) !important;
    /* Adjusted for panel width + alignment */
}

@media (min-width: 901px) {
    .dynamic-showcase.model-view #shading-overlay {
        right: 18px;
        left: auto;
        transform: none;
    }
}

/* Mobile portrait fullscreen: overlay bottom right (above 4-row controls) */
/* Controls at bottom: 10px, 4 rows ~104px tall, so overlay at ~120px + 20px = 140px */
@media (max-width: 768px) and (orientation: portrait) {

    body.mobile-fullscreen-active.model-view-active #shading-overlay,
    html.mobile-fullscreen-active.model-view-active #shading-overlay {
        position: fixed !important;
        left: auto !important;
        right: 18px !important;
        /* Bottom right corner like desktop - CRITICAL */
        transform: none !important;
        /* No centering - CRITICAL */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 140px) !important;
        /* Moved up 20px from 120px */
        z-index: 10090 !important;
        /* Increased from 10080 to 10090 to ensure visibility above all */
        /* Higher than controls */
        padding: 4px 10px !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        width: auto !important;
    }
}

/* ============================================================
   MOBILE LANDSCAPE FULLSCREEN: Three.js Controls
   Clean, consolidated rules - 2-row grid layout
   ============================================================ */
@media (max-width: 768px) and (orientation: landscape) {

    /* Mobile landscape: Move arrows up to avoid covering joystick */
    .dynamic-showcase .arrow-left,
    .dynamic-showcase .arrow-right,
    .dynamic-showcase .gallery-arrow {
        top: calc(50% - 100px) !important;
        /* Move up 100px from center to clear joystick */
    }

    /* Mobile landscape fullscreen: Move arrows up significantly to clear joystick */
    /* Higher specificity to override portrait rule (line 2378-2391) */
    html body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-arrow.prev,
    html body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-arrow.next,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-arrow.prev,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-arrow.next {
        top: 20vh !important;
        /* Move to top 20% of viewport - well above joystick (joystick is around 27.5vh) */
        transform: translateY(-50%) !important;
        /* Keep centering transform */
        z-index: 900 !important;
        /* Base - raised to 10001 when panel opens */
    }

    /* Landscape fullscreen overlay fix: Arrows hide when panel expands (model view only) */
    html body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    html body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    html body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.prev,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow.next,
    .mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen.model-view:has(.master-control-panel.panel-open) .gallery-arrow {
        z-index: 900 !important;
        /* Below viewer (10000) so panel can draw over */
        opacity: 0 !important;
        /* Hide arrows when panel expands in model view only */
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Landscape NON-fullscreen overlay fix: Same z-index hierarchy as other modes */
    /* Panel draws over arrows, arrows hide when controls expand */
    .dynamic-showcase:not(.mobile-fullscreen):has(.master-control-panel.panel-open) .master-control-panel.panel-open {
        z-index: 999999999 !important;
        /* Same as other modes - above everything */
    }

    .dynamic-showcase:not(.mobile-fullscreen):has(.master-control-panel.panel-open) .showcase-viewer {
        z-index: 10000 !important;
        /* Same as other modes - above arrows (900) */
    }

    /* Hide arrows when panel expands in landscape non-fullscreen (model view only) */
    .dynamic-showcase.model-view:not(.mobile-fullscreen):has(.master-control-panel.panel-open) .gallery-arrow.prev,
    .dynamic-showcase.model-view:not(.mobile-fullscreen):has(.master-control-panel.panel-open) .gallery-arrow.next,
    .dynamic-showcase.model-view:not(.mobile-fullscreen):has(.master-control-panel.panel-open) .gallery-arrow {
        z-index: 900 !important;
        /* Same as other modes - below viewer (10000) so panel can draw over */
        opacity: 0 !important;
        /* Hide arrows when panel expands in model view only */
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Non-fullscreen landscape: Grid layout for exactly 2 rows (removed conflicting flex rule) */
    .dynamic-showcase:not(.mobile-fullscreen):has(#model-gallery.active) #threejs-controls.threejs-controls {
        position: absolute !important;
        display: grid !important;
        /* Changed from flex to grid to match fullscreen */
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: repeat(2, auto) !important;
        grid-auto-flow: row !important;
        grid-auto-rows: 0 !important;
        gap: 0.15rem !important;
        padding: 0.15rem !important;
        bottom: 5px !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        box-sizing: border-box !important;
        height: auto !important;
        z-index: 10000 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        transform: none !important;
    }

    /* Ensure dynamic-showcase.mobile-fullscreen is positioned for absolute children */
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .showcase-viewer,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .showcase-viewer {
        position: relative !important;
        overflow: hidden !important;
    }

    /* Universal mobile landscape fullscreen: Grid layout - EXACTLY match non-fullscreen */
    /* Same grid, same spacing, same margins as window mode */
    /* Higher specificity to override portrait flex rules */
    html body.mobile-fullscreen-active #threejs-controls.threejs-controls,
    html body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #threejs-controls.threejs-controls,
    html body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) #threejs-controls.threejs-controls,
    body.mobile-fullscreen-active #threejs-controls.threejs-controls,
    html.mobile-fullscreen-active #threejs-controls.threejs-controls,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #threejs-controls.threejs-controls,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #threejs-controls.threejs-controls,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) #threejs-controls.threejs-controls,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) #threejs-controls.threejs-controls {
        position: fixed !important;
        /* Fixed for fullscreen - positions relative to viewport, not parent container */
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 columns: place 2 controls-row per grid row */
        grid-template-rows: repeat(2, auto) !important;
        /* 2 rows */
        grid-auto-flow: row !important;
        grid-auto-rows: 0 !important;
        /* Prevent extra rows */
        gap: 0.15rem !important;
        /* Match non-fullscreen */
        padding: 0.15rem !important;
        /* Match non-fullscreen */
        bottom: 5px !important;
        /* Match non-fullscreen */
        top: auto !important;
        /* Ensure no top positioning */
        margin: 0 !important;
        /* Remove any margins */
        transform: none !important;
        /* Ensure no transforms */
        left: 0.5rem !important;
        /* Match non-fullscreen */
        right: 0.5rem !important;
        /* Match non-fullscreen */
        width: calc(100% - 1rem) !important;
        /* Match non-fullscreen */
        max-width: calc(100% - 1rem) !important;
        /* Match non-fullscreen */
        box-sizing: border-box !important;
        height: auto !important;
        z-index: 10000 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: hidden !important;
        transform: none !important;
    }

    /* Fullscreen landscape: Ensure controls-row elements are grid items, not flex containers yet */
    body.mobile-fullscreen-active .threejs-controls .controls-row,
    html.mobile-fullscreen-active .threejs-controls .controls-row,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .controls-row,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .controls-row {
        display: flex !important;
        /* Flex container for buttons inside */
        grid-column: auto !important;
        /* Let grid place automatically */
        grid-row: auto !important;
        /* Let grid place automatically */
    }

    /* Limit to exactly 2 grid rows - hide any overflow */
    body.mobile-fullscreen-active .threejs-controls .controls-row:nth-child(n+5),
    html.mobile-fullscreen-active .threejs-controls .controls-row:nth-child(n+5),
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .controls-row:nth-child(n+5),
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .controls-row:nth-child(n+5) {
        display: none !important;
    }


    /* Limit to exactly 2 grid rows for non-fullscreen */
    .dynamic-showcase:not(.mobile-fullscreen):has(#model-gallery.active) .threejs-controls .controls-row:nth-child(n+5) {
        display: none !important;
    }

    /* Non-fullscreen landscape: Each controls-row stays on one line */
    .dynamic-showcase:not(.mobile-fullscreen):has(#model-gallery.active) .threejs-controls .controls-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Fullscreen landscape: Each controls-row - EXACTLY match non-fullscreen */
    /* Same gap, same margin, same padding, same everything */
    body.mobile-fullscreen-active .threejs-controls .controls-row,
    html.mobile-fullscreen-active .threejs-controls .controls-row,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .controls-row,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .controls-row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        /* Match non-fullscreen exactly */
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        /* Match non-fullscreen */
        margin-bottom: 0 !important;
        /* Override any base margin-bottom */
        padding: 0 !important;
        /* Match non-fullscreen */
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Non-fullscreen landscape: Buttons - flex calculates automatically, override base min-width */
    .dynamic-showcase:not(.mobile-fullscreen):has(#model-gallery.active) .threejs-controls .control-btn,
    .dynamic-showcase:not(.mobile-fullscreen):has(#model-gallery.active) .threejs-controls .control-select {
        display: flex !important;
        flex: 1 1 0 !important;
        min-width: 0 !important;
        width: 0 !important;
        height: 18px !important;
        min-height: 18px !important;
        max-height: 18px !important;
        padding: 1px 2px !important;
        font-size: 0.5rem !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Fullscreen landscape: Buttons - EXACTLY match non-fullscreen sizing */
    /* Same flex, same height, same padding, same font-size, same everything */
    body.mobile-fullscreen-active .threejs-controls .control-btn,
    html.mobile-fullscreen-active .threejs-controls .control-btn,
    body.mobile-fullscreen-active .threejs-controls .control-select,
    html.mobile-fullscreen-active .threejs-controls .control-select,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .control-btn,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .control-btn,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .control-select,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls .control-select {
        display: flex !important;
        flex: 1 1 0 !important;
        /* Match non-fullscreen */
        min-width: 0 !important;
        width: 0 !important;
        /* Match non-fullscreen */
        height: 18px !important;
        /* Match non-fullscreen */
        min-height: 18px !important;
        max-height: 18px !important;
        padding: 1px 2px !important;
        /* Match non-fullscreen */
        font-size: 0.5rem !important;
        /* Match non-fullscreen */
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* Non-fullscreen landscape: Animation select - same as portrait */
    .dynamic-showcase:not(.mobile-fullscreen):has(#model-gallery.active) .threejs-controls #animation-select {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* Fullscreen landscape: Animation select - same as portrait */
    body.mobile-fullscreen-active .threejs-controls #animation-select,
    html.mobile-fullscreen-active .threejs-controls #animation-select,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls #animation-select,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .threejs-controls #animation-select {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    /* ============================================================
       LANDSCAPE FULLSCREEN: Shading Overlay
       ============================================================
       Position: Bottom right corner (above 2-row three.js controls)
       Controls: bottom: 5px, 2 rows ~36px tall, 15px gap = 56px
       z-index: 10090 (higher than controls at 10000 and joystick at 10005) to ensure visibility
       ============================================================ */
    /* Landscape fullscreen: Show shading overlay - must override base hiding rule (line 3127) */
    /* Higher specificity ensures this rule wins over the base hiding rule */
    body.mobile-fullscreen-active.model-view-active #shading-overlay,
    html.mobile-fullscreen-active.model-view-active #shading-overlay,
    body.mobile-fullscreen-active.model-view-active .dynamic-showcase #shading-overlay,
    html.mobile-fullscreen-active.model-view-active .dynamic-showcase #shading-overlay,
    body.mobile-fullscreen-active #shading-overlay,
    html.mobile-fullscreen-active #shading-overlay {
        position: fixed !important;
        left: auto !important;
        right: 18px !important;
        /* Bottom right corner like desktop */
        transform: none !important;
        /* No centering */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important;
        /* Match non-fullscreen: Buttons at 5px, 2 rows ~52px tall, 15px gap = 72px */
        z-index: 10090 !important;
        /* Increased from 10080 to 10090 to ensure visibility above all */
        padding: 4px 10px !important;
        display: flex !important;
        /* CRITICAL: Override base hiding rule display: none !important (line 3127) */
        visibility: visible !important;
        /* CRITICAL: Override base hiding rule visibility: hidden !important (line 3127) */
        opacity: 1 !important;
        /* CRITICAL: Override base hiding rule opacity: 0 !important (line 3127) */
        pointer-events: auto !important;
        /* CRITICAL: Override base hiding rule pointer-events: none !important (line 3127) */
        width: auto !important;
        background: rgba(6, 9, 15, 0.78) !important;
        border: 1px solid rgba(0, 240, 255, 0.25) !important;
        border-radius: 14px !important;
    }

}

/* ============================================================
   ULTIMATE OVERRIDE: Ensure shading overlay is ALWAYS bottom-right in fullscreen
   This rule has MAXIMUM specificity and comes AFTER all portrait/landscape rules
   ============================================================ */
html body.mobile-fullscreen-active.model-view-active #shading-overlay,
html body.mobile-fullscreen-active #shading-overlay,
html body.mobile-fullscreen-active.model-view-active .dynamic-showcase #shading-overlay,
html body.mobile-fullscreen-active .dynamic-showcase #shading-overlay {
    left: auto !important;
    right: 18px !important;
    transform: none !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
    /* Prevent text centering */
}

/* ============================================================
   CRITICAL: Reset shading overlay after exiting fullscreen
   Must come AFTER all fullscreen rules to override position: fixed
   ============================================================ */
/* Reset shading overlay to absolute when NOT in mobile fullscreen */
/* EXCEPT on mobile portrait where we want position: fixed to prevent scrolling issues */
/* Must preserve bottom-right positioning (right: 18px, no centering transform) */

/* Desktop: reset to absolute (but NOT when parent is in native fullscreen) */
@media (min-width: 769px) {

    body:not(.mobile-fullscreen-active) .dynamic-showcase:not(:fullscreen).model-view #shading-overlay,
    html:not(.mobile-fullscreen-active) .dynamic-showcase:not(:fullscreen).model-view #shading-overlay {
        position: absolute !important;
        /* CRITICAL: Override fullscreen position: fixed !important */
        right: 18px !important;
        /* CRITICAL: Preserve bottom-right positioning */
        left: auto !important;
        transform: none !important;
        /* CRITICAL: No centering transform */
        margin: 0 !important;
        /* CRITICAL: No auto margins that could center */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Mobile landscape: reset to absolute (portrait keeps position: fixed from earlier rule) */
@media (max-width: 768px) and (orientation: landscape) {

    body:not(.mobile-fullscreen-active) .dynamic-showcase.model-view #shading-overlay,
    body:not(.mobile-fullscreen-active) #shading-overlay,
    html:not(.mobile-fullscreen-active) .dynamic-showcase.model-view #shading-overlay,
    html:not(.mobile-fullscreen-active) #shading-overlay {
        position: absolute !important;
        /* CRITICAL: Override fullscreen position: fixed !important */
        right: 18px !important;
        /* CRITICAL: Preserve bottom-right positioning */
        left: auto !important;
        transform: none !important;
        /* CRITICAL: No centering transform */
        margin: 0 !important;
        /* CRITICAL: No auto margins that could center */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Desktop fullscreen right position is handled via JavaScript to ensure it overrides all CSS rules */


/* UNIVERSAL MOBILE RULES - Works on all real devices (iPhone, Android Pixel, Galaxy, etc.)
   ========================================================================================
   - Standard media query: @media (max-width: 768px) - universal breakpoint for all phones
   - Uses standard CSS units: rem, %, calc() - works identically on all devices
   - Orientation-based: portrait/landscape queries work on all real devices
   - Browser previews may differ from real devices - always test on actual hardware
   ======================================================================================== */

/* Mobile fullscreen canvas - ensure proper touch handling */
.dynamic-showcase.mobile-fullscreen .threejs-viewer canvas {
    touch-action: none !important;
    pointer-events: auto !important;
    z-index: 1 !important;
}

/* Model controls are now positioned relative to dynamic showcase card */

.controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.control-btn,
.control-select {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.5rem;
    white-space: nowrap;
    transition: none;
    margin: 0;
    min-height: 12px;
    flex: 1 1 0;
    /* Ensure equal sizing - flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
    min-width: 0;
    /* Allow flex items to shrink below content size */
}

.control-btn:hover,
.control-select:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--accent-color);
    transform: none;
    box-shadow: none;
}

.control-select {
    min-width: 120px;
}

/* Material manipulation controls */
.control-slider {
    width: 80px;
    height: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    cursor: pointer;
    margin: 0 1px;
    flex-shrink: 0;
}

.control-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
}

.control-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent-color);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

label[for="metalness-slider"],
label[for="roughness-slider"] {
    font-size: 0.7rem;
    color: var(--font-color);
    margin: 0 2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Mobile animation select needs more space for readable dropdown names */
@media (max-width: 768px) {
    .control-select {
        min-width: 150px !important;
        max-width: 200px !important;
    }
}

@media (max-width: 480px) {
    .control-select {
        min-width: 120px !important;
        max-width: 160px !important;
    }
}

.control-select:hover {
    transform: none;
}

.control-select option {
    background: #333;
}

/* Show model controls when model gallery is active */
#model-gallery.active~.showcase-caption-area .threejs-controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#model-gallery.active~.showcase-caption-area .showcase-caption {
    display: none;
}


.dynamic-showcase:has(#model-gallery.active) .showcase-caption {
    display: none;
}

/* NUCLEAR OPTION - Force controls to show in model gallery regardless of device */
.dynamic-showcase:has(#model-gallery.active) .threejs-controls,
.dynamic-showcase:has(#model-gallery.active) .threejs-controls *,
.dynamic-showcase:has(#model-gallery.active) .controls-row,
.dynamic-showcase:has(#model-gallery.active) .control-btn,
.dynamic-showcase:has(#model-gallery.active) .control-select,
.dynamic-showcase:has(#model-gallery.active) .control-slider {
    flex-wrap: wrap !important;
    gap: 0.2rem
}

/* Hide controls in image and video modes on ALL devices - MUST BE AFTER MODEL RULES */
.dynamic-showcase:has(#image-gallery.active) .threejs-controls,
.dynamic-showcase:has(#video-gallery.active) .threejs-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


@media (max-width: 768px) {
    .threejs-controls .controls-row:first-child {
        row-gap: 7px !important;
    }
}

/* Hover effect for active controls - only when hovering over the dynamic showcase */
.dynamic-showcase:hover:has(#model-gallery.active) .threejs-controls {
    border: 1px solid var(--accent-color);
    border-bottom: none;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.6), 0 0 15px rgba(0, 240, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Show model info only when model gallery is active - use class-based approach */


/* Show model info row only when model gallery is active */
.dynamic-showcase:has(#model-gallery.active) .model-info-row {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide model info row in image and video modes */
.dynamic-showcase:has(#image-gallery.active) .model-info-row,
.dynamic-showcase:has(#video-gallery.active) .model-info-row {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* CRITICAL: Hide model-info-fade-container UNLESS it has .show class (animated version only) */
/* Hide in ALL modes (desktop, mobile, portrait, landscape) unless it has .show */
.dynamic-showcase .model-info-fade-container:not(.show) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide model-info-fade-container in image and video galleries completely */
.dynamic-showcase:has(#image-gallery.active) .model-info-fade-container,
.dynamic-showcase:has(#video-gallery.active) .model-info-fade-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide #model-name-display directly in image and video galleries */
.dynamic-showcase:has(#image-gallery.active) #model-name-display,
.dynamic-showcase:has(#video-gallery.active) #model-name-display {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* Mobile-specific control visibility fixes */
@media (max-width: 768px) {

    /* Hide controls by default on mobile */
    .threejs-controls {
        display: none !important;
    }

    /* Show controls in mobile fullscreen ONLY when model gallery is active */
    /* NOTE: Landscape fullscreen rules at line 3286+ override this with higher specificity */
    .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) .threejs-controls {
        display: flex !important;
    }

    /* Show controls only when model gallery is active on mobile */
    .dynamic-showcase:has(#model-gallery.active) .threejs-controls {
        bottom: 5px !important;
    }

    /* Show model info only when model gallery is active on mobile */
    .model-info-fade-container.show {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        bottom: 32px !important;
        padding: 0.25rem 0.5rem !important;
        border-radius: 6px !important;
        margin: 0 0.5rem !important;
        height: 32px !important;
        max-width: calc(100% - 1rem) !important;
        overflow: hidden !important;
    }

    .model-info-fade-container.show .model-info {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }

    /* Lighting info element removed - no longer needed */
}






/* FINAL OVERRIDE: Hide Three.js controls on mobile when NOT in fullscreen, EXCEPT for model gallery in landscape - must be last */
@media (max-width: 768px) {

    /* Hide controls on mobile non-fullscreen (landscape overridden above) */
    .dynamic-showcase:not(.mobile-fullscreen):not(:has(#model-gallery.active)) .threejs-controls {
        display: none !important;
    }

    /* Portrait non-fullscreen: always hide */
    @media (orientation: portrait) {
        .dynamic-showcase:not(.mobile-fullscreen) .threejs-controls {
            display: none !important;
        }
    }

    /* Show controls in fullscreen (handled by fullscreen rules above) */
    .dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) .threejs-controls {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ULTRA AGGRESSIVE MOBILE HIDING - FORCE HIDE ON ALL MOBILE DEVICES */
@media screen and (max-width: 768px),
screen and (max-width: 1024px) and (orientation: portrait),
screen and (max-width: 1024px) and (max-height: 768px) {

    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) .threejs-controls,
    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) .threejs-controls *,
    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) .controls-row,
    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) .control-btn,
    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) .control-select,
    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) .control-slider,
    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) label[for="metalness-slider"],
    .dynamic-showcase:not(.mobile-fullscreen):not(:fullscreen):not(:has(#model-gallery.active)) label[for="roughness-slider"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
    }
}



/* Lighting info element removed - no longer needed */




/* Hide controls in image and video modes - SMALL MOBILE */
.dynamic-showcase:has(#image-gallery.active) .threejs-viewer .threejs-controls,
.dynamic-showcase:has(#video-gallery.active) .threejs-viewer .threejs-controls {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}





@media (max-width: 480px) {

    #hdri-toggle,
    #hdri-cycle,
    #lighting-cycle {
        height: 32px !important;
        font-size: 0.75rem !important;
        max-width: 100px !important;
    }
}

/* Animation select gets more space on small mobile */
#animation-select {
    min-width: 120px !important;
    max-width: 160px !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* === INFO MODAL POPUP === */
.info-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.info-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    /* Maximum z-index value to be above everything including fullscreen elements */
}

/* Ensure info modal is visible in fullscreen mode - HIGHEST Z-INDEX */
.dynamic-showcase:fullscreen .info-modal,
.dynamic-showcase.mobile-fullscreen .info-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    /* Maximum z-index value */
}

.dynamic-showcase:fullscreen .info-modal.active,
.dynamic-showcase.mobile-fullscreen .info-modal.active,
body.mobile-fullscreen-active .info-modal.active,
html.mobile-fullscreen-active .info-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    /* Ensure active state also has max z-index - above joystick (10005) */
}


.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    animation: fadeInBackdrop 0.4s ease;
}

/* Ensure modal backdrop appears above fullscreen content */
.dynamic-showcase:fullscreen .modal-backdrop,
.dynamic-showcase.mobile-fullscreen .modal-backdrop {
    z-index: 2147483646 !important;
    /* Just below the modal itself */
}

@keyframes fadeInBackdrop {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
    }

    to {
        opacity: 1;
        backdrop-filter: blur(20px);
    }
}

.modal-container {
    position: relative;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    margin: auto;
    background: linear-gradient(135deg, var(--card-color), rgba(33, 35, 40, 0.95));
    border: 2px solid var(--accent-color);
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.5), 0 20px 60px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    animation: modalSlideIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(20px);
    z-index: 2147483647;
    /* Ensure container appears above backdrop */
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(0, 240, 255, 0.05));
    border-bottom: 2px solid var(--accent-color);
    position: relative;
    overflow: hidden;
}

.modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.modal-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
    margin: 0;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
    letter-spacing: 2px;
}

.close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6);
}

.close-btn svg {
    width: 20px;
    height: 20px;
    color: var(--accent-color);
}

.modal-content {
    padding: 2rem;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) transparent;
}

.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 4px;
}

.info-section {
    margin-bottom: 2.5rem;
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
    transform: translateY(30px);
}

.info-section:nth-child(1) {
    animation-delay: 0.1s;
}

.info-section:nth-child(2) {
    animation-delay: 0.2s;
}

.info-section:nth-child(3) {
    animation-delay: 0.3s;
}

.info-section:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.info-section h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 1rem;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.3);
    border-left: 4px solid var(--accent-color);
    padding-left: 1rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.info-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-card:hover::before {
    opacity: 1;
}

.info-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px rgba(0, 240, 255, 0.2);
}

.info-card .info-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    display: block;
}

.info-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
}

.info-card p {
    color: var(--font-color);
    line-height: 1.6;
    margin: 0;
}

.controls-guide {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.control-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border-left: 4px solid var(--accent-color);
    transition: all 0.3s ease;
}

.control-item:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: translateX(10px);
}

.control-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}

.control-name {
    font-weight: 600;
    color: var(--accent-color);
    min-width: 120px;
}

.control-desc {
    color: var(--font-color);
    flex: 1;
}

.credits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.credit-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.credit-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 240, 255, 0.15);
}

/* Featured bio card styling */
.credit-card.featured-bio {
    grid-column: 1 / -1;
    /* Span full width */
    background: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(0, 240, 255, 0.02));
    border: 2px solid var(--accent-color);
    position: relative;
    overflow: hidden;
}

.credit-card.featured-bio::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.1), transparent);
    animation: shimmer 4s infinite;
}

.credit-card.featured-bio h4 {
    color: var(--accent-color);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
}

.credit-card.featured-bio p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.credit-card.featured-bio p:last-child {
    margin-bottom: 0;
}

.credit-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.credit-card p {
    color: var(--font-color);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.credit-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.credit-card li {
    color: var(--font-color);
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(0, 240, 255, 0.1);
}

.credit-card li:last-child {
    border-bottom: none;
}

.tips-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.tip-item:hover {
    background: rgba(0, 240, 255, 0.1);
    border-color: var(--accent-color);
    transform: translateX(10px);
}

.tip-icon {
    font-size: 1.5rem;
    margin-top: 0.25rem;
}

.tip-item p {
    color: var(--font-color);
    line-height: 1.6;
    margin: 0;
}

.tip-item strong {
    color: var(--accent-color);
}



/* REQUIREMENT 5: Smooth transitions */
.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: fullscreenEnter 0.3s ease-out !important;
}

.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .gallery-arrow,
.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .mobile-fullscreen-exit,
.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .nav-button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen .showcase-viewer {
    transition: all 0.3s ease-out !important;
}

/* Entrance animation */
@keyframes fullscreenEnter {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

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

/* Exit animation */
@keyframes fullscreenExit {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Tap ripple effect animation - Apple glass style with growing cyan ring that fades */
@keyframes rippleExpand {
    0% {
        width: 20px;
        height: 20px;
        opacity: 1;
        border-width: 1px;
        transform: translate(-50%, -50%) scale(1);
        background: rgba(255, 255, 255, 0.02);
        border-color: rgba(0, 240, 255, 0.8);
        box-shadow: 0 0 10px rgba(0, 240, 255, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.03);
    }

    25% {
        opacity: 0.9;
        background: rgba(255, 255, 255, 0.015);
        border-color: rgba(0, 240, 255, 0.6);
        box-shadow: 0 0 12px rgba(0, 240, 255, 0.35), inset 0 0 6px rgba(255, 255, 255, 0.02);
    }

    50% {
        opacity: 0.6;
        background: rgba(255, 255, 255, 0.01);
        border-color: rgba(0, 240, 255, 0.4);
        box-shadow: 0 0 8px rgba(0, 240, 255, 0.25), inset 0 0 4px rgba(255, 255, 255, 0.015);
    }

    75% {
        opacity: 0.3;
        background: rgba(255, 255, 255, 0.008);
        border-color: rgba(0, 240, 255, 0.25);
        box-shadow: 0 0 4px rgba(0, 240, 255, 0.15), inset 0 0 2px rgba(255, 255, 255, 0.01);
    }

    100% {
        width: 80px;
        height: 80px;
        opacity: 0;
        border-width: 0.5px;
        transform: translate(-50%, -50%) scale(1);
        background: rgba(255, 255, 255, 0.005);
        border-color: rgba(0, 240, 255, 0.1);
        box-shadow: 0 0 2px rgba(0, 240, 255, 0.05), inset 0 0 1px rgba(255, 255, 255, 0.005);
    }
}

/* Ensure ripple is visible with glass effect */
.tap-ripple {
    will-change: width, height, opacity, border-width, background, border-color;
    -webkit-animation: rippleExpand 0.5s ease-out forwards;
    animation: rippleExpand 0.5s ease-out forwards;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Apply exit animation when exiting fullscreen */
.dynamic-showcase.mobile-fullscreen.exiting {
    animation: fullscreenExit 0.3s ease-in !important;
}

/* Mobile responsiveness for info modal */
@media (max-width: 768px) {
    .modal-container {
        width: 95%;
        max-height: 95vh;
        margin: 1rem auto;
    }

    .modal-header {
        padding: 1rem 1.5rem;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }

    .modal-content {
        padding: 1.5rem;
        max-height: calc(95vh - 100px);
    }

    .info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .credits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .info-card {
        padding: 1rem;
    }

    .credit-card {
        padding: 1rem;
    }

    .control-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .control-name {
        min-width: auto;
    }

    .tip-item {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .modal-container {
        width: 98%;
        margin: 0.5rem auto;
        border-radius: 15px;
    }

    .modal-header {
        padding: 0.75rem 1rem;
    }

    .modal-header h2 {
        font-size: 1rem;
        letter-spacing: 1px;
    }

    .close-btn {
        width: 35px;
        height: 35px;
    }

    .close-btn svg {
        width: 18px;
        height: 18px;
    }

    .modal-content {
        padding: 1rem;
        max-height: calc(98vh - 80px);
    }

    .info-section {
        margin-bottom: 1.5rem;
    }

    .info-section h3 {
        font-size: 1rem;
        margin-bottom: 0.75rem;
    }

    .info-card {
        padding: 0.75rem;
    }

    .info-card .info-icon {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .info-card h4 {
        font-size: 1rem;
    }

    .credit-card {
        padding: 0.75rem;
    }

    .credit-card h4 {
        font-size: 1rem;
    }

    .tip-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .tip-icon {
        font-size: 1.25rem;
    }
}




/* === MASTER CONTROL PANEL STYLES === */
.master-control-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 160px;
    display: flex;
    flex-direction: column;
    background: rgba(26, 28, 32, 0.9);
    border: 1px solid rgba(0, 240, 255, 0.3);
    border-radius: 4px;
    z-index: 10050 !important;
    backdrop-filter: blur(15px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 12px rgba(0, 240, 255, 0.2);
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    /* Exclude z-index from transition */
    pointer-events: auto;
    /* ensure panel can capture wheel/touch */
    max-height: 100%;
    /* contain panel within canvas container */
    overscroll-behavior: contain;
    overflow: visible;
    /* FIXED: Changed from hidden to allow panel-content to scroll */
    box-sizing: border-box;
}

/* Position to align right side with canvas right side */
.dynamic-showcase:not(:fullscreen) .master-control-panel {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

/* Show SSR controls in fullscreen mode - keep same positioning as normal mode */
.dynamic-showcase:fullscreen:has(#model-gallery.active) .master-control-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 999999999 !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    max-height: 100% !important;
}

/* Hide SSR controls in image/video galleries in desktop fullscreen */
.dynamic-showcase:fullscreen:has(#image-gallery.active) .master-control-panel,
.dynamic-showcase:fullscreen:has(#video-gallery.active) .master-control-panel {
    display: none !important;
    opacity: 0 !important;
}

/* Exit button positioning handled by #model-gallery #mobile-exit-btn rule */

/* Mobile fullscreen needs fixed positioning since showcase becomes fixed */
.dynamic-showcase.mobile-fullscreen:has(#model-gallery.active) .master-control-panel {
    position: fixed !important;
    top: 64px !important;
    right: 0 !important;
    z-index: 999999999 !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    display: flex !important;
    /* Use flex to allow content to expand */
    flex-direction: column !important;
    visibility: visible !important;
    max-height: calc(100vh - 64px - 90px) !important;
    /* Expand to fit, stop before three.js controls */
    overflow: hidden !important;
    /* Contain content, panel-content handles scroll */
}


/* FULLSCREEN SCROLLING: Make panel-content scrollable when it exceeds available space */
.dynamic-showcase.mobile-fullscreen .master-control-panel .panel-content {
    flex: 1 !important;
    /* Fill available panel space */
    max-height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    pointer-events: auto !important;
}

/* Hide SSR controls in image/video galleries in mobile fullscreen */
.dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .master-control-panel,
.dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .master-control-panel {
    display: none !important;
    opacity: 0 !important;
}

/* Only show in model view */
.dynamic-showcase:has(#model-gallery.active) .master-control-panel {
    opacity: 1;
    transform: translateX(0);
}

.master-control-panel:hover {
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 25px rgba(0, 240, 255, 0.3);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: rgba(0, 240, 255, 0.1);
    border-bottom: 1px solid rgba(0, 240, 255, 0.2);
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    transition: all 0.3s ease;
}

.panel-header:hover {
    background: rgba(0, 240, 255, 0.15);
    border-bottom-color: rgba(0, 240, 255, 0.3);
}

.panel-mode-toggle {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(0, 240, 255, 0.15);
    display: none;
    /* Hidden by default when panel is collapsed */
    justify-content: flex-start;
    align-items: center;
}

/* Show lock toggle only when panel is open */
.master-control-panel.panel-open .panel-mode-toggle {
    display: flex;
}

.panel-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Exo 2', sans-serif;
}

.panel-mode-switch input {
    display: none;
}

.switch-indicator {
    width: 28px;
    height: 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2);
    position: relative;
    transition: background 0.2s;
}

.switch-indicator::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #00f0ff;
    position: absolute;
    top: 1px;
    left: 1px;
    transition: transform 0.2s;
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}

.panel-mode-switch input:checked+.switch-indicator {
    background: rgba(0, 240, 255, 0.25);
}

.panel-mode-switch input:checked+.switch-indicator::after {
    transform: translateX(14px);
}

.switch-label {
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.panel-title {
    font-size: 11px;
    font-weight: 600;
    color: #00f0ff;
    font-family: 'Exo 2', sans-serif;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.5);
    line-height: 1;
}

.panel-toggle {
    background: rgba(0, 240, 255, 0.2);
    border: 1px solid rgba(0, 240, 255, 0.3);
    color: #00f0ff;
    font-size: 10px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.3s ease;
    line-height: 1;
}

.panel-toggle:hover {
    background: rgba(0, 240, 255, 0.3);
    border-color: rgba(0, 240, 255, 0.5);
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

/* Panel content scroll behavior */
.panel-content {
    padding: 6px;
    max-height: calc(100% - 60px);
    /* fit within panel, accounting for header (~32px) and mode-toggle (~28px) */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* smooth momentum scroll on mobile */
    overscroll-behavior: contain;
    /* prevent parent scroll hijack */
    touch-action: pan-y;
    /* allow vertical panning within panel */
    flex: 1 1 auto;
    min-height: 0;
    /* allow flex child to shrink for overflow to work */
    pointer-events: auto !important;
    /* ensure scroll/drag events are captured */
}

.panel-content.locked {
    max-height: calc(100% - 60px);
    /* same max-height when multiple sections are open */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* enable scrolling when multiple sections are open */
    overscroll-behavior: contain;
    touch-action: pan-y;
}

/* Give smaller but still scrollable height on very small screens */
@media (max-height: 700px) {

    .panel-content,
    .panel-content.locked {
        max-height: calc(100% - 60px);
        /* same calculation, fits within panel */
    }
}

/* Ensure sliders are draggable on touch (don’t block horizontal thumb movement) */
input[type="range"] {
    touch-action: pan-x manipulation;
}

/* Improve slider usability: larger track and thumb for touch */
input[type="range"].effect-slider {
    height: 26px;
}

.slider-value {
    font-size: 0.9rem !important;
}

.slider-group label {
    font-size: 0.9rem !important;
}

input[type="range"].effect-slider::-webkit-slider-runnable-track {
    height: 6px;
    background: rgba(0, 240, 255, 0.25);
    border-radius: 4px;
}

input[type="range"].effect-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    width: 20px;
    margin-top: -7px;
    /* centers thumb on 6px track */
    border-radius: 50%;
    background: #00f0ff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}

input[type="range"].effect-slider::-moz-range-track {
    height: 6px;
    background: rgba(0, 240, 255, 0.25);
    border-radius: 4px;
}

input[type="range"].effect-slider::-moz-range-thumb {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #00f0ff;
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 6px rgba(0, 240, 255, 0.6);
}

.panel-content::-webkit-scrollbar {
    width: 6px;
}

.panel-content::-webkit-scrollbar-thumb {
    background: rgba(0, 240, 255, 0.4);
    border-radius: 3px;
}

/* Hide scrollbars for all category content */
.category-content,
.control-group,
.slider-group {
    overflow-x: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.category-content::-webkit-scrollbar,
.control-group::-webkit-scrollbar,
.slider-group::-webkit-scrollbar {
    display: none !important;
}

/* Make controls panel wider */
.threejs-controls {
    min-width: 200px !important;
    max-width: 250px !important;
}

.category-section {
    margin-bottom: 8px;
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    background: rgba(0, 240, 255, 0.08);
    border: 1px solid rgba(0, 240, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
    /* Ensure it appears over navigation arrows */
}

.category-header:hover {
    background: rgba(0, 240, 255, 0.12);
    border-color: rgba(0, 240, 255, 0.3);
}

.category-title {
    font-size: 10px;
    font-weight: 500;
    color: #00f0ff;
    font-family: 'Exo 2', sans-serif;
    text-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.category-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 9px;
    cursor: pointer;
    padding: 1px;
    border-radius: 3px;
    transition: background-color 0.2s;
}

.category-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.category-content {
    padding: 0 6px 6px 6px;
    position: relative;
    z-index: 10;
    border-left: 1px solid rgba(0, 240, 255, 0.1);
}

.control-group {
    margin-bottom: 6px;
}

.effect-toggle-btn {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.2);
    color: #00f0ff;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    width: 100%;
    font-family: 'Exo 2', sans-serif;
    text-shadow: 0 0 5px rgba(0, 240, 255, 0.3);
}

.effect-toggle-btn:hover {
    background: rgba(0, 240, 255, 0.2);
    border-color: rgba(0, 240, 255, 0.4);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
}

.effect-toggle-btn.active {
    background: rgba(0, 240, 255, 0.4);
    border-color: #00f0ff;
    color: #00f0ff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.slider-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 2px;
}

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

.effect-slider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    background: #00f0ff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.effect-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #00f0ff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.slider-group label {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.8);
    font-family: 'Exo 2', sans-serif;
    margin-bottom: 1px;
}

/* Mobile Virtual Joystick Positioning */
/* Joystick is appended to body, so all selectors must target body or direct ID */

:root {
    /* Base placement defaults */
    --joystick-top: calc(50% + 50px);
    --joystick-bottom: auto;
    --joystick-left: 30px;
    --joystick-width: 100px;
    --joystick-height: 100px;
    --joystick-z-index: 10060;

    /* Mode-specific offsets (edit these to reposition per mode) */
    --joystick-portrait-bottom: 75px;
    /* Non-fullscreen portrait - moved down 25px */
    --joystick-landscape-bottom: 160px;
    /* Non-fullscreen landscape */
    --joystick-fullscreen-portrait-top: calc(45% + 90px + 50px);
    /* Moved down 50px total (25px + 25px) for better positioning */
    --joystick-fullscreen-landscape-bottom: calc(27.5vh + 21px - 50px - 10px);
}

#mobile-joystick {
    position: absolute;
    top: var(--joystick-top);
    bottom: var(--joystick-bottom);
    left: var(--joystick-left);
    width: var(--joystick-width);
    height: var(--joystick-height);
    z-index: var(--joystick-z-index) !important;
}

/* CRITICAL: Hide joystick in image and video galleries - ALL MODES (windowed and fullscreen, mobile and desktop) */
/* This ensures joystick NEVER appears in image/video galleries */
.dynamic-showcase:has(#image-gallery.active) #mobile-joystick,
.dynamic-showcase:has(#video-gallery.active) #mobile-joystick,
body:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
body:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
html:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
html:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
/* Desktop fullscreen */
.dynamic-showcase:fullscreen:has(#image-gallery.active) #mobile-joystick,
.dynamic-showcase:fullscreen:has(#video-gallery.active) #mobile-joystick,
body:has(.dynamic-showcase:fullscreen:has(#image-gallery.active)) #mobile-joystick,
body:has(.dynamic-showcase:fullscreen:has(#video-gallery.active)) #mobile-joystick,
/* Hide joystick when info modal or gallery wall modal is open */
:has(.info-modal.active) #mobile-joystick,
:has(.gallery-wall-modal.active) #mobile-joystick,
body:has(.info-modal.active) #mobile-joystick,
body:has(.gallery-wall-modal.active) #mobile-joystick,
html:has(.info-modal.active) #mobile-joystick,
html:has(.gallery-wall-modal.active) #mobile-joystick {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    z-index: -9999 !important;
}

/* Mobile - all modes (windowed and fullscreen) */
@media (max-width: 768px) {

    .dynamic-showcase:has(#image-gallery.active) #mobile-joystick,
    .dynamic-showcase:has(#video-gallery.active) #mobile-joystick,
    body:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    body:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    html:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    html:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    body.mobile-fullscreen-active:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    body.mobile-fullscreen-active:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    html.mobile-fullscreen-active:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    html.mobile-fullscreen-active:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    /* Hide joystick when info modal or gallery wall modal is open in mobile */
    body.mobile-fullscreen-active:has(.info-modal.active) #mobile-joystick,
    html.mobile-fullscreen-active:has(.info-modal.active) #mobile-joystick,
    body.mobile-fullscreen-active:has(.gallery-wall-modal.active) #mobile-joystick,
    html.mobile-fullscreen-active:has(.gallery-wall-modal.active) #mobile-joystick {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -9999 !important;
    }
}

/* Portrait non-fullscreen placement */
@media (orientation: portrait) {

    body:not(.mobile-fullscreen-active),
    html:not(.mobile-fullscreen-active) {
        --joystick-top: auto;
        --joystick-bottom: var(--joystick-portrait-bottom);
        --joystick-left: 10px;
        /* Keep original position for windowed mode */
    }
}

/* Portrait non-fullscreen sizing (keep small-screen adjustments) */
@media (max-width: 768px) and (orientation: portrait) {

    body:not(.mobile-fullscreen-active) .dynamic-showcase #mobile-joystick,
    body:not(.mobile-fullscreen-active) #mobile-joystick {
        width: 70px !important;
        height: 70px !important;
    }

    body:not(.mobile-fullscreen-active) .dynamic-showcase #mobile-joystick #mobile-joystick-knob,
    body:not(.mobile-fullscreen-active) #mobile-joystick #mobile-joystick-knob {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Landscape non-fullscreen placement */
@media (orientation: landscape) {

    body:not(.mobile-fullscreen-active),
    html:not(.mobile-fullscreen-active) {
        --joystick-top: auto;
        --joystick-bottom: var(--joystick-landscape-bottom);
        --joystick-left: 45px;
    }
}

/* Landscape non-fullscreen sizing tweaks for small screens */
@media (max-width: 768px) and (orientation: landscape) {

    body:not(.mobile-fullscreen-active) .dynamic-showcase #mobile-joystick,
    body:not(.mobile-fullscreen-active) #mobile-joystick {
        width: 85px !important;
        height: 85px !important;
    }
}

/* ============================================================
   MOBILE FULLSCREEN: Virtual Joystick
   ============================================================ */
/* Portrait fullscreen */
@media (orientation: portrait) {

    body.mobile-fullscreen-active,
    html.mobile-fullscreen-active {
        --joystick-top: var(--joystick-fullscreen-portrait-top);
        --joystick-bottom: auto;
        --joystick-left: 0px;
        /* Positioned to touch left edge - container is 120px wide, centered at 60px, so left edge at 0px touches screen edge */
        --joystick-width: 100px;
        --joystick-height: 100px;
        --joystick-z-index: 10005;
    }

    body.mobile-fullscreen-active #mobile-joystick,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #mobile-joystick,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #mobile-joystick {
        position: fixed !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10060 !important;
    }

    /* Portrait fullscreen joystick positioning and sizing */
    @media (orientation: portrait) {

        body.mobile-fullscreen-active,
        html.mobile-fullscreen-active {
            --joystick-top: var(--joystick-fullscreen-portrait-top);
            --joystick-bottom: auto;
            --joystick-left: 0px;
            /* Positioned to touch left edge - container is 120px wide, so left: 0px makes outer circle touch screen edge */
        }

        /* Larger joystick in portrait fullscreen */
        body.mobile-fullscreen-active #mobile-joystick,
        html.mobile-fullscreen-active #mobile-joystick {
            width: 120px !important;
            /* Larger outer circle */
            height: 120px !important;
            /* Larger outer circle */
            left: 0px !important;
            /* Touch left edge of screen - container is 120px wide */
        }

        /* Smaller knob in portrait fullscreen */
        body.mobile-fullscreen-active #mobile-joystick #mobile-joystick-knob,
        html.mobile-fullscreen-active #mobile-joystick #mobile-joystick-knob {
            width: 42px !important;
            /* Smaller inner circle */
            height: 42px !important;
            /* Smaller inner circle */
        }
    }

    /* Hide joystick in image and video galleries - only show in model view */
    body.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) #mobile-joystick,
    body.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) #mobile-joystick,
    html.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) #mobile-joystick,
    html.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) #mobile-joystick,
    body.mobile-fullscreen-active:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    body.mobile-fullscreen-active:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    html.mobile-fullscreen-active:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    html.mobile-fullscreen-active:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    /* Hide joystick when info modal or gallery wall modal is open in portrait fullscreen */
    body.mobile-fullscreen-active:has(.info-modal.active) #mobile-joystick,
    html.mobile-fullscreen-active:has(.info-modal.active) #mobile-joystick,
    body.mobile-fullscreen-active:has(.gallery-wall-modal.active) #mobile-joystick,
    html.mobile-fullscreen-active:has(.gallery-wall-modal.active) #mobile-joystick {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -9999 !important;
    }
}

/* Landscape fullscreen */
@media (orientation: landscape) {

    body.mobile-fullscreen-active,
    html.mobile-fullscreen-active {
        --joystick-top: auto;
        --joystick-bottom: var(--joystick-fullscreen-landscape-bottom);
        --joystick-left: 0px;
        /* Left-justified to touch left edge - container is 85px wide */
        --joystick-width: 85px;
        --joystick-height: 85px;
        --joystick-z-index: 10005;
    }

    body.mobile-fullscreen-active #mobile-joystick,
    html.mobile-fullscreen-active #mobile-joystick,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #mobile-joystick,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #mobile-joystick {
        position: fixed !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 10060 !important;
    }

    /* Joystick knob size - proportionally smaller */
    body.mobile-fullscreen-active #mobile-joystick #mobile-joystick-knob,
    html.mobile-fullscreen-active #mobile-joystick #mobile-joystick-knob,
    body.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #mobile-joystick #mobile-joystick-knob,
    html.mobile-fullscreen-active .dynamic-showcase.mobile-fullscreen #mobile-joystick #mobile-joystick-knob {
        width: 34px !important;
        /* Proportionally smaller (85% of 40px) */
        height: 34px !important;
        /* Proportionally smaller (85% of 40px) */
    }

    /* Hide joystick in image and video galleries - only show in model view */
    body.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) #mobile-joystick,
    body.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) #mobile-joystick,
    html.mobile-fullscreen-active .dynamic-showcase:has(#image-gallery.active) #mobile-joystick,
    html.mobile-fullscreen-active .dynamic-showcase:has(#video-gallery.active) #mobile-joystick,
    body.mobile-fullscreen-active:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    body.mobile-fullscreen-active:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    html.mobile-fullscreen-active:has(.dynamic-showcase:has(#image-gallery.active)) #mobile-joystick,
    html.mobile-fullscreen-active:has(.dynamic-showcase:has(#video-gallery.active)) #mobile-joystick,
    /* Hide joystick when info modal or gallery wall modal is open in landscape fullscreen */
    body.mobile-fullscreen-active:has(.info-modal.active) #mobile-joystick,
    html.mobile-fullscreen-active:has(.info-modal.active) #mobile-joystick,
    body.mobile-fullscreen-active:has(.gallery-wall-modal.active) #mobile-joystick,
    html.mobile-fullscreen-active:has(.gallery-wall-modal.active) #mobile-joystick {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        z-index: -9999 !important;
    }
}

/* ============================================================
   CRITICAL: Final reset for joystick after exiting fullscreen
   Must come AFTER all fullscreen rules to override position: fixed
   ============================================================ */
/* Reset joystick to absolute when NOT in mobile fullscreen */
body:not(.mobile-fullscreen-active) .dynamic-showcase #mobile-joystick,
body:not(.mobile-fullscreen-active) #mobile-joystick,
html:not(.mobile-fullscreen-active) .dynamic-showcase #mobile-joystick,
html:not(.mobile-fullscreen-active) #mobile-joystick {
    position: absolute !important;
    /* CRITICAL: Override fullscreen position: fixed !important */
}

/* Desktop fullscreen: Force controls visible */
.dynamic-showcase:fullscreen:has(#model-gallery.active) #threejs-controls.threejs-controls,
.dynamic-showcase:fullscreen:has(#model-gallery.active) .threejs-controls {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* ULTIMATE OVERRIDE: Force hide controls in mobile fullscreen for image/video galleries - MUST BE ABSOLUTELY LAST */
html body .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) #threejs-controls.threejs-controls,
html body .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) #threejs-controls.threejs-controls *,
html body .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .threejs-controls,
html body .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .threejs-controls *,
html body .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .threejs-controls .controls-row,
html body .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .threejs-controls .control-btn,
html body .dynamic-showcase.mobile-fullscreen:has(#image-gallery.active) .threejs-controls .control-select,
html body .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) #threejs-controls.threejs-controls,
html body .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) #threejs-controls.threejs-controls *,
html body .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .threejs-controls,
html body .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .threejs-controls *,
html body .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .threejs-controls .controls-row,
html body .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .threejs-controls .control-btn,
html body .dynamic-showcase.mobile-fullscreen:has(#video-gallery.active) .threejs-controls .control-select {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    bottom: auto !important;
    right: auto !important;
    z-index: -1 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
}

/* === GALLERY WALL MODAL === */
.gallery-wall-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;
    /* Maximum z-index value to be above everything including fullscreen elements */
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.gallery-wall-modal.active,
.dynamic-showcase.mobile-fullscreen .gallery-wall-modal.active,
body.mobile-fullscreen-active .gallery-wall-modal.active,
html.mobile-fullscreen-active .gallery-wall-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    /* Maximum z-index value to be above everything including fullscreen elements and joystick (10005) */
}

.gallery-wall-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(20px);
    animation: fadeInBackdrop 0.4s ease;
}

.gallery-wall-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    z-index: 10001;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
}

.gallery-wall-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(200, 0, 255, 0.15), rgba(255, 0, 255, 0.1));
    border-bottom: 2px solid rgba(200, 0, 255, 0.4);
    position: relative;
    overflow: hidden;
    z-index: 10002;
    flex-shrink: 0;
}

.gallery-wall-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(200, 0, 255, 0.1), transparent);
    animation: shimmer 3s infinite;
}

.gallery-wall-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(200, 0, 255, 0.9);
    margin: 0;
    text-shadow: 0 0 10px rgba(200, 0, 255, 0.5);
    letter-spacing: 2px;
}

.gallery-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(200, 0, 255, 0.4);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.gallery-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 20px rgba(200, 0, 255, 0.6);
    border-color: rgba(255, 0, 255, 0.6);
}

.gallery-close-btn svg {
    width: 20px;
    height: 20px;
    color: rgba(200, 0, 255, 0.9);
}

.gallery-wall-content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 0, 255, 0.5) transparent;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gallery-wall-grid {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
}

.gallery-wall-content::-webkit-scrollbar {
    width: 8px;
}

.gallery-wall-content::-webkit-scrollbar-track {
    background: transparent;
}

.gallery-wall-content::-webkit-scrollbar-thumb {
    background: rgba(200, 0, 255, 0.5);
    border-radius: 4px;
}

.gallery-wall-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-start;
}

.gallery-wall-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
    background: rgba(33, 35, 40, 0.5);
}

.gallery-wall-item:hover {
    transform: translateY(-4px) scale(1.02);
    border-color: rgba(200, 0, 255, 0.5);
    box-shadow: 0 8px 25px rgba(200, 0, 255, 0.4);
}

.gallery-wall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.gallery-wall-item:hover img {
    transform: scale(1.05);
}

.gallery-wall-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gallery-wall-item:hover::after {
    opacity: 1;
}

.gallery-wall-item-tooltip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: rgba(200, 0, 255, 0.9);
    padding: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.gallery-wall-item:hover .gallery-wall-item-tooltip {
    opacity: 1;
}

/* === GALLERY VIEWER (FULL-SCREEN) === */
.gallery-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2147483647;
    /* Maximum z-index value to be above everything including fullscreen elements */
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: #000000;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
}

/* Fullscreen mode - no borders, no padding */
.gallery-viewer:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000000 !important;
}

.gallery-viewer:-webkit-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000000 !important;
}

.gallery-viewer:-moz-full-screen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000000 !important;
}

.gallery-viewer:-ms-fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: #000000 !important;
}

.gallery-viewer.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483647 !important;
    /* Maximum z-index to ensure it's above everything including fullscreen elements */
}

.gallery-viewer-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 1;
    /* Relative to .gallery-viewer parent */
}

.gallery-viewer-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20002;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
}

/* Fullscreen mode - ensure no borders */
.gallery-viewer:fullscreen .gallery-viewer-image-container,
.gallery-viewer:-webkit-full-screen .gallery-viewer-image-container,
.gallery-viewer:-moz-full-screen .gallery-viewer-image-container,
.gallery-viewer:-ms-fullscreen .gallery-viewer-image-container {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100vw !important;
    height: 100vh !important;
}

.gallery-viewer-image {
    /* CRITICAL: Don't use max-width/max-height - let JavaScript handle scaling */
    /* This allows images to fill screen (cover) via transform scale */
    max-width: none;
    max-height: none;
    object-fit: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
    touch-action: none !important;
}

.gallery-viewer-image.dragging {
    cursor: grabbing;
}

.gallery-viewer-image.zoomed {
    cursor: grab;
}

.gallery-viewer-controls {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20003;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    pointer-events: none;
    /* Container doesn't block clicks, but children buttons will have pointer-events: auto */
    opacity: 1;
    transition: opacity 0.3s ease;
    margin: 0;
    border: none;
}

/* CRITICAL: Buttons inside gallery-viewer-controls must be clickable */
.gallery-viewer-controls button,
.gallery-viewer-controls .gallery-viewer-close,
.gallery-viewer-controls .gallery-viewer-nav {
    pointer-events: auto !important;
}

/* Remove any overlay that might block buttons */
.gallery-viewer-controls::before,
.gallery-viewer-controls::after {
    display: none !important;
}

/* Fullscreen mode - adjust padding and ensure buttons work */
.gallery-viewer:fullscreen .gallery-viewer-controls,
.gallery-viewer:-webkit-full-screen .gallery-viewer-controls,
.gallery-viewer:-moz-full-screen .gallery-viewer-controls,
.gallery-viewer:-ms-fullscreen .gallery-viewer-controls {
    padding: 1rem;
    margin: 0;
    border: none;
    z-index: 20010 !important;
}

/* Ensure buttons work in fullscreen */
.gallery-viewer:fullscreen .gallery-viewer-btn,
.gallery-viewer:fullscreen .gallery-viewer-close-btn,
.gallery-viewer:fullscreen .gallery-viewer-nav-btn,
.gallery-viewer:fullscreen .gallery-viewer-counter,
.gallery-viewer:-webkit-full-screen .gallery-viewer-btn,
.gallery-viewer:-webkit-full-screen .gallery-viewer-close-btn,
.gallery-viewer:-webkit-full-screen .gallery-viewer-nav-btn,
.gallery-viewer:-webkit-full-screen .gallery-viewer-counter,
.gallery-viewer:-moz-full-screen .gallery-viewer-btn,
.gallery-viewer:-moz-full-screen .gallery-viewer-close-btn,
.gallery-viewer:-moz-full-screen .gallery-viewer-nav-btn,
.gallery-viewer:-moz-full-screen .gallery-viewer-counter,
.gallery-viewer:-ms-fullscreen .gallery-viewer-btn,
.gallery-viewer:-ms-fullscreen .gallery-viewer-close-btn,
.gallery-viewer:-ms-fullscreen .gallery-viewer-nav-btn,
.gallery-viewer:-ms-fullscreen .gallery-viewer-counter {
    pointer-events: auto !important;
    z-index: 20011 !important;
    cursor: pointer !important;
}

/* Hover effects work in fullscreen - ensure they're visible */
.gallery-viewer:fullscreen .gallery-viewer-btn:hover,
.gallery-viewer:fullscreen .gallery-viewer-close-btn:hover,
.gallery-viewer:fullscreen .gallery-viewer-nav-btn:hover,
.gallery-viewer:fullscreen .gallery-viewer-counter:hover,
.gallery-viewer:-webkit-full-screen .gallery-viewer-btn:hover,
.gallery-viewer:-webkit-full-screen .gallery-viewer-close-btn:hover,
.gallery-viewer:-webkit-full-screen .gallery-viewer-nav-btn:hover,
.gallery-viewer:-webkit-full-screen .gallery-viewer-counter:hover,
.gallery-viewer:-moz-full-screen .gallery-viewer-btn:hover,
.gallery-viewer:-moz-full-screen .gallery-viewer-close-btn:hover,
.gallery-viewer:-moz-full-screen .gallery-viewer-nav-btn:hover,
.gallery-viewer:-moz-full-screen .gallery-viewer-counter:hover,
.gallery-viewer:-ms-fullscreen .gallery-viewer-btn:hover,
.gallery-viewer:-ms-fullscreen .gallery-viewer-close-btn:hover,
.gallery-viewer:-ms-fullscreen .gallery-viewer-nav-btn:hover,
.gallery-viewer:-ms-fullscreen .gallery-viewer-counter:hover {
    background: rgba(200, 0, 255, 0.4) !important;
    border-color: rgba(255, 0, 255, 0.9) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 30px rgba(200, 0, 255, 0.9) !important;
    color: rgba(255, 255, 255, 1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 20012 !important;
}

/* Special handling for close button hover in fullscreen */
.gallery-viewer:fullscreen .gallery-viewer-close-btn:hover,
.gallery-viewer:-webkit-full-screen .gallery-viewer-close-btn:hover,
.gallery-viewer:-moz-full-screen .gallery-viewer-close-btn:hover,
.gallery-viewer:-ms-fullscreen .gallery-viewer-close-btn:hover {
    transform: rotate(90deg) scale(1.2) !important;
}

/* Special handling for nav buttons hover in fullscreen */
.gallery-viewer:fullscreen #gallery-viewer-prev:hover,
.gallery-viewer:fullscreen #gallery-viewer-next:hover,
.gallery-viewer:-webkit-full-screen #gallery-viewer-prev:hover,
.gallery-viewer:-webkit-full-screen #gallery-viewer-next:hover,
.gallery-viewer:-moz-full-screen #gallery-viewer-prev:hover,
.gallery-viewer:-moz-full-screen #gallery-viewer-next:hover,
.gallery-viewer:-ms-fullscreen #gallery-viewer-prev:hover,
.gallery-viewer:-ms-fullscreen #gallery-viewer-next:hover {
    transform: translateY(-50%) scale(1.2) !important;
}

.gallery-viewer-controls.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Always keep buttons visible even when controls are hidden */
.gallery-viewer-controls.hidden .gallery-viewer-btn,
.gallery-viewer-controls.hidden .gallery-viewer-close-btn,
.gallery-viewer-controls.hidden .gallery-viewer-nav-btn {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

.gallery-viewer-btn {
    background: rgba(33, 35, 40, 0.8);
    border: 2px solid rgba(200, 0, 255, 0.4);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    pointer-events: auto !important;
    color: rgba(200, 0, 255, 0.9);
    z-index: 20010 !important;
    position: relative;
}

.gallery-viewer-btn:hover {
    background: rgba(200, 0, 255, 0.4) !important;
    border-color: rgba(255, 0, 255, 0.9) !important;
    transform: scale(1.2) !important;
    box-shadow: 0 0 30px rgba(200, 0, 255, 0.9) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.gallery-viewer-btn:active {
    transform: scale(1.05) !important;
}

.gallery-viewer-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.gallery-viewer-close-btn {
    position: absolute !important;
    top: 2rem !important;
    right: 2rem !important;
    left: auto !important;
    /* Ensure it's not centered */
    z-index: 20015 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transform: none !important;
    /* Remove any transforms that might center it */
}

.gallery-viewer-close-btn:hover {
    background: rgba(200, 0, 255, 0.3) !important;
    border-color: rgba(255, 0, 255, 0.8) !important;
    transform: rotate(90deg) scale(1.15) !important;
    box-shadow: 0 0 25px rgba(200, 0, 255, 0.8) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.gallery-viewer-nav-btn {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 20015 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.gallery-viewer-nav-btn:hover {
    background: rgba(200, 0, 255, 0.3) !important;
    border-color: rgba(255, 0, 255, 0.8) !important;
    box-shadow: 0 0 25px rgba(200, 0, 255, 0.8) !important;
    color: rgba(255, 255, 255, 1) !important;
}

#gallery-viewer-prev:hover {
    transform: translateY(-50%) scale(1.15) !important;
}

#gallery-viewer-next:hover {
    transform: translateY(-50%) scale(1.15) !important;
}

#gallery-viewer-prev {
    left: 60px !important;
    /* Match main showcase positioning */
}

#gallery-viewer-prev:hover {
    transform: translateY(-50%) scale(1.15) !important;
}

#gallery-viewer-next {
    right: 60px !important;
    /* Match main showcase positioning */
}

#gallery-viewer-next:hover {
    transform: translateY(-50%) scale(1.15) !important;
}

.gallery-viewer-counter {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 35, 40, 0.8);
    border: 2px solid rgba(200, 0, 255, 0.4);
    border-radius: 20px;
    padding: 0.5rem 1rem;
    color: rgba(200, 0, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    pointer-events: auto !important;
    z-index: 20010 !important;
    transition: all 0.3s ease;
}

.gallery-viewer-counter:hover {
    background: rgba(200, 0, 255, 0.2) !important;
    border-color: rgba(255, 0, 255, 0.6) !important;
    transform: translateX(-50%) scale(1.1) !important;
    box-shadow: 0 0 15px rgba(200, 0, 255, 0.6) !important;
    color: rgba(255, 255, 255, 1) !important;
}

.gallery-viewer-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(33, 35, 40, 0.5);
    z-index: 20004;
    pointer-events: none;
}

.gallery-viewer-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, rgba(200, 0, 255, 0.6), rgba(255, 0, 255, 0.6));
    transition: width 0.3s ease;
    width: 0%;
}

.gallery-viewer-caption {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(33, 35, 40, 0.9);
    border: 2px solid rgba(200, 0, 255, 0.4);
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    color: rgba(200, 0, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    max-width: 80%;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-viewer-caption.show {
    opacity: 1;
}

.gallery-viewer-edge-left,
.gallery-viewer-edge-right {
    position: absolute;
    top: 0;
    width: 25%;
    height: 100%;
    z-index: 20003;
    /* Lower than buttons (20015+) */
    cursor: pointer;
    pointer-events: none;
    /* Disable by default - only enable on image hover */
}

/* Only enable edge divs when hovering over image container (not buttons) */
.gallery-viewer-image-container:hover .gallery-viewer-edge-left,
.gallery-viewer-image-container:hover .gallery-viewer-edge-right {
    pointer-events: auto;
}

/* But NEVER block buttons - buttons are always on top and clickable */
.gallery-viewer-btn,
.gallery-viewer-close-btn,
.gallery-viewer-nav-btn,
.gallery-viewer-counter {
    z-index: 20015 !important;
    /* Higher than edge divs */
    pointer-events: auto !important;
    position: absolute !important;
    /* Keep absolute positioning */
}

.gallery-viewer-edge-left {
    left: 0;
}

.gallery-viewer-edge-right {
    right: 0;
    cursor: pointer;
}

/* Edge divs should not interfere with button hover */
.gallery-viewer-edge-left:hover,
.gallery-viewer-edge-right:hover {
    background: rgba(200, 0, 255, 0.05);
    z-index: 20003;
    /* Stay below buttons */
}

/* Mobile responsive */
@media (max-width: 768px) {
    .gallery-wall-header {
        padding: 1rem 1.5rem;
    }

    .gallery-wall-header h2 {
        font-size: 1.2rem;
    }

    .gallery-wall-content {
        padding: 1rem;
    }

    .gallery-wall-grid {
        gap: 8px;
    }

    .gallery-wall-row {
        gap: 8px;
    }

    .gallery-viewer-btn {
        width: 44px;
        height: 44px;
    }

    .gallery-viewer-btn svg {
        width: 20px;
        height: 20px;
    }

    .gallery-viewer-close-btn {
        top: 1rem;
        right: 1rem;
    }

    .gallery-viewer-nav-btn {
        top: 50% !important;
        /* Keep centered vertically like main showcase */
        bottom: auto !important;
        transform: translateY(-50%) !important;
        /* Keep centered */
    }

    #gallery-viewer-prev {
        left: 3rem !important;
        /* Match main showcase mobile positioning */
    }

    #gallery-viewer-next {
        right: 3rem !important;
        /* Match main showcase mobile positioning */
    }

    .gallery-viewer-prev {
        left: 1rem;
    }

    .gallery-viewer-next {
        right: 1rem;
    }

    .gallery-viewer-counter {
        top: 1rem;
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }

    .gallery-viewer-caption {
        bottom: 1rem;
        font-size: 0.8rem;
        padding: 0.6rem 1.2rem;
        max-width: 90%;
    }
}

/* --- Desktop Model Info Toggle (Above Controls Button) --- */
.model-info-toggle {
    position: absolute;
    top: 20px;
    /* Above everything - was 120px */
    right: 10px;
    left: auto;
    z-index: 25;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    padding: 8px;
    width: 40px;
    height: 40px;
    display: flex !important;
    /* Always visible */
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 1 !important;
    /* Always visible */
    visibility: visible !important;
    /* Always visible */
}

.model-info-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.1);
}

/* =========================================
   MOBILE PORTRAIT & FULLSCREEN - CLEAN FIX
   ========================================= */

@media (max-width: 768px) {

    /* --- Dynamic Showcase Base --- */
    .dynamic-showcase {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        min-height: 50vh;
        position: relative;
        z-index: 10;
        overflow: hidden;
        gap: 0 !important;
        /* REMOVE GAP */
    }

    .showcase-content-wrapper {
        flex: 1;
        position: relative;
        width: 100%;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        margin-top: 0 !important;
        /* REMOVE MARGIN */
        padding-top: 0 !important;
    }

    .threejs-viewer,
    #threejs-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    /* --- Header Layout (Horizontal) --- */
    .card-header {
        display: flex;
        flex-direction: row;
        /* Keep Horizontal */
        align-items: center;
        justify-content: space-between;
        padding: 0.5rem 0.5rem 0 0.5rem !important;
        /* NO BOTTOM PADDING */
        gap: 0.5rem;
        flex-wrap: nowrap;
        min-height: 50px;
        z-index: 20;
        position: relative;
        background: rgba(10, 14, 26, 0.95);
    }

    .header-title-section {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
        overflow: hidden;
    }

    .header-title-section h2 {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }

    /* Buttons */
    .info-button,
    .gallery-button,
    .v2-button,
    .nav-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .showcase-nav {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    #gallery-counter {
        font-size: 0.75rem;
        white-space: nowrap;
        margin: 0 0.25rem;
        color: rgba(255, 255, 255, 0.7);
    }

    /* --- Fullscreen Mode --- */
    body.mobile-fullscreen-active {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 2147483647 !important;
        /* Max Z-Index */
    }

    body.mobile-fullscreen-active .dynamic-showcase {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 2147483647 !important;
        /* Max Z-Index */
        margin: 0 !important;
        border-radius: 0 !important;
        border: none !important;
        background: #000 !important;
    }

    body.mobile-fullscreen-active .showcase-content-wrapper {
        height: 100% !important;
        max-height: 100% !important;
    }

    /* Hide other elements in fullscreen */
    body.mobile-fullscreen-active .left-top-section,
    body.mobile-fullscreen-active .useful-links,
    body.mobile-fullscreen-active .support-me,
    body.mobile-fullscreen-active .stars-container,
    body.mobile-fullscreen-active #solar-system-container,
    body.mobile-fullscreen-active .site-footer,
    body.mobile-fullscreen-active .footer-container {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -1 !important;
    }

    /* FIX: Landscape UI Logo vertical wrapping */
    .header-card .logo,
    .logo-wrapper {
        white-space: nowrap !important;
        width: auto !important;
        min-width: max-content !important;
        display: inline-block !important;
    }

    /* FIX: Landscape Fullscreen Swipe (Canvas Moving) */
    body.mobile-fullscreen-active .gallery-container,
    body.mobile-fullscreen-active .gallery-item,
    body.mobile-fullscreen-active .gallery-item img,
    body.mobile-fullscreen-active .showcase-content-wrapper {
        touch-action: pan-y pinch-zoom !important;
        overscroll-behavior: none !important;
    }

    /* Ensure controls are visible in fullscreen */
    body.mobile-fullscreen-active .master-control-panel {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        z-index: 2147483647 !important;
        max-height: calc(100vh - 80px) !important;
    }

    body.mobile-fullscreen-active .model-info-toggle {
        position: fixed !important;
        top: 20px !important;
        /* Above everything - was 120px */
        right: 10px !important;
        left: auto !important;
        z-index: 10002 !important;
        display: flex !important;
        /* Always visible */
        opacity: 1 !important;
        /* Always visible */
        visibility: visible !important;
        /* Always visible */
    }

    /* Ensure fullscreen button is visible */
    #maximize-btn {
        display: flex !important;
    }
}

/* === MOBILE JOYSTICK STYLES === */
#mobile-joystick {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    pointer-events: auto;
    /* Ensure it's visible when appended to .dynamic-showcase */
}

/* Mobile Windowed Mode: Raise Joystick above bottom controls (approx 60-80px) */
@media (max-width: 768px) {
    #mobile-joystick {
        bottom: 110px !important;
        left: 20px !important;
        z-index: 10005 !important;
        /* Above .threejs-controls (10000) */
    }
}

/* Mobile Portrait Window Mode: Move joystick down 50px (only in portrait window, not fullscreen or landscape) */
@media (max-width: 768px) and (orientation: portrait) {

    body:not(.mobile-fullscreen-active) #mobile-joystick,
    html:not(.mobile-fullscreen-active) #mobile-joystick,
    body:not(.mobile-fullscreen-active) .dynamic-showcase #mobile-joystick,
    html:not(.mobile-fullscreen-active) .dynamic-showcase #mobile-joystick {
        bottom: 60px !important;
        /* 110px - 50px = 60px (moves it down 50px from the 110px position) */
    }
}

/* Mobile Landscape Windowed Mode: Also raise joystick */
@media (orientation: landscape) and (max-height: 600px) {
    #mobile-joystick {
        bottom: 110px !important;
        left: 20px !important;
        z-index: 10005 !important;
    }
}

/* === LANDSCAPE MOBILE FIXES === */
@media (max-height: 500px) and (orientation: landscape) {

    /* Fix Logo wrapping */
    .header-card .header-top {
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        flex-wrap: nowrap !important;
    }

    .header-card .logo,
    .logo-wrapper,
    .logo-duplicate,
    .nav-logo,
    /* V2 Logo Fix */
    .sticky-nav .nav-logo {
        white-space: nowrap !important;
        width: auto !important;
        min-width: max-content !important;
        display: inline-block !important;
        flex-basis: auto !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        align-self: center !important;
        /* Ensure vertical alignment */
        margin-right: auto !important;
        /* Push nav links to the right if needed, or adjust gap */
    }

    /* Fix click/active effect for static logo */
    .sticky-nav .nav-logo:active,
    .sticky-nav .nav-logo:focus {
        transform: scale(0.95) !important;
        /* Simple scale effect instead of complex transforms used when centered */
    }

    /* Force Sticky Nav horizontal in landscape mobile */
    .sticky-nav .nav-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 60px !important;
        gap: 10px !important;
    }

    /* Fix install app button alignment - move left to make space */
    .sticky-nav #install-menu-link {
        display: flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        white-space: nowrap !important;
        margin-right: 20px !important;
        order: -1 !important;
        /* Move after V1/V2 button */
    }

    /* Ensure V1/V2 button is visible and positioned correctly on LEFT */
    .sticky-nav #v1-btn,
    .sticky-nav #v2-btn {
        display: flex !important;
        margin-right: 15px !important;
        margin-left: 0 !important;
        z-index: 10005 !important;
        position: static !important;
        /* Ensure it flows in the container */
        order: -10 !important;
        /* Force it to be the very first item on the left */
    }

    /* Ensure nav-container allows button on left */
    .sticky-nav .nav-container {
        justify-content: flex-start !important;
    }

    .header-card .logo span {
        display: inline-block !important;
    }

    /* === CRITICAL FIX: Force Hamburger Menu in Landscape === */
    /* Access toggle (Hamburger) */
    /* Show Hamburger if screen is very narrow, otherwise hide */
    /* But for now user requested "text menu", so let's try to show full menu */
    .sticky-nav .nav-toggle {
        display: none !important;
    }

    /* Transform nav-links back to mobile drawer */
    /* Transform nav-links to visible horizontal row */
    .sticky-nav .nav-links {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        flex-direction: row !important;
        z-index: auto !important;
        padding: 0 !important;
        border-bottom: none !important;
        transform: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-height: none !important;
        gap: 8px !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        /* Align links vertically with MYTHOS */
    }

    .sticky-nav .nav-links a {
        font-size: 0.8rem !important;
        /* Smaller to fit on screen */
        color: #fff !important;
        padding: 0.4rem 0.6rem !important;
        display: inline-block !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }

    .sticky-nav .nav-links a::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(45deg, transparent, rgba(0, 240, 255, 0.1), transparent) !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
        pointer-events: none !important;
        z-index: -1 !important;
        border-radius: 4px !important;
    }

    .sticky-nav .nav-links a:hover {
        color: #ffffff !important;
        text-shadow: 0 0 10px var(--accent-color) !important;
        transform: translateY(-2px) !important;
    }

    .sticky-nav .nav-links a:hover::before {
        opacity: 1 !important;
    }

    .sticky-nav .nav-links.active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* === FULLSCREEN LOCKDOWN === */
/* Only prevent native scroll, do NOT fix position (breaks resize) */
body.mobile-fullscreen-active {
    overflow: hidden !important;
    /* touch-action: none !important;  -- REMOVED: Allows browser interactions until JS is ready */
}

/* Re-enable pinch/pan for specific elements but block scroll */
body.mobile-fullscreen-active .gallery-container,
body.mobile-fullscreen-active .showcase-content-wrapper {
    touch-action: pan-y pinch-zoom !important;
}

/* Fullscreen Joystick Positioning */
body.mobile-fullscreen-active #mobile-joystick {
    position: fixed !important;
    bottom: 50px !important;
    left: 30px !important;
    z-index: 2147483647 !important;
    /* Max Z-Index to be on top of everything */
    display: flex !important;
}

/* Portrait fullscreen: Position joystick to touch left edge */
@media (orientation: portrait) {
    body.mobile-fullscreen-active #mobile-joystick {
        left: 0px !important;
        /* Outer circle (120px wide) touches left edge of screen */
    }
}

/* Ensure joystick is visible in landscape fullscreen too */
@media (orientation: landscape) {
    body.mobile-fullscreen-active #mobile-joystick {
        bottom: 65px !important;
        left: 0px !important;
        /* Left-justified to touch left edge */
    }

    /* Eye icon to far right in landscape fullscreen */
    /* Eye icon to far right in landscape fullscreen */
    body.mobile-fullscreen-active .model-info-toggle {
        top: 70px !important;
        right: 20px !important;
        left: auto !important;
        z-index: 2147483647 !important;
        /* Force on top of everything */
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* === CRITICAL JOYSTICK VISIBILITY FIX === */
/* Force hide joystick AND INNER KNOB in non-model galleries */
body:has(#image-gallery.active) #mobile-joystick,
body:has(#video-gallery.active) #mobile-joystick,
body:has(#image-gallery.active) #mobile-joystick-knob,
body:has(#video-gallery.active) #mobile-joystick-knob,
.dynamic-showcase:has(#image-gallery.active) #mobile-joystick,
.dynamic-showcase:has(#video-gallery.active) #mobile-joystick,
html:has(#image-gallery.active) #mobile-joystick,
html:has(#video-gallery.active) #mobile-joystick,
/* Hide joystick when info modal or gallery wall modal is open */
body:has(.info-modal.active) #mobile-joystick,
body:has(.gallery-wall-modal.active) #mobile-joystick,
html:has(.info-modal.active) #mobile-joystick,
html:has(.gallery-wall-modal.active) #mobile-joystick {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* === MOBILE PORTRAIT FULLSCREEN HEAD BUTTON REFINEMENTS === */
@media (max-width: 768px) and (orientation: portrait) {

    /* Target via ID for max specificity */
    body.mobile-fullscreen-active #info-btn,
    body.mobile-fullscreen-active #gallery-btn,
    body.mobile-fullscreen-active #v2-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        max-width: 32px !important;
        /* Remove margin reset here to allow specific margins below */
    }

    /* Reset Header Title Section Gap */
    body.mobile-fullscreen-active .header-title-section {
        gap: 0 !important;
        /* Remove gap to use explicit margins */
        justify-content: flex-start !important;
    }

    /* Explicit Left Margins for Spacing */
    body.mobile-fullscreen-active #gallery-btn {
        margin-left: 15px !important;
        /* Gap between Info and Gallery */
    }

    body.mobile-fullscreen-active #v2-btn {
        margin-left: 15px !important;
        /* Gap between Gallery and V2 */
    }

    /* Fix icon sizes */
    body.mobile-fullscreen-active .v2-icon,
    body.mobile-fullscreen-active .gallery-icon,
    body.mobile-fullscreen-active .info-icon {
        width: 16px !important;
        height: 16px !important;
    }
}

/* Standardize button sizes in landscape fullscreen */
@media (orientation: landscape) {

    body.mobile-fullscreen-active .v2-button,
    body.mobile-fullscreen-active .gallery-button,
    body.mobile-fullscreen-active .info-button {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        margin: 0 4px !important;
    }

    body.mobile-fullscreen-active .v2-button svg,
    body.mobile-fullscreen-active .gallery-button svg,
    body.mobile-fullscreen-active .info-icon {
        width: 20px !important;
        height: 20px !important;
    }
}



/* === CRITICAL MOBILE LAYOUT RECOVERY === */
/* Ensure single column layout on mobile to prevent squashing/stretching */
@media (max-width: 768px) {
    .main-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        transform: none !important;
        /* Reset any desktop scaling */
    }

    /* Reset any persistent transforms on body or html */
    html,
    body {
        transform: none !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
}


/* === CRITICAL HEADER RECOVERY === */
@media (max-width: 768px) {
    .header-card .header-top {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        transform: none !important;
    }

    .header-card .logo,
    .logo-wrapper {
        width: auto !important;
        max-width: 100% !important;
        transform: none !important;
        white-space: normal !important;
        /* Allow wrapping if needed */
    }
}


/* === TABLET & IPAD LANDSCAPE FIXES === */
@media (max-width: 1199px) {

    /* Extend Mobile Layout to Tablets (Single Column) */
    .main-grid {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        height: auto !important;
        max-height: none !important;
        width: 100% !important;
        transform: none !important;
    }

    /* Fix Header Stacking */
    .header-card .header-top {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Fix Logo Wrapping */
    .header-card .logo,
    .logo-wrapper {
        white-space: nowrap !important;
        width: auto !important;
    }

    /* Force Square Aspect Ratio on Buttons */
    /* Force Square Aspect Ratio on Buttons */
    .social-button {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        /* Let height follow width */
    }
}

/* === V2 SPECIFIC FIXES === */
/* Ensure content doesn't go under sticky nav on V2 page */
.sticky-nav+.main-grid {
    margin-top: 80px !important;
    padding-top: 1rem !important;
}

/* Ensure Logo in V2 Header Card doesn't stretch */
.header-card .logo {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 80px !important;
    max-height: 80px !important;
}


/* === LOGO STRETCH FIXED FINAL === */
.header-card .logo,
.logo-wrapper,
.nav-logo {
    min-width: 0 !important;
    min-width: auto !important;
    max-width: 80px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
}

/* ========================================
   CRITICAL FIX: Prevent browser touch interference
   ======================================== */

/* Prevent browser scroll/zoom on ALL image gallery elements */
#image-gallery,
#image-gallery.gallery-container,
#image-gallery .gallery-item,
#image-gallery .gallery-item img {
    touch-action: none !important;
}

/* Also apply to active states */
.gallery-container#image-gallery.active,
.gallery-container#image-gallery.active .gallery-item,
.gallery-container#image-gallery.active .gallery-item img {
    touch-action: none !important;
}