/* ============================================================================
   Lemonade Stand - Three-Mode Theme System (Retro Apple ][e, 8-Bit, Modern)
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Press+Start+2P&family=Share+Tech+Mono&family=VT323&display=swap');

:root {
  --bg-primary: #fefce8;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-alt: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent-primary: #eab308;
  --accent-hover: #ca8a04;
  --accent-fg: #0f172a;
  --border-color: #e2e8f0;
  --success-color: #16a34a;
  --danger-color: #dc2626;
  --warning-color: #d97706;
  --radius-card: 1rem;
  --radius-btn: 0.75rem;
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================================================
   1. RETRO MODE — Modernized Apple ][e Green Phosphor CRT
   Uses modernized terminal glyphs (VT323 / Share Tech Mono / IBM VGA 8x16)
   with increased stroke thickness, generous letter-spacing, and high legibility.
   (Does NOT use the cramped, low-res original 7x8 Apple IIe glyphs).
   ============================================================================ */
body.theme-retro {
  --bg-primary: #040b04;
  --bg-card: #061306;
  --bg-card-alt: #0a1f0a;
  --text-primary: #33ff33;
  --text-secondary: #27e327;
  --text-muted: #1c9e1c;
  --accent-primary: #33ff33;
  --accent-hover: #66ff66;
  --accent-fg: #040b04;
  --border-color: #33ff33;
  --success-color: #33ff33;
  --danger-color: #33ff33;
  --warning-color: #33ff33;
  --radius-card: 0px;
  --radius-btn: 0px;
  --font-main: 'VT323', 'Share Tech Mono', 'IBM VGA 8x16', 'Courier Prime', monospace;
  --font-display: 'VT323', 'Share Tech Mono', 'IBM VGA 8x16', 'Courier Prime', monospace;

  background-color: #040b04;
  color: #33ff33;
  font-family: var(--font-main);
  font-size: 1.3rem;
  line-height: 1.58;
  letter-spacing: 0.12em;
  font-weight: 400;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Subtle phosphor glow: preserves crisp pixel edges with authentic CRT luminescence */
  -webkit-text-stroke: 0px;
  text-shadow:
    0 0 1px rgba(51, 255, 51, 0.85),
    0 0 3px rgba(51, 255, 51, 0.35),
    0 0 5px rgba(51, 255, 51, 0.15);
}

/* Minimal animations in Retro Mode */
body.theme-retro *,
body.theme-retro *::before,
body.theme-retro *::after {
  transition: none !important;
  animation-duration: 0.01s !important;
}

/* CRT Scanlines & Vignette Overlay (tuned for maximum glyph legibility) */
body.theme-retro .crt-overlay {
  display: block;
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    linear-gradient(
      rgba(18, 16, 16, 0) 50%,
      rgba(0, 0, 0, 0.28) 50%
    ),
    radial-gradient(
      circle at center,
      transparent 70%,
      rgba(0, 15, 0, 0.45) 100%
    );
  background-size: 100% 4px, 100% 100%;
}

/* Headings with crisp legibility & subtle phosphor bloom */
body.theme-retro h1,
body.theme-retro h2,
body.theme-retro h3,
body.theme-retro .font-extrabold,
body.theme-retro .font-bold {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.35;
  -webkit-text-stroke: 0.15px currentColor;
  text-shadow:
    0 0 1.5px rgba(51, 255, 51, 0.9),
    0 0 4px rgba(51, 255, 51, 0.4),
    0 0 7px rgba(51, 255, 51, 0.2);
}

/* Card framing */
body.theme-retro .ls-card {
  background: #051205;
  border: 2px solid #33ff33;
  box-shadow: 0 0 14px rgba(51, 255, 51, 0.2), inset 0 0 12px rgba(51, 255, 51, 0.08);
  border-radius: 0;
  letter-spacing: 0.11em;
}

/* Primary Button */
body.theme-retro .ls-btn-primary {
  background: #33ff33;
  color: #040b04;
  border: 2px solid #33ff33;
  text-shadow: none;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.135em;
  font-size: 1.2rem;
  line-height: 1.5;
  -webkit-text-stroke: 0px;
}

body.theme-retro .ls-btn-primary:hover {
  background: #040b04;
  color: #33ff33;
  box-shadow: 0 0 12px rgba(51, 255, 51, 0.7);
  -webkit-text-stroke: 0.15px currentColor;
  text-shadow: 0 0 2px rgba(51, 255, 51, 0.8), 0 0 5px rgba(51, 255, 51, 0.3);
}

/* Secondary Button */
body.theme-retro .ls-btn-secondary {
  background: #040b04;
  color: #33ff33;
  border: 1.5px solid #33ff33;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 1.15rem;
  line-height: 1.45;
  -webkit-text-stroke: 0px;
  text-shadow: 0 0 1px rgba(51, 255, 51, 0.8), 0 0 3px rgba(51, 255, 51, 0.3);
}

body.theme-retro .ls-btn-secondary:hover {
  background: #0d2b0d;
}

/* Input Fields */
body.theme-retro .ls-input {
  background: #020802;
  color: #33ff33;
  border: 2px solid #33ff33;
  border-radius: 0;
  box-shadow: inset 0 0 6px rgba(51, 255, 51, 0.25);
  font-size: 1.25rem;
  letter-spacing: 0.125em;
  line-height: 1.5;
  -webkit-text-stroke: 0px;
  text-shadow: 0 0 1px rgba(51, 255, 51, 0.8);
}

body.theme-retro .ls-badge {
  border: 1.5px solid #33ff33;
  background: #082208;
  color: #33ff33;
  border-radius: 0;
  letter-spacing: 0.12em;
  font-size: 1.05rem;
  line-height: 1.4;
  -webkit-text-stroke: 0px;
  text-shadow: 0 0 1px rgba(51, 255, 51, 0.8), 0 0 3px rgba(51, 255, 51, 0.3);
}

body.theme-retro input[type="range"] {
  accent-color: #33ff33;
}

/* Scaled Typography for Modernized Terminal Glyph Legibility */
body.theme-retro .text-xs,
body.theme-retro .text-\[11px\],
body.theme-retro .text-\[10px\] {
  font-size: 1.08rem !important;
  line-height: 1.5 !important;
  letter-spacing: 0.11em;
}

body.theme-retro .text-sm {
  font-size: 1.2rem !important;
  line-height: 1.54 !important;
  letter-spacing: 0.115em;
}

body.theme-retro .text-base {
  font-size: 1.32rem !important;
  line-height: 1.58 !important;
  letter-spacing: 0.12em;
}

body.theme-retro .text-lg {
  font-size: 1.48rem !important;
  line-height: 1.45 !important;
  letter-spacing: 0.125em;
}

body.theme-retro .text-xl {
  font-size: 1.68rem !important;
  line-height: 1.4 !important;
  letter-spacing: 0.13em;
}

body.theme-retro .text-2xl {
  font-size: 2.05rem !important;
  line-height: 1.35 !important;
  letter-spacing: 0.135em;
}

body.theme-retro .text-3xl {
  font-size: 2.45rem !important;
  line-height: 1.3 !important;
  letter-spacing: 0.14em;
}

body.theme-retro table,
body.theme-retro th,
body.theme-retro td {
  letter-spacing: 0.115em;
  line-height: 1.5;
}

/* ASCII Art & Stand Banner Alignment Preservation */
body.theme-retro pre {
  font-family: var(--font-main);
  letter-spacing: 0.05em;
  line-height: 1.25;
}

/* ============================================================================
   2. 8-BIT MODE — Atari / NES / Genesis Pixel-Art Aesthetic
   ============================================================================ */
body.theme-8bit {
  --bg-primary: #1a1c2c;
  --bg-card: #262b44;
  --bg-card-alt: #181425;
  --text-primary: #f4f4f4;
  --text-secondary: #94b0c2;
  --text-muted: #566c86;
  --accent-primary: #ffcd75;
  --accent-hover: #ef7d57;
  --accent-fg: #1a1c2c;
  --border-color: #f4f4f4;
  --success-color: #38b764;
  --danger-color: #b13e53;
  --warning-color: #ef7d57;
  --radius-card: 0px;
  --radius-btn: 0px;
  --font-main: 'Press Start 2P', monospace;
  --font-display: 'Press Start 2P', monospace;

  background-color: #1a1c2c;
  background-image:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 16px 16px;
  color: #f4f4f4;
  font-family: var(--font-main);
  font-size: 0.78rem;
  line-height: 1.65;
  image-rendering: pixelated;
}

body.theme-8bit .crt-overlay {
  display: none;
}

body.theme-8bit .ls-card {
  background: #262b44;
  border: 4px solid #f4f4f4;
  box-shadow: 6px 6px 0px #0d0e17;
  border-radius: 0;
}

body.theme-8bit .ls-btn-primary {
  background: #ffcd75;
  color: #1a1c2c;
  border: 4px solid #0d0e17;
  box-shadow: inset -3px -3px 0px #d48e29, 4px 4px 0px #0d0e17;
  border-radius: 0;
  text-transform: uppercase;
}

body.theme-8bit .ls-btn-primary:hover {
  background: #ffe099;
  transform: translate(-1px, -1px);
  box-shadow: inset -3px -3px 0px #d48e29, 5px 5px 0px #0d0e17;
}

body.theme-8bit .ls-btn-primary:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0px #0d0e17;
}

body.theme-8bit .ls-btn-secondary {
  background: #333c57;
  color: #f4f4f4;
  border: 3px solid #f4f4f4;
  box-shadow: 4px 4px 0px #0d0e17;
  border-radius: 0;
}

body.theme-8bit .ls-btn-secondary:hover {
  background: #41a6f6;
  color: #1a1c2c;
}

body.theme-8bit .ls-input {
  background: #181425;
  color: #ffcd75;
  border: 4px solid #94b0c2;
  border-radius: 0;
}

body.theme-8bit .ls-badge {
  background: #181425;
  border: 2px solid #ffcd75;
  color: #ffcd75;
  border-radius: 0;
}

body.theme-8bit input[type="range"] {
  accent-color: #ffcd75;
}

/* ============================================================================
   3. MODERN MODE — Clean UI, Soft Gradients, Smooth Animations
   ============================================================================ */
body.theme-modern {
  --bg-primary: #fefce8;
  --bg-card: rgba(255, 255, 255, 0.92);
  --bg-card-alt: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --accent-primary: #f59e0b;
  --accent-hover: #d97706;
  --accent-fg: #ffffff;
  --border-color: #e2e8f0;
  --success-color: #16a34a;
  --danger-color: #dc2626;
  --warning-color: #ea580c;
  --radius-card: 1.25rem;
  --radius-btn: 0.85rem;
  --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  background: linear-gradient(135deg, #fef9c3 0%, #fffbeb 45%, #e0f2fe 100%);
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-main);
}

body.theme-modern .crt-overlay {
  display: none;
}

body.theme-modern .ls-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(251, 191, 36, 0.35);
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(245, 158, 11, 0.08);
  border-radius: var(--radius-card);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease;
}

body.theme-modern .ls-btn-primary {
  background: linear-gradient(135deg, #facc15 0%, #f59e0b 100%);
  color: #0f172a;
  border: 1px solid rgba(217, 119, 6, 0.3);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-btn);
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

body.theme-modern .ls-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, #fde047 0%, #f59e0b 100%);
}

body.theme-modern .ls-btn-secondary {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-btn);
  font-weight: 600;
  transition: all 0.18s ease;
}

body.theme-modern .ls-btn-secondary:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  transform: translateY(-1px);
}

body.theme-modern .ls-input {
  background: #ffffff;
  color: #0f172a;
  border: 2px solid #cbd5e1;
  border-radius: 0.75rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.theme-modern .ls-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
  outline: none;
}

body.theme-modern .ls-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 9999px;
}

body.theme-modern input[type="range"] {
  accent-color: #f59e0b;
}

/* Shared helper classes */
.ls-panel-muted {
  background-color: var(--bg-card-alt);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-btn);
}

body.theme-retro .ls-panel-muted {
  background-color: #030903;
  border: 1px dashed #33ff33;
}

body.theme-8bit .ls-panel-muted {
  background-color: #181425;
  border: 2px solid #566c86;
}

/* Smooth fade-in for Modern mode screens */
@keyframes modernFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.theme-modern .screen-view:not(.hidden) {
  animation: modernFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active 3-way theme button highlight */
.theme-toggle-btn.active {
  background-color: var(--accent-primary);
  color: var(--accent-fg);
  font-weight: 700;
}

/* Subtle "You" Indicator on Leaderboards */
.you-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0.95;
  color: #b45309;
}

body.theme-retro .you-indicator {
  color: #33ff33;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-shadow: 0 0 4px rgba(51, 255, 51, 0.6);
}

body.theme-8bit .you-indicator {
  color: #ffcd75;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
}

body.theme-modern .you-indicator {
  color: #d97706;
}