.visual-planet {
  background: var(--ink);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  cursor: crosshair;
}

.visual-planet:before {
  content: '';
  position: absolute;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgba(145, 186, 255, .2), transparent 58%);
  filter: blur(16px);
  pointer-events: none;
}


.planet-texture {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.planet-ring {
  position: absolute;
  z-index: 5;
  width: 78%;
  height: 18%;
  border: 2px solid var(--acid);
  border-radius: 50%;
  transform: rotate(-19deg);
  box-shadow: 0 0 18px rgba(213, 255, 79, .2);
  pointer-events: none;
}

.planet-ring:after {
  content: '';
  position: absolute;
  inset: 22% 5%;
  border-top: 1px solid rgba(240, 238, 232, .48);
  border-bottom: 1px solid rgba(240, 238, 232, .2);
  border-radius: 50%;
}

.planet-spark {
  position: absolute;
  z-index: 6;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 18px var(--coral);
  pointer-events: none;
}

.spark-one { top: 20%; right: 23%; }
.spark-two { bottom: 23%; left: 22%; background: var(--paper); box-shadow: 0 0 18px var(--paper); }

@media (prefers-reduced-motion: reduce) {
  .planet-ring,
  .planet-spark {
    animation: none;
  }
}