:root {
    --terminal-yellow: #a0c4a8; /* Pale mint green from image */
    --terminal-green: #a0c4a8; 
    --terminal-black: #000000;
    --terminal-dark: #001100;
    --terminal-card-bg: #001c05;
    --terminal-border: #4d6d53;
    --terminal-accent: #a0c4a8;
    --terminal-bg: #030a05;
    --crt-flicker: 0.12s;
    --scanline-speed: 10s;
}

body {
    background-color: var(--terminal-bg);
    color: var(--terminal-green);
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
    background-image: 
        linear-gradient(rgba(160, 196, 168, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 196, 168, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

.mono {
    font-family: 'JetBrains Mono', monospace;
}

/* TRUE SCREEN GLITCH - HARDWARE FAIL SIMULATION */
body {
    animation: global-screen-glitch 9s infinite;
}

@keyframes global-screen-glitch {
    0%, 93% { filter: none; transform: none; }
    93.5% { filter: invert(0.2) hue-rotate(90deg); transform: skewX(1deg) translateX(3px); }
    94% { filter: none; transform: none; }
    95% { filter: contrast(1.5) blur(1px); transform: skewX(-1deg) translateX(-3px); text-shadow: -2px 0 red, 2px 0 blue; }
    95.5% { filter: none; transform: none; text-shadow: none; }
    98% { filter: brightness(1.2); transform: translateY(2px); text-shadow: 2px 0 red, -2px 0 blue; }
    98.5% { filter: none; transform: none; text-shadow: none; }
    100% { filter: none; transform: none; }
}

.screen-tear {
    position: fixed;
    top: 50%;
    left: 0;
    width: 100vw;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 30px rgba(160, 196, 168, 0.9), 0 0 10px rgba(160, 196, 168, 0.6);
    z-index: 9999;
    pointer-events: none;
    animation: tear-anim 8s infinite;
    opacity: 0;
    mix-blend-mode: screen;
}

@keyframes tear-anim {
    0%, 91% { opacity: 0; transform: translateY(-50vh); }
    92% { opacity: 0.9; transform: translateY(10vh) scaleY(5); }
    93% { opacity: 0.4; transform: translateY(30vh) scaleY(1); }
    94% { opacity: 0.7; transform: translateY(60vh) scaleY(12); }
    95% { opacity: 0; transform: translateY(120vh); }
    100% { opacity: 0; }
}

/* CRT EFFECTS */
.crt::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.crt::after {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(18, 16, 16, 0.1);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    animation: flicker var(--crt-flicker) infinite;
}

.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 4px, 3px 100%;
}

@keyframes flicker {
    0% { opacity: 0.27861; }
    5% { opacity: 0.34769; }
    10% { opacity: 0.23604; }
    15% { opacity: 0.90626; }
    20% { opacity: 0.18128; }
    25% { opacity: 0.83891; }
    30% { opacity: 0.65583; }
    35% { opacity: 0.57807; }
    40% { opacity: 0.26559; }
    45% { opacity: 0.84693; }
    50% { opacity: 0.96019; }
    55% { opacity: 0.08594; }
    60% { opacity: 0.20313; }
    65% { opacity: 0.71988; }
    70% { opacity: 0.53455; }
    75% { opacity: 0.37288; }
    80% { opacity: 0.71428; }
    85% { opacity: 0.70419; }
    90% { opacity: 0.7003; }
    95% { opacity: 0.36108; }
    100% { opacity: 0.24387; }
}

.blink { animation: blink-opacity 0.8s infinite alternate; }
@keyframes blink-opacity { 0% { opacity: 0.2; } 100% { opacity: 0.9; } }

/* TERMINAL COMPONENTS */
.terminal-container {
    position: relative;
    z-index: 10;
    min-height: 100vh;
}

.logo-text span {
    text-shadow: 0 0 5px var(--terminal-green);
    letter-spacing: 2px;
}

.nav-link {
    color: var(--terminal-green) !important;
    text-decoration: none;
    margin: 0 10px;
    padding: 5px;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.nav-link:hover, .nav-link.active {
    background-color: var(--terminal-green);
    color: #ffffff !important;
}

/* CIPHER STYLES */
.cipher-frame {
    border: 1px solid var(--terminal-border);
    background-color: var(--terminal-card-bg);
    padding: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 30px rgba(160, 196, 168, 0.03);
    background-image: 
        radial-gradient(rgba(160, 196, 168, 0.05) 1px, transparent 1px);
    background-size: 15px 15px;
}

.cipher-frame::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 20px; height: 20px;
    border-top: 2px solid var(--terminal-yellow);
    border-left: 2px solid var(--terminal-yellow);
}
.cipher-frame::after {
    content: '';
    position: absolute;
    bottom: 0; right: 0; width: 20px; height: 20px;
    border-bottom: 2px solid var(--terminal-yellow);
    border-right: 2px solid var(--terminal-yellow);
}

.cipher-label {
    color: var(--terminal-yellow);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 2rem;
    display: block;
    letter-spacing: 4px;
    text-shadow: 0 0 5px rgba(160, 196, 168, 0.6);
}

.hero-title {
    font-weight: 800;
    font-size: 5rem;
    line-height: 1.1;
    color: var(--terminal-yellow);
    text-transform: uppercase;
    margin-bottom: 2rem;
    text-shadow: 0 0 15px rgba(160, 196, 168, 0.4);
}

.hero-subtitle {
    font-size: 1.1rem;
    color: #a0c4a8;
    max-width: 600px;
}

.btn-cipher {
    background-color: rgba(160, 196, 168, 0.15);
    color: var(--terminal-yellow) !important;
    font-weight: 700;
    padding: 12px 24px;
    border: 1px solid var(--terminal-yellow) !important;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 2px;
    box-shadow: 0 0 15px rgba(160, 196, 168, 0.2);
    transition: all 0.2s;
}
.btn-cipher:hover {
    background-color: var(--terminal-yellow);
    color: #000 !important;
    box-shadow: 0 0 25px rgba(160, 196, 168, 0.6);
}

.btn-cipher-outline {
    border: 1px dashed var(--terminal-border);
    color: var(--terminal-yellow);
    padding: 12px 24px;
    background: transparent;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.btn-cipher-outline:hover {
    border: 1px solid var(--terminal-yellow);
    color: var(--terminal-yellow);
    background-color: rgba(160, 196, 168, 0.05);
}

.globe-container {
    position: relative;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cipher-card {
    border: 1px solid var(--terminal-border);
    padding: 1.5rem;
    background: rgba(0, 20, 5, 0.5);
    box-shadow: inset 0 0 15px rgba(160, 196, 168, 0.02);
    transition: all 0.3s;
    position: relative;
}

.cipher-card::before {
    content: '[ NODE_R ]';
    position: absolute;
    top: -10px;
    right: 15px;
    background: var(--terminal-bg);
    padding: 0 5px;
    font-size: 0.6rem;
    color: var(--terminal-yellow);
    opacity: 0.5;
}

.cipher-card:hover {
    border-color: var(--terminal-yellow);
    background: rgba(160, 196, 168, 0.05);
    box-shadow: inset 0 0 15px rgba(160, 196, 168, 0.1);
}

.cipher-footer-tag {
    font-size: 0.7rem;
    letter-spacing: 3px;
    color: var(--terminal-border);
    text-transform: uppercase;
}

.bg-yellow { background-color: var(--terminal-yellow) !important; }
.text-yellow { color: var(--terminal-yellow) !important; }
.border-yellow { border-color: var(--terminal-yellow) !important; }

/* OVERRIDE BOOTSTRAP DEFAULTS TO FORCE CYBERPUNK COLORWAY */
.text-warning { color: var(--terminal-yellow) !important; text-shadow: 0 0 5px rgba(160, 196, 168, 0.4); }
.text-success { color: var(--terminal-green) !important; text-shadow: 0 0 3px rgba(160, 196, 168, 0.4); }
.text-white { color: #d1ffd7 !important; text-shadow: 0 0 2px rgba(209, 255, 215, 0.2); }
.text-muted { color: #7f9986 !important; text-shadow: 0 0 2px rgba(127, 153, 134, 0.3); }
.bg-warning { background-color: var(--terminal-yellow) !important; color: #000 !important; }
.border-success { border-color: var(--terminal-border) !important; }

/* GRAIN EFFECT */
#grain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0.05;
    pointer-events: none;
    z-index: 9999;
    background: url(https://grainy-gradients.vercel.app/noise.svg);
}
/* LOADING SCREEN */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--terminal-bg);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1s, visibility 1s;
    overflow: hidden;
}

#loading-overlay.hide {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    width: 100%;
    max-width: 1100px;
}

.loader-left {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.loader-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 0 2rem 5rem;
    min-height: 500px;
    height: 100%;
}

.ascii-large {
    line-height: 1;
    font-size: 1rem;
    color: var(--terminal-green);
    text-shadow: 0 0 20px var(--terminal-green);
    animation: pulse-glow 2s infinite ease-in-out;
    margin: 0;
    padding: 0;
}

#loading-progress {
    transition: width 0.1s linear;
    box-shadow: 0 0 15px var(--terminal-green);
    position: relative;
    overflow: hidden;
}

#loading-progress::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: progress-shine 2s infinite linear;
}

@keyframes progress-shine {
    from { transform: translateX(-100px); }
    to { transform: translateX(600px); }
}

.no-scroll {
    overflow: hidden !important;
}

.x-small {
    font-size: 0.65rem;
}
.typewriter h2 {
    overflow: hidden;
    border-right: .15em solid var(--terminal-green);
    white-space: nowrap;
    margin: 0 auto;
    letter-spacing: .15em;
    animation: 
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
}

@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: var(--terminal-green); }
}

/* ASCII LARGE SYMBOL */
.ascii-large {
    line-height: 1.15;
    font-size: 1.6rem;
    color: var(--terminal-green);
    text-shadow: 0 0 15px var(--terminal-green);
    animation: pulse-glow 2s infinite ease-in-out;
    display: inline-block;
    margin-bottom: 2rem;
}

@keyframes pulse-glow {
    0%, 100% { text-shadow: 0 0 10px var(--terminal-green); opacity: 0.85; transform: scale(1); }
    50% { text-shadow: 0 0 30px var(--terminal-green); opacity: 1; transform: scale(1.02); }
}