/* Fixed System Map ? locked to viewport, aligned to background HUD */

:root {
  --ink: #f2f6ff;
  --muted: rgba(210, 225, 255, 0.62);
  --faint: rgba(180, 200, 230, 0.42);
  --blue: #4ec8ff;
  --gold: #c9a24a;
  --hud: "Exo 2", system-ui, sans-serif;
  --bg: #03050a;
  /* Outermost thin gold ring on 4K plate (r?1039 @ 2160h), cover-scaled */
  --hud-orbit: max(48.15vh, 27.06vw);
  /* Further ?10% from prior (was min(62.31vh, 54.18vw, 666px)) */
  --core-size: min(56.08vh, 48.76vw, 599px);
  --node-size: clamp(96px, 14vh, 148px);
  --hub-y: 46.5%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--hud);
}

a {
  color: var(--blue);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  color: #9adfff;
}

/* ?? Layers ?? */
.layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.layer-bg {
  z-index: 0;
}

.bg-plate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #03050a;
}

.bg-plate-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  /* Full scene plate: background + central orb baked together */
  user-select: none;
  -webkit-user-drag: none;
}

/* Pulse existing plate stars above veil, under scene/beams (orb4k141).
   Must stay cheap ? never inside beam lean timing. */
.star-twinkle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.bg-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(3, 5, 10, 0.45) 0%,
    transparent 14%,
    transparent 86%,
    rgba(3, 5, 10, 0.55) 100%
  );
}

.layer-energy {
  /* Above .node-orbit so dock ports sit on the metal, not under PNGs */
  z-index: 5;
  width: 100%;
  height: 100%;
}

.hud-top,
.hud-foot {
  position: fixed;
  z-index: 6;
  pointer-events: none;
}

.scene {
  position: fixed;
  z-index: 2;
  pointer-events: none;
}

.hud-top {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.75rem 0.25rem;
}

.hud-title {
  margin: 0;
  font-weight: 200;
  font-size: clamp(1.05rem, 2.2vw, 1.55rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.85);
}

.hud-sub {
  margin: 0.4rem 0 0;
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  display: inline-block;
}

.hud-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 0.2rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.hud-sep {
  width: 1px;
  height: 0.9rem;
  background: rgba(255, 255, 255, 0.25);
}

.hud-status em {
  font-style: normal;
  font-weight: 500;
  color: var(--blue);
}

.hud-status em::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 0.4rem;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
  vertical-align: middle;
}

.hud-sound {
  pointer-events: auto;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-shadow: inherit;
  cursor: pointer;
}

.hud-sound:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.hud-status .hud-sound em {
  color: var(--faint);
  transition: color 0.6s ease;
}

.hud-status .hud-sound em::before {
  background: var(--faint);
  box-shadow: none;
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

.hud-status .hud-sound[aria-pressed="true"] em {
  color: var(--gold);
}

.hud-status .hud-sound[aria-pressed="true"] em::before {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}

/* ?? Locked stage: fills viewport, center = background HUD center ?? */
.scene {
  inset: 0;
}

.stage {
  position: absolute;
  inset: 0;
  --orbit-r: var(--hud-orbit);
}

/* Hub origin shared by core + node orbit (matches lifted core) */
.hub {
  position: absolute;
  left: 50%;
  top: var(--hub-y);
  width: 0;
  height: 0;
  z-index: 3;
}

.core {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--core-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.core-corona {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Soft bloom on body hull (~75% of core radius), not the notch tips */
  background: radial-gradient(
    circle,
    transparent 68%,
    rgba(50, 160, 255, 0.05) 72%,
    rgba(70, 195, 255, 0.22) 75%,
    rgba(40, 130, 220, 0.08) 78%,
    transparent 82%
  );
  filter: blur(6px);
  opacity: 0.9;
  z-index: 0;
  will-change: opacity, transform;
}

.core-orb {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none; /* orb is baked into the background plate */
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Edge dissipation ? behind surface arcs; punched through body mask in JS.
   Above plate (scene z>bg); plus-lighter so cyan reads on dark metal. */
/* Exterior energy wisps ? behind dissipation, outside solid silhouette (orb4k132).
   Larger canvas (205%) so thin tendrils can reach into space. */
.core-wisp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 205%;
  height: 205%;
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}

.core-dissipate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 128%;
  height: 128%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}

/* Soft gold halo just beyond the core opening ? under plasma, above plate */
.core-amber-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28%;
  height: 28%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 220, 110, 0.7) 0%,
    rgba(255, 185, 48, 0.38) 32%,
    rgba(255, 155, 30, 0.16) 52%,
    transparent 74%
  );
  mix-blend-mode: plus-lighter;
  filter: blur(1.6px);
  opacity: 1;
  will-change: auto;
}

/* Amber plasma core ? fixed to plate center; no parallax/float */
.core-amber {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 4;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: normal;
}

/* Surface arcs ? clipped to solid orb body; above amber + dissipation + plate */
.core-energy {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  z-index: 5;
  opacity: 1;
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}

/* Invisible core keeps beam/node geometry; plate carries the visible orb.
   Dual energy canvases paint arcs + dissipation over the baked plate orb. */
.core[data-baked-glow="true"] .core-corona,
.core[data-baked-glow="true"] .core-orb {
  display: none;
}

.node-orbit {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 4;
  pointer-events: none;
}

/*
 * Orb CENTER sits on --orbit-r (outer gold ring).
 * Labels hang outward so they no longer pull the orb inward.
 */
.app-node {
  --angle: 0deg;
  --dx: 0px;
  --dy: 0px;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--node-size);
  height: var(--node-size);
  color: inherit;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--orbit-r))
    rotate(calc(-1 * var(--angle))) translate(var(--dx), var(--dy));
}

.app-node:focus-visible {
  outline: 1px solid rgba(78, 200, 255, 0.7);
  outline-offset: 6px;
  border-radius: 50%;
}

.app-node-float {
  position: absolute;
  inset: 0;
  display: block;
  will-change: transform;
  transition: filter 0.25s ease;
}

/*
 * Cup for the orb: half-glow is clipped to the disc and rides GSAP float.
 * Conic ? radial mask lights the contact edge inside the cup
 * (dock ~82% of bodyR, paint rim ? 88%).
 */
.node-vessel {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  /* Allow rim glow to blend with stage (isolation trapped it on dark metal) */
  transition: transform 0.25s ease, filter 0.25s ease;
}

.node-rim-glow {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  /* plus-lighter reads harder on dark metal than screen alone */
  mix-blend-mode: plus-lighter;
  transform: rotate(var(--rim-ang, 0deg));
  opacity: 1;
  /*
   * orb4k76-PROOF: stacked-ring punch ? brightness() on channel-max + plus-lighter
   * clipped optically (orb4k75 looked unchanged). Duplicate layers + wider white mid
   * + soft halo make the boost unmistakable while keeping blue?white?blue / ~6% band.
   */
  filter:
    saturate(1.45)
    drop-shadow(0 0 1.5px rgba(120, 235, 255, 0.95))
    drop-shadow(0 0 5px rgba(56, 210, 255, 0.85))
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.55));
  /*
   * Triple stroke (orb4k74 geometry), half of orb4k73 (~85?91% / 6%, center ~88%).
   * Each band painted twice so plus-lighter actually accumulates.
   */
  background:
    /* Outer blue ?2 (rim exterior) */
    radial-gradient(
      closest-side,
      transparent 90.05%,
      rgb(90, 230, 255) 90.2%,
      rgb(90, 230, 255) 90.9%,
      transparent 91%
    ),
    radial-gradient(
      closest-side,
      transparent 90.05%,
      rgba(56, 210, 255, 0.95) 90.2%,
      rgba(56, 210, 255, 0.95) 90.9%,
      transparent 91%
    ),
    /* Middle white-hot ?2 (wider mid within same total band) */
    radial-gradient(
      closest-side,
      transparent 86.2%,
      rgb(255, 255, 255) 86.35%,
      rgb(255, 255, 255) 89.9%,
      transparent 90.05%
    ),
    radial-gradient(
      closest-side,
      transparent 86.2%,
      rgba(255, 255, 255, 0.92) 86.35%,
      rgba(255, 255, 255, 0.92) 89.9%,
      transparent 90.05%
    ),
    /* Inner blue ?2 (toward cup center) */
    radial-gradient(
      closest-side,
      transparent 85%,
      rgb(90, 230, 255) 85.15%,
      rgb(90, 230, 255) 86.05%,
      transparent 86.2%
    ),
    radial-gradient(
      closest-side,
      transparent 85%,
      rgba(56, 210, 255, 0.95) 85.15%,
      rgba(56, 210, 255, 0.95) 86.05%,
      transparent 86.2%
    );
  /* Full intensity at arc center (beam contact); lightens toward both arc edges */
  -webkit-mask-image: conic-gradient(
    from -90deg,
    transparent 0deg,
    transparent 18deg,
    rgba(0, 0, 0, 0.25) 36deg,
    rgba(0, 0, 0, 0.65) 52deg,
    rgba(0, 0, 0, 0.9) 68deg,
    #000 82deg,
    #000 98deg,
    rgba(0, 0, 0, 0.9) 112deg,
    rgba(0, 0, 0, 0.65) 128deg,
    rgba(0, 0, 0, 0.25) 144deg,
    transparent 162deg,
    transparent 360deg
  );
  mask-image: conic-gradient(
    from -90deg,
    transparent 0deg,
    transparent 18deg,
    rgba(0, 0, 0, 0.25) 36deg,
    rgba(0, 0, 0, 0.65) 52deg,
    rgba(0, 0, 0, 0.9) 68deg,
    #000 82deg,
    #000 98deg,
    rgba(0, 0, 0, 0.9) 112deg,
    rgba(0, 0, 0, 0.65) 128deg,
    rgba(0, 0, 0, 0.25) 144deg,
    transparent 162deg,
    transparent 360deg
  );
}

/* Extra stacked pass ? same mask/geometry; plus-lighter adds a second copy */
.node-rim-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: inherit;
  -webkit-mask-image: inherit;
  mask-image: inherit;
  opacity: 0.85;
}

.node-orb {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Residual soft contact; primary rim light is .node-rim-glow */
  filter: drop-shadow(0 0 1px rgba(60, 160, 255, 0.12));
  transition: filter 0.25s ease;
}

.node-orbit.is-armed .app-node:not(.is-active) {
  opacity: 0.42;
  transition: opacity 0.25s ease;
}

.node-orbit.is-armed .app-node:not(.is-active) .node-rim-glow {
  /* Parent node is dimmed (~0.42); keep rim readable via halo, not brightness clip */
  opacity: 1;
  filter:
    saturate(1.55)
    contrast(1.08)
    drop-shadow(0 0 2px rgba(140, 240, 255, 1))
    drop-shadow(0 0 7px rgba(56, 210, 255, 0.95))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.65));
}

.node-orbit.is-armed .app-node.is-active,
.app-node:hover,
.app-node:focus-visible {
  opacity: 1;
  z-index: 5;
}

.app-node.is-active .node-vessel,
.app-node:hover .node-vessel,
.app-node:focus-visible .node-vessel {
  transform: scale(1.08);
}

.app-node.is-active .node-orb,
.app-node:hover .node-orb,
.app-node:focus-visible .node-orb {
  filter:
    drop-shadow(0 0 5px rgba(120, 220, 255, 0.7))
    drop-shadow(0 0 14px rgba(60, 180, 255, 0.4));
}

.app-node.is-active .node-rim-glow,
.app-node:hover .node-rim-glow,
.app-node:focus-visible .node-rim-glow {
  opacity: 1;
  filter:
    saturate(1.5)
    contrast(1.06)
    drop-shadow(0 0 2px rgba(150, 245, 255, 1))
    drop-shadow(0 0 8px rgba(90, 230, 255, 0.95))
    drop-shadow(0 0 18px rgba(255, 255, 255, 0.7));
}

.node-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 11.5rem;
  font-size: clamp(0.62rem, 1.15vw, 0.82rem);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  line-height: 1.25;
  pointer-events: none;
  transition: color 0.2s ease;
}

.app-node.is-active .node-label,
.app-node:hover .node-label,
.app-node:focus-visible .node-label {
  color: #e8f7ff;
}

.node-desc {
  display: block;
  margin-top: 0.35rem;
  max-width: 14rem;
  font-size: 0.55rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  text-transform: none;
  line-height: 1.35;
  color: rgba(190, 210, 235, 0.55);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.25s ease, max-height 0.25s ease;
}

.app-node.is-active .node-desc,
.app-node:hover .node-desc,
.app-node:focus-visible .node-desc {
  opacity: 1;
  max-height: 4.5rem;
  color: rgba(210, 230, 255, 0.82);
}

.app-node[data-side="left"] .node-label {
  right: calc(100% + 0.65rem);
  text-align: right;
}

.app-node[data-side="right"] .node-label {
  left: calc(100% + 0.65rem);
  text-align: left;
}

.node-meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--faint);
}

.app-node.is-offline .node-meta {
  color: rgba(255, 190, 120, 0.75);
}

.hud-foot {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.5rem 1.5rem 0.85rem;
  text-align: center;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}

.hud-foot p {
  margin: 0.2rem 0;
}

.hud-foot a {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .core-corona {
    will-change: auto;
    opacity: 0.75;
  }

  .app-node-float {
    will-change: auto;
  }

  .node-orb,
  .node-vessel {
    transition: none;
  }

  .app-node.is-active .node-vessel,
  .app-node:hover .node-vessel,
  .app-node:focus-visible .node-vessel {
    transform: none;
  }

  .node-rim-glow {
    opacity: 0.75;
  }
}

@media (max-width: 900px) {
  .layer-energy {
    display: none;
  }

  .stage {
    --orbit-r: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4.5rem 1rem 3.5rem;
    overflow: auto;
  }

  .hub {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .core {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: min(32.51vw, 185px);
    margin: 0 auto;
  }

  .node-orbit {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 0.75rem;
    max-width: 520px;
  }

  .app-node {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .app-node-float {
    position: relative;
    width: var(--node-size);
    height: var(--node-size);
  }

  .node-rim-glow {
    display: none;
  }

  .node-label {
    position: relative;
    top: auto;
    left: auto !important;
    right: auto !important;
    transform: none;
    margin-top: 0.45rem;
    text-align: center !important;
  }

  html,
  body {
    overflow: auto;
  }
}