:root {
  --bg: #000;
  --green: #86ff62;
  --green-mid: rgba(134, 255, 98, 0.38);
  --green-soft: rgba(134, 255, 98, 0.2);
  --green-faint: rgba(134, 255, 98, 0.08);
  --ink-soft: rgba(144, 255, 117, 0.86);
}

html, body { height: 100%; width: 100%; }

body {
  margin: 0;
  color: var(--green);
  background: var(--bg);
  overflow-x: hidden;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

.topology-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: .82;
  background:
    radial-gradient(60% 45% at 50% 50%, rgba(134,255,98,.06), transparent 70%),
    linear-gradient(var(--green-faint) 1px, transparent 1px),
    linear-gradient(90deg, var(--green-faint) 1px, transparent 1px),
    #000;
  background-size: auto, 48px 48px, 48px 48px, auto;
}

/* crosshair */
.topology-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent calc(50% - 1px), rgba(134,255,98,.22) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(to bottom, transparent calc(50% - 1px), rgba(134,255,98,.22) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

/* HUD ticks + corner frame accents */
.topology-bg::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(134,255,98,.18);
  box-shadow:
    inset 0 0 0 1px rgba(134,255,98,.05),
    inset 0 0 0 18px transparent;
  mask-image:
    linear-gradient(#000,#000);
}

.hud-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hud-label {
  position: absolute;
  font: 600 11px/1.1 "Cascadia Code", "Fira Code", monospace;
  letter-spacing: .08em;
  color: rgba(134,255,98,.6);
  text-transform: uppercase;
}

.hud-label.tl { top: 22px; left: 28px; }
.hud-label.tr { top: 22px; right: 28px; text-align: right; }
.hud-label.bl { bottom: 22px; left: 28px; }
.hud-label.br { bottom: 22px; right: 28px; text-align: right; }

.ring {
  position: absolute;
  border: 1px solid rgba(134,255,98,.28);
  border-radius: 50%;
}

.r1 { width: 430px; height: 430px; left: calc(50% - 215px); top: calc(50% - 215px); }
.r2 { width: 300px; height: 300px; left: calc(50% - 150px); top: calc(50% - 150px); border-color: rgba(134,255,98,.2); }
.r3 { width: 170px; height: 170px; left: calc(50% - 85px); top: calc(50% - 85px); border-color: rgba(134,255,98,.16); }

main { position: relative; z-index: 1; }

.map-sheet-frame {
  position: relative;
  border: 1px solid rgba(134,255,98,0.24);
  background: rgba(0, 10, 0, 0.2);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
}

.map-sheet-frame::before,
.map-sheet-frame::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(134,255,98,0.11);
  pointer-events: none;
}

.map-sheet-frame::after {
  inset: 24px;
  border-style: solid;
  border-color: rgba(134,255,98,0.08);
}

.ascii-logo {
  margin-inline: auto;
  width: fit-content;
  max-width: 100%;
  padding: .6rem .9rem;
  white-space: pre;
  overflow-x: auto;
  color: var(--green);
  text-shadow: 0 0 8px rgba(92,255,61,.36);
  background: rgba(0, 18, 0, 0.45);
  border: 1px solid rgba(94,255,64, 0.32);
  border-radius: .35rem;
  font-family: "Cascadia Code", "Fira Code", "JetBrains Mono", "Consolas", monospace;
  font-size: clamp(8px, 1.25vw, 15px);
  line-height: 1.05;
}

.text-body-secondary { color: var(--ink-soft) !important; }