/* Black + site-lime theme. Keep layout and HUD geometry identical across themes. */
html[data-site-theme="blackgreen"] {
  color-scheme: dark;
  --bg: #050706;
  --panel: #0b0e0c;
  --panel-2: #111512;
  --line: #303832;
  --text: #f0f4f0;
  --muted: #a0aaa2;
  --lime: #9af64b;
  --cyan: #a0aaa2;
  --amber: #9af64b;
  --header-hud-surface: #090c0a;
  --header-hud-surface-hover: #111811;
  --header-hud-rail: rgba(8, 11, 9, .92);
  --header-hud-edge: #344238;
  --header-hud-separator: rgba(88, 108, 91, .6);
  --header-hud-accent: #9af64b;
  --header-hud-secondary: #a0aaa2;
  --header-hud-muted: #8c978e;
  --header-hud-text: #f0f4f0;
  --header-hud-wash: rgba(154, 246, 75, .08);
  --header-hud-glow: rgba(154, 246, 75, .12);
  --header-hud-active-glow: rgba(154, 246, 75, .34);
  --site-surface-tint: #101711;
  --site-surface-edge: #39483b;
  --site-surface-edge-soft: rgba(84, 107, 87, .55);
  --site-surface-highlight: rgba(240, 248, 240, .06);
}

html[data-site-theme="blackgreen"] body {
  background: radial-gradient(ellipse at 50% -20%, #101b12 0, transparent 54%), #050706;
}
html[data-site-theme="blackgreen"] .topbar {
  border-color: var(--header-hud-edge) !important;
  background: linear-gradient(145deg, #0b100c, #080b09) !important;
  box-shadow: inset 0 1px rgba(240,248,240,.05), 0 12px 32px rgba(0,0,0,.3);
}
html[data-site-theme="blackgreen"] :is(.panel, .form-panel, .warmup-panel, .reaction-panel, .results-panel, .setup-aside, .flash-settings-card, .flash-setup-preview, .account-dialog) {
  border-color: var(--header-hud-edge) !important;
  background-color: var(--header-hud-surface) !important;
  background-image: linear-gradient(145deg, #101511, #080b09) !important;
}
html[data-site-theme="blackgreen"] :is(.tool-card, .game-card) {
  border-color: var(--header-hud-edge) !important;
  background: linear-gradient(145deg, #101711, #090c0a) !important;
}
html[data-site-theme="blackgreen"] :is(.tool-card:hover, .game-card:hover, .practice-drill-card:hover, .practice-drill-card:focus-visible) {
  border-color: var(--lime) !important;
  box-shadow: inset 0 0 0 1px rgba(154,246,75,.14), 0 12px 30px rgba(0,0,0,.3) !important;
}
html[data-site-theme="blackgreen"] .hero-visual {
  background: radial-gradient(ellipse at 58% 45%, #152719 0, #0b110c 44%, #050706 80%);
}
html[data-site-theme="blackgreen"] .visual-grid {
  background-image: linear-gradient(#9af64b20 1px, transparent 1px), linear-gradient(90deg, #9af64b20 1px, transparent 1px);
}
html[data-site-theme="blackgreen"] :is(.visual-ring, .ring-two) { border-color: rgba(154,246,75,.48); }
html[data-site-theme="blackgreen"] :is(.visual-crosshair i, .visual-crosshair b, .brand-mark span) { background: var(--lime); box-shadow: 0 0 12px rgba(154,246,75,.65); }
html[data-site-theme="blackgreen"] .brand-mark { border-color: var(--lime); }

/* Ember-only interface orange becomes the brand green; gameplay target art stays untouched. */
html[data-site-theme="blackgreen"] :is(.eyebrow, .flash-card-kicker, .flash-group-title > span:first-child, .flash-how-to h2, .flash-how-to-number, .flash-how-to-icon, .flash-how-to-note > span:first-child, .account-dialog-head .eyebrow, .random-crosshair-heading .eyebrow, .random-crosshair-mark, .browser-check-mark, .browser-check-heading .eyebrow, .browser-check-supported > span, .reaction-title-accent, .reaction-mode-heading .eyebrow, .home-flash-kicker, .hero-promo-kicker, .hero-explore-kicker, .community-card .eyebrow, .practice-drill-icon, .practice-drill-action, .tool-icon, .game-icon, .tool-card-meta.ready, .game-result, .memory-result, .text-action) {
  color: var(--lime) !important;
}
html[data-site-theme="blackgreen"] :is(.nav-link:hover, .back-link:hover, .account-open-button:hover, .footer-link:hover) { color: var(--lime) !important; }
html[data-site-theme="blackgreen"] .header-exercises .nav-link[data-page-link="warmup"],
html[data-site-theme="blackgreen"] .header-exercises .nav-link[data-page-link="warmup"]:hover,
html[data-site-theme="blackgreen"] .header-exercises .nav-link[data-page-link="warmup"][aria-current="page"] {
  border-color: var(--lime) !important; background: var(--lime) !important; color: #071006 !important;
}
html[data-site-theme="blackgreen"] :is(.header-exercises .nav-link[data-page-link="practice"], .header-exercises .nav-link[data-page-link="flashes"]) {
  border-color: var(--header-hud-edge) !important; background: var(--header-hud-surface) !important; color: var(--header-hud-text) !important;
}
html[data-site-theme="blackgreen"] :is(.header-exercises .nav-link[data-page-link="practice"]:hover, .header-exercises .nav-link[data-page-link="practice"][aria-current="page"], .header-exercises .nav-link[data-page-link="flashes"]:hover, .header-exercises .nav-link[data-page-link="flashes"][aria-current="page"]) {
  border-color: var(--lime) !important; color: var(--lime) !important;
}
html[data-site-theme="blackgreen"] :is(.flash-training-guide, .flash-metrics > div, .browser-version-list > span, .account-sync-consent, .input-wrap, .settings-disclosure) {
  border-color: #303832 !important; background-color: #101511 !important;
}
html[data-site-theme="blackgreen"] :is(.flash-preview-heading, .flash-group-title, .browser-check-heading h2, .random-crosshair-heading h1) { color: var(--header-hud-text) !important; }
html[data-site-theme="blackgreen"] :is(.flash-choice-grid button[aria-pressed="true"], .random-crosshair-theme-option[aria-pressed="true"], .practice-preview-toggle[aria-expanded="true"]) {
  border-color: var(--lime) !important; color: var(--lime) !important; background: #111b12 !important;
}
html[data-site-theme="blackgreen"] :is(input, select, textarea) { accent-color: var(--lime); }
html[data-site-theme="blackgreen"] :is(button, input, select, textarea):focus-visible { outline-color: var(--lime); }
html[data-site-theme="blackgreen"] .theme-swatch-blackgreen { background: linear-gradient(135deg, #9af64b 0 34%, #050706 34% 100%); }

/* Keep the marked header controls visually consistent with the dark/lime
   Practice and Flash Dodging buttons. These rules change colors only. */
html[data-site-theme="blackgreen"] .header-primary-links .nav-link {
  color: var(--lime) !important;
  background: var(--header-hud-surface) !important;
}
html[data-site-theme="blackgreen"] .header-primary-links .nav-link:hover,
html[data-site-theme="blackgreen"] .header-primary-links .nav-link:focus-visible {
  color: var(--lime) !important;
  background: var(--header-hud-surface-hover) !important;
}
html[data-site-theme="blackgreen"] :is(.header-utility .account-open-button, .header-utility .language-control) {
  border-color: var(--lime) !important;
  background: var(--header-hud-surface) !important;
  color: var(--lime) !important;
}
html[data-site-theme="blackgreen"] .header-utility .language-control select,
html[data-site-theme="blackgreen"] .header-utility .language-control select option {
  background-color: var(--header-hud-surface) !important;
  color: var(--lime) !important;
}
html[data-site-theme="blackgreen"] :is(.header-utility .account-open-button:hover, .header-utility .account-open-button:focus-visible, .header-utility .language-control:focus-within) {
  border-color: var(--lime) !important;
  background: var(--header-hud-surface-hover) !important;
  color: var(--lime) !important;
}
html[data-site-theme="blackgreen"] :is(
  .header-exercises .nav-link[data-page-link="practice"],
  .header-exercises .nav-link[data-page-link="flashes"],
  .header-exercises .nav-link[data-page-link="reaction"],
  .header-exercises .nav-link[data-page-link="reaction-drills"]
) {
  border-color: var(--lime) !important;
  background: var(--header-hud-surface) !important;
  color: var(--lime) !important;
}
html[data-site-theme="blackgreen"] :is(
  .header-exercises .nav-link[data-page-link="practice"]:hover,
  .header-exercises .nav-link[data-page-link="practice"][aria-current="page"],
  .header-exercises .nav-link[data-page-link="flashes"]:hover,
  .header-exercises .nav-link[data-page-link="flashes"][aria-current="page"],
  .header-exercises .nav-link[data-page-link="reaction"]:hover,
  .header-exercises .nav-link[data-page-link="reaction"][aria-current="page"],
  .header-exercises .nav-link[data-page-link="reaction-drills"]:hover,
  .header-exercises .nav-link[data-page-link="reaction-drills"][aria-current="page"]
) {
  border-color: var(--lime) !important;
  background: var(--header-hud-surface-hover) !important;
  color: var(--lime) !important;
  box-shadow: inset 0 0 0 1px var(--lime), 0 0 17px var(--header-hud-glow) !important;
}