/* ==========================================================================
   RETRO THEME & COLOR PALETTES
   Monospace typography, 35em line width, Phosphor palettes (Green, Orange, Gray)
   ========================================================================== */

:root {
  /* Default Green Phosphor Theme */
  --bg-color: #030603;
  --term-text: #33ff33;
  --term-text-bright: #66ff66;
  --term-text-dim: #1e8f1e;
  --term-text-dark: #0f4f0f;
  --term-border: #28aa28;
  --term-border-dim: #165b16;
  --term-bg-hover: rgba(51, 255, 51, 0.12);
  --term-bg-card: rgba(10, 25, 10, 0.85);
  --term-glow: 0 0 5px rgba(51, 255, 51, 0.45);
  --term-glow-strong: 0 0 10px rgba(102, 255, 102, 0.7);
  --term-font: 'Courier New', 'Consolas', 'Lucida Console', Monaco, monospace;
  --line-width: 35em;
  --line-height: 1.65;
  --font-size: 16px;
}

/* Orange / Amber CRT Theme */
body.theme-orange {
  --bg-color: #070400;
  --term-text: #ffb000;
  --term-text-bright: #ffd055;
  --term-text-dim: #b87b00;
  --term-text-dark: #664400;
  --term-border: #cc8c00;
  --term-border-dim: #774f00;
  --term-bg-hover: rgba(255, 176, 0, 0.12);
  --term-bg-card: rgba(25, 18, 5, 0.85);
  --term-glow: 0 0 5px rgba(255, 176, 0, 0.45);
  --term-glow-strong: 0 0 10px rgba(255, 208, 85, 0.7);
}

/* Gray / Paperwhite CRT Theme */
body.theme-gray {
  --bg-color: #050505;
  --term-text: #d8d8d8;
  --term-text-bright: #ffffff;
  --term-text-dim: #8c8c8c;
  --term-text-dark: #4c4c4c;
  --term-border: #999999;
  --term-border-dim: #555555;
  --term-bg-hover: rgba(220, 220, 220, 0.12);
  --term-bg-card: rgba(22, 22, 22, 0.85);
  --term-glow: 0 0 4px rgba(220, 220, 220, 0.35);
  --term-glow-strong: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Global Reset & Base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  background-color: var(--bg-color);
  color: var(--term-text);
  font-family: var(--term-font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  text-shadow: var(--term-glow);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Selection */
::selection {
  background: var(--term-text);
  color: var(--bg-color);
  text-shadow: none;
}

/* Scanline Effect (Optional Toggle) */
body.crt-effects::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.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
  z-index: 9999;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.85;
}

/* Subtle Screen Vignette */
body.crt-effects::after {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  box-shadow: inset 0 0 100px rgba(0,0,0,0.85);
  z-index: 9998;
  pointer-events: none;
}

/* Centered app column, 10em wider than the base line width. */
.terminal-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: calc(var(--line-width) + 10em);
  margin: 0 auto;
  padding: 0 1rem;
  position: relative;
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-color);
  border-left: 1px dashed var(--term-border-dim);
}
::-webkit-scrollbar-thumb {
  background: var(--term-border-dim);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--term-border);
}

/* Blinking Cursor */
.blinking-cursor {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  vertical-align: -0.15em;
  background-color: var(--term-text);
  animation: retro-blink 1s step-end infinite;
  box-shadow: var(--term-glow);
}

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