/*
 * The game's world (components/maze.php): wall tubes in the zones' colours, drawn with the
 * game's four strokes (sizes in tiles), pellets, power pellets and the pickups.
 */

.maze {
  display: block;
  overflow: visible;
}

.maze__zone--neon {
  --wall: var(--wall-neon);
}

.maze__zone--ice {
  --wall: var(--wall-ice);
}

.maze__zone--blackout {
  --wall: var(--wall-blackout);
}

.maze__zone--haunted {
  --wall: var(--wall-haunted);
}

.maze__wall {
  fill: none;
  stroke: var(--wall);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.maze__wall--halo {
  stroke-width: 0.62;
  stroke-opacity: 0.12;
}

.maze__wall--glow {
  stroke-width: 0.48;
  stroke-opacity: 0.22;
}

.maze__wall--tube {
  stroke-width: 0.36;
}

.maze__wall--core {
  stroke: var(--bg);
  stroke-width: 0.17;
}

.maze__pellets {
  fill: none;
  stroke: var(--pellet);
  stroke-width: 0.18;
  stroke-linecap: round;
}

.maze__power {
  fill: var(--power);
}

.maze__item {
  fill: var(--surface);
  stroke: var(--item);
  stroke-width: 0.07;
}

/* A pickup on its own: a pellet, a glowing power pellet, or an item in its glowing ring. */

.pickup {
  width: 56px;
  height: 56px;
  flex: none;
  overflow: visible;
}

.pickup--dash,
.maze__item--dash {
  --item: var(--item-dash);
}

.pickup--magnet,
.maze__item--magnet {
  --item: var(--item-magnet);
}

.pickup--freeze,
.maze__item--freeze {
  --item: var(--item-freeze);
}

.pickup--phase,
.maze__item--phase {
  --item: var(--item-phase);
}

.pickup--bomb,
.maze__item--bomb {
  --item: var(--item-bomb);
}

.pickup--item {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--item) 75%, transparent));
}

.pickup__ring {
  fill: var(--surface);
}

.pickup__arc {
  fill: none;
  stroke: var(--item);
  stroke-width: 0.07;
  stroke-linecap: round;
}

.pickup__icon {
  fill: var(--item);
}

.pickup__pellet {
  fill: var(--pellet);
}

.pickup__power {
  fill: var(--power);
}

.pickup--power {
  filter: drop-shadow(0 0 7px var(--power));
}