/* ═══════════════════════════════════════════════════════════
   TERMINAL OVERLOAD v3.0 — CRT Terminal Aesthetic
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & base ────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Screen-reader only (visually hidden but accessible) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root {
  --bg:         #080e1e;
  --panel:      rgba(0, 255, 65, 0.06);
  --panel-solid: #0a1a12;
  --border:     rgba(0, 255, 65, 0.35);
  --border-hi:  rgba(0, 255, 65, 0.65);
  --text:       #d4ffd4;
  --text-dim:   #6ab86a;
  --accent:     #00ff41;
  --red:        #ff4444;
  --red-dim:    #cc3333;
  --green:      #44ff66;
  --green-dim:  #2ca842;
  --blue:       #4499ff;
  --blue-dim:   #3366bb;
  --yellow:     #ffdd22;
  --orange:     #ff9922;
  --white:      #e8ffe8;
  --glow-r:     0 0 20px rgba(255, 56, 56, 0.7), 0 0 40px rgba(255, 56, 56, 0.3);
  --glow-g:     0 0 20px rgba(56, 255, 92, 0.7), 0 0 40px rgba(56, 255, 92, 0.3);
  --glow-b:     0 0 20px rgba(56, 136, 255, 0.7), 0 0 40px rgba(56, 136, 255, 0.3);
  --depth-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3);
  --radius-lg:  20px;
  --radius-md:  14px;
  --radius-sm:  8px;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: 'Courier New', Consolas, 'Liberation Mono', monospace;
  font-size: clamp(13px, 2.2vh, 32px);
}

body {
  display: flex;
  justify-content: center;
  /* Subtle ambient light from center for projector depth */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,255,65,0.03) 0%, transparent 60%),
    var(--bg);
}

/* ── Terminal container ──────────────────────────────────── */
#terminal {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 6px 8px 4px;
  overflow: hidden;
  transition: transform 0.02s;
  background-image:
    linear-gradient(rgba(0,255,65,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,65,0.02) 1px, transparent 1px);
  background-size: 20px 20px;
  /* Subtle radial ambient light from center */
  background-color: var(--bg);
}

/* ── CRT scanlines ───────────────────────────────────────── */
#scanlines {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 200;
  will-change: transform;
  contain: strict;
}

#scanlines::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.015) 3px,
    rgba(0, 0, 0, 0.015) 6px
  );
}