@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;500&display=swap');

#root {
}

:root {
    /* Monochrome / Mikasa-like palette */
    --bg: #050505;
    --panel: rgba(255,255,255,0.03);
    --panel-strong: rgba(255,255,255,0.06);
    --text: #e6e6e6;
    --muted: #bfbfbf;
    --accent: rgba(255,255,255,0.06);
    --alpha: 0.85; /* can be used for translucent elements */
}

html, body {
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

* { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }

img, picture, video, svg { filter: grayscale(100%) contrast(105%); opacity: 0.95; mix-blend-mode: luminosity; }

a, button { color: var(--text); }

#terminal-window {
    width: 95%;
    max-width: 850px;
    height: 600px;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
.custom-scrollbar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 4px; }

.bg-black { background-color: #000 !important; }
.font-monospace { font-family: 'Fira Code', monospace !important; }
.selection-primary::selection { background-color: rgba(255,255,255,0.12); color: var(--text); }

.bg-glass { background: rgba(255,255,255,0.02); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bg-glass-header { background: rgba(255,255,255,0.03); cursor: grab; }
.bg-black-opacity { background: rgba(0, 0, 0, 0.55); }

.window-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.drop-shadow-glow { filter: drop-shadow(0 0 18px rgba(255,255,255,0.06)); }

.ascii-art { font-size: 11px !important; line-height: 1.1 !important; white-space: pre; color: var(--muted); }
.whitespace-pre-wrap { white-space: pre-wrap; }

/* CRT Effect */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none;
    background: linear-gradient(rgba(5,5,5,0) 50%, rgba(0,0,0,0.06) 50%), linear-gradient(90deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));
    background-size: 100% 2px, 2px 100%;
}

/* Glitch & Animations */
.glitch-text { position: relative; }
.glitch-text::before, .glitch-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.glitch-text::before { left: 2px; text-shadow: -1px 0 rgba(255,255,255,0.06); clip: rect(44px, 450px, 56px, 0); animation: glitch-anim 5s infinite linear alternate-reverse; }

@keyframes glitch-anim { 0% { clip: rect(38px, 9999px, 34px, 0); } 100% { clip: rect(18px, 9999px, 96px, 0); } }

/* Chaos Theme */
.theme-breach { background-color: var(--bg) !important; color: var(--text) !important; }
.theme-breach #terminal-window { border-color: rgba(255,255,255,0.04) !important; box-shadow: 0 0 18px rgba(255,255,255,0.04) !important; }

/* Utility for stronger translucency */
.transparent-strong { background: rgba(255,255,255,0.02); }

/* Primary text color requested: #780d18 */
.text-primary { color: #780d18 !important; }