/* =========================================================
   PROJECT E.R.A.S. : UNIVERSE — MODULE NODE IDENTITIES v1.5
   Radial alignment:
   PLAY / OPTIONS are the vertical axis.
   SOCIAL / CONTENT are the horizontal axis.
   ANIMATION / DRAW are upper diagonals.
   D.A.I. / CODE are lower diagonals.
   ========================================================= */

/* Requested radial order:
   LEFT  top -> bottom: CONTENT / SOCIAL / D.A.I.
   RIGHT top -> bottom: ANIMATION / DRAW / CODE
   PLAY and OPTIONS remain the vertical axis.
*/
.universe-main-page .node-play{
  left:50%;
  top:2%;
  transform:translateX(-50%);
  text-align:center;
  justify-items:center;
}
.universe-main-page .node-options{
  left:50%;
  right:auto;
  bottom:1%;
  transform:translateX(-50%);
  text-align:center;
  justify-items:center;
}

/* Upper pair */
.universe-main-page .node-content{
  left:0;
  right:auto;
  top:18%;
  transform:none;
  text-align:left;
  justify-items:start;
}
.universe-main-page .node-animation{
  right:0;
  left:auto;
  top:18%;
  transform:none;
  text-align:right;
  justify-items:end;
}

/* Middle pair */
.universe-main-page .node-social{
  left:-1%;
  right:auto;
  top:46%;
  transform:translateY(-50%);
  text-align:left;
  justify-items:start;
}
.universe-main-page .node-draw{
  right:-1%;
  left:auto;
  top:46%;
  transform:translateY(-50%);
  text-align:right;
  justify-items:end;
}

/* Lower pair */
.universe-main-page .node-information{
  left:5%;
  right:auto;
  bottom:10%;
  text-align:left;
  justify-items:start;
}
.universe-main-page .node-code{
  right:5%;
  left:auto;
  bottom:10%;
  text-align:right;
  justify-items:end;
}

/* ANIMATION — Golden Rye */
.universe-main-page .node-animation b{
  border-color:#d9b45d;
  background:rgba(217,180,93,.14);
  box-shadow:0 0 12px rgba(217,180,93,.28);
}
.universe-main-page .node-animation:hover,
.universe-main-page .node-animation:focus-visible{
  color:#f0d58e;
  text-shadow:0 0 14px rgba(217,180,93,.40);
}
.universe-main-page .node-animation:hover b,
.universe-main-page .node-animation:focus-visible b{
  background:rgba(217,180,93,.30);
  box-shadow:0 0 18px rgba(217,180,93,.58);
}

/* DRAW — Deep Wooden Brown */
.universe-main-page .node-draw b{
  border-color:#9a633c;
  background:linear-gradient(135deg,rgba(154,99,60,.22),rgba(91,51,30,.18));
  box-shadow:
    0 0 12px rgba(154,99,60,.34),
    0 0 22px rgba(91,51,30,.16);
}
.universe-main-page .node-draw:hover,
.universe-main-page .node-draw:focus-visible{
  color:#d8aa79;
  text-shadow:0 0 15px rgba(154,99,60,.48);
}
.universe-main-page .node-draw:hover b,
.universe-main-page .node-draw:focus-visible b{
  background:linear-gradient(135deg,rgba(183,122,74,.34),rgba(104,58,33,.28));
  box-shadow:
    0 0 18px rgba(183,122,74,.58),
    0 0 28px rgba(105,61,36,.22);
}

/* CODE — Bright Lime Teal */
.universe-main-page .node-code b{
  border-color:#63f7b4;
  background:linear-gradient(135deg,rgba(99,247,180,.22),rgba(120,255,105,.12));
  box-shadow:
    0 0 12px rgba(99,247,180,.35),
    0 0 24px rgba(120,255,105,.12);
}
.universe-main-page .node-code:hover,
.universe-main-page .node-code:focus-visible{
  color:#a2ffd0;
  text-shadow:
    0 0 14px rgba(99,247,180,.52),
    0 0 22px rgba(120,255,105,.18);
}
.universe-main-page .node-code:hover b,
.universe-main-page .node-code:focus-visible b{
  background:linear-gradient(135deg,rgba(99,247,180,.38),rgba(120,255,105,.23));
  box-shadow:
    0 0 19px rgba(99,247,180,.64),
    0 0 30px rgba(120,255,105,.20);
}

/* SOCIAL — Lilac Lily */
.universe-main-page .node-social b{
  border-color:#caa7ed;
  background:linear-gradient(135deg,rgba(202,167,237,.18),rgba(239,184,216,.16));
  box-shadow:
    0 0 11px rgba(202,167,237,.30),
    0 0 20px rgba(239,184,216,.10);
}
.universe-main-page .node-social:hover,
.universe-main-page .node-social:focus-visible{
  color:#e8cff7;
  text-shadow:
    0 0 13px rgba(202,167,237,.38),
    0 0 19px rgba(239,184,216,.18);
}
.universe-main-page .node-social:hover b,
.universe-main-page .node-social:focus-visible b{
  background:linear-gradient(135deg,rgba(202,167,237,.34),rgba(239,184,216,.28));
  box-shadow:
    0 0 18px rgba(202,167,237,.55),
    0 0 25px rgba(239,184,216,.22);
}

/* CONTENT — Library Green */
.universe-main-page .node-content b{
  border-color:#65c97c;
  background:rgba(101,201,124,.15);
  box-shadow:0 0 12px rgba(101,201,124,.29);
}
.universe-main-page .node-content:hover,
.universe-main-page .node-content:focus-visible{
  color:#8ee5a2;
  text-shadow:0 0 14px rgba(101,201,124,.40);
}
.universe-main-page .node-content:hover b,
.universe-main-page .node-content:focus-visible b{
  background:rgba(101,201,124,.30);
  box-shadow:0 0 18px rgba(101,201,124,.56);
}

/* OPTIONS — Crimson */
.universe-main-page .node-options b{
  border-color:#d34b61;
  background:rgba(211,75,97,.15);
  box-shadow:0 0 12px rgba(211,75,97,.30);
}
.universe-main-page .node-options:hover,
.universe-main-page .node-options:focus-visible{
  color:#ef7d8f;
  text-shadow:0 0 14px rgba(211,75,97,.44);
}
.universe-main-page .node-options:hover b,
.universe-main-page .node-options:focus-visible b{
  background:rgba(211,75,97,.31);
  box-shadow:0 0 18px rgba(211,75,97,.59);
}

/* D.A.I. — Purple */
.universe-main-page .node-information b{
  border-color:#a874ff;
  background:rgba(168,116,255,.15);
  box-shadow:0 0 12px rgba(168,116,255,.30);
}
.universe-main-page .node-information:hover,
.universe-main-page .node-information:focus-visible{
  color:#d4b6ff;
  text-shadow:0 0 14px rgba(168,116,255,.42);
}
.universe-main-page .node-information:hover b,
.universe-main-page .node-information:focus-visible b{
  background:rgba(168,116,255,.30);
  box-shadow:0 0 18px rgba(168,116,255,.58);
}

/* Subtitle glass plate */
.universe-main-page .world-node small{
  display:inline-block;
  width:max-content;
  max-width:100%;
  margin-top:2px;
  padding:3px 7px 3px 8px;
  border-radius:6px;
  color:#849da1;
  background:rgba(2,10,13,.40);
  border:1px solid rgba(198,244,246,.16);
  -webkit-backdrop-filter:blur(4px) brightness(.72);
  backdrop-filter:blur(4px) brightness(.72);
  -webkit-text-stroke:.16px rgba(242,255,255,.52);
  paint-order:stroke fill;
  text-shadow:
    0 1px 2px rgba(0,0,0,.98),
    0 0 3px rgba(0,0,0,.68);
  box-shadow:
    inset 0 0 10px rgba(131,224,227,.025),
    0 2px 7px rgba(0,0,0,.28);
}

/* =========================================================
   v1.6 — MOBILE UNIVERSE ALIGNMENT / READABILITY REPAIR
   ========================================================= */
@media(max-width:720px){
  .universe-main-page .universe-landing{
    min-height:620px;
  }

  /* The old mobile stage could exceed viewport width. Keep every side node
     inside a bounded navigation stage. */
  .universe-main-page .system-stage{
    width:min(calc(100vw - 24px),420px) !important;
    height:min(72svh,600px) !important;
    min-height:500px;
    aspect-ratio:auto !important;
    left:50%;
    top:54%;
    transform:translate(-50%,-50%);
  }

  /* Reduce the visual core so labels no longer get swallowed by the globe. */
  .universe-main-page .universe-core{
    width:210px;
    height:210px;
  }
  .universe-main-page .core-planet{
    width:148px;
    height:148px;
  }

  .universe-main-page .world-node{
    min-width:0;
    width:118px;
    gap:2px;
    text-shadow:
      0 1px 2px rgba(0,0,0,.98),
      0 0 6px rgba(0,0,0,.84);
  }
  .universe-main-page .world-node span{
    font-size:10px;
    line-height:1.05;
    letter-spacing:.10em;
  }
  .universe-main-page .world-node b{
    width:10px;
    height:10px;
    margin-bottom:4px;
  }
  .universe-main-page .world-node small{
    width:auto;
    max-width:118px;
    margin-top:3px;
    padding:4px 5px;
    border-radius:5px;
    font-size:6.25px;
    line-height:1.32;
    letter-spacing:.085em;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    color:#9ab0b3;
    background:rgba(1,8,10,.78);
    border-color:rgba(198,244,246,.20);
    -webkit-backdrop-filter:blur(5px) brightness(.62);
    backdrop-filter:blur(5px) brightness(.62);
    box-shadow:
      inset 0 0 9px rgba(131,224,227,.025),
      0 2px 8px rgba(0,0,0,.48);
  }

  /* PLAY / OPTIONS vertical axis */
  .universe-main-page .node-play{
    width:172px;
    left:50%;
    top:0;
    transform:translateX(-50%);
    text-align:center;
    justify-items:center;
  }
  .universe-main-page .node-play small{max-width:172px}
  .universe-main-page .node-options{
    width:160px;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    text-align:center;
    justify-items:center;
  }
  .universe-main-page .node-options small{max-width:160px}

  /* LEFT: CONTENT / SOCIAL / D.A.I. */
  .universe-main-page .node-content{
    left:0; right:auto; top:18%; transform:none;
    text-align:left; justify-items:start;
  }
  .universe-main-page .node-social{
    left:0; right:auto; top:45%; transform:translateY(-50%);
    text-align:left; justify-items:start;
  }
  .universe-main-page .node-information{
    left:0; right:auto; bottom:13%;
    text-align:left; justify-items:start;
  }

  /* RIGHT: ANIMATION / DRAW / CODE */
  .universe-main-page .node-animation{
    right:0; left:auto; top:18%; transform:none;
    text-align:right; justify-items:end;
  }
  .universe-main-page .node-draw{
    right:0; left:auto; top:45%; transform:translateY(-50%);
    text-align:right; justify-items:end;
  }
  .universe-main-page .node-code{
    right:0; left:auto; bottom:13%;
    text-align:right; justify-items:end;
  }

  .universe-main-page .platform-line{
    max-width:92vw;
    margin-inline:auto;
    padding-inline:8px;
    font-size:7px;
    line-height:1.45;
    letter-spacing:.10em;
    text-align:center;
  }
}

/* Extra compression for phones around 360 CSS px wide. */
@media(max-width:390px){
  .universe-main-page .system-stage{
    width:calc(100vw - 18px) !important;
    height:min(70svh,560px) !important;
    min-height:480px;
    top:53%;
  }
  .universe-main-page .universe-core{
    width:190px;
    height:190px;
  }
  .universe-main-page .core-planet{
    width:132px;
    height:132px;
  }
  .universe-main-page .world-node{width:108px}
  .universe-main-page .world-node span{font-size:9px}
  .universe-main-page .world-node small{
    max-width:108px;
    font-size:5.8px;
    letter-spacing:.07em;
    padding:3px 4px;
  }
  .universe-main-page .node-play{width:154px}
  .universe-main-page .node-play small{max-width:154px}
  .universe-main-page .node-options{width:146px}
  .universe-main-page .node-options small{max-width:146px}
}