/* Layered black-hole component. The PNG remains the dark core; CSS supplies motion. */
.black-hole {
  --bh-size: 320px;
  position: relative;
  width: var(--bh-size);
  height: var(--bh-size);
  flex: 0 0 var(--bh-size);
  isolation: isolate;
}

#mapViewport #map .map-black-hole-wrap {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

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

#mapViewport #map .map-black-hole-wrap .black-hole {
  --bh-size: 56%;
}

#mapViewport #map .map-black-hole-wrap--large .black-hole {
  --bh-size: 112%;
}

.black-hole-core {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
}

.black-hole-field-shell {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center;
  will-change: transform;
}

.black-hole.is-field-rising .black-hole-field-shell {
  animation: bhFieldRise 3.4s cubic-bezier(0.28, 0.04, 0.54, 1) forwards;
}

.black-hole.is-field-falling .black-hole-field-shell {
  animation: bhFieldFall 3.3s cubic-bezier(0.32, 0, 0.62, 1) forwards;
}

.black-hole-gravity-field,
.black-hole-heat-wave,
.black-hole-outer-field {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  display: block;
  width: 300%;
  height: 300%;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity, filter;
}

.black-hole-gravity-field {
  opacity: 0.48;
  border-radius: 44% 56% 39% 61% / 57% 42% 58% 43%;
  background:
    radial-gradient(ellipse at 23% 39%, transparent 0 55%, rgba(225, 237, 255, 0.09) 61%, transparent 70%),
    radial-gradient(ellipse at 76% 63%, transparent 0 48%, rgba(182, 214, 255, 0.08) 57%, transparent 68%),
    conic-gradient(from 18deg,
      transparent 0 10%,
      rgba(211, 229, 255, 0.09) 18%,
      transparent 29% 43%,
      rgba(255, 255, 255, 0.1) 52%,
      transparent 64% 76%,
      rgba(175, 208, 255, 0.085) 88%,
      transparent 100%);
  -webkit-mask: radial-gradient(ellipse at 49% 51%, transparent 0 31%, #000 43% 82%, transparent 100%);
  mask: radial-gradient(ellipse at 49% 51%, transparent 0 31%, #000 43% 82%, transparent 100%);
  -webkit-backdrop-filter: blur(1.5px) contrast(1.08) saturate(1.08);
  backdrop-filter: blur(1.5px) contrast(1.08) saturate(1.08);
  filter: blur(2px);
  animation: bhGravityWarp 10s linear infinite, bhGravityPulse 5s ease-in-out infinite, bhGravityMorph 7.3s ease-in-out infinite alternate;
}

.black-hole-heat-wave {
  z-index: 0;
  width: 340%;
  height: 340%;
  opacity: 0.32;
  border-radius: 61% 39% 55% 45% / 42% 63% 37% 58%;
  background:
    radial-gradient(ellipse at 31% 72%, transparent 0 52%, rgba(210, 229, 255, 0.075) 59%, transparent 69%),
    radial-gradient(ellipse at 72% 27%, transparent 0 58%, rgba(255, 255, 255, 0.07) 64%, transparent 73%),
    conic-gradient(from 132deg,
      transparent 0 15%,
      rgba(196, 220, 255, 0.075) 25%,
      transparent 39% 54%,
      rgba(255, 255, 255, 0.08) 66%,
      transparent 80% 100%);
  -webkit-mask: radial-gradient(ellipse at 51% 48%, transparent 0 30%, #000 47% 84%, transparent 100%);
  mask: radial-gradient(ellipse at 51% 48%, transparent 0 30%, #000 47% 84%, transparent 100%);
  -webkit-backdrop-filter: blur(1px) contrast(1.05);
  backdrop-filter: blur(1px) contrast(1.05);
  filter: blur(4px);
  animation: bhHeatWave 14s linear infinite reverse, bhHeatWaveMorph 9.1s ease-in-out infinite alternate;
}

.black-hole-outer-field {
  z-index: 0;
  width: 395%;
  height: 395%;
  opacity: 0.24;
  border-radius: 53% 47% 61% 39% / 44% 58% 42% 56%;
  background:
    radial-gradient(ellipse at 26% 68%, transparent 0 58%, rgba(205, 225, 255, 0.07) 66%, transparent 76%),
    radial-gradient(ellipse at 75% 31%, transparent 0 55%, rgba(238, 245, 255, 0.065) 64%, transparent 75%),
    conic-gradient(from 205deg,
      transparent 0 13%,
      rgba(188, 216, 255, 0.065) 23%,
      transparent 36% 53%,
      rgba(241, 247, 255, 0.07) 64%,
      transparent 79% 100%);
  -webkit-mask: radial-gradient(ellipse at 50% 50%, transparent 0 35%, #000 53% 84%, transparent 100%);
  mask: radial-gradient(ellipse at 50% 50%, transparent 0 35%, #000 53% 84%, transparent 100%);
  -webkit-backdrop-filter: blur(0.8px) contrast(1.04);
  backdrop-filter: blur(0.8px) contrast(1.04);
  filter: blur(5px);
  animation: bhOuterFieldReverse 18s linear infinite, bhHeatWaveMorph 11.6s ease-in-out infinite alternate-reverse;
}

#mapViewport #map .map-black-hole-wrap--large .black-hole-gravity-field {
  animation: bhGravityWarpReverse 10s linear infinite, bhGravityPulse 5s ease-in-out infinite, bhGravityMorph 7.3s ease-in-out infinite alternate;
}

#mapViewport #map .map-black-hole-wrap--large .black-hole-heat-wave {
  animation: bhHeatWave 14s linear infinite, bhHeatWaveMorph 9.1s ease-in-out infinite alternate;
}

#mapViewport #map .map-black-hole-wrap--large .bh-ring-1 {
  animation-direction: reverse;
}

.bh-ring,
.bh-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform, opacity;
}

.bh-ring {
  background: conic-gradient(from 14deg,
    rgba(157, 39, 5, 0.08),
    rgba(225, 73, 10, 0.3) 42deg,
    rgba(255, 135, 31, 0.58) 83deg,
    rgba(241, 91, 14, 0.26) 127deg,
    rgba(115, 27, 5, 0.05) 174deg,
    rgba(255, 119, 24, 0.4) 226deg,
    rgba(255, 174, 61, 0.55) 276deg,
    rgba(202, 55, 7, 0.18) 321deg,
    rgba(157, 39, 5, 0.08));
}

.bh-ring-1 {
  z-index: 3;
  width: 148%;
  height: 148%;
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 55% 64%, transparent 73%);
  mask: radial-gradient(circle, transparent 0 48%, #000 55% 64%, transparent 73%);
  filter:
    blur(2.5px)
    brightness(1.42)
    saturate(1.18)
    drop-shadow(0 0 7px rgba(255, 155, 39, 0.78))
    drop-shadow(0 0 15px rgba(235, 66, 8, 0.62));
  animation: bhRingClockwise 18s linear infinite;
}

.bh-ring-2 {
  z-index: 2;
  width: 162%;
  height: 162%;
  opacity: 0.52;
  background: conic-gradient(from 73deg,
    transparent 0deg,
    rgba(198, 51, 7, 0.16) 35deg,
    rgba(255, 109, 20, 0.42) 91deg,
    rgba(246, 146, 48, 0.3) 151deg,
    transparent 212deg,
    rgba(255, 91, 13, 0.28) 273deg,
    rgba(221, 66, 8, 0.18) 329deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 54%, #000 61% 68%, transparent 77%);
  mask: radial-gradient(circle, transparent 0 54%, #000 61% 68%, transparent 77%);
  filter: blur(6px) drop-shadow(0 0 11px rgba(211, 55, 8, 0.34));
  animation: bhRingCounterClockwise 28s linear infinite;
}

.bh-ring-3 {
  z-index: 1;
  width: 188%;
  height: 188%;
  opacity: 0.28;
  background: radial-gradient(circle,
    transparent 0 42%,
    rgba(255, 92, 14, 0.16) 53%,
    rgba(203, 48, 6, 0.11) 64%,
    transparent 78%);
  filter: blur(10px);
  animation: bhRingSlowBreath 45s linear infinite;
}

.bh-front-ring {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 7;
  display: block;
  width: 154%;
  height: 43%;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  clip-path: inset(50% -12% -24% -12%);
  background: conic-gradient(from 178deg,
    rgba(153, 37, 5, 0.2),
    rgba(237, 76, 10, 0.62) 38deg,
    rgba(255, 151, 41, 0.9) 82deg,
    rgba(255, 191, 80, 0.72) 126deg,
    rgba(224, 63, 7, 0.48) 181deg,
    rgba(255, 126, 25, 0.78) 234deg,
    rgba(255, 177, 58, 0.86) 286deg,
    rgba(190, 45, 5, 0.3) 329deg,
    rgba(153, 37, 5, 0.2));
  -webkit-mask: radial-gradient(ellipse,
    transparent 0 57%,
    rgba(0, 0, 0, 0.62) 63%,
    #000 68% 75%,
    transparent 82%);
  mask: radial-gradient(ellipse,
    transparent 0 57%,
    rgba(0, 0, 0, 0.62) 63%,
    #000 68% 75%,
    transparent 82%);
  filter:
    blur(0.7px)
    drop-shadow(0 0 4px rgba(255, 155, 43, 0.82))
    drop-shadow(0 0 10px rgba(215, 56, 7, 0.55));
  pointer-events: none;
  will-change: opacity;
}

.bh-particles {
  z-index: 6;
  width: 148%;
  height: 148%;
  opacity: 0.52;
  background:
    radial-gradient(circle at 50% 4%, rgba(255, 181, 75, 0.8) 0 1.2px, transparent 2.5px),
    radial-gradient(circle at 86% 26%, rgba(255, 121, 30, 0.62) 0 1px, transparent 2.2px),
    radial-gradient(circle at 96% 59%, rgba(255, 166, 58, 0.72) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 70% 91%, rgba(231, 74, 12, 0.58) 0 1px, transparent 2.1px),
    radial-gradient(circle at 27% 92%, rgba(255, 143, 39, 0.66) 0 1.2px, transparent 2.4px),
    radial-gradient(circle at 4% 58%, rgba(255, 183, 73, 0.72) 0 1px, transparent 2.3px),
    radial-gradient(circle at 17% 22%, rgba(220, 59, 9, 0.62) 0 1.3px, transparent 2.6px);
  -webkit-mask: radial-gradient(circle, transparent 0 48%, #000 56% 72%, transparent 79%);
  mask: radial-gradient(circle, transparent 0 48%, #000 56% 72%, transparent 79%);
  filter: blur(0.35px) drop-shadow(0 0 3px rgba(255, 105, 19, 0.5));
  animation: bhParticlesOrbit 22s linear infinite;
}

@keyframes bhRingClockwise {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.98); opacity: 0.64; }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.02); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.98); opacity: 0.64; }
}

@keyframes bhRingCounterClockwise {
  0% { transform: translate(-50%, -50%) rotate(360deg) scale(1.01); opacity: 0.42; }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(0.98); opacity: 0.58; }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(1.01); opacity: 0.42; }
}

@keyframes bhRingSlowBreath {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.98); opacity: 0.2; }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.02); opacity: 0.34; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.98); opacity: 0.2; }
}

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

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

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

@keyframes bhOuterFieldReverse {
  0% { transform: translate(-50%, -50%) rotate(360deg) scale(0.98); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.025); }
  100% { transform: translate(-50%, -50%) rotate(0deg) scale(0.98); }
}

@keyframes bhGravityPulse {
  0%, 100% { opacity: 0.4; filter: blur(1.5px); }
  50% { opacity: 0.62; filter: blur(3px); }
}

@keyframes bhHeatWave {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(0.98); }
  50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.02); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(0.98); }
}

@keyframes bhFieldRise {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(240deg) scale(1.22); }
}

@keyframes bhFieldFall {
  from { transform: rotate(240deg) scale(1.22); }
  to { transform: rotate(360deg) scale(1); }
}

@keyframes bhGravityMorph {
  0% { border-radius: 44% 56% 39% 61% / 57% 42% 58% 43%; }
  23% { border-radius: 63% 37% 52% 48% / 38% 59% 41% 62%; }
  51% { border-radius: 36% 64% 45% 55% / 61% 34% 66% 39%; }
  76% { border-radius: 57% 43% 67% 33% / 46% 64% 36% 54%; }
  100% { border-radius: 41% 59% 34% 66% / 65% 45% 55% 35%; }
}

@keyframes bhHeatWaveMorph {
  0% { border-radius: 61% 39% 55% 45% / 42% 63% 37% 58%; }
  29% { border-radius: 38% 62% 68% 32% / 59% 36% 64% 41%; }
  58% { border-radius: 66% 34% 42% 58% / 35% 57% 43% 65%; }
  81% { border-radius: 47% 53% 31% 69% / 68% 44% 56% 32%; }
  100% { border-radius: 33% 67% 58% 42% / 49% 69% 31% 51%; }
}

@media (max-width: 640px) {
  .black-hole {
    --bh-size: 220px;
  }

  #mapViewport #map .map-black-hole-wrap .black-hole {
    --bh-size: 56%;
  }

  #mapViewport #map .map-black-hole-wrap--large .black-hole {
    --bh-size: 112%;
  }
}

.map-planet-hover-card--black-hole .map-planet-hover-media {
  display: grid;
  place-items: center;
}

.map-planet-hover-card--black-hole .map-planet-hover-image {
  width: 62%;
  height: 62%;
  max-width: 62%;
  max-height: 62%;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  transform: none;
}

.game-black-hole-modal {
  border-color: rgba(128, 76, 207, 0.9);
  box-shadow: 0 0 18px rgba(126, 72, 216, 0.66), 0 0 40px rgba(255, 103, 27, 0.24);
}

.game-black-hole-header h2 {
  background: linear-gradient(90deg, #9945ff, #14f195, #ffd76a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.game-black-hole-size {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  margin-left: 7px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 215, 106, 0.45);
  border-radius: 999px;
  color: #ffd76a;
  background: rgba(255, 215, 106, 0.1);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  -webkit-text-fill-color: #ffd76a;
  text-shadow: 0 0 7px rgba(255, 215, 106, 0.45);
}

.game-black-hole-preview {
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255, 126, 35, 0.5));
}

.game-black-hole-scene {
  background: radial-gradient(circle, rgba(77, 36, 112, 0.38), rgba(1, 2, 7, 0.98) 68%);
}

.game-black-hole-scene img {
  width: min(230px, 54%);
  filter: drop-shadow(0 0 14px rgba(255, 111, 28, 0.42));
}

.game-black-hole-scene-aura {
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255, 111, 28, 0.16), rgba(112, 53, 180, 0.12) 52%, transparent 74%);
  filter: blur(24px);
  animation: blackHoleModalAura 5.6s ease-in-out infinite alternate;
}

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

.game-black-hole-info-grid article {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(151, 99, 229, 0.34);
  border-radius: 12px;
  background: rgba(45, 21, 72, 0.24);
}

.game-black-hole-info-grid span {
  color: rgba(234, 220, 255, 0.68);
  font-size: 13px;
}

.game-black-hole-info-grid strong {
  color: #d5bdff;
}

.game-black-hole-warning {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 112, 35, 0.28);
  border-radius: 12px;
  background: rgba(110, 39, 11, 0.14);
  color: rgba(255, 230, 208, 0.86);
  line-height: 1.4;
}

@keyframes blackHoleModalAura {
  from { opacity: 0.42; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 0.76; transform: translate(-50%, -50%) scale(1.06); }
}

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