@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Manrope:wght@400;500;700&display=swap');

:root {
  --bg-main: #09090d;
  --bg-panel: rgba(17, 17, 22, 0.84);
  --bg-panel-soft: rgba(17, 17, 22, 0.64);
  --text-strong: #f4f0ea;
  --text-muted: #b2a998;
  --text-subtle: #807a71;
  --accent-primary: #c6a769;
  --accent-secondary: #20b7ff;
  --accent-danger: #ff4d6d;
  --accent-success: #6cf3a2;
  --accent-blue-team: #19d7ff;
  --accent-red-team: #ff5f7a;
  --line-soft: rgba(198, 167, 105, 0.22);
  --line-strong: rgba(198, 167, 105, 0.45);
  --shadow-depth: 0 24px 80px rgba(0, 0, 0, 0.45);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;
  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Manrope', sans-serif;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: var(--bg-main);
  color: var(--text-strong);
  font-family: var(--font-body);
  line-height: 1.5;
  overflow-x: hidden;
}

#root {
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

p {
  margin: 0;
}

button,
input {
  font: inherit;
}

.background-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1200px 650px at 8% 12%, rgba(25, 215, 255, 0.38), transparent 60%),
    radial-gradient(1000px 600px at 92% 78%, rgba(255, 95, 122, 0.28), transparent 60%),
    linear-gradient(160deg, #07070a 0%, #0e0f16 52%, #0b0b0f 100%);
}

.bg-noise,
.bg-vignette,
.bg-grid,
.bg-scanline,
.bg-wave,
.bg-orb {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-noise {
  opacity: 0.32;
  background-image: radial-gradient(rgba(244, 240, 234, 0.15) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
  mix-blend-mode: soft-light;
  animation: noiseDrift 16s steps(8) infinite;
}

.bg-vignette {
  background: radial-gradient(circle at center, transparent 35%, rgba(0, 0, 0, 0.52) 100%);
}

.bg-grid {
  opacity: 0.34;
  background-image:
    linear-gradient(rgba(198, 167, 105, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 167, 105, 0.1) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
}

.bg-scanline {
  opacity: 0.26;
  background: linear-gradient(180deg, transparent 0%, rgba(25, 215, 255, 0.38) 50%, transparent 100%);
  transform: translateY(-100%);
  animation: scanFall 7.5s linear infinite;
}

.bg-wave {
  opacity: 0.34;
  background:
    radial-gradient(600px 120px at 25% 70%, rgba(25, 215, 255, 0.35), transparent 70%),
    radial-gradient(700px 140px at 75% 28%, rgba(198, 167, 105, 0.27), transparent 70%);
  filter: blur(8px);
  animation: waveShift 14s ease-in-out infinite;
}

.bg-orb {
  inset: auto;
  border-radius: 50%;
  filter: blur(24px);
  animation: orbFloat 18s ease-in-out infinite;
}

.bg-orb.orb-left {
  width: min(40vw, 460px);
  height: min(40vw, 460px);
  left: -8vw;
  top: 18vh;
  background: radial-gradient(circle at center, rgba(25, 215, 255, 0.4), rgba(25, 215, 255, 0));
}

.bg-orb.orb-right {
  width: min(50vw, 560px);
  height: min(50vw, 560px);
  right: -12vw;
  bottom: -12vh;
  background: radial-gradient(circle at center, rgba(255, 95, 122, 0.35), rgba(255, 95, 122, 0));
  animation-delay: -8s;
}

@keyframes orbFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(4vw, -2vh, 0) scale(1.1);
  }
}

@keyframes noiseDrift {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-12px, 9px);
  }
}

@keyframes scanFall {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes waveShift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -2vh, 0) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-noise,
  .bg-wave,
  .bg-scanline,
  .bg-orb {
    animation: none;
  }
}