.container {
  --rune-color: #c9a227;
  --rune-glow: rgba(201, 162, 39, 0.5);
  
  display: flex;
  gap: 1.5rem;
  font-size: 2rem;
}

.rune {
  color: var(--rune-color);
  opacity: 0.6;
  transition: all 0.4s ease;
  animation: runeGlow 4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.rune:hover {
  opacity: 1;
  text-shadow: 0 0 20px var(--rune-glow);
  transform: scale(1.1);
}

@keyframes runeGlow {
  0%, 100% { 
    opacity: 0.4; 
    text-shadow: none;
  }
  50% { 
    opacity: 0.8; 
    text-shadow: 0 0 15px var(--rune-glow);
  }
}

/* Floating animation */
.floating .rune {
  animation: runeFloat 6s ease-in-out infinite;
}

@keyframes runeFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    opacity: 0.4;
  }
  25% { 
    transform: translateY(-10px) rotate(5deg);
    opacity: 0.7;
  }
  50% { 
    transform: translateY(0) rotate(0deg);
    opacity: 0.5;
  }
  75% { 
    transform: translateY(10px) rotate(-5deg);
    opacity: 0.7;
  }
}

/* Pulsing animation */
.pulsing .rune {
  animation: runePulse 2s ease-in-out infinite;
}

@keyframes runePulse {
  0%, 100% { 
    transform: scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: scale(1.15);
    opacity: 1;
    text-shadow: 0 0 25px var(--rune-glow);
  }
}

/* Flickering animation */
.flickering .rune {
  animation: runeFlicker 0.5s steps(2) infinite;
}

@keyframes runeFlicker {
  0% { opacity: 0.3; }
  25% { opacity: 0.8; }
  50% { opacity: 0.5; }
  75% { opacity: 0.9; }
  100% { opacity: 0.3; }
}

/* Scattered positioning */
.scattered {
  position: relative;
  width: 100%;
  height: 100%;
}

.scattered .rune {
  position: absolute;
}

/* Variants */
.gold { --rune-color: #c9a227; --rune-glow: rgba(201, 162, 39, 0.5); }
.blood { --rune-color: #8b1a1a; --rune-glow: rgba(139, 26, 26, 0.5); }
.bone { --rune-color: #d4c5a9; --rune-glow: rgba(212, 197, 169, 0.5); }
.iron { --rune-color: #4a4a4a; --rune-glow: rgba(74, 74, 74, 0.5); }
.cyan { --rune-color: #00f0ff; --rune-glow: rgba(0, 240, 255, 0.5); }

/* Vertical layout */
.vertical {
  flex-direction: column;
}

/* Size variants */
.sm { font-size: 1rem; gap: 0.75rem; }
.md { font-size: 2rem; gap: 1.5rem; }
.lg { font-size: 3rem; gap: 2rem; }
.xl { font-size: 4rem; gap: 3rem; }