:root {
  --bg-deep: #050510;
  --bg-panel: #0a0a1a;
  --bg-card: #0f1029;
  --neon-blue: #00e5ff;
  --neon-magenta: #ff00aa;
  --neon-green: #00ff88;
  --neon-yellow: #ffee00;
  --neon-orange: #ff8800;
  --text-dim: #4a5580;
  --text-mid: #8090bb;
  --text-bright: #c8d4f0;
}

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

body {
  background: var(--bg-deep);
  color: var(--text-bright);
  font-family: 'Share Tech Mono', monospace;
  overflow-x: hidden;
  min-height: 100vh;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(0,229,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,229,255,0.06) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, rgba(255,0,170,0.04) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

#root { position: relative; z-index: 1; }

@keyframes pulse-glow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 4px var(--neon-blue)); }
  50% { filter: brightness(1.3) drop-shadow(0 0 12px var(--neon-blue)); }
}

@keyframes pulse-available {
  0%, 100% { box-shadow: 0 0 8px rgba(0,229,255,0.3), inset 0 0 8px rgba(0,229,255,0.1); }
  50% { box-shadow: 0 0 20px rgba(0,229,255,0.6), inset 0 0 15px rgba(0,229,255,0.2); }
}

@keyframes unlock-burst {
  0% { transform: scale(1); filter: brightness(1); }
  30% { transform: scale(1.2); filter: brightness(2); }
  100% { transform: scale(1); filter: brightness(1.2); }
}

@keyframes float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(0.5); }
}

@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes slide-in-right {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slide-in-up {
  0% { transform: translateY(100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes toast-in {
  0% { transform: translateX(120%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

@keyframes confetti-fall {
  0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100px) rotate(720deg); opacity: 0; }
}

.node-unlocked {
  animation: unlock-burst 0.5s ease-out;
}

.panel-enter {
  animation: slide-in-right 0.3s ease-out;
}

@media (max-width: 768px) {
  .panel-enter {
    animation: slide-in-up 0.3s ease-out;
  }
}

.tp-counter {
  background: linear-gradient(90deg, transparent, var(--neon-green), transparent);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 3s ease-in-out infinite;
}

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* SVG line animations */
.connection-line {
  stroke-dasharray: 8 4;
  animation: dash-flow 1s linear infinite;
}

@keyframes dash-flow {
  to { stroke-dashoffset: -12; }
}