.maze-art {
  background:
    linear-gradient(rgba(75,108,255,.38) 2px, transparent 2px),
    linear-gradient(90deg, rgba(75,108,255,.38) 2px, transparent 2px),
    radial-gradient(circle at 50% 20%, #14295a, #071126 68%, #03050b);
  background-size: 24px 24px, 24px 24px, auto;
}
.maze-art::before,
.maze-art::after {
  content: "";
  position: absolute;
  background: #071126;
  border: 2px solid #4b6cff;
  box-shadow: 0 0 7px rgba(75,108,255,.45);
}
.maze-art::before { left: 12px; top: 17px; width: 58px; height: 19px; }
.maze-art::after { right: 10px; bottom: 19px; width: 44px; height: 34px; }
.maze-runner {
  position: absolute;
  z-index: 2;
  left: 21px;
  bottom: 37px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #7cffb2;
  box-shadow: 0 0 13px rgba(124,255,178,.8);
}
.maze-runner::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 7px;
  width: 13px;
  height: 13px;
  transform: rotate(45deg);
  background: #071126;
}
.maze-hunter {
  position: absolute;
  z-index: 2;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  box-shadow: 0 0 10px currentColor;
}
.maze-hunter::before,
.maze-hunter::after {
  content: "";
  position: absolute;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #071126;
}
.maze-hunter::before { left: 5px; }
.maze-hunter::after { right: 5px; }
.mh1 { right: 17px; top: 26px; color: #ff6680; background: #ff6680; }
.mh2 { right: 42px; top: 68px; color: #65e7ff; background: #65e7ff; }
.maze-node {
  position: absolute;
  z-index: 2;
  left: 52px;
  top: 64px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffe66d;
  box-shadow: 0 0 13px #ffe66d;
}

.rally-art {
  background:
    linear-gradient(rgba(101,231,255,.07) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, #15315a, #081127 62%, #03050b);
  background-size: 100% 22px, auto;
}
.rally-line {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.38) 0 7px, transparent 7px 14px);
}
.rally-paddle {
  position: absolute;
  left: 50%;
  width: 62px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 999px;
}
.rp-top { top: 24px; background: #ff5ecf; box-shadow: 0 0 12px rgba(255,94,207,.8); }
.rp-bottom { bottom: 24px; background: #65e7ff; box-shadow: 0 0 12px rgba(101,231,255,.8); }
.rally-ball {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 13px;
  height: 13px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: #fff3a5;
  box-shadow: 0 0 14px #ffe66d;
}

.snake-art {
  background:
    linear-gradient(rgba(124,255,178,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,255,178,.07) 1px, transparent 1px),
    radial-gradient(circle at 55% 45%, #123b3d, #071426 62%, #03050b);
  background-size: 18px 18px, 18px 18px, auto;
}
.snake-body,
.snake-head {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: #7cffb2;
  box-shadow: 0 0 12px rgba(124,255,178,.72);
}
.snake-head { left: 64px; top: 38px; background: #eafff2; }
.snake-head::before,
.snake-head::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #062014;
}
.snake-head::before { left: 4px; }
.snake-head::after { right: 4px; }
.sb1 { left: 46px; top: 38px; }
.sb2 { left: 28px; top: 38px; }
.sb3 { left: 28px; top: 56px; }
.sb4 { left: 28px; top: 74px; }
.snake-food {
  position: absolute;
  right: 18px;
  bottom: 30px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffe66d;
  box-shadow: 0 0 15px #ffe66d;
}
.snake-orb {
  position: absolute;
  left: 17px;
  bottom: 21px;
  width: 16px;
  height: 16px;
  border: 3px solid #65e7ff;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(101,231,255,.85);
}