.core-node.core-visual {
  --core-accent: #66e7ff;
  --core-accent-bright: #d6fbff;
  --core-accent-soft: rgba(102, 231, 255, 0.28);
  --core-warning: #ffc967;
  --core-danger: #ff6585;
  --core-dark: #061018;
  --core-integrity: 1;
  position: absolute;
  left: 50%;
  top: 12px;
  z-index: 4;
  width: 94px;
  height: 94px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: none;
  box-shadow: none;
  isolation: isolate;
  pointer-events: none;
}

.core-visual > span,
.core-visual__sparks > span {
  position: absolute;
  left: 50%;
  top: 50%;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

.core-visual__halo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--core-accent-soft) 0 22%, rgba(102, 231, 255, 0.08) 42%, transparent 70%);
  filter: blur(3px);
  opacity: 0.9;
  animation: core-idle-breathe 2.8s ease-in-out infinite;
}

.core-visual__frame--outer {
  width: 82px;
  height: 82px;
  clip-path: polygon(28% 0, 72% 0, 100% 28%, 100% 72%, 72% 100%, 28% 100%, 0 72%, 0 28%);
  background:
    linear-gradient(135deg, rgba(214, 251, 255, 0.9), rgba(102, 231, 255, 0.22) 22%, rgba(5, 19, 29, 0.96) 46%, rgba(30, 105, 124, 0.9) 72%, rgba(214, 251, 255, 0.8));
  box-shadow: 0 0 22px rgba(102, 231, 255, 0.28);
}

.core-visual__frame--outer::after {
  content: "";
  position: absolute;
  inset: 5px;
  clip-path: inherit;
  background: #07141d;
}

.core-visual__ring {
  border-radius: 50%;
  border-style: solid;
}

.core-visual__ring--outer {
  width: 72px;
  height: 72px;
  border-width: 2px;
  border-color: rgba(169, 244, 255, 0.86) transparent rgba(102, 231, 255, 0.52) transparent;
  box-shadow: inset 0 0 12px rgba(102, 231, 255, 0.12), 0 0 10px rgba(102, 231, 255, 0.12);
  animation: core-ring-spin 7s linear infinite;
}

.core-visual__ring--inner {
  width: 50px;
  height: 50px;
  border-width: 3px;
  border-color: var(--core-accent) rgba(102, 231, 255, 0.13) var(--core-accent-bright) rgba(102, 231, 255, 0.13);
  box-shadow: 0 0 14px rgba(102, 231, 255, 0.22);
  animation: core-ring-spin-reverse 4.8s linear infinite;
}

.core-visual__strut {
  width: 74px;
  height: 9px;
  border: 1px solid rgba(169, 244, 255, 0.42);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(5, 16, 24, 0.96) 0 10%, var(--core-accent) 11% 19%, transparent 20% 80%, var(--core-accent) 81% 89%, rgba(5, 16, 24, 0.96) 90% 100%);
  opacity: 0.82;
}

.core-visual__strut--b {
  transform: translate(-50%, -50%) rotate(90deg);
}

.core-visual__shield {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  border: 1px solid rgba(214, 251, 255, 0.72);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.18), transparent 30%),
    radial-gradient(circle, rgba(102, 231, 255, 0.18), rgba(7, 25, 35, 0.72) 72%);
  box-shadow:
    inset 0 0 14px rgba(102, 231, 255, 0.28),
    0 0 16px rgba(102, 231, 255, 0.24);
}

.core-visual__reactor {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid var(--core-accent-bright);
  background:
    linear-gradient(135deg, var(--core-accent-bright), var(--core-accent) 30%, #117087 62%, var(--core-dark));
  box-shadow:
    0 0 12px rgba(102, 231, 255, 0.65),
    inset 0 0 9px rgba(255, 255, 255, 0.2);
}

.core-visual__reactor-glow {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f3feff;
  box-shadow: 0 0 7px #fff, 0 0 16px var(--core-accent), 0 0 24px var(--core-accent);
  animation: core-reactor-pulse 1.8s ease-in-out infinite;
}

.core-visual__integrity {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    var(--core-accent) calc(var(--core-integrity) * 1turn),
    rgba(62, 86, 96, 0.18) 0
  );
  -webkit-mask: radial-gradient(circle, transparent 68%, #000 70% 74%, transparent 76%);
  mask: radial-gradient(circle, transparent 68%, #000 70% 74%, transparent 76%);
  opacity: 0.86;
}

.core-visual__label {
  top: calc(50% + 42px) !important;
  padding: 2px 6px;
  border: 1px solid rgba(102, 231, 255, 0.22);
  border-radius: 999px;
  background: rgba(2, 10, 15, 0.82);
  color: rgba(214, 251, 255, 0.76);
  font-size: 0.48rem;
  font-weight: 950;
  letter-spacing: 0.17em;
  line-height: 1;
}

.core-visual__sparks {
  width: 100%;
  height: 100%;
  opacity: 0;
}

.core-visual__spark {
  width: 3px;
  height: 14px;
  border-radius: 999px;
  background: var(--core-accent-bright);
  box-shadow: 0 0 8px currentColor;
  transform-origin: 50% 0;
}

.core-visual__spark--1 { transform: translate(-50%, -50%) rotate(35deg) translateY(-34px); }
.core-visual__spark--2 { transform: translate(-50%, -50%) rotate(120deg) translateY(-33px); }
.core-visual__spark--3 { transform: translate(-50%, -50%) rotate(210deg) translateY(-36px); }
.core-visual__spark--4 { transform: translate(-50%, -50%) rotate(300deg) translateY(-32px); }

.core-visual[data-core-state="damaged"] {
  --core-accent: #ffc967;
  --core-accent-bright: #fff1c6;
  --core-accent-soft: rgba(255, 201, 103, 0.24);
}

.core-visual[data-core-state="damaged"] .core-visual__frame--outer {
  filter: saturate(0.95);
}

.core-visual[data-core-state="damaged"] .core-visual__ring--outer {
  border-style: dashed;
}

.core-visual[data-core-state="critical"],
.core-visual[data-core-state="destroyed"] {
  --core-accent: #ff6585;
  --core-accent-bright: #ffd8e1;
  --core-accent-soft: rgba(255, 101, 133, 0.28);
}

.core-visual[data-core-state="critical"] .core-visual__halo {
  animation: core-critical-alarm 0.72s ease-in-out infinite alternate;
}

.core-visual[data-core-state="critical"] .core-visual__ring--outer {
  border-style: dashed;
  animation-duration: 3.6s;
}

.core-visual[data-core-state="critical"] .core-visual__reactor-glow {
  animation-duration: 0.62s;
}

.core-visual[data-core-state="destroyed"] {
  filter: grayscale(0.45) brightness(0.62);
}

.core-visual[data-core-state="destroyed"] .core-visual__ring,
.core-visual[data-core-state="destroyed"] .core-visual__reactor-glow,
.core-visual[data-core-state="destroyed"] .core-visual__halo {
  animation: none;
}

.core-visual[data-core-state="destroyed"] .core-visual__integrity {
  opacity: 0.18;
}

.core-visual--impact {
  animation: core-impact-shell 260ms cubic-bezier(.18,.78,.2,1);
}

.core-visual--impact .core-visual__ring--outer {
  animation: core-impact-ring 280ms ease-out, core-ring-spin 7s linear 280ms infinite;
}

.core-visual--impact .core-visual__sparks {
  animation: core-sparks 300ms ease-out;
}

.core-visual--impact .core-visual__reactor-glow {
  animation: core-impact-flash 260ms ease-out;
}

@keyframes core-idle-breathe {
  0%, 100% { opacity: 0.64; transform: translate(-50%, -50%) scale(0.96); }
  50% { opacity: 0.92; transform: translate(-50%, -50%) scale(1.05); }
}

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

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

@keyframes core-reactor-pulse {
  0%, 100% { opacity: 0.76; transform: translate(-50%, -50%) scale(0.86); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes core-critical-alarm {
  from { opacity: 0.45; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

@keyframes core-impact-shell {
  0% { transform: translateX(-50%) scale(1); filter: brightness(1); }
  34% { transform: translateX(-50%) scale(1.11); filter: brightness(1.65); }
  100% { transform: translateX(-50%) scale(1); filter: brightness(1); }
}

@keyframes core-impact-ring {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 1; }
  55% { transform: translate(-50%, -50%) rotate(24deg) scale(1.28); opacity: 0.22; }
  100% { transform: translate(-50%, -50%) rotate(38deg) scale(1); opacity: 0.82; }
}

@keyframes core-sparks {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.72); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes core-impact-flash {
  0% { transform: translate(-50%, -50%) scale(0.9); filter: brightness(1); }
  30% { transform: translate(-50%, -50%) scale(1.8); filter: brightness(2); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

@media (max-width: 720px) {
  .core-node.core-visual {
    top: 5px;
    width: 72px;
    height: 72px;
  }

  .core-visual__frame--outer { width: 64px; height: 64px; }
  .core-visual__ring--outer { width: 57px; height: 57px; }
  .core-visual__ring--inner { width: 40px; height: 40px; border-width: 2px; }
  .core-visual__strut { width: 57px; height: 7px; }
  .core-visual__shield { width: 35px; height: 35px; }
  .core-visual__reactor { width: 22px; height: 22px; border-radius: 6px; }
  .core-visual__reactor-glow { width: 9px; height: 9px; }
  .core-visual__integrity { width: 68px; height: 68px; }
  .core-visual__label { top: calc(50% + 32px) !important; font-size: 0.4rem; padding: 2px 5px; }
  .core-visual__spark { height: 10px; }
  .core-visual__spark--1 { transform: translate(-50%, -50%) rotate(35deg) translateY(-26px); }
  .core-visual__spark--2 { transform: translate(-50%, -50%) rotate(120deg) translateY(-25px); }
  .core-visual__spark--3 { transform: translate(-50%, -50%) rotate(210deg) translateY(-28px); }
  .core-visual__spark--4 { transform: translate(-50%, -50%) rotate(300deg) translateY(-25px); }
}

@media (max-height: 680px) and (max-width: 720px) {
  .core-node.core-visual {
    top: 3px;
    width: 62px;
    height: 62px;
  }

  .core-visual__frame--outer { width: 56px; height: 56px; }
  .core-visual__ring--outer { width: 49px; height: 49px; }
  .core-visual__ring--inner { width: 34px; height: 34px; }
  .core-visual__strut { width: 50px; height: 6px; }
  .core-visual__shield { width: 30px; height: 30px; }
  .core-visual__reactor { width: 19px; height: 19px; }
  .core-visual__reactor-glow { width: 8px; height: 8px; }
  .core-visual__integrity { width: 60px; height: 60px; }
  .core-visual__label { top: calc(50% + 28px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .core-visual,
  .core-visual * {
    animation: none !important;
    transition: none !important;
  }

  .core-visual--impact {
    filter: brightness(1.35);
  }
}