:root {
  color-scheme: dark;
  --ink: #f4f1df;
  --muted: #8e9aa5;
  --faint: #505b67;
  --line: rgba(183, 206, 211, .16);
  --panel: rgba(8, 13, 20, .86);
  --space: #070a10;
  --cyan: #8ee7da;
  --gold: #e9bf75;
  --coral: #ed846f;
  --violet: #9f8ce4;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--space); color: var(--ink); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }

.atlas-shell { height: 100vh; min-height: 620px; display: grid; grid-template-rows: 64px 54px 1fr; background: #070a10; }
.topbar { display: grid; grid-template-columns: 240px 1fr 240px; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--line); background: rgba(7, 10, 16, .96); letter-spacing: .12em; z-index: 5; }
.brand { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { width: 24px; height: 24px; border: 1px solid var(--cyan); border-radius: 50%; position: relative; box-shadow: 0 0 20px rgba(142, 231, 218, .2); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; inset: 5px -5px; border: 1px solid rgba(142, 231, 218, .65); border-radius: 50%; transform: rotate(-25deg); }
.brand-mark::after { inset: 9px -7px; transform: rotate(27deg); opacity: .45; }
.brand b { display: block; font-family: Georgia, serif; font-size: 16px; letter-spacing: .2em; }
.brand small { display: block; color: var(--muted); font-size: 8px; margin-top: 2px; letter-spacing: .22em; }
.topbar-center { justify-self: center; display: flex; align-items: center; gap: 10px; color: var(--muted); font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.signal { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.topbar-separator { width: 1px; height: 12px; background: var(--line); }
.prototype-jump { justify-self: end; padding: 9px 12px; border: 1px solid rgba(142, 231, 218, .28); background: rgba(142, 231, 218, .05); color: var(--cyan); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; cursor: pointer; }
.prototype-jump:hover { background: rgba(142, 231, 218, .12); }
.prototype-jump span { font-size: 7px; margin-right: 6px; }

.crumbbar { min-width: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); background: #090d14; z-index: 4; }
.breadcrumbs { display: flex; min-width: 0; overflow: hidden; }
.crumb { border: 0; background: transparent; color: var(--muted); padding: 8px 24px 8px 0; margin-right: 18px; position: relative; font: 700 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; cursor: pointer; white-space: nowrap; }
.crumb::after { content: "/"; position: absolute; right: 0; color: var(--faint); }
.crumb:last-child { color: var(--ink); cursor: default; }
.crumb:last-child::after { display: none; }
.view-label { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.view-label span { color: var(--muted); font: 500 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.view-label b { font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }

.map-stage { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at 48% 47%, rgba(23, 51, 61, .2), transparent 34%), linear-gradient(145deg, #080b12, #05070b 72%); }
.map-stage::before { content: ""; pointer-events: none; position: absolute; inset: 0; background-image: linear-gradient(rgba(164, 196, 204, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(164, 196, 204, .025) 1px, transparent 1px); background-size: 48px 48px; z-index: 1; }
#starfield, #universeMap { position: absolute; inset: 0; width: 100%; height: 100%; }
#starfield { opacity: .72; }
#universeMap { z-index: 2; cursor: grab; touch-action: none; }
#universeMap.dragging { cursor: grabbing; }

.route { fill: none; stroke: rgba(142, 231, 218, .2); stroke-width: 1; stroke-dasharray: 2 7; vector-effect: non-scaling-stroke; }
.route.active { stroke: rgba(142, 231, 218, .55); stroke-dasharray: none; }
.claim-area { fill: rgba(159, 140, 228, .06); stroke: rgba(159, 140, 228, .28); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.growth-area { fill: rgba(233, 191, 117, .035); stroke: rgba(233, 191, 117, .16); stroke-width: 1; vector-effect: non-scaling-stroke; }
.continent { fill: url(#planetSurface); opacity: .6; stroke: rgba(142, 231, 218, .24); stroke-width: 1; vector-effect: non-scaling-stroke; }
.coastline { fill: rgba(91, 131, 113, .23); stroke: rgba(143, 190, 161, .36); stroke-width: 1; vector-effect: non-scaling-stroke; }
.orbit { fill: none; stroke: rgba(206, 220, 219, .12); stroke-width: 1; vector-effect: non-scaling-stroke; }

.map-node { cursor: pointer; }
.map-node .hit { fill: transparent; }
.map-node .halo { opacity: .14; filter: url(#hardGlow); }
.map-node .core { filter: url(#softGlow); }
.map-node:hover .halo, .map-node.selected .halo { opacity: .38; }
.map-node.selected .ring { opacity: 1; }
.ring { fill: none; stroke: var(--ink); stroke-width: 1; opacity: 0; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.node-system .core { fill: var(--gold); }
.node-system .halo { fill: var(--gold); }
.node-world .core { fill: var(--cyan); }
.node-world .halo { fill: var(--cyan); }
.node-station .core, .node-settlement .core { fill: var(--ink); }
.node-current .core { fill: var(--coral); }
.node-current .halo { fill: var(--coral); }
.node-future .core { fill: var(--violet); }
.node-future .halo { fill: var(--violet); }
.node-future .ring { stroke: var(--violet); opacity: .7; }
.activity-pulse { fill: none; stroke: var(--coral); opacity: .55; transform-box: fill-box; transform-origin: center; animation: ping 2.6s ease-out infinite; vector-effect: non-scaling-stroke; }
@keyframes ping { 0% { transform: scale(.6); opacity: .75; } 75%, 100% { transform: scale(1.8); opacity: 0; } }

.map-label { pointer-events: none; fill: var(--ink); font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; paint-order: stroke; stroke: #070a10; stroke-width: 4px; stroke-linejoin: round; }
.map-label tspan.sub { fill: var(--muted); font-size: 8px; letter-spacing: .06em; }

.detail-panel { position: absolute; z-index: 3; top: 28px; right: 24px; width: 300px; padding: 22px; border: 1px solid var(--line); border-top: 2px solid var(--cyan); background: var(--panel); backdrop-filter: blur(14px); box-shadow: 0 22px 70px rgba(0, 0, 0, .28); }
.detail-kicker { color: var(--cyan); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; }
.detail-panel h1 { font: 400 30px/1.05 Georgia, serif; margin: 10px 0 8px; }
.detail-panel p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.detail-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 20px -22px 18px; border-block: 1px solid var(--line); background: var(--line); }
.detail-stat { padding: 13px 22px; background: rgba(8, 13, 20, .92); }
.detail-stat b { display: block; font: 500 17px/1.1 Georgia, serif; }
.detail-stat span { display: block; margin-top: 5px; color: var(--muted); font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
.detail-action { width: 100%; border: 0; border-top: 1px solid var(--line); padding: 14px 0 0; display: flex; justify-content: space-between; background: transparent; color: var(--ink); font: 700 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; cursor: pointer; }
.detail-action[hidden] { display: none; }
.detail-action:hover { color: var(--cyan); }

.map-tools { position: absolute; z-index: 3; left: 24px; top: 28px; display: grid; border: 1px solid var(--line); background: rgba(8, 13, 20, .82); }
.map-tools button { width: 36px; height: 36px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; }
.map-tools button:last-child { border-bottom: 0; font-size: 17px; }
.map-tools button:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.layer-switcher { position: absolute; z-index: 3; left: 76px; top: 28px; display: flex; height: 38px; align-items: center; gap: 15px; padding: 0 13px; border: 1px solid var(--line); background: rgba(8, 13, 20, .82); color: var(--muted); font: 600 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.layer-switcher > span { color: var(--faint); }
.layer-switcher label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.layer-switcher input { position: absolute; opacity: 0; pointer-events: none; }
.layer-switcher i { display: block; width: 13px; height: 7px; border-bottom: 1px dotted var(--cyan); }
.layer-switcher .activity-key { border: 1px solid var(--coral); border-radius: 50%; height: 8px; width: 8px; }
.layer-switcher .claim-key { border: 1px dashed var(--violet); height: 8px; }
.layer-switcher input:not(:checked) + i { opacity: .18; }
.time-horizon { position: absolute; z-index: 3; left: 50%; top: 28px; transform: translateX(-50%); height: 38px; display: flex; align-items: center; border: 1px solid var(--line); background: rgba(8, 13, 20, .88); font: 700 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.time-horizon[hidden] { display: none; }
.time-horizon > span { padding: 0 12px; color: var(--faint); }
.time-horizon button { height: 100%; padding: 0 11px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.time-horizon button:hover { color: var(--ink); }
.time-horizon button[aria-pressed="true"] { color: var(--space); background: var(--gold); }

.scale-ruler { position: absolute; z-index: 3; left: 24px; bottom: 26px; color: var(--muted); font: 600 8px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; }
.scale-ruler span { display: block; width: 100px; height: 7px; margin-bottom: 7px; border-inline: 1px solid var(--muted); border-top: 1px solid var(--muted); }
.dummy-note { position: absolute; z-index: 3; right: 24px; bottom: 21px; margin: 0; color: var(--faint); font: 500 8px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }

@media (max-width: 760px) {
  .atlas-shell { grid-template-rows: 56px 48px 1fr; min-height: 560px; }
  .topbar { grid-template-columns: 1fr auto; padding: 0 14px; }
  .topbar-center { display: none; }
  .prototype-jump { padding: 8px; font-size: 8px; }
  .crumbbar { padding: 0 14px; }
  .view-label span { display: none; }
  .view-label b { font-size: 9px; }
  .crumb { font-size: 9px; padding-right: 16px; margin-right: 10px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; }
  .map-tools { top: 14px; left: 14px; }
  .layer-switcher { top: 14px; left: 64px; gap: 10px; }
  .layer-switcher > span, .layer-switcher label { font-size: 0; }
  .layer-switcher i { margin: 0 2px; }
  .time-horizon { top: 60px; left: 64px; transform: none; height: 34px; }
  .time-horizon > span { display: none; }
  .time-horizon button { padding: 0 9px; font-size: 7px; }
  .detail-panel { top: auto; left: 14px; right: 14px; bottom: 48px; width: auto; padding: 16px; }
  .detail-panel h1 { font-size: 24px; }
  .detail-panel p { display: none; }
  .detail-stats { margin: 14px -16px 12px; }
  .detail-stat { padding: 10px 16px; }
  .scale-ruler, .dummy-note { display: none; }
  .map-label { font-size: 9px; letter-spacing: .06em; }
  .map-label tspan.sub { font-size: 7px; }
}