* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --primary: #00FF00;
  --bg: #0A0A0A;
  --bg-dim: #050505;
}

body {
  background: var(--bg);
  color: var(--primary);
  font-family: 'Fira Code', 'Courier New', monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

/* CRT Scanlines */
.crt-overlay {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0.08) 1px,
    rgba(0,0,0,0.08) 2px
  );
}

/* CRT Vignette */
.crt-vignette {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
}

/* Text Glow */
.glow {
  text-shadow:
    0 0 5px var(--primary),
    0 0 10px var(--primary),
    0 0 20px var(--primary);
}

.glow-soft {
  text-shadow:
    0 0 3px var(--primary),
    0 0 6px var(--primary);
}

.glow-intense {
  text-shadow:
    0 0 7px var(--primary),
    0 0 15px var(--primary),
    0 0 30px var(--primary),
    0 0 50px var(--primary);
}

/* Blinking Cursor */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cursor-blink::after {
  content: '█';
  animation: blink 1s infinite;
}

/* Screen Flicker */
@keyframes flicker {
  0% { opacity: 1; }
  3% { opacity: 0.4; }
  6% { opacity: 1; }
  7% { opacity: 0.6; }
  9% { opacity: 1; }
  100% { opacity: 1; }
}

.screen-flicker {
  animation: flicker 0.15s ease-in-out;
}

/* Glitch Effect */
@keyframes glitch1 {
  0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 0); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(2px, 0); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 0); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(3px, 0); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(-3px, 0); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(1px, 0); }
}

@keyframes glitch2 {
  0% { clip-path: inset(65% 0 13% 0); transform: translate(3px, 0); }
  20% { clip-path: inset(15% 0 62% 0); transform: translate(-3px, 0); }
  40% { clip-path: inset(72% 0 1% 0); transform: translate(2px, 0); }
  60% { clip-path: inset(1% 0 85% 0); transform: translate(-2px, 0); }
  80% { clip-path: inset(34% 0 43% 0); transform: translate(1px, 0); }
  100% { clip-path: inset(24% 0 58% 0); transform: translate(-1px, 0); }
}

.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 {
  color: #ff0033;
  animation: glitch1 0.3s infinite linear alternate-reverse;
  z-index: -1;
}

.glitch-text::after {
  color: #00ffff;
  animation: glitch2 0.3s infinite linear alternate-reverse;
  z-index: -1;
}

/* Pulse */
@keyframes pulse-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Menu hover */
.menu-item {
  transition: all 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
  padding: 8px 16px;
}

.menu-item:hover {
  border-color: var(--primary);
  background: rgba(0,255,0,0.05);
  text-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary);
}

/* Decrypt animation */
@keyframes decrypt-chars {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* Screen shake */
@keyframes shake {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-5px, -3px); }
  20% { transform: translate(5px, 3px); }
  30% { transform: translate(-3px, 5px); }
  40% { transform: translate(3px, -5px); }
  50% { transform: translate(-5px, 3px); }
  60% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, -5px); }
  80% { transform: translate(3px, 5px); }
  90% { transform: translate(-5px, -3px); }
}

.screen-shake {
  animation: shake 0.5s ease-in-out;
}

/* Typewriter */
@keyframes typewriter-cursor {
  0%, 50% { border-right-color: var(--primary); }
  51%, 100% { border-right-color: transparent; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--primary); opacity: 0.5; }

/* Node styling */
.node-entry {
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid transparent;
  transition: all 0.1s ease;
  font-size: 0.85rem;
}

.node-entry:hover {
  border-color: var(--primary);
  background: rgba(0,255,0,0.03);
}

/* Matrix rain canvas */
#matrix-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0.06;
  pointer-events: none;
}

/* Busted overlay */
@keyframes busted-flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.busted-flash {
  animation: busted-flash 0.3s ease-in-out infinite;
}

/* Success rain */
@keyframes rain-fall {
  0% { transform: translateY(-100vh); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Box drawing borders */
.terminal-box {
  border: 1px solid var(--primary);
  position: relative;
}

/* Footer */
.footer-link {
  color: var(--primary);
  opacity: 0.4;
  text-decoration: none;
  font-size: 0.7rem;
  transition: opacity 0.2s;
}

.footer-link:hover {
  opacity: 0.8;
}

/* Detection bar */
.detection-bar-bg {
  background: rgba(255,255,255,0.1);
  height: 16px;
  border: 1px solid var(--primary);
}

.detection-bar-fill {
  height: 100%;
  transition: width 0.5s ease;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  body { font-size: 12px; }
  .node-entry { padding: 8px 6px; font-size: 0.75rem; }
}