:root {
  --bg-0: #020306;
  --bg-1: #070911;
  --bg-2: #0f1426;
  --neon-purple: #dd72ff;
  --neon-green: #74ff78;
  --neon-blue: #62c3ff;
  --text-soft: #d7dfef;
  --top-bar-height: 18px;
  --side-bar-width: 18px;
  --center-box-width: 22vw;
  --center-box-height: 80px;
  --left-group-gap-ratio: 2.5%;
  --left-box-height: 82%;
  --bottom-center-box-width: 22vw;
  --bottom-center-box-height: 80px;
  --side-center-box-height: 30vh;
  --side-center-box-width: 72px;
  --side-center-box-min-width: 64px;
  --corner-size: 42px;
  --rarity-main: #ffffff;
  --rarity-secondary: #999999;
}

@property --howto-active-arc-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --tokenomic-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --game-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --roadmap-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --economy-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --assets-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --presale-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}


@font-face {
  font-family: "Space Age";
  src: url("../fonts/space-age.ttf") format("truetype");
  font-display: swap;
}
* {
  box-sizing: border-box;
}

html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: "Rajdhani", system-ui, sans-serif;
  /* sfondo scuro del tema (era #fff): il bianco traspariva in eventuali gap delle
     cornici e durante il compositing (flash bianco) → ora qualsiasi scopertura è scura
     e impercettibile. */
  background: #020306;
  color: var(--text-soft);
}

.page-scroll-reserve {
  height: 180vh;
  width: 1px;
  opacity: 0;
  pointer-events: none;
}