/* =====================================================================
   RIFTMOOR — MASTER STYLESHEET
   CLEANED EDITION | 2026-10-10
   =====================================================================

   NAVIGATION — search for the numbered heading in your editor:

   01  PAGE / FLOWERSHOW TABLE LAYOUT
   02  SHARED GRAPHICS / INFOGRAPHIC
       Star colors, black holes, biomes, planets, giant rings, moons
   03  VISUAL CHEAT SHEET
   04  STELLAR ARRANGEMENT
   05  TOP-DOWN SCHEMATIC
       Orbit geometry, planets, stars, companion insets
   06  SCHEMATIC RINGS AND ASTEROIDS
   07  SELECTION / CALLOUTS
       Belt marker, planet/star selection, popups
   08  MOONS / BELT BODIES / RICH TOOLTIPS
   09  RESTORED INFOGRAPHIC AND SCHEMATIC INTERACTION FIXES

   SAFE CLEANUP:
   - Removed one complete, identical duplicate of shared styles.
   - Removed one stray line of equals signs outside a CSS comment.
   - Repaired the opening comment.
   - Kept the original CSS rule order for cascade compatibility.
   - Preserved all late overrides (some are intentional fixes).
   - Preserved the current infographic-star popup BELOW the sun,
     the selectable belt dots, hidden schematic planet letters,
     and compact moon scatter.

   NOTE: Later rules may intentionally override earlier rules.
   Do not relocate them without checking specificity and stacking.
   ===================================================================== */

/* =====================================================================
   01  PAGE / FLOWERSHOW TABLE LAYOUT
   ===================================================================== */

/* =========================================================
   WIDE PAGE
========================================================= */

.layout-inner {
  width: calc(100vw - 1rem) !important;
  max-width: 2400px !important;
}

.layout-inner-center,
.page-main,
.page-body,
.rendered-mdx {
  width: 100% !important;
  max-width: none !important;
}



/* =========================================================
   REMOVE FLOWERSHOW TABLE SCROLL WRAPPER
   ========================================================= */

.rendered-mdx > .overflow-x-auto {
  overflow-x: visible !important;
  overflow-y: visible !important;

  width: 100% !important;
  max-width: none !important;
}


/* =========================================================
   TABLE
   ========================================================= */

.rendered-mdx table {
  width: 100% !important;
  max-width: 100% !important;

  table-layout: auto !important;
}


/* =========================================================
   NORMAL TEXT COLUMNS
   ========================================================= */

.rendered-mdx table td:not(:has(img)),
.rendered-mdx table th:not(:has(img)) {
  min-width: 50px !important;
  max-width: 130px !important;

  width: auto !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;

  padding: 6px 8px !important;

  vertical-align: top !important;
}


/* =========================================================
   IMAGE COLUMN
   ========================================================= */

.rendered-mdx table td:has(img),
.rendered-mdx table th:has(img) {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;

  height: auto !important;

  padding: 6px !important;

  vertical-align: top !important;
  overflow: visible !important;
}


/* =========================================================
   CRITICAL FIX:
   REMOVE FLOWERSHOW'S FORCED 16:9 IMAGE WRAPPER
   ========================================================= */

.rendered-mdx table td:has(img) > div[style*="aspect-ratio"],
.rendered-mdx table th:has(img) > div[style*="aspect-ratio"] {
  position: static !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  aspect-ratio: auto !important;

  overflow: visible !important;
}


/* =========================================================
   RESTORE IMAGE TO ITS REAL ASPECT RATIO
   ========================================================= */

.rendered-mdx table img[data-nimg="fill"] {
  position: static !important;

  display: block !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  inset: auto !important;

  object-fit: contain !important;

  margin: 0 auto !important;
}





/* =========================================================
   OPTIONAL WIDE-TABLE SCROLLING — FROM FLOWERSHOW CUSTOM CSS
   Applies only to the #mdxpage direct table wrapper.
   The ID-specific rule takes precedence when both selectors match.
   ========================================================= */

#mdxpage {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#mdxpage > .overflow-x-auto {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto !important;
}

#mdxpage > .overflow-x-auto > table {
  display: table !important;
  table-layout: auto !important;
  width: max-content !important;
  min-width: 100%;
  max-width: none !important;
}

#mdxpage > .overflow-x-auto > table th,
#mdxpage > .overflow-x-auto > table td {
  width: auto !important;
  white-space: nowrap;
}

/* =====================================================================
   02  SHARED GRAPHICS / INFOGRAPHIC
   ===================================================================== */

/* =========================================================
   RIFTMOOR SOLAR SYSTEM VISUALIZATION
   Shared stylesheet for Obsidian + Flowershow

   CURRENT STANDARD
   ---------------------------------------------------------
   STARS
   - Layered irregular shimmer
   - Spectral-class letter inside star
   - Normal spectral-class letters are black
   - viable-light letters are white with a subtle black glow
   - No viability outline

   HABITABLE WORLDS
   - Organic 3 / 2 / 1 biome texture
   - Primary = background + 3 clusters
   - Secondary = 2 clusters
   - Tertiary = 1 cluster
   - No internal letters
   - No green habitability outline
   - "Habitability" / "Habitable" can be highlighted with .rift-habitable-text

   DEAD TERRESTRIALS
   - Molten
   - Hot Barren
   - Barren
   - Cold Barren
   - Frozen
   - Shared subtle geological texture

   GIANTS
   - Gas Giant
   - Ice Giant
   - Ringed Gas Giant
   - Hep Ringed Giant
   - Ring wrapper provides TRUE:
       rear ring
       globe
       front ring

   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

.rift-system {
  --rift-line: #667080;
  --rift-muted: #9aa3ad;
  --rift-panel: rgba(120,130,145,.08);

  width: 100%;
  margin: 1.5rem 0;
  font-family: inherit;
}

.rift-system * {
  box-sizing: border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

.rift-system-header {
  margin-bottom: 1rem;
}

.rift-system-name {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.rift-system-starspec {
  margin-top: .25rem;
  color: var(--rift-muted);
  font-size: .9rem;
  line-height: 1.4;
}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.rift-system-view {
  overflow-x: auto;
  padding: 1.25rem;

  border: 1px solid var(--rift-line);
  border-radius: 12px;

  background: var(--rift-panel);
}

.rift-system-inner {
  min-width: 900px;
}


/* =========================================================
   STAR ROW
   ========================================================= */

.rift-system-stars {
  display: flex;
  align-items: center;
  gap: 12px;

  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;

  border-bottom: 1px solid var(--rift-line);
}

.rift-system-stars-label {
  margin-right: 6px;

  color: var(--rift-muted);

  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}


/* =========================================================
   STAR BASE
   ========================================================= */

.rift-system-star {
  --rift-star-main: #f4bb3f;
  --rift-star-shimmer: #e9a82f;
  --rift-star-highlight: #ffe67c;
  --rift-star-shadow: #df8c20;

  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--rift-star-size,44px);
  height: var(--rift-star-size,44px);

  flex: 0 0 var(--rift-star-size,44px);

  border-radius: 50%;

  color: #000;

  font-size: .7rem;
  font-weight: 700;
  line-height: 1;

  /* Bright photospheric disk */
  background:
    radial-gradient(
      circle at 31% 28%,
      #ffffff 0%,
      rgba(255,255,255,1) 13%,
      rgba(255,255,255,.92) 21%,
      rgba(255,255,255,.60) 29%,
      rgba(255,255,255,.22) 37%,
      transparent 45%
    ),
    radial-gradient(
      circle at 50% 50%,
      var(--rift-star-highlight) 0%,
      var(--rift-star-main) 58%,
      var(--rift-star-shadow) 100%
    );

  box-shadow:
    inset -4px -5px 8px rgba(0,0,0,.12),
    inset 3px 3px 6px rgba(255,255,255,.12);

  z-index: 2;
}


/* =========================================================
   STAR SHIMMER 1
   Solid luminous irregular photosphere
   ========================================================= */

.rift-system-star::before {
  content: "";

  position: absolute;
  inset: -11%;

  background:
    radial-gradient(
      circle at 34% 30%,
      #ffffff 0%,
      var(--rift-star-highlight) 18%,
      var(--rift-star-main) 48%,
      var(--rift-star-main) 72%,
      var(--rift-star-main) 100%
    );

  opacity: .75;

  clip-path: polygon(
    50% 0%,58% 3%,65% 2%,72% 7%,79% 7%,84% 14%,
    90% 18%,92% 26%,98% 31%,96% 39%,100% 47%,
    96% 54%,99% 63%,94% 69%,95% 77%,88% 81%,
    84% 89%,76% 90%,70% 97%,62% 95%,54% 100%,
    47% 97%,39% 100%,32% 95%,24% 97%,19% 90%,
    11% 89%,12% 81%,5% 77%,6% 69%,1% 63%,
    4% 54%,0% 47%,4% 39%,2% 31%,8% 26%,
    10% 18%,16% 14%,21% 7%,28% 7%,35% 2%,42% 3%
  );

  transform: rotate(9deg);

  z-index: -1;
  pointer-events: none;
}


/* =========================================================
   STAR SHIMMER 2
   Solid deeper spectral layer
   ========================================================= */

.rift-system-star::after {
  content: "";

  position: absolute;
  inset: -11%;

  background:
    radial-gradient(
      circle at 36% 32%,
      var(--rift-star-highlight) 0%,
      var(--rift-star-shimmer) 30%,
      var(--rift-star-shadow) 68%,
      var(--rift-star-shadow) 100%
    );

  opacity: .75;

  clip-path: polygon(
    50% 0%,59% 4%,68% 3%,75% 10%,84% 12%,88% 21%,
    95% 27%,94% 36%,100% 44%,96% 53%,99% 62%,
    93% 70%,92% 80%,83% 83%,77% 92%,67% 91%,
    59% 99%,50% 96%,41% 100%,33% 94%,23% 92%,
    17% 84%,8% 80%,7% 70%,1% 63%,4% 53%,
    0% 44%,6% 36%,5% 27%,12% 21%,16% 12%,
    25% 10%,32% 3%,41% 4%
  );

  transform: rotate(-8deg);

  z-index: -2;
  pointer-events: none;
}


/* =========================================================
   VIABLE LIGHT

   Normal star letter = black.
   viable-light letter = white with subtle black glow.
   No ring around the star.
   ========================================================= */

.rift-system-star {
  color: #000;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.rift-system-star.viable-light {
  color: #fff;

  text-shadow:
    0 0 2px rgba(0,0,0,1),
    0 0 4px rgba(0,0,0,.85),
    0 1px 3px rgba(0,0,0,.75);
}


/* =========================================================
   STAR CLASSES
   ========================================================= */

.rift-star-o {
  --rift-star-main: #77aaff;
  --rift-star-shimmer: #5d91ed;
  --rift-star-highlight: #dceaff;
  --rift-star-shadow: #4779db;
}

.rift-star-b {
  --rift-star-main: #a9c8ff;
  --rift-star-shimmer: #8eb1ee;
  --rift-star-highlight: #edf5ff;
  --rift-star-shadow: #789ddd;
}

.rift-star-a {
  --rift-star-main: #e8efff;
  --rift-star-shimmer: #d4def2;
  --rift-star-highlight: #ffffff;
  --rift-star-shadow: #bcc9e3;
}

.rift-star-f {
  --rift-star-main: #f4edcf;
  --rift-star-shimmer: #ded5b3;
  --rift-star-highlight: #fffef5;
  --rift-star-shadow: #d9cfa8;
}

.rift-star-g {
  --rift-star-main: #f4bb3f;
  --rift-star-shimmer: #e9a82f;
  --rift-star-highlight: #ffe67c;
  --rift-star-shadow: #df8c20;
}

.rift-star-k {
  --rift-star-main: #ef8d38;
  --rift-star-shimmer: #dc762d;
  --rift-star-highlight: #ffc26c;
  --rift-star-shadow: #c96025;
}

.rift-star-m {
  --rift-star-main: #d9523d;
  --rift-star-shimmer: #c13e32;
  --rift-star-highlight: #f48665;
  --rift-star-shadow: #a92f29;
}

.rift-star-l {
  --rift-star-main: #a66a3f;
  --rift-star-shimmer: #875335;
  --rift-star-highlight: #d39a69;
  --rift-star-shadow: #70432d;
}

.rift-star-d {
  --rift-star-main: #e8f4ff;
  --rift-star-shimmer: #c8deed;
  --rift-star-highlight: #fff;
  --rift-star-shadow: #a9c7db;
}


/* =========================================================
   COMPACT STELLAR OBJECTS
   Neutron star + stellar-mass black hole
   These are map symbols and intentionally not to physical scale.
   ========================================================= */

/* Neutron star — compact blue-white core with subtle magnetic halo */
.rift-neutron-star {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--rift-star-size,44px);
  height: var(--rift-star-size,44px);
  flex: 0 0 var(--rift-star-size,44px);

  border-radius: 50%;
  isolation: isolate;
}

.rift-neutron-star::before,
.rift-neutron-star::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px solid rgba(135,216,255,.62);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(122,205,255,.28);
  z-index: 1;
  pointer-events: none;
}

.rift-neutron-star::before {
  width: 82%;
  height: 40%;
  transform: translate(-50%,-50%) rotate(-22deg);
}

.rift-neutron-star::after {
  width: 68%;
  height: 46%;
  transform: translate(-50%,-50%) rotate(38deg);
  opacity: .72;
}

.rift-neutron-core {
  width: 34%;
  height: 34%;
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff 0%,
      #ffffff 14%,
      #dff7ff 30%,
      #8edcff 55%,
      #4b8fc7 78%,
      #173d67 100%
    );

  box-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 9px rgba(153,224,255,.85),
    0 0 18px rgba(77,160,225,.50);

  z-index: 2;
}

/* =========================================================
   STELLAR-MASS BLACK HOLE
   Accretion disk passes behind AND in front of shadow.
   ========================================================= */

.rift-black-hole {
  --rift-star-size: 30px;

  position: relative;

  width: calc(var(--rift-star-size) * 2.73);
  height: calc(var(--rift-star-size) * 2.13);

  flex: 0 0 calc(var(--rift-star-size) * 2.73);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  overflow: visible;
}


/* FULL ACCRETION DISK — BEHIND */

.rift-black-hole::before {
  content: "";

  position: absolute;

  width: calc(var(--rift-star-size) * 2.4);
  height: calc(var(--rift-star-size) * .73);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      transparent 0%,
      transparent 31%,
      #fff5ce 35%,
      #ffd170 43%,
      #df8738 53%,
      #8e3c22 63%,
      transparent 70%
    );

  box-shadow:
    0 0 7px rgba(255,188,88,.42);

  transform: rotate(-8deg);

  z-index: 1;
}


/* BLACK-HOLE SHADOW */

.rift-black-hole-core {
  position: relative;

  width: var(--rift-star-size);
  height: var(--rift-star-size);

  flex: 0 0 var(--rift-star-size);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #000 0%,
      #000 68%,
      #030405 82%,
      #090b0d 100%
    );

  box-shadow:
    inset 0 0 5px #000,
    0 0 2px rgba(255,255,255,.15);

  z-index: 2;
}


/* FRONT HALF OF ACCRETION DISK */

.rift-black-hole::after {
  content: "";

  position: absolute;

  width: calc(var(--rift-star-size) * 2.4);
  height: calc(var(--rift-star-size) * .73);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      transparent 0%,
      transparent 31%,
      rgba(255,249,217,.95) 35%,
      rgba(255,191,76,.90) 44%,
      rgba(190,79,36,.75) 56%,
      transparent 68%
    );

  clip-path: inset(50% 0 0 0);

  transform: rotate(-8deg);

  z-index: 4;

  pointer-events: none;
}


/* =========================================================
   HABITABILITY TEXT

   Wrap only the word:
   <span class="rift-habitable-text">Habitability</span>
   or
   <span class="rift-habitable-text">Habitable</span>
   ========================================================= */

.rift-habitable-text {
  color: #65ef78;
  font-weight: 700;
}


/* =========================================================
   PLANET GRID
   ========================================================= */

.rift-system-planets {
  display: grid;

  grid-template-columns:
    repeat(
      var(--rift-planet-count,5),
      minmax(150px,1fr)
    );

  gap: 20px;
  align-items: start;
}

.rift-system-planet-column {
  min-width: 0;
  text-align: center;
}


/* =========================================================
   ORBIT
   ========================================================= */

.rift-system-orbit {
  margin-bottom: .4rem;

  color: var(--rift-muted);

  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* =========================================================
   BODY STAGE
   ========================================================= */

.rift-system-body-stage {
  height: 110px;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow: visible;
}


/* =========================================================
   BODY BASE
   ========================================================= */

.rift-system-body {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--rift-body-size,44px);
  height: var(--rift-body-size,44px);

  flex: 0 0 var(--rift-body-size,44px);

  border: none;
  border-radius: 50%;

  font-size: 0;
  line-height: 0;

  overflow: hidden;
}


/* =========================================================
   HABITABILITY
   NO GREEN RING
   ========================================================= */

.rift-system-body.habitable,
.rift-system-moon-dot.habitable {
  outline: none;
}


/* =========================================================
   HABITABLE BODY
   ========================================================= */

.rift-system-body.habitable,
.rift-system-moon-dot.habitable {
  --rift-s1: var(--rift-p1);
  --rift-s2: var(--rift-p2);
  --rift-t1: var(--rift-p1);

  background: var(--rift-base);
}


/* =========================================================
   HABITABLE GEOGRAPHY
   ========================================================= */

.rift-system-body.habitable::before,
.rift-system-moon-dot.habitable::before {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 50%;

transform: rotate(
  calc(
    var(--rift-biome-rotation, 0deg) +
    (var(--rift-body-size, 44px) / 1px) * 90deg
  )
);
  transform-origin: 50% 50%;

  background:

/* TERTIARY — final outward push toward ~15% visible coverage */

/* fourth small rim lobe */
radial-gradient(
  ellipse 17% 18% at 105% 56%,
  var(--rift-t1) 0 68%,
  color-mix(in srgb,var(--rift-t1) 65%,transparent) 78%,
  transparent 89%
),

radial-gradient(
  ellipse 27% 23% at 88% 60%,
  var(--rift-t1) 0 68%,
  color-mix(in srgb,var(--rift-t1) 65%,transparent) 78%,
  transparent 89%
),

radial-gradient(
  ellipse 31% 21% at 96% 72%,
  var(--rift-t1) 0 68%,
  color-mix(in srgb,var(--rift-t1) 65%,transparent) 78%,
  transparent 89%
),

radial-gradient(
  ellipse 22% 29% at 91% 78%,
  var(--rift-t1) 0 68%,
  color-mix(in srgb,var(--rift-t1) 65%,transparent) 78%,
  transparent 89%
),



/* SECONDARY 1 */

radial-gradient(
  ellipse 42% 26% at 81% 30%,
  var(--rift-s1) 0 68%,
  color-mix(in srgb,var(--rift-s1) 65%,transparent) 79%,
  transparent 89%
),

radial-gradient(
  ellipse 27% 36% at 77% 41%,
  var(--rift-s1) 0 68%,
  color-mix(in srgb,var(--rift-s1) 65%,transparent) 79%,
  transparent 89%
),


/* SECONDARY 2 */

radial-gradient(
  ellipse 35% 28% at 73% 59%,
  var(--rift-s2) 0 68%,
  color-mix(in srgb,var(--rift-s2) 65%,transparent) 79%,
  transparent 89%
),

radial-gradient(
  ellipse 39% 26% at 85% 64%,
  var(--rift-s2) 0 68%,
  color-mix(in srgb,var(--rift-s2) 65%,transparent) 79%,
  transparent 89%
),

radial-gradient(
  ellipse 26% 35% at 79% 71%,
  var(--rift-s2) 0 68%,
  color-mix(in srgb,var(--rift-s2) 65%,transparent) 79%,
  transparent 89%
),


    /* PRIMARY 1 */

    radial-gradient(
      ellipse 38% 29% at 24% 24%,
      var(--rift-p1) 0 68%,
      color-mix(in srgb,var(--rift-p1) 65%,transparent) 79%,
      transparent 89%
    ),

    radial-gradient(
      ellipse 44% 27% at 38% 29%,
      var(--rift-p1) 0 68%,
      color-mix(in srgb,var(--rift-p1) 65%,transparent) 79%,
      transparent 89%
    ),

    radial-gradient(
      ellipse 28% 37% at 33% 40%,
      var(--rift-p1) 0 68%,
      color-mix(in srgb,var(--rift-p1) 65%,transparent) 79%,
      transparent 89%
    ),


    /* PRIMARY 2 */

    radial-gradient(
      ellipse 38% 29% at 60% 74%,
      var(--rift-p2) 0 68%,
      color-mix(in srgb,var(--rift-p2) 65%,transparent) 79%,
      transparent 89%
    ),

    radial-gradient(
      ellipse 31% 39% at 71% 65%,
      var(--rift-p2) 0 68%,
      color-mix(in srgb,var(--rift-p2) 65%,transparent) 79%,
      transparent 89%
    ),

    radial-gradient(
      ellipse 33% 26% at 75% 77%,
      var(--rift-p2) 0 68%,
      color-mix(in srgb,var(--rift-p2) 65%,transparent) 79%,
      transparent 89%
    ),


    /* PRIMARY 3 */

    radial-gradient(
      ellipse 36% 28% at 27% 66%,
      var(--rift-p3) 0 68%,
      color-mix(in srgb,var(--rift-p3) 65%,transparent) 79%,
      transparent 89%
    ),

    radial-gradient(
      ellipse 42% 26% at 41% 69%,
      var(--rift-p3) 0 68%,
      color-mix(in srgb,var(--rift-p3) 65%,transparent) 79%,
      transparent 89%
    ),

    radial-gradient(
      ellipse 27% 35% at 38% 76%,
      var(--rift-p3) 0 68%,
      color-mix(in srgb,var(--rift-p3) 65%,transparent) 79%,
      transparent 89%
    ),

    var(--rift-base);
}


/* =========================================================
   HABITABLE LIGHTING
   ========================================================= */

.rift-system-body.habitable::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 50%;

  box-shadow:
    inset -7px -8px 11px rgba(0,0,0,.23),
    inset 4px 4px 7px rgba(255,255,255,.09);

  pointer-events: none;
}


/* =========================================================
   PRIMARY BIOMES
   ========================================================= */

.rift-world-temperate {
  --rift-base: #396548;
  --rift-p1: #4b825a;
  --rift-p2: #60956b;
  --rift-p3: #326c49;
  --rift-biome-rotation: 0deg;
}

.rift-world-tropical {
  --rift-base: #19794c;
  --rift-p1: #23965b;
  --rift-p2: #3aaa6b;
  --rift-p3: #176d46;
  --rift-biome-rotation: 30deg;
}

.rift-world-arid {
  --rift-base: #765742;
  --rift-p1: #8d684d;
  --rift-p2: #a47a57;
  --rift-p3: #72513e;
  --rift-biome-rotation: 60deg;
}

.rift-world-arctic {
  --rift-base: #719da5;
  --rift-p1: #b7d8df;
  --rift-p2: #d7e8e9;
  --rift-p3: #86b4bd;
  --rift-biome-rotation: 90deg;
}

.rift-world-desert {
  --rift-base: #9f7442;
  --rift-p1: #c49a58;
  --rift-p2: #d6b16d;
  --rift-p3: #aa7d45;
  --rift-biome-rotation: 120deg;
}

.rift-world-ocean {
  --rift-base: #12527f;
  --rift-p1: #1c70ad;
  --rift-p2: #2585c3;
  --rift-p3: #176398;
  --rift-biome-rotation: 150deg;
}

.rift-world-tundra {
  --rift-base: #747a78;
  --rift-p1: #a9aca6;
  --rift-p2: #c9ccc7;
  --rift-p3: #8e9491;
  --rift-biome-rotation: 180deg;
}

.rift-world-taiga {
  --rift-base: #294638;
  --rift-p1: #355c45;
  --rift-p2: #496f57;
  --rift-p3: #203c30;
  --rift-biome-rotation: 210deg;
}

.rift-world-mountain {
  --rift-base: #68645c;
  --rift-p1: #77736c;
  --rift-p2: #969087;
  --rift-p3: #514e49;
  --rift-biome-rotation: 240deg;
}

.rift-world-fungal {
  --rift-base: #704a7b;
  --rift-p1: #8d5d96;
  --rift-p2: #aa76ae;
  --rift-p3: #60406b;
  --rift-biome-rotation: 270deg;
}

.rift-world-savanna {
  --rift-base: #756f38;
  --rift-p1: #9b9146;
  --rift-p2: #b4a856;
  --rift-p3: #615d32;
  --rift-biome-rotation: 300deg;
}

.rift-world-volcanic {
  --rift-base: #512f2b;
  --rift-p1: #7f352d;
  --rift-p2: #a44a32;
  --rift-p3: #66302b;
  --rift-biome-rotation: 330deg;
}


/* =========================================================
   SECONDARY BIOMES
   ========================================================= */

.rift-system-body.habitable.rift-secondary-temperate,
.rift-system-moon-dot.habitable.rift-secondary-temperate {
  --rift-s1:#4b825a;
  --rift-s2:#60956b;
}

.rift-system-body.habitable.rift-secondary-tropical,
.rift-system-moon-dot.habitable.rift-secondary-tropical {
  --rift-s1:#23965b;
  --rift-s2:#3aaa6b;
}

.rift-system-body.habitable.rift-secondary-arid,
.rift-system-moon-dot.habitable.rift-secondary-arid {
  --rift-s1:#8d684d;
  --rift-s2:#a47a57;
}

.rift-system-body.habitable.rift-secondary-arctic,
.rift-system-moon-dot.habitable.rift-secondary-arctic {
  --rift-s1:#b7d8df;
  --rift-s2:#d7e8e9;
}

.rift-system-body.habitable.rift-secondary-desert,
.rift-system-moon-dot.habitable.rift-secondary-desert {
  --rift-s1:#c49a58;
  --rift-s2:#d6b16d;
}

.rift-system-body.habitable.rift-secondary-ocean,
.rift-system-moon-dot.habitable.rift-secondary-ocean {
  --rift-s1:#1c70ad;
  --rift-s2:#2585c3;
}

.rift-system-body.habitable.rift-secondary-tundra,
.rift-system-moon-dot.habitable.rift-secondary-tundra {
  --rift-s1:#a9aca6;
  --rift-s2:#c9ccc7;
}

.rift-system-body.habitable.rift-secondary-taiga,
.rift-system-moon-dot.habitable.rift-secondary-taiga {
  --rift-s1:#355c45;
  --rift-s2:#496f57;
}

.rift-system-body.habitable.rift-secondary-mountain,
.rift-system-moon-dot.habitable.rift-secondary-mountain {
  --rift-s1:#77736c;
  --rift-s2:#969087;
}

.rift-system-body.habitable.rift-secondary-fungal,
.rift-system-moon-dot.habitable.rift-secondary-fungal {
  --rift-s1:#8d5d96;
  --rift-s2:#aa76ae;
}

.rift-system-body.habitable.rift-secondary-savanna,
.rift-system-moon-dot.habitable.rift-secondary-savanna {
  --rift-s1:#9b9146;
  --rift-s2:#b4a856;
}

.rift-system-body.habitable.rift-secondary-volcanic,
.rift-system-moon-dot.habitable.rift-secondary-volcanic {
  --rift-s1:#7f352d;
  --rift-s2:#a44a32;
}


/* =========================================================
   TERTIARY BIOMES
   ========================================================= */

.rift-system-body.habitable.rift-tertiary-temperate,
.rift-system-moon-dot.habitable.rift-tertiary-temperate {
  --rift-t1:#4b825a;
}

.rift-system-body.habitable.rift-tertiary-tropical,
.rift-system-moon-dot.habitable.rift-tertiary-tropical {
  --rift-t1:#23965b;
}

.rift-system-body.habitable.rift-tertiary-arid,
.rift-system-moon-dot.habitable.rift-tertiary-arid {
  --rift-t1:#8d684d;
}

.rift-system-body.habitable.rift-tertiary-arctic,
.rift-system-moon-dot.habitable.rift-tertiary-arctic {
  --rift-t1:#b7d8df;
}

.rift-system-body.habitable.rift-tertiary-desert,
.rift-system-moon-dot.habitable.rift-tertiary-desert {
  --rift-t1:#c49a58;
}

.rift-system-body.habitable.rift-tertiary-ocean,
.rift-system-moon-dot.habitable.rift-tertiary-ocean {
  --rift-t1:#1c70ad;
}

.rift-system-body.habitable.rift-tertiary-tundra,
.rift-system-moon-dot.habitable.rift-tertiary-tundra {
  --rift-t1:#a9aca6;
}

.rift-system-body.habitable.rift-tertiary-taiga,
.rift-system-moon-dot.habitable.rift-tertiary-taiga {
  --rift-t1:#355c45;
}

.rift-system-body.habitable.rift-tertiary-mountain,
.rift-system-moon-dot.habitable.rift-tertiary-mountain {
  --rift-t1:#77736c;
}

.rift-system-body.habitable.rift-tertiary-fungal,
.rift-system-moon-dot.habitable.rift-tertiary-fungal {
  --rift-t1:#8d5d96;
}

.rift-system-body.habitable.rift-tertiary-savanna,
.rift-system-moon-dot.habitable.rift-tertiary-savanna {
  --rift-t1:#9b9146;
}

.rift-system-body.habitable.rift-tertiary-volcanic,
.rift-system-moon-dot.habitable.rift-tertiary-volcanic {
  --rift-t1:#7f352d;
}

.rift-system-body.habitable.rift-tertiary-none,
.rift-system-moon-dot.habitable.rift-tertiary-none {
  --rift-t1: transparent;
}

/* =========================================================
   DEAD TERRESTRIAL ENGINE
   ========================================================= */

.rift-world-molten,
.rift-world-hot-barren,
.rift-world-barren,
.rift-world-cold-barren,
.rift-world-frozen {

  background:

    radial-gradient(
      circle at 28% 30%,
      var(--dead-c1) 0 8%,
      transparent 10%
    ),

    radial-gradient(
      circle at 70% 64%,
      var(--dead-c2) 0 11%,
      transparent 13%
    ),

    radial-gradient(
      circle at 43% 78%,
      var(--dead-c3) 0 5%,
      transparent 8%
    ),

    radial-gradient(
      ellipse at 68% 27%,
      var(--dead-patch) 0 16%,
      transparent 31%
    ),

    var(--dead-base);

  box-shadow:
    inset -7px -8px 11px rgba(0,0,0,.25),
    inset 4px 4px 7px rgba(255,255,255,.10);
}


/* =========================================================
   DEAD PALETTES
   ========================================================= */

.rift-world-molten {
  --dead-base:#71372e;
  --dead-c1:rgba(70,27,24,.30);
  --dead-c2:rgba(80,31,25,.27);
  --dead-c3:rgba(88,34,27,.24);
  --dead-patch:#884333;
}

.rift-world-hot-barren {
  --dead-base:#914b35;
  --dead-c1:rgba(70,31,23,.30);
  --dead-c2:rgba(83,38,27,.27);
  --dead-c3:rgba(91,43,30,.24);
  --dead-patch:#b65d3b;
}

.rift-world-barren {
  --dead-base:#8c7b67;
  --dead-c1:rgba(70,62,52,.30);
  --dead-c2:rgba(67,60,52,.27);
  --dead-c3:rgba(72,65,57,.24);
  --dead-patch:#9b8870;
}

.rift-world-cold-barren {
  --dead-base:#777a78;
  --dead-c1:rgba(69,72,73,.28);
  --dead-c2:rgba(66,70,72,.26);
  --dead-c3:rgba(73,77,77,.23);
  --dead-patch:#898e8b;
}

.rift-world-frozen {
  --dead-base:#b9c0be;
  --dead-c1:rgba(112,119,120,.25);
  --dead-c2:rgba(110,117,119,.23);
  --dead-c3:rgba(116,122,122,.20);
  --dead-patch:#cbd0cd;
}


/* =========================================================
   GIANT WORLDS

   Globe:
   .rift-world-giant-warm
   .rift-world-giant-cool
   .rift-world-giant-cold
   .rift-world-giant-frozen
   .rift-world-giant-hep

   Ring size:
   .rift-ring-thin
   .rift-ring-thick

   Ring color:
   .rift-ring-warm
   .rift-ring-cold
   .rift-ring-hep
   ========================================================= */


/* =========================================================
   WARM GIANT
   Existing gas giant palette.
   ========================================================= */

.rift-world-giant-warm {

  background:

    radial-gradient(
      ellipse 90% 15% at 15% 17%,
      #efdcb7 0 52%,
      transparent 57%
    ),

    radial-gradient(
      ellipse 86% 13% at 82% 29%,
      #b7835c 0 53%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 92% 16% at 20% 43%,
      #dfc18f 0 54%,
      transparent 59%
    ),

    radial-gradient(
      ellipse 86% 14% at 80% 58%,
      #9d6749 0 53%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 90% 15% at 18% 73%,
      #d5ae77 0 54%,
      transparent 59%
    ),

    radial-gradient(
      ellipse at 70% 70%,
      #874d38 0 7%,
      transparent 14%
    ),

    linear-gradient(
      #c89d70,
      #8f624a
    );

  box-shadow:
    inset -8px -9px 12px rgba(0,0,0,.25),
    inset 4px 4px 7px rgba(255,255,255,.10);
}


/* =========================================================
   COOL GIANT
   Cream / pale-gold gas giant.
   ========================================================= */

.rift-world-giant-cool {

  background:

    radial-gradient(
      ellipse 90% 15% at 15% 17%,
      #f3ead0 0 52%,
      transparent 57%
    ),

    radial-gradient(
      ellipse 86% 13% at 82% 29%,
      #c7ad82 0 53%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 92% 16% at 20% 43%,
      #e4d2aa 0 54%,
      transparent 59%
    ),

    radial-gradient(
      ellipse 86% 14% at 80% 58%,
      #aa8c68 0 53%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 90% 15% at 18% 73%,
      #d5c098 0 54%,
      transparent 59%
    ),

    radial-gradient(
      ellipse at 70% 70%,
      #94775b 0 7%,
      transparent 14%
    ),

    linear-gradient(
      #d8c49d,
      #9c8265
    );

  box-shadow:
    inset -8px -9px 12px rgba(0,0,0,.25),
    inset 4px 4px 7px rgba(255,255,255,.10);
}


/* =========================================================
   COLD GIANT
   Existing ice-giant palette.
   ========================================================= */

.rift-world-giant-cold {

  background:

    radial-gradient(
      ellipse 95% 12% at 12% 18%,
      #d3f0f7 0 52%,
      transparent 57%
    ),

    radial-gradient(
      ellipse 88% 13% at 85% 29%,
      #74b9d5 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 96% 14% at 16% 42%,
      #a8d9e9 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 90% 12% at 84% 54%,
      #5699bd 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 94% 14% at 15% 68%,
      #9ccfe1 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 86% 12% at 80% 81%,
      #3f83a8 0 52%,
      transparent 58%
    ),

    linear-gradient(
      #9dd4e6,
      #407fa4
    );

  box-shadow:
    inset -8px -9px 12px rgba(0,0,0,.25),
    inset 4px 4px 7px rgba(255,255,255,.10);
}


/* =========================================================
   FROZEN GIANT
   Deeper blue outer-system giant.
   ========================================================= */

.rift-world-giant-frozen {

  background:

    radial-gradient(
      ellipse 95% 12% at 12% 18%,
      #b9d9f0 0 52%,
      transparent 57%
    ),

    radial-gradient(
      ellipse 88% 13% at 85% 29%,
      #4e86bd 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 96% 14% at 16% 42%,
      #78add5 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 90% 12% at 84% 54%,
      #376ca6 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 94% 14% at 15% 68%,
      #6597c5 0 52%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 86% 12% at 80% 81%,
      #285488 0 52%,
      transparent 58%
    ),

    linear-gradient(
      #70a6d0,
      #2c5d94
    );

  box-shadow:
    inset -8px -9px 12px rgba(0,0,0,.25),
    inset 4px 4px 7px rgba(255,255,255,.10);
}


/* =========================================================
   HEP GIANT
   Existing Hep palette.
   ========================================================= */

.rift-world-giant-hep {

  background:

    radial-gradient(
      ellipse 90% 15% at 15% 17%,
      #f0c8d6 0 52%,
      transparent 57%
    ),

    radial-gradient(
      ellipse 86% 13% at 82% 29%,
      #c46f92 0 53%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 92% 16% at 20% 43%,
      #e5a5bb 0 54%,
      transparent 59%
    ),

    radial-gradient(
      ellipse 86% 14% at 80% 58%,
      #9e5379 0 53%,
      transparent 58%
    ),

    radial-gradient(
      ellipse 90% 15% at 18% 73%,
      #d987a5 0 54%,
      transparent 59%
    ),

    linear-gradient(
      #d98ca9,
      #9d567b
    );

  box-shadow:
    inset -8px -9px 12px rgba(0,0,0,.25),
    inset 4px 4px 7px rgba(255,255,255,.10);
}


/* =========================================================
   GIANT RING WRAPPER

   ::before = rear/full ring
   globe     = middle
   ::after  = front/lower arc
   ========================================================= */

.rift-giant-ring {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--rift-body-size,86px);
  height: var(--rift-body-size,86px);

  flex: 0 0 var(--rift-body-size,86px);

  overflow: visible;

  isolation: isolate;
}


.rift-giant-ring > .rift-system-body {
  position: relative;
  z-index: 2;
}


/* =========================================================
   THIN RING — BASE GEOMETRY
   ========================================================= */

.rift-giant-ring.rift-ring-thin::before,
.rift-giant-ring.rift-ring-thin::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 145%;
  height: 42%;

  transform:
    translate(-50%,-50%)
    rotate(-12deg);

  border: 2px solid;
  border-radius: 50%;

  box-sizing: border-box;

  pointer-events: none;
}


.rift-giant-ring.rift-ring-thin::before {
  z-index: 1;
}


.rift-giant-ring.rift-ring-thin::after {
  clip-path: inset(50% 0 0 0);
  z-index: 3;
}


/* =========================================================
   THICK RING — BASE GEOMETRY
   ========================================================= */

.rift-giant-ring.rift-ring-thick::before,
.rift-giant-ring.rift-ring-thick::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 193%;
  height: 61%;

  transform:
    translate(-50%,-50%)
    rotate(-12deg);

  border: 13px solid;
  border-radius: 50%;

  box-sizing: border-box;

  pointer-events: none;
}


.rift-giant-ring.rift-ring-thick::before {
  z-index: 1;
}


.rift-giant-ring.rift-ring-thick::after {
  clip-path: inset(50% 0 0 0);
  z-index: 3;
}


/* =========================================================
   WARM RINGS
   ========================================================= */

.rift-giant-ring.rift-ring-thin.rift-ring-warm::before {
  border-color: rgba(205,178,130,.86);

  box-shadow:
    0 0 0 1px rgba(102,78,47,.22);
}

.rift-giant-ring.rift-ring-thin.rift-ring-warm::after {
  border-color: rgba(219,191,143,.96);

  box-shadow:
    0 1px 1px rgba(70,50,30,.20);
}


.rift-giant-ring.rift-ring-thick.rift-ring-warm::before {
  border-color: rgba(193,164,115,.76);

  box-shadow:
    inset 0 0 0 3px rgba(235,214,174,.32),
    inset 0 0 0 6px rgba(151,119,77,.18),
    0 0 0 2px rgba(96,72,43,.24);
}

.rift-giant-ring.rift-ring-thick.rift-ring-warm::after {
  border-color: rgba(204,174,121,.88);

  box-shadow:
    inset 0 0 0 3px rgba(239,218,176,.34),
    inset 0 0 0 6px rgba(151,119,77,.18),
    0 1px 1px rgba(70,50,30,.25);
}


/* =========================================================
   COLD RINGS
   ========================================================= */

.rift-giant-ring.rift-ring-thin.rift-ring-cold::before {
  border-color: rgba(166,197,209,.78);

  box-shadow:
    0 0 0 1px rgba(70,105,122,.22);
}

.rift-giant-ring.rift-ring-thin.rift-ring-cold::after {
  border-color: rgba(194,219,227,.92);

  box-shadow:
    0 1px 1px rgba(47,78,94,.20);
}


.rift-giant-ring.rift-ring-thick.rift-ring-cold::before {
  border-color: rgba(145,184,202,.76);

  box-shadow:
    inset 0 0 0 3px rgba(210,234,241,.30),
    inset 0 0 0 6px rgba(92,137,158,.18),
    0 0 0 2px rgba(54,88,104,.24);
}

.rift-giant-ring.rift-ring-thick.rift-ring-cold::after {
  border-color: rgba(166,205,220,.88);

  box-shadow:
    inset 0 0 0 3px rgba(220,241,246,.34),
    inset 0 0 0 6px rgba(92,137,158,.18),
    0 1px 1px rgba(47,78,94,.25);
}


/* =========================================================
   HEP RINGS
   ========================================================= */

.rift-giant-ring.rift-ring-thin.rift-ring-hep::before {
  border-color: rgba(176,126,151,.78);

  box-shadow:
    0 0 0 1px rgba(99,57,78,.22);
}

.rift-giant-ring.rift-ring-thin.rift-ring-hep::after {
  border-color: rgba(205,151,178,.92);

  box-shadow:
    0 1px 1px rgba(99,57,78,.22);
}


.rift-giant-ring.rift-ring-thick.rift-ring-hep::before {
  border-color: rgba(176,126,151,.72);

  box-shadow:
    inset 0 0 0 3px rgba(225,177,199,.28),
    inset 0 0 0 6px rgba(128,77,102,.18),
    0 0 0 2px rgba(99,57,78,.25);
}

.rift-giant-ring.rift-ring-thick.rift-ring-hep::after {
  border-color: rgba(190,134,162,.86);

  box-shadow:
    inset 0 0 0 3px rgba(236,190,211,.32),
    inset 0 0 0 6px rgba(128,77,102,.18),
    0 1px 1px rgba(99,57,78,.28);
}

/* =========================================================
   PLANET TEXT
   ========================================================= */

.rift-system-planet-name {
  margin-top: .3rem;

  font-weight: 700;
  line-height: 1.25;
}

.rift-system-world-type {
  margin-top: .18rem;

  font-size: .78rem;
  line-height: 1.3;
}

.rift-system-world-data {
  margin-top: .15rem;

  color: var(--rift-muted);

  font-size: .7rem;
  line-height: 1.4;
}


/* =========================================================
   MOONS
   ========================================================= */

.rift-system-moons {
  margin-top: 1rem;
  padding-top: .8rem;

  border-top: 1px solid var(--rift-line);

  display: flex;
  flex-direction: column;

  gap: 8px;

  text-align: left;
}

.rift-system-moon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}


/* =========================================================
   MOON DOT
   ========================================================= */

.rift-system-moon-dot {
  position: relative;

  width: 18px;
  height: 18px;

  flex: 0 0 18px;

  border: none;
  border-radius: 50%;

  overflow: hidden;

  font-size: 0;
}


/* =========================================================
   HABITABLE MOON LIGHTING
   Geography + biome variables are shared with habitable planets above.
   ========================================================= */

.rift-system-moon-dot.habitable::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: 50%;

  box-shadow:
    inset -2px -2px 3px rgba(0,0,0,.23),
    inset 1px 1px 2px rgba(255,255,255,.08);

  pointer-events: none;
}


/* =========================================================
   MOON TEXT
   ========================================================= */

.rift-system-moon-label {
  font-size: .69rem;
  line-height: 1.25;

  min-width: 0;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;

  text-align: center;
}

.rift-system-moon-label strong {
  font-weight: 650;
}

.rift-system-moon-sub {
  color: var(--rift-muted);

  font-size: .63rem;
  line-height: 1.2;
  text-align: center;
}


/* =========================================================
   DENSE MOONS
   ========================================================= */

.rift-system-moons.dense {
  display: grid;

  grid-template-columns: 1fr 1fr;

  column-gap: 10px;
  row-gap: 10px;
}


/* =========================================================
   LEGEND
   ========================================================= */

.rift-system-legend {
  display: flex;
  flex-wrap: wrap;

  gap: 8px 18px;

  margin-top: 1rem;

  color: var(--rift-muted);

  font-size: .68rem;
  line-height: 1.4;
}

.rift-system-habitable-key {
  display: inline-block;

  width: 12px;
  height: 12px;

  margin-right: 6px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 30% 30%,
      #60956b 0 25%,
      transparent 27%
    ),

    radial-gradient(
      circle at 72% 65%,
      #237fc1 0 28%,
      transparent 30%
    ),

    #396548;

  vertical-align: -1px;
}


/* Old viable-light legend marker hidden */

.rift-system-light-key {
  display: none;
}


/* =========================================================
   NOTE
   ========================================================= */

.rift-system-note {
  margin-top: .75rem;

  color: var(--rift-muted);

  font-size: .68rem;
  line-height: 1.4;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width:700px) {

  .rift-system-view {
    padding: .9rem;
  }

  .rift-system-inner {
    min-width: 850px;
  }

  .rift-system-name {
    font-size: 1.2rem;
  }

  .rift-system-starspec {
    font-size: .82rem;
  }
}


/* =========================================================
   PRINT
   ========================================================= */

@media print {

  .rift-system-view {
    overflow: visible;
    border: 1px solid #888;
  }

  .rift-system-inner {
    min-width: 0;
  }

  .rift-system-planets {
    gap: 12px;
  }
}




/* =====================================================================
   03  VISUAL CHEAT SHEET
   ===================================================================== */

/* =========================================================
   RIFTMOOR VISUAL CHEAT SHEET
   ========================================================= */

.rift-cheat-sheet {
  max-width: 700px;
  margin: 1.5rem 0;
}

.rift-cheat-sheet h2 {
  margin-bottom: 1rem;
}

.rift-cheat-row {
  display: grid;
  grid-template-columns: 175px 1fr;
  align-items: center;

  min-height: 105px;

  padding: 12px 16px;
  margin-bottom: 10px;

  border: 1px solid #667080;
  border-radius: 10px;

  background: rgba(120,130,145,.08);
}

.rift-cheat-preview {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 80px;
}

.rift-cheat-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.rift-cheat-info strong {
  font-size: 1rem;
}

.rift-cheat-info code {
  display: inline-block;
  width: fit-content;

  padding: 3px 7px;

  border-radius: 5px;

  background: rgba(120,130,145,.16);

  font-size: .8rem;
}

.rift-cheat-info small {
  color: #9aa3ad;
  font-size: .72rem;
}


/* =========================================================
   CHEAT SHEET — MULTI-WORLD PREVIEW
   ========================================================= */

.rift-cheat-row.rift-cheat-world-row {
  grid-template-columns: 500px 1fr;
  min-height: 145px;
}

.rift-cheat-world-row .rift-cheat-preview {
  min-width: 0;
}

.rift-cheat-worlds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-items: center;

  gap: 18px;

  min-height: 115px;
}

.rift-cheat-world-example {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-width: 125px;
}

.rift-cheat-world-example small {
  color: #9aa3ad;

  font-size: .62rem;
  line-height: 1.2;

  text-align: center;
  white-space: nowrap;
}

/* Arrangement-chart neutron star:
   let the Riftmoor neutron-star graphic control its own appearance */

.stellar-system .star.rift-neutron-star {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;

    width: var(--rift-star-size);
    height: var(--rift-star-size);

    overflow: visible;
}





/* =====================================================================
   04  STELLAR ARRANGEMENT
   ===================================================================== */

/* =========================================================
   RIFTMOOR STELLAR SYSTEM VISUALIZER
   ========================================================= */


/* =========================================================
   SYSTEM CANVAS
   ========================================================= */

.stellar-system {
    position: relative;

    width: 520px;
    height: 400px;

    background: #05070b;

    border: 1px solid rgba(180, 190, 205, 0.28);
    border-radius: 12px;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025);

    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   STARS — SIZE SCALED BY STELLAR RADIUS
   ========================================================= */

/*
   Stellar radius supplied by Excel:
   style="--radius:1.00;"

   Visual diameter:
   8px + 22px × square root of stellar radius

   Minimum: 10px
   Maximum: 65px
*/

.stellar-system .star {
    position: absolute;

    width: clamp(10px, calc(8px + 22px * sqrt(var(--radius, 1))), 65px);
    height: clamp(10px, calc(8px + 22px * sqrt(var(--radius, 1))), 65px);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    background: currentColor;

    box-shadow:
        0 0 5px currentColor,
        0 0 12px currentColor;

    z-index: 10;
}

/* =========================================================
   STAR COLORS
   ========================================================= */

.blue {
    color: #5d8cff;
}

.blue-white {
    color: #a9c7ff;
}

.white {
    color: #f4f6ff;
}

.yellow-white {
    color: #fff1b8;
}

.yellow {
    color: #ffd95a;
}

.orange {
    color: #ff9b42;
}

.red {
    color: #e95345;
}

.brown {
    color: #8b5a3c;
}

/* =========================================================
   COMPACT OBJECTS
   ========================================================= */

/* =========================================================
   NEUTRON STAR
   ========================================================= */

/*
   Compact brilliant core surrounded by stylized
   magnetic-field loops.

   This is deliberately symbolic rather than to scale.
*/

.star.neutron {
    width: 10px;
    height: 10px;

    color: #eaf8ff;
    background: #ffffff;

    border: 1px solid #d9f4ff;

    box-shadow:
        0 0 4px #ffffff,
        0 0 9px #dff7ff,
        0 0 16px rgba(120, 205, 255, 0.95),
        0 0 26px rgba(80, 170, 255, 0.55);

    z-index: 12;
}


/* Main magnetic-field loop */

.star.neutron::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 46px;
    height: 24px;

    transform:
        translate(-50%, -50%)
        rotate(-28deg);

    border:
        1px solid rgba(120, 210, 255, 0.70);

    border-radius: 50%;

    box-shadow:
        0 0 4px rgba(100, 200, 255, 0.45),
        inset 0 0 4px rgba(100, 200, 255, 0.25);

    pointer-events: none;
}


/* Second crossing magnetic-field loop */

.star.neutron::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 46px;
    height: 24px;

    transform:
        translate(-50%, -50%)
        rotate(28deg);

    border:
        1px solid rgba(120, 210, 255, 0.70);

    border-radius: 50%;

    box-shadow:
        0 0 4px rgba(100, 200, 255, 0.45),
        inset 0 0 4px rgba(100, 200, 255, 0.25);

    pointer-events: none;
}


/* Stellar-mass black hole:
   black center with a restrained lensing-style rim.
   No assumed accretion disk. */

.star.black-hole {
    width: 16px;
    height: 16px;

    color: #000000;
    background: #000000;

    border: 2px solid rgba(220, 235, 255, 0.90);

    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.90),
        0 0 9px rgba(180, 215, 255, 0.55),
        0 0 16px rgba(120, 175, 255, 0.25);
}

/* =========================================================
   STAR LABELS
   ========================================================= */

.star-label {
    position: absolute;

    left: 50%;
    top: calc(100% + 5px);

    transform: translateX(-50%);

    color: #c8ced8;

    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: normal;

    white-space: nowrap;

    text-shadow: none;
}


/* =========================================================
   PLANETARY REGION
   ========================================================= */

/*
   Three symbolic rings identify the stellar group
   around which planets are generated.

   These do not represent three actual planets.
*/

.planetary-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    border: 1px solid rgba(120, 150, 180, 0.35);

    border-radius: 50%;

    transform: translate(-50%, -50%);

    z-index: 1;
}


.planet-orbit-1 {
    width: 150px;
    height: 150px;
    border-color: rgba(255, 90, 90, 0.38);
}

.planet-orbit-2 {
    width: 190px;
    height: 190px;
    border-color: rgba(90, 210, 115, 0.38);
}

.planet-orbit-3 {
    width: 230px;
    height: 230px;
    border-color: rgba(90, 170, 255, 0.38);
}


/* =========================================================
   STELLAR GROUPS
   ========================================================= */

.star-group {
    position: absolute;

    width: 100px;
    height: 100px;

    z-index: 5;
}


/* =========================================================
   MAIN S / P1 GROUP
   ========================================================= */

.main-group {
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);
}


/* =========================================================
   SINGLE-STAR GROUP
   ========================================================= */

.group-center {
    left: 50%;
    top: 50%;
}


/* =========================================================
   BINARY GROUP
   ========================================================= */

/*
   Two stars directly opposite one another.
*/

.group-2-pos-1 {
    left: 17.5%;
    top: 50%;
}

.group-2-pos-2 {
    left: 82.5%;
    top: 50%;
}


/* =========================================================
   TRINARY GROUP
   ========================================================= */

/*
   Three stars approximately 120 degrees apart.
*/

.group-3-pos-1 {
    left: 50%;
    top: 17.5%;
}

.group-3-pos-2 {
    left: 78.1%;
    top: 66.25%;
}

.group-3-pos-3 {
    left: 21.9%;
    top: 66.25%;
}


/* =========================================================
   QUATERNARY GROUP
   ========================================================= */

/*
   Four stars spaced 90 degrees apart.
*/

.group-4-pos-1 {
    left: 50%;
    top: 17.5%;
}

.group-4-pos-2 {
    left: 82.5%;
    top: 50%;
}

.group-4-pos-3 {
    left: 50%;
    top: 82.5%;
}

.group-4-pos-4 {
    left: 17.5%;
    top: 50%;
}


/* =========================================================
   INTERNAL STELLAR ORBIT
   ========================================================= */

/*
   P stars orbit their group's common barycenter.

   This ring passes through the stellar positions.
*/

.stellar-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 1px solid rgba(220, 230, 240, 0.65);

    z-index: 2;
}


.group-orbit {
    width: 65px;
    height: 65px;
}


/* =========================================================
   N / W COMPANION ORBITS
   ========================================================= */

/*
   Orbit dimensions are no longer defined here.

   Excel supplies:

       --orbit-x
       --orbit-y

   Example:

       --orbit-x:470px;
       --orbit-y:330px;

   This means the companion orbit and its stellar group
   always use exactly the same dimensions.
*/

.companion-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    width: var(--orbit-x);
    height: var(--orbit-y);

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 1px solid rgba(180, 190, 205, 0.30);

    z-index: 0;
}


/* =========================================================
   COMPANION GROUPS
   ========================================================= */

.companion-group {
    position: absolute;

    width: 100px;
    height: 100px;

    transform: translate(-50%, -50%);

    z-index: 5;
}


/* =========================================================
   RIGHT-HAND COMPANION
   ========================================================= */

/*
   Half of --orbit-x puts the group's barycenter
   exactly on the right edge of its ellipse.
*/

.companion-right {
    left: calc(50% + (var(--orbit-x) / 2));
    top: 50%;
}


/* =========================================================
   BOTTOM COMPANION
   ========================================================= */

/*
   Half of --orbit-y puts the group's barycenter
   exactly on the bottom edge of its ellipse.
*/

.companion-bottom {
    left: 50%;
    top: calc(50% + (var(--orbit-y) / 2));
}


/* =========================================================
   LEFT-HAND COMPANION
   ========================================================= */

/*
   Half of --orbit-x puts the group's barycenter
   exactly on the left edge of its ellipse.
*/

.companion-left {
    left: calc(50% - (var(--orbit-x) / 2));
    top: 50%;
}


/* =========================================================
   HOVER
   ========================================================= */

.star:hover {
    filter: brightness(1.35);

    cursor: default;

    z-index: 20;
}

.star-label.viable-label {
    color: #55d66b;
    text-shadow: none;
    -webkit-text-stroke: 0;
    font-weight: normal;
}

.rift-system-title {
    font-size: 2.2em;
}

.rift-world-belt {
  position: relative;

  width: 150px;
  height: 72px;

  min-width: 150px;
  min-height: 72px;
  max-width: 150px;
  max-height: 72px;

  flex: 0 0 150px;

  overflow: visible;

  /* Rotate asteroids + ellipse together */
  transform: rotate(-8deg);

  background:
  /* upper-left -> upper-right — slightly outside/around orbit */
  radial-gradient(circle at 2% 50%,  #918d85 0 2px, transparent 2.5px),
  radial-gradient(circle at 7% 39%,  #77746e 0 1.5px, transparent 2px),
  radial-gradient(circle at 14% 30%, #9a968d 0 2px, transparent 2.5px),
  radial-gradient(circle at 23% 23%, #716e68 0 1.5px, transparent 2px),
  radial-gradient(circle at 34% 19%, #99958c 0 2px, transparent 2.5px),
  radial-gradient(circle at 45% 17%, #77736c 0 1.5px, transparent 2px),
  radial-gradient(circle at 57% 18%, #9a968d 0 2.5px, transparent 3px),
  radial-gradient(circle at 69% 21%, #716e68 0 1.5px, transparent 2px),
  radial-gradient(circle at 80% 27%, #99958f 0 2px, transparent 2.5px),
  radial-gradient(circle at 90% 36%, #77746d 0 1.5px, transparent 2px),
  radial-gradient(circle at 98% 49%, #918d85 0 2px, transparent 2.5px),

  /* lower-right -> lower-left */
  radial-gradient(circle at 95% 60%, #77746e 0 1.5px, transparent 2px),
  radial-gradient(circle at 87% 69%, #9a968d 0 2.5px, transparent 3px),
  radial-gradient(circle at 77% 76%, #716e68 0 1.5px, transparent 2px),
  radial-gradient(circle at 65% 80%, #99958c 0 2px, transparent 2.5px),
  radial-gradient(circle at 52% 82%, #77736c 0 1.5px, transparent 2px),
  radial-gradient(circle at 39% 81%, #918d85 0 2px, transparent 2.5px),
  radial-gradient(circle at 27% 77%, #77746e 0 1.5px, transparent 2px),
  radial-gradient(circle at 17% 70%, #9a968d 0 2.5px, transparent 3px),
  radial-gradient(circle at 8% 61%,  #716e68 0 1.5px, transparent 2px);
}


/* Orbital path — NO independent rotation */
.rift-world-belt::before {
  content: "";

  position: absolute;
  left: 50%;
  top: 50%;

  width: 142px;
  height: 42px;

  transform: translate(-50%, -50%);

  border: 1px dashed rgba(170,180,190,.30);
  border-radius: 50%;

  box-shadow:
    0 0 0 5px rgba(170,180,190,.020),
    0 0 0 10px rgba(170,180,190,.012);

  pointer-events: none;
}


/* Extra debris — inherits rotation with whole belt */
.rift-world-belt::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at 19% 31%, #aaa69c 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 27%, #77746e 0 1px, transparent 1.5px),
    radial-gradient(circle at 48% 25%, #aaa69c 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 30%, #77746e 0 1px, transparent 1.5px),
    radial-gradient(circle at 81% 64%, #aaa69c 0 1px, transparent 1.5px),
    radial-gradient(circle at 58% 73%, #77746e 0 1px, transparent 1.5px),
    radial-gradient(circle at 34% 71%, #aaa69c 0 1px, transparent 1.5px),
    radial-gradient(circle at 16% 57%, #77746e 0 1px, transparent 1.5px);

  pointer-events: none;
}







/* =========================================================
   IRREGULAR SMALL BODY
   Size + world type automatically determine rotation.
   ========================================================= */

.rift-small-body {
  --rift-type-rotation: 0deg;

  width: var(--rift-small-size,18px);
  height: calc(var(--rift-small-size,18px) * .82);

  flex: 0 0 var(--rift-small-size,18px);

  border-radius:
    63% 37% 54% 46%
    /
    42% 61% 39% 58%;

  /*
     Every pixel of displayed size adds 11 degrees.
     World type adds another ~70 degrees.
  */
  transform:
    rotate(
      calc(
        var(--rift-type-rotation) +
        (var(--rift-small-size-number,18) * 11deg)
      )
    )
    skewX(-4deg);

  overflow: hidden;

  box-shadow:
    inset -3px -3px 4px rgba(0,0,0,.32),
    inset 2px 2px 3px rgba(255,255,255,.08);
}


/* Each barren type contributes a different rotation */

.rift-small-body.rift-world-molten {
  --rift-type-rotation: 0deg;
}

.rift-small-body.rift-world-hot-barren {
  --rift-type-rotation: 70deg;
}

.rift-small-body.rift-world-barren {
  --rift-type-rotation: 140deg;
}

.rift-small-body.rift-world-cold-barren {
  --rift-type-rotation: 210deg;
}

.rift-small-body.rift-world-frozen {
  --rift-type-rotation: 280deg;
}


/* Craters / surface variation */

.rift-small-body::after {
  content: "";

  position: absolute;
  inset: 0;

  border-radius: inherit;

  background:
    radial-gradient(
      ellipse at 76% 25%,
      rgba(255,255,255,.045) 0 11%,
      transparent 20%
    );

  pointer-events: none;
}




/* =====================================================================
   05  TOP-DOWN SCHEMATIC
   ===================================================================== */

/* ============================================================
   RIFTMOOR — SCHEMATIC ORBITAL ARRANGEMENT
   ============================================================
   Shared Riftmoor planet/star graphics are included above.
   Existing planet classes and original .star color/remnant
   classes are reused. No JavaScript.

   SECTIONS
   01  Canvas and headings
   02  Orbit rings and zones
   03  Planets and tooltips
   04  Asteroid belts
   05  Stellar groups and positioning
   06  Stellar visuals (uses existing .star classes)
   07  Wide companion
   08  Legend and responsive tweaks
   ============================================================ */

/* 01 — CANVAS AND HEADINGS */
.rift-schematic,.rift-schematic * {
  box-sizing:border-box}

.rift-schematic {
  color:#dce6f2;
  background:#070c14;
  font:14px system-ui,sans-serif;
  padding:14px;
  max-width:1350px;
  margin:auto}

.rift-schematic-title {
  font-size:23px;
  font-weight:700;
  margin:0 0 4px}

.rift-schematic-sub {
  color:#a6b6ca;
  font-size:12px;
  margin:0 0 12px}

.rift-schematic-map {
  position:relative;
  container-type:inline-size;
  width:100%;
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%,#17253a,#0b1423 50%,#050a13);
  border:1px solid #35465a;
  border-radius:12px;
  overflow:hidden;
  isolation:isolate;
  /* Excel supplies --last-orbit on this map element. */
  --rift-last-orbit:max(1,var(--last-orbit,26));
  --rift-base:4.5cqw;
  --rift-step:calc(39cqw / var(--rift-last-orbit));}

/* 02 — ORBIT RINGS AND ZONES */
.rift-schematic-slot {
  --rift-distance:calc(var(--rift-base) + var(--orbit)*var(--rift-step));
  --rift-angle:calc(var(--orbit)*137.508deg);
  --rift-x:calc(50% + cos(var(--rift-angle))*var(--rift-distance));
  --rift-y:calc(50% + sin(var(--rift-angle))*var(--rift-distance));
  position:absolute;
  inset:0;
  pointer-events:none}

.rift-schematic-slot::before {
  content:"";
  position:absolute;
  width:calc(var(--rift-distance)*2);
  height:calc(var(--rift-distance)*2);
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px solid var(--zone-color);
  border-radius:50%;
  opacity:.56}

.rift-schematic-slot[data-zone="1"] {
  --zone-color:#ff4d4d}

.rift-schematic-slot[data-zone="2"] {
  --zone-color:#ffb52e}

.rift-schematic-slot[data-zone="3"] {
  --zone-color:#55d66b}

.rift-schematic-slot[data-zone="4"] {
  --zone-color:#55bfff}

.rift-schematic-slot[data-zone="5"] {
  --zone-color:#557cff}

/* 03 — PLANETS AND TOOLTIPS */
.rift-schematic-planet {
  position:absolute;
  left:var(--rift-x);
  top:var(--rift-y);
  transform:translate(-50%,-50%);
  width:var(--size,20px);
  height:var(--size,20px);
  pointer-events:auto;
  cursor:help;
  z-index:2;
  outline:none}

.rift-schematic-planet>.rift-system-body,.rift-schematic-planet>.rift-giant-ring {
  --rift-body-size:var(--size,20px);
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  margin:0}

.rift-schematic-planet>.rift-giant-ring>.rift-system-body {
  --rift-body-size:var(--size,20px);
  width:100%;
  height:100%}

.rift-schematic-planet:hover,.rift-schematic-planet:focus {
  z-index:100}

.rift-schematic-planet:hover>.rift-system-body,.rift-schematic-planet:focus>.rift-system-body {
  outline:2px solid white;
  outline-offset:2px}

.rift-schematic-planet::before {
  content:none;
  position:absolute;
  left:calc(100% + 5px);
  top:50%;
  transform:translateY(-50%);
  color:#dce6f2;
  font:11px system-ui;
  text-shadow:0 1px 4px #000,0 0 3px #000;
  white-space:nowrap;
  pointer-events:none}

.rift-schematic-planet::after {
  content:attr(data-tip);
  position:absolute;
  left:50%;
  bottom:calc(100% + 9px);
  transform:translateX(-50%);
  background:#14243a;
  border:1px solid #8fa4ba;
  border-radius:7px;
  color:#eaf2ff;
  font:12px/1.55 system-ui;
  padding:8px 11px;
  white-space:pre;
  min-width:155px;
  max-width:240px;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  box-shadow:0 5px 18px #000b}

.rift-schematic-planet:hover::after,.rift-schematic-planet:focus::after {
  opacity:1;
  visibility:visible}

/* 04 — ASTEROID BELTS: see particle-rendering section at end. */

/* ============================================================
   05 — STELLAR ARRANGEMENT: TWO COMPANION INSETS MAXIMUM
   Near inset: upper right. Wide inset: upper left.
   Each independent root group occupies a different orbital
   position; P2/P3 stay attached to their root's small orbit.
   ============================================================ */
.rift-schematic-stars {
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:7.5cqw; height:7.5cqw;
  border:1px dashed #6f8395;
  border-radius:50%; z-index:8; pointer-events:none;
}
/* Central stars sit exactly on the dashed S-group ring.
   Single stars remain centered, with the ring visible. */
.rift-schematic-stars > .rift-schematic-star.star:nth-child(1) {
  left:50%; top:50%;
}
/* Binary: diametrically opposed. */
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(2)):not(:has(> .rift-schematic-star.star:nth-child(3))) > .rift-schematic-star.star:nth-child(1) { left:0%; top:50%; }
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(2)):not(:has(> .rift-schematic-star.star:nth-child(3))) > .rift-schematic-star.star:nth-child(2) { left:100%; top:50%; }
/* Triple: 120 degree intervals, starting at 12 o'clock. */
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(3)):not(:has(> .rift-schematic-star.star:nth-child(4))) > .rift-schematic-star.star:nth-child(1) { left:50%; top:0%; }
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(3)):not(:has(> .rift-schematic-star.star:nth-child(4))) > .rift-schematic-star.star:nth-child(2) { left:93.3013%; top:75%; }
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(3)):not(:has(> .rift-schematic-star.star:nth-child(4))) > .rift-schematic-star.star:nth-child(3) { left:6.6987%; top:75%; }
/* Quaternary: 90 degree intervals. */
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(4)) > .rift-schematic-star.star:nth-child(1) { left:50%; top:0%; }
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(4)) > .rift-schematic-star.star:nth-child(2) { left:100%; top:50%; }
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(4)) > .rift-schematic-star.star:nth-child(3) { left:50%; top:100%; }
.rift-schematic-stars:has(> .rift-schematic-star.star:nth-child(4)) > .rift-schematic-star.star:nth-child(4) { left:0%; top:50%; }

/* One box per category, regardless of number of stars. */
.rift-schematic-near-track,
.rift-schematic-wide-collection {
  position:absolute;
  top:2%;
  width:clamp(116px,18cqw,220px);
  height:clamp(116px,18cqw,220px);
  border:1px solid #566b81;
  border-radius:12px;
  /* Miniature planetary system at the shared orbital center. */
   background:
     radial-gradient(circle at center,#ffd76d 0 3px,#ffc34a 4px,transparent 6px) 50% 58% / 46px 46px no-repeat,
     radial-gradient(circle at center,transparent 0 12px,#69829a 12.5px 13.3px,transparent 14px) 50% 58% / 46px 46px no-repeat,
     radial-gradient(circle at center,transparent 0 20px,#536e89 20.5px 21.2px,transparent 22px) 50% 58% / 46px 46px no-repeat,
     radial-gradient(circle at 50% 54%,#17273c,#0b1423 68%,#060c17);
  box-shadow:0 6px 20px #0009,inset 0 0 0 1px #ffffff0a;
  z-index:30;
  isolation:isolate;
  pointer-events:none;
}
.rift-schematic-near-track { right:2%; }
.rift-schematic-wide-collection { left:2%; }
.rift-schematic-near-track::before,
.rift-schematic-wide-collection::before {
  position:absolute; top:8px; left:0; width:100%;
  text-align:center; font:9px system-ui; z-index:8; pointer-events:none;
  letter-spacing:.9px; color:#a7bacd;
}
.rift-schematic-near-track::before { content:'NEAR COMPANIONS'; }
.rift-schematic-wide-collection::before { content:'WIDE COMPANIONS'; }
/* Shared orbit of the independent root groups, not an orbit
   binding them to one another. */
.rift-schematic-near-track::after,
.rift-schematic-wide-collection::after {
  content:''; position:absolute; left:50%; top:56%;
  width:65%; height:65%; transform:translate(-50%,-50%);
  border:1px dashed rgba(151,176,199,.65);
  border-radius:50%; pointer-events:none;
}
.rift-schematic-wide-collection::after { border-color:rgba(170,132,109,.8); }

/* Each root star group gets its own position on that orbit.
   There is NO individual rectangle around a W root. */
.rift-schematic-near-group,
.rift-schematic-wide-group {
  position:absolute;
  width:32%; height:32%;
  min-width:0; min-height:0;
  transform:translate(-50%,-50%);
  border:0; border-radius:50%; background:none;
  box-shadow:none; z-index:2; pointer-events:none;
}
/* Orbit center is (50%,58%) with radius 32.5%.
   Group centers are positioned on that SAME orbit. Pairing
   circles are centered on the group's position, never above it. */
.rift-schematic-near-group:nth-child(1),
.rift-schematic-wide-group:nth-child(1) { left:73%; top:35%; }
.rift-schematic-near-group:nth-child(2),
.rift-schematic-wide-group:nth-child(2) { left:73%; top:81%; }
.rift-schematic-near-group:nth-child(3),
.rift-schematic-wide-group:nth-child(3) { left:17.5%; top:58%; }

/* Binary and triple companion groups share one internal orbit. */
.rift-schematic-near-group.is-pair::before,
.rift-schematic-wide-group.is-pair::before {
  content:''; position:absolute; inset:0;
  border:1px dashed rgba(227,161,113,.9);
  border-radius:50%; pointer-events:none;
}
/* Remove obsolete per-wide-panel decorations. */
.rift-schematic-wide-group::after { content:none; }

/* ============================================================
   06 — STAR GRAPHICS AND POSITIONING
   ============================================================ */
.rift-schematic .rift-schematic-star.star {
  position:absolute; display:block; box-sizing:border-box;
  width:clamp(10px,calc(12px + 18px * var(--radius,1)),65px);
  height:clamp(10px,calc(12px + 18px * var(--radius,1)),65px);
  border-radius:50%; transform:translate(-50%,-50%);
  background:currentColor;
  box-shadow:0 0 5px currentColor,0 0 12px currentColor;
  z-index:10; cursor:help; pointer-events:auto;
}
.rift-schematic .star.blue { color:#5d8cff; }
.rift-schematic .star.blue-white { color:#a9c7ff; }
.rift-schematic .star.white { color:#f4f6ff; }
.rift-schematic .star.yellow-white { color:#fff1b8; }
.rift-schematic .star.yellow { color:#ffd95a; }
.rift-schematic .star.orange { color:#ff9b42; }
.rift-schematic .star.red { color:#e95345; }
.rift-schematic .star.brown { color:#8b5a3c; }
.rift-schematic .rift-schematic-star.star.neutron { width:10px; height:10px; }
.rift-schematic .rift-schematic-star.star.black-hole { width:16px; height:16px; }

.rift-schematic-near-group > .rift-schematic-star.star:nth-child(1),
.rift-schematic-wide-group > .rift-schematic-star.star:nth-child(1) { left:50%; top:50%; }
.rift-schematic-near-group.is-pair > .rift-schematic-star.star:nth-child(1),
.rift-schematic-wide-group.is-pair > .rift-schematic-star.star:nth-child(1) { left:19%; top:50%; }
.rift-schematic-near-group > .rift-schematic-star.star:nth-child(2),
.rift-schematic-wide-group > .rift-schematic-star.star:nth-child(2) { left:81%; top:50%; }
.rift-schematic-near-group > .rift-schematic-star.star:nth-child(3),
.rift-schematic-wide-group > .rift-schematic-star.star:nth-child(3) { left:50%; top:9%; }

/* ============================================================
   07 — LEGEND AND RESPONSIVE
   ============================================================ */
.rift-schematic-legend { display:flex; flex-wrap:wrap; gap:14px; margin:12px 0 0; color:#adbed1; font-size:12px; }
.rift-schematic-legend span::before { content:''; display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--color); margin-right:5px; }
.rift-schematic-note { font-size:11px; color:#9eafc2; margin:10px 0 0; }
@media(max-width:700px) {
  .rift-schematic { padding:6px; }
  .rift-schematic-planet::before { font-size:9px; }
  .rift-schematic-near-track,.rift-schematic-wide-collection { width:clamp(95px,19cqw,150px); height:clamp(95px,19cqw,150px); }
  .rift-schematic .rift-schematic-near-group .rift-schematic-star.star,
  .rift-schematic .rift-schematic-wide-group .rift-schematic-star.star { width:clamp(9px,calc(8px + 13px * var(--radius,1)),30px); height:clamp(9px,calc(8px + 13px * var(--radius,1)),30px); }
}

/* Triple systems: three bodies spaced 120 degrees on the same
   small orbit, in either the near or wide inset. */
.rift-schematic-near-group:has(> .rift-schematic-star:nth-child(3)) > .rift-schematic-star.star:nth-child(1),
.rift-schematic-wide-group:has(> .rift-schematic-star:nth-child(3)) > .rift-schematic-star.star:nth-child(1) { left:50%; top:16%; }
.rift-schematic-near-group:has(> .rift-schematic-star:nth-child(3)) > .rift-schematic-star.star:nth-child(2),
.rift-schematic-wide-group:has(> .rift-schematic-star:nth-child(3)) > .rift-schematic-star.star:nth-child(2) { left:80%; top:68%; }
.rift-schematic-near-group:has(> .rift-schematic-star:nth-child(3)) > .rift-schematic-star.star:nth-child(3),
.rift-schematic-wide-group:has(> .rift-schematic-star:nth-child(3)) > .rift-schematic-star.star:nth-child(3) { left:20%; top:68%; }

/* ============================================================
   09 — COMPANION INSET READABILITY
   Keep shared-system symbol visible and prevent overlap with
   the inset heading. The two inset boxes are never duplicated.
   ============================================================ */
.rift-schematic-near-track::after,
.rift-schematic-wide-collection::after { z-index:1; }
.rift-schematic-near-group,
.rift-schematic-wide-group { z-index:3; }
.rift-schematic-near-track::before,
.rift-schematic-wide-collection::before { z-index:6; }





/* =====================================================================
   06  SCHEMATIC RINGS AND ASTEROIDS
   ===================================================================== */

/* =========================================================
   SCHEMATIC — SINGLE-ELEMENT GIANT RINGS
   ========================================================= */

/* Allow rings to extend beyond the globe */
.rift-schematic-planet > .rift-system-body.rift-giant-ring {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* Globe stays circular and above rear ring */
.rift-schematic-planet > .rift-system-body.rift-giant-ring {
  z-index: 0;
}

/* Ring geometry stays on the existing element */
.rift-schematic-planet > .rift-system-body.rift-giant-ring::before,
.rift-schematic-planet > .rift-system-body.rift-giant-ring::after {
  pointer-events: none;
}

/* Thin rings scale with schematic planet size */
.rift-schematic-planet > .rift-giant-ring.rift-ring-thin::before,
.rift-schematic-planet > .rift-giant-ring.rift-ring-thin::after {
  border-width: 1px;
}

/* Thick rings scale with schematic planet size */
.rift-schematic-planet > .rift-giant-ring.rift-ring-thick::before,
.rift-schematic-planet > .rift-giant-ring.rift-ring-thick::after {
  border-width: max(2px, calc(var(--size, 20px) * .12));
}

/* =========================================================
   SCHEMATIC — HIDE REAR RINGS BEHIND GIANTS
   ========================================================= */

.rift-schematic-planet > .rift-system-body.rift-giant-ring::before {
  -webkit-mask-image: radial-gradient(
    circle at center,
    transparent 0 49%,
    black 51% 100%
  );

  mask-image: radial-gradient(
    circle at center,
    transparent 0 49%,
    black 51% 100%
  );
}

/* ============================================================
   10 — ASTEROID BELT: INDIVIDUAL PARTICLES
   Fixed deterministic scatter; no gradients, dotted borders,
   conic masks, or rotated surfaces. The orbit radius comes from
   the SAME --rift-distance as the planetary orbit rings.
   ============================================================ */
.rift-schematic-slot.is-belt::before {
  border:0;
  background:none;
  mask:none;
  -webkit-mask:none;
  width:0;
  height:0;
  opacity:1;
}
.rift-schematic-slot.is-belt::after,
.rift-schematic-slot.is-belt > .rift-schematic-belt,
.rift-schematic-slot.is-belt > .rift-schematic-belt::before {
  content:"";
  display:block !important;
  position:absolute;
  left:50%; top:50%;
  width:1px; height:1px;
  padding:0; margin:0;
  border:0; border-radius:50%;
  background:transparent;
transform:rotate(calc((var(--orbit, 1) - 1) * 60deg));
  mask:none; -webkit-mask:none;
  opacity:1;
  pointer-events:none;
}
.rift-schematic-slot.is-belt > .rift-schematic-planet { display:none !important; }
/* Belt stat marker stays keyboard-focusable; its letter is hidden. */
.rift-schematic-slot.is-belt > .rift-schematic-belt-label {
  display:grid; place-items:center;
  width:12px; height:12px;
  border:1px solid #a7a899; border-radius:50%;
  background:#14243a; color:#e9e3ce;
  font:0/0 system-ui;
  pointer-events:auto; cursor:help;
  outline-offset:3px; z-index:20;
}
.rift-schematic-slot.is-belt > .rift-schematic-belt-label:is(:hover,:focus-visible)::after {
  display:block; z-index:100;
  color:#eaf2ff; font:12px/1.55 system-ui;
  box-shadow:0 5px 18px #000b;
}
/* Single S star has no shared stellar-orbit line. */
.rift-schematic-stars:not(:has(> .rift-schematic-star.star:nth-child(2))) {border-color:transparent;}

/* Scatter lane 1: 85 independently positioned asteroids. */
.rift-schematic-slot.is-belt::after {
  box-shadow:
    calc(var(--rift-distance) * 0.989094) calc(var(--rift-distance) * 0.021840) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * 0.986176) calc(var(--rift-distance) * 0.079084) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.980564) calc(var(--rift-distance) * 0.118384) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.990832) calc(var(--rift-distance) * 0.241565) 0 0.15px #8395a5,
    calc(var(--rift-distance) * 0.979147) calc(var(--rift-distance) * 0.298803) 0 0.45px #8395a5,
    calc(var(--rift-distance) * 0.952481) calc(var(--rift-distance) * 0.375296) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.890093) calc(var(--rift-distance) * 0.433858) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.852129) calc(var(--rift-distance) * 0.518483) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.818101) calc(var(--rift-distance) * 0.550947) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * 0.757760) calc(var(--rift-distance) * 0.615718) 0 0.45px #d0a47d,
    calc(var(--rift-distance) * 0.744163) calc(var(--rift-distance) * 0.661036) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.685469) calc(var(--rift-distance) * 0.729083) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * 0.597392) calc(var(--rift-distance) * 0.778538) 0 0.3px #d0a47d,
    calc(var(--rift-distance) * 0.588980) calc(var(--rift-distance) * 0.836060) 0 0.15px #8395a5,
    calc(var(--rift-distance) * 0.528414) calc(var(--rift-distance) * 0.858492) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * 0.466631) calc(var(--rift-distance) * 0.898607) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.366791) calc(var(--rift-distance) * 0.909981) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.284607) calc(var(--rift-distance) * 0.946077) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * 0.212147) calc(var(--rift-distance) * 1.001339) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.163757) calc(var(--rift-distance) * 0.992787) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.060083) calc(var(--rift-distance) * 0.989268) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.002155) calc(var(--rift-distance) * 1.000755) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.027703) calc(var(--rift-distance) * 0.979631) 0 0.15px #d0a47d,
    calc(var(--rift-distance) * -0.105472) calc(var(--rift-distance) * 0.986064) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.199618) calc(var(--rift-distance) * 0.994769) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.278483) calc(var(--rift-distance) * 0.935482) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.329693) calc(var(--rift-distance) * 0.948186) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.438036) calc(var(--rift-distance) * 0.917473) 0 0.15px #d0a47d,
    calc(var(--rift-distance) * -0.448808) calc(var(--rift-distance) * 0.878193) 0 0.15px #8395a5,
    calc(var(--rift-distance) * -0.519992) calc(var(--rift-distance) * 0.854764) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * -0.607585) calc(var(--rift-distance) * 0.813125) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * -0.660063) calc(var(--rift-distance) * 0.756002) 0 0.45px #d0a47d,
    calc(var(--rift-distance) * -0.707689) calc(var(--rift-distance) * 0.731407) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.794112) calc(var(--rift-distance) * 0.633796) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.802367) calc(var(--rift-distance) * 0.607230) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.856098) calc(var(--rift-distance) * 0.508310) 0 0.3px #bcb9a9,
    calc(var(--rift-distance) * -0.881664) calc(var(--rift-distance) * 0.435656) 0 0.3px #8395a5,
    calc(var(--rift-distance) * -0.903703) calc(var(--rift-distance) * 0.376317) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.923261) calc(var(--rift-distance) * 0.345262) 0 0.3px #bcb9a9,
    calc(var(--rift-distance) * -0.978226) calc(var(--rift-distance) * 0.266622) 0 0.3px #bcb9a9,
    calc(var(--rift-distance) * -0.994167) calc(var(--rift-distance) * 0.155483) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.997538) calc(var(--rift-distance) * 0.093265) 0 0px #8395a5,
    calc(var(--rift-distance) * -1.013228) calc(var(--rift-distance) * 0.049530) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.998713) calc(var(--rift-distance) * -0.047105) 0 0.15px #8395a5,
    calc(var(--rift-distance) * -1.008632) calc(var(--rift-distance) * -0.099533) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.985174) calc(var(--rift-distance) * -0.174915) 0 0.45px #8395a5,
    calc(var(--rift-distance) * -0.967144) calc(var(--rift-distance) * -0.281033) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.937127) calc(var(--rift-distance) * -0.294056) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * -0.929744) calc(var(--rift-distance) * -0.414820) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.871545) calc(var(--rift-distance) * -0.458077) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.867515) calc(var(--rift-distance) * -0.502174) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * -0.821450) calc(var(--rift-distance) * -0.583001) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.759402) calc(var(--rift-distance) * -0.646609) 0 0.15px #a5b0ba,
    calc(var(--rift-distance) * -0.723189) calc(var(--rift-distance) * -0.668975) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.628931) calc(var(--rift-distance) * -0.763254) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.604002) calc(var(--rift-distance) * -0.790198) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * -0.558703) calc(var(--rift-distance) * -0.855832) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * -0.482979) calc(var(--rift-distance) * -0.899932) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * -0.397757) calc(var(--rift-distance) * -0.892912) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * -0.353900) calc(var(--rift-distance) * -0.911907) 0 0.15px #a5b0ba,
    calc(var(--rift-distance) * -0.246087) calc(var(--rift-distance) * -0.977709) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * -0.186100) calc(var(--rift-distance) * -0.982289) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.149433) calc(var(--rift-distance) * -0.981651) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.062822) calc(var(--rift-distance) * -0.995435) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.050799) calc(var(--rift-distance) * -1.016692) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * 0.120349) calc(var(--rift-distance) * -0.975316) 0 0.45px #8395a5,
    calc(var(--rift-distance) * 0.183760) calc(var(--rift-distance) * -0.969048) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.257581) calc(var(--rift-distance) * -0.975509) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * 0.308091) calc(var(--rift-distance) * -0.966081) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.380459) calc(var(--rift-distance) * -0.948966) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.455000) calc(var(--rift-distance) * -0.904689) 0 0.45px #d0a47d,
    calc(var(--rift-distance) * 0.493786) calc(var(--rift-distance) * -0.853655) 0 0.45px #a5b0ba,
    calc(var(--rift-distance) * 0.561248) calc(var(--rift-distance) * -0.831954) 0 0.45px #a5b0ba,
    calc(var(--rift-distance) * 0.638266) calc(var(--rift-distance) * -0.756630) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.662378) calc(var(--rift-distance) * -0.739664) 0 0.45px #bcb9a9,
    calc(var(--rift-distance) * 0.757242) calc(var(--rift-distance) * -0.650511) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * 0.765771) calc(var(--rift-distance) * -0.614432) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.828889) calc(var(--rift-distance) * -0.545496) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.869037) calc(var(--rift-distance) * -0.495407) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.895169) calc(var(--rift-distance) * -0.425094) 0 0.3px #8395a5,
    calc(var(--rift-distance) * 0.921278) calc(var(--rift-distance) * -0.359775) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.965251) calc(var(--rift-distance) * -0.270844) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.965799) calc(var(--rift-distance) * -0.227785) 0 0.15px #d0a47d,
    calc(var(--rift-distance) * 0.970496) calc(var(--rift-distance) * -0.146711) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.992664) calc(var(--rift-distance) * -0.091719) 0 0px #d0a47d;
}

/* Scatter lane 2: 85 independently positioned asteroids. */
.rift-schematic-slot.is-belt > .rift-schematic-belt {
  box-shadow:
    calc(var(--rift-distance) * 0.853045) calc(var(--rift-distance) * 0.545540) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * 0.777791) calc(var(--rift-distance) * 0.598878) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * 0.737871) calc(var(--rift-distance) * 0.676812) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.684656) calc(var(--rift-distance) * 0.728831) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.666376) calc(var(--rift-distance) * 0.771023) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.583700) calc(var(--rift-distance) * 0.823913) 0 0.45px #bcb9a9,
    calc(var(--rift-distance) * 0.537825) calc(var(--rift-distance) * 0.841377) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.472713) calc(var(--rift-distance) * 0.884359) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.413901) calc(var(--rift-distance) * 0.935123) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.306354) calc(var(--rift-distance) * 0.975694) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * 0.266112) calc(var(--rift-distance) * 0.976762) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.149494) calc(var(--rift-distance) * 1.006525) 0 0.45px #8395a5,
    calc(var(--rift-distance) * 0.092325) calc(var(--rift-distance) * 0.999495) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.001464) calc(var(--rift-distance) * 1.022632) 0 0.3px #8395a5,
    calc(var(--rift-distance) * -0.041808) calc(var(--rift-distance) * 0.986368) 0 0.3px #d0a47d,
    calc(var(--rift-distance) * -0.145451) calc(var(--rift-distance) * 0.988778) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.184908) calc(var(--rift-distance) * 0.965043) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.261195) calc(var(--rift-distance) * 0.969670) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.318129) calc(var(--rift-distance) * 0.938397) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.435475) calc(var(--rift-distance) * 0.900877) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.483279) calc(var(--rift-distance) * 0.884125) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.526038) calc(var(--rift-distance) * 0.835523) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * -0.618361) calc(var(--rift-distance) * 0.802250) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * -0.651425) calc(var(--rift-distance) * 0.747504) 0 0.45px #d0a47d,
    calc(var(--rift-distance) * -0.732132) calc(var(--rift-distance) * 0.689061) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * -0.775218) calc(var(--rift-distance) * 0.618209) 0 0.15px #a5b0ba,
    calc(var(--rift-distance) * -0.810759) calc(var(--rift-distance) * 0.562328) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.880505) calc(var(--rift-distance) * 0.515461) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * -0.854737) calc(var(--rift-distance) * 0.478737) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.899259) calc(var(--rift-distance) * 0.403086) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.929432) calc(var(--rift-distance) * 0.320284) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.985628) calc(var(--rift-distance) * 0.270425) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.981421) calc(var(--rift-distance) * 0.167632) 0 0.15px #a5b0ba,
    calc(var(--rift-distance) * -0.994634) calc(var(--rift-distance) * 0.125386) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -1.018066) calc(var(--rift-distance) * 0.052148) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.998027) calc(var(--rift-distance) * -0.048795) 0 0px #8395a5,
    calc(var(--rift-distance) * -1.014133) calc(var(--rift-distance) * -0.106137) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.977719) calc(var(--rift-distance) * -0.212122) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.971226) calc(var(--rift-distance) * -0.268291) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.966062) calc(var(--rift-distance) * -0.309225) 0 0.15px #d0a47d,
    calc(var(--rift-distance) * -0.943870) calc(var(--rift-distance) * -0.391921) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.881326) calc(var(--rift-distance) * -0.459687) 0 0.15px #a5b0ba,
    calc(var(--rift-distance) * -0.841470) calc(var(--rift-distance) * -0.524383) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * -0.787591) calc(var(--rift-distance) * -0.592448) 0 0.45px #a5b0ba,
    calc(var(--rift-distance) * -0.767191) calc(var(--rift-distance) * -0.644376) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.708054) calc(var(--rift-distance) * -0.680394) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.667942) calc(var(--rift-distance) * -0.741299) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.602143) calc(var(--rift-distance) * -0.803491) 0 0.45px #a5b0ba,
    calc(var(--rift-distance) * -0.548796) calc(var(--rift-distance) * -0.843900) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.453840) calc(var(--rift-distance) * -0.888690) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * -0.390032) calc(var(--rift-distance) * -0.918190) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * -0.343183) calc(var(--rift-distance) * -0.919180) 0 0.45px #8395a5,
    calc(var(--rift-distance) * -0.296760) calc(var(--rift-distance) * -0.930482) 0 0.15px #d0a47d,
    calc(var(--rift-distance) * -0.222324) calc(var(--rift-distance) * -0.964974) 0 0.45px #8395a5,
    calc(var(--rift-distance) * -0.118351) calc(var(--rift-distance) * -0.974429) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.078666) calc(var(--rift-distance) * -0.973631) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.007134) calc(var(--rift-distance) * -0.977492) 0 0.45px #d0a47d,
    calc(var(--rift-distance) * 0.109696) calc(var(--rift-distance) * -0.994204) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.139699) calc(var(--rift-distance) * -1.008396) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.244369) calc(var(--rift-distance) * -0.969982) 0 0.15px #d0a47d,
    calc(var(--rift-distance) * 0.320958) calc(var(--rift-distance) * -0.966076) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.398031) calc(var(--rift-distance) * -0.923807) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.451212) calc(var(--rift-distance) * -0.880309) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.484838) calc(var(--rift-distance) * -0.874685) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.585674) calc(var(--rift-distance) * -0.799681) 0 0.15px #8395a5,
    calc(var(--rift-distance) * 0.634681) calc(var(--rift-distance) * -0.750231) 0 0.45px #8395a5,
    calc(var(--rift-distance) * 0.652389) calc(var(--rift-distance) * -0.732557) 0 0.45px #8395a5,
    calc(var(--rift-distance) * 0.771506) calc(var(--rift-distance) * -0.666339) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.779866) calc(var(--rift-distance) * -0.634830) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.848378) calc(var(--rift-distance) * -0.537303) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * 0.869183) calc(var(--rift-distance) * -0.527950) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.888420) calc(var(--rift-distance) * -0.424127) 0 0.3px #8395a5,
    calc(var(--rift-distance) * 0.918126) calc(var(--rift-distance) * -0.358015) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.934534) calc(var(--rift-distance) * -0.301879) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * 0.958698) calc(var(--rift-distance) * -0.224864) 0 0.3px #d0a47d,
    calc(var(--rift-distance) * 0.988864) calc(var(--rift-distance) * -0.150844) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.974963) calc(var(--rift-distance) * -0.088921) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.991760) calc(var(--rift-distance) * 0.002212) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.974336) calc(var(--rift-distance) * 0.071589) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.978255) calc(var(--rift-distance) * 0.114292) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.956837) calc(var(--rift-distance) * 0.225378) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.972499) calc(var(--rift-distance) * 0.261642) 0 0.15px #8395a5,
    calc(var(--rift-distance) * 0.906912) calc(var(--rift-distance) * 0.382700) 0 0.15px #8395a5,
    calc(var(--rift-distance) * 0.884973) calc(var(--rift-distance) * 0.435484) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.862104) calc(var(--rift-distance) * 0.479406) 0 0.3px #bcb9a9;
}

/* Scatter lane 3: 65 independently positioned asteroids. */
.rift-schematic-slot.is-belt > .rift-schematic-belt::before {
  box-shadow:
    calc(var(--rift-distance) * 0.359464) calc(var(--rift-distance) * 0.909938) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * 0.270099) calc(var(--rift-distance) * 0.965959) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.212972) calc(var(--rift-distance) * 0.998241) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.063158) calc(var(--rift-distance) * 0.998604) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.004972) calc(var(--rift-distance) * 1.020301) 0 0.15px #a5b0ba,
    calc(var(--rift-distance) * -0.133684) calc(var(--rift-distance) * 1.004485) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * -0.174629) calc(var(--rift-distance) * 0.981074) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.310651) calc(var(--rift-distance) * 0.940428) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.415037) calc(var(--rift-distance) * 0.921026) 0 0.3px #d0a47d,
    calc(var(--rift-distance) * -0.462897) calc(var(--rift-distance) * 0.891830) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * -0.551572) calc(var(--rift-distance) * 0.845303) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.633117) calc(var(--rift-distance) * 0.801534) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.707485) calc(var(--rift-distance) * 0.696432) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.761190) calc(var(--rift-distance) * 0.628664) 0 0.3px #bcb9a9,
    calc(var(--rift-distance) * -0.793706) calc(var(--rift-distance) * 0.572888) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.852864) calc(var(--rift-distance) * 0.489665) 0 0px #8395a5,
    calc(var(--rift-distance) * -0.907816) calc(var(--rift-distance) * 0.362231) 0 0.3px #bcb9a9,
    calc(var(--rift-distance) * -0.954696) calc(var(--rift-distance) * 0.301911) 0 0.45px #8395a5,
    calc(var(--rift-distance) * -0.958627) calc(var(--rift-distance) * 0.257998) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.990332) calc(var(--rift-distance) * 0.084308) 0 0.45px #bcb9a9,
    calc(var(--rift-distance) * -1.022624) calc(var(--rift-distance) * 0.016945) 0 0px #8395a5,
    calc(var(--rift-distance) * -1.003083) calc(var(--rift-distance) * -0.036999) 0 0.3px #8395a5,
    calc(var(--rift-distance) * -0.977171) calc(var(--rift-distance) * -0.145198) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.984281) calc(var(--rift-distance) * -0.250827) 0 0px #bcb9a9,
    calc(var(--rift-distance) * -0.931335) calc(var(--rift-distance) * -0.330471) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.916950) calc(var(--rift-distance) * -0.438277) 0 0.45px #bcb9a9,
    calc(var(--rift-distance) * -0.854411) calc(var(--rift-distance) * -0.533237) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.808454) calc(var(--rift-distance) * -0.603050) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.737404) calc(var(--rift-distance) * -0.664075) 0 0px #a5b0ba,
    calc(var(--rift-distance) * -0.658035) calc(var(--rift-distance) * -0.735389) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * -0.567237) calc(var(--rift-distance) * -0.801112) 0 0px #d0a47d,
    calc(var(--rift-distance) * -0.507938) calc(var(--rift-distance) * -0.880354) 0 0.3px #8395a5,
    calc(var(--rift-distance) * -0.402664) calc(var(--rift-distance) * -0.922862) 0 0px #c6b7a0,
    calc(var(--rift-distance) * -0.311188) calc(var(--rift-distance) * -0.936155) 0 0.3px #c6b7a0,
    calc(var(--rift-distance) * -0.280826) calc(var(--rift-distance) * -0.968061) 0 0.3px #bcb9a9,
    calc(var(--rift-distance) * -0.158209) calc(var(--rift-distance) * -0.983276) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * -0.017257) calc(var(--rift-distance) * -1.016448) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.081902) calc(var(--rift-distance) * -1.002629) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.178017) calc(var(--rift-distance) * -0.968599) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.223558) calc(var(--rift-distance) * -0.982225) 0 0.3px #bcb9a9,
    calc(var(--rift-distance) * 0.298545) calc(var(--rift-distance) * -0.943973) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * 0.394225) calc(var(--rift-distance) * -0.929214) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.490610) calc(var(--rift-distance) * -0.845066) 0 0px #d0a47d,
    calc(var(--rift-distance) * 0.592043) calc(var(--rift-distance) * -0.832414) 0 0px #8395a5,
    calc(var(--rift-distance) * 0.661119) calc(var(--rift-distance) * -0.764650) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * 0.697922) calc(var(--rift-distance) * -0.684165) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * 0.809622) calc(var(--rift-distance) * -0.587581) 0 0.15px #d0a47d,
    calc(var(--rift-distance) * 0.831906) calc(var(--rift-distance) * -0.517215) 0 0.45px #a5b0ba,
    calc(var(--rift-distance) * 0.919300) calc(var(--rift-distance) * -0.435637) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.951176) calc(var(--rift-distance) * -0.341266) 0 0.15px #c6b7a0,
    calc(var(--rift-distance) * 0.979379) calc(var(--rift-distance) * -0.253880) 0 0px #c6b7a0,
    calc(var(--rift-distance) * 0.976167) calc(var(--rift-distance) * -0.130438) 0 0.15px #8395a5,
    calc(var(--rift-distance) * 0.986438) calc(var(--rift-distance) * -0.116111) 0 0.45px #c6b7a0,
    calc(var(--rift-distance) * 0.985464) calc(var(--rift-distance) * 0.034345) 0 0.3px #8395a5,
    calc(var(--rift-distance) * 0.997462) calc(var(--rift-distance) * 0.151514) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.975450) calc(var(--rift-distance) * 0.195153) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.966298) calc(var(--rift-distance) * 0.306653) 0 0.3px #a5b0ba,
    calc(var(--rift-distance) * 0.912650) calc(var(--rift-distance) * 0.391188) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * 0.856221) calc(var(--rift-distance) * 0.479646) 0 0.45px #bcb9a9,
    calc(var(--rift-distance) * 0.831330) calc(var(--rift-distance) * 0.576085) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.761713) calc(var(--rift-distance) * 0.638322) 0 0.45px #bcb9a9,
    calc(var(--rift-distance) * 0.670033) calc(var(--rift-distance) * 0.732048) 0 0px #bcb9a9,
    calc(var(--rift-distance) * 0.629758) calc(var(--rift-distance) * 0.765551) 0 0.15px #bcb9a9,
    calc(var(--rift-distance) * 0.587335) calc(var(--rift-distance) * 0.826898) 0 0px #a5b0ba,
    calc(var(--rift-distance) * 0.440338) calc(var(--rift-distance) * 0.897577) 0 0px #d0a47d;
}

/* ============================================================
   11 — ORDINARY PLANETS (NOT BELTS)
   Keep the planetary visuals from riftmoor-systems.css visible.
   Only explicit is-belt slots suppress a planetary body.
   ============================================================ */
.rift-schematic-slot:not(.is-belt) > .rift-schematic-planet {
  display:block;
  visibility:visible;
  opacity:1;
  z-index:5;
}
.rift-schematic-slot:not(.is-belt) > .rift-schematic-planet > .rift-system-body,
.rift-schematic-slot:not(.is-belt) > .rift-schematic-planet > .rift-giant-ring {
  display:block;
  visibility:visible;
  opacity:1;
}
.rift-schematic-slot.is-belt > .rift-schematic-planet {
  display:none !important;
}


/* =====================================================================
   07  SELECTION / CALLOUTS
   ===================================================================== */

/* ============================================================
   SCHEMATIC BELT — SELECTABLE DOT + CALLOUT
   Keeps the newer individually scattered asteroid particles intact.
   The dot remains on the orbital path and supports hover, tap
   (focus), and keyboard focus. No changes to the asteroid artwork.
   ============================================================ */
.rift-schematic-slot.is-belt > .rift-schematic-belt-label {
  position: absolute;
  left: var(--rift-x);
  top: var(--rift-y);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  border: 1px solid #a7a899;
  border-radius: 50%;
  background: #14243a;
  color: #e9e3ce;
  font: 0/0 system-ui, sans-serif;
  text-shadow: 0 1px 3px #000;
  cursor: help;
  pointer-events: auto;
  outline-offset: 3px;
  z-index: 20;
}
.rift-schematic-slot.is-belt > .rift-schematic-belt-label::after {
  content: attr(data-tip);
  display: block;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;
  padding: 8px 11px;
  color: #eaf2ff;
  font: 12px/1.55 system-ui, sans-serif;
  white-space: pre;
  text-align: left;
  min-width: 155px;
  max-width: 240px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 5px 18px #000b;
}
.rift-schematic-slot.is-belt > .rift-schematic-belt-label:is(:hover, :focus, :focus-visible)::after {
  display: block;
  opacity: 1;
  visibility: visible;
}
.rift-schematic-slot.is-belt:has(> .rift-schematic-belt-label:is(:hover, :focus, :focus-visible)) {
  z-index: 100;
}


/* =========================================================
   SCHEMATIC — STAR CALLOUTS
   ========================================================= */

.rift-schematic .rift-schematic-star.star {
  outline: none;
}

.rift-schematic .rift-schematic-star.star::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);

  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;
  color: #eaf2ff;
  font: 12px/1.55 system-ui;
  padding: 8px 11px;
  white-space: pre;
  min-width: 155px;
  max-width: 240px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  box-shadow: 0 5px 18px #000b;

  /* Keep tooltip above stars and orbital rings */
  z-index: 100;
}

.rift-schematic .rift-schematic-star.star:hover::after,
.rift-schematic .rift-schematic-star.star:focus::after {
  opacity: 1;
  visibility: visible;
}

/* Restore white selection outline for ringed giants */
.rift-schematic-planet:is(:hover, :focus) > .rift-giant-ring > .rift-system-body {
  outline: 2px solid white;
  outline-offset: 2px;
}

/* White selection outline for schematic suns */
.rift-schematic-star.star:is(:hover, :focus) {
  outline: 2px solid white;
  outline-offset: 3px;
  border-radius: 50%;
}

/* White selection outline for asteroid belt dot markers */
.rift-schematic-belt-label:is(:hover, :focus, :focus-visible) {
  outline: 2px solid white;
  outline-offset: 3px;
  border-radius: 50%;
}

/* =========================================================
   SCHEMATIC — BRING SELECTED OBJECTS TO FRONT
   ========================================================= */

/* Raise the entire orbital slot */
.rift-schematic-slot:has(
  .rift-schematic-planet:is(:hover, :focus, :focus-within)
) {
  z-index: 1000 !important;
}

/* Raise the selected planet */
.rift-schematic-planet:is(:hover, :focus, :focus-within) {
  z-index: 1001 !important;
}

/* Raise selected stars */
.rift-schematic-stars:has(
  .rift-schematic-star:is(:hover, :focus)
) {
  z-index: 1000 !important;
}

/* Raise selected asteroid belt letters */
.rift-schematic-slot:has(
  .rift-schematic-belt-label:is(:hover, :focus)
) {
  z-index: 1000 !important;
}

/* =========================================================
   STELLAR ARRANGEMENT — INDEPENDENT POPUPS
   ========================================================= */

.stellar-system .star {
  overflow: visible;
}

/* Keep special star graphics at their intended dimensions */
.stellar-system .star.rift-neutron-star {
  width: var(--rift-star-size) !important;
  height: var(--rift-star-size) !important;
  border-radius: 50%;
}

.stellar-system .star.rift-black-hole {
  width: calc(var(--rift-star-size) * 2.73) !important;
  height: calc(var(--rift-star-size) * 2.13) !important;
}

/* Independent tooltip — no pseudo-elements */
.stellar-system .rift-arrangement-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);

  width: max-content;
  min-width: 155px;
  max-width: 240px;
  padding: 8px 11px;

  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;
  color: #eaf2ff;

  font: 12px/1.55 system-ui;
  text-align: left;
  white-space: pre-line;

  box-shadow: 0 5px 18px #000b;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
}

/* Show popup */
.stellar-system .star:is(:hover, :focus) > .rift-arrangement-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Raise the selected group */
.stellar-system .star-group:has(.star:is(:hover, :focus)) {
  z-index: 1000;
}

/* White selection outline */
.stellar-system .star:is(:hover, :focus) {
  outline: 2px solid white;
  outline-offset: 3px;
}

/* =========================================================
   STELLAR ARRANGER — BLACK HOLE BACKGROUND FIX
   ========================================================= */

.stellar-system .star.rift-black-hole {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* =========================================================
   SCHEMATIC — COMPACT STELLAR OBJECT FIX
   ========================================================= */

/* Outer element handles placement, selection and tooltip */
.rift-schematic .rift-schematic-star:is(.neutron, .black-hole) {
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* Don't draw the generic star graphics on the wrapper */
.rift-schematic .rift-schematic-star:is(.neutron, .black-hole)::before {
  content: none !important;
}

/* The special graphics have their own pseudo-elements */
.rift-schematic .rift-schematic-special {
  --rift-star-size: 28px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Preserve the black-hole accretion disk */
.rift-schematic .rift-schematic-special.rift-black-hole {
  background: transparent !important;
  box-shadow: none !important;
}

/* Position the popup above the entire neutron star */
.rift-schematic .rift-schematic-star.neutron::after {
  bottom: calc(100% + 18px) !important;
}

/* Make sure the selected star and its popup stay on top */
.rift-schematic-stars:has(
  .rift-schematic-star:is(:hover, :focus)
) {
  z-index: 1000 !important;
}

/* =========================================================
   SCHEMATIC — NEUTRON STAR SIZE & POPUP FIX
   ========================================================= */

/* Enlarge the neutron star graphic only */
.rift-schematic .rift-schematic-star.neutron
> .rift-neutron-star.rift-schematic-special {
  --rift-star-size: 42px;
}

/* Keep the neutron star's selectable area centered */
.rift-schematic .rift-schematic-star.neutron {
  width: 42px !important;
  height: 42px !important;
}

/* Position popup above the enlarged neutron star */
.rift-schematic .rift-schematic-star.neutron::after {
  bottom: calc(100% + 12px) !important;
  left: 50% !important;
  top: auto !important;
  transform: translateX(-50%) !important;

  /* Ensure all popup lines remain visible */
  height: auto !important;
  min-height: 0 !important;
  white-space: pre-line !important;
  overflow: visible !important;
  z-index: 1001 !important;
}

/* =========================================================
   STELLAR ARRANGER — BLACK HOLE SELECTION CIRCLE
   ========================================================= */

/* Remove selection outline from the full black-hole graphic */
.stellar-system .star.rift-black-hole:is(:hover, :focus) {
  outline: none !important;
}

/* Draw white selection circle around the black core only */
.stellar-system .star.rift-black-hole:is(:hover, :focus)
> .rift-black-hole-core {
  outline: 2px solid white !important;
  outline-offset: 3px;
  border-radius: 50%;
}

/* =========================================================
   SCHEMATIC — BLACK HOLE SELECTION FIX
   ========================================================= */

/* Remove selection outline from the outer wrapper */
.rift-schematic .rift-schematic-star.black-hole:is(:hover, :focus) {
  outline: none !important;
}

/* Keep the black core in its original layer */
.rift-schematic .rift-schematic-star.black-hole
.rift-black-hole-core {
  z-index: 2 !important;
}

/* White selection circle around the black core */
.rift-schematic .rift-schematic-star.black-hole:is(:hover, :focus)
.rift-black-hole-core {
  outline: 2px solid white !important;
  outline-offset: 3px;
  border-radius: 50%;
}

/* =========================================================
   STELLAR ARRANGEMENT — ALLOW POPUPS OUTSIDE FRAME
   ========================================================= */

.stellar-system,
.stellar-system .star-group,
.stellar-system .companion-orbit {
  overflow: visible !important;
}

/* Keep selected stars and popups above surrounding elements */
.stellar-system .star-group:has(.star:is(:hover, :focus)) {
  z-index: 1000 !important;
}

.stellar-system .star:is(:hover, :focus) {
  z-index: 1001 !important;
}

/* =========================================================
   WORLD POPUPS — STELLAR ARRANGEMENT STYLE
   ========================================================= */

.rift-system-body:has(> .rift-world-tooltip) {
  position: relative;
  overflow: visible;
  cursor: pointer;
}

.rift-system-body > .rift-world-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);

  width: max-content;
  min-width: 155px;
  max-width: 240px;

  padding: 8px 11px;
  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;

  color: #eaf2ff;
  font: 12px/1.55 system-ui;
  text-align: left;
  white-space: pre-line;

  box-shadow: 0 5px 18px #000b;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1000;
}

/* Show popup when selected */
.rift-system-body:is(:hover, :focus) > .rift-world-tooltip {
  opacity: 1;
  visibility: visible;
}

/* White selection circle */
.rift-system-body:has(> .rift-world-tooltip):is(:hover, :focus) {
  outline: 2px solid white;
  outline-offset: 3px;
  border-radius: 50%;
}

/* =========================================================
   WORLD POPUPS — ALLOW OUTSIDE CONTAINER
   ========================================================= */

/* Allow world popups to extend beyond their containers */
.rift-system,
.rift-system-body,
.rift-world,
.rift-world-container {
  overflow: visible !important;
}

/* Bring selected worlds and their popups forward */
.rift-system-body:has(> .rift-world-tooltip):is(:hover, :focus) {
  z-index: 1000 !important;
}

/* Keep the popup above surrounding graphics */
.rift-system-body > .rift-world-tooltip {
  z-index: 1001 !important;
}

/* =========================================================
   WORLD POPUPS — TABLE OVERFLOW FIX
   ========================================================= */

/* Allow popups to extend outside table cells */
table:has(.rift-world-tooltip),
table:has(.rift-world-tooltip) tbody,
table:has(.rift-world-tooltip) tr,
table:has(.rift-world-tooltip) td,
table:has(.rift-world-tooltip) th {
  overflow: visible !important;
}

/* Raise the entire table cell containing the selected world */
table:has(.rift-world-tooltip) td:has(
  .rift-system-body:is(:hover, :focus)
) {
  position: relative;
  z-index: 1000 !important;
}

/* Raise the selected world */
.rift-system-body:has(> .rift-world-tooltip):is(:hover, :focus) {
  position: relative;
  z-index: 1001 !important;
}

/* Keep the popup above adjacent table cells */
.rift-system-body > .rift-world-tooltip {
  z-index: 1002 !important;
}

/* =========================================================
   INFOGRAPHIC — WORLD SELECTION WRAPPER
   ========================================================= */

.rift-world-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--rift-body-size);
  height: var(--rift-body-size);

  overflow: visible;
  vertical-align: middle;
  cursor: pointer;
}

/* Preserve original planet and ring layering */
.rift-world-select > .rift-system-body,
.rift-world-select > .rift-giant-ring {
  flex-shrink: 0;
}

/* Selection circle around the planet, not the rings */
.rift-world-select:is(:hover, :focus)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--rift-body-size);
  height: var(--rift-body-size);
  transform: translate(-50%, -50%);

  border: 2px solid white;
  border-radius: 50%;
  box-sizing: content-box;
  pointer-events: none;
  z-index: 100;
}

/* Prevent an extra outline on the wrapper */
.rift-world-select:focus {
  outline: none;
}

/* Popup belongs to the wrapper, not the planet */
.rift-world-select > .rift-world-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);

  width: max-content;
  min-width: 155px;
  max-width: 240px;

  padding: 8px 11px;
  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;

  color: #eaf2ff;
  font: 12px/1.55 system-ui;
  text-align: left;
  white-space: pre-line;
  box-shadow: 0 5px 18px #000b;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 101;
}

.rift-world-select:is(:hover, :focus) > .rift-world-tooltip {
  opacity: 1;
  visibility: visible;
}


/* =========================================================
   RIFTMOOR — STANDARD CURSOR FOR ALL CHARTS
   ========================================================= */

/* Infographic worlds */
.rift-world-select,
.rift-world-select *,

/* Solar system schematic */
.rift-schematic,
.rift-schematic *,

/* Stellar arrangement chart */
.stellar-system,
.stellar-system * {
  cursor: default !important;
}





/* =========================================================
   RIFTMOOR — TABLE WORLD POPUPS OPEN RIGHT
   ========================================================= */

.markdown-rendered table .rift-system-body > .rift-world-tooltip,
.markdown-rendered table .rift-world-select > .rift-world-tooltip {
  left: calc(100% + 9px) !important;
  right: auto !important;

  top: 50% !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;
}


/* =========================================================
   RIFTMOOR — STAR SELECTION & POPUPS
   ========================================================= */

.rift-star-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--rift-star-size);
  height: var(--rift-star-size);

  vertical-align: middle;
  overflow: visible;
  cursor: default;
}

/* White selection circle, separate from star graphics */
.rift-star-select:is(:hover, :focus)::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--rift-star-size);
  height: var(--rift-star-size);
  transform: translate(-50%, -50%);
  box-sizing: content-box;
  border: 2px solid white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
}

.rift-star-select:focus {
  outline: none;
}

/* Styled popup */
.rift-star-select > .rift-star-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%);

  width: max-content;
  min-width: 155px;
  max-width: 240px;
  padding: 8px 11px;

  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;

  color: #eaf2ff;
  font: 12px/1.55 system-ui;
  text-align: left;
  white-space: pre-line;
  box-shadow: 0 5px 18px #000b;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 101;
}

.rift-star-select:is(:hover, :focus) > .rift-star-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Ensure black-hole and neutron-star graphics aren't clipped */
.rift-star-select > .rift-black-hole,
.rift-star-select > .rift-neutron-star {
  flex-shrink: 0;
}

/* Raise active star and popup */
.rift-star-select:is(:hover, :focus) {
  z-index: 1000;
}





/* =====================================================================
   08  MOONS / BELT BODIES / RICH TOOLTIPS
   09  RESTORED INFOGRAPHIC AND SCHEMATIC INTERACTION FIXES
   ===================================================================== */

/* =========================================================
   RIFTMOOR — SCHEMATIC MOON POSITIONING
   Preserves existing planet position and size
   ========================================================= */

/* Transparent wrapper covering the schematic map.
   It does NOT reposition the planet. */
.rift-schematic .rift-schematic-slot
> .rift-schematic-planet-system {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

/* The planet retains its original positioning CSS. */

/* Anchor the moon group at the exact same orbital coordinates
   already used by the planet. */
.rift-schematic .rift-schematic-planet-system
> .rift-schematic-moons {
  position: absolute;
  left: var(--rift-x);
  top: var(--rift-y);
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 5;
}

/* Individual moon graphics */
.rift-schematic .rift-schematic-moons
> .rift-schematic-moon {
  position: absolute;
  width: var(--rift-body-size);
  height: var(--rift-body-size);
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  pointer-events: auto;
  cursor: default;
  z-index: 5;
}

/* =========================================================
   RIFTMOOR — COMPACT ORBIT-VARIED MOON SCATTER
   ========================================================= */

/* Vary positions deterministically by orbital number */
.rift-schematic .rift-schematic-moons {
  --moon-rotation: calc(var(--orbit, 1) * 137deg);
}

/* Five irregular angles with tighter spacing */
.rift-schematic .rift-schematic-moons
> .rift-schematic-moon:nth-child(1) {
  --moon-angle: 18deg;
  --moon-distance: 12px;
}

.rift-schematic .rift-schematic-moons
> .rift-schematic-moon:nth-child(2) {
  --moon-angle: 157deg;
  --moon-distance: 16px;
}

.rift-schematic .rift-schematic-moons
> .rift-schematic-moon:nth-child(3) {
  --moon-angle: 286deg;
  --moon-distance: 14px;
}

.rift-schematic .rift-schematic-moons
> .rift-schematic-moon:nth-child(4) {
  --moon-angle: 221deg;
  --moon-distance: 18px;
}

.rift-schematic .rift-schematic-moons
> .rift-schematic-moon:nth-child(5) {
  --moon-angle: 83deg;
  --moon-distance: 15px;
}

/* Position each moon relative to its parent planet */
.rift-schematic .rift-schematic-moons
> .rift-schematic-moon {
  --moon-radius: calc(
    var(--planet-size) / 2 + var(--moon-distance)
  );

  left: calc(
    cos(var(--moon-angle) + var(--moon-rotation))
    * var(--moon-radius)
  );

  top: calc(
    sin(var(--moon-angle) + var(--moon-rotation))
    * var(--moon-radius)
  );
}

/* Ringed giants: clear the rings, but remain compact */
.rift-schematic .rift-schematic-planet-system:has(.rift-giant-ring)
.rift-schematic-moons > .rift-schematic-moon {
  --moon-radius: calc(
    var(--planet-size) * 0.85 + var(--moon-distance)
  );
}
/* Keep the moon body at its Excel-generated size */
.rift-schematic .rift-schematic-moon
> .rift-system-body {
  position: relative;
  width: var(--rift-body-size) !important;
  height: var(--rift-body-size) !important;
  min-width: 0;
  min-height: 0;
  flex: none;
  border-radius: 50%;
}

/* Moon selection */
.rift-schematic .rift-schematic-moon:is(:hover, :focus) {
  outline: 2px solid white;
  outline-offset: 3px;
  border-radius: 50%;
  z-index: 1000;
}

/* Moon tooltip */
.rift-schematic .rift-schematic-moon::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);

  width: max-content;
  min-width: 155px;
  max-width: 240px;
  padding: 8px 11px;

  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;

  color: #eaf2ff;
  font: 12px/1.55 system-ui;
  text-align: left;
  white-space: pre-line;
  box-shadow: 0 5px 18px #000b;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1001;
}

.rift-schematic .rift-schematic-moon:is(:hover, :focus)::after {
  opacity: 1;
  visibility: visible;
}

/* Raise the selected moon and its popup */
.rift-schematic .rift-schematic-slot:has(
  .rift-schematic-moon:is(:hover, :focus)
) {
  z-index: 1000;
}

/* =========================================================
   RIFTMOOR — ASTEROID BELT MAJOR BODIES
   ========================================================= */

/* Container centered on the parent star system */
.rift-schematic .rift-schematic-slot.is-belt
> .rift-schematic-belt-worlds {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 10;
}

/* Major bodies use their actual generated graphics */
.rift-schematic .rift-schematic-slot.is-belt
.rift-schematic-belt-worlds > .rift-schematic-moon {
  position: absolute !important;

  width: var(--rift-body-size) !important;
  height: var(--rift-body-size) !important;

  left: calc(
    cos(var(--belt-angle)) *
    var(--rift-distance) *
    var(--belt-radius-factor)
  ) !important;

  top: calc(
    sin(var(--belt-angle)) *
    var(--rift-distance) *
    var(--belt-radius-factor)
  ) !important;

  transform: translate(-50%, -50%) !important;

  display: flex !important;
  align-items: center;
  justify-content: center;

  pointer-events: auto;
  cursor: default;
  overflow: visible;
  z-index: 10;
}

/* Five widely separated positions */
.rift-schematic .rift-schematic-belt-worlds
> .rift-schematic-moon:nth-child(1) {
  --belt-angle: calc(23deg + var(--orbit) * 41deg);
  --belt-radius-factor: 0.99;
}

.rift-schematic .rift-schematic-belt-worlds
> .rift-schematic-moon:nth-child(2) {
  --belt-angle: calc(101deg + var(--orbit) * 41deg);
  --belt-radius-factor: 1.015;
}

.rift-schematic .rift-schematic-belt-worlds
> .rift-schematic-moon:nth-child(3) {
  --belt-angle: calc(169deg + var(--orbit) * 41deg);
  --belt-radius-factor: 0.985;
}

.rift-schematic .rift-schematic-belt-worlds
> .rift-schematic-moon:nth-child(4) {
  --belt-angle: calc(248deg + var(--orbit) * 41deg);
  --belt-radius-factor: 1.02;
}

.rift-schematic .rift-schematic-belt-worlds
> .rift-schematic-moon:nth-child(5) {
  --belt-angle: calc(316deg + var(--orbit) * 41deg);
  --belt-radius-factor: 0.995;
}

/* Keep moon graphics at their Excel-generated sizes */
.rift-schematic .rift-schematic-belt-worlds
.rift-schematic-moon > .rift-system-body {
  width: var(--rift-body-size) !important;
  height: var(--rift-body-size) !important;
  flex: none;
}

/* Selected body and tooltip above asteroid particles */
.rift-schematic .rift-schematic-slot.is-belt:has(
  .rift-schematic-belt-worlds .rift-schematic-moon:is(:hover, :focus)
) {
  z-index: 1000 !important;
}

/* =========================================================
   RIFTMOOR — ALLOW TOOLTIPS OUTSIDE SCHEMATIC
   ========================================================= */

.rift-schematic,
.rift-schematic .rift-schematic-map,
.rift-schematic .rift-schematic-slot,
.rift-schematic .rift-schematic-belt-worlds,
.rift-schematic .rift-schematic-moon {
  overflow: visible !important;
}

/* Bring hovered belt bodies above the other schematic layers */
.rift-schematic .rift-schematic-slot.is-belt:has(
  .rift-schematic-belt-worlds > .rift-schematic-moon:is(:hover, :focus)
) {
  z-index: 9999 !important;
}

/* =========================================================
   RIFTMOOR — ACTIVE MOON POPUP ABOVE ALL SCHEMATIC OBJECTS
   ========================================================= */

/* Avoid creating a separate stacking context for each moon */
.rift-schematic .rift-schematic-belt-worlds,
.rift-schematic .rift-schematic-moons {
  isolation: auto !important;
  z-index: auto !important;
}

/* Bring the whole orbit containing the active moon forward */
.rift-schematic .rift-schematic-map
> .rift-schematic-slot:has(.rift-schematic-moon:is(:hover, :focus)) {
  z-index: 100000 !important;
}

/* Raise the active moon above all its siblings */
.rift-schematic .rift-schematic-moon:is(:hover, :focus) {
  position: relative;
  z-index: 100001 !important;
}

/* Tooltip above everything inside the active moon */
.rift-schematic .rift-schematic-moon:is(:hover, :focus)::after {
  z-index: 100002 !important;
}

/* Ensure labels aren't creating unnecessarily high layers */
.rift-schematic .rift-schematic-slot.is-belt
> .rift-schematic-belt-label:not(:hover):not(:focus) {
  z-index: 2 !important;
}

/* =========================================================
   RIFTMOOR — RICH MOON TOOLTIP
   ========================================================= */

/* Disable the old text-only popup */
.rift-schematic .rift-schematic-moon::after {
  content: none !important;
}

/* New tooltip */
.rift-schematic .rift-schematic-moon-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);

  width: 190px;
  padding: 10px 12px;

  background: #14243a;
  border: 1px solid #8fa4ba;
  border-radius: 7px;
  color: #eaf2ff;
  font: 12px/1.55 system-ui;
  text-align: left;
  box-shadow: 0 5px 18px #000b;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 100002;
}

/* Show on hover or keyboard focus */
.rift-schematic .rift-schematic-moon:is(:hover, :focus)
> .rift-schematic-moon-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Name */
.rift-schematic .rift-schematic-moon-tooltip-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 8px;
}

/* Center the 50px graphic */
.rift-schematic .rift-schematic-moon-tooltip-picture {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60px;
  margin-bottom: 8px;
}

.rift-schematic .rift-schematic-moon-tooltip-picture
> .rift-system-body {
  width: 50px !important;
  height: 50px !important;
  flex: 0 0 50px !important;
}


/* =========================================================
   RIFTMOOR — INFOGRAPHIC STAR TOOLTIP POSITION
   ========================================================= */

.rift-system-stars
.rift-star-select > .rift-star-tooltip {
  left: 50% !important;
  right: auto !important;

  top: calc(100% + 9px) !important;
  bottom: auto !important;

  transform: none !important;
}


/* =====================================================================
   09  RESTORED INFOGRAPHIC AND SCHEMATIC INTERACTION FIXES
   ===================================================================== */

/* =========================================================
   RIFTMOOR — FIRST PLANET MOON POPUPS OPEN RIGHT
   ========================================================= */

.rift-system-planets
> .rift-system-planet-column:first-child
.rift-system-moon .rift-world-tooltip {
  /* Position popup to the right of the moon */
  left: calc(100% + 12px) !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;
}


/* =========================================================
   RIFTMOOR — SCHEMATIC POPUPS WITHOUT CLIPPING
   ========================================================= */

/* Allow popups to extend beyond the schematic */
.rift-schematic,
.rift-schematic-map,
.rift-schematic-slot,
.rift-schematic-stars {
  overflow: visible !important;
}

/* Bring the selected object and popup forward */
.rift-schematic-slot:has(
  .rift-schematic-planet:is(:hover, :focus)
) {
  z-index: 1000 !important;
}

.rift-schematic-planet:is(:hover, :focus) {
  z-index: 1001 !important;
}

/* Keep planet popups above other schematic elements */
.rift-schematic-planet:is(:hover, :focus)::after {
  z-index: 1002 !important;
}

/* RIFTMOOR — NORMAL CURSOR ON WORLD GRAPHICS */

.rift-system .rift-world-select,
.rift-system .rift-world-select *,
.rift-system .rift-star-select,
.rift-system .rift-star-select *,
.rift-system-body,
.rift-system-body * {
  cursor: default !important;
}

/* =========================================================
   FLOWERSHOW — TABLE PLANET POPUPS OPEN RIGHT
   ========================================================= */

#mdxpage table td .rift-system-body > .rift-world-tooltip {
  left: calc(100% + 12px) !important;
  right: auto !important;

  top: 50% !important;
  bottom: auto !important;

  transform: translateY(-50%) !important;
}