/* 8bit.css — sitewide 8-bit mode styles */
/* Applied via html.eightbit class set before body renders to prevent flash */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ── Base ── */
html.eightbit body {
  background: #000 !important;
  font-family: 'Press Start 2P', monospace !important;
  image-rendering: pixelated;
}
html.eightbit body::before { display: none !important; }

/* ── Nav ── */
html.eightbit nav {
  background: #000 !important;
  border-bottom: 2px solid #00ff41 !important;
  backdrop-filter: none !important;
}
html.eightbit .nav-logo {
  color: #00ff41 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  letter-spacing: 1px !important;
}
html.eightbit nav a,
html.eightbit .nav-links a,
html.eightbit nav a.back {
  color: #00cc33 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
}
html.eightbit nav a:hover { color: #00ff41 !important; }

/* ── 8-bit toggle button ── */
html.eightbit .eightbit-toggle {
  border-color: #00ff41 !important;
  color: #00ff41 !important;
  background: rgba(0,255,65,0.08) !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  border-radius: 0 !important;
}

/* ── Typography ── */
html.eightbit h1 {
  font-family: 'Press Start 2P', monospace !important;
  color: #00ff41 !important;
  font-size: clamp(1rem, 2.5vw, 1.6rem) !important;
  line-height: 1.8 !important;
}
html.eightbit h1 em { color: #00ff41 !important; font-style: normal !important; }
html.eightbit h2 {
  font-family: 'Press Start 2P', monospace !important;
  color: #00ff41 !important;
  font-size: clamp(0.8rem, 1.5vw, 1.1rem) !important;
}
html.eightbit h3 {
  font-family: 'Press Start 2P', monospace !important;
  color: #00ff41 !important;
  font-size: 8px !important;
}
html.eightbit p, html.eightbit label, html.eightbit span {
  font-family: 'Press Start 2P', monospace !important;
  color: #00cc33 !important;
  line-height: 1.9 !important;
}
html.eightbit a { color: #00ff41 !important; }

/* ── Hero (index.html) ── */
html.eightbit .hero-label {
  color: #00ff41 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
}
html.eightbit .hero-sub {
  color: #00cc33 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  line-height: 2 !important;
}

/* ── Signup box (index.html) ── */
html.eightbit .signup-box {
  background: #000 !important;
  border: 2px solid #00ff41 !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 #003300 !important;
}
html.eightbit .form-row input[type="email"] {
  background: #000 !important;
  border: 2px solid #00cc33 !important;
  border-radius: 0 !important;
  color: #00ff41 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
}
html.eightbit .form-row input::placeholder { color: #005518 !important; }
html.eightbit .form-note { color: #005518 !important; font-size: 7px !important; }

/* ── Buttons ── */
html.eightbit .btn-primary {
  background: #00ff41 !important;
  color: #000 !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  box-shadow: 3px 3px 0 #005518 !important;
  letter-spacing: 0 !important;
}
html.eightbit .btn-primary:hover {
  box-shadow: 1px 1px 0 #005518 !important;
  transform: translate(2px,2px);
  opacity: 1 !important;
}
html.eightbit .btn-outline,
html.eightbit .btn-save {
  background: #000 !important;
  border: 2px solid #00ff41 !important;
  border-radius: 0 !important;
  color: #00ff41 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  box-shadow: 3px 3px 0 #005518 !important;
}
html.eightbit .btn-save { background: #00ff41 !important; color: #000 !important; }

/* ── Cards & sections ── */
html.eightbit .card,
html.eightbit .pref-section,
html.eightbit .signup-box,
html.eightbit .info-card {
  background: #000 !important;
  border: 2px solid #00ff41 !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 #003300 !important;
}
html.eightbit .danger-zone {
  border-color: #ff0040 !important;
  box-shadow: 4px 4px 0 #330010 !important;
}
html.eightbit .danger-zone h3 { color: #ff0040 !important; }
html.eightbit .btn-danger {
  border-color: #ff0040 !important;
  color: #ff0040 !important;
  border-radius: 0 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
}

/* ── Topic cards (index.html) ── */
html.eightbit .topic-card {
  background: #000 !important;
  border: 2px solid #003300 !important;
  border-radius: 0 !important;
}
html.eightbit .topic-card:hover { border-color: #00ff41 !important; }
html.eightbit .topic-card .name { color: #00ff41 !important; font-size: 9px !important; }
html.eightbit .topic-card .type-badge { color: #005518 !important; }
html.eightbit .topic-card .type-badge.gems { color: #00cc33 !important; }

/* ── Theme cards (preferences.html) ── */
html.eightbit .theme-option { border-radius: 0 !important; }
html.eightbit .theme-option.selected {
  border-color: #00ff41 !important;
  box-shadow: 3px 3px 0 #005518 !important;
}

/* ── Section labels ── */
html.eightbit .section-label,
html.eightbit .card-title {
  color: #005518 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
}

/* ── Dividers ── */
html.eightbit hr.divider,
html.eightbit .divider { border-color: #003300 !important; }

/* ── Success state (index.html) ── */
html.eightbit .success-state .check { color: #00ff41 !important; }
html.eightbit .success-state h3 {
  font-family: 'Press Start 2P', monospace !important;
  color: #00ff41 !important;
  font-size: 12px !important;
}

/* ── Consent checkbox ── */
html.eightbit input[type="checkbox"] { accent-color: #00ff41 !important; }

/* ── Status badge ── */
html.eightbit .badge.active {
  background: rgba(0,255,65,0.1) !important;
  color: #00ff41 !important;
  border: 1px solid #00ff41 !important;
  border-radius: 0 !important;
}
html.eightbit .badge.paused {
  background: rgba(255,0,64,0.1) !important;
  border-radius: 0 !important;
}

/* ── How it works steps ── */
html.eightbit .step-num { color: #00ff41 !important; font-size: 8px !important; }
html.eightbit .step h3 { color: #00ff41 !important; font-size: 9px !important; }

/* ── Theme preview cards on landing page ── */
html.eightbit .theme-preview { border-radius: 0 !important; border: 2px solid #003300 !important; }
html.eightbit .theme-preview:hover { border-color: #00ff41 !important; }

/* ── Welcome banner ── */
html.eightbit .welcome-banner {
  border-color: #00ff41 !important;
  background: rgba(0,255,65,0.04) !important;
  border-radius: 0 !important;
}

/* ── Footer ── */
html.eightbit footer {
  border-top: 2px solid #003300 !important;
  background: #000 !important;
}
html.eightbit .footer-links a { color: #005518 !important; }
html.eightbit .footer-links a:hover { color: #00ff41 !important; }

/* ── Privacy page ── */
html.eightbit .pp-label { color: #00ff41 !important; }
html.eightbit .updated { color: #005518 !important; }
html.eightbit .rights-grid .right-item {
  background: #000 !important;
  border: 2px solid #003300 !important;
  border-radius: 0 !important;
}
html.eightbit .right-item .rt { color: #00ff41 !important; }

/* ── Scanline overlay effect ── */
html.eightbit body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.08) 2px,
    rgba(0,0,0,0.08) 4px
  );
  pointer-events: none;
  z-index: 9999;
}