/* --- CSS Variables for Cyberpunk Theme --- */
        :root {
            --neon-blue: #00e5ff; /* Primary Cyberpunk Blue */
            --neon-pink: #ff007f; /* Accent Cyberpunk Pink/Fuchsia */
            --dark-bg-1: #0a001a; /* Very dark background */
            --dark-bg-2: #05000d; /* Even darker, almost black */
            --text-main: #b3ffff; /* Light blue/cyan for main text */
            --text-secondary: #0099cc; /* Darker blue for secondary text */
            --card-bg: rgba(10, 0, 26, 0.7); /* Dark, slightly transparent panel */
            --border-color: rgba(0, 229, 255, 0.3); /* Neon blue border */
            --shadow-color: rgba(0, 229, 255, 0.15); /* Neon blue shadow */
            --glow-intensity: 0 0 15px var(--neon-blue), 0 0 25px var(--neon-pink); /* Dual color glow */
            --glitch-color-1: rgba(0, 255, 255, 0.5); /* Cyan for glitch */
            --glitch-color-2: rgba(255, 0, 127, 0.5); /* Pink for glitch */
            --big-color: #60a5fa; /* Original Tailwind blue for BIG */
            --small-color: #fb923c; /* Original Tailwind orange for SMALL */
        }
        
        /* --- Global / Body Styles --- */
        body {
            font-family: 'Share Tech Mono', monospace; /* Digital, monospace font */
            background: linear-gradient(135deg, var(--dark-bg-1) 0%, var(--dark-bg-2) 100%);
            min-height: 100vh;
            overflow-x: hidden;
            color: var(--text-main); /* Main text color */
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            position: relative; /* For matrix effect */
        }
        
        /* --- Anti-copy elements --- */
        .no-copy::selection { background: transparent; color: inherit; }
        .no-copy {
            -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;
            -moz-user-select: none; -ms-user-select: none; user-select: none;
        }
        .copy-protect { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9999; opacity: 0; }
        .hidden-watermark {
            position: fixed; bottom: 10px; right: 10px; color: rgba(255, 255, 255, 0.03);
            font-size: 9px; z-index: -1; user-select: none;
        }

        /* --- Glass Card / Console Styles --- */
        .glass-card {
            background: var(--card-bg);
            backdrop-filter: blur(18px) saturate(1.5);
            -webkit-backdrop-filter: blur(18px) saturate(1.5);
            border: 2px solid var(--border-color); /* Thicker, neon border */
            box-shadow: var(--glow-intensity), inset 0 0 10px rgba(0, 229, 255, 0.1); /* Dual color glow */
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            position: relative;
            overflow: hidden;
            border-radius: 1rem; /* Slightly less rounded for sharper look */
            /* Performance: Promote to composite layer */
            will-change: transform, box-shadow, filter;
        }
        
        .glass-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px; /* Even thicker top line */
            background: linear-gradient(90deg, transparent, var(--neon-pink), var(--neon-blue), transparent);
            opacity: 0.9;
            animation: line-scan 3s infinite linear; /* Scanning effect */
        }
        @keyframes line-scan {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }

        /* Glitch Effect on Console (main cards) */
        .glass-card::after {
            content: '';
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            border: 2px solid var(--neon-blue);
            border-radius: 1rem;
            opacity: 0;
            animation: glitch-border 5s infinite linear; /* Slower glitch */
            z-index: 1; /* Below content */
            pointer-events: none;
            /* Performance: Promote to composite layer */
            will-change: transform, opacity;
        }
        .glass-card.glitchy::after { /* Add this class to cards for glitch */
            border-color: var(--neon-pink);
            animation-delay: 0.15s;
        }

        @keyframes glitch-border {
            0% { transform: translate(0, 0); opacity: 0; }
            0.5% { transform: translate(-2px, -2px); opacity: 0.5; }
            1% { transform: translate(2px, 2px); opacity: 0; }
            1.5% { transform: translate(0, 0); opacity: 0.8; }
            2% { transform: translate(1px, -1px); opacity: 0.3; }
            2.5% { transform: translate(-1px, 1px); opacity: 0; }
            100% { opacity: 0; }
        }

        .glass-card:hover {
            transform: translateY(-5px) scale(1.005);
            box-shadow: 0 0 25px var(--neon-blue), 0 0 40px var(--neon-pink);
            border-color: var(--neon-pink);
        }
        
        /* Win/Loss Card Animations */
        .win-card {
            animation: winFlash 1.8s ease-out;
            border-color: var(--neon-blue) !important;
            box-shadow: 0 0 25px var(--neon-blue), inset 0 0 10px rgba(0, 229, 255, 0.4) !important;
        }
        .win-card::after {
            background: radial-gradient(circle, rgba(0, 229, 255, 0.4) 0%, transparent 70%);
            animation: winRipple 1.8s ease-out;
        }
        @keyframes winFlash {
            0% { background-color: rgba(0, 229, 255, 0.1); }
            50% { background-color: rgba(0, 229, 255, 0.3); }
            100% { background-color: var(--card-bg); }
        }
        @keyframes winRipple {
            0% { transform: scale(0); opacity: 0.9; }
            100% { transform: scale(1); opacity: 0; }
        }
        
        .loss-card {
            animation: lossShake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
            border-color: var(--neon-pink) !important; /* Cyberpunk pink for loss */
            box-shadow: 0 0 25px var(--neon-pink), inset 0 0 10px rgba(255, 0, 127, 0.4) !important;
        }
        @keyframes lossShake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } /* More aggressive shake */
            20%, 40%, 60%, 80% { transform: translateX(10px); }
        }
        
        /* General Animations */
        .pulse { animation: pulse 2.5s infinite cubic-bezier(0.4, 0, 0.6, 1); }
        @keyframes pulse {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.5); }
            70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(0, 229, 255, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); }
        }
        
        .floating { animation: floating 4s ease-in-out infinite; }
        @keyframes floating {
            0%, 100% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-12px) translateX(7px); } /* More movement */
            50% { transform: translateY(0) translateX(0); }
            75% { transform: translateY(12px) translateX(-7px); }
        }
        
        .rotate { animation: rotate 20s linear infinite; } /* Slower rotate */
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .number-glow {
            animation: numberGlow 2.5s infinite alternate;
            text-shadow: 0 0 10px var(--neon-blue); /* Stronger glow for numbers */
        }
        @keyframes numberGlow {
            0% { box-shadow: 0 0 10px rgba(0, 229, 255, 0.4); }
            100% { box-shadow: 0 0 25px rgba(0, 229, 255, 0.8); }
        }
        
        /* Adjusted neon-glow for "TKG" to be less blurry and more sharp */
        .neon-glow {
            text-shadow: 
                0 0 5px var(--neon-blue),   /* Inner, sharper glow */
                0 0 15px var(--neon-pink),  /* Medium glow */
                0 0 25px var(--neon-blue); /* Outer, more diffuse glow */
            animation: neonPulse 1.5s infinite alternate; /* Faster pulse */
        }
        @keyframes neonPulse {
            from { opacity: 0.9; text-shadow: 0 0 8px var(--neon-blue), 0 0 18px var(--neon-pink); }
            to { opacity: 1; text-shadow: 0 0 12px var(--neon-pink), 0 0 25px var(--neon-blue), 0 0 40px var(--neon-pink); }
        }
        
        .text-flicker { /* New animation for text elements */
            animation: textFlicker 0.1s infinite alternate;
        }
        @keyframes textFlicker {
            0%, 100% { opacity: 1; filter: brightness(1) contrast(1); }
            50% { opacity: 0.9; filter: brightness(1.2) contrast(0.8); }
        }

        /* --- Scrollbar --- */
        .scrollbar-hide::-webkit-scrollbar { display: none; }
        .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
        
        ::-webkit-scrollbar { width: 10px; height: 10px; } /* Wider */
        ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.4); border-radius: 5px; } /* Darker track */
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--neon-blue), var(--neon-pink));
            border-radius: 5px;
            border: 1px solid var(--border-color);
        }
        ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--neon-pink), var(--neon-blue)); }

        /* --- Gradient Text --- */
        .gradient-text {
            background: linear-gradient(135deg, var(--neon-blue), var(--neon-pink));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: none; /* Remove default text shadow for gradient */
            font-family: 'Orbitron', sans-serif; /* Aggressive font for title */
            /* Performance: Ensure smooth text rendering */
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        /* --- Popup Overlay --- */
        .popup-overlay {
            background-color: rgba(0, 0, 0, 0.9); /* Darker overlay */
            backdrop-filter: blur(10px) brightness(0.7); /* Stronger blur and dim */
            -webkit-backdrop-filter: blur(10px) brightness(0.7);
            transition: opacity 0.3s ease-in-out;
            opacity: 0;
            pointer-events: none;
            /* Performance: Promote to composite layer */
            will-change: opacity, filter;
        }
        .popup-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        .popup-content {
            background: rgba(10, 0, 26, 0.95); /* Matches card background */
            backdrop-filter: blur(25px) saturate(2); /* More intense glass */
            -webkit-backdrop-filter: blur(25px) saturate(2);
            border: 2px solid var(--neon-blue);
            box-shadow: var(--glow-intensity);
            border-radius: 1.5rem;
            transform: translateY(50px) scale(0.9); /* Starts lower */
            animation: popup-enter 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
            /* Performance: Promote to composite layer */
            will-change: transform, opacity, filter, box-shadow;
        }
        @keyframes popup-enter {
            0% { transform: translateY(50px) scale(0.9); opacity: 0; }
            100% { transform: translateY(0) scale(1); opacity: 1; }
        }
        .popup-header {
            border-bottom: 2px solid var(--border-color); /* Thicker border */
        }
        .popup-close {
            color: var(--neon-pink); /* Neon pink close button */
            text-shadow: 0 0 10px var(--neon-pink);
            transition: transform 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
            /* Performance: Promote to composite layer */
            will-change: transform, color, box-shadow;
        }
        .popup-close:hover {
            transform: rotate(180deg) scale(1.2); /* More pronounced hover */
            color: var(--neon-blue);
            box-shadow: 0 0 15px var(--neon-blue);
        }
        
        /* --- Security Badge --- */
        .security-badge {
            background: rgba(0, 229, 255, 0.08); /* Neon blue translucent */
            border: 1px solid var(--neon-blue);
            box-shadow: 0 0 15px var(--neon-blue);
            color: var(--text-main);
            transition: all 0.3s ease;
            /* Performance: Promote to composite layer */
            will-change: transform, box-shadow, border-color;
        }
        .security-badge:hover {
            transform: scale(1.05);
            box-shadow: 0 0 25px var(--neon-pink);
            border-color: var(--neon-pink);
        }
        .security-badge i {
            color: var(--neon-pink); /* Neon pink icon */
            text-shadow: 0 0 8px var(--neon-pink);
        }
        
        /* --- Matrix Rain Effect --- */
        .matrix-rain {
            opacity: 0.08; /* Slightly more visible, denser rain */
            filter: blur(0.5px); /* Soften for background effect */
            /* Performance: Promote to composite layer and isolate */
            transform: translateZ(0);
            will-change: opacity, filter;
        }
        
        /* --- Terminal Digit Styling --- */
        .terminal-digit {
            font-family: 'Orbitron', monospace; /* Aggressive font for numbers */
            background: rgba(0, 255, 255, 0.12); /* Brighter cyan background */
            border: 1px solid rgba(0, 255, 255, 0.25); /* Brighter border */
            border-radius: 8px; /* Slightly more rounded */
            padding: 4px 9px; /* More padding */
            margin: 0 3px;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.8); /* Intense glow */
            color: var(--neon-blue); /* Neon blue text */
            box-shadow: inset 0 0 8px rgba(0, 255, 255, 0.3); /* Inner glow */
            transition: all 0.3s ease;
            /* Performance: Promote to composite layer */
            will-change: transform, background, box-shadow, border-color;
        }
        .terminal-digit:hover {
            background: rgba(0, 255, 255, 0.2);
            box-shadow: inset 0 0 15px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.5);
            transform: scale(1.05); /* Slight pop on hover */
        }
        
        /* --- Holographic Effect --- */
        .holographic::after {
            background: linear-gradient(
                to bottom right,
                rgba(0, 255, 255, 0) 0%,
                rgba(0, 255, 255, 0) 45%,
                rgba(0, 255, 255, 0.2) 50%, /* Stronger light band */
                rgba(0, 255, 255, 0) 55%,
                rgba(0, 255, 255, 0) 100%
            );
            transform: rotate(45deg);
            animation: hologram 6s linear infinite; /* Faster hologram */
            /* Performance: Promote to composite layer */
            will-change: transform;
        }
        @keyframes hologram {
            0% { transform: rotate(45deg) translate(-50%, -50%); } /* Increased movement */
            100% { transform: rotate(45deg) translate(50%, 50%); }
        }

        /* --- History Card Overhaul --- */
        .history-card {
            background: rgba(10, 0, 26, 0.7); /* Dark background */
            border: 2px solid var(--border-color); /* Neon border */
            box-shadow: var(--glow-intensity); /* Neon glow */
            color: var(--text-main);
            border-radius: 0.5rem; /* Sharper corners */
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            /* Performance: Promote to composite layer */
            will-change: transform, box-shadow, border-color;
        }
        .history-card::before { /* Remove original top line, use main card's before */
            display: none;
        }
        .history-card.green {
            border-color: var(--neon-blue);
            box-shadow: 0 0 15px var(--neon-blue);
        }
        .history-card.red {
            border-color: var(--neon-pink);
            box-shadow: 0 0 15px var(--neon-pink);
        }
        .history-card.yellow {
            border-color: var(--text-secondary); /* A neutral neon for pending */
            box-shadow: 0 0 15px var(--text-secondary);
        }
        .history-card:hover {
            transform: translateY(-7px); /* More pronounced lift */
            box-shadow: 0 0 25px var(--neon-blue), 0 0 40px var(--neon-pink);
            border-color: var(--neon-pink);
        }

        .history-actions i {
            font-size: 1.5rem; /* Larger icons */
            text-shadow: 0 0 10px currentColor; /* Stronger glow */
        }
        .history-actions i:hover {
            transform: scale(1.35); /* More pronounced pop */
        }

        .win-icon { color: var(--neon-blue); }
        .loss-icon { color: var(--neon-pink); }
        .spinner {
            color: var(--text-secondary); /* Cyan for pending */
            animation: spin 1.5s linear infinite; /* Slower spin */
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* --- Specific element color mappings to Cyberpunk --- */
        .text-green-400 { color: var(--neon-blue); }
        .text-cyan-400 { color: var(--neon-pink); } /* Using pink for AI ACTIVE */
        .text-yellow-400 { color: var(--text-secondary); } /* Accent for warnings/special */
        .text-blue-400 { color: var(--big-color); }
        .text-orange-400 { color: var(--small-color); }
        .text-green-300 { color: var(--text-main); } /* For popup text */
        .text-gray-400 { color: var(--text-secondary); } /* For loading/default text */

        .bg-green-900 { background-color: rgba(0, 0, 0, 0.4); } /* Darker, less green */
        .bg-green-800 { background-color: rgba(0, 0, 0, 0.6); } /* Darker */
        .border-green-900 { border-color: rgba(0, 229, 255, 0.1); }
        .border-green-800 { border-color: rgba(0, 229, 255, 0.2); }

        /* General button styling */
        .bg-gradient-to-r {
            background-image: linear-gradient(to right, var(--neon-blue), var(--neon-pink));
            box-shadow: var(--glow-intensity);
            transition: all 0.3s ease; /* Smooth transition for buttons */
            /* Performance: Promote to composite layer */
            will-change: transform, box-shadow, background-image;
        }
        .hover\:from-green-700:hover { /* Adjust hover gradient to flip */
            background-image: linear-gradient(to right, var(--neon-pink), var(--neon-blue));
            box-shadow: 0 0 20px var(--neon-pink), 0 0 35px var(--neon-blue);
        }
        .hover\:scale-105:hover { transform: scale(1.03); } /* Slightly less aggressive scale */
        .hover\:scale-125:hover { transform: scale(1.3); }

        /* Floating background elements */
        .relative div[class*="rounded-full"][class*="opacity-"] {
            background-color: var(--neon-blue);
            box-shadow: 0 0 25px var(--neon-blue);
            filter: brightness(1.2);
            /* Performance: Promote to composite layer */
            will-change: transform, opacity, filter;
        }
        /* Specific overrides for your Tailwind-generated classes */
        .absolute.top-1\/3.right-20.w-24.h-24.rounded-full.bg-cyan-300 {
            background-color: var(--neon-pink);
            box-shadow: 0 0 30px var(--neon-pink);
            filter: brightness(1.3);
        }
        .absolute.bottom-20.right-10.w-32.h-32.rounded-full.bg-cyan-500 {
            background-color: var(--neon-blue);
            box-shadow: 0 0 40px var(--neon-blue);
            filter: brightness(1.4);
        }

        /* Prediction Circle and Char */
        #predictionCircle {
            background-color: rgba(10, 0, 26, 0.8); /* Dark background */
            border: 3px solid var(--border-color); /* Neon border */
            box-shadow: var(--glow-intensity); /* Initial glow */
            transition: all 0.4s ease; /* Smooth transition for prediction circle */
            /* Performance: Promote to composite layer */
            will-change: background-color, border-color, box-shadow, transform;
        }
        #predictionCircle.bg-blue-800 { background-color: rgba(30, 60, 100, 0.8); border-color: var(--big-color); box-shadow: 0 0 20px var(--big-color); }
        #predictionCircle.bg-orange-800 { background-color: rgba(100, 50, 20, 0.8); border-color: var(--small-color); box-shadow: 0 0 20px var(--small-color); }

        #predictionIcon {
            text-shadow: 0 0 10px currentColor; /* Stronger icon glow */
            animation: neonPulse 1.2s infinite alternate; /* Faster pulse for icon */
            transition: all 0.4s ease;
            /* Performance: Promote to composite layer */
            will-change: color, text-shadow, transform;
        }
        #predictionIcon.text-blue-400 { color: var(--big-color); }
        #predictionIcon.text-orange-400 { color: var(--small-color); }

        #predictionChar {
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 10px currentColor;
            animation: neonPulse 1.2s infinite alternate;
            transition: all 0.4s ease;
            /* Performance: Promote to composite layer */
            will-change: color, text-shadow, transform;
        }
        #predictionChar.text-blue-400 { color: var(--big-color); }
        #predictionChar.text-orange-400 { color: var(--small-color); }

        .progress-ring {
            stroke: var(--neon-blue); /* Neon blue progress bar */
            filter: drop-shadow(0 0 10px var(--neon-blue));
            /* Performance: Promote to composite layer */
            will-change: stroke, filter, stroke-dashoffset;
        }
        .text-green-500.progress-ring { /* Specific color for actual progress */
            stroke: var(--neon-pink); /* Pink accent for progress */
            filter: drop-shadow(0 0 10px var(--neon-pink));
        }

        /* History card numbers for better contrast */
        .history-card .terminal-digit {
            background: rgba(0, 255, 255, 0.05); /* Lighter background for numbers in history */
            border-color: rgba(0, 255, 255, 0.1);
        }
        .history-card .terminal-digit.neon-glow {
            text-shadow: 0 0 8px var(--neon-blue), 0 0 15px var(--neon-pink); /* Dual glow for history numbers */
        }

        /* Input field styling */
        #periodDisplay {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 6px 10px;
            color: var(--neon-blue);
            text-align: center;
            font-size: 1.15rem;
            box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.3);
            transition: all 0.3s ease;
        }

        #periodDisplay:focus {
            outline: none;
            border-color: var(--neon-pink);
            box-shadow: inset 0 0 20px rgba(255, 0, 127, 0.5), 0 0 15px var(--neon-pink);
        }

        /* New: Pulsating icon for active AI */
        .ai-active-pulse {
            animation: pulse-ai 1.5s infinite alternate;
        }
        @keyframes pulse-ai {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.1); opacity: 1; }
        }

        /* New: Loading spinner for history */
        .history-loading {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 150px;
            color: var(--neon-blue);
            font-size: 2rem;
            text-shadow: 0 0 10px var(--neon-blue);
        }

        /* New: Button hover effects for text/icon */
        button:hover .fas, button:hover .fab {
            transform: scale(1.1);
            text-shadow: 0 0 15px var(--neon-blue);
            transition: transform 0.2s ease, text-shadow 0.2s ease;
        }

        /* Enhanced header glow */
        header::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(circle at center, rgba(0, 229, 255, 0.05) 0%, transparent 70%);
            z-index: 0;
            animation: header-radial-pulse 4s infinite alternate;
            /* Performance: Promote to composite layer */
            will-change: transform, opacity;
        }
        @keyframes header-radial-pulse {
            0% { transform: scale(0.9); opacity: 0.8; }
            100% { transform: scale(1.1); opacity: 1; }
        }

        /* Add subtle movement to all elements */
        /* Applied will-change to specific elements where needed for performance */
        .container {
            perspective: 1000px; /* For 3D transforms */
        }
        /* Further optimizations for specific animations */
        .number-glow, .neon-glow, .text-flicker {
            transform: translateZ(0); /* Ensure these are also on their own layer */
        }