:root {
            --neon-green: #00ff66;
            --bg-black: #000000;
            --glow: 0 0 10px rgba(0,255,102,0.5);
            --font-mono: "Courier New", Courier, monospace;
        }
        body { background: var(--bg-black); color: var(--neon-green); font-family: var(--font-mono); min-height:100vh; overflow:auto; -webkit-overflow-scrolling: touch; }
        header { border-bottom:1px solid var(--neon-green); padding:10px 20px; background:rgba(0,20,0,0.8); display:flex; justify-content:space-between; align-items:center; }
        .logo { font-weight:bold; letter-spacing:2px; font-size:1.2em; text-shadow:var(--glow);}
        nav { display:flex; gap:15px;}
        nav a { color:var(--neon-green); text-transform:uppercase; text-decoration:none; padding:5px 10px; border:1px solid transparent; font-size:0.9em;}
        nav a:hover { border:1px solid var(--neon-green); box-shadow:var(--glow);}
        main { padding:36px 20px; max-width:1200px; margin:0 auto;}
        .main-flex { display: flex; gap: 32px; align-items: flex-start; }
        .terminal-panel {
            border:2px solid var(--neon-green);
            padding:24px;
            background:rgba(0,0,0,0.92);
            box-shadow:var(--glow);
            margin-bottom:32px;
            flex:2;
            border-image: linear-gradient(90deg, #00ff66, #00aaff, #ff00cc) 1;
        }
        .stats-cards { display: flex; gap: 18px; justify-content: center; margin-bottom: 24px; flex-wrap: wrap; }
        .stat-card {
            background: rgba(0,20,0,0.7);
            border: 1px solid var(--neon-green);
            border-radius: 8px;
            padding: 18px 22px;
            min-width: 120px;
            text-align: center;
            box-shadow: var(--glow);
            margin-bottom: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .stat-title {
            font-size: 0.95em;
            color: #fff;
            margin-bottom: 8px;
            text-shadow: var(--glow);
        }
        .stat-value {
            font-size: 1.5em;
            font-weight: bold;
            color: var(--neon-green);
            text-shadow: var(--glow);
        }
        .mutation { color: #fff; text-shadow: var(--glow); font-weight: bold; margin-bottom: 18px;}
        .welcome-msg { margin-bottom: 20px; font-size: 1.1em; }
        .boot-log-column {
            flex: 1;
            min-width: 320px;
            max-width: 420px;
            border:2px solid var(--neon-green);
            background:rgba(0,0,0,0.92);
            box-shadow:var(--glow);
            padding: 18px 12px;
            margin-bottom:32px;
            height: 650px;
            display: flex;
            flex-direction: column;
        }
        .boot-label {color:#fff;text-shadow:var(--glow);font-weight:bold;margin-bottom:8px;font-size:1.06em;}
        .boot-terminal {
            background:#111;
            color:var(--neon-green);
            border:1px solid var(--neon-green);
            padding:14px;
            font-family:var(--font-mono);
            font-size:1.03em;
            box-shadow:var(--glow);
            flex:1;
            overflow:auto;
            white-space:pre-line;
            min-height:0;
            max-height:100%;
            letter-spacing: 0.5px;
            line-height: 1.25em;
            animation: ttyflicker 0.15s steps(2) infinite;
        }
        @keyframes ttyflicker {
            0% { filter: brightness(1); }
            50% { filter: brightness(0.98); }
            100% { filter: brightness(1); }
        }
        .ai-heartbeat {
            margin-top: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 1em;
        }
        .heartbeat-dot {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--neon-green);
            box-shadow: 0 0 12px #00ff66;
            animation: heartbeat 1s infinite;
        }
        @keyframes heartbeat {
            0% { transform: scale(1); opacity: 1; }
            20% { transform: scale(1.3); opacity: 0.7; }
            40% { transform: scale(1); opacity: 1; }
            100% { transform: scale(1); opacity: 1; }
        }
        .heartbeat-label {
            color: #fff;
            font-weight: bold;
            text-shadow: var(--glow);
        }
        .ai-message-box {
            margin: 18px 0 24px 0;
            padding: 14px 18px;
            background: linear-gradient(90deg, #111 80%, #00ffcc22 100%);
            border: 2px solid #00ffcc;
            border-radius: 10px;
            box-shadow: 0 0 18px #00ffcc44;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            animation: aiGlow 2s infinite alternate;
        }
        @keyframes aiGlow {
            0% { box-shadow: 0 0 18px #00ffcc44; }
            100% { box-shadow: 0 0 32px #00ffcc88; }
        }
        .ai-message-title {
            color: #00ffcc;
            font-weight: bold;
            font-size: 1.08em;
            margin-bottom: 8px;
            letter-spacing: 1px;
            text-shadow: 0 0 8px #00ffcc;
        }
        .ai-message {
            color: #fff;
            font-size: 1.05em;
            font-style: italic;
            min-height: 22px;
            text-shadow: var(--glow);
            transition: opacity 0.3s;
            animation: aiMsgPulse 1.5s infinite alternate;
        }
        @keyframes aiMsgPulse {
            0% { color: #fff; }
            100% { color: #00ffcc; }
        }
        .ai-graph-box {
            margin-top: 16px;
            padding: 10px 14px;
            background: linear-gradient(90deg, #111 80%, #00ffcc11 100%);
            border: 1.5px solid #00ffcc;
            border-radius: 8px;
            box-shadow: 0 0 12px #00ffcc33;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            min-width: 220px;
        }
        .ai-graph-title {
            color: #00ffcc;
            font-size: 0.98em;
            font-weight: bold;
            margin-bottom: 6px;
            letter-spacing: 1px;
            text-shadow: 0 0 6px #00ffcc;
        }
        #ai-graph, #npc-graph {
            filter: drop-shadow(0 0 6px #00ffcc);
            background: transparent;
        }
        footer { text-align:center; padding:18px; font-size:0.95em; border-top:1px solid var(--neon-green); margin-top:40px; opacity:0.7;}
        @media (max-width: 900px) {
            .main-flex { flex-direction: column; }
            .boot-log-column { max-width: 100%; height: 350px; }
        }
        .welcome-box {
            margin-bottom: 24px;
            padding: 18px 24px;
            background: linear-gradient(90deg, #111 80%, #00ff6622 100%);
            border: 2px solid #00ff66;
            border-radius: 10px;
            box-shadow: 0 0 18px #00ff6644;
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: welcomeGlow 2s infinite alternate;
        }
        @keyframes welcomeGlow {
            0% { box-shadow: 0 0 18px #00ff6644; }
            100% { box-shadow: 0 0 32px #00ff6688; }
        }
        .welcome-title {
            color: #00ff66;
            font-weight: bold;
            font-size: 1.18em;
            margin-bottom: 8px;
            letter-spacing: 1px;
            text-shadow: 0 0 8px #00ff66;
        }
        .welcome-text {
            color: #fff;
            font-size: 1.08em;
            margin-bottom: 14px;
        }
        .login-btn-glow {
            display: inline-block;
            padding: 12px 32px;
            background: linear-gradient(90deg, #00ff66 60%, #00aaff 100%);
            color: #111;
            font-weight: bold;
            border-radius: 10px;
            font-size: 1.18em;
            box-shadow: 0 0 18px #00ff66, 0 0 8px #00aaff;
            border: none;
            outline: none;
            transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
            margin-top: 18px;
            margin-bottom: 8px;
            letter-spacing: 1px;
            text-shadow: 0 0 8px #00ff66;
            cursor: pointer;
            animation: loginGlowPulse 1.5s infinite alternate;
        }
        @keyframes loginGlowPulse {
            0% { box-shadow: 0 0 18px #00ff66, 0 0 8px #00aaff; }
            100% { box-shadow: 0 0 32px #00ff66, 0 0 16px #00aaff; transform: scale(1.04);}
        }
        .login-btn-glow:hover {
            background: #fff;
            color: #00ff66;
            box-shadow: 0 0 32px #00ff66, 0 0 16px #00aaff;
            transform: scale(1.07);
        }
        .top-list-separator {
            border: none;
            border-top: 2px solid #00ff66;
            margin: 0 0 0 0;
            opacity: 0.35;
        }
        /* ------------------------------------
           Auth panel / signup styles (shared)
           ------------------------------------ */
        .auth-panel {
            width: 360px;
            background: rgba(0,0,0,0.85);
            border: 2px solid var(--neon-green);
            border-radius: 8px;
            padding: 18px;
            box-shadow: var(--glow);
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 0 auto;
        }
        .auth-panel .header { text-align: center; }
        .auth-panel .title { font-weight: bold; color: #fff; margin-bottom:6px; }
        .field-label { font-size:0.9em; color:#aaa; margin-top:6px; }
        .input-shell input, .input-shell select, .input-shell textarea {
            width: 100%; padding:8px 10px; border:1px solid rgba(0,255,102,0.12); background:#050608; color:#ccffcc; border-radius:4px; font-family:var(--font-mono);
        }
        .button-primary { background: linear-gradient(90deg,#00ff66,#00aaff); color:#001; padding:10px 12px; border-radius:8px; border:none; cursor:pointer; font-weight:bold; }
        .meta-row { display:flex; justify-content:space-between; align-items:center; font-size:0.9em; color:#99ffdd; margin-top:8px; }
        .error { background:#331111; color:#ffcccc; padding:8px; border:1px solid #ff4444; border-radius:6px; }
        .success { background:#112233; color:#ccffcc; padding:8px; border:1px solid #00cc66; border-radius:6px; }

        /* Mobile adjustments: make auth-panel scrollable and full-width */
        @media (max-width: 540px) {
            .auth-panel { width: calc(100% - 40px); max-height: calc(100vh - 120px); overflow-y: auto; padding-bottom: 20px; }
            .input-shell input, .input-shell select, .input-shell textarea { font-size: 16px; }
            .main-flex { flex-direction: column; }
            .boot-log-column { height: 360px; }
            .character-list { max-height: 260px; overflow-y: auto; }
        }