/* ============================================
   SETTERAI RETRO EDITION - CUSTOM STYLES
   Optimized for 486 DX2 processors and up
   ============================================ */

/* Light & Friendly Retro Color Scheme */
:root {
  --retro-bg: #fef6e4;  /* Warm cream background like old computers */
  --retro-terminal: #ffffff;  /* Clean white for containers */
  --retro-primary: #8b5cf6;  /* Fun purple */
  --retro-secondary: #8bd3dd;  /* Cheerful cyan */
  --retro-accent: #ffd803;  /* Happy yellow */
  --retro-success: #84d882;  /* Friendly green */
  --retro-error: #ff6b6b;  /* Soft red */
  --retro-text: #172c66;  /* Deep blue text for readability */
  --retro-text-light: #5f6c7b;  /* Lighter text */
  --retro-border: #172c66;  /* Dark borders for definition */
  --pixel-size: 4px;
}

/* Base Page Setup */
body.retro-page {
  background: var(--retro-bg);
  color: var(--retro-text);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  line-height: 2;
  padding: 20px;
  margin: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Subtle Scanline Effect for Light Theme */
body.retro-page::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    transparent 50%,
    rgba(255, 255, 255, 0.3) 50%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 9999;
  animation: scanline 8s linear infinite;
  opacity: 0.5;
}

@keyframes scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 10px; }
}

/* Terminal Flicker Effect */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 0.95; }
  94% { opacity: 1; }
  96% { opacity: 0.98; }
}

body.retro-page {
  animation: flicker 5s infinite;
}

/* ASCII Logo */
.ascii-logo {
  color: var(--retro-primary);
  white-space: pre;
  font-size: 6px;
  line-height: 1.2;
  margin: 20px auto;
  text-align: center;
  display: block;
  font-family: monospace;
  letter-spacing: 0;
}

/* Custom NES.css Overrides */
.nes-container.is-terminal {
  background-color: var(--retro-terminal);
  border-color: var(--retro-border);
  padding: 20px;
  margin: 20px auto;
  max-width: 900px;
  box-shadow: 4px 4px 0 rgba(23, 44, 102, 0.1);
}

.nes-container.is-terminal::before {
  color: var(--retro-text);
}

/* Headers with Pixel Borders */
h1.retro-title {
  color: var(--retro-primary);
  text-align: center;
  font-size: 16px;
  margin: 30px 0;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
  animation: pulse 2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}

h2.retro-subtitle {
  color: var(--retro-secondary);
  font-size: 12px;
  margin: 20px 0;
  text-align: center;
}

/* Custom Buttons */
.nes-btn.is-terminal {
  background-color: var(--retro-accent);
  color: var(--retro-text);
  border-color: var(--retro-border);
  position: relative;
  font-size: 10px;
  animation: none;
  transition: all 0.1s;
}

.nes-btn.is-terminal:hover {
  background-color: var(--retro-primary);
  color: var(--retro-terminal);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 rgba(23, 44, 102, 0.2);
}

.nes-btn.is-terminal:active {
  transform: translate(0, 0);
  box-shadow: none;
}

/* Phone Button Special */
.phone-button-retro {
  display: inline-block;
  margin: 30px auto;
  text-align: center;
  position: relative;
}

.phone-button-retro.loading::after {
  content: "...";
  animation: dots 1s steps(4, end) infinite;
}

@keyframes dots {
  0%, 20% { content: ""; }
  40% { content: "."; }
  60% { content: ".."; }
  80%, 100% { content: "..."; }
}

/* Phone Number Display */
.phone-display-retro {
  color: var(--retro-primary);
  font-size: 14px;
  padding: 20px;
  border: 4px solid var(--retro-primary);
  background: var(--retro-accent);
  display: inline-block;
  margin: 20px auto;
  position: relative;
  animation: blink-border 1s steps(2, start) infinite;
}

@keyframes blink-border {
  50% { border-color: transparent; }
}

/* Blinking Cursor */
.blink-cursor::after {
  content: "_";
  animation: blink 1s steps(2, start) infinite;
  color: var(--retro-primary);
}

/* Blink Text */
.blink-text {
  animation: color-pulse 1.5s ease-in-out infinite;
}

@keyframes color-pulse {
  0%, 100% { color: var(--retro-primary); }
  50% { color: var(--retro-accent); }
}

/* Phone Link */
.phone-link-retro {
  color: var(--retro-primary);
  font-weight: bold;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Stat Counters */
.stat-counter {
  color: var(--retro-primary);
  font-size: 24px;
  text-align: center;
  margin: 10px 0;
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

.stat-label {
  color: var(--retro-text-light);
  font-size: 10px;
  margin-top: 5px;
}

/* Terminal Text Effects */
.terminal-text {
  color: var(--retro-text);
  padding: 10px;
  margin: 10px 0;
  border-left: 4px solid var(--retro-secondary);
  background: rgba(139, 211, 221, 0.1);
}

.terminal-prompt::before {
  content: "> ";
  color: var(--retro-primary);
}

.terminal-output {
  color: var(--retro-text-light);
  padding-left: 20px;
}

/* Loading Animation */
.loading-bar {
  width: 300px;
  height: 30px;
  border: 4px solid var(--retro-border);
  background: var(--retro-terminal);
  margin: 20px auto;
  padding: 4px;
  position: relative;
}

.loading-progress {
  height: 100%;
  background: var(--retro-success);
  animation: load 2s steps(10, end) infinite;
}

@keyframes load {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* Pixel Icons */
.pixel-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
  vertical-align: middle;
  margin-right: 8px;
}

/* Error Messages */
.error-box {
  background: var(--retro-error);
  color: var(--retro-terminal);
  padding: 20px;
  border: 4px solid var(--retro-border);
  margin: 20px 0;
  text-align: center;
  animation: flash 0.5s steps(2, end) 3;
}

@keyframes flash {
  50% { background: var(--retro-terminal); }
}

/* Links */
a.retro-link {
  color: var(--retro-secondary);
  text-decoration: none;
  position: relative;
  transition: all 0.1s;
}

a.retro-link:hover {
  color: var(--retro-primary);
  text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.8);
}

/* Navigation */
.retro-nav {
  background: var(--retro-terminal);
  border: 4px solid var(--retro-border);
  padding: 15px;
  margin-bottom: 30px;
  text-align: center;
  box-shadow: 4px 4px 0 rgba(23, 44, 102, 0.1);
}

.retro-nav a {
  color: var(--retro-text);
  margin: 0 15px;
  text-decoration: none;
  display: inline-block;
  padding: 5px 10px;
  border: 2px solid transparent;
  transition: all 0.1s;
}

.retro-nav a:hover {
  border-color: var(--retro-primary);
  background: rgba(139, 92, 246, 0.1);
}

/* Footer */
.retro-footer {
  margin-top: 50px;
  padding: 20px;
  border-top: 4px solid var(--retro-border);
  text-align: center;
  color: var(--retro-text-light);
  font-size: 8px;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  body.retro-page {
    font-size: 8px;
    padding: 10px;
  }

  h1.retro-title {
    font-size: 12px;
  }

  .stat-counter {
    font-size: 18px;
  }

  .nes-container {
    padding: 15px;
  }

  .ascii-logo {
    font-size: 4px;
  }

  /* Make stats 2x2 grid on mobile */
  .stats-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Special Effects */
.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.05;
  z-index: 1;
}

/* FAQ Balloons */
.nes-balloon.from-left.retro-faq {
  max-width: 600px;
  margin: 20px auto;
  background: var(--retro-terminal);
  border-color: var(--retro-border);
}

/* Tables */
.nes-table.is-bordered.retro-table {
  background: var(--retro-terminal);
  color: var(--retro-text);
  margin: 20px auto;
}

.nes-table.is-bordered.retro-table th {
  background: var(--retro-secondary);
  color: var(--retro-terminal);
}

/* Progress Indicators */
.retro-progress-text {
  text-align: center;
  margin: 10px 0;
  color: var(--retro-accent);
}

/* Scroll to Top */
.scroll-top-retro {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--retro-terminal);
  border: 4px solid var(--retro-border);
  color: var(--retro-text);
  padding: 10px;
  cursor: pointer;
  display: none;
  z-index: 1000;
  box-shadow: 4px 4px 0 rgba(23, 44, 102, 0.1);
}

.scroll-top-retro:hover {
  background: var(--retro-primary);
  color: var(--retro-terminal);
}

.scroll-top-retro.visible {
  display: block;
}

/* Lists */
.retro-list {
  list-style: none;
  padding-left: 0;
}

.retro-list li::before {
  content: "-> ";
  color: var(--retro-secondary);
}

/* Form Styles */
.nes-field.is-inline.retro-field label {
  color: var(--retro-text);
}

.nes-input.retro-input {
  background: var(--retro-terminal);
  color: var(--retro-text);
  border-color: var(--retro-border);
}

.nes-input.retro-input:focus {
  border-color: var(--retro-primary);
  outline: none;
}