.maturity-visual {
  --maturity-color: #b9e59b;
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  isolation: isolate;
}

.maturity-visual > .creature-sprite {
  position: relative;
  z-index: 2;
}

.maturity-visual::before,
.maturity-visual::after,
.maturity-visual > i {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 52%;
  width: 78%;
  height: 78%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  content: "";
}

.maturity-visual::before {
  border: 1px solid color-mix(in srgb, var(--maturity-color) 72%, transparent);
  box-shadow: 0 0 13px var(--maturity-color), inset 0 0 15px color-mix(in srgb, var(--maturity-color) 48%, transparent);
  opacity: .52;
  animation: maturity-pulse 2.8s ease-in-out infinite;
}

.maturity-visual::after {
  width: 92%;
  height: 92%;
  background:
    radial-gradient(circle at 12% 68%, var(--maturity-color) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 27%, var(--maturity-color) 0 2px, transparent 3px),
    radial-gradient(circle at 69% 87%, var(--maturity-color) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 28% 18%, var(--maturity-color) 0 1.5px, transparent 2.5px);
  filter: drop-shadow(0 0 4px var(--maturity-color));
  opacity: .75;
  animation: maturity-drift 3.8s ease-in-out infinite alternate;
}

.maturity-visual > i {
  width: 86%;
  height: 86%;
  box-shadow: 0 0 28px color-mix(in srgb, var(--maturity-color) 38%, transparent);
  opacity: .48;
}

.maturity-natura { --maturity-color: #86d26e; }
.maturity-woda { --maturity-color: #68cce8; }
.maturity-ogien { --maturity-color: #ff9b52; }
.maturity-elektrycznosc { --maturity-color: #f4db54; }
.maturity-wiatr { --maturity-color: #b7e8dc; }
.maturity-astrum { --maturity-color: #ae87ef; }

.maturity-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  border: 1px solid #b89b55aa;
  border-radius: 999px;
  padding: 2px 6px;
  background: #8c6f2420;
  color: #99762c;
  font-size: .66rem;
  font-weight: 1000;
  letter-spacing: .03em;
  white-space: nowrap;
}

@keyframes maturity-pulse {
  50% { opacity: .82; transform: translate(-50%, -50%) scale(1.06); }
}

@keyframes maturity-drift {
  to { transform: translate(-50%, -54%) rotate(4deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .maturity-visual::before,
  .maturity-visual::after { animation: none; }
}