:root {
  color-scheme: dark;
  --hud-bg-00: #000000;
  --hud-bg-10: #050607;
  --hud-bg-20: #0b0e11;
  --hud-bg-30: #030405;

  --hud-cyan: #3ee8ff;
  --hud-lime: #85ff44;
  --hud-orange: #ff5b3f;
  --hud-cyan-rgb: 62 232 255;
  --hud-lime-rgb: 133 255 68;
  --hud-orange-rgb: 255 91 63;
  --hud-info-rgb: 122 198 255;
  --hud-border-rgb: 95 132 158;
  --hud-border-strong-rgb: 140 184 210;
  --hud-surface-rgb: 8 14 19;
  --hud-surface-alt-rgb: 12 20 26;
  --hud-surface-deep-rgb: 4 10 14;
  --hud-glow-rgb: 62 232 255;
  --hud-glow-alt-rgb: 133 255 68;
  --hud-text-main-rgb: 207 231 255;
  --hud-text-dim-rgb: 134 162 184;
  --hud-range-0: #13201a;
  --hud-range-1: #285338;
  --hud-range-2: #3f8a66;
  --hud-range-3: #6dd3ad;
  --hud-range-4: #98e6ff;
  --hud-range-5: #ffab78;

  --hud-text-main: #cfe7ff;
  --hud-text-dim: #86a2b8;

  /* Keep root surface close to the main board style to avoid visible drag-edge seams. */
  background:
    radial-gradient(circle at 18% 8%, rgb(var(--hud-glow-rgb) / 0.05), transparent 38%),
    radial-gradient(circle at 84% 14%, rgb(var(--hud-glow-alt-rgb) / 0.04), transparent 36%),
    linear-gradient(165deg, var(--hud-bg-20) 0%, var(--hud-bg-10) 48%, var(--hud-bg-30) 100%);
  background-color: var(--hud-bg-00);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: "Rajdhani", "Segoe UI", "PingFang SC", sans-serif;
  color: var(--hud-text-main);
  background: inherit;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}