:root {
  --cyan: #8ae9ff;
  --cyan-bright: #d8f9ff;
  --blue: #4b89ff;
  --amber: #ffc98b;
  --ink: #02050b;
  --panel: rgba(5, 13, 25, 0.68);
  --line: rgba(161, 222, 255, 0.2);
  --soft-line: rgba(161, 222, 255, 0.1);
  --muted: rgba(213, 236, 246, 0.56);
  --hud-scale: 1;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: #eafaff; font-family: Inter, system-ui, sans-serif; user-select: none; }
button, input, select { font: inherit; }
button { color: inherit; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
kbd { font-family: Rajdhani, sans-serif; font-weight: 700; letter-spacing: .08em; }

/* Cinematic launch */
.boot-layer, .loading-layer { position: fixed; inset: 0; z-index: 100; opacity: 0; pointer-events: none; transition: opacity 1.1s ease; }
.boot-layer.visible, .loading-layer.visible { opacity: 1; pointer-events: auto; }
.boot-layer { background: #03050a url("assets/deep-space-panorama.png") center / cover no-repeat; }
.boot-layer::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 63% 43%, transparent 0 8%, rgba(1,4,10,.12) 42%, rgba(1,3,8,.83) 100%), linear-gradient(90deg, rgba(0,3,9,.94) 0%, rgba(2,6,13,.58) 46%, rgba(1,3,8,.18) 100%); }
.boot-stars { position: absolute; inset: 0; opacity: .28; background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px); background-size: 83px 83px; mask-image: linear-gradient(90deg,#000,transparent 76%); animation: stars-drift 28s linear infinite; }
.boot-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 180px 55px #000; pointer-events: none; }
.boot-content { position: absolute; left: clamp(42px, 8vw, 150px); top: 50%; width: min(720px, 78vw); transform: translateY(-51%); }
.eyebrow { display: flex; align-items: center; gap: 12px; color: rgba(184,233,250,.65); font: 600 11px/1 Rajdhani,sans-serif; letter-spacing: .32em; text-transform: uppercase; margin-bottom: 24px; }
.eyebrow span { width: 42px; height: 1px; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.boot-content h1 { margin: 0; font-family: Rajdhani,sans-serif; letter-spacing: -.045em; line-height: .78; filter: drop-shadow(0 0 38px rgba(73,178,255,.2)); }
.boot-content h1 span { display: block; font-size: clamp(76px, 10vw, 150px); font-weight: 400; color: rgba(234,250,255,.92); }
.boot-content h1 strong { display: block; margin-left: .04em; font-size: clamp(42px, 5.3vw, 78px); font-weight: 600; letter-spacing: .24em; color: var(--cyan); text-shadow: 0 0 32px rgba(89,209,255,.45); }
.boot-copy { margin: 34px 0 28px 4px; color: rgba(234,247,251,.82); font: 300 clamp(15px,1.3vw,19px)/1.6 Inter,sans-serif; letter-spacing: .02em; }
.boot-copy small { display: block; color: rgba(206,232,242,.45); font-size: 12px; margin-top: 5px; }
.primary-action { position: relative; min-width: 294px; height: 58px; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 18px 0 25px; border: 1px solid rgba(140,230,255,.7); background: linear-gradient(105deg, rgba(53,172,215,.23), rgba(17,53,74,.65)); box-shadow: inset 0 0 24px rgba(80,205,255,.1), 0 0 24px rgba(33,157,215,.13); color: var(--cyan-bright); cursor: pointer; text-transform: uppercase; font: 600 12px Rajdhani,sans-serif; letter-spacing: .19em; transition: .25s ease; }
.primary-action::before, .primary-action::after { content: ""; position: absolute; width: 8px; height: 8px; border-color: var(--cyan); }
.primary-action::before { top: 4px; left: 4px; border-top: 1px solid; border-left: 1px solid; }
.primary-action::after { right: 4px; bottom: 4px; border-right: 1px solid; border-bottom: 1px solid; }
.primary-action:hover, .primary-action:focus-visible { transform: translateY(-2px); background: linear-gradient(105deg, rgba(83,206,245,.35), rgba(17,69,92,.75)); box-shadow: inset 0 0 32px rgba(112,225,255,.16),0 0 40px rgba(54,190,239,.22); outline: none; }
.primary-action .button-glow { position: absolute; width: 50%; height: 160%; left: -65%; transform: rotate(18deg); background: linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent); animation: button-sweep 3.4s ease-in-out infinite; }
.primary-action kbd { border: 1px solid rgba(176,230,247,.23); padding: 5px 7px; color: rgba(214,241,249,.57); font-size: 9px; }
.boot-controls { display: flex; align-items: flex-start; gap: clamp(20px,3vw,44px); margin-top: 42px; margin-left: 4px; }
.boot-controls > div { display: grid; grid-template-rows: 23px auto auto; min-width: 58px; gap: 3px; }
.boot-controls kbd { color: rgba(222,245,252,.72); font-size: 11px; }
.boot-controls strong { font: 600 10px Rajdhani,sans-serif; color: rgba(196,230,240,.62); letter-spacing: .16em; text-transform: uppercase; }
.boot-controls small { font-size: 8px; color: rgba(178,213,225,.32); text-transform: uppercase; }
.mouse-icon { width: 14px; height: 21px; border: 1px solid rgba(216,245,255,.66); border-radius: 8px; position: relative; }
.mouse-icon::after { content: ""; position: absolute; top: 4px; left: 6px; width: 1px; height: 4px; background: var(--cyan); }
.boot-footer { position: absolute; left: 30px; right: 30px; bottom: 23px; display: flex; justify-content: space-between; color: rgba(185,220,232,.33); font: 600 8px Rajdhani,sans-serif; letter-spacing: .18em; }
.status-dot { display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #6effce; box-shadow: 0 0 8px #6effce; }

.loading-layer { z-index: 120; display: grid; place-content: center; gap: 25px; background: #02040a; text-align: center; transition-duration: .8s; }
.loading-layer:not(.visible) { pointer-events: none; }
.loading-layer span { color: rgba(193,232,245,.55); font: 600 9px Rajdhani,sans-serif; letter-spacing: .3em; }
.loader-orbit { position: relative; width: 64px; height: 64px; margin: auto; border: 1px solid rgba(107,208,244,.13); border-radius: 50%; animation: spin 5s linear infinite; }
.loader-orbit::before { content: ""; position: absolute; inset: 11px; border: 1px solid rgba(107,208,244,.21); border-radius: 50%; }
.loader-orbit i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.loader-orbit i:nth-child(1) { top: -2px; left: 29px; }.loader-orbit i:nth-child(2) { bottom: 7px; right: 6px; }.loader-orbit i:nth-child(3) { top: 20px; left: 16px; width: 2px; height: 2px; }

/* HUD */
.hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; font-size: calc(14px * var(--hud-scale)); opacity: 1; transition: opacity .6s ease; }
.hud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 44%, rgba(0,4,10,.16) 78%, rgba(0,3,8,.5) 100%); pointer-events: none; }
.hud::after { content: ""; position: absolute; inset: 0; opacity: .08; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(161,232,255,.2) 4px); mix-blend-mode: overlay; }
.hud button { pointer-events: auto; }
.hud-corners i { position: absolute; width: 44px; height: 44px; border-color: rgba(145,224,255,.25); }
.hud-corners i:nth-child(1) { top: 20px; left: 20px; border-top: 1px solid; border-left: 1px solid; }.hud-corners i:nth-child(2) { top: 20px; right: 20px; border-top: 1px solid; border-right: 1px solid; }.hud-corners i:nth-child(3) { left: 20px; bottom: 20px; border-left: 1px solid; border-bottom: 1px solid; }.hud-corners i:nth-child(4) { right: 20px; bottom: 20px; border-right: 1px solid; border-bottom: 1px solid; }
.hud-topbar { position: absolute; left: 31px; right: 31px; top: 22px; height: 46px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(145,220,249,.1); }
.hud-brand { height: 35px; display: grid; grid-template-columns: 34px auto; grid-template-rows: 18px 13px; column-gap: 11px; }
.hud-brand > span { grid-row: 1/3; display: grid; place-items: center; border: 1px solid rgba(127,225,255,.48); color: var(--cyan); font: 700 13px Rajdhani,sans-serif; box-shadow: inset 0 0 12px rgba(96,217,255,.12); }
.hud-brand strong { font: 600 10px Rajdhani,sans-serif; letter-spacing: .18em; color: rgba(221,245,252,.8); }.hud-brand small { font: 500 7px Rajdhani,sans-serif; letter-spacing: .24em; color: rgba(187,224,236,.34); }
.region-pill { position: absolute; left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: 8px auto; grid-template-rows: 15px 10px; column-gap: 8px; align-items: center; min-width: 180px; text-align: center; }
.region-pill i { grid-row: 1/3; width: 5px; height: 5px; background: #6dffd4; border-radius: 50%; box-shadow: 0 0 9px #6dffd4; }
.region-pill span { font: 600 9px Rajdhani,sans-serif; letter-spacing: .22em; color: rgba(225,248,255,.78); }.region-pill small { font: 500 7px Rajdhani,sans-serif; letter-spacing: .18em; color: rgba(190,225,236,.35); }
.hud-button { border: 0; background: transparent; cursor: pointer; }
.discovery-count { text-align: right; min-width: 85px; }.discovery-count small { display: block; font: 500 7px Rajdhani,sans-serif; letter-spacing: .18em; color: var(--muted); }.discovery-count strong { font: 500 14px Rajdhani,sans-serif; letter-spacing: .15em; color: var(--cyan); }
.glass-panel { position: absolute; width: 258px; padding: 13px 15px 14px; background: linear-gradient(125deg, rgba(5,17,30,.68), rgba(4,10,20,.37)); border-left: 1px solid rgba(130,223,255,.24); border-top: 1px solid rgba(130,223,255,.1); box-shadow: inset 12px 0 28px rgba(6,32,51,.11), 0 18px 60px rgba(0,0,0,.08); backdrop-filter: blur(8px); }
.glass-panel::before { content: ""; position: absolute; left: -1px; top: 0; width: 1px; height: 26px; background: var(--cyan); box-shadow: 0 0 11px rgba(95,218,255,.8); }
.panel-kicker { display: flex; align-items: center; gap: 7px; padding-bottom: 9px; border-bottom: 1px solid var(--soft-line); font: 600 7px Rajdhani,sans-serif; letter-spacing: .19em; color: rgba(188,225,238,.46); }
.panel-kicker > span { color: rgba(125,221,251,.8); }.panel-kicker i { margin-left: auto; color: rgba(116,255,204,.7); font-style: normal; font-size: 6px; }
.target-card { left: 32px; top: 91px; }
.target-heading { display: flex; align-items: center; gap: 12px; margin: 12px 0 10px; }
.planet-icon { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a6d8ef, #2478ab 32%, #0d294a 72%); box-shadow: inset -8px -5px 13px rgba(0,0,0,.65), 0 0 16px rgba(74,177,230,.18); }
.target-heading h2 { margin: 0; font: 500 20px/.9 Rajdhani,sans-serif; letter-spacing: .15em; }.target-heading p { margin: 7px 0 0; font: 600 7px Rajdhani,sans-serif; letter-spacing: .19em; color: rgba(196,227,237,.4); }
.target-card dl, .atlas-preview dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 0; }
.target-card dl div { padding-top: 7px; border-top: 1px solid rgba(139,215,241,.08); }.target-card dt, .atlas-preview dt { color: rgba(188,223,235,.34); font: 500 6px Rajdhani,sans-serif; letter-spacing: .14em; }.target-card dd, .atlas-preview dd { margin: 3px 0 0; color: rgba(223,244,250,.7); font: 600 8px Rajdhani,sans-serif; letter-spacing: .08em; }
.target-fact { min-height: 30px; margin: 11px 0 8px; color: rgba(208,233,241,.5); font: 300 9px/1.5 Inter,sans-serif; }
.scan-progress { height: 18px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(135,220,249,.12); color: rgba(167,225,243,.53); font: 600 6px Rajdhani,sans-serif; letter-spacing: .17em; }
.scan-progress i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: linear-gradient(90deg,rgba(57,154,191,.12),rgba(95,219,255,.32)); transition: width .08s linear; }.scan-progress span { position: relative; }
.flight-card { left: 32px; bottom: 53px; }
.speed-readout { display: flex; align-items: baseline; gap: 5px; margin: 8px 0 3px; }.speed-readout strong { font: 300 39px/.9 Rajdhani,sans-serif; letter-spacing: -.04em; color: rgba(231,250,255,.9); text-shadow: 0 0 18px rgba(111,221,255,.2); }.speed-readout span { font: 500 8px Rajdhani,sans-serif; color: rgba(195,228,239,.4); }
.thrust-bar { height: 3px; display: flex; position: relative; gap: 3px; background: rgba(126,207,235,.07); }.thrust-bar i { width: 5%; background: linear-gradient(90deg,#52bcea,#bcf5ff); box-shadow: 0 0 8px rgba(99,218,255,.55); transition: width .12s; }.thrust-bar em { position: absolute; top: -2px; width: 1px; height: 7px; background: rgba(177,226,242,.18); }.thrust-bar em:nth-of-type(1){left:25%}.thrust-bar em:nth-of-type(2){left:50%}.thrust-bar em:nth-of-type(3){left:75%}
.flight-row { display: flex; justify-content: space-between; margin-top: 9px; font: 600 6px Rajdhani,sans-serif; letter-spacing: .13em; color: rgba(181,220,233,.38); }.flight-row i { display: inline-block; width: 4px; height: 4px; margin-right: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }.flight-row b { color: rgba(111,255,210,.67); }
.nav-card { right: 32px; bottom: 53px; width: 267px; }
.nav-destination { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px 9px; }.nav-destination small { display: block; color: rgba(188,225,237,.35); font: 500 6px Rajdhani,sans-serif; letter-spacing: .16em; }.nav-destination strong { display: block; margin: 3px 0 1px; font: 500 17px Rajdhani,sans-serif; letter-spacing: .14em; }.nav-destination span { font: 400 7px Inter,sans-serif; color: rgba(186,220,231,.42); }
.route-orb { position: relative; width: 38px; height: 38px; border: 1px solid rgba(130,220,250,.13); border-radius: 50%; }.route-orb::before,.route-orb::after { content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid rgba(130,220,250,.13);border-radius:50% }.route-orb::before{width:24px;height:24px}.route-orb::after{width:4px;height:4px;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.route-orb i { position:absolute;width:4px;height:4px;border-radius:50%;background:#ffc778;top:8px;right:5px;box-shadow:0 0 7px #ffc778 }.route-orb b { position:absolute;inset:3px;border-top:1px solid rgba(115,220,255,.6);border-radius:50%;animation:spin 3s linear infinite }
.warp-hint { height: 27px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); color: rgba(184,224,237,.5); font: 600 6px Rajdhani,sans-serif; letter-spacing: .13em; }.warp-hint kbd { display:grid;place-items:center;width:20px;height:17px;border:1px solid rgba(133,225,255,.3);color:var(--cyan);font-size:8px }
.panel-button { width: 100%; height: 27px; margin-top: 9px; display:flex;align-items:center;justify-content:space-between;padding:0 10px;border:1px solid rgba(133,221,250,.15);background:rgba(76,170,205,.06);color:rgba(204,235,245,.58);cursor:pointer;font:600 7px Rajdhani,sans-serif;letter-spacing:.12em }.panel-button:hover{background:rgba(84,194,234,.14);color:var(--cyan-bright)}.panel-button kbd{font-size:7px;color:var(--cyan)}
.reticle { position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%);transition:transform .2s,color .2s }.reticle-ring{position:absolute;inset:12px;border:1px solid rgba(173,231,249,.28);border-radius:50%}.reticle-ring::before{content:"";position:absolute;inset:7px;border:1px dashed rgba(173,231,249,.15);border-radius:50%;animation:spin 12s linear infinite}.reticle-bracket{position:absolute;top:22px;width:10px;height:30px;border-top:1px solid rgba(170,231,250,.58);border-bottom:1px solid rgba(170,231,250,.58)}.reticle-bracket.left{left:0;border-left:1px solid rgba(170,231,250,.58)}.reticle-bracket.right{right:0;border-right:1px solid rgba(170,231,250,.58)}.reticle b{position:absolute;left:35px;top:35px;width:3px;height:3px;border-radius:50%;background:rgba(220,249,255,.8);box-shadow:0 0 6px var(--cyan)}.reticle>span{position:absolute;top:79px;left:50%;width:130px;transform:translateX(-50%);text-align:center;color:rgba(181,222,235,.32);font:600 6px Rajdhani,sans-serif;letter-spacing:.2em}.reticle.locked{transform:translate(-50%,-50%) scale(.86)}.reticle.locked .reticle-ring{border-color:rgba(104,242,255,.68);box-shadow:0 0 18px rgba(60,207,243,.12)}
.target-marker { position:absolute;left:50%;top:40%;width:72px;height:72px;transform:translate(-50%,-50%);opacity:0;transition:opacity .2s; }.target-marker.visible{opacity:1}.target-marker i{position:absolute;left:22px;top:22px;width:28px;height:28px;border:1px solid rgba(116,226,255,.7);transform:rotate(45deg);box-shadow:0 0 12px rgba(76,200,239,.16)}.target-marker span,.target-marker small{position:absolute;left:84px;white-space:nowrap;font-family:Rajdhani,sans-serif;letter-spacing:.13em}.target-marker span{top:22px;font-size:9px;color:rgba(221,248,255,.82)}.target-marker small{top:36px;font-size:7px;color:rgba(187,225,238,.44)}
.world-label { position:absolute; transform:translate(-50%,-50%); display:flex;align-items:center;gap:7px; opacity:0; transition:opacity .25s; will-change:transform; }.world-label.visible{opacity:1}.world-label i{width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.world-label span{font:600 7px Rajdhani,sans-serif;letter-spacing:.16em;color:rgba(219,245,252,.62);text-shadow:0 1px 4px #000}.world-label small{font:500 6px Rajdhani,sans-serif;color:rgba(198,230,240,.34)}
.heading-tape { position:absolute;left:50%;top:83px;width:210px;height:31px;transform:translateX(-50%);text-align:center;color:rgba(194,231,243,.4) }.heading-line{height:8px;display:flex;justify-content:space-between;align-items:flex-start;border-top:1px solid rgba(139,216,242,.1)}.heading-line i{width:1px;height:4px;background:rgba(151,221,244,.25)}.heading-line b{width:1px;height:8px;background:var(--cyan);box-shadow:0 0 7px var(--cyan)}.heading-tape>span{font:500 9px Rajdhani,sans-serif;letter-spacing:.17em}.heading-tape>small{display:block;font:500 5px Rajdhani,sans-serif;letter-spacing:.2em;color:rgba(194,231,243,.22)}
.mission-toast { position:absolute;left:50%;bottom:45px;width:min(430px,calc(100vw - 40px));min-height:57px;display:flex;align-items:center;gap:13px;padding:10px 14px;background:linear-gradient(90deg,rgba(6,19,32,.78),rgba(5,13,25,.62));border-top:1px solid rgba(121,222,255,.22);border-bottom:1px solid rgba(121,222,255,.08);transform:translate(-50%,140px);opacity:0;transition:.55s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(10px)}.mission-toast.visible{transform:translate(-50%,0);opacity:1}.toast-symbol{width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(130,224,255,.24);color:var(--cyan);font-style:normal}.mission-toast div{display:grid;gap:2px;flex:1}.mission-toast small{font:600 6px Rajdhani,sans-serif;letter-spacing:.21em;color:rgba(123,220,249,.63)}.mission-toast strong{font:500 11px Rajdhani,sans-serif;letter-spacing:.08em;color:rgba(230,249,255,.86)}.mission-toast span{font:300 8px Inter,sans-serif;color:rgba(194,225,235,.45)}.mission-toast button{width:24px;height:24px;border:0;background:transparent;color:rgba(186,225,238,.4);cursor:pointer;pointer-events:auto}
.hud-shortcuts { position:absolute;right:37px;top:87px;display:flex;gap:13px;color:rgba(194,226,237,.32);font:500 6px Rajdhani,sans-serif;letter-spacing:.1em }.hud-shortcuts kbd{color:rgba(152,224,246,.65);font-size:7px;margin-right:2px}.icon-button{pointer-events:auto;border:0;background:transparent;cursor:pointer}.fullscreen-button{position:absolute;right:33px;bottom:21px;width:20px;height:20px}.fullscreen-button span::before,.fullscreen-button span::after{content:"";position:absolute;inset:3px;border-color:rgba(162,225,245,.45)}.fullscreen-button span::before{border-left:1px solid;border-top:1px solid}.fullscreen-button span::after{border-right:1px solid;border-bottom:1px solid}

/* Pause and warp */
.pointer-prompt{position:fixed;inset:0;z-index:25;display:grid;place-items:center;background:radial-gradient(circle,transparent 20%,rgba(0,4,10,.3));pointer-events:none}.pointer-prompt button{pointer-events:auto;min-width:240px;padding:13px 28px;border:1px solid rgba(136,226,255,.35);background:rgba(4,15,25,.78);backdrop-filter:blur(12px);cursor:pointer}.pointer-prompt button span,.pointer-prompt button small{display:block}.pointer-prompt button span{font:600 9px Rajdhani,sans-serif;letter-spacing:.19em;color:var(--cyan-bright)}.pointer-prompt button small{margin-top:4px;color:rgba(196,229,240,.42);font-size:8px}
.warp-overlay{position:fixed;inset:0;z-index:45;opacity:0;visibility:hidden;pointer-events:none;background:radial-gradient(circle at center,transparent 0 22%,rgba(3,14,28,.18) 55%,rgba(0,3,10,.85));transition:opacity .25s}.warp-overlay.active{opacity:1;visibility:visible}.warp-overlay.transit{background:radial-gradient(circle at center,#e9fdff 0%,rgba(85,195,255,.54) 3%,rgba(1,9,26,.12) 25%,rgba(0,2,8,.9) 100%)}.warp-tunnel{position:absolute;left:50%;top:50%;width:min(80vw,900px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(130,224,255,.2);box-shadow:inset 0 0 90px rgba(90,201,255,.12),0 0 120px rgba(67,159,255,.12);animation:warp-pulse .7s ease-in-out infinite alternate}.warp-tunnel i{position:absolute;border:1px solid rgba(117,224,255,.15);border-radius:50%;inset:14%;animation:warp-ring 1s linear infinite}.warp-tunnel i:nth-child(2){inset:28%;animation-delay:-.33s}.warp-tunnel i:nth-child(3){inset:40%;animation-delay:-.66s}.warp-readout{position:absolute;left:50%;bottom:10vh;width:340px;transform:translateX(-50%);text-align:center}.warp-readout small{display:block;font:600 8px Rajdhani,sans-serif;letter-spacing:.24em;color:rgba(195,237,250,.58)}.warp-readout strong{display:block;margin:5px;font:300 39px Rajdhani,sans-serif;letter-spacing:.04em;text-shadow:0 0 18px var(--cyan)}.warp-readout span{font:600 7px Rajdhani,sans-serif;letter-spacing:.2em;color:rgba(188,228,242,.45)}.warp-readout>div{height:2px;margin:12px 0 8px;background:rgba(124,210,240,.12)}.warp-readout>div i{display:block;width:0;height:100%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.warp-readout em{font:500 6px Rajdhani,sans-serif;font-style:normal;letter-spacing:.18em;color:rgba(188,224,236,.25)}

/* Modals */
.modal{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(0,4,10,.66);color:#eafaff;backdrop-filter:blur(14px)}.modal::backdrop{background:rgba(0,3,8,.65)}.modal[open]{display:grid;place-items:center;animation:modal-in .32s ease}.modal-shell{position:relative;width:min(1120px,calc(100vw - 70px));height:min(720px,calc(100vh - 70px));display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(5,18,31,.95),rgba(2,8,17,.95));border:1px solid rgba(135,220,248,.17);box-shadow:0 35px 100px rgba(0,0,0,.55),inset 0 0 80px rgba(54,142,181,.03)}.modal-shell::before,.modal-shell::after{content:"";position:absolute;width:38px;height:38px;border-color:rgba(135,224,255,.55);pointer-events:none}.modal-shell::before{left:-1px;top:-1px;border-left:1px solid;border-top:1px solid}.modal-shell::after{right:-1px;bottom:-1px;border-right:1px solid;border-bottom:1px solid}.modal-header{height:82px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid rgba(135,218,247,.1)}.modal-header small{font:600 7px Rajdhani,sans-serif;letter-spacing:.23em;color:rgba(147,222,246,.48)}.modal-header h2{margin:4px 0 0;font:500 25px Rajdhani,sans-serif;letter-spacing:.11em}.modal-close{width:35px;height:35px;border:1px solid rgba(137,220,248,.14);background:rgba(90,190,225,.04);color:rgba(206,240,250,.5);font-size:21px;cursor:pointer}.modal-close:hover{color:#fff;background:rgba(90,190,225,.12)}
.atlas-tabs{height:48px;flex:none;display:flex;padding-left:24px;border-bottom:1px solid rgba(135,218,247,.08)}.atlas-tabs button{position:relative;min-width:150px;border:0;background:transparent;color:rgba(195,229,240,.34);font:600 8px Rajdhani,sans-serif;letter-spacing:.17em;cursor:pointer}.atlas-tabs button span{margin-left:8px;color:rgba(140,215,239,.26)}.atlas-tabs button.active{color:var(--cyan-bright)}.atlas-tabs button.active::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:1px;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.atlas-body{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(310px,.72fr);min-height:0;flex:1}.atlas-grid{min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:22px;align-content:start;scrollbar-width:thin;scrollbar-color:rgba(129,215,244,.23) transparent}.atlas-item{position:relative;height:118px;overflow:hidden;padding:14px;border:1px solid rgba(133,217,245,.1);background:radial-gradient(circle at 78% 45%,var(--item-glow,rgba(62,145,190,.2)),transparent 28%),linear-gradient(135deg,rgba(9,23,38,.7),rgba(4,11,21,.5));text-align:left;cursor:pointer;transition:.2s}.atlas-item:hover,.atlas-item.active{border-color:rgba(132,224,255,.5);background:radial-gradient(circle at 78% 45%,var(--item-glow,rgba(62,145,190,.32)),transparent 31%),linear-gradient(135deg,rgba(12,34,52,.82),rgba(4,13,24,.6));transform:translateY(-2px)}.atlas-item.active::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:2px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}.atlas-item small{display:block;font:600 6px Rajdhani,sans-serif;letter-spacing:.18em;color:rgba(177,221,236,.35)}.atlas-item strong{display:block;margin:6px 0 5px;font:500 15px Rajdhani,sans-serif;letter-spacing:.12em}.atlas-item span{font:400 7px Inter,sans-serif;color:rgba(188,220,230,.38)}.atlas-item i{position:absolute;right:20px;top:25px;width:58px;height:58px;border-radius:50%;background:var(--item-art,radial-gradient(circle at 35% 30%,#87c7e7,#18364d 65%,#03080d));box-shadow:inset -10px -8px 18px rgba(0,0,0,.65),0 0 22px var(--item-glow,rgba(82,176,216,.2))}.atlas-item.visited::after{content:"CATALOGUED";position:absolute;left:14px;bottom:12px;font:600 5px Rajdhani,sans-serif;letter-spacing:.15em;color:rgba(103,255,206,.57)}
.atlas-preview{display:flex;flex-direction:column;padding:22px;border-left:1px solid rgba(134,217,245,.1);background:linear-gradient(160deg,rgba(17,40,58,.16),transparent)}.atlas-visual{position:relative;min-height:215px;flex:1;overflow:hidden;background:radial-gradient(circle at 50% 46%,var(--preview-glow,rgba(68,161,205,.34)),transparent 19%),radial-gradient(circle at 50% 52%,rgba(20,64,94,.35),transparent 48%);border:1px solid rgba(136,218,245,.08)}.atlas-visual::before{content:"";position:absolute;left:50%;top:50%;width:128px;height:128px;transform:translate(-50%,-50%);border-radius:50%;background:var(--preview-art,radial-gradient(circle at 35% 28%,#b5e0f0,#3177a1 42%,#08141d 73%));box-shadow:inset -24px -17px 35px rgba(0,0,0,.68),0 0 55px var(--preview-glow,rgba(89,190,231,.3))}.atlas-visual.galaxy::before{width:210px;height:80px;border-radius:50%;filter:blur(.3px);transform:translate(-50%,-50%) rotate(-18deg);box-shadow:0 0 70px var(--preview-glow)}.preview-orbit{position:absolute;left:50%;top:50%;width:210px;height:110px;transform:translate(-50%,-50%) rotate(-13deg);border:1px solid rgba(137,219,246,.11);border-radius:50%}.preview-orbit::before{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:var(--cyan);left:29px;top:11px;box-shadow:0 0 9px var(--cyan)}.atlas-visual>span{position:absolute;left:12px;top:10px;font:600 6px Rajdhani,sans-serif;letter-spacing:.17em;color:rgba(191,227,239,.3)}.preview-copy{padding:18px 3px 13px}.preview-copy>div{display:flex;justify-content:space-between}.preview-copy small,.preview-copy>div span{font:600 6px Rajdhani,sans-serif;letter-spacing:.18em;color:rgba(155,220,243,.48)}.preview-copy>div span{color:rgba(101,255,206,.56)}.preview-copy h3{margin:8px 0 4px;font:500 28px Rajdhani,sans-serif;letter-spacing:.13em}.preview-copy p{height:34px;margin:0 0 13px;color:rgba(199,228,237,.48);font:300 9px/1.6 Inter,sans-serif}.atlas-preview dl div{padding-top:7px;border-top:1px solid rgba(136,217,245,.08)}.primary-action.compact{width:100%;min-width:0;height:43px;flex:none;font-size:9px}.modal-footer{height:42px;flex:none;display:flex;align-items:center;gap:20px;padding:0 25px;border-top:1px solid rgba(134,218,246,.08);color:rgba(188,223,235,.36);font:500 7px Rajdhani,sans-serif;letter-spacing:.1em}.modal-footer kbd{color:rgba(145,220,244,.62)}.modal-footer small{margin-left:auto;color:rgba(188,223,235,.2);font-size:6px}.modal-footer button{border:0;background:transparent;color:rgba(255,148,148,.48);font:600 7px Rajdhani,sans-serif;letter-spacing:.12em;cursor:pointer}
.help-modal .modal-shell{width:min(980px,calc(100vw - 70px));height:min(660px,calc(100vh - 70px))}.help-content{display:grid;grid-template-columns:1fr 1fr .9fr;gap:28px;padding:28px;overflow:auto;flex:1}.help-content h3{margin:0 0 18px;padding-bottom:8px;border-bottom:1px solid rgba(134,217,245,.09);font:600 8px Rajdhani,sans-serif;letter-spacing:.22em;color:rgba(150,221,245,.56)}.key-grid{display:grid;gap:10px}.key-grid>div{display:grid;grid-template-columns:82px 1fr;align-items:center;min-height:44px}.key-grid kbd{justify-self:start;min-width:42px;padding:7px 8px;text-align:center;border:1px solid rgba(135,222,251,.16);background:rgba(67,156,190,.05);color:rgba(197,237,249,.68);font-size:8px}.key-grid b,.key-grid small{display:block}.key-grid b{font:500 9px Rajdhani,sans-serif;letter-spacing:.08em;color:rgba(223,244,250,.72)}.key-grid small{margin-top:3px;font-size:7px;color:rgba(186,219,230,.34)}.settings-section label{display:flex;justify-content:space-between;align-items:center;min-height:58px;border-bottom:1px solid rgba(135,217,245,.07);font:600 7px Rajdhani,sans-serif;letter-spacing:.13em;color:rgba(218,241,248,.6)}.settings-section label span small{display:block;margin-top:4px;font:400 6px Inter,sans-serif;letter-spacing:0;color:rgba(188,222,233,.3)}.settings-section select{width:104px;padding:6px;border:1px solid rgba(135,219,247,.15);background:#07111d;color:rgba(216,243,251,.65);font:600 7px Rajdhani,sans-serif;letter-spacing:.08em}.settings-section input[type=range]{width:105px;accent-color:#72dffb}.toggle-row input{display:none}.toggle-row>i{position:relative;width:34px;height:17px;border:1px solid rgba(133,218,247,.18);border-radius:9px;background:rgba(10,23,35,.7)}.toggle-row>i::after{content:"";position:absolute;left:3px;top:3px;width:9px;height:9px;border-radius:50%;background:rgba(188,225,237,.35);transition:.2s}.toggle-row input:checked+i::after{left:20px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes stars-drift { to { transform: translate3d(-83px,-83px,0); } }
@keyframes button-sweep { 0%,55%{left:-65%} 90%,100%{left:125%} }
@keyframes modal-in { from{opacity:0;transform:scale(1.015)} to{opacity:1;transform:scale(1)} }
@keyframes warp-pulse { to{transform:translate(-50%,-50%) scale(1.04);box-shadow:inset 0 0 160px rgba(90,201,255,.22),0 0 170px rgba(67,159,255,.18)} }
@keyframes warp-ring { from{transform:scale(.3);opacity:0} 35%{opacity:1} to{transform:scale(1.7);opacity:0} }

@media (max-width: 900px) {
  .target-card,.flight-card{left:18px}.nav-card{right:18px}.hud-topbar{left:18px;right:18px}.atlas-body{grid-template-columns:1fr 300px}.atlas-grid{grid-template-columns:repeat(2,1fr)}.help-content{grid-template-columns:1fr 1fr}.settings-section{grid-column:1/3}.hud-shortcuts{display:none}
}
@media (max-width: 700px) {
  .boot-content{left:30px;width:calc(100% - 60px)}.boot-controls{gap:14px;flex-wrap:wrap}.boot-footer span:nth-child(2){display:none}.target-card{transform:scale(.86);transform-origin:left top}.flight-card{transform:scale(.86);transform-origin:left bottom}.nav-card{transform:scale(.86);transform-origin:right bottom}.region-pill{display:none}.atlas-body{display:block;overflow:auto}.atlas-grid{grid-template-columns:repeat(2,1fr);overflow:visible}.atlas-preview{border-left:0;border-top:1px solid rgba(134,217,245,.1)}.atlas-preview .atlas-visual{min-height:220px}.modal-shell{width:calc(100vw - 24px);height:calc(100vh - 24px)}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important} }