/* ═══════════════════════════════════════════════════════════
   RESET.CSS — Normalize + base styles
   ═══════════════════════════════════════════════════════════ */

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

html, body {
  height: 100%;
}

body {
  padding-left:   var(--sal);
  padding-right:  var(--sar);
  padding-top:    var(--sat);
  padding-bottom: var(--sab);
  overflow: hidden;
  background: var(--c-bg-deep);
  color: var(--ui-text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.theme-hud {
  background:
    radial-gradient(1200px 800px at 60% 10%, rgba(0, 242, 255, .10), transparent 62%),
    radial-gradient(900px 600px at 20% 90%, rgba(56, 255, 156, .06), transparent 55%),
    linear-gradient(180deg, #02040c, #050a16 60%, #040815);
}

/* ── Visibility helpers ── */
.d-only { display: flex; }
.m-only { display: none; }

@media (max-width: 980px) {
  .d-only { display: none !important; }
  .m-only { display: flex !important; }
}

/* ── Scrollbar base ── */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--ui-surface) 70%, transparent);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--ui-accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--ui-border) 90%, transparent);
  border-radius: var(--r-pill);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}