:root {
  color-scheme: dark;
  --bg: #060816;
  --bg-2: #0a1022;
  --cyan: #5ff0ff;
  --blue: #6cb5ff;
  --purple: #9e78ff;
  --text: #eef4ff;
  --muted: #8ea0c9;
  --line: rgba(255, 255, 255, 0.09);
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background:
    radial-gradient(circle at 10% 15%, rgba(108, 181, 255, 0.16), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(158, 120, 255, 0.14), transparent 22%),
    radial-gradient(circle at 50% 100%, rgba(95, 240, 255, 0.1), transparent 26%),
    linear-gradient(180deg, var(--bg) 0%, #070c18 50%, #04060f 100%);
  color: var(--text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black 42%, transparent 100%);
}

a {
  color: inherit;
}

::selection {
  background: rgba(108, 181, 255, 0.28);
  color: white;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #050814;
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid #050814;
  background: linear-gradient(180deg, rgba(95, 240, 255, 0.8), rgba(158, 120, 255, 0.8));
}

.glass-panel {
  background: linear-gradient(180deg, rgba(13, 20, 42, 0.92), rgba(10, 16, 31, 0.82));
  border: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.cyber-border {
  position: relative;
}

.cyber-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(95, 240, 255, 0.6), rgba(108, 181, 255, 0.15), rgba(158, 120, 255, 0.45));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.1;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.85) 0.8px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.7) 0.8px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.8) 0.8px, transparent 1px);
  background-size: 180px 180px;
}

.floating-grid {
  background-image:
    linear-gradient(rgba(95, 240, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95, 240, 255, 0.08) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent);
}

.hero-shine {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02));
}

.text-glow {
  text-shadow: 0 0 18px rgba(108, 181, 255, 0.3), 0 0 42px rgba(158, 120, 255, 0.18);
}

.discord-scroll::-webkit-scrollbar {
  width: 8px;
}

.discord-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.discord-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border: none;
}

.world-map {
  background:
    radial-gradient(circle at 16% 44%, rgba(95, 240, 255, 0.28) 0 8%, transparent 9%),
    radial-gradient(circle at 28% 52%, rgba(95, 240, 255, 0.18) 0 7%, transparent 8%),
    radial-gradient(circle at 48% 39%, rgba(108, 181, 255, 0.28) 0 8%, transparent 9%),
    radial-gradient(circle at 56% 56%, rgba(158, 120, 255, 0.2) 0 9%, transparent 10%),
    radial-gradient(circle at 74% 36%, rgba(95, 240, 255, 0.22) 0 7%, transparent 8%),
    radial-gradient(circle at 80% 62%, rgba(108, 181, 255, 0.24) 0 8%, transparent 9%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
}

.world-map::before,
.world-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-map::before {
  background:
    linear-gradient(112deg, transparent 20%, rgba(95, 240, 255, 0.24) 45%, transparent 70%),
    linear-gradient(24deg, transparent 30%, rgba(158, 120, 255, 0.18) 52%, transparent 72%);
  filter: blur(20px);
  opacity: 0.55;
}

.world-map::after {
  background-image:
    linear-gradient(90deg, transparent 0, rgba(95, 240, 255, 0.14) 50%, transparent 100%);
  background-size: 220px 100%;
  animation: mapScan 10s linear infinite;
}

.particle {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(95, 240, 255, 0.35) 45%, transparent 75%);
  animation: floatParticle linear infinite;
}

.orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.7;
}

.loading-ring {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--cyan);
  border-right-color: var(--purple);
}

@keyframes floatParticle {
  from {
    transform: translate3d(0, 12px, 0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  to {
    transform: translate3d(12px, -110px, 0);
    opacity: 0;
  }
}

@keyframes mapScan {
  from {
    transform: translateX(-30%);
  }
  to {
    transform: translateX(130%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .particle,
  .world-map::after {
    animation: none;
  }
}