/* =========================================
   1. CORE VARIABLES & RESET
   ========================================= */
:root {
    --bg-color: #050505;
    --card-bg: #0a0a0a;
    --text-main: #e0e0e0;
    --accent: #00ff41; 
    --accent-dim: #008F11;
    --danger: #ff003c;
    --cyber-blue: #00f3ff;
    --gold: #ffd700;
    --font-mono: 'Courier New', Courier, monospace;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-mono);
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevents shake animations from adding scrollbars */
}

/* =========================================
   2. TYPOGRAPHY & LAYOUT
   ========================================= */
h1, h2, h3 {
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 0;
    text-shadow: 0 0 5px rgba(0, 255, 65, 0.5);
}

a { color: var(--accent); text-decoration: none; transition: 0.2s; }
a:hover { color: #fff; text-shadow: 0 0 8px var(--accent); }

main { padding: 2rem; max-width: 1000px; margin: 0 auto; position: relative; z-index: 2; }

.container {
    background: var(--card-bg);
    padding: 2rem;
    border: 1px solid #333;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* =========================================
   3. NAVIGATION
   ========================================= */
header {
    background: #000;
    border-bottom: 1px solid var(--accent-dim);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 100;
}

nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; }
nav a { font-weight: bold; color: #888; font-size: 0.9em; letter-spacing: 1px; }
nav a.active, nav a:hover { color: var(--accent); text-shadow: 0 0 5px var(--accent); }

/* =========================================
   4. UI COMPONENTS
   ========================================= */
/* Cards & Inputs */
input, textarea, select {
    background: #000;
    border: 1px solid #333;
    color: var(--accent);
    padding: 12px;
    font-family: var(--font-mono);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
    transition: 0.3s;
}
input:focus, textarea:focus { 
    border-color: var(--accent); 
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.2); 
    outline: none; 
}

button {
    background: #111;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 10px 25px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.2s;
    position: relative;
    overflow: hidden;
}
button:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 20px var(--accent);
}

/* Tables */
.cyber-table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.cyber-table th, .cyber-table td { border: 1px solid #222; padding: 15px; text-align: left; }
.cyber-table th { background: #111; color: var(--accent); border-bottom: 2px solid var(--accent); }
.highlight-row { background: rgba(0, 255, 65, 0.03); }

/* Glitch Utility */
.glitch { position: relative; color: var(--accent); }
.glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.glitch::before { left: 2px; text-shadow: -1px 0 #ff00c1; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }
.glitch::after { left: -2px; text-shadow: -1px 0 #00fff9; clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }

@keyframes glitch-anim {
    0% { clip: rect(38px, 9999px, 81px, 0); }
    20% { clip: rect(69px, 9999px, 12px, 0); }
    40% { clip: rect(15px, 9999px, 88px, 0); }
    60% { clip: rect(4px, 9999px, 99px, 0); }
    80% { clip: rect(59px, 9999px, 2px, 0); }
    100% { clip: rect(83px, 9999px, 45px, 0); }
}

/* =========================================
   5. BLACK MARKET BANNERS (CRAZY MODE)
   ========================================= */
.cyber-banner {
    position: relative;
    width: 100%;
    height: 250px;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid #333;
    margin-bottom: 30px;
    z-index: 1;
    perspective: 1000px;
}

.banner-content {
    z-index: 10;
    text-align: center;
    mix-blend-mode: normal; 
}

.banner-content h1 {
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: 8px;
    margin: 0;
    text-transform: uppercase;
    /* This ensures the text punches through the effects */
    position: relative;
}

/* --- 1. MATRIX (Raining Code 3D) --- */
.banner-matrix { border-bottom-color: var(--accent); }
.banner-matrix h1 { color: #fff; text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent); }
.banner-matrix::before {
    content: ""; position: absolute; top: -100%; left: 0; width: 100%; height: 300%;
    background-image: 
        linear-gradient(rgba(0, 255, 65, 0.4) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.4) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: perspective(500px) rotateX(60deg) translateY(0);
    animation: matrix-floor 5s linear infinite;
    opacity: 0.3;
}
.banner-matrix::after {
    content: "10110101010011010101"; /* Pseudo-code rain */
    position: absolute; top: 0; left: 0; width: 100%;
    color: var(--accent); opacity: 0.1; font-size: 20px;
    word-break: break-all; line-height: 1;
    animation: text-scroll 2s linear infinite;
}
@keyframes matrix-floor { from { transform: perspective(500px) rotateX(60deg) translateY(0); } to { transform: perspective(500px) rotateX(60deg) translateY(100px); } }

/* --- 2. RED ALERT (Seizure Warning) --- */
.banner-red-alert { background: #200; border-bottom: 4px solid var(--danger); animation: panic-pulse 0.5s infinite; }
.banner-red-alert h1 { color: #fff; animation: shake 0.2s infinite; text-shadow: 4px 4px 0px var(--danger); }
.banner-red-alert::before {
    content: ""; position: absolute; width: 200%; height: 200%;
    background: repeating-linear-gradient(45deg, #000, #000 50px, var(--danger) 50px, var(--danger) 100px);
    opacity: 0.15; animation: hazard-scroll 2s linear infinite;
}
@keyframes panic-pulse { 0% { box-shadow: inset 0 0 0 0 red; } 50% { box-shadow: inset 0 0 50px 0 red; } 100% { box-shadow: inset 0 0 0 0 red; } }
@keyframes hazard-scroll { 0% { transform: translate(-20px, -20px); } 100% { transform: translate(0, 0); } }
@keyframes shake { 0% { transform: translate(1px, 1px); } 50% { transform: translate(-1px, -1px); } 100% { transform: translate(1px, -1px); } }

/* --- 3. CYBERPUNK (Neon City) --- */
.banner-cyberpunk { background: #050010; border-bottom: 4px solid var(--cyber-blue); }
.banner-cyberpunk h1 {
    color: #f0f;
    text-shadow: 3px 3px 0px var(--cyber-blue);
    animation: neon-flicker 3s infinite;
}
.banner-cyberpunk::before {
    content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%;
    background: linear-gradient(transparent 50%, var(--cyber-blue) 50%);
    background-size: 100% 4px;
    transform: perspective(200px) rotateX(45deg);
    animation: grid-move 1s linear infinite;
    opacity: 0.5;
}
@keyframes grid-move { from { background-position: 0 0; } to { background-position: 0 100%; } }
@keyframes neon-flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: 0.5; } }

/* --- 4. THE VOID (Black Hole) --- */
.banner-void { background: #000; border-bottom: 1px solid #333; }
.banner-void h1 { color: transparent; -webkit-text-stroke: 1px #fff; letter-spacing: 20px; opacity: 0.5; }
.banner-void::before {
    content: ""; position: absolute; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 20%, #000 90%), url('data:image/svg+xml;utf8,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="1" fill="white"/></svg>');
    animation: star-zoom 10s infinite linear;
}
@keyframes star-zoom { 0% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.5); opacity: 1; } 100% { transform: scale(1); opacity: 0.5; } }

/* --- 5. BIO-HAZARD (Toxic Sludge) --- */
.banner-bio { background: #0a1000; border-bottom: 4px solid #ccff00; }
.banner-bio h1 { color: #ccff00; filter: drop-shadow(0 0 10px #ccff00); animation: slime-drip 3s infinite ease-in-out; }
.banner-bio::before {
    content: ""; position: absolute; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(204, 255, 0, 0.4), transparent 70%);
    animation: pulse-glow 2s infinite;
}
@keyframes slime-drip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.1); } }

/* --- 6. GLITCH (Data Corruption) --- */
.banner-glitch { background: #111; border-bottom: 2px solid #fff; }
.banner-glitch h1 { 
    color: #fff; 
    animation: chromatic 0.1s infinite;
}
@keyframes chromatic { 
    0% { text-shadow: 2px 0 red, -2px 0 blue; transform: translate(-2px, 0); } 
    50% { text-shadow: -2px 0 red, 2px 0 blue; transform: translate(2px, 0); } 
    100% { text-shadow: 2px 0 red, -2px 0 blue; transform: translate(-2px, 0); } 
}

/* 6. CIRCUIT (Blue Tech - Now Animated!) */
.banner-circuit { border-bottom: 2px solid #0088ff; background: #000510; }
.banner-circuit h1 { color: #fff; text-shadow: 0 0 10px #0088ff, 0 0 20px #0088ff; }
.banner-circuit::before {
    content: ""; position: absolute; width: 200%; height: 200%;
    background-image: 
        linear-gradient(#0088ff 2px, transparent 2px), 
        linear-gradient(90deg, #0088ff 2px, transparent 2px),
        linear-gradient(rgba(0,136,255,0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,136,255,0.3) 1px, transparent 1px);
    background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
    background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
    transform: perspective(500px) rotateX(60deg);
    animation: circuit-scroll 5s linear infinite; /* IT MOVES NOW */
    opacity: 0.2; z-index: 1;
}
@keyframes circuit-scroll { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } }

/* =========================================
   6. USERNAME STYLES (EPIC TIER)
   ========================================= */

/* 1. ROOT (The Golden God) */
.style-root {
    background: linear-gradient(120deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    background-size: 200% auto;
    animation: shine 2s linear infinite;
}
@keyframes shine { to { background-position: 200% center; } }

/* 2. RETRO (Miami Sunset) */
.style-retro {
    background: linear-gradient(to top, #ff00de, #00f3ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
    filter: drop-shadow(0 0 2px #ff00de);
}

/* 3. TERMINAL (Console) */
.style-terminal { color: var(--accent) !important; font-family: 'Courier New'; font-weight: bold; }
.style-terminal::after { content: "_"; animation: blink 0.5s step-end infinite alternate; }
@keyframes blink { 50% { opacity: 0; } }

/* 4. SYSTEM FAIL (Broken) */
.style-fail {
    color: #ff003c !important;
    text-decoration: line-through;
    animation: skew-shake 0.5s infinite;
    display: inline-block;
}
@keyframes skew-shake { 0% { transform: skewX(0deg); } 25% { transform: skewX(20deg); } 75% { transform: skewX(-20deg); } }

/* 5. GHOST (Invisibility) */
.style-ghost { opacity: 0.1; transition: 0.5s; filter: blur(2px); }
.style-ghost:hover { opacity: 1; filter: blur(0px); text-shadow: 0 0 10px #fff; color: #fff !important; }

/* 6. TOXIC (Radioactive) */
.style-toxic {
    color: #ccff00 !important;
    text-shadow: 0 0 5px #ccff00, 0 0 15px #ccff00;
    animation: pulse-glow 0.5s infinite alternate;
}

/* 7. ENCRYPTED (Obfuscated) */
.style-encrypt {
    background: #000;
    color: var(--accent) !important;
    padding: 2px;
    letter-spacing: -1px;
    font-family: 'Courier New';
    border: 1px dashed var(--accent);
}

/* 8. WIREFRAME (Blueprint) */
.style-wire {
    color: transparent !important;
    -webkit-text-stroke: 1px var(--accent);
    text-shadow: none !important;
}

/* 0. DEFAULT (Offline / Boring) - So Matrix feels special */
.banner-default { border-bottom: 1px solid #333; background: #050505; }
.banner-default h1 { color: #333; text-shadow: none; }
.banner-default::before {
    content: "NO_SIGNAL";
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-size: 10em; color: #111; font-weight: bold; z-index: 0;
}

.style-redacted {
    background: #e0e0e0;
    color: #e0e0e0 !important;
    text-shadow: none !important; /* Critical fix */
    border-radius: 2px;
    padding: 0 5px;
    transition: all 0.2s ease;
    cursor: help;
}
.style-redacted:hover {
    background: transparent;
    color: var(--accent) !important;
    text-shadow: 0 0 5px var(--accent) !important;
}

.style-bsod {
    background: #0000AA;
    color: #fff !important;
    font-family: 'Lucida Console', monospace;
    padding: 4px 8px;
    font-size: 0.8em;
    display: inline-block; /* Helps background render properly */
    line-height: 1.2;
    transform: rotate(-2deg); /* Slight tilt for effect */
}