:root {
    --terminal-green: #00ff41;
    --terminal-bg: #050505;
    --terminal-surface: #0e0e0e;
    --terminal-border: #1a1a1a;
    --terminal-accent: #008f11;
}

body {
    background-color: var(--terminal-bg);
    color: #e0e0e0;
    font-family: 'JetBrains Mono', monospace;
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* Scanline Overlay */
.crt-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
    background-size: 100% 3px, 3px 100%;
    z-index: 90; pointer-events: none; opacity: 0.25;
}

/* Matrix Rain Background */
#matrix-bg {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1; opacity: 0.05; pointer-events: none;
    font-size: 10px; color: var(--terminal-green); overflow: hidden;
}

/* Glitch Effect on Hover */
.glitch-hover:hover {
    animation: glitch 0.3s cubic-bezier(.25,.46,.45,.94) both infinite;
    color: var(--terminal-green);
}

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

.glow-text { text-shadow: 0 0 10px rgba(0, 255, 65, 0.5); }

/* Buttons */
.btn-terminal {
    position: relative; border: 1px solid var(--terminal-green);
    color: var(--terminal-green); padding: 0.75rem 2rem;
    text-transform: uppercase; font-size: 0.75rem; font-weight: bold;
    letter-spacing: 0.1em; transition: all 0.3s ease;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    white-space: nowrap;
}

.btn-terminal:hover {
    background: var(--terminal-green); color: black;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.6);
}

/* Blinking Cursor */
.cursor {
    display: inline-block; width: 12px; height: 1.2em;
    background-color: var(--terminal-green); margin-left: 5px;
    animation: blink 1s step-end infinite; vertical-align: middle;
}
@keyframes blink { from, to { opacity: 1; } 50% { opacity: 0; } }

/* Interactive Console Widget */
#live-console {
    position: fixed; bottom: 20px; right: 20px;
    width: 340px; height: 220px; background: rgba(5, 5, 5, 0.95);
    border: 1px solid var(--terminal-border); z-index: 101;
    font-size: 0.65rem; color: var(--terminal-accent);
    display: flex; flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, height 0.3s ease;
    backdrop-filter: blur(8px);
}

/* Mobile specific console adjustments */
@media (max-width: 640px) {
    #live-console {
        width: 90vw; /* Wider on mobile */
        right: 5vw;
        bottom: 10px;
    }
}

#live-console.minimized {
    height: 32px;
    transform: translateY(0);
}

#live-console.closed {
    transform: translateY(200px);
    opacity: 0;
    pointer-events: none;
}

.console-header {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid var(--terminal-border);
    display: flex;
    justify-content: space-between;
      align-items: center;
      cursor: default;
  }

  .mac-dots { display: flex; gap: 6px; }
  .mac-dot { width: 10px; height: 10px; border-radius: 50%; cursor: pointer; transition: opacity 0.2s; }
  .mac-dot:hover { opacity: 0.8; }
  .dot-close { background: #ff5f56; border: 1px solid #e0443e; }
  .dot-min { background: #ffbd2e; border: 1px solid #dea123; }
  .dot-max { background: #27c93f; border: 1px solid #1aab29; }

  .console-body {
      flex: 1;
      padding: 10px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: opacity 0.2s ease;
  }

  #console-logs {
      flex-grow: 1;
      overflow-y: auto;
      margin-bottom: 5px;
  }

  #live-console.minimized .console-body {
      opacity: 0;
      pointer-events: none;
  }

  .console-entry { margin-bottom: 2px; white-space: nowrap; }

  #terminal-restore-btn {
      position: fixed; bottom: 20px; right: 20px;
      background: var(--terminal-surface);
      border: 1px solid var(--terminal-green);
      color: var(--terminal-green);
      padding: 8px 16px; font-size: 10px;
      cursor: pointer; display: none; z-index: 100;
      text-transform: uppercase; tracking-widest;
  }

.social-link { transition: all 0.2s ease; border: 1px solid transparent; }
.social-link:hover { border-color: var(--terminal-green); color: var(--terminal-green); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: var(--terminal-accent); }

  /* SVG & Canvas Helpers */
.bci-grid-line { stroke: rgba(0, 255, 65, 0.1); stroke-width: 1; }
#pacman-canvas { background: #000; cursor: crosshair; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 8px; }

.ascii-art {
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
  color: var(--terminal-accent);
  opacity: 0.6;
}
  
  /* Tech Stack Specifics */
.tech-card:hover .tech-bar { width: 100%; }
.tech-card:hover { border-color: var(--terminal-green); background-color: rgba(0, 255, 65, 0.05); }

  /* Mobile Menu Transition */
#mobile-menu {
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.open {
      max-height: 400px;
      opacity: 1;
  }
/* Typing Animation */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: translateX(-10px); 
    }
    to { 
        opacity: 0. 8; 
        transform: translateX(0); 
    }
}

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

/* Typing text effect */
.typing-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    animation: typing 2s steps(13, end) forwards;
}

. typing-text-delayed {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    animation: typing 1.5s steps(17, end) 2s forwards, fadeInUp 0.3s 2s forwards;
}

/* Blinking cursor */
. cursor {
    animation: blink 0.8s infinite;
}

/* Typewriter effect for command line */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    animation: typing 1s steps(18, end) 0.5s forwards;
    width: 0;
}

/* Sliding text for events */
.sliding-text {
    display: inline-block;
    animation: slideIn 0.5s ease-out forwards;
}

. event-line {
    opacity: 0;
    animation: fadeInUp 0.4s ease-out forwards;
}

. event-line: nth-child(1) { animation-delay: 0.5s; }
. event-line:nth-child(2) { animation-delay:  1s; }
.event-line:nth-child(3) { animation-delay: 1.5s; }
@keyframes fadeIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform:  translateX(0); }
}

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

#code-editor {
    font-family: 'JetBrains Mono', monospace;
}