/* Vandal Red: black is dominant; metallic charcoal frames the interface. */
html[data-site-theme="vandal"] {
  color-scheme: dark;
  --bg: #151518;
  --panel: #151518;
  --panel-2: #2b2a2f;
  --line: #2b2a2f;
  --text: #f3f1f3;
  --muted: #b5b2b7;
  --lime: #ff2b3d;
  --cyan: #ff2b3d;
  --amber: #ff2b3d;
  --red: #ff2b3d;
  --vandal-black: #151518;
  --vandal-metal: #2b2a2f;
  --vandal-red: #ff2b3d;
}

html[data-site-theme="vandal"] body {
  background: #151518 !important;
  color: var(--text);
}
html[data-site-theme="vandal"] .topbar {
  border-color: var(--vandal-metal) !important;
  background: var(--vandal-black) !important;
  box-shadow: inset 0 1px #ffffff08, 0 12px 32px #0006 !important;
}
html[data-site-theme="vandal"] .hero-visual {
  background: radial-gradient(ellipse at 58% 45%, #2b2a2f 0, #1b1a1e 42%, #151518 80%) !important;
}
html[data-site-theme="vandal"] .visual-grid {
  background-image: linear-gradient(#ff2b3d20 1px, transparent 1px), linear-gradient(90deg, #ff2b3d20 1px, transparent 1px) !important;
}
html[data-site-theme="vandal"] :is(.visual-ring, .ring-two) {
  border-color: #ff2b3d77 !important;
}
html[data-site-theme="vandal"] :is(.visual-crosshair i, .visual-crosshair b) {
  background: var(--vandal-red) !important;
  box-shadow: 0 0 12px #ff2b3d88 !important;
}
html[data-site-theme="vandal"] .hero-visual .visual-caption {
  border-color: var(--vandal-metal) !important;
  background: #151518dd !important;
  color: var(--text) !important;
}
html[data-site-theme="vandal"] :is(
  .panel:not(.deep-aim-promo), .form-panel, .warmup-panel, .reaction-panel, .results-panel,
  .setup-aside, .active-game-panel, .account-dialog, .flash-settings-card,
  .flash-setup-preview, .flash-training-guide, .flash-how-to,
  .reaction-mode-picker, .reaction-mode-card, .tool-card, .game-card,
  .practice-drill-card, .routine-launch, .warmup-guidance, .settings-disclosure,
  .browser-check-card, .community-card, .home-about,
  .instruction-card, .game-pause-card, .fixed-settings > div,
  .flash-metrics > div, .browser-version-list > span
) {
  border-color: var(--vandal-metal) !important;
  background-color: var(--vandal-black) !important;
  background-image: none !important;
  box-shadow: 0 12px 30px #0005 !important;
}
html[data-site-theme="vandal"] :is(
  .input-wrap, .select-wrap, .language-control, .level-picker select,
  .flash-controls > label, .crosshair-choice-preview, .pulse-stage,
  .settings-live-preview, .settings-disclosure > summary
) {
  border-color: var(--vandal-metal) !important;
  background-color: var(--vandal-black) !important;
  color: var(--text) !important;
}
html[data-site-theme="vandal"] :is(input, select, textarea, .language-control select) {
  accent-color: var(--vandal-red) !important;
  color: var(--text) !important;
}
html[data-site-theme="vandal"] :is(select option, .language-control option, .select-wrap option) {
  background: var(--vandal-black) !important;
  color: var(--text) !important;
}

/* Red is reserved for interactive emphasis and the active training step. */
html[data-site-theme="vandal"] :is(
  .eyebrow, .status-dot, .brand-mark, .brand-mark span,
  .hero h1 span, .warmup-panel h1 span, .step-label span:first-child,
  .tool-icon, .game-icon, .practice-drill-icon, .practice-drill-action,
  .tool-card-meta.ready, .game-result, .memory-result, .text-action,
  .reaction-title-accent, .reaction-mode-heading .eyebrow,
  .flash-card-kicker, .flash-group-title > span:first-child,
  .flash-how-to-number, .flash-how-to-icon, .flash-how-to-note > span:first-child,
  .browser-check-mark, .browser-check-heading .eyebrow,
  .browser-check-supported > span, .random-crosshair-mark,
  .home-flash-kicker, .hero-promo-kicker, .hero-explore-kicker,
  .community-card .eyebrow, .routine-number, .aside-stat strong,
  .result-main, .pulse-footer span:last-child, .brand-mark
) {
  color: var(--vandal-red) !important;
}
html[data-site-theme="vandal"] :is(.status-dot, .brand-mark span) {
  background: var(--vandal-red) !important;
  box-shadow: 0 0 12px #ff2b3d66 !important;
}
html[data-site-theme="vandal"] .brand-mark { border-color: var(--vandal-red) !important; }
html[data-site-theme="vandal"] :is(.nav-link:hover, .nav-link:focus-visible, .back-link:hover, .footer-link:hover) {
  color: var(--vandal-red) !important;
}
html[data-site-theme="vandal"] .header-primary-links .nav-link[aria-current="page"]::after {
  background: var(--vandal-red) !important;
  box-shadow: 0 0 9px #ff2b3d77 !important;
}
html[data-site-theme="vandal"] :is(.account-open-button, .language-control) {
  border-color: var(--vandal-metal) !important;
  background: var(--vandal-black) !important;
  color: var(--vandal-red) !important;
}
html[data-site-theme="vandal"] .language-control select { color: var(--vandal-red) !important; }

html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link] {
  border-color: var(--vandal-metal) !important;
  background: var(--vandal-black) !important;
  color: var(--vandal-red) !important;
  box-shadow: inset 0 0 0 1px #2b2a2f !important;
}
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link="warmup"],
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link][aria-current="page"] {
  border-color: var(--vandal-red) !important;
  background: var(--vandal-red) !important;
  color: #151518 !important;
  box-shadow: 0 0 16px #ff2b3d33 !important;
}
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link]:hover,
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link]:focus-visible {
  border-color: var(--vandal-red) !important;
  background: var(--vandal-metal) !important;
  color: var(--vandal-red) !important;
}

html[data-site-theme="vandal"] :is(.button-primary, .flash-actions .button-primary) {
  border-color: var(--vandal-red) !important;
  background: var(--vandal-red) !important;
  color: #151518 !important;
  box-shadow: 0 7px 24px #ff2b3d22 !important;
}
html[data-site-theme="vandal"] :is(.button-secondary, .tool-card, .game-card, .practice-drill-card) {
  border-color: var(--vandal-metal) !important;
  background: var(--vandal-black) !important;
  color: var(--text) !important;
}
html[data-site-theme="vandal"] :is(.button-secondary:hover, .tool-card:hover, .game-card:hover, .practice-drill-card:hover, .practice-drill-card:focus-visible) {
  border-color: var(--vandal-red) !important;
  background: var(--vandal-metal) !important;
  color: var(--text) !important;
  box-shadow: 0 0 18px #ff2b3d1c !important;
}
html[data-site-theme="vandal"] :is(
  .flash-choice-grid button[aria-pressed="true"],
  .random-crosshair-theme-option[aria-pressed="true"],
  .practice-preview-toggle[aria-expanded="true"],
  .crosshair-picker button[aria-pressed="true"],
  .pause-option-buttons button[aria-pressed="true"]
) {
  border-color: var(--vandal-red) !important;
  background: var(--vandal-metal) !important;
  color: var(--vandal-red) !important;
}
html[data-site-theme="vandal"] :is(button, input, select, textarea):focus-visible {
  outline-color: var(--vandal-red) !important;
}
html[data-site-theme="vandal"] :is(.input-wrap:focus-within, .select-wrap:focus-within, .language-control:focus-within) {
  border-color: var(--vandal-red) !important;
  box-shadow: 0 0 0 3px #ff2b3d24 !important;
}
html[data-site-theme="vandal"] .theme-swatch-vandal {
  background: linear-gradient(135deg, #ff2b3d 0 34%, #2b2a2f 34% 67%, #151518 67%) !important;
}
html[data-site-theme="vandal"] .theme-swatch[aria-pressed="true"] {
  border-color: var(--vandal-red) !important;
  box-shadow: 0 0 0 2px var(--vandal-black), 0 0 0 3px var(--vandal-red) !important;
}
html[data-site-theme="vandal"] .footer { border-color: var(--vandal-metal) !important; }
html[data-site-theme="vandal"] .game-instructions { background: #151518ee !important; }
html[data-site-theme="vandal"] .instruction-card,
html[data-site-theme="vandal"] .game-pause-card {
  border-color: var(--vandal-metal) !important;
  background: var(--vandal-black) !important;
}

/* Color balance: black is the canvas, charcoal is the surface, red is a restrained signal. */
html[data-site-theme="vandal"] {
  --text: #f3f1f3;
  --muted: #b5b2b7;
  --panel: #151518;
  --panel-2: #2b2a2f;
  --line: #2b2a2f;
}
html[data-site-theme="vandal"] body { background: #151518 !important; }
html[data-site-theme="vandal"] :is(.hero h1 span, .warmup-panel h1 span) { color: var(--text) !important; }
html[data-site-theme="vandal"] .topbar {
  background: #151518 !important;
  border-color: #2b2a2f !important;
  box-shadow: inset 0 1px #2b2a2f, 0 12px 32px #0006 !important;
}
html[data-site-theme="vandal"] :is(.nav-link, .back-link, .account-open-button, .language-control, .language-control select) {
  color: var(--text) !important;
}
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link] {
  color: var(--text) !important;
  background: #151518 !important;
  border-color: #2b2a2f !important;
  box-shadow: inset 0 0 0 1px #2b2a2f !important;
}
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link="warmup"],
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link][aria-current="page"] {
  color: #ff2b3d !important;
  background: #2b2a2f !important;
  border-color: #ff2b3d !important;
  box-shadow: inset 0 -2px #ff2b3d, 0 0 10px #ff2b3d18 !important;
}
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link]:hover,
html[data-site-theme="vandal"] .header-exercises .nav-link[data-page-link]:focus-visible {
  color: #ff2b3d !important;
  background: #2b2a2f !important;
  border-color: #ff2b3d !important;
}
html[data-site-theme="vandal"] :is(.button-primary, .flash-actions .button-primary, .home-flash-cta) {
  color: #ff2b3d !important;
  background: #151518 !important;
  border-color: #ff2b3d !important;
  box-shadow: inset 0 -2px #ff2b3d, 0 0 12px #ff2b3d18 !important;
}
html[data-site-theme="vandal"] :is(.button-primary, .flash-actions .button-primary, .home-flash-cta):hover {
  color: #ff2b3d !important;
  background: #2b2a2f !important;
  border-color: #ff2b3d !important;
}
html[data-site-theme="vandal"] :is(.button-secondary, .tool-card, .game-card, .practice-drill-card) {
  color: var(--text) !important;
  background: #151518 !important;
  border-color: #2b2a2f !important;
}
html[data-site-theme="vandal"] :is(.button-secondary:hover, .tool-card:hover, .game-card:hover, .practice-drill-card:hover, .practice-drill-card:focus-visible) {
  color: var(--text) !important;
  background: #2b2a2f !important;
  border-color: #ff2b3d !important;
  box-shadow: 0 0 12px #ff2b3d18 !important;
}
html[data-site-theme="vandal"] :is(.input-wrap, .select-wrap, .language-control, .level-picker select, .flash-controls > label, .crosshair-choice-preview, .settings-live-preview, .settings-disclosure > summary) {
  background: #151518 !important;
  border-color: #2b2a2f !important;
}
html[data-site-theme="vandal"] :is(.panel:not(.deep-aim-promo), .form-panel, .warmup-panel, .reaction-panel, .results-panel, .setup-aside, .active-game-panel, .account-dialog, .flash-settings-card, .flash-setup-preview, .flash-training-guide, .flash-how-to, .reaction-mode-picker, .reaction-mode-card, .tool-card, .game-card, .practice-drill-card, .routine-launch, .warmup-guidance, .settings-disclosure, .browser-check-card, .community-card, .home-about, .instruction-card, .game-pause-card) {
  background-color: #151518 !important;
  border-color: #2b2a2f !important;
  box-shadow: 0 12px 30px #0005 !important;
}
html[data-site-theme="vandal"] :is(.home-flash-announcement, .home-crosshair-announcement) {
  color: var(--text) !important;
  background: linear-gradient(135deg, #2b2a2f 0%, #151518 38%, #151518 100%) !important;
  border-color: #2b2a2f !important;
  box-shadow: 0 22px 70px #0007 !important;
}
html[data-site-theme="vandal"] :is(.home-flash-announcement::before, .home-crosshair-announcement::before) {
  background-image: linear-gradient(#ff2b3d12 1px, transparent 1px), linear-gradient(90deg, #ff2b3d12 1px, transparent 1px) !important;
}
html[data-site-theme="vandal"] .home-flash-art img { filter: grayscale(1) brightness(.78) contrast(1.08) !important; }
html[data-site-theme="vandal"] .home-flash-art { background: #151518 !important; }
html[data-site-theme="vandal"] .home-flash-art-shade {
  background: linear-gradient(90deg, #151518 0%, #15151833 34%, transparent 65%), linear-gradient(0deg, #151518dd 0%, transparent 42%) !important;
}
html[data-site-theme="vandal"] :is(.home-flash-art-label, .home-crosshair-art-label) {
  color: #ff2b3d !important;
  background: #151518 !important;
  border-color: #2b2a2f !important;
}
html[data-site-theme="vandal"] :is(.home-flash-copy h2, .home-crosshair-copy h2) { color: var(--text) !important; }
html[data-site-theme="vandal"] :is(.home-flash-description, .home-flash-note, .home-crosshair-description, .home-crosshair-note) { color: var(--muted) !important; }
html[data-site-theme="vandal"] .home-crosshair-art { background: radial-gradient(ellipse at 50% 58%, #2b2a2f 0, #1d1c20 38%, #151518 80%) !important; }
html[data-site-theme="vandal"] .home-crosshair-art:before { background-image: repeating-linear-gradient(0deg, transparent 0 47px, #ff2b3d18 48px), repeating-linear-gradient(90deg, transparent 0 47px, #ff2b3d18 48px) !important; }
html[data-site-theme="vandal"] :is(.home-crosshair-sample, .home-crosshair-sample i, .sample-dot i, .sample-lines i, .sample-diamond i) { border-color: #ff2b3d !important; }
html[data-site-theme="vandal"] :is(.sample-dot i, .sample-lines i) { background-color: #ff2b3d !important; }
html[data-site-theme="vandal"] .hero-promo { background: linear-gradient(180deg, #2b2a2f, #151518) !important; border-top-color: #ff2b3d55 !important; }
html[data-site-theme="vandal"] .hero-promo h2 { color: var(--text) !important; }
html[data-site-theme="vandal"] .hero-promo-copy { color: var(--muted) !important; }
html[data-site-theme="vandal"] .hero-drill-target {
  border-color: #ff2b3d !important;
  background: radial-gradient(circle at 34% 28%, #ff2b3d 0 8%, #2b2a2f 45%, #151518 100%) !important;
  box-shadow: 0 0 12px #ff2b3d88, 0 0 30px #ff2b3d33 !important;
}
html[data-site-theme="vandal"] .hero-drill-target span { background: #ff2b3d !important; box-shadow: 0 0 10px #ff2b3d !important; }
html[data-site-theme="vandal"] :is(.visual-orbit, .home-flash-pulse, .status-dot) { background: #ff2b3d !important; box-shadow: 0 0 12px #ff2b3d66 !important; }
html[data-site-theme="vandal"] :is(.home-flash-pulse, .home-crosshair-pulse) { background: #ff2b3d !important; box-shadow: 0 0 12px #ff2b3d66 !important; }

/* Deep Aim is an ad with its own identity; retain its original colors. */
html[data-site-theme="vandal"] .deep-aim-promo {
  background: radial-gradient(ellipse at 100% 0%, #843c2655, transparent 55%), linear-gradient(150deg, #261710, #151110) !important;
  border-color: #68412e !important;
}
html[data-site-theme="vandal"] .deep-aim-promo > .eyebrow { color: #ffad82 !important; }
html[data-site-theme="vandal"] .deep-aim-promo-mark {
  border-color: #ffad8270 !important; color: #ffad82 !important; background: #ff825b12 !important;
}
html[data-site-theme="vandal"] .deep-aim-promo .button-secondary {
  color: #eaf1f2 !important; background: #111d28 !important; border-color: #334654 !important;
}
html[data-site-theme="vandal"] .deep-aim-promo .button-secondary:hover {
  color: #eaf1f2 !important; background: #111d28 !important; border-color: #6b8794 !important;
}
html[data-site-theme="vandal"] .deep-aim-promo-foot { color: #9d8f87 !important; }
/* Remove stray theme hues from text and non-ad preview art across every page. */
html[data-site-theme="vandal"] body :not(.deep-aim-promo):not(.deep-aim-promo *) { color: #f3f1f3 !important; }
html[data-site-theme="vandal"] :is(
  .eyebrow, .status-dot, .brand-mark, .brand-mark span, .step-label span:first-child,
  .tool-icon, .game-icon, .practice-drill-icon, .practice-drill-action,
  .tool-card-meta.ready, .game-result, .memory-result, .text-action,
  .reaction-title-accent, .flash-card-kicker, .flash-group-title > span:first-child,
  .flash-how-to-number, .flash-how-to-icon, .browser-check-mark,
  .browser-check-supported > span, .random-crosshair-mark, .home-flash-kicker,
  .hero-promo-kicker, .hero-explore-kicker, .home-crosshair-kicker,
  .routine-number, .aside-stat strong, .result-main
) { color: #ff2b3d !important; }
html[data-site-theme="vandal"] :is(.status-dot, .brand-mark span, .home-flash-pulse, .home-crosshair-pulse) {
  background-color: #ff2b3d !important;
  box-shadow: 0 0 12px #ff2b3d66 !important;
}
html[data-site-theme="vandal"] :is(.home-analysis-card, .hero-analysis-card, .hero-analysis-art, .hero-explore-card, .hero-explore-art, .deep-analysis-art, .rtd-card, .rtd-art) {
  background-color: #151518 !important;
  background-image: linear-gradient(145deg, #2b2a2f 0%, #151518 62%) !important;
  border-color: #2b2a2f !important;
}
html[data-site-theme="vandal"] :is(.hero-analysis-art, .hero-explore-art, .deep-analysis-art) img { filter: grayscale(1) brightness(.78) contrast(1.08) !important; }
html[data-site-theme="vandal"] .hero-demo-video { filter: hue-rotate(-28deg) saturate(1.08) !important; }
html[data-site-theme="vandal"] .home-crosshair-effects { filter: hue-rotate(-28deg) saturate(1.08) !important; }
html[data-site-theme="vandal"] :is(.hero-analysis-art, .hero-explore-art, .deep-analysis-art) :is(i, b, span) { border-color: #2b2a2f !important; }
html[data-site-theme="vandal"] :is(.hero-analysis-art, .hero-explore-art, .deep-analysis-art) :is(.hero-analysis-target, .hero-explore-target, .deep-analysis-art-target) {
  background-color: #ff2b3d !important;
  box-shadow: 0 0 12px #ff2b3d66 !important;
}html[data-site-theme="vandal"] :is(
  .reaction-mode-card[aria-pressed="true"], .memory-choice.is-selected,
  .crosshair-picker button[aria-pressed="true"], .pause-option-buttons button[aria-pressed="true"],
  .pause-crosshairs button[aria-pressed="true"], [role="tab"][aria-selected="true"]
):not(.deep-aim-promo):not(.deep-aim-promo *) {
  color: #ff2b3d !important;
  background: #2b2a2f !important;
  border-color: #ff2b3d !important;
  box-shadow: 0 0 10px #ff2b3d18 !important;
}
html[data-site-theme="vandal"] .rtd-target {
  color: #151518 !important;
  border-color: #ff2b3d !important;
  background: radial-gradient(circle at 35% 30%, #ff2b3d 0 8%, #2b2a2f 48%, #151518 100%) !important;
  box-shadow: 0 0 16px #ff2b3d55, inset 0 0 10px #2b2a2f !important;
}