/* Base Styling & HUD Variables */
        :root {
            --bg-color: #07090C;
            --bg-surface: #0E1218;
            --bg-surface-hover: #151A22;
            --border-color: rgba(255, 255, 255, 0.12);
            --border-light: rgba(255, 255, 255, 0.25);
            --text-primary: #F8FAFC;
            --text-secondary: #94A3B8;
            --text-muted: #64748B;
            
            /* Destiny Elements */
            --accent-kinetic: #E2E8F0;
            --accent-solar: #F97316;
            --accent-arc: #06B6D4;
            --accent-void: #A855F7;
            --accent-stasis: #3B82F6;
            --accent-strand: #10B981;
            --accent-siva: #EF4444;
            --accent-pink: #EC4899;
            --accent-decay: #22C55E;
            --accent-prismatic: linear-gradient(135deg, #F97316 0%, #A855F7 50%, #06B6D4 100%);
            
            --transition: all 0.2s ease-out;
            
            /* Vanguard Chamfer */
            --clip-chamfer: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
            --clip-chamfer-lg: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--bg-color);
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 40px 40px;
            background-position: center top;
            background-attachment: fixed;
            color: var(--text-primary);
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            overflow-x: hidden;
            padding-bottom: 120px;
        }

        h1, h2, h3, h4, h5, .hud-font {
            font-family: 'Rajdhani', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Hero Header */
        .hero {
            position: relative;
            padding: 100px 24px 80px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            background: radial-gradient(circle at top, rgba(14, 18, 24, 0.9) 0%, var(--bg-color) 80%);
            margin-bottom: 60px;
            overflow: hidden;
        }

        .hero > * {
            position: relative;
            z-index: 1;
        }

        .tagline-badge {
            display: inline-block;
            padding: 6px 14px;
            background: rgba(5, 10, 18, 0.72);
            border: 1px solid rgba(148, 163, 184, 0.55);
            color: #cbd5e1;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 0.92rem;
            text-transform: uppercase;
            letter-spacing: 0.14em;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
            backdrop-filter: blur(4px);
            margin-bottom: 24px;
        }

        .hero h1 {
            font-size: 4.5rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            margin-bottom: 16px;
            color: var(--text-primary);
        }

        .hero-title {
            display: block;
        }

        .hero-logo-backdrop {
            position: absolute;
            left: 50%;
            top: 50%;
            width: clamp(280px, 36vw, 440px);
            height: auto;
            transform: translate(-50%, -50%);
            opacity: 0.1;
            filter: blur(0.5px) drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
            object-fit: contain;
            pointer-events: none;
            user-select: none;
            z-index: 0;
        }

        .hero h1 span {
            color: var(--accent-kinetic);
            opacity: 0.7;
        }

        .hero p {
            font-size: 1.15rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto;
            font-weight: 300;
        }

        @media (max-width: 768px) {
            .hero-logo-backdrop {
                width: clamp(220px, 62vw, 320px);
                top: 50%;
                opacity: 0.075;
            }
        }

        /* Page Wrapper (Sidebar + Content) */
        .page-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 24px;
            display: flex;
            gap: 64px;
            align-items: flex-start;
        }

        /* Sticky Sidebar Navigation */
        .sidebar {
            position: sticky;
            top: 40px;
            width: 280px;
            flex-shrink: 0;
            z-index: 100;
        }

        .sidebar-header {
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.9rem;
            font-weight: 700;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.2em;
            margin-bottom: 24px;
            padding-bottom: 12px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .sidebar-header svg {
            width: 16px;
            height: 16px;
            fill: var(--text-muted);
        }

        .nav-list {
            list-style: none;
            position: relative;
            padding-left: 20px;
            border-left: 2px solid var(--border-color);
        }

        .nav-item {
            margin-bottom: 8px;
            position: relative;
        }

        /* Vanguard Geometric Nodes */
        .nav-item::before {
            content: '';
            position: absolute;
            left: -25px; /* Pulls it exactly onto the border */
            top: 14px;
            width: 8px;
            height: 8px;
            background-color: var(--bg-color);
            border: 2px solid var(--text-muted);
            transform: rotate(45deg);
            transition: var(--transition);
            z-index: 2;
        }

        .nav-link {
            display: block;
            padding: 10px 16px;
            color: var(--text-secondary);
            font-family: 'Rajdhani', sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            text-decoration: none;
            transition: var(--transition);
            clip-path: var(--clip-chamfer);
            background: transparent;
        }

        .nav-link:hover {
            color: var(--text-primary);
            background: var(--bg-surface-hover);
        }

        /* Active State */
        .nav-item.active::before {
            background-color: var(--text-primary);
            border-color: var(--text-primary);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
        }

        .nav-item.active .nav-link {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.05);
        }

        /* Main Content Area */
        .content-area {
            flex-grow: 1;
            min-width: 0; /* Prevents grid blowout */
        }

        /* Sections */
        section {
            scroll-margin-top: 40px; /* Offset for smooth scroll */
            margin-bottom: 120px; /* Massive spacing between major topics */
            animation: fadeIn 0.5s ease-out forwards;
        }

        .section-header {
            margin-bottom: 40px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px;
        }

        .section-header h2 {
            font-size: 2.2rem;
            color: var(--text-primary);
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .section-header p {
            color: var(--text-secondary);
            font-size: 1.05rem;
            margin-top: 8px;
        }

        /* Grids */
        .grid-2 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .grid-3 {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        /* Destiny Data Cards */
        .card {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer);
            padding: 32px;
            position: relative;
            transition: var(--transition);
        }

        .card:hover {
            background-color: var(--bg-surface-hover);
            border-color: var(--border-light);
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--border-color);
            transition: var(--transition);
        }

        .card:hover::before {
            background: var(--text-primary);
        }

        .card h3 {
            font-size: 1.5rem;
            margin-bottom: 12px;
            color: var(--text-primary);
        }

        .card p {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .activity-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
            color: var(--text-secondary);
            font-size: 0.92rem;
        }

        .activity-list li {
            position: relative;
            padding-left: 14px;
        }

        .activity-list li::before {
            content: '▸';
            position: absolute;
            left: 0;
            top: 0;
            color: var(--text-muted);
        }

        .timeline-visual {
            position: relative;
            padding-left: 26px;
            margin-bottom: 28px;
        }

        .timeline-line {
            position: absolute;
            left: 6px;
            top: 8px;
            bottom: 12px;
            width: 2px;
            background: linear-gradient(180deg, var(--text-muted) 0%, transparent 100%);
        }

        .timeline-item-vis {
            position: relative;
            margin-bottom: 24px;
        }

        .timeline-badge-vis {
            position: absolute;
            left: -26px;
            top: 2px;
            width: 18px;
            height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 700;
            font-family: 'Rajdhani', sans-serif;
            color: var(--text-primary);
            border: 1px solid var(--border-light);
            background: var(--bg-surface);
            border-radius: 2px;
        }

        .timeline-content-vis {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer);
            padding: 18px 22px;
        }

        .timeline-content-vis h4 {
            color: var(--text-primary);
            font-size: 1.1rem;
            margin-bottom: 8px;
        }

        .timeline-content-vis p {
            color: var(--text-secondary);
            font-size: 0.95rem;
        }

        .placeholder-icon {
            font-size: 1.6rem;
            margin-bottom: 10px;
        }

        .script-quote {
            margin-top: 32px;
            padding: 24px;
            border: 1px solid var(--border-color);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
            clip-path: var(--clip-chamfer);
        }

        .script-speaker {
            color: var(--text-primary);
            font-family: 'Rajdhani', sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 10px;
            font-size: 1.05rem;
        }

        .script-quote p {
            color: var(--text-secondary);
            margin-bottom: 10px;
        }

        /* Paradox Box (Major Callouts) */
        .paradox-box {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer-lg);
            padding: 40px;
            margin-bottom: 40px;
            position: relative;
        }

        .paradox-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: var(--text-primary);
        }

        .paradox-badge {
            display: inline-block;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            text-transform: uppercase;
            padding: 4px 12px;
            margin-bottom: 16px;
            letter-spacing: 0.1em;
        }

        .paradox-box h2 {
            font-size: 2.2rem;
            margin-bottom: 16px;
            color: var(--text-primary);
        }

        .paradox-content-grid {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 48px;
            align-items: center;
        }

        .placeholder-image {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer);
            width: 100%;
            min-height: 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            font-family: 'Rajdhani', sans-serif;
            font-size: 1rem;
            letter-spacing: 0.1em;
        }

        .feature-art-card {
            position: relative;
            margin: 0;
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer);
            overflow: hidden;
            background: #0a1119;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
        }

        .feature-art-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(145deg, rgba(6, 182, 212, 0.14), transparent 42%);
            pointer-events: none;
            z-index: 2;
        }

        .feature-art-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 58% 40%, transparent 30%, rgba(5, 8, 12, 0.56) 100%);
            pointer-events: none;
            z-index: 2;
        }

        .feature-art-image {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: cover;
            display: block;
            transform: scale(1.02);
            filter: saturate(1.08) contrast(1.05);
        }

        .feature-art-caption {
            position: absolute;
            left: 14px;
            bottom: 12px;
            z-index: 3;
            margin: 0;
            padding: 6px 10px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(6, 10, 16, 0.65);
            color: #dbeafe;
            font-family: 'Rajdhani', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            font-size: 0.8rem;
            clip-path: var(--clip-chamfer);
        }

        .feature-art-card-prismatic::before {
            background: linear-gradient(150deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.08) 45%, transparent 70%);
        }

        .feature-art-image-prismatic {
            aspect-ratio: 16 / 9;
            object-position: center;
            filter: saturate(1.12) contrast(1.04);
        }

        .feature-art-card-sony::before {
            background: linear-gradient(150deg, rgba(59, 130, 246, 0.18), rgba(6, 182, 212, 0.1) 48%, transparent 72%);
        }

        .feature-art-image-sony {
            aspect-ratio: 16 / 9;
            object-position: center 40%;
            filter: saturate(1.06) contrast(1.06);
        }

        .feature-art-card-shaxx::before {
            background: linear-gradient(150deg, rgba(249, 115, 22, 0.16), rgba(239, 68, 68, 0.1) 46%, transparent 72%);
        }

        .feature-art-image-shaxx {
            aspect-ratio: 16 / 9;
            object-position: center 28%;
            filter: saturate(1.08) contrast(1.08);
        }

        .feature-art-card-engrams::before {
            background: linear-gradient(150deg, rgba(250, 204, 21, 0.15), rgba(168, 85, 247, 0.12) 45%, transparent 72%);
        }

        .feature-art-image-engrams {
            aspect-ratio: 16 / 9;
            object-position: center 36%;
            filter: saturate(1.1) contrast(1.06);
        }

        /* Campaign Accordions (Director Nodes) */
        .phase-header {
            font-size: 2.5rem;
            margin: 60px 0 24px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px;
            color: var(--text-primary);
        }

        .phase-subtitle {
            font-family: 'Inter', sans-serif;
            font-size: 1.05rem;
            color: var(--text-secondary);
            font-weight: 400;
            margin-top: 8px;
            text-transform: none;
            letter-spacing: normal;
        }

        .expansion-panel {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            margin-bottom: 16px;
            transition: var(--transition);
        }

        .expansion-panel:hover {
            border-color: var(--border-light);
        }

        .expansion-trigger {
            width: 100%;
            padding: 24px 32px;
            background: transparent;
            border: none;
            color: var(--text-primary);
            text-align: left;
            font-size: 1.3rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: 'Rajdhani', sans-serif;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .expansion-meta {
            font-family: 'Inter', sans-serif;
            font-size: 0.9rem;
            color: var(--text-muted);
            text-transform: none;
            letter-spacing: normal;
            font-weight: 400;
            margin-left: 16px;
        }

        .expansion-trigger svg {
            width: 24px;
            height: 24px;
            fill: var(--text-muted);
            transition: transform 0.2s;
        }

        .expansion-panel.open .expansion-trigger svg {
            transform: rotate(180deg);
            fill: var(--text-primary);
        }

        .expansion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
        }

        .expansion-panel.open .expansion-content {
            max-height: 2500px;
            border-top: 1px solid var(--border-color);
        }

        .expansion-content-inner {
            padding: 32px;
            background: rgba(0,0,0,0.2);
        }

        .campaign-summary {
            font-size: 1rem;
            margin-bottom: 32px;
            color: var(--text-primary);
            max-width: 900px;
        }

        /* Activity Boxes */
        .activities-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 24px;
        }

        .activity-box {
            background-color: var(--bg-surface);
            border: 1px solid var(--border-color);
            padding: 24px;
            display: flex;
            flex-direction: column;
            clip-path: var(--clip-chamfer);
        }

        .activity-box h5 {
            font-size: 1.1rem;
            color: var(--text-primary);
            margin-bottom: 12px;
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
        }

        .activity-tag {
            font-family: 'Inter', sans-serif;
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
        }

        /* Exotics Catalog */
        .filter-controls {
            display: flex;
            gap: 16px;
            margin-bottom: 32px;
            flex-wrap: wrap;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 16px;
        }

        .filter-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: 'Rajdhani', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            cursor: pointer;
            padding: 8px 0;
            position: relative;
            transition: var(--transition);
        }

        .filter-btn:hover { color: var(--text-primary); }
        .filter-btn.active { color: var(--accent-solar); }

        .exotic-card {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer);
            display: flex;
            flex-direction: column;
            transition: var(--transition);
        }

        .exotic-card:hover {
            background: var(--bg-surface-hover);
            border-color: rgba(249, 115, 22, 0.4);
        }

        .exotic-header {
            padding: 24px;
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            background: rgba(255,255,255,0.02);
        }

        .exotic-title h3 {
            font-size: 1.4rem;
            color: #E2CF7D;
            margin-bottom: 4px;
        }

        .exotic-type {
            font-family: 'Inter', sans-serif;
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .exotic-tag {
            font-family: 'Rajdhani', sans-serif;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 4px 8px;
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border-color);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .exotic-body {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .exotic-desc {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-bottom: 24px;
            font-style: italic;
        }

        .exotic-perk-box {
            background: rgba(0, 0, 0, 0.2);
            border-left: 2px solid #E2CF7D;
            padding: 16px;
        }

        .exotic-perk-title {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 600;
            color: var(--text-primary);
            font-size: 1.1rem;
            text-transform: uppercase;
            margin-bottom: 4px;
        }

        .exotic-perk-desc {
            font-size: 0.9rem;
            color: var(--text-secondary);
        }

        /* Rules Lists */
        .rules-list {
            list-style-type: none;
            margin-top: 16px;
        }

        .rules-list li {
            padding-left: 20px;
            position: relative;
            margin-bottom: 12px;
            font-size: 0.95rem;
            color: var(--text-secondary);
        }

        .rules-list li::before {
            content: '■';
            position: absolute;
            left: 0;
            top: 2px;
            color: var(--text-muted);
            font-size: 0.7rem;
        }

        /* Responsive Mobile Behavior */
        @media (max-width: 1024px) {
            .page-wrapper {
                flex-direction: column;
                gap: 0;
            }
            .sidebar {
                position: sticky;
                top: 0;
                width: 100%;
                background: rgba(7, 9, 12, 0.95);
                backdrop-filter: blur(12px);
                border-bottom: 1px solid var(--border-color);
                margin-bottom: 40px;
                padding: 16px 24px;
                margin-left: -24px; /* Counteract wrapper padding */
                margin-right: -24px;
                width: calc(100% + 48px);
            }
            .sidebar-header {
                display: none; /* Hide 'Directory' title on mobile */
            }
            .nav-list {
                display: flex;
                overflow-x: auto;
                border-left: none;
                padding-left: 0;
                gap: 16px;
                scrollbar-width: none; /* Hide scrollbar */
            }
            .nav-list::-webkit-scrollbar { display: none; }
            .nav-item { margin-bottom: 0; }
            .nav-item::before { display: none; } /* Hide diamonds */
            .nav-link {
                white-space: nowrap;
                padding: 12px 16px;
                border-bottom: 2px solid transparent;
                clip-path: none;
            }
            .nav-item.active .nav-link {
                border-bottom-color: var(--text-primary);
                background: transparent;
            }
            .paradox-content-grid { grid-template-columns: 1fr; }
            .activities-grid { grid-template-columns: 1fr; }
            section { scroll-margin-top: 100px; } /* Adjust for top mobile bar */
        }

    

.data-label {
            color: var(--text-primary);
            font-weight: 600;
            margin-right: 5px;
        }

.sandbox-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 40px;
        }

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

        .sandbox-card {
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer); border-radius: 0;
            padding: 35px;
            background: var(--bg-surface);
            transition: var(--transition);
        }

        .sandbox-card.tactical {
            background: linear-gradient(135deg, rgba(148, 163, 184, 0.02) 0%, rgba(148, 163, 184, 0.05) 100%);
        }

        .sandbox-card.mayhem {
            background: linear-gradient(135deg, rgba(168, 85, 247, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .sandbox-card.mayhem:hover {
            border-color: rgba(255, 255, 255, 0.3);
        }

        .sandbox-card.tactical:hover {
            border-color: rgba(255, 255, 255, 0.2);
        }

        .sandbox-badge {
            display: inline-block;
            padding: 4px 10px;
            clip-path: var(--clip-chamfer); border-radius: 0;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 15px;
        }

        .sandbox-card.tactical .sandbox-badge {
            background: #475569;
            color: var(--text-primary);
        }

        .sandbox-card.mayhem .sandbox-badge {
            background: var(--accent-pink);
            color: var(--text-primary);
        }

.trials-section {
            background: radial-gradient(circle at bottom right, rgba(6, 182, 212, 0.05) 0%, rgba(11, 14, 20, 0) 70%);
            border: 1px solid var(--border-color);
            clip-path: var(--clip-chamfer); border-radius: 0;
            padding: 40px;
            margin-top: 40px;
        }

        .trials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-top: 30px;
        }

.styled-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9rem;
            text-align: left;
            background: var(--bg-surface);
            clip-path: var(--clip-chamfer); border-radius: 0;
            overflow: hidden;
            border: 1px solid var(--border-color);
        }

        .styled-table th {
            background-color: rgba(255, 255, 255, 0.02);
            color: var(--text-primary);
            font-weight: 600;
            padding: 15px 20px;
            border-bottom: 2px solid var(--border-color);
        }

        .styled-table td {
            padding: 15px 20px;
            border-bottom: 1px solid var(--border-color);
            color: var(--text-secondary);
            vertical-align: top;
        }

        .styled-table tr:hover {
            background-color: rgba(255, 255, 255, 0.01);
        }

        .element-badge {
            display: inline-block;
            padding: 3px 8px;
            clip-path: var(--clip-chamfer); border-radius: 0;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .element-solar { background: rgba(255, 136, 0, 0.15); color: var(--accent-solar); }
        .element-arc { background: rgba(6, 182, 212, 0.15); color: var(--accent-arc); }
        .element-void { background: rgba(168, 85, 247, 0.15); color: var(--accent-void); }
        .element-siva { background: rgba(239, 68, 68, 0.15); color: var(--accent-siva); }
        .element-decay { background: rgba(16, 185, 129, 0.15); color: var(--accent-decay); }
        .element-prismatic { background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(6, 182, 212, 0.2) 100%); color: #e9d5ff; }
    
        .paradox-content-grid.reverse {
            grid-template-columns: 1fr 1.2fr;
        }
        .paradox-content-grid.reverse .paradox-text { order: 2; }
        .paradox-content-grid.reverse .paradox-image-wrapper { order: 1; }
        @media (max-width: 1024px) {
            .paradox-content-grid.reverse .paradox-text { order: 1; }
            .paradox-content-grid.reverse .paradox-image-wrapper { order: 2; }
        }

    
        .onboarding-box {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            padding: 32px;
            margin-top: 24px;
            margin-bottom: 48px;
            clip-path: var(--clip-chamfer-lg);
            position: relative;
        }
        .onboarding-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 4px; height: 100%;
        }
        .onboarding-box.phase-1::before { background: var(--accent-void); }
        .onboarding-box.phase-2::before { background: var(--accent-arc); }
        .onboarding-box.phase-3::before { background: var(--accent-strand); }

        .onboarding-title {
            font-family: 'Rajdhani', sans-serif;
            font-size: 1.4rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
        }

    
        .activity-box.strikes { border-top: 3px solid var(--accent-arc); }
        .activity-box.dungeon { border-top: 3px solid var(--accent-void); }
        .activity-box.raid { border-top: 3px solid var(--accent-solar); }
        .activity-box.six-player { border-top: 3px solid var(--accent-strand); }
        .data-label { color: var(--text-primary); font-weight: 600; margin-right: 8px; font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9rem; }

    
        .onboarding-box {
            background: var(--bg-surface);
            border: 1px solid var(--border-color);
            padding: 32px;
            margin-top: 24px;
            margin-bottom: 48px;
            clip-path: var(--clip-chamfer-lg);
            position: relative;
        }
        .onboarding-box::before {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 4px; height: 100%;
        }
        .onboarding-box.phase-1::before { background: var(--accent-void); }
        .onboarding-box.phase-2::before { background: var(--accent-arc); }
        .onboarding-box.phase-3::before { background: var(--accent-strand); }

        .onboarding-title {
            font-family: 'Rajdhani', sans-serif;
            font-size: 1.4rem;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 12px;
        }

    
        .bridge-section {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
            border-left: 3px solid var(--text-muted);
            padding: 24px 32px;
            margin-top: 32px;
            clip-path: var(--clip-chamfer);
        }

        .bridge-section h4 {
            font-size: 1.15rem;
            color: var(--text-primary);
            margin-bottom: 8px;
        }


/* Multi-page shell */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(7, 9, 12, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
}

.site-nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  color: var(--text-primary);
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.top-links {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
    align-items: center;
}

.top-links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-family: 'Rajdhani', sans-serif;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  border: 1px solid transparent;
  clip-path: var(--clip-chamfer);
  transition: var(--transition);
}

.top-links a:hover,
.top-links a.active {
  color: var(--text-primary);
  border-color: var(--border-color);
  background: var(--bg-surface-hover);
}

.menu-dropdown {
    position: relative;
}

.dropdown-toggle::after {
    content: ' \25BE';
    font-size: 0.72em;
    opacity: 0.8;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--border-color);
    background: rgba(9, 13, 20, 0.98);
    clip-path: var(--clip-chamfer);
    display: none;
    flex-direction: column;
    gap: 6px;
    z-index: 1200;
}

.dropdown-menu a {
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    padding: 8px 10px;
}

.menu-dropdown:hover .dropdown-menu,
.menu-dropdown:focus-within .dropdown-menu {
    display: flex;
}

.section-page {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 24px;
}

.story-phase-page {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

.story-phase-page .phase-header {
    margin: 0;
    padding: 24px 28px;
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--text-primary);
    clip-path: var(--clip-chamfer);
    background: var(--bg-surface);
}

.story-phase-page .onboarding-box {
    margin-top: 0;
    margin-bottom: 0;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border-color: var(--border-light);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.story-phase-page .expansion-panel {
    margin-bottom: 0;
    clip-path: var(--clip-chamfer);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.story-phase-page .story-card-panel {
    margin: 0;
    padding: 0;
    border-left: 3px solid rgba(148, 163, 184, 0.8);
    background: linear-gradient(160deg, rgba(14, 18, 24, 0.95), rgba(8, 11, 16, 0.95));
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.32);
}

.story-phase-page .story-card-panel:hover {
    border-left-color: var(--text-primary);
    border-color: var(--border-light);
}

.story-phase-page .story-card-panel .expansion-trigger {
    padding: 28px 30px;
    font-size: 1.45rem;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.01);
}

.story-phase-page .story-card-panel .expansion-meta {
    font-size: 0.95rem;
    color: #90a4c4;
}

.story-phase-page .story-card-panel.open {
    border-left-color: var(--accent-arc);
    box-shadow: 0 18px 40px rgba(6, 182, 212, 0.12);
}

.story-phase-page .expansion-trigger {
    padding: 22px 26px;
    background: rgba(255, 255, 255, 0.015);
}

.story-phase-page .expansion-content-inner {
    background: linear-gradient(180deg, rgba(2, 6, 14, 0.45), rgba(2, 6, 14, 0.15));
    padding: 26px;
}

.story-phase-page .story-card-panel .expansion-content-inner {
    padding: 30px;
    border-top: 1px solid var(--border-color);
}

.story-phase-page .bridge-section {
    margin-top: 24px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent 85%);
}

@media (max-width: 880px) {
  .site-nav-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .top-links {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }

  .top-links a {
    white-space: nowrap;
  }

    .menu-dropdown {
        position: static;
    }

    .dropdown-menu {
        position: fixed;
        top: 64px;
        left: 24px;
        min-width: 230px;
    }
}