/* === 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;
}

/* 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;
}

/* === MAIN LAYOUT (RESTORED) === */
.main-grid {
    width: 100%;
    max-width: 1200px;
    height: calc(100vh - 3rem);
    max-height: 800px;
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    grid-template-rows: 1fr 260px;
    gap: 0.75rem;
    animation: fadeIn 1.2s ease-out;
    box-sizing: border-box;
    transform-origin: center center;
}

/* Desktop override - ensure our grid settings work on desktop */
@media (min-width: 769px) {
    .main-grid {
        grid-template-rows: 1fr auto !important;
        transform: scale(1.1);
    }
}

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

.dynamic-showcase {
    grid-column: 2;
    grid-row: 1;
    position: relative;
}

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

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

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


/* === 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;
}

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

.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: 1px solid rgba(200, 0, 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;
}

@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);
}

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

.header-card .logo {
    width: 60px;
    height: 60px;
    filter: drop-shadow(0 0 12px var(--accent-color));
    transition: transform 0.3s ease;
}

.header-card .logo:hover {
    transform: scale(1.1);
}

.header-card h1 {
    font-family: var(--font-title);
    font-size: 2rem;
    line-height: 1;
}

.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 {
    height: 260px;
    max-height: 260px;
    overflow-y: auto;
}

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

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

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

.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;
}

/* 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;
}

.dynamic-showcase.mobile-fullscreen .threejs-viewer canvas {
    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;
    touch-action: none !important;
    pointer-events: auto !important;
    image-rendering: auto !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;
}

.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);
}

/* === 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;
}

.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;
}

.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;
}

/* 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 */
    .mobile-fullscreen-active {
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        justify-content: unset !important;
        align-items: unset !important;
        overflow: hidden !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.25rem !important;
        /* Reduced padding for small screens */
        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;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        /* Ensure auto height for proper centering */
        background: rgba(0, 0, 0, 0.8) !important;
        /* Semi-transparent background for visibility */
    }

    .dynamic-showcase.mobile-fullscreen .card-header .header-title-section {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        width: 100% !important;
        margin-top: -0.25rem !important;
        /* Move up to align with maximize button */
    }

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

    .dynamic-showcase.mobile-fullscreen .card-header .info-button {
        margin: 0 !important;
        padding: 0 !important;
        /* Ensure no margin/padding affecting centering */
    }

    .dynamic-showcase.mobile-fullscreen .showcase-nav {
        gap: 0.125rem;
        padding: 0 0.5rem 0.5rem 0.5rem;
        /* Add padding to nav */
    }

    .dynamic-showcase.mobile-fullscreen .nav-button {
        padding: 0.25rem;
        min-width: 56px;
        min-height: 56px;
        pointer-events: auto !important;
        z-index: 99999 !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-top: 0.25rem !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;
    }

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

    /* 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;
    }

    .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: 1 !important;
        /* Canvas takes full viewport, fixed header/controls overlay */
    }

    /* 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 */
    .header-card .header-top {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
        margin-left: 3ch;
    }
}

@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;
    }
}

@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;
    }
}

@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 */
    .social-links {
        gap: 0.5rem;
    }

    .icon-button {
        padding: 0.4rem;
    }

    .icon-button svg {
        width: 20px;
        height: 20px;
    }

    /* 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;
}

/* 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) {
    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: 9999 !important;
}

/* 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 {
    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 */
}


.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);
    }
}

/* 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: 50px;    /* Non-fullscreen portrait */
    --joystick-landscape-bottom: 60px;   /* Non-fullscreen landscape */
    --joystick-fullscreen-portrait-top: calc(45% + 90px);
    --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 {
    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 {
        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;
    }
}

/* 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: 20px;
        --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;
    }
    
    /* 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 {
        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: 20px;
        --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;
    }
    
    /* 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 {
        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: 10000;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.gallery-wall-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
}

.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;
}

.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%;
    }
}