/*
 * The game's pieces (components/neon.php): the SVG scenes take their colours from these
 * classes; neon-orb is a single glowing orb in HTML.
 */

.neon {
  overflow: visible;
  height: auto;
}

.neon__arena {
  fill: var(--arena);
}

.neon__dot {
  fill: var(--grid);
}

.neon__fill--cyan {
  fill: var(--cyan);
}

.neon__fill--magenta {
  fill: var(--magenta);
}

.neon__fill--lime {
  fill: var(--lime);
}

.neon__fill--prism-1 {
  fill: var(--prism-1);
}

.neon__fill--prism-2 {
  fill: var(--prism-2);
}

.neon__fill--prism-3 {
  fill: var(--prism-3);
}

.neon__fill--prism-4 {
  fill: var(--prism-4);
}

.neon__fill--prism-5 {
  fill: var(--prism-5);
}

.neon__fill--prism-6 {
  fill: var(--prism-6);
}

.neon__fill--prism-7 {
  fill: var(--prism-7);
}

.neon__stroke--cyan {
  stroke: var(--cyan);
}

.neon__stroke--magenta {
  stroke: var(--magenta);
}

.neon__stroke--lime {
  stroke: var(--lime);
}

.neon__highlight {
  fill: rgb(255 255 255 / 80%);
}

.neon__eye {
  fill: var(--bg);
}

.neon__prism {
  fill: var(--ink);
}

/* Gates: the outline of each cell; hatched (deadly) or hollow and dimmer (safe) */

.neon__gate {
  fill: none;
  stroke-width: 2;
}

.neon__gate--safe {
  opacity: 0.55;
}

.neon__border {
  fill: none;
  stroke-width: 2;
}

.neon__popup {
  font: 800 14px/1 var(--text);
  letter-spacing: 1.5px;
}

/* One orb: a dot in its colour with a glow of it */

.neon-orb {
  --orb: var(--cyan);
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--orb);
  box-shadow: 0 0 8px var(--orb), 0 0 20px color-mix(in srgb, var(--orb) 60%, transparent);
}

.neon-orb--magenta {
  --orb: var(--magenta);
}

.neon-orb--lime {
  --orb: var(--lime);
}