:root {
  --bg-primary: #40318D;
  --bg-secondary: #2B1F6E;
  --bg-editor: #1a1148;
  --text-primary: #7B71D5;
  --text-bright: #A8A0FF;
  --text-white: #FFFFFF;
  --border-color: #5A4FB0;
  --accent-cyan: #6CE6FF;
  --accent-yellow: #FFD866;
  --accent-green: #5AF78E;
  --accent-magenta: #FF6AC1;
  --accent-red: #FF5555;
  --btn-bg: #7B6C52;
  --btn-text: #F0E8D0;
  --scanline-opacity: 0.04;
}

.theme-pet {
  --bg-primary: #0a0a0a;
  --bg-secondary: #111111;
  --bg-editor: #050505;
  --text-primary: #33FF33;
  --text-bright: #66FF66;
  --text-white: #AAFFAA;
  --border-color: #1a5a1a;
  --accent-cyan: #33FF33;
  --accent-yellow: #88FF44;
  --accent-green: #33FF33;
  --accent-magenta: #55FF55;
  --accent-red: #FF3333;
  --btn-bg: #1a3a1a;
  --btn-text: #33FF33;
  --scanline-opacity: 0.06;
}

.theme-vic20 {
  --bg-primary: #B0B0B0;
  --bg-secondary: #C8C8C8;
  --bg-editor: #FFFFFF;
  --text-primary: #000080;
  --text-bright: #0000CC;
  --text-white: #000000;
  --border-color: #808080;
  --accent-cyan: #0088AA;
  --accent-yellow: #886600;
  --accent-green: #006600;
  --accent-magenta: #880088;
  --accent-red: #CC0000;
  --btn-bg: #606060;
  --btn-text: #FFFFFF;
  --scanline-opacity: 0.02;
}

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

body {
  font-family: 'VT323', monospace;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
}

/* CRT Scanline overlay */
.crt-overlay {
  pointer-events: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,var(--scanline-opacity)) 0px,
    rgba(0,0,0,var(--scanline-opacity)) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* CRT screen glow */
.crt-screen {
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.3),
    0 0 20px rgba(123,113,213,0.15);
  border-radius: 8px;
}

.theme-pet .crt-screen {
  box-shadow:
    inset 0 0 60px rgba(0,0,0,0.5),
    0 0 30px rgba(51,255,51,0.1);
}

/* Blinking cursor */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.blink-cursor {
  animation: blink 1s step-end infinite;
}

/* Screen flicker */
@keyframes flicker {
  0% { opacity: 1; }
  5% { opacity: 0.85; }
  10% { opacity: 1; }
  15% { opacity: 0.9; }
  20% { opacity: 1; }
  100% { opacity: 1; }
}
.flickering {
  animation: flicker 0.3s ease-in-out;
}

/* Typewriter effect */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

/* Pulse glow for download button */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(108,230,255,0.3); }
  50% { box-shadow: 0 0 20px rgba(108,230,255,0.6), 0 0 40px rgba(108,230,255,0.2); }
}
.pulse-btn {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-primary); }

/* Editor textarea */
.code-editor {
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.4;
  background: var(--bg-editor);
  color: var(--text-bright);
  border: 2px solid var(--border-color);
  caret-color: var(--text-bright);
  resize: none;
  outline: none;
  tab-size: 4;
}
.code-editor::placeholder {
  color: var(--text-primary);
  opacity: 0.4;
}

/* Hex dump */
.hex-dump {
  font-family: 'VT323', monospace;
  font-size: 16px;
  line-height: 1.5;
  background: var(--bg-editor);
  border: 2px solid var(--border-color);
}

/* Retro button style */
.retro-btn {
  font-family: 'Press Start 2P', cursive;
  font-size: 10px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 2px outset #998877;
  padding: 8px 16px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.1s;
}
.retro-btn:hover {
  background: #968060;
  border-style: inset;
}
.retro-btn:active {
  transform: translateY(1px);
}
.retro-btn-primary {
  background: #4A3A8A;
  border-color: #7B71D5;
  color: var(--accent-cyan);
}
.retro-btn-primary:hover {
  background: #5A4A9A;
}

.theme-pet .retro-btn {
  background: #1a3a1a;
  color: #33FF33;
  border-color: #33AA33;
}
.theme-pet .retro-btn:hover { background: #2a5a2a; }
.theme-pet .retro-btn-primary {
  background: #0a4a0a;
  border-color: #33FF33;
  color: #66FF66;
}

/* Select dropdown retro style */
.retro-select {
  font-family: 'VT323', monospace;
  font-size: 18px;
  background: var(--bg-editor);
  color: var(--text-bright);
  border: 2px solid var(--border-color);
  padding: 6px 12px;
  outline: none;
  cursor: pointer;
}
.retro-select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Status bar */
.status-bar {
  font-family: 'VT323', monospace;
  font-size: 18px;
  background: var(--bg-editor);
  border-top: 2px solid var(--border-color);
  color: var(--text-primary);
  padding: 6px 12px;
}

/* Token reference panel */
.token-panel {
  font-family: 'VT323', monospace;
  font-size: 16px;
  background: var(--bg-editor);
  border: 2px solid var(--border-color);
}

/* Hex color coding */
.hex-addr { color: var(--accent-yellow); }
.hex-link { color: #888888; }
.hex-token { color: var(--accent-cyan); }
.hex-string { color: var(--accent-green); }
.hex-linenum { color: var(--accent-magenta); }
.hex-zero { color: #664444; }
.hex-normal { color: var(--text-primary); }

/* Info tooltip */
.tooltip-content {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s;
  position: absolute;
  z-index: 100;
  background: var(--bg-secondary);
  border: 2px solid var(--border-color);
  padding: 12px;
  border-radius: 4px;
  max-width: 350px;
  font-size: 14px;
  line-height: 1.4;
}
.tooltip-trigger:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

/* Footer */
.retro-footer {
  font-family: 'VT323', monospace;
  background: var(--bg-secondary);
  border-top: 2px solid var(--border-color);
  padding: 16px;
  text-align: center;
  color: var(--text-primary);
}
.retro-footer a {
  color: var(--accent-cyan);
  text-decoration: none;
}
.retro-footer a:hover {
  text-decoration: underline;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .retro-btn { font-size: 8px; padding: 6px 10px; }
  .code-editor { font-size: 16px; }
  .hex-dump { font-size: 14px; }
}