:root {
            --bg-dark: #0a0a0a;
            --accent: #007acc;
            --accent-glow: rgba(0, 122, 204, 0.4);
            --glass: rgba(30, 30, 30, 0.85);
            --success: #4caf50;
            --error: #f44336;
            --text: #e0e0e0;
        }

        body {
            background: radial-gradient(circle at center, #1a1a1a 0%, #050505 100%);
            color: var(--text);
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            margin: 0;
            display: flex;
            min-height: 100vh;
            justify-content: center;
            align-items: center;
        }

        #app-container {
            width: 90%;
            max-width: 800px;
            background: var(--glass);
            backdrop-filter: blur(12px);
            border: 1px solid #333;
            border-radius: 16px;
            padding: 40px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.9);
            position: relative;
            overflow: hidden;
        }

        .progress-track { height: 6px; background: #222; width: 100%; position: absolute; top: 0; left: 0; }
        .progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 10px var(--accent); }

        .status-bar {
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.8rem;
            color: var(--accent);
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 20px;
        }

        #scenario-title { margin-top: 0; font-weight: 300; letter-spacing: -0.5px; }

        .options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 25px 0; }

        .code-card {
            background: #111;
            border: 1px solid #333;
            border-radius: 8px;
            padding: 20px;
            cursor: pointer;
            transition: 0.2s;
            font-family: 'Fira Code', monospace;
            font-size: 0.9rem;
            white-space: pre-wrap;
            display: flex;
            align-items: center;
        }

        .code-card:hover:not(.locked) {
            border-color: var(--accent);
            background: #161616;
            transform: translateY(-2px);
        }

        .code-card.correct { border-color: var(--success); background: rgba(76, 175, 80, 0.1); box-shadow: 0 0 15px rgba(76, 175, 80, 0.2); }
        .code-card.incorrect { border-color: var(--error); background: rgba(244, 67, 54, 0.1); }
        .code-card.missed { border-color: var(--success); opacity: 0.7; }

        #hint-box {
            padding: 15px; border-radius: 6px;
            background: #1a1a1a; border-left: 4px solid var(--accent);
            visibility: hidden; opacity: 0; transform: translateY(10px); transition: 0.3s;
        }
        #hint-box.visible { visibility: visible; opacity: 1; transform: translateY(0); }

        .btn-supreme {
            background: var(--accent); color: white; border: none; padding: 16px;
            border-radius: 8px; width: 100%; font-weight: 700; cursor: pointer;
            margin-top: 20px; transition: 0.3s; text-transform: uppercase;
        }
        .btn-supreme:hover { filter: brightness(1.2); box-shadow: 0 0 20px var(--accent-glow); }


        @keyframes rankPop {
            0% { transform: scale(0) rotate(-20deg); opacity: 0; }
            70% { transform: scale(1.2) rotate(5deg); }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        
        @keyframes reportFade {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-rank {
            animation: rankPop 0.8s cubic-bezier(0.17, 0.89, 0.32, 1.49) forwards;
            display: inline-block;
        }
        
        #report-view.active {
            display: block !important;
            animation: reportFade 0.6s ease-out forwards;
        }
        
        .shake {
            animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
        }
        
        @keyframes shake {
            10%, 90% { transform: translate3d(-1px, 0, 0); }
            20%, 80% { transform: translate3d(2px, 0, 0); }
            30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
            40%, 60% { transform: translate3d(4px, 0, 0); }
        }
        
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(-45deg, #050505, #001a33, #003366, #000000);
            background-size: 400% 400%;
            animation: plasma 8s ease infinite;
        }
        
        @keyframes plasma {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }