/* ==========================================
   HACKING IS PERSONAL - AAA QUALITY CSS
   Photo-Realistic Windows 11 UI
   (c) 2026 happystoner5420 Games
   ========================================== */

/* RESET & BASE */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --win11-bg: #202020;
    --win11-surface: rgba(32, 32, 32, 0.85);
    --win11-surface-light: rgba(255, 255, 255, 0.05);
    --win11-accent: #0078D4;
    --win11-accent-hover: #1a8ae8;
    --win11-text: #ffffff;
    --win11-text-secondary: #999;
    --win11-border: rgba(255, 255, 255, 0.08);
    --win11-titlebar: rgba(32, 32, 32, 0.95);
    --win11-taskbar: rgba(20, 20, 20, 0.88);
    --win11-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    --win11-radius: 8px;
    --terminal-green: #00ff41;
    --terminal-bg: #0a0a0a;
    --danger: #ff3333;
    --success: #00cc66;
    --warning: #ffaa00;
    --market-purple: #9b59b6;
    --crypto-gold: #f7931a;
    --neon-blue: #00d4ff;
    --neon-pink: #ff0080;
    --neon-green: #39ff14;
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.06);
    --blur-amount: 20px;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #000;
    color: var(--win11-text);
    user-select: none;
    -webkit-user-select: none;
    cursor: default;
}

/* SCREEN MANAGEMENT */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 1;
}
.screen.active {
    display: flex;
}

/* ==========================================
   MAIN MENU
   ========================================== */
.menu-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

#matrix-canvas, #credits-canvas, #howto-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.85) 100%);
    z-index: 1;
}

.menu-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 40px;
}

.game-logo {
    text-align: center;
    margin-bottom: 60px;
}

.logo-glitch {
    font-size: 64px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5),
                 0 0 40px rgba(0, 212, 255, 0.3),
                 0 0 80px rgba(0, 212, 255, 0.15);
    letter-spacing: 4px;
    animation: glitch-flicker 3s infinite;
    position: relative;
}

.logo-glitch::before,
.logo-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.logo-glitch::before {
    animation: glitch-1 2s infinite linear alternate-reverse;
    color: var(--neon-pink);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    z-index: -1;
}

.logo-glitch::after {
    animation: glitch-2 3s infinite linear alternate-reverse;
    color: var(--neon-blue);
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    z-index: -1;
}

@keyframes glitch-1 {
    0% { transform: translate(0); }
    20% { transform: translate(-3px, 2px); }
    40% { transform: translate(3px, -2px); }
    60% { transform: translate(-2px, -1px); }
    80% { transform: translate(2px, 1px); }
    100% { transform: translate(0); }
}

@keyframes glitch-2 {
    0% { transform: translate(0); }
    25% { transform: translate(2px, -3px); }
    50% { transform: translate(-3px, 2px); }
    75% { transform: translate(3px, 1px); }
    100% { transform: translate(0); }
}

@keyframes glitch-flicker {
    0%, 100% { opacity: 1; }
    92% { opacity: 1; }
    93% { opacity: 0.8; }
    94% { opacity: 1; }
    95% { opacity: 0.6; }
    96% { opacity: 1; }
}

.logo-subtitle {
    font-family: 'Fira Code', monospace;
    font-size: 16px;
    color: var(--neon-green);
    margin-top: 12px;
    letter-spacing: 6px;
    opacity: 0.8;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 360px;
}

.menu-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 3px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 4px;
}

.menu-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    border-color: rgba(0, 212, 255, 0.3);
    transform: translateX(8px);
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.15),
                inset 0 0 30px rgba(0, 212, 255, 0.05);
}

.menu-btn .btn-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
    transition: width 0.4s ease;
}

.menu-btn:hover .btn-line {
    width: 100%;
}

.btn-icon {
    font-size: 18px;
    color: var(--neon-blue);
    min-width: 24px;
    text-align: center;
}

.menu-footer {
    position: absolute;
    bottom: 30px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 2px;
}

/* ==========================================
   CREDITS SCREEN
   ========================================== */
.credits-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

.credits-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 40px;
}

.credits-title {
    font-size: 48px;
    color: var(--neon-blue);
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    letter-spacing: 8px;
    margin-bottom: 40px;
}

.credits-scroll {
    max-height: 50vh;
    overflow-y: auto;
    padding: 20px;
    width: 500px;
}

.credits-scroll::-webkit-scrollbar {
    width: 4px;
}
.credits-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.credits-scroll::-webkit-scrollbar-thumb {
    background: var(--neon-blue);
    border-radius: 2px;
}

.credit-section {
    text-align: center;
    margin-bottom: 30px;
}

.credit-section h2 {
    font-size: 14px;
    color: var(--neon-blue);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.credit-section p {
    font-size: 18px;
    color: #fff;
    opacity: 0.8;
}

.credit-section.special h2 {
    color: var(--neon-pink);
}

.howto-scroll {
    width: min(860px, 92vw);
    max-height: 58vh;
}

.howto-section {
    text-align: left;
    margin-bottom: 18px;
    padding: 18px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.howto-section h2 {
    font-size: 14px;
    color: var(--neon-blue);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.howto-text {
    font-size: 15px;
    color: #ddd;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 8px;
}

.howto-text:last-child {
    margin-bottom: 0;
}

.howto-command-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.howto-command {
    display: grid;
    grid-template-columns: minmax(180px, 220px) 1fr;
    gap: 16px;
    align-items: start;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}

.howto-command code {
    color: var(--neon-green);
    font-family: 'Fira Code', monospace;
    font-size: 13px;
}

.howto-command span {
    color: #ccc;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .howto-scroll {
        width: calc(100vw - 32px);
    }

    .howto-command {
        grid-template-columns: 1fr;
        gap: 8px;
    }
}

/* ==========================================
   LOADING SCREEN
   ========================================== */
#loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-content {
    text-align: center;
}

.loading-logo {
    font-size: 36px;
    font-weight: 700;
    color: var(--neon-blue);
    letter-spacing: 4px;
    margin-bottom: 40px;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.loading-bar-container {
    width: 400px;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 20px;
}

.loading-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-pink));
    transition: width 0.3s ease;
    border-radius: 2px;
}

.loading-text {
    font-family: 'Fira Code', monospace;
    font-size: 12px;
    color: var(--neon-green);
    letter-spacing: 2px;
}

/* ==========================================
   WINDOWS 11 DESKTOP
   ========================================== */
#win11-desktop {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#desktop-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* Desktop Icons */
#desktop-icons {
    position: absolute;
    top: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 8px;
    max-height: calc(100% - 64px);
    z-index: 1;
}

.desktop-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 90px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.desktop-icon:hover {
    background: rgba(255, 255, 255, 0.08);
}

.desktop-icon:active {
    background: rgba(255, 255, 255, 0.12);
}

.desktop-icon .icon-img {
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.terminal-icon {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border: 1px solid rgba(0, 255, 65, 0.3);
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.15);
}
.terminal-icon::after { content: ">_"; color: var(--terminal-green); font-family: 'Fira Code', monospace; font-size: 18px; font-weight: 700; }

.browser-icon {
    background: linear-gradient(135deg, #1a1a3e, #2d1b69);
    border: 1px solid rgba(128, 0, 255, 0.3);
}
.browser-icon::after { content: "🌐"; font-size: 24px; }

.files-icon {
    background: linear-gradient(135deg, #1a2a1a, #1a3a2a);
    border: 1px solid rgba(0, 204, 102, 0.3);
}
.files-icon::after { content: "📁"; font-size: 24px; }

.market-icon {
    background: linear-gradient(135deg, #2a1a2a, #3a1a3a);
    border: 1px solid rgba(155, 89, 182, 0.3);
    box-shadow: 0 0 12px rgba(155, 89, 182, 0.15);
}
.market-icon::after { content: "☠"; font-size: 24px; color: var(--market-purple); }

.ip-icon {
    background: linear-gradient(135deg, #1a2a3a, #0d3b66);
    border: 1px solid rgba(0, 120, 212, 0.3);
}
.ip-icon::after { content: "🌍"; font-size: 24px; }

.wallet-icon {
    background: linear-gradient(135deg, #3a2a0a, #4a3a1a);
    border: 1px solid rgba(247, 147, 26, 0.3);
    box-shadow: 0 0 12px rgba(247, 147, 26, 0.15);
}
.wallet-icon::after { content: "₿"; font-size: 24px; color: var(--crypto-gold); }

.virus-icon {
    background: linear-gradient(135deg, #3a0a0a, #4a1a1a);
    border: 1px solid rgba(255, 51, 51, 0.3);
    box-shadow: 0 0 12px rgba(255, 51, 51, 0.15);
}
.virus-icon::after { content: "☣"; font-size: 24px; color: var(--danger); }

.vpn-icon {
    background: linear-gradient(135deg, #0a2a0a, #0a3a1a);
    border: 1px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 12px rgba(57, 255, 20, 0.15);
}
.vpn-icon::after { content: "🛡"; font-size: 24px; }

.antivirus-icon {
    background: linear-gradient(135deg, #0a2030, #103850);
    border: 1px solid rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 12px rgba(0, 212, 255, 0.15);
}

.antivirus-icon::after {
    content: "+";
    font-size: 24px;
    color: var(--neon-blue);
    font-weight: 700;
}

.desktop-icon span {
    font-size: 11px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    line-height: 1.2;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================
   WINDOWS 11 TASKBAR
   ========================================== */
#taskbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    background: var(--win11-taskbar);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 100;
}

.taskbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.start-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.start-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.taskbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    font-size: 13px;
    color: #999;
    cursor: text;
}

.taskbar-center {
    display: flex;
    align-items: center;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.taskbar-app-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 18px;
    position: relative;
}
.taskbar-app-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}
.taskbar-app-btn.active {
    background: rgba(255, 255, 255, 0.05);
}
.taskbar-app-btn.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 3px;
    background: var(--win11-accent);
    border-radius: 2px;
}

.taskbar-right {
    display: flex;
    align-items: center;
}

.system-tray {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
}
.system-tray:hover {
    background: rgba(255, 255, 255, 0.05);
}

.tray-item {
    display: flex;
    align-items: center;
    padding: 4px;
    font-size: 12px;
    color: #ccc;
}

.clock {
    min-width: 60px;
    text-align: center;
    font-size: 12px;
}

.vpn-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.vpn-indicator.off {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(255, 51, 51, 0.4);
}
.vpn-indicator.on {
    background: var(--success);
    box-shadow: 0 0 6px rgba(0, 204, 102, 0.4);
}

.detection-bar {
    width: 50px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.detection-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--success), var(--warning), var(--danger));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ==========================================
   WINDOWS 11 WINDOW STYLES
   ========================================== */
.win11-window {
    position: absolute;
    background: var(--win11-surface);
    backdrop-filter: blur(var(--blur-amount)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--blur-amount)) saturate(180%);
    border: 1px solid var(--win11-border);
    border-radius: var(--win11-radius);
    box-shadow: var(--win11-shadow);
    overflow: hidden;
    z-index: 10;
    min-width: 400px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    resize: both;
}

.win11-window.focused {
    z-index: 50;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

.window-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
    padding: 0 12px;
    background: var(--win11-titlebar);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    cursor: move;
}

.titlebar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #ccc;
    pointer-events: none;
}

.window-icon {
    font-size: 14px;
}

.titlebar-buttons {
    display: flex;
    gap: 0;
}

.win-btn {
    width: 46px;
    height: 36px;
    border: none;
    background: transparent;
    color: #999;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s, color 0.1s;
}
.win-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}
.win-btn.close:hover {
    background: #c42b1c;
    color: #fff;
}

.window-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Special titlebar colors */
.victim-titlebar { background: linear-gradient(90deg, rgba(0, 100, 180, 0.95), rgba(32, 32, 32, 0.95)); }
.market-titlebar { background: linear-gradient(90deg, rgba(80, 20, 80, 0.95), rgba(32, 32, 32, 0.95)); }
.virus-titlebar { background: linear-gradient(90deg, rgba(100, 20, 20, 0.95), rgba(32, 32, 32, 0.95)); }
.vpn-titlebar { background: linear-gradient(90deg, rgba(20, 80, 20, 0.95), rgba(32, 32, 32, 0.95)); }
.browser-titlebar { background: linear-gradient(90deg, rgba(40, 20, 80, 0.95), rgba(32, 32, 32, 0.95)); }

/* ==========================================
   TERMINAL
   ========================================== */
.terminal-body {
    background: var(--terminal-bg);
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 13px;
    padding: 0;
}

.terminal-output {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    line-height: 1.6;
    color: var(--terminal-green);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.terminal-output::-webkit-scrollbar {
    width: 6px;
}
.terminal-output::-webkit-scrollbar-track {
    background: transparent;
}
.terminal-output::-webkit-scrollbar-thumb {
    background: rgba(0, 255, 65, 0.2);
    border-radius: 3px;
}

.terminal-line {
    margin-bottom: 2px;
}
.terminal-line.system {
    color: var(--neon-blue);
}
.terminal-line.error {
    color: var(--danger);
}
.terminal-line.success {
    color: var(--success);
}
.terminal-line.warning {
    color: var(--warning);
}
.terminal-line.info {
    color: #aaa;
}
.terminal-line.data {
    color: var(--crypto-gold);
}
.terminal-line.highlight {
    color: var(--neon-pink);
}

.terminal-input-line {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-top: 1px solid rgba(0, 255, 65, 0.1);
    background: rgba(0, 0, 0, 0.3);
}

.terminal-prompt {
    color: var(--neon-green);
    margin-right: 8px;
    white-space: nowrap;
    font-weight: 500;
}

.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--terminal-green);
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    caret-color: var(--terminal-green);
}

/* Terminal typing animation */
@keyframes blink-caret {
    0%, 100% { border-color: var(--terminal-green); }
    50% { border-color: transparent; }
}

/* ==========================================
   VICTIM DESKTOP
   ========================================== */
.victim-body {
    background: #000;
    position: relative;
    overflow: hidden;
}

.victim-desktop-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.victim-desktop-icons {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1;
}

.victim-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 64px;
    padding: 4px;
    border-radius: 4px;
}

.victim-icon .v-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 2px;
}

.victim-icon span {
    font-size: 9px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    text-align: center;
    line-height: 1.1;
}

.victim-taskbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    z-index: 2;
}

.victim-taskbar-center {
    display: flex;
    gap: 4px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.victim-taskbar-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 4px;
}

.victim-info-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 12px 16px;
    z-index: 3;
    max-width: 280px;
    font-size: 11px;
    color: #ddd;
}

.victim-info-overlay h4 {
    color: var(--neon-blue);
    font-size: 12px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.victim-info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    gap: 12px;
}

.victim-info-row .label {
    color: #888;
}
.victim-info-row .value {
    color: var(--terminal-green);
    font-family: 'Fira Code', monospace;
    font-size: 10px;
}

.victim-scan-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
    animation: scanline 2s linear infinite;
    opacity: 0.5;
}

@keyframes scanline {
    0% { top: 0; }
    100% { top: 100%; }
}

/* ==========================================
   BLACK MARKET
   ========================================== */
.market-body {
    background: linear-gradient(180deg, #0d0d1a, #1a0d1a);
    overflow-y: auto;
}

.market-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(155, 89, 182, 0.2);
}

.market-header h2 {
    font-size: 18px;
    color: var(--market-purple);
    text-shadow: 0 0 10px rgba(155, 89, 182, 0.3);
    letter-spacing: 2px;
}

.crypto-balance {
    font-family: 'Fira Code', monospace;
    font-size: 18px;
    color: var(--crypto-gold);
    font-weight: 700;
}

.market-balance span:first-child {
    color: #888;
    font-size: 12px;
    margin-right: 8px;
}

.market-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0 12px;
}

.market-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.market-tab:hover {
    color: #ccc;
    background: rgba(255, 255, 255, 0.03);
}

.market-tab.active {
    color: var(--market-purple);
    border-bottom-color: var(--market-purple);
}

.market-items {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    overflow-y: auto;
    max-height: calc(100% - 120px);
}

.market-items::-webkit-scrollbar {
    width: 6px;
}
.market-items::-webkit-scrollbar-thumb {
    background: rgba(155, 89, 182, 0.3);
    border-radius: 3px;
}

.market-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 16px;
    transition: all 0.2s;
    cursor: pointer;
}

.market-item:hover {
    background: rgba(155, 89, 182, 0.08);
    border-color: rgba(155, 89, 182, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(155, 89, 182, 0.15);
}

.market-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.market-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.market-item-price {
    font-family: 'Fira Code', monospace;
    font-size: 13px;
    color: var(--crypto-gold);
    white-space: nowrap;
}

.market-item-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
    margin-bottom: 10px;
}

.market-item-tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    letter-spacing: 1px;
    font-weight: 600;
}

.tier-common { background: rgba(150, 150, 150, 0.2); color: #aaa; }
.tier-uncommon { background: rgba(0, 204, 102, 0.15); color: var(--success); }
.tier-rare { background: rgba(0, 120, 212, 0.15); color: var(--win11-accent); }
.tier-epic { background: rgba(155, 89, 182, 0.15); color: var(--market-purple); }
.tier-legendary { background: rgba(247, 147, 26, 0.15); color: var(--crypto-gold); }
.tier-mythic { background: rgba(255, 0, 128, 0.15); color: var(--neon-pink); }

.market-buy-btn {
    width: 100%;
    padding: 8px;
    margin-top: 8px;
    background: rgba(155, 89, 182, 0.2);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
}

.market-buy-btn:hover {
    background: rgba(155, 89, 182, 0.4);
}

.market-buy-btn.owned {
    background: rgba(0, 204, 102, 0.15);
    border-color: rgba(0, 204, 102, 0.3);
    color: var(--success);
    cursor: default;
}

/* ==========================================
   IP DATABASE
   ========================================== */
.iplist-body {
    background: #0d1117;
    overflow: hidden;
}

.iplist-header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.iplist-header h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--neon-blue);
}

.iplist-stats {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #888;
}

.iplist-stats strong {
    color: var(--neon-blue);
}

.iplist-search input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    outline: none;
    font-family: 'Fira Code', monospace;
}

.iplist-search input:focus {
    border-color: var(--neon-blue);
}

.iplist-table-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 4px;
}

.iplist-table-container::-webkit-scrollbar {
    width: 6px;
}
.iplist-table-container::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.2);
    border-radius: 3px;
}

.iplist-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.iplist-table th {
    padding: 10px 12px;
    text-align: left;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    background: #0d1117;
    z-index: 1;
}

.iplist-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: #ccc;
}

.iplist-table tr:hover {
    background: rgba(0, 212, 255, 0.04);
}

.iplist-table .ip-addr {
    font-family: 'Fira Code', monospace;
    color: var(--neon-blue);
}

.ip-status-active {
    color: var(--success);
}
.ip-status-burned {
    color: var(--danger);
    text-decoration: line-through;
    opacity: 0.5;
}

.ip-security-low { color: var(--success); }
.ip-security-medium { color: var(--warning); }
.ip-security-high { color: var(--danger); }
.ip-security-extreme { color: var(--neon-pink); }

/* ==========================================
   STOLEN DATA / FILES
   ========================================== */
.files-body {
    display: flex;
    background: #0d1117;
}

.files-sidebar {
    width: 180px;
    background: rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.06);
    padding: 8px;
    flex-shrink: 0;
}

.files-nav-item {
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 2px;
}

.files-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
}

.files-nav-item.active {
    background: rgba(0, 120, 212, 0.15);
    color: var(--win11-accent);
}

.files-content {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
}

.files-empty {
    text-align: center;
    color: #555;
    padding: 40px;
    font-style: italic;
}

.stolen-file-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 8px;
    transition: all 0.2s;
}

.stolen-file-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(0, 212, 255, 0.2);
}

.stolen-file-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.stolen-file-name {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.stolen-file-type {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 212, 255, 0.1);
    color: var(--neon-blue);
}

.stolen-file-details {
    font-size: 11px;
    color: #888;
    line-height: 1.5;
}

.stolen-file-details .detail-row {
    display: flex;
    gap: 8px;
}

.stolen-file-details .detail-label {
    color: #666;
    min-width: 100px;
}

.stolen-file-value {
    color: var(--terminal-green);
    font-family: 'Fira Code', monospace;
    font-size: 10px;
}

.sell-btn {
    margin-top: 8px;
    padding: 6px 16px;
    background: rgba(155, 89, 182, 0.2);
    border: 1px solid rgba(155, 89, 182, 0.3);
    border-radius: 4px;
    color: var(--market-purple);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.sell-btn:hover {
    background: rgba(155, 89, 182, 0.4);
}

/* ==========================================
   WALLET
   ========================================== */
.wallet-body {
    background: linear-gradient(180deg, #0d1117, #1a1a0d);
    padding: 20px;
    overflow-y: auto;
}

.wallet-balance-card {
    background: linear-gradient(135deg, rgba(247, 147, 26, 0.15), rgba(247, 147, 26, 0.05));
    border: 1px solid rgba(247, 147, 26, 0.2);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.wallet-label {
    font-size: 12px;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.wallet-amount {
    font-size: 36px;
    font-weight: 700;
    color: var(--crypto-gold);
    font-family: 'Fira Code', monospace;
    text-shadow: 0 0 20px rgba(247, 147, 26, 0.3);
}

.wallet-crypto {
    font-size: 14px;
    color: #888;
    font-family: 'Fira Code', monospace;
    margin-top: 4px;
}

.wallet-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.wallet-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
}

.wallet-stat span:first-child {
    display: block;
    font-size: 10px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.wallet-stat span:last-child {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: var(--terminal-green);
}

.wallet-transactions h4 {
    font-size: 14px;
    color: #888;
    margin-bottom: 12px;
}

.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    font-size: 12px;
}

.transaction-item .tx-desc {
    color: #ccc;
}

.transaction-item .tx-amount.positive {
    color: var(--success);
    font-family: 'Fira Code', monospace;
}

.transaction-item .tx-amount.negative {
    color: var(--danger);
    font-family: 'Fira Code', monospace;
}

/* ==========================================
   VIRUS LAB
   ========================================== */
.viruslab-body {
    background: linear-gradient(180deg, #1a0a0a, #0d0d0d);
    overflow-y: auto;
    padding: 16px;
}

.viruslab-header {
    margin-bottom: 16px;
}

.viruslab-header h3 {
    font-size: 18px;
    color: var(--danger);
    text-shadow: 0 0 10px rgba(255, 51, 51, 0.3);
}

.viruslab-subtitle {
    font-size: 12px;
    color: #888;
    margin-top: 4px;
}

.viruslab-inventory {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}

.virus-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #555;
    padding: 40px;
    font-style: italic;
}

.virus-card {
    background: rgba(255, 51, 51, 0.04);
    border: 1px solid rgba(255, 51, 51, 0.15);
    border-radius: 8px;
    padding: 14px;
    transition: all 0.2s;
}

.virus-card:hover {
    background: rgba(255, 51, 51, 0.08);
    border-color: rgba(255, 51, 51, 0.3);
}

.virus-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.virus-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--danger);
}

.virus-card-count {
    font-size: 11px;
    color: #888;
    font-family: 'Fira Code', monospace;
}

.virus-card-desc {
    font-size: 11px;
    color: #888;
    line-height: 1.4;
    margin-bottom: 8px;
}

.virus-card-effect {
    font-size: 10px;
    color: var(--neon-pink);
    font-style: italic;
}

/* ==========================================
   VPN MANAGER
   ========================================== */
.vpn-body {
    background: linear-gradient(180deg, #0a1a0a, #0d0d0d);
    overflow-y: auto;
    padding: 16px;
}

.vpn-status-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(57, 255, 20, 0.15);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.vpn-status-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
}

.vpn-shield {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.vpn-shield.off {
    background: rgba(255, 51, 51, 0.15);
    border: 2px solid rgba(255, 51, 51, 0.3);
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.1);
}
.vpn-shield.off::after { content: "🛡"; filter: grayscale(1) brightness(0.5); }

.vpn-shield.on {
    background: rgba(57, 255, 20, 0.15);
    border: 2px solid rgba(57, 255, 20, 0.3);
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.2);
}
.vpn-shield.on::after { content: "🛡"; }

.vpn-status-text h3 {
    font-size: 16px;
    margin-bottom: 4px;
}

.vpn-status-text p {
    font-size: 12px;
    color: #888;
}

.vpn-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.vpn-empty {
    text-align: center;
    color: #555;
    padding: 20px;
    font-style: italic;
    font-size: 13px;
}

.vpn-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s;
}

.vpn-item:hover {
    background: rgba(57, 255, 20, 0.05);
    border-color: rgba(57, 255, 20, 0.15);
}

.vpn-item-info h4 {
    font-size: 13px;
    color: #fff;
    margin-bottom: 2px;
}

.vpn-item-info p {
    font-size: 11px;
    color: #666;
}

.vpn-connect-btn {
    padding: 6px 16px;
    background: rgba(57, 255, 20, 0.15);
    border: 1px solid rgba(57, 255, 20, 0.3);
    border-radius: 4px;
    color: var(--neon-green);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.vpn-connect-btn:hover {
    background: rgba(57, 255, 20, 0.3);
}

.vpn-connect-btn.active {
    background: rgba(57, 255, 20, 0.3);
    border-color: var(--neon-green);
}

.firewall-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 16px;
}

.firewall-section h4 {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}

.firewall-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #888;
}

.firewall-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

.firewall-indicator.off {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(255, 51, 51, 0.4);
}

.firewall-indicator.on {
    background: var(--success);
    box-shadow: 0 0 6px rgba(0, 204, 102, 0.4);
}

/* ==========================================
   ANTIVIRUS
   ========================================== */
.antivirus-titlebar { background: linear-gradient(90deg, rgba(10, 80, 110, 0.95), rgba(32, 32, 32, 0.95)); }

.antivirus-body {
    background: linear-gradient(180deg, #08131a, #0d0d0d);
    overflow-y: auto;
    padding: 16px;
}

.antivirus-status-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.antivirus-status-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
}

.antivirus-shield {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.antivirus-shield.clean {
    background: rgba(0, 204, 102, 0.15);
    border: 2px solid rgba(0, 204, 102, 0.3);
    box-shadow: 0 0 20px rgba(0, 204, 102, 0.2);
}

.antivirus-shield.clean::after {
    content: "+";
    color: var(--success);
    font-weight: 700;
}

.antivirus-shield.infected {
    background: rgba(255, 51, 51, 0.15);
    border: 2px solid rgba(255, 51, 51, 0.3);
    box-shadow: 0 0 20px rgba(255, 51, 51, 0.15);
}

.antivirus-shield.infected::after {
    content: "!";
    color: var(--danger);
    font-weight: 700;
}

.antivirus-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.antivirus-action-btn {
    padding: 8px 18px;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.35);
    border-radius: 4px;
    color: var(--neon-blue);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.antivirus-action-btn:hover {
    background: rgba(0, 212, 255, 0.28);
}

.antivirus-threat-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.antivirus-empty {
    text-align: center;
    color: #555;
    padding: 20px;
    font-style: italic;
    font-size: 13px;
}

.antivirus-threat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 16px;
}

.antivirus-threat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.antivirus-threat-name {
    font-size: 13px;
    color: #fff;
}

.antivirus-threat-source {
    font-size: 11px;
    color: #888;
    margin-bottom: 4px;
}

.antivirus-threat-effect {
    font-size: 11px;
    color: var(--neon-blue);
}

/* ==========================================
   BROWSER WINDOW
   ========================================== */
.browser-body {
    background: #0d0d1a;
}

.browser-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.browser-nav {
    display: flex;
    gap: 4px;
}

.browser-nav-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    color: #888;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.browser-nav-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.browser-url-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    font-size: 12px;
    color: #888;
}

.url-lock {
    font-size: 10px;
}

.browser-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
}

.darknet-page h2 {
    color: var(--market-purple);
    margin-bottom: 10px;
}

.darknet-page p {
    color: #888;
    font-size: 13px;
    margin-bottom: 8px;
}

/* ==========================================
   NOTIFICATIONS
   ========================================== */
#notification-area {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 350px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.notification {
    background: rgba(32, 32, 32, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 14px 16px;
    animation: notif-slide-in 0.3s ease, notif-fade-out 0.5s ease 4s forwards;
    pointer-events: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.notification.notif-success {
    border-left: 3px solid var(--success);
}
.notification.notif-warning {
    border-left: 3px solid var(--warning);
}
.notification.notif-danger {
    border-left: 3px solid var(--danger);
}
.notification.notif-info {
    border-left: 3px solid var(--neon-blue);
}

.notif-title {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
}

.notif-message {
    font-size: 11px;
    color: #999;
    line-height: 1.4;
}

@keyframes notif-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes notif-fade-out {
    to { opacity: 0; transform: translateY(-20px); }
}

/* ==========================================
   FBI WARNING
   ========================================== */
#fbi-warning {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 30, 0.95);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fbi-flash 0.5s ease;
}

@keyframes fbi-flash {
    0% { background: rgba(255, 0, 0, 0.8); }
    25% { background: rgba(0, 0, 255, 0.8); }
    50% { background: rgba(255, 0, 0, 0.5); }
    75% { background: rgba(0, 0, 255, 0.5); }
    100% { background: rgba(0, 0, 30, 0.95); }
}

.fbi-content {
    text-align: center;
    max-width: 600px;
    padding: 40px;
}

.fbi-badge {
    font-size: 48px;
    font-weight: 700;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin-bottom: 20px;
    letter-spacing: 8px;
}

.fbi-content h1 {
    font-size: 28px;
    color: #fff;
    letter-spacing: 4px;
    margin-bottom: 8px;
}

.fbi-content h2 {
    font-size: 16px;
    color: var(--danger);
    letter-spacing: 6px;
    margin-bottom: 30px;
}

.fbi-msg {
    font-size: 16px;
    color: #ccc;
    margin-bottom: 10px;
}

.fbi-progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 20px 0 10px;
}

.fbi-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--danger), #ff0000);
    transition: width 0.1s linear;
}

.fbi-status {
    font-family: 'Fira Code', monospace;
    font-size: 14px;
    color: var(--danger);
    letter-spacing: 2px;
}

/* ==========================================
   GAME OVER
   ========================================== */
#game-over {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gameover-content {
    text-align: center;
    max-width: 500px;
}

.gameover-content h1 {
    font-size: 72px;
    font-weight: 700;
    color: var(--danger);
    text-shadow: 0 0 40px rgba(255, 51, 51, 0.5);
    letter-spacing: 8px;
    margin-bottom: 20px;
    animation: busted-pulse 1s infinite;
}

@keyframes busted-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.gameover-content p {
    font-size: 16px;
    color: #999;
    margin-bottom: 30px;
}

.gameover-stats {
    text-align: left;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    font-size: 14px;
    line-height: 2;
    color: #ccc;
}

.gameover-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.gameover-buttons .menu-btn {
    width: min(320px, 100%);
    justify-content: center;
}

/* ==========================================
   GAME MENU BUTTON
   ========================================== */
#game-menu-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 200;
    font-size: 18px;
    color: #ccc;
    transition: all 0.2s;
}

#game-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

#game-menu-dropdown {
    position: absolute;
    top: 48px;
    right: 8px;
    background: rgba(32, 32, 32, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px;
    z-index: 200;
    min-width: 180px;
}

#game-menu-dropdown button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: transparent;
    border: none;
    color: #ccc;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.15s;
    font-family: 'Inter', sans-serif;
}

#game-menu-dropdown button:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* ==========================================
   VIRUS EFFECT CANVAS
   ========================================== */
#virus-effect-canvas,
#player-virus-effect-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 400;
    pointer-events: none;
}

/* ==========================================
   SCROLLBAR STYLES
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* ==========================================
   UTILITY ANIMATIONS
   ========================================== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

.slide-up {
    animation: slideUp 0.3s ease;
}

/* Progress bar animation for downloads/transfers */
.progress-container {
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin: 4px 0;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--neon-blue), var(--neon-green));
    border-radius: 2px;
    transition: width 0.1s linear;
}

/* Connection animation */
.connecting-dots::after {
    content: '';
    animation: dots 1.5s infinite;
}

@keyframes dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}