/* ONYX ONE: IMMERSIVE GLASSMORPHIC & CHAMPAGNE ENGINE */
:root {
  --onyx-abyss: #050505;
  --onyx-glass: rgba(20, 20, 20, 0.65);
  --champagne-gold: #D4AF37;
  --gold-glow-node: rgba(212, 175, 55, 0.8);
  --gold-connecting-line: rgba(212, 175, 55, 0.3);
  --text-primary: #E0E0E0;
}

body {
  background: radial-gradient(circle at center, #1a1a1a 0%, var(--onyx-abyss) 100%);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  margin: 0;
  min-height: 100vh;
  backdrop-filter: blur(20px);
}

/* The Golden Web Glove Container */
.web-glove-container {
  background: var(--onyx-glass);
  border: 1px solid rgba(212, 175, 55, 0.2);
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37), inset 0 0 20px rgba(212, 175, 55, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Glowing Map Nodes */
.champagne-node {
  width: 12px;
  height: 12px;
  background-color: var(--champagne-gold);
  border-radius: 50%;
  box-shadow: 0 0 15px var(--gold-glow-node), 0 0 30px var(--gold-glow-node);
  animation: pulse 2s infinite ease-in-out;
}

.connecting-line {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-connecting-line), transparent);
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 15px var(--gold-glow-node); }
  50% { transform: scale(1.3); box-shadow: 0 0 25px var(--champagne-gold); }
  100% { transform: scale(1); box-shadow: 0 0 15px var(--gold-glow-node); }
}