:root {
  --crt-green: #33ff33;
  --crt-green-dim: #1a8c1a;
  --crt-amber: #ffaa00;
  --crt-amber-dim: #8c5e00;
  --atari-orange: #e87400;
  --atari-red: #cc3300;
  --bg-dark: #0a0a0a;
  --bg-panel: #111111;
  --bg-editor: #0d1a0d;
  --wood-light: #8B6914;
  --wood-dark: #5C4033;
  --wood-accent: #A0522D;
}

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

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

.font-pixel { font-family: 'Press Start 2P', cursive; }
.font-vt { font-family: 'VT323', monospace; }
.font-code { font-family: 'Fira Code', monospace; }

/* Wood grain header */
.wood-grain {
  background:
    repeating-linear-gradient(
      87deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.08) 2px,
      rgba(0,0,0,0.08) 4px
    ),
    repeating-linear-gradient(
      93deg,
      transparent,
      transparent 3px,
      rgba(255,255,255,0.04) 3px,
      rgba(255,255,255,0.04) 5px
    ),
    linear-gradient(180deg, #8B6914 0%, #6B4F12 30%, #5C4033 60%, #4A3428 100%);
}

/* Scanline overlay */
.scanlines {
  position: relative;
}
.scanlines::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 1px,
    rgba(0, 0, 0, 0.15) 1px,
    rgba(0, 0, 0, 0.15) 2px
  );
  pointer-events: none;
  z-index: 10;
}

/* CRT glow effect on text */
.crt-text-green {
  color: var(--crt-green);
  text-shadow: 0 0 5px rgba(51, 255, 51, 0.5), 0 0 10px rgba(51, 255, 51, 0.2);
}
.crt-text-amber {
  color: var(--crt-amber);
  text-shadow: 0 0 5px rgba(255, 170, 0, 0.5), 0 0 10px rgba(255, 170, 0, 0.2);
}

/* Editor area styling */
.editor-container {
  background: var(--bg-editor);
  border: 1px solid #1a3a1a;
  border-radius: 4px;
  position: relative;
}

.theme-amber .editor-container {
  background: #1a150a;
  border-color: #3a2a1a;
}

.theme-modern .editor-container {
  background: #1e1e2e;
  border-color: #313244;
}

/* Editor textarea */
.editor-textarea {
  background: transparent;
  color: transparent;
  caret-color: var(--crt-green);
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  outline: none;
  border: none;
  white-space: pre;
  overflow-wrap: normal;
  tab-size: 4;
}

.theme-amber .editor-textarea {
  caret-color: var(--crt-amber);
}
.theme-modern .editor-textarea {
  caret-color: #cdd6f4;
}

/* Syntax highlighted overlay */
.syntax-overlay {
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre;
  overflow-wrap: normal;
  pointer-events: none;
  color: var(--crt-green);
  text-shadow: 0 0 3px rgba(51, 255, 51, 0.3);
}

.theme-amber .syntax-overlay {
  color: var(--crt-amber);
  text-shadow: 0 0 3px rgba(255, 170, 0, 0.3);
}

.theme-modern .syntax-overlay {
  color: #cdd6f4;
  text-shadow: none;
}

/* Syntax colors */
.syn-opcode { color: #00ffff; font-weight: 600; }
.syn-tia { color: #ffd700; }
.syn-riot { color: #ff8c00; }
.syn-comment { color: #4a6a4a; font-style: italic; }
.syn-hex { color: #ff66ff; }
.syn-directive { color: #ff69b4; }
.syn-label { color: #88cc88; }
.syn-number { color: #ff66ff; }
.syn-string { color: #ff9966; }

.theme-amber .syn-comment { color: #6a5a3a; }
.theme-amber .syn-label { color: #ccaa66; }

.theme-modern .syn-opcode { color: #89b4fa; font-weight: 600; }
.theme-modern .syn-tia { color: #f9e2af; }
.theme-modern .syn-riot { color: #fab387; }
.theme-modern .syn-comment { color: #6c7086; }
.theme-modern .syn-hex { color: #cba6f7; }
.theme-modern .syn-directive { color: #f38ba8; }
.theme-modern .syn-label { color: #a6e3a1; }

/* Line numbers */
.line-numbers {
  color: #2a5a2a;
  font-family: 'Fira Code', monospace;
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
  user-select: none;
  padding-right: 10px;
  min-width: 40px;
}
.theme-amber .line-numbers { color: #5a4a2a; }
.theme-modern .line-numbers { color: #45475a; }

/* Retro button */
.retro-btn {
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  padding: 8px 16px;
  border: 3px solid;
  border-color: #666 #222 #222 #666;
  background: #333;
  color: var(--crt-green);
  cursor: pointer;
  text-transform: uppercase;
  transition: all 0.1s;
  white-space: nowrap;
}
.retro-btn:hover {
  background: #444;
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.3);
}
.retro-btn:active {
  border-color: #222 #666 #666 #222;
  transform: translateY(1px);
}
.retro-btn-primary {
  background: #1a4a1a;
  border-color: #33ff33 #0a2a0a #0a2a0a #33ff33;
}
.retro-btn-primary:hover {
  background: #2a5a2a;
  box-shadow: 0 0 15px rgba(51, 255, 51, 0.5);
}
.retro-btn-danger {
  color: #ff4444;
  border-color: #ff4444 #880000 #880000 #ff4444;
}
.retro-btn-orange {
  color: var(--atari-orange);
  border-color: var(--atari-orange) #743a00 #743a00 var(--atari-orange);
}

/* Tab styling */
.ref-tab {
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  padding: 6px 10px;
  background: #1a1a1a;
  color: #666;
  border: 2px solid #333;
  border-bottom: none;
  cursor: pointer;
  transition: all 0.15s;
}
.ref-tab:hover { color: #999; }
.ref-tab.active {
  background: var(--bg-panel);
  color: var(--crt-green);
  border-color: var(--crt-green);
}

/* Output panel */
.hex-dump {
  font-family: 'Fira Code', monospace;
  font-size: 12px;
  color: var(--crt-green);
  line-height: 1.5;
}

/* Autocomplete dropdown */
.autocomplete-dropdown {
  position: absolute;
  background: #1a2a1a;
  border: 1px solid var(--crt-green);
  border-radius: 2px;
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 0 10px rgba(51, 255, 51, 0.2);
}
.autocomplete-item {
  padding: 4px 10px;
  cursor: pointer;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  color: var(--crt-green);
}
.autocomplete-item:hover, .autocomplete-item.selected {
  background: #2a4a2a;
}

/* Memory map */
.mem-segment {
  transition: all 0.2s;
}
.mem-segment:hover {
  filter: brightness(1.3);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }

/* Animation for pitfall easter egg */
@keyframes swingAcross {
  0% { transform: translateX(-100px) rotate(-20deg); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translateX(50vw) rotate(20deg); }
  90% { opacity: 1; }
  100% { transform: translateX(calc(100vw + 100px)) rotate(-20deg); opacity: 0; }
}
.pitfall-harry {
  position: fixed;
  top: 30%;
  z-index: 9999;
  animation: swingAcross 3s ease-in-out forwards;
  pointer-events: none;
  image-rendering: pixelated;
}

/* Joystick animation */
@keyframes joystickWiggle {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.joystick-anim {
  animation: joystickWiggle 1.5s ease-in-out infinite;
  display: inline-block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .retro-btn {
    font-size: 8px;
    padding: 6px 10px;
  }
  .ref-tab {
    font-size: 7px;
    padding: 5px 8px;
  }
}

/* Keyboard shortcut overlay */
.shortcut-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Error line highlight */
.error-line {
  background: rgba(255, 0, 0, 0.1);
  border-left: 3px solid #ff4444;
}