/* Local demo magnetar map object. */
#mapViewport #map .map-magnetar-tile {
  overflow: visible;
}

#mapViewport #map .tile.map-magnetar-hit-tile {
  cursor: pointer;
}

#mapViewport #map .map-magnetar-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  overflow: visible;
  pointer-events: none;
  isolation: isolate;
  filter: brightness(1);
  transition: filter 950ms ease;
}

#mapViewport #map .map-magnetar-wrap--colossal {
  inset: auto;
  left: 100%;
  top: 100%;
  width: 400%;
  height: 400%;
  transform: translate(-50%, -50%);
}

#mapViewport #map .map-magnetar-wrap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  display: block;
  width: 215%;
  height: 215%;
  border-radius: 46% 54% 39% 61% / 57% 41% 59% 43%;
  pointer-events: none;
  will-change: transform, opacity, filter, border-radius;
}

#mapViewport #map .map-magnetar-wrap::before {
  display: none;
  opacity: 0;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(188, 241, 255, 0.3), rgba(75, 174, 255, 0.14) 46%, transparent 100%),
    radial-gradient(ellipse, rgba(139, 224, 255, 0.27), rgba(55, 145, 255, 0.12) 48%, transparent 100%),
    radial-gradient(ellipse, rgba(175, 235, 255, 0.28), rgba(65, 159, 255, 0.13) 45%, transparent 100%),
    radial-gradient(ellipse, rgba(121, 211, 255, 0.24), rgba(43, 127, 246, 0.11) 49%, transparent 100%),
    radial-gradient(ellipse, rgba(165, 232, 255, 0.24), rgba(67, 156, 255, 0.12) 42%, transparent 100%),
    radial-gradient(ellipse, rgba(91, 188, 255, 0.2), rgba(45, 112, 239, 0.09) 48%, transparent 100%),
    radial-gradient(ellipse, rgba(140, 221, 255, 0.22), rgba(53, 139, 255, 0.1) 46%, transparent 100%),
    radial-gradient(ellipse, rgba(83, 176, 255, 0.2), rgba(39, 103, 230, 0.08) 49%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 22% 14%, 15% 23%, 25% 15%, 17% 22%, 24% 14%, 16% 24%, 27% 15%, 17% 23%;
  background-position: 6% 43%, 20% 14%, 43% 4%, 74% 16%, 88% 46%, 73% 77%, 42% 89%, 14% 74%;
  -webkit-mask: radial-gradient(circle, transparent 0 24%, rgba(0, 0, 0, 0.66) 34%, #000 47% 82%, rgba(0, 0, 0, 0.5) 91%, transparent 100%);
  mask: radial-gradient(circle, transparent 0 24%, rgba(0, 0, 0, 0.66) 34%, #000 47% 82%, rgba(0, 0, 0, 0.5) 91%, transparent 100%);
  filter: blur(5px) drop-shadow(0 0 7px rgba(75, 174, 255, 0.26));
  will-change: transform, opacity, filter, background-position;
  animation: magnetarFieldTurn 11s linear infinite, magnetarFieldPulse 4.6s ease-in-out infinite, magnetarCloudRadialDrift 5.4s ease-in-out infinite alternate;
}

#mapViewport #map .magnetar-field-clouds {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  display: block;
  width: 215%;
  height: 215%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  will-change: transform;
  animation: magnetarCloudFieldOrbit 11s linear infinite;
}

#mapViewport #map .magnetar-field-clouds i {
  position: absolute;
  display: block;
  border-radius: 48% 52% 61% 39% / 57% 42% 58% 43%;
  opacity: 0.76;
  background: radial-gradient(ellipse, rgba(215, 251, 255, 0.42), rgba(105, 211, 255, 0.25) 38%, rgba(52, 139, 242, 0.1) 70%, transparent 100%);
  mix-blend-mode: screen;
  filter: blur(6px) drop-shadow(0 0 9px rgba(104, 211, 255, 0.38));
  will-change: transform, opacity, filter;
  animation:
    magnetarCloudIndependentDrift var(--cloud-duration) cubic-bezier(0.37, 0.03, 0.58, 0.98) var(--cloud-delay) infinite,
    magnetarCloudIndependentGlow var(--cloud-glow-duration) ease-in-out var(--cloud-delay) infinite alternate;
}

#mapViewport #map .magnetar-field-clouds i::after {
  content: "";
  position: absolute;
  left: 42%;
  top: 17%;
  width: 150%;
  height: 66%;
  border-radius: 55% 45% 68% 32% / 46% 61% 39% 54%;
  background: linear-gradient(90deg, rgba(139, 229, 255, 0.2), rgba(75, 169, 255, 0.11) 42%, transparent 100%);
  filter: blur(5px);
  transform: rotate(var(--plasma-tail-angle, 0deg));
  transform-origin: 0 50%;
  pointer-events: none;
}

#mapViewport #map .magnetar-field-clouds i:nth-child(1) { left: -2%; top: 40%; width: 39%; height: 19%; --plasma-tail-angle: -50deg; --cloud-drift-x: 18px; --cloud-drift-y: 3px; --cloud-duration: 3.7s; --cloud-delay: -2.8s; --cloud-glow-duration: 2.9s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(2) { left: 12%; top: 8%; width: 27%; height: 36%; --plasma-tail-angle: -18deg; --cloud-drift-x: 11px; --cloud-drift-y: 13px; --cloud-duration: 5.6s; --cloud-delay: -0.9s; --cloud-glow-duration: 4.1s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(3) { left: 34%; top: -2%; width: 42%; height: 20%; --plasma-tail-angle: 17deg; --cloud-drift-x: 2px; --cloud-drift-y: 19px; --cloud-duration: 4.35s; --cloud-delay: -3.6s; --cloud-glow-duration: 3.3s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(4) { left: 67%; top: 10%; width: 29%; height: 37%; --plasma-tail-angle: 48deg; --cloud-drift-x: -12px; --cloud-drift-y: 14px; --cloud-duration: 6.2s; --cloud-delay: -4.7s; --cloud-glow-duration: 2.7s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(5) { left: 77%; top: 41%; width: 40%; height: 19%; --plasma-tail-angle: 91deg; --cloud-drift-x: -21px; --cloud-drift-y: -2px; --cloud-duration: 4.8s; --cloud-delay: -1.6s; --cloud-glow-duration: 3.8s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(6) { left: 65%; top: 70%; width: 28%; height: 36%; --plasma-tail-angle: 132deg; --cloud-drift-x: -10px; --cloud-drift-y: -15px; --cloud-duration: 3.95s; --cloud-delay: -3.1s; --cloud-glow-duration: 4.5s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(7) { left: 32%; top: 80%; width: 43%; height: 20%; --plasma-tail-angle: 176deg; --cloud-drift-x: 3px; --cloud-drift-y: -22px; --cloud-duration: 5.25s; --cloud-delay: -5.2s; --cloud-glow-duration: 3.15s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(8) { left: 6%; top: 67%; width: 29%; height: 35%; --plasma-tail-angle: 218deg; --cloud-drift-x: 14px; --cloud-drift-y: -12px; --cloud-duration: 6.7s; --cloud-delay: -2.2s; --cloud-glow-duration: 2.55s; }

#mapViewport #map .magnetar-field-clouds i:nth-child(1) { animation-name: magnetarCloudMergeA1, magnetarCloudIndependentGlow; animation-duration: 9.8s, 4.7s; animation-delay: -6.1s, -1.4s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(2) { animation-name: magnetarCloudMergeA2, magnetarCloudIndependentGlow; animation-duration: 9.8s, 6.2s; animation-delay: -6.1s, -4.8s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(4) { animation-name: magnetarCloudMergeB1, magnetarCloudIndependentGlow; animation-duration: 12.4s, 5.3s; animation-delay: -2.7s, -3.9s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(5) { animation-name: magnetarCloudMergeB2, magnetarCloudIndependentGlow; animation-duration: 12.4s, 7.1s; animation-delay: -2.7s, -0.8s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(6) { animation-name: magnetarCloudMergeC1, magnetarCloudIndependentGlow; animation-duration: 15.1s, 4.4s; animation-delay: -10.2s, -3.2s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(7) { animation-name: magnetarCloudMergeC2, magnetarCloudIndependentGlow; animation-duration: 15.1s, 6.8s; animation-delay: -10.2s, -5.7s; }
#mapViewport #map .magnetar-field-clouds i:nth-child(8) { animation-name: magnetarCloudMergeC3, magnetarCloudIndependentGlow; animation-duration: 15.1s, 5.7s; animation-delay: -10.2s, -1.9s; }

@keyframes magnetarCloudFieldOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes magnetarCloudIndependentDrift {
  0% { transform: translate(0, 0) scale(0.9, 1.04) rotate(-4deg); }
  61% { transform: translate(var(--cloud-drift-x), var(--cloud-drift-y)) scale(0.96, 1.09) rotate(-2deg); }
  100% { transform: translate(0, 0) scale(1.03, 0.96) rotate(5deg); }
}

@keyframes magnetarCloudIndependentGlow {
  0% { opacity: 0.72; filter: blur(6px) drop-shadow(0 0 8px rgba(104, 211, 255, 0.34)); }
  31% { opacity: 0.24; filter: blur(8px) drop-shadow(0 0 3px rgba(104, 211, 255, 0.13)); }
  57% { opacity: 0.94; filter: blur(4px) drop-shadow(0 0 13px rgba(139, 228, 255, 0.56)); }
  100% { opacity: 0.66; filter: blur(6.5px) drop-shadow(0 0 7px rgba(104, 211, 255, 0.3)); }
}

@keyframes magnetarCloudMergeA1 {
  0%, 20%, 100% { transform: translate(0, 0) scale(0.94, 1.04) rotate(-4deg); }
  44% { transform: translate(9px, -12px) scale(1.13, 1.02) rotate(6deg); }
  56% { transform: translate(13px, -16px) scale(1.32, 1.12) rotate(14deg); }
  68% { transform: translate(7px, -8px) scale(1.08, 0.96) rotate(4deg); }
}

@keyframes magnetarCloudMergeA2 {
  0%, 20%, 100% { transform: translate(0, 0) scale(1.02, 0.93) rotate(5deg); }
  44% { transform: translate(-3px, 10px) scale(1.12, 1.08) rotate(-5deg); }
  56% { transform: translate(-7px, 16px) scale(1.27, 1.18) rotate(-13deg); }
  68% { transform: translate(-2px, 7px) scale(1.05, 0.98) rotate(-3deg); }
}

@keyframes magnetarCloudMergeB1 {
  0%, 28%, 100% { transform: translate(0, 0) scale(0.96, 1.05) rotate(-3deg); }
  49% { transform: translate(8px, 9px) scale(1.1, 1.04) rotate(7deg); }
  61% { transform: translate(13px, 15px) scale(1.3, 1.14) rotate(16deg); }
  74% { transform: translate(5px, 6px) scale(1.06, 0.97) rotate(3deg); }
}

@keyframes magnetarCloudMergeB2 {
  0%, 28%, 100% { transform: translate(0, 0) scale(1.03, 0.94) rotate(4deg); }
  49% { transform: translate(-9px, -7px) scale(1.12, 1.02) rotate(-6deg); }
  61% { transform: translate(-15px, -12px) scale(1.26, 1.2) rotate(-15deg); }
  74% { transform: translate(-5px, -4px) scale(1.04, 1) rotate(-2deg); }
}

@keyframes magnetarCloudMergeC1 {
  0%, 24%, 100% { transform: translate(0, 0) scale(0.95, 1.05) rotate(-4deg); }
  48% { transform: translate(-11px, 5px) scale(1.13, 1.08) rotate(8deg); }
  59% { transform: translate(-18px, 8px) scale(1.35, 1.16) rotate(18deg); }
  72% { transform: translate(-7px, 3px) scale(1.06, 0.98) rotate(3deg); }
}

@keyframes magnetarCloudMergeC2 {
  0%, 24%, 100% { transform: translate(0, 0) scale(1.04, 0.94) rotate(5deg); }
  48% { transform: translate(1px, -8px) scale(1.15, 1.06) rotate(-5deg); }
  59% { transform: translate(3px, -14px) scale(1.38, 1.2) rotate(-16deg); }
  72% { transform: translate(1px, -5px) scale(1.07, 1) rotate(-2deg); }
}

@keyframes magnetarCloudMergeC3 {
  0%, 24%, 100% { transform: translate(0, 0) scale(0.93, 1.03) rotate(-3deg); }
  48% { transform: translate(14px, 3px) scale(1.1, 1.1) rotate(7deg); }
  59% { transform: translate(23px, 6px) scale(1.31, 1.18) rotate(15deg); }
  72% { transform: translate(8px, 2px) scale(1.05, 0.98) rotate(2deg); }
}

#mapViewport #map .map-magnetar-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  display: block;
  width: 69%;
  height: 69%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.46;
  background:
    radial-gradient(ellipse at 24% 35%, rgba(2, 18, 54, 0.72) 0 8%, transparent 26%),
    radial-gradient(ellipse at 73% 29%, rgba(5, 29, 73, 0.62) 0 10%, transparent 29%),
    radial-gradient(ellipse at 61% 73%, rgba(0, 13, 46, 0.7) 0 12%, transparent 31%),
    radial-gradient(ellipse at 29% 76%, rgba(9, 38, 87, 0.58) 0 9%, transparent 27%),
    conic-gradient(from 32deg,
      rgba(0, 12, 42, 0.5),
      transparent 16%,
      rgba(3, 22, 61, 0.6) 31%,
      transparent 49%,
      rgba(0, 10, 37, 0.56) 68%,
      transparent 84%,
      rgba(0, 19, 55, 0.48));
  -webkit-mask: radial-gradient(circle, #000 0 82%, rgba(0, 0, 0, 0.72) 91%, transparent 100%);
  mask: radial-gradient(circle, #000 0 82%, rgba(0, 0, 0, 0.72) 91%, transparent 100%);
  mix-blend-mode: multiply;
  filter: blur(1.7px);
  transform: translate(-50%, -50%) rotate(0deg) scale(0.96);
  transform-origin: center;
  will-change: transform, opacity;
  animation: magnetarAtmosphereDrift 3.25s linear infinite, magnetarAtmosphereBreathe 5.4s ease-in-out infinite alternate;
  animation-delay: var(--magnetar-atmosphere-turn-delay, 0s), var(--magnetar-atmosphere-breathe-delay, 0s);
}

#mapViewport #map .map-magnetar-image {
  position: relative;
  z-index: 2;
  display: block;
  width: 158%;
  height: 158%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 4px rgba(143, 235, 255, 0.72))
    drop-shadow(0 0 10px rgba(48, 154, 255, 0.62))
    drop-shadow(0 0 18px rgba(24, 83, 231, 0.36));
  transform: translateZ(0);
}

#mapViewport #map .magnetar-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: block;
  width: 116%;
  height: 116%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(circle,
      rgba(197, 247, 255, 0.2) 0 22%,
      rgba(82, 195, 255, 0.25) 34%,
      rgba(37, 119, 255, 0.18) 48%,
      rgba(22, 74, 213, 0.09) 61%,
      transparent 76%),
    radial-gradient(ellipse at 42% 37%,
      rgba(170, 239, 255, 0.24),
      rgba(54, 142, 255, 0.11) 43%,
      transparent 69%);
  filter: blur(5px) saturate(1.18);
  transform: translate(-50%, -50%) scale(0.96);
  transform-origin: center;
  will-change: transform, opacity, filter;
  animation: magnetarAuraBreathe 4.8s ease-in-out infinite alternate;
}

#mapViewport #map .magnetar-lightning {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: block;
  width: 69%;
  height: 69%;
  overflow: hidden;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: brightness(1);
  transition: filter 260ms ease;
}

#mapViewport #map .map-magnetar-tile .map-magnetar-wrap {
  filter: brightness(1.16) saturate(1.08);
}

#mapViewport #map .map-magnetar-tile .magnetar-lightning {
  filter: brightness(1.7) saturate(1.14) drop-shadow(0 0 3px rgba(119, 225, 255, 0.6));
}

#mapViewport #map .magnetar-bolt {
  --magnetar-bolt-cycle: 5.2s;
  --magnetar-bolt-delay: 0s;
  opacity: 1;
}

#mapViewport #map .magnetar-bolt-glow,
#mapViewport #map .magnetar-bolt-core,
#mapViewport #map .magnetar-bolt-branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  will-change: stroke-dashoffset, opacity;
}

#mapViewport #map .magnetar-bolt-glow {
  stroke: rgba(67, 177, 255, 0.72);
  stroke-width: 2.1px;
  filter: var(--magnetar-lightning-filter, url(#magnetarLightningGlowStandard));
}

#mapViewport #map .magnetar-bolt-core {
  stroke: rgba(225, 249, 255, 0.96);
  stroke-width: 0.62px;
}

#mapViewport #map .magnetar-bolt-branch {
  stroke: rgba(151, 224, 255, 0.82);
  stroke-width: 0.42px;
}

#mapViewport #map .magnetar-bolt-flash {
  fill: rgba(85, 186, 255, 0.15);
  filter: blur(5px);
  opacity: 0;
  animation: magnetarLightningFlash var(--magnetar-bolt-cycle) linear var(--magnetar-bolt-delay) infinite;
}

#mapViewport #map .magnetar-bolt--one {
  --magnetar-bolt-cycle: 4.9s;
  --magnetar-bolt-delay: 0.35s;
}

#mapViewport #map .magnetar-bolt--two {
  --magnetar-bolt-cycle: 6.3s;
  --magnetar-bolt-delay: 2.1s;
}

#mapViewport #map .magnetar-bolt--three {
  --magnetar-bolt-cycle: 7.6s;
  --magnetar-bolt-delay: 3.8s;
}

#mapViewport #map .map-magnetar-tile .magnetar-bolt--one {
  --magnetar-bolt-cycle: 0.92s;
  --magnetar-bolt-delay: 0s;
}

#mapViewport #map .map-magnetar-tile .magnetar-bolt--two {
  --magnetar-bolt-cycle: 1.14s;
  --magnetar-bolt-delay: 0.14s;
}

#mapViewport #map .map-magnetar-tile .magnetar-bolt--three {
  --magnetar-bolt-cycle: 1.36s;
  --magnetar-bolt-delay: 0.31s;
}

#mapViewport #map .magnetar-bolt-glow,
#mapViewport #map .magnetar-bolt-core {
  animation: magnetarLightningTrace var(--magnetar-bolt-cycle) linear var(--magnetar-bolt-delay) infinite;
}

#mapViewport #map .magnetar-bolt-branch {
  animation: magnetarLightningBranchTrace var(--magnetar-bolt-cycle) linear var(--magnetar-bolt-delay) infinite;
}

#mapViewport #map .magnetar-legacy-bolt {
  opacity: 0;
  will-change: opacity;
}

#mapViewport #map .magnetar-legacy-bolt-glow,
#mapViewport #map .magnetar-legacy-bolt-core,
#mapViewport #map .magnetar-legacy-bolt-branch {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

#mapViewport #map .magnetar-legacy-bolt-glow {
  stroke: rgba(64, 173, 255, 0.68);
  stroke-width: 1.8px;
  filter: var(--magnetar-lightning-filter, url(#magnetarLightningGlowStandard));
}

#mapViewport #map .magnetar-legacy-bolt-core {
  stroke: rgba(232, 251, 255, 0.92);
  stroke-width: 0.54px;
}

#mapViewport #map .magnetar-legacy-bolt-branch {
  stroke: rgba(145, 220, 255, 0.75);
  stroke-width: 0.36px;
}

#mapViewport #map .magnetar-legacy-bolt--one {
  animation: magnetarLegacyFlashOne 8.1s steps(1, end) 1.7s infinite;
}

#mapViewport #map .magnetar-legacy-bolt--two {
  animation: magnetarLegacyFlashTwo 9.4s steps(1, end) 4.6s infinite;
}

#mapViewport #map .magnetar-legacy-bolt--three {
  animation: magnetarLegacyFlashThree 11.2s steps(1, end) 7.3s infinite;
}

#mapViewport #map .map-magnetar-tile .magnetar-legacy-bolt--one {
  animation: magnetarLegacyFlashOne 0.78s steps(1, end) 0.08s infinite;
}

#mapViewport #map .map-magnetar-tile .magnetar-legacy-bolt--two {
  animation: magnetarLegacyFlashTwo 0.96s steps(1, end) 0.24s infinite;
}

#mapViewport #map .map-magnetar-tile .magnetar-legacy-bolt--three {
  animation: magnetarLegacyFlashThree 1.12s steps(1, end) 0.41s infinite;
}

#mapViewport #map .map-magnetar-tile .magnetar-bolt-glow,
#mapViewport #map .map-magnetar-tile .magnetar-legacy-bolt-glow {
  stroke-width: 2.5px;
}

#mapViewport #map .map-magnetar-tile .magnetar-bolt-core,
#mapViewport #map .map-magnetar-tile .magnetar-legacy-bolt-core {
  stroke-width: 0.82px;
}

#mapViewport #map .map-magnetar-tile .magnetar-bolt-branch,
#mapViewport #map .map-magnetar-tile .magnetar-legacy-bolt-branch {
  stroke-width: 0.56px;
}

/* The colossal magnetar uses a softer Solana-inspired mint/cyan/violet spectrum. */
#mapViewport #map .map-magnetar-wrap--colossal::before {
  background:
    radial-gradient(ellipse, rgba(20, 241, 149, 0.24), rgba(0, 209, 255, 0.12) 46%, transparent 100%),
    radial-gradient(ellipse, rgba(0, 209, 255, 0.23), rgba(153, 69, 255, 0.11) 48%, transparent 100%),
    radial-gradient(ellipse, rgba(177, 255, 231, 0.22), rgba(20, 241, 149, 0.1) 45%, transparent 100%),
    radial-gradient(ellipse, rgba(184, 139, 255, 0.2), rgba(153, 69, 255, 0.09) 49%, transparent 100%),
    radial-gradient(ellipse, rgba(107, 255, 211, 0.2), rgba(0, 209, 255, 0.1) 42%, transparent 100%),
    radial-gradient(ellipse, rgba(179, 130, 255, 0.18), rgba(108, 65, 214, 0.08) 48%, transparent 100%),
    radial-gradient(ellipse, rgba(76, 237, 255, 0.19), rgba(20, 241, 149, 0.09) 46%, transparent 100%),
    radial-gradient(ellipse, rgba(197, 165, 255, 0.17), rgba(153, 69, 255, 0.07) 49%, transparent 100%);
  filter: blur(5px) drop-shadow(0 0 8px rgba(20, 241, 149, 0.2));
}

#mapViewport #map .map-magnetar-wrap--colossal::after {
  background:
    radial-gradient(ellipse at 24% 35%, rgba(15, 38, 57, 0.68) 0 8%, transparent 26%),
    radial-gradient(ellipse at 73% 29%, rgba(39, 19, 72, 0.58) 0 10%, transparent 29%),
    radial-gradient(ellipse at 61% 73%, rgba(4, 46, 51, 0.66) 0 12%, transparent 31%),
    radial-gradient(ellipse at 29% 76%, rgba(42, 22, 76, 0.54) 0 9%, transparent 27%),
    conic-gradient(from 32deg,
      rgba(4, 39, 47, 0.46), transparent 16%,
      rgba(43, 19, 75, 0.54) 31%, transparent 49%,
      rgba(3, 43, 49, 0.52) 68%, transparent 84%,
      rgba(35, 18, 68, 0.45));
}

#mapViewport #map .map-magnetar-wrap--colossal .map-magnetar-image {
  filter:
    hue-rotate(38deg) saturate(0.92)
    drop-shadow(0 0 5px rgba(20, 241, 149, 0.55))
    drop-shadow(0 0 12px rgba(0, 209, 255, 0.45))
    drop-shadow(0 0 21px rgba(153, 69, 255, 0.3));
}

#mapViewport #map .map-magnetar-wrap--colossal .magnetar-aura {
  background:
    radial-gradient(circle,
      rgba(205, 255, 239, 0.18) 0 22%,
      rgba(20, 241, 149, 0.21) 34%,
      rgba(0, 209, 255, 0.17) 48%,
      rgba(153, 69, 255, 0.09) 61%,
      transparent 76%),
    radial-gradient(ellipse at 42% 37%,
      rgba(177, 255, 231, 0.21),
      rgba(153, 69, 255, 0.1) 43%,
      transparent 69%);
}

#mapViewport #map .map-magnetar-wrap--colossal .magnetar-field-clouds i {
  background: radial-gradient(ellipse, rgba(202, 255, 239, 0.36), rgba(20, 241, 149, 0.21) 38%, rgba(153, 69, 255, 0.09) 70%, transparent 100%);
  filter: blur(6px) drop-shadow(0 0 9px rgba(0, 209, 255, 0.3));
}

#mapViewport #map .map-magnetar-wrap--colossal .magnetar-field-clouds i::after {
  background: linear-gradient(90deg, rgba(20, 241, 149, 0.18), rgba(0, 209, 255, 0.1) 42%, rgba(153, 69, 255, 0.04) 72%, transparent 100%);
}

#mapViewport #map .map-magnetar-wrap--colossal .magnetar-bolt-glow,
#mapViewport #map .map-magnetar-wrap--colossal .magnetar-legacy-bolt-glow {
  stroke: rgba(20, 241, 149, 0.72);
}

#mapViewport #map .map-magnetar-wrap--colossal .magnetar-bolt-core,
#mapViewport #map .map-magnetar-wrap--colossal .magnetar-legacy-bolt-core {
  stroke: rgba(203, 255, 239, 0.94);
}

#mapViewport #map .map-magnetar-wrap--colossal .magnetar-bolt-branch,
#mapViewport #map .map-magnetar-wrap--colossal .magnetar-legacy-bolt-branch {
  stroke: rgba(183, 139, 255, 0.8);
}

#mapViewport #map .map-magnetar-wrap--colossal .magnetar-bolt-flash {
  fill: rgba(0, 209, 255, 0.14);
}

#mapViewport #map .magnetar-asteroid-orbits {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  overflow: visible;
  pointer-events: none;
}

#mapViewport #map .magnetar-asteroid-track {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: var(--asteroid-orbit-size, 240%);
  height: var(--asteroid-orbit-size, 240%);
  transform-origin: center;
  will-change: transform;
  animation: colossalMagnetarAsteroidOrbit var(--asteroid-orbit-duration, 52s) linear infinite;
}

#mapViewport #map .magnetar-orbiting-asteroid {
  position: absolute;
  left: 100%;
  top: 50%;
  display: block;
  width: var(--asteroid-visual-size, 7%);
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%);
  transform-origin: center;
  filter:
    brightness(1.1)
    drop-shadow(0 0 4px rgba(20, 241, 149, 0.28))
    drop-shadow(0 0 8px rgba(0, 209, 255, 0.2));
  will-change: transform;
  animation: colossalMagnetarAsteroidSpin var(--asteroid-spin-duration, 13s) linear infinite;
}

#mapViewport #map .magnetar-orbiting-asteroid--large {
  filter:
    brightness(1.08)
    drop-shadow(0 0 5px rgba(20, 241, 149, 0.24))
    drop-shadow(0 0 10px rgba(0, 209, 255, 0.18));
}

@keyframes colossalMagnetarAsteroidOrbit {
  from { transform: translate(-50%, -50%) rotate(var(--asteroid-start-angle, 0deg)); }
  to { transform: translate(-50%, -50%) rotate(calc(var(--asteroid-start-angle, 0deg) + 360deg)); }
}

@keyframes colossalMagnetarAsteroidSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

@keyframes magnetarFieldTurn {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(0.98); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(0.98); }
}

@keyframes magnetarFieldMorph {
  0% { border-radius: 46% 54% 39% 61% / 57% 41% 59% 43%; }
  31% { border-radius: 62% 38% 55% 45% / 36% 64% 42% 58%; }
  67% { border-radius: 37% 63% 47% 53% / 64% 39% 61% 36%; }
  100% { border-radius: 55% 45% 66% 34% / 44% 58% 42% 56%; }
}

@keyframes magnetarFieldPulse {
  0%, 100% { opacity: 0.5; filter: blur(8px) drop-shadow(0 0 6px rgba(126, 232, 255, 0.18)); }
  50% { opacity: 0.72; filter: blur(10px) drop-shadow(0 0 11px rgba(154, 242, 255, 0.3)); }
}

@keyframes magnetarCloudRadialDrift {
  0%, 100% {
    background-position: 6% 43%, 20% 14%, 43% 4%, 74% 16%, 88% 46%, 73% 77%, 42% 89%, 14% 74%;
  }
  45% {
    background-position: 15% 44%, 25% 22%, 44% 13%, 68% 24%, 80% 47%, 68% 69%, 43% 78%, 22% 68%;
  }
  72% {
    background-position: 10% 41%, 29% 18%, 41% 9%, 71% 20%, 84% 50%, 64% 73%, 47% 82%, 18% 63%;
  }
}

@keyframes magnetarAtmosphereDrift {
  from { transform: translate(-50%, -50%) rotate(0deg) scale(0.96); }
  to { transform: translate(-50%, -50%) rotate(360deg) scale(0.96); }
}

@keyframes magnetarAtmosphereBreathe {
  from { opacity: 0.36; }
  to { opacity: 0.54; }
}

@keyframes magnetarAuraBreathe {
  from {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.94);
    filter: blur(4px) saturate(1.12);
  }
  to {
    opacity: 0.82;
    transform: translate(-50%, -50%) scale(1.04);
    filter: blur(6.5px) saturate(1.28);
  }
}

@keyframes magnetarLightningTrace {
  0%, 6% { opacity: 0; stroke-dashoffset: 1; }
  6.12% { opacity: 0.94; stroke-dashoffset: 1; }
  7.45% { opacity: 1; stroke-dashoffset: 0; }
  8.05% { opacity: 0.68; stroke-dashoffset: 0; }
  8.7%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes magnetarLightningBranchTrace {
  0%, 6.65% { opacity: 0; stroke-dashoffset: 1; }
  6.78% { opacity: 0.78; stroke-dashoffset: 1; }
  8.05% { opacity: 0.9; stroke-dashoffset: 0; }
  8.55% { opacity: 0.48; stroke-dashoffset: 0; }
  9%, 100% { opacity: 0; stroke-dashoffset: 0; }
}

@keyframes magnetarLightningFlash {
  0%, 6.5%, 9%, 100% { opacity: 0; }
  7.35% { opacity: 0.58; }
  8.15% { opacity: 0.14; }
}

@keyframes magnetarLegacyFlashOne {
  0%, 18%, 18.72%, 100% { opacity: 0; }
  18.12% { opacity: 0.94; }
  18.38% { opacity: 0.22; }
  18.5% { opacity: 0.78; }
}

@keyframes magnetarLegacyFlashTwo {
  0%, 47%, 47.62%, 100% { opacity: 0; }
  47.1% { opacity: 0.9; }
  47.31% { opacity: 0.18; }
  47.43% { opacity: 0.72; }
}

@keyframes magnetarLegacyFlashThree {
  0%, 71%, 71.54%, 100% { opacity: 0; }
  71.08% { opacity: 0.92; }
  71.26% { opacity: 0.16; }
  71.37% { opacity: 0.68; }
}

@media (max-width: 640px) {
  #mapViewport #map .map-magnetar-image {
    width: 148%;
    height: 148%;
  }
}

@media (prefers-reduced-motion: reduce) {
  #mapViewport #map .map-magnetar-wrap::before,
  #mapViewport #map .map-magnetar-wrap::after,
  #mapViewport #map .magnetar-aura,
  #mapViewport #map .magnetar-field-clouds,
  #mapViewport #map .magnetar-field-clouds i,
  #mapViewport #map .magnetar-bolt,
  #mapViewport #map .magnetar-bolt-glow,
  #mapViewport #map .magnetar-bolt-core,
  #mapViewport #map .magnetar-bolt-branch,
  #mapViewport #map .magnetar-bolt-flash {
    animation: none !important;
  }

  #mapViewport #map .magnetar-asteroid-track,
  #mapViewport #map .magnetar-orbiting-asteroid {
    animation: none !important;
  }

  #mapViewport #map .magnetar-legacy-bolt {
    animation: none !important;
  }
}

.map-planet-hover-card--magnetar {
  border-color: rgba(73, 174, 255, 0.62);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.52), 0 0 28px rgba(34, 126, 255, 0.24);
}

.map-planet-hover-card--magnetar .map-planet-hover-media {
  background: radial-gradient(circle, rgba(19, 75, 151, 0.5), rgba(3, 12, 30, 0.96) 70%);
  border-color: rgba(82, 190, 255, 0.52);
  box-shadow: inset 0 0 38px rgba(15, 75, 160, 0.32), 0 0 20px rgba(48, 151, 255, 0.2);
}

.map-planet-hover-card--magnetar .map-planet-hover-image {
  width: 96%;
  height: 96%;
  max-width: 96%;
  max-height: 96%;
  object-fit: contain;
  object-position: center center;
  transform: none;
  filter: drop-shadow(0 0 10px rgba(104, 215, 255, 0.7)) drop-shadow(0 0 20px rgba(35, 103, 255, 0.42));
}

.map-planet-hover-card--colossal-magnetar .map-planet-hover-image {
  filter:
    hue-rotate(38deg) saturate(0.92)
    drop-shadow(0 0 10px rgba(20, 241, 149, 0.62))
    drop-shadow(0 0 20px rgba(0, 209, 255, 0.5))
    drop-shadow(0 0 26px rgba(153, 69, 255, 0.32));
}

.map-magnetar-hover-warning {
  padding: 10px 12px;
  border: 1px solid rgba(73, 174, 255, 0.38);
  border-radius: 7px;
  background: rgba(33, 108, 224, 0.1);
  color: rgba(220, 245, 255, 0.9);
  line-height: 1.35;
}

.game-magnetar-modal {
  border-color: rgba(73, 174, 255, 0.88);
  box-shadow: 0 0 18px rgba(79, 194, 255, 0.72), 0 0 38px rgba(42, 92, 255, 0.5);
}

.game-magnetar-header h2 {
  background: linear-gradient(90deg, #8de9ff, #3b9cff, #8d69ff);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.game-magnetar-nft-rating {
  color: #ffd76a;
  text-shadow: 0 0 6px rgba(255, 215, 106, 0.78), 0 0 14px rgba(255, 151, 42, 0.42);
}

.game-magnetar-preview {
  object-fit: contain;
  transform: scale(1.42);
  filter: drop-shadow(0 0 12px rgba(96, 210, 255, 0.8)) drop-shadow(0 0 24px rgba(44, 105, 255, 0.48));
}

.game-magnetar-scene {
  background: radial-gradient(circle, rgba(34, 119, 238, 0.3), rgba(2, 9, 24, 0.94) 66%);
}

.game-magnetar-scene img {
  width: min(500px, 104%);
  filter: drop-shadow(0 0 16px rgba(112, 222, 255, 0.82)) drop-shadow(0 0 34px rgba(35, 90, 245, 0.46));
}

.game-magnetar-scene-aura {
  width: 270px;
  height: 270px;
  background: rgba(49, 141, 255, 0.23);
  filter: blur(28px);
  animation: magnetarModalAura 4.8s ease-in-out infinite alternate;
}

.game-magnetar-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.game-magnetar-info-grid article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(73, 174, 255, 0.34);
  border-radius: 12px;
  background: rgba(12, 53, 112, 0.2);
}

.game-magnetar-info-grid span {
  color: rgba(218, 243, 255, 0.68);
  font-size: 13px;
}

.game-magnetar-info-grid strong {
  color: #8de9ff;
}

.game-magnetar-warning {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(93, 187, 255, 0.28);
  border-radius: 12px;
  background: rgba(25, 91, 185, 0.12);
  color: rgba(224, 247, 255, 0.86);
  line-height: 1.4;
}

@keyframes magnetarModalAura {
  from { opacity: 0.48; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 0.84; transform: translate(-50%, -50%) scale(1.06); }
}

@media (max-width: 640px) {
  .game-magnetar-info-grid {
    grid-template-columns: 1fr;
  }
}