body {
            background-color: #05020a;
            color: #e2e8f0;
            overflow-x: hidden;
            cursor: none; /* Custom cursor handling */
        }

        /* Ambient Background */
        .ambient-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: radial-gradient(circle at 50% 50%, #1a0b2e 0%, #05020a 100%);
            z-index: -2;
        }

        /* Stars / Dust Overlay */
        #star-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }

        /* Custom Cursor */
        #cursor-glow {
            position: fixed;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            /* Heavily softened gradient + blur filter to remove hard edges */
            background: radial-gradient(circle, rgba(157, 78, 221, 0.15) 0%, rgba(157, 78, 221, 0.05) 40%, rgba(157, 78, 221, 0) 70%);
            /* The blur filter kills any remaining hard lines */
            filter: blur(40px);
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 0;
            mix-blend-mode: screen;
            /* Keep on its own compositor layer so moving it is a cheap transform, not a repaint. */
            will-change: transform;
        }

        #cursor-dot {
            position: fixed;
            width: 8px;
            height: 8px;
            background: #d4af37;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            z-index: 10000;
            box-shadow: 0 0 10px #d4af37, 0 0 20px #d4af37;
            will-change: transform;
        }

        /* Reversed Icon Overlay */
        .reversed-icon {
            position: absolute;
            top: 8px;
            right: 8px;
            width: 28px;
            height: 28px;
            background: rgba(10, 5, 20, 0.9);
            border: 1px solid #d4af37;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #d4af37;
            z-index: 20;
            box-shadow: 0 0 10px rgba(0,0,0,0.5);
        }

        /* Nav Styles */
        .nav-btn {
            position: relative;
            transition: all 0.3s ease;
        }
        .nav-btn.active {
            color: #d4af37;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }
        .nav-btn.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 2px;
            background: #d4af37;
            box-shadow: 0 0 5px #d4af37;
        }

        /* Card Container 3D Context */
        .card-scene {
            perspective: 1500px;
        }

        .card {
            width: 100%;
            aspect-ratio: 2/3.5;
            position: relative;
            transform-style: preserve-3d;
            cursor: pointer;
            transition: transform 0.1s;
        }

        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 12px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
            overflow: hidden;
        }

        .card-back {
            background: linear-gradient(135deg, #1a0b2e 0%, #000000 100%);
            border: 2px solid #3d2c5e;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: rotateY(0deg);
        }

        .card-back::after {
            content: '';
            position: absolute;
            inset: 8px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            border-radius: 8px;
            background-image: 
                radial-gradient(circle at 50% 50%, rgba(212, 175, 55, 0.1) 1px, transparent 1px),
                linear-gradient(45deg, transparent 48%, rgba(212, 175, 55, 0.1) 50%, transparent 52%),
                linear-gradient(-45deg, transparent 48%, rgba(212, 175, 55, 0.1) 50%, transparent 52%);
            background-size: 20px 20px, 30px 30px, 30px 30px;
        }
        
        .card-sigil {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(212, 175, 55, 0.5);
            border-radius: 50%;
            display: grid;
            place-items: center;
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
        }

        .card-front {
            background: #e8e6e1;
            transform: rotateY(180deg);
            display: flex;
            flex-direction: column;
            border: 6px solid #d4af37;
            color: #1a1a1a;
        }

        .card-front-inner {
            flex: 1;
            margin: 4px;
            border: 1px solid #1a1a1a;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0.5rem;
            background: linear-gradient(to bottom, #fffefb, #f0e6d2);
        }

        .god-rays {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300%;
            height: 300%;
            transform: translate(-50%, -50%) scale(0);
            pointer-events: none;
            z-index: -1;
            opacity: 0;
            background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(212, 175, 55, 0.4) 30%, transparent 70%);
            mix-blend-mode: screen;
        }

        /* Zodiac Grid Styles */
        .zodiac-item {
            aspect-ratio: 1;
            border: 1px solid rgba(157, 78, 221, 0.3);
            background: rgba(10, 5, 20, 0.6);
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .zodiac-item:hover {
            border-color: #d4af37;
            background: rgba(36, 18, 53, 0.8);
            box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
            transform: translateY(-2px);
        }

        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0a0514;
        }
        ::-webkit-scrollbar-thumb {
            background: #3d2c5e;
            border-radius: 4px;
        }

        /* Chat Typing Indicator */
        .typing-dot {
            animation: typing 1.4s infinite ease-in-out both;
        }
        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
        
        @keyframes typing {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }