/* ============================================================
   THEME SYSTEM — CSS Custom Properties
   ============================================================ */

/* DEFAULT: Terminal Dark */
:root {
  --bg: #000;
  --bg-alt: #0a0a0a;
  --bg-input: #111;
  --bg-card: #000;
  --bg-panel: #000;

  --text: #fff;
  --text-dim: #ccc;
  --text-muted: #888;
  --text-faint: #555;
  --text-ghost: #444;

  --border: #444;
  --border-dim: #333;
  --border-bright: #666;
  --border-focus: #fff;

  --accent: #fff;
  --accent-dim: #ccc;

  --hp-you: #fff;
  --hp-opp: #666;
  --hp-track-bg: #111;

  --dmg: #ff4444;
  --heal: #40c060;
  --force-pos: #40c060;
  --force-neg: #ff4444;

  --btn-bg: #000;
  --btn-border: #666;
  --btn-text: #fff;
  --btn-hover-border: #fff;
  --btn-primary-border: #fff;

  --stepper-bg: #111;
  --stepper-border: #555;
  --stepper-text: #ccc;
  --stepper-active-bg: #333;

  --card-border: #555;
  --card-bg: #000;
  --card-selected-border: #fff;

  --alloc-bottom-bg: #000;

  --spinner-border: #333;
  --spinner-landed: #fff;
  --spinner-glow: rgba(255,255,255,0.15);

  --fullscreen-bg: #000;

  --font: 'Courier New', monospace;
  --bg-image: none;
}

/* ============================================================
   CLASSIC: 2700chess.com inspired
   Light cream/tan background, black text, olive green header,
   dark green positives, dark red negatives
   ============================================================ */
body.theme-classic {
  --bg: #f0e6d0;
  --bg-alt: #e8dcc4;
  --bg-input: #fff;
  --bg-card: #faf6ee;
  --bg-panel: #f5efe2;

  --text: #1a1a1a;
  --text-dim: #333;
  --text-muted: #666;
  --text-faint: #999;
  --text-ghost: #bbb;

  --border: #c4b896;
  --border-dim: #d4caa8;
  --border-bright: #a09060;
  --border-focus: #5a6e28;

  --accent: #5a6e28;
  --accent-dim: #6b8030;

  --hp-you: #2e8b2e;
  --hp-opp: #b53030;
  --hp-track-bg: #e0d6c0;

  --dmg: #b22222;
  --heal: #2e6b2e;
  --force-pos: #2e6b2e;
  --force-neg: #b22222;

  --btn-bg: #f5efe2;
  --btn-border: #a09060;
  --btn-text: #1a1a1a;
  --btn-hover-border: #5a6e28;
  --btn-primary-border: #5a6e28;

  --stepper-bg: #faf6ee;
  --stepper-border: #c4b896;
  --stepper-text: #333;
  --stepper-active-bg: #e8dcc4;

  --card-border: #c4b896;
  --card-bg: #faf6ee;
  --card-selected-border: #5a6e28;

  --alloc-bottom-bg: #f0e6d0;

  --spinner-border: #c4b896;
  --spinner-landed: #5a6e28;
  --spinner-glow: rgba(90,110,40,0.2);

  --fullscreen-bg: #f0e6d0;

  --bg-image: none;
}

/* ============================================================
   WOOD: Light oak table with realistic wood grain texture
   ============================================================ */
body.theme-wood {
  --bg: #c4a06a;
  --bg-alt: #b8945e;
  --bg-input: #ddc9a0;
  --bg-card: #d4b888;
  --bg-panel: #cdb07a;

  --text: #2a1a08;
  --text-dim: #3a2810;
  --text-muted: #5c4020;
  --text-faint: #8a6e44;
  --text-ghost: #a08860;

  --border: #9a7a4a;
  --border-dim: #a88858;
  --border-bright: #7a5e30;
  --border-focus: #4a3018;

  --accent: #4a3018;
  --accent-dim: #5c3e20;

  --hp-you: #2e8b2e;
  --hp-opp: #b53030;
  --hp-track-bg: #b89860;

  --dmg: #8b1a1a;
  --heal: #2a5c2a;
  --force-pos: #2a5c2a;
  --force-neg: #8b1a1a;

  --btn-bg: #d4b888;
  --btn-border: #9a7a4a;
  --btn-text: #2a1a08;
  --btn-hover-border: #4a3018;
  --btn-primary-border: #4a3018;

  --stepper-bg: #ddc9a0;
  --stepper-border: #9a7a4a;
  --stepper-text: #2a1a08;
  --stepper-active-bg: #c4a06a;

  --card-border: #9a7a4a;
  --card-bg: #d4b888;
  --card-selected-border: #4a3018;

  --alloc-bottom-bg: #c4a06a;

  --spinner-border: #9a7a4a;
  --spinner-landed: #4a3018;
  --spinner-glow: rgba(74,48,24,0.25);

  --fullscreen-bg: #c4a06a;

  /* Realistic wood grain texture */
  --bg-image:
    repeating-linear-gradient(
      87deg,
      transparent 0px,
      transparent 2px,
      rgba(0,0,0,0.03) 2px,
      rgba(0,0,0,0.03) 4px
    ),
    repeating-linear-gradient(
      92deg,
      transparent 0px,
      transparent 8px,
      rgba(0,0,0,0.02) 8px,
      rgba(0,0,0,0.02) 9px
    ),
    repeating-linear-gradient(
      88deg,
      transparent 0px,
      transparent 30px,
      rgba(80,50,20,0.08) 30px,
      rgba(80,50,20,0.08) 32px,
      transparent 32px,
      transparent 50px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 120px,
      rgba(0,0,0,0.04) 120px,
      rgba(0,0,0,0.04) 122px
    ),
    linear-gradient(
      0deg,
      #c4a06a 0%, #caa870 15%, #c09e64 30%,
      #c8a66c 45%, #bfa068 60%, #c6a46a 75%,
      #c2a268 90%, #c4a06a 100%
    );
}

/* ============================================================
   THEME PICKER STYLES
   ============================================================ */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 16px 0;
}
.theme-option {
  border: 2px solid var(--border);
  padding: 12px 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.theme-option:hover {
  border-color: var(--border-focus);
  transform: scale(1.02);
}
.theme-option.selected {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--spinner-glow);
}
.theme-preview {
  width: 100%;
  height: 48px;
  margin-bottom: 8px;
  border: 1px solid rgba(128,128,128,0.3);
}
.theme-preview-dark {
  background: linear-gradient(135deg, #000 0%, #111 50%, #333 100%);
}
.theme-preview-classic {
  background: linear-gradient(135deg, #f0e6d0 0%, #e8dcc4 40%, #c4b896 70%, #5a6e28 100%);
}
.theme-preview-wood {
  background: linear-gradient(135deg, #ddc9a0 0%, #c4a06a 40%, #9a7a4a 70%, #4a3018 100%);
}
.theme-option .theme-label {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.theme-option.selected .theme-label {
  color: var(--accent);
}

/* ============================================================
   FORCE COLORING — applies in allocation phase
   Input values > 0 get colored by theme
   ============================================================ */
.card-input.has-value {
  color: var(--force-pos) !important;
  font-weight: bold;
}