/*
  theme-terminal.css — phosphor-green-on-black CRT terminal theme.
  Everything, display and body text alike, renders in the same
  monospace face already loaded for the app's --font-mono (JetBrains
  Mono) — no new font dependency for this theme at all.

  Scoped under `body[data-theme="terminal"]`, set at runtime by
  js/theme_switcher.js. 100% additive.

  Like theme-docket.css, this theme changes the accent hue entirely
  (green, not orange), so every orange-tinted literal in style.css
  gets its own green-tinted override below. Unlike Docket, this
  theme's background is ALSO near-black like the original — so the
  white-tint-on-dark literals (badges, progress bars, toast) get
  green-tinted equivalents rather than needing a light/dark flip, and
  the difficulty-badge triple is left as style.css's own original
  (already dark-tuned, hue-independent) rather than duplicated.
*/

body[data-theme="terminal"] {
  /* ---- Brand — phosphor green ---- */
  --accent:      #39ff14;
  --accent-dark: #22c55e;
  --accent-soft: #86efac;
  --success:     #39ff14;
  --danger:      #ff4d4d;
  --warning:     #f2c218;

  --primary: var(--accent);
  --primary-dark: var(--accent-dark);

  --gradient-brand: linear-gradient(135deg, #22c55e 0%, #39ff14 100%);

  /* ---- Surfaces — near-black with a faint green cast ---- */
  --bg:        #080a08;
  --bg-alt:    #0b0f0b;
  --bg-card:   #0d130d;
  --bg-card2:  #121a12;
  --surface:   rgba(57,255,20,.05);
  --surface-hover: rgba(57,255,20,.09);
  --border:    rgba(57,255,20,.25);
  --border-strong: rgba(57,255,20,.45);

  /* ---- Text ---- */
  --text:      #c8ffd4;
  --text-muted: rgba(200,255,212,.6);
  --text-dim:  rgba(200,255,212,.4);

  /* ---- Shape — blocky ---- */
  --radius:    4px;
  --radius-sm: 2px;
  --radius-lg: 6px;
  --shadow:    0 0 24px rgba(57,255,20,.12), 0 10px 30px rgba(0,0,0,.6);

  --font-display: 'JetBrains Mono', ui-monospace, monospace;
  --font-body: 'JetBrains Mono', ui-monospace, monospace;
}

body[data-theme="terminal"] h1,
body[data-theme="terminal"] h2,
body[data-theme="terminal"] h3,
body[data-theme="terminal"] h4 {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .02em;
}

/* ---- Every hardcoded 999px pill in style.css, blocked out ---- */
body[data-theme="terminal"] .btn,
body[data-theme="terminal"] .subtab-row,
body[data-theme="terminal"] .subtab,
body[data-theme="terminal"] .answer-chip,
body[data-theme="terminal"] .diff-badge,
body[data-theme="terminal"] .marks-badge,
body[data-theme="terminal"] .topic-chip,
body[data-theme="terminal"] .quiz-timer,
body[data-theme="terminal"] .level-tabs,
body[data-theme="terminal"] .level-tab-indicator,
body[data-theme="terminal"] .level-tab {
  border-radius: var(--radius-sm);
}
/* The settings dock's icon buttons also carry the plain .btn class,
   but must stay perfect circles regardless of this theme's blocky
   identity — same specificity as the .btn rule above, so source
   order (this comes after) wins. */
body[data-theme="terminal"] .dock-icon-btn {
  border-radius: 50%;
}

/* ---- Header / nav glass ---- */
body[data-theme="terminal"] header {
  background: rgba(8,10,8,.78);
}

/* ---- Primary button — glowing green, dark text (same convention as
   the original theme's bright-accent-bg/near-black-text pairing). ---- */
body[data-theme="terminal"] .btn-primary {
  background: var(--accent);
  color: #051005;
  box-shadow: 0 0 16px rgba(57,255,20,.45);
}
body[data-theme="terminal"] .btn-primary:hover {
  background: var(--accent);
  color: #051005;
  filter: brightness(1.08);
  box-shadow: 0 0 26px rgba(57,255,20,.65);
}
body[data-theme="terminal"] .btn-secondary:hover {
  border-color: var(--accent-soft);
}

/* ---- Hero: neutralize the three.js shader with a green scanline
   wash instead of the original orange one. ---- */
body[data-theme="terminal"] #hero-canvas {
  display: none;
}
body[data-theme="terminal"] .hero-canvas-wrap {
  background:
    radial-gradient(900px 500px at 78% 20%, rgba(57,255,20,.14), transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(57,255,20,.07), transparent 55%),
    var(--bg);
}
body[data-theme="terminal"] .hero-grain {
  background-image:
    linear-gradient(rgba(57,255,20,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,.06) 1px, transparent 1px);
}
body[data-theme="terminal"] .hero-heading em {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 14px rgba(57,255,20,.55);
}

/* ---- Custom cursor hover ring ---- */
body[data-theme="terminal"] .custom-cursor-ring.cursor-hover {
  background: rgba(57,255,20,.12);
}

/* ---- Hero stats panel + level-tab indicator ---- */
body[data-theme="terminal"] .hero-stats-panel {
  background: rgba(8,10,8,.55);
}
body[data-theme="terminal"] .level-tab-indicator {
  box-shadow: 0 0 16px rgba(57,255,20,.45);
}

/* ---- Badges/chips/progress bars/toast — green-tinted, not white ---- */
body[data-theme="terminal"] .topic-progress-bar,
body[data-theme="terminal"] .quiz-progress-bar,
body[data-theme="terminal"] .mini-bar-track {
  background: rgba(57,255,20,.08);
}
body[data-theme="terminal"] .score-circle-bg {
  stroke: rgba(57,255,20,.08);
}
body[data-theme="terminal"] .topic-progress-table th {
  background: rgba(57,255,20,.03);
}
body[data-theme="terminal"] .topic-progress-table tr:hover td {
  background: rgba(57,255,20,.04);
}
body[data-theme="terminal"] .answer-chip {
  background: rgba(57,255,20,.06);
}
body[data-theme="terminal"] .answer-chip-remove {
  background: rgba(57,255,20,.1);
}
body[data-theme="terminal"] .format-help-panel code {
  background: rgba(57,255,20,.08);
}
body[data-theme="terminal"] .topic-chip {
  background: rgba(57,255,20,.07);
}
body[data-theme="terminal"] .ai-points {
  border-top-color: rgba(57,255,20,.12);
}
body[data-theme="terminal"] .toast {
  background: rgba(8,14,8,.92);
  border-color: rgba(57,255,20,.3);
}

/* ---- Accent-tinted glows/focus-rings — green, not orange ---- */
body[data-theme="terminal"] .marks-badge,
body[data-theme="terminal"] .option-btn:hover:not(:disabled),
body[data-theme="terminal"] .setup-option:hover,
body[data-theme="terminal"] .setup-option.selected,
body[data-theme="terminal"] .symbol-btn:hover,
body[data-theme="terminal"] .explanation-box.feedback-reveal {
  background: rgba(57,255,20,.12);
}
body[data-theme="terminal"] .quiz-timer {
  border-color: rgba(57,255,20,.35);
}
body[data-theme="terminal"] .explanation-box {
  background: rgba(57,255,20,.07);
  border-color: rgba(57,255,20,.3);
}
body[data-theme="terminal"] .explanation-box.feedback-reveal {
  border-color: rgba(57,255,20,.4);
}
body[data-theme="terminal"] .answer-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(57,255,20,.2);
}
body[data-theme="terminal"] .quiz-progress-fill {
  box-shadow: 0 0 12px rgba(57,255,20,.5);
}

/* Difficulty badges are deliberately left as style.css's own original
   dark-tuned triple — already hue-independent and correct on a
   near-black background, so duplicating it here would add nothing. */