/* ============================================================
   BASE.CSS — CSS variables, reset, global layout
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Nunito:wght@400;600;700;900&display=swap');

html { font-size: 16px; }

:root {
  --neon-green:    #39FF14;
  --electric-blue: #00D4FF;
  --hot-pink:      #FF2D78;
  --purple:        #8B5CF6;
  --orange:        #FF6B35;
  --yellow:        #FFD600;
  --dark:          #0A0A0F;
  --dark2:         #12121A;
  --dark3:         #1A1A28;
  --card:          #1E1E2E;
  --text:          #F0F0FF;

  --radius-sm:  12px;
  --radius-md:  18px;
  --radius-lg:  24px;
  --radius-xl:  32px;
  --radius-pill: 50px;
}

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

body {
  font-family: 'Nunito', sans-serif;
  background: var(--dark);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Ambient background */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(139,92,246,.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 80%, rgba(0,212,255,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(57,255,20,.05) 0%, transparent 60%),
    url('../assets/math_bg.png') center/cover no-repeat;
  background-blend-mode: normal, normal, normal, overlay;
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
}

.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
}

/* Shared screen wrapper */
.screen {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.screen.active { display: flex; flex-direction: column; }

.screen-inner {
  max-width: 38.75rem;
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.screen-inner.center-col {
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Particles overlay */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}
.particle {
  position: absolute;
  border-radius: 50%;
  animation: particle-fly 1.2s ease-out forwards;
}

@media (min-width: 2560px) {
  html { font-size: 28px; }
}
@media (min-width: 3840px) {
  html { font-size: 36px; }
}