/* Site-wide visual language based on the home header HUD.
   Colors come from the active theme tokens; content and game canvases stay intact. */
html[data-site-theme] {
  --site-surface-edge: color-mix(in srgb, var(--header-hud-edge) 72%, var(--header-hud-accent) 28%);
  --site-surface-edge-soft: color-mix(in srgb, var(--header-hud-edge) 82%, transparent);
  --site-surface-tint: color-mix(in srgb, var(--header-hud-accent) 6%, var(--header-hud-surface));
  --site-surface-highlight: color-mix(in srgb, var(--header-hud-text) 7%, transparent);
}

/* Give content cards one consistent, quiet HUD frame without recoloring art or playfields. */
html[data-site-theme] .page .panel:not(.hero):not(.deep-analysis-hero):not(.active-game-panel):not(.pulse-stage),
html[data-site-theme] .page .tool-card,
html[data-site-theme] .page .game-card,
html[data-site-theme] .page .routine-launch {
  border-color: var(--site-surface-edge) !important;
  border-radius: 7px !important;
  box-shadow: inset 0 1px var(--site-surface-highlight), 0 12px 32px rgba(0,0,0,.18) !important;
}

html[data-site-theme] .page .tool-card,
html[data-site-theme] .page .game-card,
html[data-site-theme] .page .routine-launch {
  background: linear-gradient(145deg, var(--site-surface-tint), var(--header-hud-surface)) !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

html[data-site-theme] .page .tool-card.featured,
html[data-site-theme] .page .game-card.is-selected,
html[data-site-theme] .page .routine-launch[aria-pressed="true"] {
  border-color: var(--header-hud-accent) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--header-hud-accent) 12%, var(--header-hud-surface)), var(--header-hud-surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--header-hud-accent) 25%, transparent), 0 12px 32px rgba(0,0,0,.2) !important;
}

html[data-site-theme] .page .tool-card[data-page-link]:hover,
html[data-site-theme] .page .game-card:hover,
html[data-site-theme] .page .routine-launch:hover {
  border-color: var(--header-hud-accent) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--header-hud-accent) 10%, var(--header-hud-surface-hover)), var(--header-hud-surface)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--header-hud-accent) 22%, transparent), 0 14px 34px rgba(0,0,0,.24) !important;
}

html[data-site-theme] .page .tool-card:focus-visible,
html[data-site-theme] .page .game-card:focus-visible,
html[data-site-theme] .page .routine-launch:focus-visible {
  outline: 2px solid var(--header-hud-accent) !important;
  outline-offset: 3px;
}

/* Section and page titles share the header's accent, spacing, and restrained dividers. */
html[data-site-theme] .page-heading {
  padding-bottom: 11px;
  border-bottom: 1px solid var(--site-surface-edge-soft);
}

html[data-site-theme] .page-heading .step-label,
html[data-site-theme] .section-heading .eyebrow,
html[data-site-theme] .practice-section-heading .eyebrow,
html[data-site-theme] .browser-check-heading .eyebrow,
html[data-site-theme] .flash-setup-heading .eyebrow {
  color: var(--header-hud-accent) !important;
}

html[data-site-theme] .page :is(.section-heading, .practice-section-heading) h2 {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding-inline-start: 15px;
  color: var(--header-hud-text);
  text-wrap: balance;
}

html[data-site-theme] .page :is(.section-heading, .practice-section-heading) h2::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 4px;
  width: 3px;
  border-radius: 2px;
  background: var(--header-hud-accent);
  box-shadow: 0 0 12px var(--header-hud-glow);
}

html[data-site-theme] .page-heading .back-link {
  padding: 7px 11px;
  border: 1px solid var(--site-surface-edge);
  border-radius: 4px;
  background: var(--header-hud-surface);
  color: var(--header-hud-secondary);
}

html[data-site-theme] .page-heading .back-link:hover,
html[data-site-theme] .page-heading .back-link:focus-visible {
  border-color: var(--header-hud-accent);
  color: var(--header-hud-text);
  background: var(--header-hud-surface-hover);
}

html[data-site-theme] .page :is(.tool-card-title, .game-title, .practice-card-title) {
  color: var(--header-hud-text);
}

html[data-site-theme] .page :is(.tool-icon, .game-icon, .tool-card-meta.ready) {
  color: var(--header-hud-accent);
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme] .page .tool-card,
  html[data-site-theme] .page .game-card,
  html[data-site-theme] .page .routine-launch { transition: none; }
}

/* Site-wide HUD pass: apply beyond .page too (session setup and account modal). */
html[data-site-theme] .button:not(.icon-button):not(.hero-demo-toggle) {
  position: relative;
  border: 1px solid var(--header-hud-edge) !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  box-shadow: inset 0 1px color-mix(in srgb, var(--header-hud-text) 10%, transparent);
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .15s ease;
}

html[data-site-theme] .button-primary:not(:disabled) {
  border-color: var(--header-hud-accent) !important;
  background: var(--header-hud-accent) !important;
  color: var(--header-hud-surface) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 5px 18px var(--header-hud-glow);
}

html[data-site-theme] .button-secondary:not(:disabled),
html[data-site-theme] .button:not(.button-primary):not(.button-danger):not(.icon-button):not(.hero-demo-toggle):not(:disabled) {
  border-color: var(--header-hud-edge) !important;
  background: var(--header-hud-surface) !important;
  color: var(--header-hud-text) !important;
}

html[data-site-theme] .button-primary:not(:disabled):hover,
html[data-site-theme] .button-secondary:not(:disabled):hover,
html[data-site-theme] .button:not(.button-danger):not(.icon-button):not(.hero-demo-toggle):not(:disabled):hover {
  border-color: var(--header-hud-accent) !important;
  background: var(--header-hud-surface-hover) !important;
  color: var(--header-hud-accent) !important;
  box-shadow: inset 0 0 0 1px var(--header-hud-wash), 0 0 16px var(--header-hud-glow);
}

html[data-site-theme] .button:focus-visible {
  outline: 2px solid var(--header-hud-accent) !important;
  outline-offset: 3px;
  clip-path: none;
}

html[data-site-theme] .button:disabled {
  border-color: var(--header-hud-edge) !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* Session setup, account dialogs, cards, and content panels share a theme rail. */
html[data-site-theme] .page .panel:not(.hero):not(.deep-analysis-hero):not(.active-game-panel):not(.pulse-stage),
html[data-site-theme] .page .tool-card,
html[data-site-theme] .page .game-card,
html[data-site-theme] .page .routine-launch,
html[data-site-theme] .page .browser-check-card,
html[data-site-theme] .page .support-card,
html[data-site-theme] .page .suggestion-card,
html[data-site-theme] .page .crosshair-preset-card,
html[data-site-theme] .page .settings-disclosure,
html[data-site-theme] .flash-settings-card,
html[data-site-theme] .flash-setup-preview,
html[data-site-theme] .flash-training-guide,
html[data-site-theme] .account-dialog {
  border-color: color-mix(in srgb, var(--header-hud-edge) 64%, var(--header-hud-accent) 36%) !important;
  background-image: linear-gradient(90deg, var(--header-hud-accent), color-mix(in srgb, var(--header-hud-accent) 22%, transparent) 100px, transparent 190px), linear-gradient(145deg, var(--site-surface-tint), var(--header-hud-surface)) !important;
  background-size: 100% 2px, 100% 100% !important;
  background-position: top left, center !important;
  background-repeat: no-repeat !important;
  box-shadow: inset 0 1px var(--site-surface-highlight), 0 10px 28px rgba(0,0,0,.16) !important;
}

html[data-site-theme] .page .tool-card:hover,
html[data-site-theme] .page .game-card:hover,
html[data-site-theme] .page .routine-launch:hover,
html[data-site-theme] .page .support-card:hover,
html[data-site-theme] .page .suggestion-card:hover {
  border-color: var(--header-hud-accent) !important;
  box-shadow: inset 0 0 0 1px var(--header-hud-wash), 0 12px 30px rgba(0,0,0,.2) !important;
}

@media (prefers-reduced-motion: reduce) {
  html[data-site-theme] .button { transition: none; }
}

/* These two previously missed actions are outside the generic page wrapper. */
html[data-site-theme] #flash-start,
html[data-site-theme] #flash-stop,
html[data-site-theme] #account-submit {
  min-height: 50px;
  border: 1px solid var(--header-hud-accent) !important;
  background: var(--header-hud-accent) !important;
  color: var(--header-hud-surface) !important;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 5px 18px var(--header-hud-glow);
}

html[data-site-theme] #flash-start:hover,
html[data-site-theme] #flash-stop:hover,
html[data-site-theme] #account-submit:hover {
  background: var(--header-hud-surface-hover) !important;
  color: var(--header-hud-accent) !important;
}