/*
  Author: Yogabrata Mukhopadhyay
  Organization: Brahmexa
  Copyright: Copyright (c) 2026 Brahmexa. All rights reserved.

  Circular globes that read as the actual bodies — not rounded rectangles.
*/
.ym-globe {
  --ym-globe-size: 88px;
  position: relative;
  display: inline-block;
  width: var(--ym-globe-size);
  height: var(--ym-globe-size);
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow:
    inset -14px -10px 22px rgba(0, 0, 0, 0.38),
    inset 8px 6px 14px rgba(255, 255, 255, 0.22),
    0 10px 18px rgba(11, 28, 44, 0.22);
  overflow: visible;
}
.ym-globe::before,
.ym-globe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.ym-globe__ring {
  position: absolute;
  left: -38%;
  top: 36%;
  width: 176%;
  height: 34%;
  border-radius: 50%;
  border: 3px solid rgba(212, 180, 120, 0.95);
  box-shadow:
    0 0 0 5px rgba(150, 112, 58, 0.28),
    inset 0 0 0 2px rgba(255, 236, 190, 0.35);
  transform: rotate(-18deg);
  pointer-events: none;
  z-index: 1;
}

.ym-globe--sun {
  background:
    radial-gradient(circle at 32% 28%, #fff6c8 0%, #f5c542 28%, #e08912 68%, #b45309 100%);
  box-shadow:
    inset -10px -8px 16px rgba(120, 40, 0, 0.3),
    0 0 22px rgba(245, 158, 11, 0.55),
    0 8px 16px rgba(11, 28, 44, 0.2);
}
.ym-globe--moon {
  background:
    radial-gradient(circle at 34% 30%, #f7f4ee 0%, #d5d0c4 38%, #9a9588 78%, #6b665c 100%);
}
.ym-globe--moon::after {
  background:
    radial-gradient(circle at 62% 42%, rgba(90, 84, 74, 0.45) 0 8%, transparent 9%),
    radial-gradient(circle at 28% 58%, rgba(90, 84, 74, 0.35) 0 6%, transparent 7%),
    radial-gradient(circle at 72% 70%, rgba(70, 66, 58, 0.4) 0 10%, transparent 11%);
}
.ym-globe--mercury {
  background:
    radial-gradient(circle at 30% 26%, #ece5d8 0%, #b7a48a 40%, #7d6a54 82%, #4a3f34 100%);
}
.ym-globe--mercury::after {
  background:
    radial-gradient(circle at 58% 40%, rgba(60, 48, 36, 0.4) 0 7%, transparent 8%),
    radial-gradient(circle at 36% 66%, rgba(60, 48, 36, 0.35) 0 5%, transparent 6%);
}
.ym-globe--venus {
  background:
    radial-gradient(circle at 34% 24%, #fff4d4 0%, #f0d48a 36%, #d4a054 78%, #a66b2a 100%);
}
.ym-globe--venus::after {
  background:
    linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.28) 42%, transparent 58%);
}
.ym-globe--mars {
  background:
    radial-gradient(circle at 32% 26%, #f4b49a 0%, #c2410c 42%, #9a3412 78%, #5c1a0a 100%);
}
.ym-globe--mars::after {
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, 0.55) 0 10%, transparent 18%),
    radial-gradient(circle at 62% 48%, rgba(80, 20, 10, 0.35) 0 8%, transparent 10%);
}
.ym-globe--jupiter {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.28), transparent 42%),
    repeating-linear-gradient(
      180deg,
      #f6dfb4 0 7px,
      #e0b06a 7px 12px,
      #c9843c 12px 16px,
      #f0d09a 16px 22px,
      #d4a05a 22px 26px
    );
}
.ym-globe--jupiter::after {
  inset: auto;
  width: 30%;
  height: 20%;
  right: 20%;
  top: 50%;
  background: radial-gradient(circle, #c2410c 0%, #9a3412 70%);
  box-shadow: 0 0 0 2px rgba(180, 80, 40, 0.35);
}
.ym-globe--saturn {
  background:
    radial-gradient(circle at 32% 28%, #f4ebd0 0%, #d7c08a 40%, #b08948 78%, #7a5a28 100%);
  z-index: 2;
}
.ym-globe--saturn::before {
  z-index: 2;
  background: linear-gradient(180deg, transparent 44%, rgba(120, 80, 30, 0.28) 50%, transparent 56%);
}
.ym-globe--uranus {
  background:
    radial-gradient(circle at 34% 28%, #e0fbff 0%, #7dd3fc 38%, #0e7490 78%, #155e75 100%);
}
.ym-globe--uranus .ym-globe__ring {
  border-color: rgba(186, 230, 253, 0.85);
  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.25);
  transform: rotate(78deg);
  height: 22%;
  top: 40%;
}
.ym-globe--neptune {
  background:
    radial-gradient(circle at 32% 26%, #bfdbfe 0%, #2563eb 40%, #1e3a8a 80%, #172554 100%);
}
.ym-globe--neptune::after {
  background: linear-gradient(180deg, transparent 38%, rgba(255, 255, 255, 0.18) 48%, transparent 58%);
}
.ym-globe--pluto {
  background:
    radial-gradient(circle at 36% 30%, #f5e6d3 0%, #c4a484 42%, #7c5a3a 80%, #4a3424 100%);
}
.ym-globe--pluto::after {
  background: radial-gradient(circle at 62% 42%, rgba(180, 90, 70, 0.45) 0 18%, transparent 22%);
}
.ym-globe--earth {
  background:
    radial-gradient(circle at 32% 26%, #e8f4ff 0%, #7eb6d9 22%, #2f6f4e 48%, #1d4e89 78%, #0b1c2c 100%);
}
.ym-globe--earth::after {
  background:
    radial-gradient(circle at 28% 42%, rgba(47, 111, 78, 0.85) 0 14%, transparent 16%),
    radial-gradient(circle at 62% 58%, rgba(47, 111, 78, 0.7) 0 18%, transparent 20%),
    radial-gradient(circle at 48% 22%, rgba(255, 255, 255, 0.35) 0 10%, transparent 18%);
}

.ym-tri {
  display: grid;
  gap: 0.35rem;
  text-align: center;
  background: #fffef8;
  border: 1px solid rgba(180, 83, 9, 0.28);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  color: #0b1c2c;
}
.ym-tri__deva {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.45;
  font-family: "Nirmala UI", "Noto Sans Devanagari", "Mangal", serif;
  color: #0b1c2c;
}
.ym-tri__bn {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.5;
  font-family: "Nirmala UI", "Noto Sans Bengali", "Vrinda", sans-serif;
  color: #0b1c2c;
}
.ym-tri__iast {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  font-style: italic;
  color: #44403c;
}

.ym-globe-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
  background: #fffef8;
  border: 1px solid rgba(11, 28, 44, 0.12);
  border-radius: 1rem;
  padding: 0.85rem 0.5rem 0.9rem;
  color: #0b1c2c;
  overflow: visible;
}
.ym-globe-card.is-retro {
  border-color: rgba(159, 18, 57, 0.35);
  background: #fff7f4;
}
.ym-globe-card__name {
  font-weight: 800;
  font-size: 0.92rem;
  color: #0b1c2c;
}
.ym-globe-card__sign {
  font-size: 0.78rem;
  color: #44403c;
}
.ym-globe-card__badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.ym-globe-card__badge--direct {
  background: #ecfdf5;
  color: #047857;
}
.ym-globe-card__badge--retro {
  background: #ffe4e6;
  color: #9f1239;
}

.ym-planet-wrap--globe {
  height: auto !important;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  overflow: visible;
  padding-top: 0.4rem;
  padding-bottom: 0.2rem;
}
.ym-planet-wrap--globe .ym-globe {
  --ym-globe-size: min(148px, 44vw);
  z-index: 2;
}
.ym-globe-caption {
  text-align: center;
  z-index: 3;
}
.ym-globe-caption__title {
  display: block;
  color: #0b1c2c;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.2;
}
.ym-globe-caption__sub {
  display: block;
  color: #44403c;
  font-size: 0.82rem;
  margin-top: 0.15rem;
}

.ym-globe--art {
  overflow: hidden;
  background: #0b1c2c;
}
.ym-globe--art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 50%;
  display: block;
}

.retro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 0.85rem;
  align-items: start;
}