:root {
  --cga-black: #0a0a0a;
  --cga-blue: #0000AA;
  --cga-green: #00AA00;
  --cga-cyan: #00AAAA;
  --cga-red: #AA0000;
  --cga-magenta: #AA00AA;
  --cga-brown: #AA5500;
  --cga-light-gray: #AAAAAA;
  --cga-dark-gray: #555555;
  --cga-bright-blue: #5555FF;
  --cga-bright-green: #55FF55;
  --cga-bright-cyan: #55FFFF;
  --cga-bright-red: #FF5555;
  --cga-bright-magenta: #FF55FF;
  --cga-yellow: #FFFF55;
  --cga-white: #FFFFFF;
  --bezel-light: #C0C0C0;
  --bezel-dark: #808080;
  --bezel-bg: #B0A890;
  --phosphor-green: #33FF33;
  --phosphor-amber: #FFB000;
}

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

body {
  background: #0C0C14;
  color: var(--cga-bright-green);
  font-family: 'IBM Plex Mono', monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

.press-start { font-family: 'Press Start 2P', cursive; }

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

.phosphor-glow {
  text-shadow: 0 0 4px var(--phosphor-green), 0 0 8px rgba(51, 255, 51, 0.3);
}

.amber-glow {
  text-shadow: 0 0 4px var(--phosphor-amber), 0 0 8px rgba(255, 176, 0, 0.3);
}

.bevel-outset {
  border: 2px solid;
  border-color: var(--bezel-light) var(--bezel-dark) var(--bezel-dark) var(--bezel-light);
}

.bevel-inset {
  border: 2px solid;
  border-color: var(--bezel-dark) var(--bezel-light) var(--bezel-light) var(--bezel-dark);
}

.register-flash {
  animation: regFlash 0.4s ease-out;
}

@keyframes regFlash {
  0% { background-color: rgba(255, 255, 85, 0.4); }
  100% { background-color: transparent; }
}

@keyframes crtFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.985; }
  75% { opacity: 0.995; }
}

.crt-flicker {
  animation: crtFlicker 0.1s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.pulse-anim {
  animation: pulse 1s ease-in-out infinite;
}

@keyframes ledBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.led-blink {
  animation: ledBlink 0.5s ease-in-out 3;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1a1a2e; }
::-webkit-scrollbar-thumb { background: #555; border: 1px solid #888; }
::-webkit-scrollbar-thumb:hover { background: #777; }
::-webkit-scrollbar-corner { background: #1a1a2e; }

canvas#cga-display {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.tab-active {
  background: #1a1a2e !important;
  border-bottom-color: transparent !important;
  color: var(--cga-bright-cyan) !important;
}

input[type="range"] {
  -webkit-appearance: none;
  background: #333;
  height: 6px;
  border-radius: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--bezel-light);
  border: 1px solid var(--bezel-dark);
  cursor: pointer;
}

.opcode-cell {
  font-size: 9px;
  line-height: 1.1;
  padding: 2px;
  border: 1px solid #222;
  cursor: pointer;
  transition: background 0.15s;
  min-width: 60px;
  text-align: center;
}
.opcode-cell:hover {
  filter: brightness(1.5);
}