/* PlayNova Atlas · NEON PLAY — reference color system (#050714 / #FF00FF / #00FFFF / #8A2BE2) */

:root {
  /* —— Reference neon palette —— */
  --at-void: #050714;
  --at-void-2: #0a0f28;
  --at-void-3: #111836;
  --at-glass: rgba(10, 15, 40, 0.82);
  --at-surface: rgba(14, 20, 48, 0.92);
  --at-surface-2: #151d45;
  --at-ink: #ffffff;
  --at-ink-soft: #b8c4e8;
  --at-ink-muted: #6b7a9e;
  --at-accent: #00ffff;
  --at-accent-hover: #66ffff;
  --at-accent-soft: rgba(0, 255, 255, 0.12);
  --at-magenta: #ff00ff;
  --at-magenta-soft: rgba(255, 0, 255, 0.14);
  --at-violet: #8a2be2;
  --at-line: rgba(100, 120, 180, 0.22);
  --at-line-neon: rgba(0, 255, 255, 0.42);
  --at-focus: #00ffff;
  --at-stage: #03050f;
  --at-footer-bg: #060a18;
  --at-footer-ink: #dce4ff;
  --at-glow-cyan: 0 0 22px rgba(0, 255, 255, 0.42), 0 0 44px rgba(0, 255, 255, 0.14);
  --at-glow-magenta: 0 0 20px rgba(255, 0, 255, 0.38), 0 0 40px rgba(255, 0, 255, 0.12);
  --at-glow-violet: 0 0 24px rgba(138, 43, 226, 0.35);
  --at-gradient-primary: linear-gradient(90deg, #bd00ff 0%, #ff00ff 42%, #00c6ff 100%);
  --at-gradient-mag-cyan: linear-gradient(90deg, #ff00ff, #00ffff);

  /* Legacy aliases */
  --at-paper: var(--at-void);
  --at-paper-2: var(--at-void-2);
  --at-paper-3: var(--at-void-3);
  --at-signal: var(--at-magenta);
  --at-signal-soft: var(--at-magenta-soft);
  --at-line-strong: var(--at-line-neon);

  /* —— Typography —— */
  --at-font-display: "Exo 2", system-ui, sans-serif;
  --at-font-body: "Inter", system-ui, sans-serif;
  --at-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* —— Spacing —— */
  --at-space-2xs: 0.375rem;
  --at-space-xs: 0.625rem;
  --at-space-sm: 1rem;
  --at-space-md: 1.5rem;
  --at-space-lg: 2.5rem;
  --at-space-xl: 4rem;
  --at-space-2xl: 5.5rem;

  /* —— Radius —— */
  --at-radius-sm: 8px;
  --at-radius-md: 12px;
  --at-radius-lg: 20px;
  --at-radius-pill: 999px;

  /* —— Motion —— */
  --at-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --at-dur: 220ms;
  --at-dur-slow: 420ms;

  /* —— Layout —— */
  --at-max: min(100% - 1.5rem, 1180px);
  --at-header-h: 64px;
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  font-family: var(--at-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--at-ink);
  background-color: var(--at-void);
  background-image:
    linear-gradient(rgba(0, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(ellipse 70% 45% at 12% -5%, rgba(255, 0, 255, 0.16), transparent 55%),
    radial-gradient(ellipse 55% 40% at 95% 8%, rgba(0, 255, 255, 0.12), transparent 50%),
    radial-gradient(ellipse 45% 32% at 50% 100%, rgba(138, 43, 226, 0.14), transparent 55%);
  background-size: 48px 48px, 48px 48px, auto, auto, auto;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--at-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--at-accent-hover);
}

:focus-visible {
  outline: 2px solid var(--at-focus);
  outline-offset: 3px;
}

.at-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: var(--at-space-xs) var(--at-space-sm);
  background: var(--at-accent);
  color: var(--at-void);
  font-weight: 600;
}

.at-skip:focus {
  left: var(--at-space-sm);
  top: var(--at-space-sm);
}

.at-shell {
  width: var(--at-max);
  margin-inline: auto;
}

.at-label {
  font-family: var(--at-font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--at-accent);
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.35);
}

.at-display {
  font-family: var(--at-font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  overflow-wrap: anywhere;
  min-width: 0;
}

.at-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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