/* Same unified styling */
.sscp-wrap{
  --sscp-height: 320px;
  --sscp-edge: #2ecbf0;
  --sscp-fill: #d72ef0;
  --sscp-glass: rgba(255,255,255,0.06);
  width: 100%;
  max-width: 520px;
  margin: 8px auto;
  user-select: none;
}
.sscp-head, .sscp-foot{
  display:flex; align-items:center; justify-content:space-between;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  color: var(--hud-text,#a3e7ff);
  gap: 8px;
}
.sscp-head{ margin-bottom: 8px; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.06em;}
.sscp-nums{ opacity:.9; }
.sscp-stage{ height: var(--sscp-height); display:flex; align-items:center; justify-content:center; }
.sscp-svg{ height: 100%; width: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }

.sscp-edge{ fill: none; stroke: var(--sscp-edge); stroke-width: 3; vector-effect: non-scaling-stroke; }
.sscp-glass{ fill: var(--sscp-glass); }
.sscp-fill{ fill: var(--sscp-fill); opacity:.95; }
.sscp-shine{ fill: rgba(255,255,255,0.14); mix-blend-mode: screen; }
.sscp-ring{ fill: none; stroke: var(--sscp-fill); stroke-width: 10; opacity:.4; }
.sscp-core{ fill: var(--sscp-fill); opacity:.2; }
.sscp-foot{ margin-top:6px; font-size:13px;}
.sscp-pct{ font-weight:700; color: var(--hud-warm,#f7d9d9);}
.sscp-cap{ opacity:.8; }

.sscp-wrap[data-glow="1"] .sscp-edge{ filter: drop-shadow(0 0 8px var(--sscp-edge)); }

.sscp-wrap{ --pct: 0; }
.sscp-wrap.sscp-tower .sscp-fill{ transform-origin:50% 100%; transform: translateY(calc(480px*(1 - var(--pct)/100))); transition: transform 900ms cubic-bezier(.22,1,.36,1); }

.sscp-wrap.sscp-arena .sscp-fill-left{
  fill: var(--sscp-fill);
  transform-origin: 160px 80px;
  transform: scaleX(calc(var(--pct)/100));
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.sscp-wrap.sscp-arena .sscp-fill-right{
  fill: var(--sscp-fill);
  transform-origin: 200px 80px;
  transform: scaleX(calc(var(--pct)/100));
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}

.sscp-wrap.sscp-banner .sscp-fill{
  transform-origin: 50% 100%;
  transform: translateY(calc(140px*(1 - var(--pct)/100)));
  transition: transform 900ms cubic-bezier(.22,1,.36,1);
}

.sscp-wrap.sscp-reactor .sscp-fill-ring{
  fill: none;
  stroke: var(--sscp-fill);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-dasharray: 439;
  stroke-dashoffset: calc(439 - (439 * var(--pct) / 100));
  transition: stroke-dashoffset 800ms cubic-bezier(.22,1,.36,1);
}

.sscp-wrap.sscp-spire .sscp-floor{ fill: var(--sscp-fill); opacity: .15; transition: opacity 400ms ease; }
.sscp-wrap.sscp-spire .sscp-floor.lit{ opacity: .9; }

.sscp-wrap.sscp-cosmic .sscp-orbiters circle{ transition: transform 800ms ease; }