.solar { position: relative; isolation: isolate; width: clamp(320px, 86vw, 560px); height: clamp(320px, 86vw, 560px); }

.solar-core {
  position: absolute; inset: 0; margin: auto; z-index: 100;
  width: clamp(122px, 28vw, 172px); height: clamp(122px, 28vw, 172px);
  overflow: visible; isolation: isolate;
}
.solar-core::before {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle at 68% 26%, #3a1a6e, #150a33 45%, #06030f 100%);
  box-shadow: inset 0 0 40px rgba(100, 50, 255, 0.55), inset -12px -14px 40px rgba(0, 0, 0, 0.7), 0 0 50px rgba(130, 0, 255, 0.3);
  transition: opacity 0.4s ease;
}
.solar-core.planet-webgl::before { opacity: 0; }

.planet-canvas { position: absolute; top: -40%; left: -40%; width: 180%; height: 180%; z-index: 1; pointer-events: none; display: block; }

.planet-castshadow { position: absolute; z-index: 4; left: 44%; top: 56%; width: 50%; height: 22%; transform: translate(-50%, 0); border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 70%); filter: blur(4px); }

.logo-glow {
  position: absolute; inset: 0; margin: auto; width: 56%; height: 56%; z-index: 5; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(77, 0, 255, 0.5), rgba(37, 147, 255, 0.28) 42%, transparent 68%);
  filter: blur(8px); animation: logoGlow 6s ease-in-out infinite;
}
@keyframes logoGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.92; } }

.core-logo {
  position: absolute; inset: 0; margin: auto; width: 42%; height: auto; z-index: 6;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(77, 60, 255, 0.55));
  animation: logoFloat 5.5s ease-in-out infinite;
}
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .logo-glow, .core-logo { animation: none; }
}

.core-name {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-family: "Sora", sans-serif; font-weight: 600; letter-spacing: 0.2em; font-size: 11px;
  text-transform: uppercase; color: #dfe7ff; white-space: nowrap;
}
.core-pulse { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.orbits { position: absolute; inset: 0; }
.ring-line {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  border: 1px solid rgba(123, 150, 230, 0.16); border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--rot));
  pointer-events: none; z-index: 1;
}

.orbits.is-3d .planet {
  position: absolute; left: 50%; top: 50%; margin: 0;
  will-change: transform, opacity;
}
.planet {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; color: inherit; cursor: pointer; font: inherit;
}
.planet-bubble {
  width: clamp(44px, 10vw, 58px); height: clamp(44px, 10vw, 58px); border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--p-color, #2593ff) 22%, transparent), rgba(10, 14, 30, 0.8));
  border: 1px solid color-mix(in srgb, var(--p-color, #2593ff) 30%, var(--border));
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), inset 0 0 15px color-mix(in srgb, var(--p-color, #2593ff) 22%, transparent);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.planet-bubble iconify-icon { font-size: clamp(19px, 4.6vw, 25px); color: var(--p-color, #fff); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--p-color, #2593ff) 55%, transparent)); }
.planet-name {
  font-family: "Sora", sans-serif; font-size: 11px; color: #cfe0ff; opacity: 0.85; white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}
.planet-bubble { transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.planet:hover .planet-bubble, .planet:focus-visible .planet-bubble, .planet.active .planet-bubble {
  border-color: var(--p-color); transform: scale(1.14);
  box-shadow: 0 0 30px var(--p-color), 0 0 62px color-mix(in srgb, var(--p-color) 45%, transparent);
}
.planet:focus-visible { outline: none; }


.planet-info {
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(20px, 2.5vw, 28px); backdrop-filter: blur(10px); max-width: 420px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.pi-icon { font-size: 30px; color: var(--blue); }
.pi-title { font-family: "Sora", sans-serif; font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); margin: 10px 0 6px; color: #eaf0ff; }
.pi-desc { color: var(--muted); line-height: 1.5; font-size: 14px; }
.pi-btn {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; padding: 9px 16px; border-radius: 10px;
  font-family: "Sora", sans-serif; font-weight: 500; font-size: 14px; color: #fff;
  background: linear-gradient(100deg, var(--blue), var(--purple)); box-shadow: 0 4px 18px rgba(37, 147, 255, 0.35);
  transition: transform 0.15s ease;
}
.pi-btn:hover { transform: translateY(-1px); }


@media (min-width: 1500px) { .solar { transform: scale(1.16); } }
@media (min-width: 1900px) { .solar { transform: scale(1.36); } }
@media (min-width: 2400px) { .solar { transform: scale(1.6); } }
@media (min-width: 3000px) { .solar { transform: scale(1.85); } }


@media (max-width: 900px) {
  .planet-info { margin: 0 auto; text-align: center; }
  .pi-btn { margin-inline: auto; }

  .solar { width: min(88vw, 400px); height: min(88vw, 400px); margin: 0 auto; }
  .solar-core { width: clamp(108px, 30vw, 138px); height: clamp(108px, 30vw, 138px); }
  .planet-bubble { width: clamp(42px, 12.5vw, 54px); height: clamp(42px, 12.5vw, 54px); }
  .planet-bubble iconify-icon { font-size: clamp(18px, 5.5vw, 23px); }
  .planet-name { font-size: 10px; }
}

@media (max-width: 400px) {
  .planet-name { display: none; }
}