css/neon-effects.css

.glass-panel {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 35, 0.8) 0%,
    rgba(10, 10, 25, 0.6) 100%
  );
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(100, 200, 255, 0.12);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.glass-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(100, 200, 255, 0.2) 50%,
    transparent 100%
  );
}

.neon-text-cyan {
  color: var(--neon-cyan);
  text-shadow:
    0 0 4px var(--neon-cyan),
    0 0 8px rgba(0, 240, 255, 0.4);
}

.neon-text-green {
  color: var(--neon-green);
  text-shadow:
    0 0 4px var(--neon-green),
    0 0 8px rgba(0, 255, 136, 0.4);
}

.neon-text-red {
  color: var(--neon-red);
  text-shadow:
    0 0 4px var(--neon-red),
    0 0 8px rgba(255, 51, 102, 0.4);
}

.neon-text-blue {
  color: var(--neon-blue);
  text-shadow:
    0 0 4px var(--neon-blue),
    0 0 8px rgba(51, 153, 255, 0.4);
}

.neon-text-amber {
  color: var(--neon-amber);
  text-shadow:
    0 0 4px var(--neon-amber),
    0 0 8px rgba(255, 170, 0, 0.4);
}

.neon-text-purple {
  color: var(--neon-purple);
  text-shadow:
    0 0 4px var(--neon-purple),
    0 0 8px rgba(204, 102, 255, 0.4);
}

.neon-border-cyan {
  border-color: var(--neon-cyan);
  box-shadow:
    0 0 6px rgba(0, 240, 255, 0.15),
    inset 0 0 6px rgba(0, 240, 255, 0.05);
}

.neon-border-green {
  border-color: var(--neon-green);
  box-shadow:
    0 0 6px rgba(0, 255, 136, 0.15),
    inset 0 0 6px rgba(0, 255, 136, 0.05);
}

.depth-1 {
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 0 1px rgba(100, 200, 255, 0.1);
}

.depth-2 {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.4),
    0 0 2px rgba(100, 200, 255, 0.12);
}

.depth-3 {
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 4px rgba(100, 200, 255, 0.15);
}

.neon-divider {
  width: 100%;
  height: 1px;
  border: none;
  margin: 8px 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(100, 200, 255, 0.2) 20%,
    rgba(100, 200, 255, 0.2) 80%,
    transparent 100%
  );
}

.gradient-accent {
  background: linear-gradient(
    135deg,
    var(--neon-cyan) 0%,
    var(--neon-purple) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#panel-stats.hud-panel {
  background: linear-gradient(
    160deg,
    rgba(0, 255, 136, 0.03) 0%,
    rgba(12, 12, 30, 0.75) 30%
  );
}

#panel-performance.hud-panel {
  background: linear-gradient(
    200deg,
    rgba(0, 240, 255, 0.03) 0%,
    rgba(12, 12, 30, 0.75) 30%
  );
}

#panel-generation.hud-panel {
  background: linear-gradient(
    180deg,
    rgba(204, 102, 255, 0.05) 0%,
    rgba(12, 12, 30, 0.8) 50%
  );
}

#panel-events.hud-panel {
  background: linear-gradient(
    0deg,
    rgba(12, 12, 30, 0.85) 0%,
    rgba(12, 12, 30, 0.7) 100%
  );
}

#panel-charts.hud-panel {
  background: linear-gradient(
    225deg,
    rgba(51, 153, 255, 0.03) 0%,
    rgba(12, 12, 30, 0.8) 30%
  );
}

.scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 2px,
    rgba(100, 200, 255, 0.01) 2px,
    rgba(100, 200, 255, 0.01) 4px
  );
}

.type-gatherer {
  color: var(--gatherer-color);
}
.type-predator {
  color: var(--predator-color);
}
.type-builder {
  color: var(--builder-color);
}
.type-explorer {
  color: var(--explorer-color);
}
.type-hybrid {
  color: var(--hybrid-color);
}

.dot-gatherer {
  background: var(--gatherer-color);
}
.dot-predator {
  background: var(--predator-color);
}
.dot-builder {
  background: var(--builder-color);
}
.dot-explorer {
  background: var(--explorer-color);
}
.dot-hybrid {
  background: var(--hybrid-color);
}

.entity-tooltip {
  position: absolute;
  z-index: var(--z-modal);
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(6, 6, 15, 0.95);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(100, 200, 255, 0.2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.entity-tooltip .tooltip-row {
  padding: 1px 0;
}

.entity-tooltip .tooltip-label {
  color: var(--text-muted);
  margin-right: 8px;
}

.neon-bar {
  height: 3px;
  border-radius: 2px;
  background: var(--bg-secondary);
  overflow: hidden;
  margin: 4px 0;
}

.neon-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.neon-bar-fill.cyan {
  background: var(--neon-cyan);
  box-shadow: 0 0 6px var(--neon-cyan);
}
.neon-bar-fill.green {
  background: var(--neon-green);
  box-shadow: 0 0 6px var(--neon-green);
}
.neon-bar-fill.red {
  background: var(--neon-red);
  box-shadow: 0 0 6px var(--neon-red);
}
.neon-bar-fill.amber {
  background: var(--neon-amber);
  box-shadow: 0 0 6px var(--neon-amber);
}

@media (prefers-reduced-motion: reduce) {
  .neon-bar-fill {
    transition: none;
  }
}