/* 🏛️ MICHAELISM METAVERSE - UNIFIED DESIGN SYSTEM CSS (css/style.css) */

:root {
    --bg-dark: #050810;
    --bg-card: linear-gradient(145deg, #111a2e 0%, #0b1120 50%, #16122b 100%);
    --bg-panel: linear-gradient(145deg, #0f172a 0%, #0c1222 50%, #141730 100%);
    --color-gold: #ffd700;
    --color-teal: #00f0ff;
    --color-purple: #a855f7;
    --color-emerald: #10b981;
    --color-crimson: #ff0055;
    --text-primary: #ffffff;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border-glow: rgba(0, 240, 255, 0.3);
    --font-display: 'Orbitron', sans-serif;
    --font-sub: 'Rajdhani', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(0, 240, 255, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
    min-height: 100vh;
    color: var(--text-primary);
    font-family: var(--font-body);
    overflow-x: hidden;
}

/* Header & Nav Styling (+20% size enhancement) */
.top-nav-bar {
    width: 100%;
    background: linear-gradient(180deg, #070a12 0%, #04060a 100%);
    border-bottom: 1px solid rgba(0, 240, 255, 0.3);
    padding: 15px 28px;
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.8);
}

.top-nav-container {
    max-width: 1680px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.logo-link:hover {
    transform: scale(1.02);
    opacity: 0.95;
}

.nav-subdomains a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
    font-size: 0.96rem;
    font-family: var(--font-sub);
}

.nav-subdomains a:hover { color: var(--color-teal); }

.btn-interact {
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid var(--color-teal);
    color: var(--color-teal);
    padding: 10px 22px;
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 0.96rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-interact:hover {
    background: var(--color-teal);
    color: #000;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
}

/* Footer Navigation Styling */
.main-footer {
    width: 100%;
    background: linear-gradient(180deg, #090e18 0%, #05070e 100%);
    border-top: 1px solid rgba(0, 240, 255, 0.2);
    padding: 60px 24px 30px 24px;
    margin-top: 80px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px 30px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-column-title {
    color: #00f0ff;
    font-family: var(--font-display, 'Inter', sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    text-shadow: 0 0 10px rgba(0, 240, 255, 0.3);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-family: var(--font-body, 'Inter', sans-serif);
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.footer-links a:hover {
    color: #00f0ff;
    transform: translateX(3px);
}

.footer-bottom {
    max-width: 1400px;
    margin: 40px auto 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    color: #64748b;
    font-size: 0.85rem;
    line-height: 1.6;
}

.subtab-nav {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.subtab-btn {
    padding: 12px 22px;
    background: linear-gradient(135deg, #0f192d 0%, #0d1222 100%);
    border: 1.5px solid rgba(0, 240, 255, 0.35);
    color: #e2e8f0;
    border-radius: 24px;
    font-family: var(--font-display);
    font-size: 0.94rem;
    font-weight: 800;
    text-decoration: none;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.1), 0 4px 12px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.subtab-btn:hover {
    border-color: var(--color-teal);
    color: #fff;
    background: linear-gradient(135deg, #14223d 0%, #111830 100%);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.35);
}

.subtab-btn.active {
    background: linear-gradient(135deg, rgba(0,240,255,0.2) 0%, rgba(168,85,247,0.2) 100%);
    border-color: var(--color-teal);
    color: #fff;
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

/* Alchemical Test Chamber Styling */
.test-chamber {
    background: var(--bg-panel, rgba(15, 23, 42, 0.85));
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 32px;
    padding: 48px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.05);
    margin-top: 20px;
    animation: fadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.test-chamber-header {
    text-align: center;
    margin-bottom: 44px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    padding-bottom: 24px;
}

.test-chamber-header h3 {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, var(--glow-primary, #00f0ff) 0%, #ff0055 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.test-chamber-header p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    max-width: 850px;
    margin: 0 auto;
    line-height: 1.6;
    font-family: var(--font-body);
}

.test-chamber-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 48px;
    align-items: center;
}

@media (max-width: 900px) {
    .test-chamber-layout {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 32px;
        padding: 10px;
    }
}

.test-card-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 920px;
    padding: 40px 0;
    overflow: visible;
    transition: min-height 0.3s ease;
}

#testPerspectiveWrapper {
    transform: scale(var(--test-scale, 1.15));
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center center;
    padding: 30px 0;
    margin: 10px 0;
}

.test-card-controls {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.color-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.color-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s ease;
}

.color-dot:hover, .color-dot.active {
    transform: scale(1.2);
    border-color: #fff;
    box-shadow: 0 0 12px currentColor;
}

.subtab-btn.active {
    background: linear-gradient(135deg, rgba(0,240,255,0.3) 0%, rgba(168,85,247,0.3) 100%), #0d1322;
    border-color: var(--color-teal);
    color: #fff;
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.45);
}

.btn-layout-config, .btn-filter-pill {
    background: linear-gradient(135deg, #0e172a 0%, #111b30 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-layout-config.active, .btn-filter-pill.active {
    background: var(--color-teal);
    color: #000;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,240,255,0.5);
}

.showcase-grid {
    display: grid;
    gap: 24px;
    width: 100%;
    margin-top: 20px;
}
.showcase-grid.layout-detailed { grid-template-columns: 1fr; }
.showcase-grid.layout-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.showcase-grid.layout-gallery-2k { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.showcase-grid.layout-gallery-4k { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.showcase-grid.layout-micro { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* Zoom Master Lightbox Modal CSS */
.zoom-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(20px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
}
.zoom-modal.active {
    display: flex;
}
.zoom-modal-img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 16px;
    border: 1px solid var(--color-teal);
    box-shadow: 0 0 50px rgba(0, 240, 255, 0.4);
}
.zoom-modal-close {
    position: absolute;
    top: 24px;
    right: 32px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
    transition: color 0.2s;
}
.zoom-modal-close:hover { color: var(--color-teal); }


        /* -------------------------------------------------- */
        /* 🌌 DESIGN SYSTEM & TOKENS                         */
        /* -------------------------------------------------- */
        :root {
            --bg-deep: #06080c;
            --bg-card: #0d1117;
            --bg-panel: rgba(22, 29, 39, 0.55);
            --border-glow: rgba(0, 229, 255, 0.25);
            --text-primary: #f0f4f8;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            
            /* Affinities Colors */
            --color-gold: #ffd700;
            --color-gold-glow: rgba(255, 215, 0, 0.4);
            --color-teal: #00f0ff;
            --color-teal-glow: rgba(0, 240, 255, 0.4);
            --color-crimson: #ff0055;
            --color-crimson-glow: rgba(255, 0, 85, 0.4);
            --color-ruby: #ff3b30;
            --color-ruby-glow: rgba(255, 59, 48, 0.4);
            --color-emerald: #00ff66;
            --color-emerald-glow: rgba(0, 255, 102, 0.4);
            --color-sapphire: #0066ff;
            --color-sapphire-glow: rgba(0, 102, 255, 0.4);
            --color-amber: #ffb000;
            --color-amber-glow: rgba(255, 176, 0, 0.4);
            --color-purple: #b000ff;
            --color-purple-glow: rgba(176, 0, 255, 0.4);
            
            /* Current Selection Default (Teal) */
            --glow-primary: var(--color-teal);
            --glow-primary-rgb: 0, 240, 255;
            --glow-shadow: var(--color-teal-glow);
            
            --transition-premium: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            --font-display: 'Orbitron', sans-serif;
            --font-sub: 'Outfit', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        /* -------------------------------------------------- */
        /* 🪐 STYLING BASE                                    */
        /* -------------------------------------------------- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: text;
        }

        /* Prevent unwanted text highlight during button clicks and 3D card flips */
        .btn-interact, .btn-filter, .btn-tab, .btn-layout-config, .btn-load-more, .card-container, .lightbox-nav-btn, .lightbox-close {
            user-select: none;
        }

        /* Ensure all text content, descriptions, titles, lore, and lightbox details are 100% copy-selectable */
        p, span, h1, h2, h3, h4, h5, h6,
        .detailed-lore-text, .lore-text, .back-body, #lightboxDescBox,
        .slot-title, .stat-value, .detailed-title, .detailed-category,
        .detailed-lore-box, .vault-slot, .lightbox-caption, .stat-label {
            user-select: text !important;
            -webkit-user-select: text !important;
        }

        body {
            background-color: var(--bg-deep);
            color: var(--text-primary);
            font-family: var(--font-body);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(13, 20, 35, 0.6) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(20, 10, 35, 0.4) 0%, transparent 40%),
                linear-gradient(rgba(6, 8, 12, 0.95), rgba(6, 8, 12, 0.95)),
                url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"%3E%3Cpath d="M40 0l40 40-40 40L0 40z" fill="rgba(255,255,255,0.015)" fill-rule="evenodd"/%3E%3C/svg%3E');
        }

        /* Ambient Animated Grid Overlay */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0, 240, 255, 0.02) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0, 240, 255, 0.02) 50%);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: -1;
        }

        /* -------------------------------------------------- */
        /* 🖥️ LAYOUT STRUCTURE                                 */
        /* -------------------------------------------------- */
        .container {
            max-width: 1750px;
            margin: 0 auto;
            padding: 40px 32px;
            position: relative;
            z-index: 10;
        }

        /* Language Selector & Logo */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding-bottom: 24px;
            margin-bottom: 48px;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logo-mark {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, #00f0ff 0%, #ff0055 100%);
            display: grid;
            place-items: center;
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: #fff;
            letter-spacing: -1px;
        }

        .logo-text h1 {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: 2px;
            background: linear-gradient(90deg, #fff 0%, #94a3b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-text p {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            color: var(--text-secondary);
            letter-spacing: 4px;
            text-transform: uppercase;
        }

        /* Premium Glass Controls */
        .control-panel {
            display: flex;
            gap: 12px;
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 30px;
            padding: 4px;
        }

        .btn-lang {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 8px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-family: var(--font-sub);
            font-weight: 600;
            font-size: 0.8rem;
            transition: var(--transition-premium);
        }

        .btn-lang.active {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
        }

        /* -------------------------------------------------- */
        /* 🏷️ INTRO VECTOR                                    */
        /* -------------------------------------------------- */
        .intro-section {
            text-align: center;
            margin-bottom: 60px;
        }

        .tagline {
            display: inline-block;
            font-family: var(--font-sub);
            font-size: 0.8rem;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: var(--glow-primary);
            margin-bottom: 16px;
            font-weight: 700;
            text-shadow: 0 0 10px var(--glow-shadow);
        }

        .main-title {
            font-family: var(--font-display);
            font-size: 2.8rem;
            font-weight: 900;
            letter-spacing: -0.5px;
            margin-bottom: 20px;
            text-shadow: 0 0 40px rgba(0,0,0,0.8);
        }

        .main-title span {
            color: var(--glow-primary);
            text-shadow: 0 0 15px var(--glow-shadow);
        }

        .main-desc {
            max-width: 680px;
            margin: 0 auto;
            color: var(--text-secondary);
            font-size: 1.05rem;
            line-height: 1.6;
            font-family: var(--font-body);
        }

        /* -------------------------------------------------- */
        /* 🎴 GRID SHOWCASE DECK                              */
        /* -------------------------------------------------- */
        .showcase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(375px, 1fr));
            gap: 48px;
            margin-bottom: 80px;
            justify-items: center;
        }

        /* -------------------------------------------------- */
        /* 🔮 THE HOLO CARD (PURE 3D PARALLAX)                */
        /* -------------------------------------------------- */
        .perspective-wrapper {
            perspective: 2000px;
            width: 440px;
            height: 585px; /* Scaled layout expansion for high-impact presence */
            position: relative;
            cursor: pointer;
        }

        .card-container {
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--base-ry, 0deg) + var(--ry, 0deg)));
            border-radius: 24px;
        }

        /* Card flip mechanism */
        .card-container.flipped {
            --base-ry: 180deg;
        }

        .perspective-wrapper.fit-image {
            width: 275px; /* Scaled fitting base plate aspect ratio */
        }

        .back-text-overlay-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 32px 24px;
            box-sizing: border-box;
            text-align: left;
            transition: all 0.3s ease;
        }

        /* Slender Bounded Mode Adaptations */
        .fit-image .back-text-overlay-content {
            padding: 20px 14px; /* Squeezed padding for the 188px narrow card */
        }

        .fit-image .back-header,
        .fit-image .back-body,
        .fit-image .back-footer {
            padding: 6px 10px; /* Slimmer inner panels */
        }

        .fit-image .back-body {
            margin: 6px 0;
            gap: 6px;
        }

        .fit-image .lore-box {
            margin-bottom: 4px !important;
            gap: 3px;
        }

        .fit-image .btn-interact {
            padding: 6px 12px;
            font-size: 0.78rem;
            border-radius: 10px;
        }

        .fit-image .price-val {
            font-size: 1.05rem;
            font-weight: 800;
            color: #ffffff;
        }

        .fit-image .back-title {
            font-size: 1.20rem; /* High-impact title scale */
            line-height: 1.25;
        }

        .fit-image .back-desc-meta {
            font-size: 0.78rem !important; /* Bold, highly legible meta description */
            color: var(--color-gold) !important;
            font-weight: 700;
            letter-spacing: 1px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.9);
        }

        .fit-image .lore-text {
            font-size: 0.82rem !important; /* Crisp reading font size */
            line-height: 1.4;
            color: #f8fafc !important;
            text-shadow: 0 1px 3px rgba(0,0,0,0.9);
        }

        .fit-image .effect-terminal {
            font-size: 0.78rem;
            padding: 8px 10px;
            background: rgba(2, 6, 12, 0.88);
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Front Layer Styles */
        .card-front {
            background: transparent; /* Organic transparent-boundary design */
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
            border: none;
            overflow: visible; /* Dynamic holographic 3D pop-out flow */
        }

        /* Layer 1: Base Plate */
        .base-plate-layer {
            position: absolute;
            inset: 0;
            background-size: contain; /* Sized contain to respect organic outlines */
            background-repeat: no-repeat;
            background-position: center;
            transform: translateZ(0px) scale(1.02);
            transition: transform 0.5s ease, filter 0.5s ease;
            background-color: transparent;
            /* Filter moved here to prevent flattening preserve-3d on the parent card-container */
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65)) 
                    drop-shadow(0 0 20px rgba(var(--glow-primary-rgb), 0.15));
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Layer 2: Glowing Cyber-Grid Portal backing */
        .portal-layer {
            display: none; /* Hide rigid rectangular portals for organic shape support */
        }

        /* Layer 3: High-Fidelity Floating Glyph Core */
        .glyph-layer {
            position: absolute;
            inset: 0;
            background-size: auto 92%;
            background-repeat: no-repeat;
            background-position: center;
            transform: translateZ(80px) scale(1);
            filter: drop-shadow(0 15px 30px rgba(var(--glow-primary-rgb), 0.65)) brightness(1.18) contrast(1.1);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.4s ease;
        }

        /* Hover effect hugging exact alpha contours of talisman & base plate */
        .card-container:hover .glyph-layer {
            transform: translateZ(105px) scale(1.08);
            filter: drop-shadow(0 22px 40px rgba(var(--glow-primary-rgb), 0.95)) 
                    drop-shadow(0 0 35px rgba(var(--glow-primary-rgb), 0.7)) 
                    brightness(1.28) contrast(1.12);
        }

        /* Layer 4: Poke-Holo Glare Foil Shader */
        .holo-overlay {
            position: absolute;
            inset: 0;
            mix-blend-mode: color-dodge;
            opacity: var(--opacity, 0);
            background: radial-gradient(
                circle at var(--glare-x, 50%) var(--glare-y, 50%),
                rgba(255, 255, 255, 0.38) 0%,
                rgba(var(--glow-primary-rgb), 0.22) 25%,
                rgba(120, 0, 255, 0.18) 50%,
                transparent 80%
            );
            z-index: 10;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* Layer 5: Card Bevel Frame Edge */
        .card-bezel {
            display: none; /* Hide rigid rectangular bezels for organic shape support */
        }

        /* -------------------------------------------------- */
        /* 📋 BACK LORE PANEL                                 */
        /* -------------------------------------------------- */
        .card-back {
            background-image: url('Tests/1/base-plate-38_circuiticus_steampunk-copper.png'); /* Backview plate */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            color: #fff;
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: none;
            box-shadow: none;
            /* Filter moved here to prevent flattening preserve-3d on the parent card-container */
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65)) 
                    drop-shadow(0 0 20px rgba(var(--glow-primary-rgb), 0.15));
            transition: filter 0.5s ease;
        }

        /* Hover shadow glow on layers to preserve 3D context */
        .card-container:hover .base-plate-layer,
        .card-container:hover .card-back {
            filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.9)) 
                    drop-shadow(0 0 40px rgba(var(--glow-primary-rgb), 0.75));
        }

        .back-header {
            background: rgba(4, 8, 16, 0.82);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 12px;
            padding: 12px 16px;
            border-bottom: 1px solid rgba(var(--glow-primary-rgb), 0.35);
        }

        .back-top-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .back-id {
            font-family: 'Courier New', monospace;
            color: var(--glow-primary);
            font-weight: 800;
            font-size: 1.05rem;
            letter-spacing: 1px;
        }

        .back-tier {
            font-family: var(--font-sub);
            font-size: 0.80rem;
            background: rgba(var(--glow-primary-rgb), 0.22);
            color: #ffffff;
            padding: 3px 12px;
            border-radius: 12px;
            font-weight: bold;
            letter-spacing: 0.5px;
            border: 1px solid rgba(var(--glow-primary-rgb), 0.4);
        }

        .back-title {
            font-family: var(--font-display);
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            background: linear-gradient(90deg, #ffffff 0%, var(--glow-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .back-desc-meta {
            font-size: 0.85rem;
            color: var(--color-gold);
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-family: var(--font-sub);
            margin-top: 4px;
            text-shadow: 0 1px 4px rgba(0,0,0,0.9);
        }

        .back-body {
            margin: 12px 0;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: rgba(4, 8, 16, 0.82);
            backdrop-filter: blur(14px);
            border: 1px solid rgba(255, 255, 255, 0.16);
            border-radius: 12px;
            padding: 14px 16px;
        }

        .lore-box {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .label {
            font-family: var(--font-sub);
            font-size: 0.72rem;
            color: var(--glow-primary);
            letter-spacing: 1.5px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .lore-text {
            font-size: 0.85rem;
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.72);
            font-style: italic;
        }

        .effect-terminal {
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.15);
            border-radius: 10px;
            padding: 12px;
            font-family: 'Courier New', monospace;
            font-size: 0.78rem;
            color: #a5f3fc;
            box-shadow: inset 0 0 15px rgba(var(--glow-primary-rgb), 0.05);
            line-height: 1.4;
            word-break: break-all;
        }

        .effect-terminal strong {
            color: var(--glow-primary);
        }

        .back-footer {
            border-top: 1px solid rgba(var(--glow-primary-rgb), 0.15);
            padding-top: 10px;
            background: rgba(6, 8, 12, 0.45);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 8px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

        .price-label {
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .price-val {
            font-family: var(--font-display);
            font-size: 1.15rem;
            color: #fff;
            font-weight: bold;
        }

        .btn-interact {
            background: linear-gradient(135deg, rgba(var(--glow-primary-rgb), 0.2) 0%, rgba(var(--glow-primary-rgb), 0.05) 100%);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.3);
            color: #fff;
            font-family: var(--font-sub);
            padding: 8px 18px;
            border-radius: 14px;
            font-size: 0.78rem;
            font-weight: bold;
            letter-spacing: 0.5px;
            transition: var(--transition-premium);
            cursor: pointer;
        }

        .btn-interact:hover {
            background: rgba(var(--glow-primary-rgb), 0.35);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.3);
            border-color: rgba(var(--glow-primary-rgb), 0.6);
        }

        .btn-interact.active {
            background: rgba(var(--glow-primary-rgb), 0.35);
            border-color: rgba(var(--glow-primary-rgb), 0.7);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.45);
        }

        /* -------------------------------------------------- */
        /* 🛠️ INTERACTIVE SANDBOX FORGE                      */
        /* -------------------------------------------------- */
        .forge-section {
            background: var(--bg-panel);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 32px;
            padding: 40px;
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 48px;
            align-items: center;
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.4),
                inset 0 1px 2px rgba(255,255,255,0.05);
            margin-top: 40px;
        }

        @media (max-width: 900px) {
            .forge-section {
                grid-template-columns: 1fr;
                justify-items: center;
                padding: 24px;
            }
        }

        .forge-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .forge-controls {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }

        .forge-header h2 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 800;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .forge-header p {
            color: var(--text-secondary);
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .control-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .control-label-row span:last-child {
            font-family: 'Courier New', monospace;
            color: var(--glow-primary);
            font-size: 0.85rem;
            font-weight: bold;
        }

        /* Grid selection options */
        .option-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 12px;
        }

        .option-btn {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.08);
            padding: 10px 14px;
            border-radius: 12px;
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.82rem;
            cursor: pointer;
            text-align: left;
            transition: var(--transition-premium);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .option-btn:hover {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.15);
            color: #fff;
        }

        .option-btn.active {
            background: rgba(var(--glow-primary-rgb), 0.1);
            border-color: rgba(var(--glow-primary-rgb), 0.5);
            color: #fff;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.15);
        }

        .option-btn span:first-child {
            font-weight: bold;
            font-size: 0.85rem;
        }

        .option-btn span:last-child {
            font-size: 0.68rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        /* Color / Affinity dot picker */
        .color-row {
            display: flex;
            gap: 16px;
        }

        .color-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition-premium);
            border: 3px solid transparent;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
            position: relative;
        }

        .color-dot:hover {
            transform: scale(1.15);
        }

        .color-dot.active {
            border-color: #fff;
            transform: scale(1.1);
        }

        /* Depth Slider */
        .slider-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .slider {
            flex-grow: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.1);
            outline: none;
            transition: opacity .2s;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.8);
            transition: var(--transition-premium);
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            background: var(--glow-primary);
        }

        /* Footer info details */
        .footer {
            margin-top: 80px;
            padding: 30px 0;
            border-top: 1px solid rgba(255,255,255,0.07);
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-family: var(--font-sub);
        }

        .footer a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: var(--transition-premium);
        }

        .footer a:hover {
            color: var(--glow-primary);
            text-shadow: 0 0 5px var(--glow-shadow);
        }

        /* Flip instruction badge */
        .flip-indicator {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-family: var(--font-sub);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
            animation: pulseFlicker 3s ease-in-out infinite;
        }

        @keyframes pulseFlicker {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.15); }
        }

        .audio-toggle-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .audio-toggle-btn {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.75rem;
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            transition: var(--transition-premium);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .audio-toggle-btn.active {
            background: rgba(var(--glow-primary-rgb), 0.1);
            border-color: rgba(var(--glow-primary-rgb), 0.3);
            color: #fff;
        }

        /* -------------------------------------------------- */
        /* 🔍 FILTERS & PAGINATION STYLES (DYNAMIC GRID)       */
        /* -------------------------------------------------- */
        .filter-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 48px;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 24px;
            padding: 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 20;
        }

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

        .search-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 14px 20px 14px 50px;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.95rem;
            outline: none;
            transition: var(--transition-premium);
        }

        .search-input:focus {
            border-color: var(--glow-primary);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.2);
        }

        .search-wrapper::before {
            content: '🔍';
            position: absolute;
            left: 20px;
            top: 52%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            opacity: 0.6;
        }

        .filter-groups {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
            min-width: 250px;
        }

        .filter-group-title {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 700;
        }

        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .btn-filter {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: 12px;
            cursor: pointer;
            font-family: var(--font-sub);
            font-weight: 600;
            font-size: 0.8rem;
            transition: var(--transition-premium);
        }

        .btn-filter:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .btn-filter.active {
            background: rgba(var(--glow-primary-rgb), 0.15);
            border-color: var(--glow-primary);
            color: #fff;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.2);
        }

        .load-more-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-bottom: 60px;
        }

        .btn-load-more {
            background: linear-gradient(135deg, rgba(var(--glow-primary-rgb), 0.1) 0%, rgba(var(--glow-primary-rgb), 0.03) 100%);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.25);
            color: #fff;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 2px;
            padding: 12px 32px;
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition-premium);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            text-transform: uppercase;
            outline: none;
        }

        .btn-load-more:hover {
            background: rgba(var(--glow-primary-rgb), 0.2);
            border-color: var(--glow-primary);
            box-shadow: 0 0 25px rgba(var(--glow-primary-rgb), 0.35);
            transform: translateY(-2px);
        }

        .btn-load-more:active {
            transform: translateY(1px);
        }

        /* -------------------------------------------------- */
        /* 🎛️ FUTURISTIC GLASS TABS                          */
        /* -------------------------------------------------- */
        .tabs-container {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 48px;
            position: relative;
            z-index: 25;
            background: rgba(255, 255, 255, 0.02);
            padding: 8px;
            border-radius: 24px;
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .btn-tab {
            background: rgba(15, 23, 42, 0.7);
            border: 1px solid rgba(0, 240, 255, 0.3);
            color: var(--text-secondary);
            padding: 10px 22px;
            border-radius: 20px;
            cursor: pointer;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            transition: var(--transition-premium);
            display: flex;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(0, 240, 255, 0.08);
            backdrop-filter: blur(10px);
        }

        .btn-tab:hover {
            color: #ffffff;
            background: rgba(0, 240, 255, 0.15);
            border-color: rgba(0, 240, 255, 0.6);
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.4), inset 0 0 10px rgba(0, 240, 255, 0.2);
            transform: translateY(-2px);
        }

        .btn-tab.active {
            background: linear-gradient(135deg, rgba(0, 240, 255, 0.25), rgba(255, 215, 0, 0.22));
            border-color: rgba(255, 215, 0, 0.8);
            color: #ffffff;
            box-shadow: 0 0 25px rgba(255, 215, 0, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.3);
            text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
        }

        /* -------------------------------------------------- */
        /* 🧪 ALCHEMICAL TEST CHAMBER                         */
        /* -------------------------------------------------- */
        .test-chamber {
            background: var(--bg-panel);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 32px;
            padding: 48px;
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.4),
                inset 0 1px 2px rgba(255,255,255,0.05);
            margin-top: 20px;
            animation: fadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

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

        .test-chamber-header {
            text-align: center;
            margin-bottom: 44px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding-bottom: 24px;
        }

        .test-chamber-header h3 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 900;
            letter-spacing: 2px;
            margin-bottom: 12px;
            background: linear-gradient(90deg, var(--glow-primary) 0%, #ff0055 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
        }

        .test-chamber-header p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            max-width: 850px;
            margin: 0 auto;
            line-height: 1.6;
            font-family: var(--font-body);
        }

        .test-chamber-layout {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 48px;
            align-items: center;
        }

        @media (max-width: 900px) {
            .test-chamber-layout {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 32px;
                padding: 10px;
            }
        }

        .test-card-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 580px; /* Increased from 480px to prevent visual clipping when scaled */
            transition: min-height 0.3s ease;
        }

        #testPerspectiveWrapper {
            transform: scale(var(--test-scale, 1.5)); /* Default to 1.5 (50% increase) as requested */
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform-origin: center center;
        }

        .test-card-display .card-back {
            display: block !important;
            padding: 0 !important;
            box-shadow: none !important;
            border: none !important;
        }

        .test-card-controls {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }

        /* -------------------------------------------------- */
        /* 🗺️ ROADMAP & UPGRADES SYSTEM                         */
        /* -------------------------------------------------- */
        .roadmap-container {
            background: rgba(10, 14, 20, 0.97) !important;
            backdrop-filter: blur(24px) !important;
            border: 1px solid rgba(0, 255, 204, 0.3) !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.9) !important;

            display: flex;
            flex-direction: column;
            gap: 32px;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
            max-width: 1400px;
            width: 100%;
        }

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

        .roadmap-header h3 {
            font-family: var(--font-display);
            font-size: 1.5rem;
            color: var(--glow-primary);
            text-shadow: 0 0 10px var(--glow-shadow);
            margin-bottom: 8px;
        }

        .roadmap-header p {
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.9rem;
        }

        .roadmap-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        @media (max-width: 900px) {
            .roadmap-grid {
                grid-template-columns: 1fr;
            }
        }

        .roadmap-card {
            background: var(--bg-card);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .card-title {
            font-family: var(--font-display);
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #fff;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 12px;
        }

        .roadmap-tiers-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .roadmap-tiers-list li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.85rem;
            padding: 8px 12px;
            background: rgba(255, 255, 255, 0.02);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.04);
            transition: var(--transition-premium);
        }

        .roadmap-tiers-list li:hover {
            background: rgba(255, 255, 255, 0.04);
            border-color: rgba(var(--glow-primary-rgb), 0.2);
            transform: translateX(4px);
        }

        .tier-badge {
            font-family: var(--font-display);
            font-weight: bold;
            font-size: 0.75rem;
            padding: 4px 10px;
            border-radius: 6px;
            text-transform: uppercase;
        }

        .tier-badge.common { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }
        .tier-badge.uncommon { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
        .tier-badge.rare { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
        .tier-badge.epic { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
        .tier-badge.legendary { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
        .tier-badge.sovereign { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
        .tier-badge.cosmic { background: rgba(236, 72, 153, 0.15); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }
        .tier-badge.mythic { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }

        .tier-price {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            color: var(--glow-primary);
        }

        .tier-perk {
            color: var(--text-secondary);
            font-size: 0.8rem;
            text-align: right;
            max-width: 60%;
        }

        .pipeline-flow {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .pipeline-step {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .step-num {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(var(--glow-primary-rgb), 0.15);
            border: 1px solid var(--glow-primary);
            color: #fff;
            display: grid;
            place-items: center;
            font-family: var(--font-display);
            font-weight: bold;
            font-size: 0.9rem;
            box-shadow: 0 0 10px var(--glow-shadow);
            flex-shrink: 0;
        }

        .step-info h5 {
            font-family: var(--font-sub);
            font-size: 0.9rem;
            color: #fff;
            margin-bottom: 4px;
        }

        .step-info p {
            font-size: 0.78rem;
            color: var(--text-secondary);
            line-height: 1.4;
        }

        /* Simulator Styles */
        .simulator-card {
            background: var(--bg-card);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            margin-top: 24px;
        }

        .simulator-layout {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 24px;
        }

        @media (max-width: 768px) {
            .simulator-layout {
                grid-template-columns: 1fr;
            }
        }

        .sim-controls {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 16px;
        }

        .sim-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sim-label {
            font-family: var(--font-sub);
            font-size: 0.8rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .sim-select {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            padding: 12px;
            border-radius: 10px;
            font-family: var(--font-body);
            font-size: 0.85rem;
            cursor: pointer;
            outline: none;
            transition: var(--transition-premium);
        }

        .sim-select:focus {
            border-color: var(--glow-primary);
            box-shadow: 0 0 10px var(--glow-shadow);
        }

        .sim-terminal {
            background: #020406;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            overflow: hidden;
            font-family: 'Courier New', monospace;
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
        }

        .terminal-header {
            background: rgba(255, 255, 255, 0.03);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            padding: 8px 16px;
            font-size: 0.75rem;
            color: var(--text-muted);
            letter-spacing: 1px;
            font-weight: bold;
        }

        .terminal-body {
            padding: 16px;
            font-size: 0.8rem;
            color: var(--text-primary);
            min-height: 180px;
            max-height: 180px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;
            line-height: 1.4;
        }

        .term-success { color: var(--color-emerald); }
        .term-info { color: var(--color-teal); }
        .term-warn { color: var(--color-gold); }
        .term-muted { color: var(--text-muted); }

        /* -------------------------------------------------- */
        /* 🕹️ DYNAMIC LAYOUT CONTROLLER                      */
        /* -------------------------------------------------- */
        
        .layout-config-container {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center;
            margin: 20px 0;
            padding: 16px;
            background: rgba(13, 17, 23, 0.7);
            border: 1px solid rgba(0, 255, 204, 0.3);
            border-radius: 16px;
            box-shadow: 0 0 25px rgba(0, 255, 204, 0.15);
        }
        .btn-layout-config {
            padding: 7px 14px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            border-radius: 10px;
            border: 1px solid rgba(0, 255, 204, 0.4);
            background: rgba(0, 255, 204, 0.08);
            color: var(--text-color, #e0f0ff);
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(0, 255, 204, 0.1);
        }
        .btn-layout-config:hover {
            transform: translateY(-2px);
            background: rgba(0, 255, 204, 0.22);
            border-color: #00ffcc;
            color: #ffffff;
            box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
        }
        .btn-layout-config.active {
            background: linear-gradient(135deg, rgba(0, 255, 204, 0.35), rgba(0, 153, 255, 0.35));
            border-color: #00ffcc;
            color: #ffffff;
            box-shadow: 0 0 25px rgba(0, 255, 204, 0.7), inset 0 0 10px rgba(0, 255, 204, 0.3);
            animation: vibrantGlowPulse 2.5s infinite alternate;
        }
        @keyframes vibrantGlowPulse {
            0% { box-shadow: 0 0 15px rgba(0, 255, 204, 0.5); }
            100% { box-shadow: 0 0 30px rgba(0, 255, 204, 0.9), 0 0 10px rgba(255, 215, 0, 0.5); }
        }

        .btn-layout-config_old {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.8rem;
            padding: 10px 18px;
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition-premium);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .btn-layout-config:hover {
            border-color: rgba(var(--glow-primary-rgb), 0.3);
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.1);
        }

        .btn-layout-config.active {
            background: rgba(var(--glow-primary-rgb), 0.15);
            border-color: var(--glow-primary);
            color: #fff;
            font-weight: bold;
            box-shadow: 0 0 15px var(--glow-shadow);
        }

        /* Showcase grid layouts */
        .showcase-grid.layout-detailed {
            grid-template-columns: 1fr !important;
            max-width: 1000px;
            margin: 0 auto 80px auto;
            gap: 48px !important;
        }

        .showcase-grid.layout-grid {
            grid-template-columns: repeat(5, 1fr) !important;
            gap: 28px !important;
        }

        @media (max-width: 1400px) {
            .showcase-grid.layout-grid {
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
            }
        }

        .showcase-grid.layout-micro,
        .showcase-grid.layout-micro-glyphs {
            grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)) !important;
            gap: 16px !important;
            justify-items: center;
        }

        .showcase-grid.layout-gallery-2k {
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
            gap: 32px !important;
            justify-items: center;
        }

        .showcase-grid.layout-gallery-4k {
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
            gap: 32px !important;
            justify-items: center;
        }

        /* -------------------------------------------------- */
        /* 📱 EXPANDED DETAILED VIEW CARD                    */
        /* -------------------------------------------------- */
        .detailed-row-card {
            display: flex;
            background: var(--bg-card);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 24px;
            padding: 32px;
            width: 100%;
            gap: 40px;
            box-shadow: 0 15px 40px rgba(0,0,0,0.5);
            backdrop-filter: blur(16px);
            transition: var(--transition-premium);
        }

        .detailed-row-card:hover {
            border-color: rgba(var(--glow-primary-rgb), 0.2);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(var(--glow-primary-rgb), 0.05);
        }

        .detailed-card-left {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .detailed-info-right {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: 20px;
        }

        .detailed-title {
            font-family: var(--font-display);
            font-size: 1.8rem;
            color: #fff;
            margin-top: 4px;
        }

        .detailed-title .detailed-id {
            color: var(--glow-primary);
            font-family: 'Courier New', monospace;
            font-size: 1.5rem;
            margin-left: 8px;
        }

        .detailed-category {
            font-family: var(--font-sub);
            font-size: 0.85rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .detailed-tier-badge {
            font-family: var(--font-display);
            font-size: 0.72rem;
            font-weight: bold;
            text-transform: uppercase;
            padding: 4px 10px;
            border-radius: 6px;
            letter-spacing: 1px;
            display: inline-block;
        }

        .detailed-tier-badge.common { background: rgba(148, 163, 184, 0.15); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }
        .detailed-tier-badge.uncommon { background: rgba(52, 211, 153, 0.15); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.3); }
        .detailed-tier-badge.rare { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
        .detailed-tier-badge.epic { background: rgba(168, 85, 247, 0.15); color: #a855f7; border: 1px solid rgba(168, 85, 247, 0.3); }
        .detailed-tier-badge.legendary { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
        .detailed-tier-badge.sovereign { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
        .detailed-tier-badge.cosmic { background: rgba(236, 72, 153, 0.15); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }
        .detailed-tier-badge.mythic { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); }

        .price-label {
            font-family: var(--font-sub);
            font-size: 0.72rem;
            color: var(--text-secondary);
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        /* Yield module */
        .yield-dashboard {
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 14px 16px;
        }

        .yield-module-header {
            font-family: var(--font-display);
            font-size: 0.72rem;
            color: var(--text-secondary);
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .yield-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1.2fr;
            gap: 16px;
        }

        .yield-stat-box {
            border-right: 1px solid rgba(255, 255, 255, 0.06);
            padding-right: 10px;
        }

        .stat-label {
            font-size: 0.65rem;
            color: var(--text-muted);
            letter-spacing: 0.5px;
            margin-bottom: 2px;
        }

        .stat-value {
            font-family: 'Courier New', monospace;
            font-size: 1.05rem;
            font-weight: bold;
            color: var(--glow-primary);
        }

        .detailed-lore-box {
            background: rgba(255, 255, 255, 0.01);
            border: 1px solid rgba(255, 255, 255, 0.03);
            border-radius: 12px;
            padding: 14px 16px;
        }

        .detailed-section-title {
            font-family: var(--font-display);
            font-size: 0.72rem;
            color: var(--text-secondary);
            letter-spacing: 1px;
            display: block;
            margin-bottom: 6px;
        }

        .detailed-lore-text {
            font-size: 0.8rem;
            line-height: 1.45;
            color: var(--text-secondary);
        }

        /* Download Vault */
        .download-vault {
            background: rgba(255, 255, 255, 0.02);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 16px;
            padding: 16px;
        }

        .vault-header {
            font-family: var(--font-display);
            font-size: 0.72rem;
            color: #fff;
            letter-spacing: 1.5px;
            margin-bottom: 12px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            padding-bottom: 8px;
        }

        .vault-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .vault-slot {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.03);
        }

        .vault-thumb-preview {
            width: 56px;
            height: 74px; /* 3:4 ratio */
            background-size: cover;
            background-position: center;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            cursor: pointer;
            overflow: hidden;
            flex-shrink: 0;
        }

        .thumb-zoom-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            color: #fff;
            font-size: 0.6rem;
            font-family: var(--font-display);
            display: grid;
            place-items: center;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .vault-thumb-preview:hover .thumb-zoom-overlay {
            opacity: 1;
        }

        .slot-title {
            font-family: var(--font-sub);
            font-size: 0.82rem;
            font-weight: bold;
            color: #fff;
        }

        .slot-meta {
            font-size: 0.68rem;
            color: var(--text-muted);
        }

        /* Locked SLA placeholder */
        .locked-sla-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            border: 1px dashed rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.1);
        }

        .locked-badge {
            font-family: var(--font-display);
            font-size: 0.7rem;
            font-weight: bold;
            color: var(--color-gold);
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .locked-desc {
            font-size: 0.65rem;
            color: var(--text-secondary);
            line-height: 1.35;
            margin-top: 4px;
        }

        /* Micro Card Styles */
        .micro-card-wrapper {
            width: 100px;
            height: 133px; /* 3:4 ratio */
            perspective: 500px;
            cursor: pointer;
        }

        .micro-card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            transition: var(--transition-premium);
        }

        .micro-card-wrapper:hover .micro-card-inner {
            transform: scale(1.08) translateY(-4px);
            border-color: var(--glow-primary);
            box-shadow: 0 8px 25px rgba(var(--glow-primary-rgb), 0.25);
        }

        .micro-plate-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .micro-talisman-fg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
            transform: scale(0.9);
            filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
        }

        .micro-badge {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background: rgba(0, 0, 0, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            font-family: 'Courier New', monospace;
            font-size: 0.6rem;
            font-weight: bold;
            padding: 1px 4px;
            border-radius: 4px;
        }

        /* Gallery Card Styles - Expanded to fill 80% of visible space */
        .gallery-card-wrapper {
            width: 100%;
            max-width: 420px;
            height: 580px;
            cursor: pointer;
        }

        .gallery-card-inner {
            width: 100%;
            height: 100%;
            position: relative;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            overflow: hidden;
            box-shadow: 0 8px 25px rgba(0,0,0,0.6);
            display: flex;
            flex-direction: column;
            transition: var(--transition-premium);
        }

        .gallery-card-wrapper:hover .gallery-card-inner {
            transform: scale(1.06) translateY(-6px);
            border-color: var(--glow-primary);
            box-shadow: 0 12px 35px rgba(var(--glow-primary-rgb), 0.3);
        }

        .gallery-image-bg {
            flex-grow: 1;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: rgba(0,0,0,0.3);
        }

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .gallery-card-inner:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-card-inner.locked .gallery-overlay {
            opacity: 1; /* Always show overlay for locked */
            background: rgba(0,0,0,0.7);
        }

        .zoom-text {
            font-family: var(--font-display);
            color: #fff;
            font-size: 0.72rem;
            letter-spacing: 1px;
            padding: 6px 12px;
            border: 1px solid #fff;
            border-radius: 6px;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(4px);
        }

        .gallery-card-footer {
            background: rgba(255, 255, 255, 0.02);
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding: 8px 12px;
            text-align: center;
        }

        /* -------------------------------------------------- */
        /* 🌟 HOLOGRAPHIC LIGHTBOX MODAL                      */
        /* -------------------------------------------------- */
        .lightbox-modal {
            position: fixed;
            z-index: 10000;
            inset: 0;
            background: rgba(2, 4, 6, 0.95);
            backdrop-filter: blur(20px);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
        }

        .lightbox-modal.active {
            opacity: 1;
            pointer-events: auto;
        }

        .lightbox-close {
            position: absolute;
            top: 24px;
            right: 32px;
            color: var(--text-secondary);
            font-size: 2.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: var(--transition-premium);
        }

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

        .lightbox-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.6rem;
            color: var(--color-teal);
            background: rgba(10, 20, 30, 0.7);
            border: 1px solid var(--color-teal);
            border-radius: 50%;
            width: 58px;
            height: 58px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-premium);
            z-index: 10001;
            backdrop-filter: blur(8px);
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.2);
        }

        .lightbox-nav-btn:hover {
            background: rgba(0, 240, 255, 0.25);
            color: #fff;
            transform: translateY(-50%) scale(1.15);
            box-shadow: 0 0 30px rgba(0, 240, 255, 0.6);
        }

        .lightbox-nav-btn.prev { left: 28px; }
        .lightbox-nav-btn.next { right: 28px; }

        /* 3-Column Studio Grid for Lightbox (+10% Layout Expansion) */
        .lightbox-content-wrapper {
            width: 98vw;
            max-width: 1850px;
            max-height: 95vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 18px 28px;
            box-sizing: border-box;
            transform: scale(0.9);
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .lightbox-modal.active .lightbox-content-wrapper {
            transform: scale(1);
        }

        .lightbox-header-top {
            width: 100%;
            text-align: center;
            margin-bottom: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding-bottom: 12px;
        }

        .lightbox-caption {
            color: #fff;
            font-family: var(--font-display);
            font-size: 1.45rem;
            font-weight: 800;
            letter-spacing: 1px;
            text-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
        }

        .lightbox-studio-grid {
            display: grid;
            grid-template-columns: 280px 1fr 440px;
            gap: 32px;
            width: 100%;
            align-items: center;
            justify-items: center;
        }

        @media (max-width: 1100px) {
            .lightbox-studio-grid {
                grid-template-columns: 1fr;
                gap: 16px;
                overflow-y: auto;
                max-height: 80vh;
            }
        }

        .lightbox-sidebar-left {
            display: flex;
            flex-direction: column;
            gap: 14px;
            width: 100%;
            background: rgba(6, 12, 20, 0.75);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(0, 240, 255, 0.2);
            border-radius: 16px;
            padding: 20px 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .lightbox-sidebar-left .sidebar-title {
            font-family: var(--font-display);
            font-size: 0.78rem;
            color: var(--color-teal);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            text-align: center;
            margin-bottom: 4px;
        }

        .lightbox-center-spotlight {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .lightbox-img {
            max-width: 100%;
            max-height: 78vh;
            object-fit: contain;
            border-radius: 20px;
            box-shadow: 0 25px 70px rgba(0, 0, 0, 0.95),
                        0 0 50px rgba(var(--glow-primary-rgb, 0, 240, 255), 0.4);
            border: 1.5px solid rgba(0, 240, 255, 0.4);
        }

        .lightbox-sidebar-right {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-height: 82vh;
            overflow-y: auto;
        }

        /* -------------------------------------------------- */
        /* 📱 RESPONSIVE ADAPTATIONS                          */
        /* -------------------------------------------------- */
        @media (max-width: 850px) {
            .detailed-row-card {
                flex-direction: column !important;
                align-items: center !important;
                padding: 20px !important;
                gap: 24px !important;
            }
            .detailed-info-right {
                width: 100% !important;
            }
        }
    
        /* -------------------------------------------------- */
        /* 📏 PHASE 5 STEP 5: PITCH DECK +25% SCALE & CARD UNIFORMITY */
        /* -------------------------------------------------- */
        #pitchdeck-tab-content {
            font-size: 1.15rem;
            line-height: 1.6;
        }
        #pitchdeck-tab-content .roadmap-header h2 {
            font-size: 2.75rem !important;
        }
        #pitchdeck-tab-content h3 {
            font-size: 2.1rem !important;
        }
        #pitchdeck-tab-content h4 {
            font-size: 1.35rem !important;
        }
        #pitchdeck-tab-content p {
            font-size: 1.05rem !important;
        }
        #pitchdeck-tab-content table {
            font-size: 1.05rem !important;
        }
        #pitchdeck-tab-content td, #pitchdeck-tab-content th {
            padding: 14px 18px !important;
        }
        /* ---------------------------------------------------------------------- */
        /* 📦 BACKUP: MANUAL CSS SCALE OVERRIDES (COMMENTED OUT)                 */
        /* ---------------------------------------------------------------------- */
        /*
        [data-id="52"] .glyph-layer, [data-id="53"] .glyph-layer { transform: translateZ(80px) scale(1.25) !important; }
        [data-id="43"] .glyph-layer, [data-id="97"] .glyph-layer { transform: translateZ(80px) scale(0.95) !important; }
        [data-id="4"] .glyph-layer, [data-id="39"] .glyph-layer, [data-id="75"] .glyph-layer, [data-id="79"] .glyph-layer { transform: translateZ(80px) scale(1.15) !important; }
        */
    
        /* -------------------------------------------------- */
        /* ✨ DUAL HOLOFOIL SHOWCASE SHADER CSS               */
        /* -------------------------------------------------- */
        .showcase-dual-container {
            display: flex;
            gap: 45px;
            justify-content: center;
            align-items: flex-start;
            flex-wrap: wrap;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
        }

        .showcase-column {
            flex: 1;
            min-width: 340px;
            max-width: 520px;
            background: linear-gradient(160deg, #111a2e 0%, #0a0f1d 60%, #131b34 100%);
            border: 1px solid rgba(0, 240, 255, 0.3);
            border-radius: 24px;
            padding: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            backdrop-filter: blur(16px);
            box-shadow: 0 20px 50px rgba(0,0,0,0.85), inset 0 1px 1px rgba(255,255,255,0.1);
        }

        .showcase-column.legendary {
            background: linear-gradient(160deg, #1c1828 0%, #0e1222 50%, #1e1520 100%);
            border-color: rgba(255, 215, 0, 0.5);
            box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 35px rgba(255, 215, 0, 0.25), inset 0 1px 1px rgba(255,215,0,0.2);
        }

        .column-badge {
            position: absolute;
            top: -14px;
            padding: 4px 18px;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .badge-legendary {
            background: linear-gradient(135deg, #ffd700, #ff8c00);
            color: #000;
            box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
        }

        .badge-standard {
            background: linear-gradient(135deg, #00f0ff, #0080ff);
            color: #000;
            box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
        }

        .column-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-top: 10px;
            margin-bottom: 6px;
            text-align: center;
        }

        .column-desc {
            font-size: 0.82rem;
            color: #cbd5e1;
            text-align: center;
            margin-bottom: 20px;
            min-height: 38px;
        }

        .holofoil-standalone-card {
            position: relative;
            width: 100%;
            aspect-ratio: 9 / 16;
            border-radius: 20px;
            overflow: hidden;
            background: radial-gradient(circle at 50% 40%, #101926 0%, #060a12 100%);
            border: 1px solid rgba(0, 240, 255, 0.4);
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 240, 255, 0.2);
            z-index: 10;
            cursor: pointer;
            transform-style: preserve-3d;
            transition: transform 0.15s ease-out, box-shadow 0.3s ease;
        }

        .holofoil-standalone-card:hover {
            box-shadow: 0 30px 70px rgba(0, 0, 0, 0.95), 0 0 60px rgba(255, 215, 0, 0.4);
        }

        .holofoil-media-wrapper {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .holofoil-standalone-card.left-card .holofoil-media-wrapper { padding: 24px; }
        .holofoil-standalone-card.right-card .holofoil-media-wrapper { padding: 0; }

        .holofoil-media-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
            transition: transform 0.3s ease;
        }

        .holofoil-overlay {
            position: absolute;
            inset: 0;
            z-index: 5;
            pointer-events: none;
            background-image: repeating-linear-gradient(
                var(--angle-deg, 135deg),
                transparent 0%,
                rgba(255, 0, 128, 0.22) 4%,
                rgba(255, 128, 0, 0.24) 8%,
                rgba(255, 215, 0, 0.26) 12%,
                rgba(0, 255, 128, 0.24) 16%,
                rgba(0, 240, 255, 0.26) 20%,
                rgba(128, 0, 255, 0.24) 24%,
                rgba(255, 0, 128, 0.22) 28%,
                transparent 33.33%
            );
            background-size: 300% 300%;
            background-position: var(--posx, 50%) var(--posy, 50%);
            mix-blend-mode: color-dodge;
            opacity: 0.70;
            transition: opacity 0.3s ease;
        }

        .holofoil-standalone-card:hover .holofoil-overlay { opacity: 0.95; }

        /* 1. SPECTRUM PRISM MATRIX EFFECT */
        .effect-spectrum-prism .holofoil-overlay {
            background-image:
                var(--grain, url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxmaWx0ZXIgaWQ9Im4iPgo8ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjciIG51bU9jdGF2ZXM9IjEwIiBzdGl0Y2hUaWxlcz0ic3RpdGNoIj48L2ZlVHVyYnVsZW5jZT4KPC9maWx0ZXI+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsPSIjMDAwIj48L3JlY3Q+CjxyZWN0IHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiBmaWxsZX49InVybCgjbikiIG9wYWNpdHk9IjAuMyI+PC9yZWN0Pgo8L3N2Zz4=")),
                repeating-linear-gradient(0deg,
                    rgb(255, 119, 115) calc(var(--space, 5%) * 1),
                    rgba(255, 237, 95, 1) calc(var(--space, 5%) * 2),
                    rgba(168, 255, 95, 1) calc(var(--space, 5%) * 3),
                    rgba(131, 255, 247, 1) calc(var(--space, 5%) * 4),
                    rgba(120, 148, 255, 1) calc(var(--space, 5%) * 5),
                    rgb(216, 117, 255) calc(var(--space, 5%) * 6),
                    rgb(255, 119, 115) calc(var(--space, 5%) * 7)),
                repeating-linear-gradient(var(--angle, 133deg),
                    #0e152e 0%,
                    hsl(180, 10%, 60%) 3.8%,
                    hsl(180, 29%, 66%) 4.5%,
                    hsl(180, 10%, 60%) 5.2%,
                    #0e152e 10%,
                    #0e152e 12%),
                radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%),
                    rgba(0, 0, 0, 0.1) 12%,
                    rgba(0, 0, 0, 0.15) 20%,
                    rgba(0, 0, 0, 0.25) 120%);
            background-blend-mode: screen, hue, hard-light;
            background-size:
                calc(500px * var(--bg-scale, 1.0)),
                calc(200% * var(--bg-scale, 1.0)) calc(700% * var(--bg-scale, 1.0)),
                calc(300% * var(--bg-scale, 1.0)),
                calc(200% * var(--bg-scale, 1.0));
            background-position: center, 0% var(--posy, 50%), var(--posx, 50%) var(--posy, 50%), var(--posx, 50%) var(--posy, 50%);
            filter: brightness(var(--filter-brightness, 0.85)) contrast(var(--filter-contrast, 2.2)) saturate(var(--filter-saturate, 0.7));
            mix-blend-mode: color-dodge;
            opacity: 0.75;
        }

        /* 2. STELLAR AURA COSMIC EFFECT */
        .effect-stellar-aura .holofoil-overlay {
            background-image:
                url("https://res.cloudinary.com/simey/image/upload/Dev/PokemonCards/ancient.webp"),
                repeating-linear-gradient(0deg,
                    rgb(255, 119, 115) calc(var(--space, 5%) * 1),
                    rgba(255, 237, 95, 1) calc(var(--space, 5%) * 2),
                    rgba(168, 255, 95, 1) calc(var(--space, 5%) * 3),
                    rgba(131, 255, 247, 1) calc(var(--space, 5%) * 4),
                    rgba(120, 148, 255, 1) calc(var(--space, 5%) * 5),
                    rgb(216, 117, 255) calc(var(--space, 5%) * 6),
                    rgb(255, 119, 115) calc(var(--space, 5%) * 7)),
                repeating-linear-gradient(var(--angle, 133deg),
                    #0e152e 0%,
                    hsl(180, 10%, 60%) 3.8%,
                    hsl(180, 29%, 66%) 4.5%,
                    hsl(180, 10%, 60%) 5.2%,
                    #0e152e 10%,
                    #0e152e 12%),
                radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%),
                    rgba(0, 0, 0, 0.1) 12%,
                    rgba(0, 0, 0, 0.15) 20%,
                    rgba(0, 0, 0, 0.25) 120%);
            background-blend-mode: soft-light, hue, hard-light;
            background-size:
                calc(30% * var(--bg-scale, 1.0)),
                calc(200% * var(--bg-scale, 1.0)) calc(700% * var(--bg-scale, 1.0)),
                calc(300% * var(--bg-scale, 1.0)),
                calc(200% * var(--bg-scale, 1.0));
            background-position: center, 0% var(--posy, 50%), var(--posx, 50%) var(--posy, 50%), var(--posx, 50%) var(--posy, 50%);
            filter: brightness(0.8) contrast(2) saturate(0.75);
            mix-blend-mode: screen;
            opacity: 0.75;
        }

        /* 3. AUREUM GOLD SECRET EFFECT (Vertical Top-to-Bottom Gold Beams) */
        .effect-aureum-gold .holofoil-overlay {
            background-image:
                repeating-linear-gradient(180deg,
                    rgba(89, 46, 80, 0.5) 0%,
                    hsl(39, 37%, 60%) 2.5%,
                    rgb(216, 183, 92) 5%,
                    hsl(39, 37%, 60%) 7.5%,
                    rgba(14, 21, 46, 0.5) 10%,
                    rgba(14, 21, 46, 0.5) 15%),
                radial-gradient(farthest-corner circle at var(--mx, 50%) var(--my, 50%),
                    rgba(255, 215, 0, 0.55) 0%,
                    rgba(255, 183, 0, 0.30) 40%,
                    transparent 80%);
            background-size: 600% 600%, 150% 150%;
            background-position: 0% var(--posy, 50%), center;
            background-blend-mode: color-burn, screen;
            mix-blend-mode: color-dodge;
            opacity: 0.75;
            transition: opacity 0.3s ease;
        }

        .holofoil-standalone-card.effect-aureum-gold:hover .holofoil-overlay {
            opacity: 0.95;
        }

        /* 4. RADIANT PRISM BEAM EFFECT (Calibrated: Brightness 0.75, Contrast 1.8) */
        .effect-radiant-beam .holofoil-overlay {
            --barwidth: 1.2%;
            --space: 40px;
            background-image:
                repeating-linear-gradient(55deg,
                    rgb(255, 161, 158) calc(var(--space) * 1),
                    rgb(85, 178, 255) calc(var(--space) * 2),
                    rgb(255, 199, 146) calc(var(--space) * 3),
                    rgb(130, 255, 213) calc(var(--space) * 4),
                    rgb(149, 55, 134) calc(var(--space) * 5),
                    rgb(148, 241, 255) calc(var(--space) * 6)),
                repeating-linear-gradient(45deg,
                    hsl(0, 0%, 10%) 0%,
                    hsl(0, 0%, 50%) calc(var(--barwidth) * 4),
                    hsl(0, 0%, 10%) calc(var(--barwidth) * 10)),
                repeating-linear-gradient(-45deg,
                    hsl(0, 0%, 10%) 0%,
                    hsl(0, 0%, 50%) calc(var(--barwidth) * 4),
                    hsl(0, 0%, 10%) calc(var(--barwidth) * 10));
            background-size: 400% 400%, 210% 210%, 210% 210%;
            background-position:
                var(--posx, 50%) var(--posy, 50%),
                calc(var(--posx, 50%) * 1.5) calc(var(--posy, 50%) * 1.5),
                calc(var(--posx, 50%) * -1.5) calc(var(--posy, 50%) * -1.5);
            background-blend-mode: exclusion, darken, color-dodge;
            filter: brightness(0.75) contrast(1.8) saturate(0.70);
            mix-blend-mode: color-dodge;
            opacity: 0.65;
            transition: opacity 0.3s ease, background-position 0.1s ease-out;
        }

        .holofoil-standalone-card.effect-radiant-beam:hover .holofoil-overlay {
            opacity: 0.90;
        }

        /* 5. CROSS-HATCH SPECTRUM GRID EFFECT */
        .effect-crosshatch-rainbow .holofoil-overlay {
            --space: 35px;
            background-image:
                repeating-linear-gradient(calc(var(--angle-deg, 135deg) + 20deg),
                    rgba(255, 99, 132, 0.6) calc(var(--space) * 1),
                    rgba(255, 205, 86, 0.6) calc(var(--space) * 2),
                    rgba(75, 192, 192, 0.6) calc(var(--space) * 3),
                    rgba(54, 162, 235, 0.6) calc(var(--space) * 4),
                    rgba(153, 102, 255, 0.6) calc(var(--space) * 5),
                    rgba(255, 99, 132, 0.6) calc(var(--space) * 6)),
                repeating-linear-gradient(45deg,
                    rgba(0, 0, 0, 0.85) 0px,
                    rgba(0, 0, 0, 0.85) 2px,
                    rgba(255, 255, 255, 0.45) 3px,
                    rgba(255, 255, 255, 0.45) 5px,
                    rgba(0, 0, 0, 0.85) 6px,
                    rgba(0, 0, 0, 0.85) 10px),
                repeating-linear-gradient(-45deg,
                    rgba(0, 0, 0, 0.85) 0px,
                    rgba(0, 0, 0, 0.85) 2px,
                    rgba(255, 255, 255, 0.45) 3px,
                    rgba(255, 255, 255, 0.45) 5px,
                    rgba(0, 0, 0, 0.85) 6px,
                    rgba(0, 0, 0, 0.85) 10px);
            background-size: 300% 300%, 14px 14px, 14px 14px;
            background-position: var(--posx, 50%) var(--posy, 50%), center, center;
            background-blend-mode: overlay, hard-light, color-dodge;
            filter: brightness(0.75) contrast(1.8) saturate(0.85);
            mix-blend-mode: color-dodge;
            opacity: 0.70;
            transition: opacity 0.3s ease;
        }

        .holofoil-standalone-card.effect-crosshatch-rainbow:hover .holofoil-overlay {
            opacity: 0.95;
        }

        .holofoil-bezel {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            border: 2px solid rgba(0, 240, 255, 0.5);
            z-index: 8;
            pointer-events: none;
            box-shadow: inset 0 0 25px rgba(0, 240, 255, 0.35);
        }

        .feature-list {
            margin-top: 20px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 8px;
            font-size: 0.8rem;
        }

        .feature-item {
            display: flex;
            align-items: center;
            gap: 8px;
            background: linear-gradient(135deg, #111a2c 0%, #0c1220 100%);
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid rgba(0, 240, 255, 0.15);
        }

        .controls-overlay-dual {
            margin-top: 30px;
            background: linear-gradient(135deg, #0c1322 0%, #080d18 50%, #121024 100%);
            border: 1px solid rgba(0, 240, 255, 0.4);
            border-radius: 30px;
            padding: 12px 24px;
            display: flex;
            gap: 16px;
            align-items: center;
            z-index: 100;
            backdrop-filter: blur(16px);
            box-shadow: 0 10px 35px rgba(0,0,0,0.85), inset 0 1px 1px rgba(255,255,255,0.1);
            flex-wrap: wrap;
            justify-content: center;
        }

        .controls-overlay-dual select {
            background: rgba(0, 240, 255, 0.12);
            color: #fff;
            border: 1px solid rgba(0, 240, 255, 0.4);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            outline: none;
            cursor: pointer;
        }

        

/* 🎴 3D INTERACTIVE TILT & FLIP CARD STYLES */

        /* -------------------------------------------------- */
        /* 🌌 DESIGN SYSTEM & TOKENS                         */
        /* -------------------------------------------------- */
        :root {
            --bg-deep: #06080c;
            --bg-card: #0d1117;
            --bg-panel: rgba(22, 29, 39, 0.55);
            --border-glow: rgba(0, 229, 255, 0.25);
            --text-primary: #f0f4f8;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            
            /* Affinities Colors */
            --color-gold: #ffd700;
            --color-gold-glow: rgba(255, 215, 0, 0.4);
            --color-teal: #00f0ff;
            --color-teal-glow: rgba(0, 240, 255, 0.4);
            --color-crimson: #ff0055;
            --color-crimson-glow: rgba(255, 0, 85, 0.4);
            --color-ruby: #ff3b30;
            --color-ruby-glow: rgba(255, 59, 48, 0.4);
            --color-emerald: #00ff66;
            --color-emerald-glow: rgba(0, 255, 102, 0.4);
            --color-sapphire: #0066ff;
            --color-sapphire-glow: rgba(0, 102, 255, 0.4);
            --color-amber: #ffb000;
            --color-amber-glow: rgba(255, 176, 0, 0.4);
            --color-purple: #b000ff;
            --color-purple-glow: rgba(176, 0, 255, 0.4);
            
            /* Current Selection Default (Teal) */
            --glow-primary: var(--color-teal);
            --glow-primary-rgb: 0, 240, 255;
            --glow-shadow: var(--color-teal-glow);
            
            --transition-premium: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            --font-display: 'Orbitron', sans-serif;
            --font-sub: 'Outfit', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        /* -------------------------------------------------- */
        /* 🪐 STYLING BASE                                    */
        /* -------------------------------------------------- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

        body {
            background-color: var(--bg-deep);
            color: var(--text-primary);
            font-family: var(--font-body);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(13, 20, 35, 0.6) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(20, 10, 35, 0.4) 0%, transparent 40%),
                linear-gradient(rgba(6, 8, 12, 0.95), rgba(6, 8, 12, 0.95)),
                url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"%3E%3Cpath d="M40 0l40 40-40 40L0 40z" fill="rgba(255,255,255,0.015)" fill-rule="evenodd"/%3E%3C/svg%3E');
        }

        /* Ambient Animated Grid Overlay */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0, 240, 255, 0.02) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0, 240, 255, 0.02) 50%);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: -1;
        }

        /* -------------------------------------------------- */
        /* 🖥️ LAYOUT STRUCTURE                                 */
        /* -------------------------------------------------- */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 24px;
            position: relative;
            z-index: 10;
        }

        /* Language Selector & Logo */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding-bottom: 24px;
            margin-bottom: 48px;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logo-mark {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, #00f0ff 0%, #ff0055 100%);
            display: grid;
            place-items: center;
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: #fff;
            letter-spacing: -1px;
        }

        .logo-text h1 {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: 2px;
            background: linear-gradient(90deg, #fff 0%, #94a3b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-text p {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            color: var(--text-secondary);
            letter-spacing: 4px;
            text-transform: uppercase;
        }

        /* Premium Glass Controls */
        .control-panel {
            display: flex;
            gap: 12px;
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 30px;
            padding: 4px;
        }

        .btn-lang {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 8px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-family: var(--font-sub);
            font-weight: 600;
            font-size: 0.8rem;
            transition: var(--transition-premium);
        }

        .btn-lang.active {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
        }

        /* -------------------------------------------------- */
        /* 🏷️ INTRO VECTOR                                    */
        /* -------------------------------------------------- */
        .intro-section {
            text-align: center;
            margin-bottom: 60px;
        }

        .tagline {
            display: inline-block;
            font-family: var(--font-sub);
            font-size: 0.8rem;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: var(--glow-primary);
            margin-bottom: 16px;
            font-weight: 700;
            text-shadow: 0 0 10px var(--glow-shadow);
        }

        .main-title {
            font-family: var(--font-display);
            font-size: 2.8rem;
            font-weight: 900;
            letter-spacing: -0.5px;
            margin-bottom: 20px;
            text-shadow: 0 0 40px rgba(0,0,0,0.8);
        }

        .main-title span {
            color: var(--glow-primary);
            text-shadow: 0 0 15px var(--glow-shadow);
        }

        .main-desc {
            max-width: 680px;
            margin: 0 auto;
            color: var(--text-secondary);
            font-size: 1.05rem;
            line-height: 1.6;
            font-family: var(--font-body);
        }

        /* -------------------------------------------------- */
        /* 🎴 GRID SHOWCASE DECK                              */
        /* -------------------------------------------------- */
        .showcase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-bottom: 80px;
            justify-items: center;
        }

        /* -------------------------------------------------- */
        /* 🔮 THE HOLO CARD (PURE 3D PARALLAX)                */
        /* -------------------------------------------------- */
        .perspective-wrapper {
            perspective: 2000px;
            width: 320px;
            height: 426px; /* Perfect 3:4 aspect ratio */
            position: relative;
            cursor: pointer;
        }

        .card-container {
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--base-ry, 0deg) + var(--ry, 0deg)));
            border-radius: 24px;
        }

        /* Card flip mechanism */
        .card-container.flipped {
            --base-ry: 180deg;
        }

        .perspective-wrapper.fit-image {
            width: 188px; /* Fits base plate 1:2.26 aspect ratio exactly at 426px height */
        }

        .back-text-overlay-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 32px 24px;
            box-sizing: border-box;
            text-align: left;
            transition: all 0.3s ease;
        }

        /* Slender Bounded Mode Adaptations */
        .fit-image .back-text-overlay-content {
            padding: 20px 14px; /* Squeezed padding for the 188px narrow card */
        }

        .fit-image .back-header,
        .fit-image .back-body,
        .fit-image .back-footer {
            padding: 6px 10px; /* Slimmer inner panels */
        }

        .fit-image .back-body {
            margin: 6px 0;
            gap: 6px;
        }

        .fit-image .lore-box {
            margin-bottom: 4px !important;
            gap: 3px;
        }

        .fit-image .btn-interact {
            padding: 4px 10px;
            font-size: 0.68rem;
            border-radius: 10px;
        }

        .fit-image .price-val {
            font-size: 0.95rem;
        }

        .fit-image .back-title {
            font-size: 1.05rem; /* Balanced title scale */
        }

        .fit-image .back-desc-meta {
            font-size: 0.64rem; /* Tiny meta description */
            letter-spacing: 1px;
        }

        .fit-image .lore-text {
            font-size: 0.72rem !important; /* Elegant smaller reading profile */
            line-height: 1.35;
        }

        .fit-image .effect-terminal {
            font-size: 0.70rem;
            padding: 6px 8px;
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Front Layer Styles */
        .card-front {
            background: transparent; /* Organic transparent-boundary design */
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
            border: none;
            overflow: visible; /* Dynamic holographic 3D pop-out flow */
        }

        /* Layer 1: Base Plate */
        .base-plate-layer {
            position: absolute;
            inset: 0;
            background-size: contain; /* Sized contain to respect organic outlines */
            background-repeat: no-repeat;
            background-position: center;
            transform: translateZ(0px) scale(1.02);
            transition: transform 0.5s ease, filter 0.5s ease;
            background-color: transparent;
            /* Filter moved here to prevent flattening preserve-3d on the parent card-container */
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65)) 
                    drop-shadow(0 0 20px rgba(var(--glow-primary-rgb), 0.15));
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Layer 2: Glowing Cyber-Grid Portal backing */
        .portal-layer {
            display: none; /* Hide rigid rectangular portals for organic shape support */
        }

        /* Layer 3: High-Fidelity Floating Glyph Core */
        .glyph-layer {
            position: absolute;
            inset: 32px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transform: translateZ(80px) scale(0.9);
            filter: drop-shadow(0 15px 25px rgba(var(--glow-primary-rgb), 0.6)) brightness(1.2) contrast(1.1);
            transition: transform 0.5s ease, filter 0.5s ease;
        }

        /* Layer 4: Poke-Holo Glare Foil Shader */
        .holo-overlay {
            position: absolute;
            inset: 0;
            mix-blend-mode: color-dodge;
            opacity: var(--opacity, 0);
            background: radial-gradient(
                circle at var(--glare-x, 50%) var(--glare-y, 50%),
                rgba(255, 255, 255, 0.38) 0%,
                rgba(var(--glow-primary-rgb), 0.22) 25%,
                rgba(120, 0, 255, 0.18) 50%,
                transparent 80%
            );
            z-index: 10;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* Layer 5: Card Bevel Frame Edge */
        .card-bezel {
            display: none; /* Hide rigid rectangular bezels for organic shape support */
        }

        /* -------------------------------------------------- */
        /* 📋 BACK LORE PANEL                                 */
        /* -------------------------------------------------- */
        .card-back {
            background-image: url('Tests/1/base-plate-38_circuiticus_steampunk-copper.png'); /* Backview plate */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            color: #fff;
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: none;
            box-shadow: none;
            /* Filter moved here to prevent flattening preserve-3d on the parent card-container */
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65)) 
                    drop-shadow(0 0 20px rgba(var(--glow-primary-rgb), 0.15));
            transition: filter 0.5s ease;
        }

        /* Hover shadow glow on layers to preserve 3D context */
        .card-container:hover .base-plate-layer,
        .card-container:hover .card-back {
            filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.85)) 
                    drop-shadow(0 0 35px rgba(var(--glow-primary-rgb), 0.65));
        }

        .back-header {
            background: rgba(6, 8, 12, 0.45);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(var(--glow-primary-rgb), 0.15);
        }

        .back-top-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .back-id {
            font-family: 'Courier New', monospace;
            color: var(--glow-primary);
            font-weight: 800;
            font-size: 0.95rem;
            letter-spacing: 1px;
        }

        .back-tier {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            background: rgba(var(--glow-primary-rgb), 0.12);
            color: var(--glow-primary);
            padding: 2px 10px;
            border-radius: 12px;
            font-weight: bold;
            letter-spacing: 0.5px;
            border: 1px solid rgba(var(--glow-primary-rgb), 0.2);
        }

        .back-title {
            font-family: var(--font-display);
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            background: linear-gradient(90deg, #ffffff 0%, var(--glow-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .back-desc-meta {
            font-size: 0.72rem;
            color: var(--text-muted);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-family: var(--font-sub);
            margin-top: 4px;
        }

        .back-body {
            margin: 12px 0;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: rgba(6, 8, 12, 0.45);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 12px 14px;
        }

        .lore-box {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .label {
            font-family: var(--font-sub);
            font-size: 0.72rem;
            color: var(--glow-primary);
            letter-spacing: 1.5px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .lore-text {
            font-size: 0.85rem;
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.72);
            font-style: italic;
        }

        .effect-terminal {
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.15);
            border-radius: 10px;
            padding: 12px;
            font-family: 'Courier New', monospace;
            font-size: 0.78rem;
            color: #a5f3fc;
            box-shadow: inset 0 0 15px rgba(var(--glow-primary-rgb), 0.05);
            line-height: 1.4;
            word-break: break-all;
        }

        .effect-terminal strong {
            color: var(--glow-primary);
        }

        .back-footer {
            border-top: 1px solid rgba(var(--glow-primary-rgb), 0.15);
            padding-top: 10px;
            background: rgba(6, 8, 12, 0.45);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 8px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

        .price-label {
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .price-val {
            font-family: var(--font-display);
            font-size: 1.15rem;
            color: #fff;
            font-weight: bold;
        }

        .btn-interact {
            background: linear-gradient(135deg, rgba(var(--glow-primary-rgb), 0.2) 0%, rgba(var(--glow-primary-rgb), 0.05) 100%);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.3);
            color: #fff;
            font-family: var(--font-sub);
            padding: 8px 18px;
            border-radius: 14px;
            font-size: 0.78rem;
            font-weight: bold;
            letter-spacing: 0.5px;
            transition: var(--transition-premium);
            cursor: pointer;
        }

        .btn-interact:hover {
            background: rgba(var(--glow-primary-rgb), 0.35);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.3);
            border-color: rgba(var(--glow-primary-rgb), 0.6);
        }

        .btn-interact.active {
            background: rgba(var(--glow-primary-rgb), 0.35);
            border-color: rgba(var(--glow-primary-rgb), 0.7);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.45);
        }

        /* -------------------------------------------------- */
        /* 🛠️ INTERACTIVE SANDBOX FORGE                      */
        /* -------------------------------------------------- */
        .forge-section {
            background: var(--bg-panel);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 32px;
            padding: 40px;
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 48px;
            align-items: center;
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.4),
                inset 0 1px 2px rgba(255,255,255,0.05);
            margin-top: 40px;
        }

        @media (max-width: 900px) {
            .forge-section {
                grid-template-columns: 1fr;
                justify-items: center;
                padding: 24px;
            }
        }

        .forge-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .forge-controls {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }

        .forge-header h2 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 800;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .forge-header p {
            color: var(--text-secondary);
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .control-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .control-label-row span:last-child {
            font-family: 'Courier New', monospace;
            color: var(--glow-primary);
            font-size: 0.85rem;
            font-weight: bold;
        }

        /* Grid selection options */
        .option-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 12px;
        }

        .option-btn {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.08);
            padding: 10px 14px;
            border-radius: 12px;
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.82rem;
            cursor: pointer;
            text-align: left;
            transition: var(--transition-premium);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .option-btn:hover {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.15);
            color: #fff;
        }

        .option-btn.active {
            background: rgba(var(--glow-primary-rgb), 0.1);
            border-color: rgba(var(--glow-primary-rgb), 0.5);
            color: #fff;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.15);
        }

        .option-btn span:first-child {
            font-weight: bold;
            font-size: 0.85rem;
        }

        .option-btn span:last-child {
            font-size: 0.68rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        /* Color / Affinity dot picker */
        .color-row {
            display: flex;
            gap: 16px;
        }

        .color-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition-premium);
            border: 3px solid transparent;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
            position: relative;
        }

        .color-dot:hover {
            transform: scale(1.15);
        }

        .color-dot.active {
            border-color: #fff;
            transform: scale(1.1);
        }

        /* Depth Slider */
        .slider-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .slider {
            flex-grow: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.1);
            outline: none;
            transition: opacity .2s;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.8);
            transition: var(--transition-premium);
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            background: var(--glow-primary);
        }

        /* Footer info details */
        .footer {
            margin-top: 80px;
            padding: 30px 0;
            border-top: 1px solid rgba(255,255,255,0.07);
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-family: var(--font-sub);
        }

        .footer a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: var(--transition-premium);
        }

        .footer a:hover {
            color: var(--glow-primary);
            text-shadow: 0 0 5px var(--glow-shadow);
        }

        /* Flip instruction badge */
        .flip-indicator {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-family: var(--font-sub);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
            animation: pulseFlicker 3s ease-in-out infinite;
        }

        @keyframes pulseFlicker {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.15); }
        }

        .audio-toggle-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .audio-toggle-btn {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.75rem;
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            transition: var(--transition-premium);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .audio-toggle-btn.active {
            background: rgba(var(--glow-primary-rgb), 0.1);
            border-color: rgba(var(--glow-primary-rgb), 0.3);
            color: #fff;
        }

        /* -------------------------------------------------- */
        /* 🔍 FILTERS & PAGINATION STYLES (DYNAMIC GRID)       */
        /* -------------------------------------------------- */
        .filter-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 48px;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 24px;
            padding: 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 20;
        }

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

        .search-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 14px 20px 14px 50px;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.95rem;
            outline: none;
            transition: var(--transition-premium);
        }

        .search-input:focus {
            border-color: var(--glow-primary);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.2);
        }

        .search-wrapper::before {
            content: '🔍';
            position: absolute;
            left: 20px;
            top: 52%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            opacity: 0.6;
        }

        .filter-groups {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
            min-width: 250px;
        }

        .filter-group-title {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 700;
        }

        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .btn-filter {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: 12px;
            cursor: pointer;
            font-family: var(--font-sub);
            font-weight: 600;
            font-size: 0.8rem;
            transition: var(--transition-premium);
        }

        .btn-filter:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .btn-filter.active {
            background: rgba(var(--glow-primary-rgb), 0.15);
            border-color: var(--glow-primary);
            color: #fff;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.2);
        }

        .load-more-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-bottom: 60px;
        }

        .btn-load-more {
            background: linear-gradient(135deg, rgba(var(--glow-primary-rgb), 0.1) 0%, rgba(var(--glow-primary-rgb), 0.03) 100%);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.25);
            color: #fff;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 2px;
            padding: 12px 32px;
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition-premium);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            text-transform: uppercase;
            outline: none;
        }

        .btn-load-more:hover {
            background: rgba(var(--glow-primary-rgb), 0.2);
            border-color: var(--glow-primary);
            box-shadow: 0 0 25px rgba(var(--glow-primary-rgb), 0.35);
            transform: translateY(-2px);
        }

        .btn-load-more:active {
            transform: translateY(1px);
        }

        /* -------------------------------------------------- */
        /* 🎛️ FUTURISTIC GLASS TABS                          */
        /* -------------------------------------------------- */
        .tabs-container {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 48px;
            position: relative;
            z-index: 25;
            background: rgba(255, 255, 255, 0.02);
            padding: 8px;
            border-radius: 24px;
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .btn-tab {
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-secondary);
            padding: 10px 24px;
            border-radius: 18px;
            cursor: pointer;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            transition: var(--transition-premium);
            display: flex;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
        }

        .btn-tab:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.04);
            transform: translateY(-1px);
        }

        .btn-tab.active {
            background: rgba(var(--glow-primary-rgb), 0.15);
            border-color: rgba(var(--glow-primary-rgb), 0.4);
            color: #fff;
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1);
            text-shadow: 0 0 8px var(--glow-shadow);
        }

        /* -------------------------------------------------- */
        /* 🧪 ALCHEMICAL TEST CHAMBER                         */
        /* -------------------------------------------------- */
        .test-chamber {
            background: var(--bg-panel);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 32px;
            padding: 48px;
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.4),
                inset 0 1px 2px rgba(255,255,255,0.05);
            margin-top: 20px;
            animation: fadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

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

        .test-chamber-header {
            text-align: center;
            margin-bottom: 44px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding-bottom: 24px;
        }

        .test-chamber-header h3 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 900;
            letter-spacing: 2px;
            margin-bottom: 12px;
            background: linear-gradient(90deg, var(--glow-primary) 0%, #ff0055 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
        }

        .test-chamber-header p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            max-width: 850px;
            margin: 0 auto;
            line-height: 1.6;
            font-family: var(--font-body);
        }

        .test-chamber-layout {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 48px;
            align-items: center;
        }

        @media (max-width: 900px) {
            .test-chamber-layout {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 32px;
                padding: 10px;
            }
        }

        .test-card-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 580px; /* Increased from 480px to prevent visual clipping when scaled */
            transition: min-height 0.3s ease;
        }

        #testPerspectiveWrapper {
            transform: scale(var(--test-scale, 1.5)); /* Default to 1.5 (50% increase) as requested */
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform-origin: center center;
        }

        .test-card-display .card-back {
            display: block !important;
            padding: 0 !important;
            box-shadow: none !important;
            border: none !important;
        }

        .test-card-controls {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }
    

/* 🎴 3D INTERACTIVE TILT & FLIP CARD STYLES */

        /* -------------------------------------------------- */
        /* 🌌 DESIGN SYSTEM & TOKENS                         */
        /* -------------------------------------------------- */
        :root {
            --bg-deep: #06080c;
            --bg-card: #0d1117;
            --bg-panel: rgba(22, 29, 39, 0.55);
            --border-glow: rgba(0, 229, 255, 0.25);
            --text-primary: #f0f4f8;
            --text-secondary: #94a3b8;
            --text-muted: #64748b;
            
            /* Affinities Colors */
            --color-gold: #ffd700;
            --color-gold-glow: rgba(255, 215, 0, 0.4);
            --color-teal: #00f0ff;
            --color-teal-glow: rgba(0, 240, 255, 0.4);
            --color-crimson: #ff0055;
            --color-crimson-glow: rgba(255, 0, 85, 0.4);
            --color-ruby: #ff3b30;
            --color-ruby-glow: rgba(255, 59, 48, 0.4);
            --color-emerald: #00ff66;
            --color-emerald-glow: rgba(0, 255, 102, 0.4);
            --color-sapphire: #0066ff;
            --color-sapphire-glow: rgba(0, 102, 255, 0.4);
            --color-amber: #ffb000;
            --color-amber-glow: rgba(255, 176, 0, 0.4);
            --color-purple: #b000ff;
            --color-purple-glow: rgba(176, 0, 255, 0.4);
            
            /* Current Selection Default (Teal) */
            --glow-primary: var(--color-teal);
            --glow-primary-rgb: 0, 240, 255;
            --glow-shadow: var(--color-teal-glow);
            
            --transition-premium: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            --font-display: 'Orbitron', sans-serif;
            --font-sub: 'Outfit', sans-serif;
            --font-body: 'Inter', sans-serif;
        }

        /* -------------------------------------------------- */
        /* 🪐 STYLING BASE                                    */
        /* -------------------------------------------------- */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
        }

        body {
            background-color: var(--bg-deep);
            color: var(--text-primary);
            font-family: var(--font-body);
            overflow-x: hidden;
            min-height: 100vh;
            position: relative;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(13, 20, 35, 0.6) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(20, 10, 35, 0.4) 0%, transparent 40%),
                linear-gradient(rgba(6, 8, 12, 0.95), rgba(6, 8, 12, 0.95)),
                url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80"%3E%3Cpath d="M40 0l40 40-40 40L0 40z" fill="rgba(255,255,255,0.015)" fill-rule="evenodd"/%3E%3C/svg%3E');
        }

        /* Ambient Animated Grid Overlay */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background: linear-gradient(rgba(0,0,0,0) 50%, rgba(0, 240, 255, 0.02) 50%), linear-gradient(90deg, rgba(0,0,0,0) 50%, rgba(0, 240, 255, 0.02) 50%);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: -1;
        }

        /* -------------------------------------------------- */
        /* 🖥️ LAYOUT STRUCTURE                                 */
        /* -------------------------------------------------- */
        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 40px 24px;
            position: relative;
            z-index: 10;
        }

        /* Language Selector & Logo */
        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding-bottom: 24px;
            margin-bottom: 48px;
        }

        .logo-container {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .logo-mark {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: linear-gradient(135deg, #00f0ff 0%, #ff0055 100%);
            display: grid;
            place-items: center;
            box-shadow: 0 0 20px rgba(0, 240, 255, 0.35);
            font-family: var(--font-display);
            font-weight: 900;
            font-size: 1.5rem;
            color: #fff;
            letter-spacing: -1px;
        }

        .logo-text h1 {
            font-family: var(--font-display);
            font-size: 1.4rem;
            font-weight: 800;
            letter-spacing: 2px;
            background: linear-gradient(90deg, #fff 0%, #94a3b8 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-text p {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            color: var(--text-secondary);
            letter-spacing: 4px;
            text-transform: uppercase;
        }

        /* Premium Glass Controls */
        .control-panel {
            display: flex;
            gap: 12px;
            background: rgba(255,255,255,0.03);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 30px;
            padding: 4px;
        }

        .btn-lang {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 8px 18px;
            border-radius: 20px;
            cursor: pointer;
            font-family: var(--font-sub);
            font-weight: 600;
            font-size: 0.8rem;
            transition: var(--transition-premium);
        }

        .btn-lang.active {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
        }

        /* -------------------------------------------------- */
        /* 🏷️ INTRO VECTOR                                    */
        /* -------------------------------------------------- */
        .intro-section {
            text-align: center;
            margin-bottom: 60px;
        }

        .tagline {
            display: inline-block;
            font-family: var(--font-sub);
            font-size: 0.8rem;
            letter-spacing: 6px;
            text-transform: uppercase;
            color: var(--glow-primary);
            margin-bottom: 16px;
            font-weight: 700;
            text-shadow: 0 0 10px var(--glow-shadow);
        }

        .main-title {
            font-family: var(--font-display);
            font-size: 2.8rem;
            font-weight: 900;
            letter-spacing: -0.5px;
            margin-bottom: 20px;
            text-shadow: 0 0 40px rgba(0,0,0,0.8);
        }

        .main-title span {
            color: var(--glow-primary);
            text-shadow: 0 0 15px var(--glow-shadow);
        }

        .main-desc {
            max-width: 680px;
            margin: 0 auto;
            color: var(--text-secondary);
            font-size: 1.05rem;
            line-height: 1.6;
            font-family: var(--font-body);
        }

        /* -------------------------------------------------- */
        /* 🎴 GRID SHOWCASE DECK                              */
        /* -------------------------------------------------- */
        .showcase-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px;
            margin-bottom: 80px;
            justify-items: center;
        }

        /* -------------------------------------------------- */
        /* 🔮 THE HOLO CARD (PURE 3D PARALLAX)                */
        /* -------------------------------------------------- */
        .perspective-wrapper {
            perspective: 2000px;
            width: 320px;
            height: 426px; /* Perfect 3:4 aspect ratio */
            position: relative;
            cursor: pointer;
        }

        .card-container {
            width: 100%;
            height: 100%;
            position: absolute;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
            transform: rotateX(var(--rx, 0deg)) rotateY(calc(var(--base-ry, 0deg) + var(--ry, 0deg)));
            border-radius: 24px;
        }

        /* Card flip mechanism */
        .card-container.flipped {
            --base-ry: 180deg;
        }

        .perspective-wrapper.fit-image {
            width: 188px; /* Fits base plate 1:2.26 aspect ratio exactly at 426px height */
        }

        .back-text-overlay-content {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 32px 24px;
            box-sizing: border-box;
            text-align: left;
            transition: all 0.3s ease;
        }

        /* Slender Bounded Mode Adaptations */
        .fit-image .back-text-overlay-content {
            padding: 20px 14px; /* Squeezed padding for the 188px narrow card */
        }

        .fit-image .back-header,
        .fit-image .back-body,
        .fit-image .back-footer {
            padding: 6px 10px; /* Slimmer inner panels */
        }

        .fit-image .back-body {
            margin: 6px 0;
            gap: 6px;
        }

        .fit-image .lore-box {
            margin-bottom: 4px !important;
            gap: 3px;
        }

        .fit-image .btn-interact {
            padding: 4px 10px;
            font-size: 0.68rem;
            border-radius: 10px;
        }

        .fit-image .price-val {
            font-size: 0.95rem;
        }

        .fit-image .back-title {
            font-size: 1.05rem; /* Balanced title scale */
        }

        .fit-image .back-desc-meta {
            font-size: 0.64rem; /* Tiny meta description */
            letter-spacing: 1px;
        }

        .fit-image .lore-text {
            font-size: 0.72rem !important; /* Elegant smaller reading profile */
            line-height: 1.35;
        }

        .fit-image .effect-terminal {
            font-size: 0.70rem;
            padding: 6px 8px;
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Front Layer Styles */
        .card-front {
            background: transparent; /* Organic transparent-boundary design */
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
            border: none;
            overflow: visible; /* Dynamic holographic 3D pop-out flow */
        }

        /* Layer 1: Base Plate */
        .base-plate-layer {
            position: absolute;
            inset: 0;
            background-size: contain; /* Sized contain to respect organic outlines */
            background-repeat: no-repeat;
            background-position: center;
            transform: translateZ(0px) scale(1.02);
            transition: transform 0.5s ease, filter 0.5s ease;
            background-color: transparent;
            /* Filter moved here to prevent flattening preserve-3d on the parent card-container */
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65)) 
                    drop-shadow(0 0 20px rgba(var(--glow-primary-rgb), 0.15));
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        /* Layer 2: Glowing Cyber-Grid Portal backing */
        .portal-layer {
            display: none; /* Hide rigid rectangular portals for organic shape support */
        }

        /* Layer 3: High-Fidelity Floating Glyph Core */
        .glyph-layer {
            position: absolute;
            inset: 32px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            transform: translateZ(80px) scale(0.9);
            filter: drop-shadow(0 15px 25px rgba(var(--glow-primary-rgb), 0.6)) brightness(1.2) contrast(1.1);
            transition: transform 0.5s ease, filter 0.5s ease;
        }

        /* Layer 4: Poke-Holo Glare Foil Shader */
        .holo-overlay {
            position: absolute;
            inset: 0;
            mix-blend-mode: color-dodge;
            opacity: var(--opacity, 0);
            background: radial-gradient(
                circle at var(--glare-x, 50%) var(--glare-y, 50%),
                rgba(255, 255, 255, 0.38) 0%,
                rgba(var(--glow-primary-rgb), 0.22) 25%,
                rgba(120, 0, 255, 0.18) 50%,
                transparent 80%
            );
            z-index: 10;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }

        /* Layer 5: Card Bevel Frame Edge */
        .card-bezel {
            display: none; /* Hide rigid rectangular bezels for organic shape support */
        }

        /* -------------------------------------------------- */
        /* 📋 BACK LORE PANEL                                 */
        /* -------------------------------------------------- */
        .card-back {
            background-image: url('Tests/1/base-plate-38_circuiticus_steampunk-copper.png'); /* Backview plate */
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            transform: rotateY(180deg);
            -webkit-transform: rotateY(180deg);
            color: #fff;
            padding: 32px 24px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            border: none;
            box-shadow: none;
            /* Filter moved here to prevent flattening preserve-3d on the parent card-container */
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.65)) 
                    drop-shadow(0 0 20px rgba(var(--glow-primary-rgb), 0.15));
            transition: filter 0.5s ease;
        }

        /* Hover shadow glow on layers to preserve 3D context */
        .card-container:hover .base-plate-layer,
        .card-container:hover .card-back {
            filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.85)) 
                    drop-shadow(0 0 35px rgba(var(--glow-primary-rgb), 0.65));
        }

        .back-header {
            background: rgba(6, 8, 12, 0.45);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 10px 14px;
            border-bottom: 1px solid rgba(var(--glow-primary-rgb), 0.15);
        }

        .back-top-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .back-id {
            font-family: 'Courier New', monospace;
            color: var(--glow-primary);
            font-weight: 800;
            font-size: 0.95rem;
            letter-spacing: 1px;
        }

        .back-tier {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            background: rgba(var(--glow-primary-rgb), 0.12);
            color: var(--glow-primary);
            padding: 2px 10px;
            border-radius: 12px;
            font-weight: bold;
            letter-spacing: 0.5px;
            border: 1px solid rgba(var(--glow-primary-rgb), 0.2);
        }

        .back-title {
            font-family: var(--font-display);
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            background: linear-gradient(90deg, #ffffff 0%, var(--glow-primary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .back-desc-meta {
            font-size: 0.72rem;
            color: var(--text-muted);
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-family: var(--font-sub);
            margin-top: 4px;
        }

        .back-body {
            margin: 12px 0;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 12px;
            background: rgba(6, 8, 12, 0.45);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 12px 14px;
        }

        .lore-box {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .label {
            font-family: var(--font-sub);
            font-size: 0.72rem;
            color: var(--glow-primary);
            letter-spacing: 1.5px;
            font-weight: bold;
            text-transform: uppercase;
        }

        .lore-text {
            font-size: 0.85rem;
            line-height: 1.45;
            color: rgba(255, 255, 255, 0.72);
            font-style: italic;
        }

        .effect-terminal {
            background: rgba(0, 0, 0, 0.45);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.15);
            border-radius: 10px;
            padding: 12px;
            font-family: 'Courier New', monospace;
            font-size: 0.78rem;
            color: #a5f3fc;
            box-shadow: inset 0 0 15px rgba(var(--glow-primary-rgb), 0.05);
            line-height: 1.4;
            word-break: break-all;
        }

        .effect-terminal strong {
            color: var(--glow-primary);
        }

        .back-footer {
            border-top: 1px solid rgba(var(--glow-primary-rgb), 0.15);
            padding-top: 10px;
            background: rgba(6, 8, 12, 0.45);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 8px 14px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

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

        .price-label {
            font-size: 0.65rem;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .price-val {
            font-family: var(--font-display);
            font-size: 1.15rem;
            color: #fff;
            font-weight: bold;
        }

        .btn-interact {
            background: linear-gradient(135deg, rgba(var(--glow-primary-rgb), 0.2) 0%, rgba(var(--glow-primary-rgb), 0.05) 100%);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.3);
            color: #fff;
            font-family: var(--font-sub);
            padding: 8px 18px;
            border-radius: 14px;
            font-size: 0.78rem;
            font-weight: bold;
            letter-spacing: 0.5px;
            transition: var(--transition-premium);
            cursor: pointer;
        }

        .btn-interact:hover {
            background: rgba(var(--glow-primary-rgb), 0.35);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.3);
            border-color: rgba(var(--glow-primary-rgb), 0.6);
        }

        .btn-interact.active {
            background: rgba(var(--glow-primary-rgb), 0.35);
            border-color: rgba(var(--glow-primary-rgb), 0.7);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.45);
        }

        /* -------------------------------------------------- */
        /* 🛠️ INTERACTIVE SANDBOX FORGE                      */
        /* -------------------------------------------------- */
        .forge-section {
            background: var(--bg-panel);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 32px;
            padding: 40px;
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 48px;
            align-items: center;
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.4),
                inset 0 1px 2px rgba(255,255,255,0.05);
            margin-top: 40px;
        }

        @media (max-width: 900px) {
            .forge-section {
                grid-template-columns: 1fr;
                justify-items: center;
                padding: 24px;
            }
        }

        .forge-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .forge-controls {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }

        .forge-header h2 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 800;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .forge-header p {
            color: var(--text-secondary);
            font-size: 0.92rem;
            line-height: 1.5;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .control-label-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .control-label-row span:last-child {
            font-family: 'Courier New', monospace;
            color: var(--glow-primary);
            font-size: 0.85rem;
            font-weight: bold;
        }

        /* Grid selection options */
        .option-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
            gap: 12px;
        }

        .option-btn {
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.08);
            padding: 10px 14px;
            border-radius: 12px;
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.82rem;
            cursor: pointer;
            text-align: left;
            transition: var(--transition-premium);
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .option-btn:hover {
            background: rgba(255,255,255,0.05);
            border-color: rgba(255,255,255,0.15);
            color: #fff;
        }

        .option-btn.active {
            background: rgba(var(--glow-primary-rgb), 0.1);
            border-color: rgba(var(--glow-primary-rgb), 0.5);
            color: #fff;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.15);
        }

        .option-btn span:first-child {
            font-weight: bold;
            font-size: 0.85rem;
        }

        .option-btn span:last-child {
            font-size: 0.68rem;
            color: var(--text-muted);
            text-transform: uppercase;
        }

        /* Color / Affinity dot picker */
        .color-row {
            display: flex;
            gap: 16px;
        }

        .color-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            cursor: pointer;
            transition: var(--transition-premium);
            border: 3px solid transparent;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.5);
            position: relative;
        }

        .color-dot:hover {
            transform: scale(1.15);
        }

        .color-dot.active {
            border-color: #fff;
            transform: scale(1.1);
        }

        /* Depth Slider */
        .slider-row {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .slider {
            flex-grow: 1;
            -webkit-appearance: none;
            appearance: none;
            height: 6px;
            border-radius: 3px;
            background: rgba(255,255,255,0.1);
            outline: none;
            transition: opacity .2s;
        }

        .slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.8);
            transition: var(--transition-premium);
        }

        .slider::-webkit-slider-thumb:hover {
            transform: scale(1.2);
            background: var(--glow-primary);
        }

        /* Footer info details */
        .footer {
            margin-top: 80px;
            padding: 30px 0;
            border-top: 1px solid rgba(255,255,255,0.07);
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-muted);
            font-size: 0.8rem;
            font-family: var(--font-sub);
        }

        .footer a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: var(--transition-premium);
        }

        .footer a:hover {
            color: var(--glow-primary);
            text-shadow: 0 0 5px var(--glow-shadow);
        }

        /* Flip instruction badge */
        .flip-indicator {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.08);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 0.72rem;
            font-family: var(--font-sub);
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            gap: 8px;
            animation: pulseFlicker 3s ease-in-out infinite;
        }

        @keyframes pulseFlicker {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.15); }
        }

        .audio-toggle-wrapper {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .audio-toggle-btn {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            color: var(--text-secondary);
            font-family: var(--font-sub);
            font-size: 0.75rem;
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            transition: var(--transition-premium);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .audio-toggle-btn.active {
            background: rgba(var(--glow-primary-rgb), 0.1);
            border-color: rgba(var(--glow-primary-rgb), 0.3);
            color: #fff;
        }

        /* -------------------------------------------------- */
        /* 🔍 FILTERS & PAGINATION STYLES (DYNAMIC GRID)       */
        /* -------------------------------------------------- */
        .filter-section {
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin-bottom: 48px;
            background: rgba(255, 255, 255, 0.02);
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 24px;
            padding: 24px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
            z-index: 20;
        }

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

        .search-input {
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            padding: 14px 20px 14px 50px;
            color: var(--text-primary);
            font-family: var(--font-body);
            font-size: 0.95rem;
            outline: none;
            transition: var(--transition-premium);
        }

        .search-input:focus {
            border-color: var(--glow-primary);
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.2);
        }

        .search-wrapper::before {
            content: '🔍';
            position: absolute;
            left: 20px;
            top: 52%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            opacity: 0.6;
        }

        .filter-groups {
            display: flex;
            flex-wrap: wrap;
            gap: 24px;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex-grow: 1;
            min-width: 250px;
        }

        .filter-group-title {
            font-family: var(--font-sub);
            font-size: 0.75rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--text-secondary);
            font-weight: 700;
        }

        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .btn-filter {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: 12px;
            cursor: pointer;
            font-family: var(--font-sub);
            font-weight: 600;
            font-size: 0.8rem;
            transition: var(--transition-premium);
        }

        .btn-filter:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.15);
            color: #fff;
        }

        .btn-filter.active {
            background: rgba(var(--glow-primary-rgb), 0.15);
            border-color: var(--glow-primary);
            color: #fff;
            box-shadow: 0 0 10px rgba(var(--glow-primary-rgb), 0.2);
        }

        .load-more-container {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            margin-bottom: 60px;
        }

        .btn-load-more {
            background: linear-gradient(135deg, rgba(var(--glow-primary-rgb), 0.1) 0%, rgba(var(--glow-primary-rgb), 0.03) 100%);
            border: 1px solid rgba(var(--glow-primary-rgb), 0.25);
            color: #fff;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 2px;
            padding: 12px 32px;
            border-radius: 16px;
            cursor: pointer;
            transition: var(--transition-premium);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            text-transform: uppercase;
            outline: none;
        }

        .btn-load-more:hover {
            background: rgba(var(--glow-primary-rgb), 0.2);
            border-color: var(--glow-primary);
            box-shadow: 0 0 25px rgba(var(--glow-primary-rgb), 0.35);
            transform: translateY(-2px);
        }

        .btn-load-more:active {
            transform: translateY(1px);
        }

        /* -------------------------------------------------- */
        /* 🎛️ FUTURISTIC GLASS TABS                          */
        /* -------------------------------------------------- */
        .tabs-container {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-bottom: 48px;
            position: relative;
            z-index: 25;
            background: rgba(255, 255, 255, 0.02);
            padding: 8px;
            border-radius: 24px;
            backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
        }

        .btn-tab {
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-secondary);
            padding: 10px 24px;
            border-radius: 18px;
            cursor: pointer;
            font-family: var(--font-display);
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            transition: var(--transition-premium);
            display: flex;
            align-items: center;
            gap: 10px;
            text-transform: uppercase;
        }

        .btn-tab:hover {
            color: #fff;
            background: rgba(255, 255, 255, 0.04);
            transform: translateY(-1px);
        }

        .btn-tab.active {
            background: rgba(var(--glow-primary-rgb), 0.15);
            border-color: rgba(var(--glow-primary-rgb), 0.4);
            color: #fff;
            box-shadow: 0 0 15px rgba(var(--glow-primary-rgb), 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.1);
            text-shadow: 0 0 8px var(--glow-shadow);
        }

        /* -------------------------------------------------- */
        /* 🧪 ALCHEMICAL TEST CHAMBER                         */
        /* -------------------------------------------------- */
        .test-chamber {
            background: var(--bg-panel);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 32px;
            padding: 48px;
            box-shadow: 
                0 30px 60px rgba(0,0,0,0.4),
                inset 0 1px 2px rgba(255,255,255,0.05);
            margin-top: 20px;
            animation: fadeIn 0.8s cubic-bezier(0.23, 1, 0.32, 1);
        }

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

        .test-chamber-header {
            text-align: center;
            margin-bottom: 44px;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            padding-bottom: 24px;
        }

        .test-chamber-header h3 {
            font-family: var(--font-display);
            font-size: 1.8rem;
            font-weight: 900;
            letter-spacing: 2px;
            margin-bottom: 12px;
            background: linear-gradient(90deg, var(--glow-primary) 0%, #ff0055 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
        }

        .test-chamber-header p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            max-width: 850px;
            margin: 0 auto;
            line-height: 1.6;
            font-family: var(--font-body);
        }

        .test-chamber-layout {
            display: grid;
            grid-template-columns: 1fr 1.3fr;
            gap: 48px;
            align-items: center;
        }

        @media (max-width: 900px) {
            .test-chamber-layout {
                grid-template-columns: 1fr;
                justify-items: center;
                gap: 32px;
                padding: 10px;
            }
        }

        .test-card-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 1050px !important;
            padding: 40px 0 !important;
            overflow: visible !important;
            transition: min-height 0.3s ease;
        }

        #testPerspectiveWrapper {
            transform: scale(var(--test-scale, 1.15));
            transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            transform-origin: center center;
            padding: 20px 0;
            margin: 0 auto;
            overflow: visible !important;
        }

        .test-card-display .base-plate-layer {
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
        }

        .test-card-display .card-back {
            display: block !important;
            padding: 0 !important;
            background-size: contain !important;
            background-repeat: no-repeat !important;
            background-position: center !important;
        }

        .test-card-controls {
            display: flex;
            flex-direction: column;
            gap: 28px;
        }