:root{
  --bg:#04060c;
  --glass:rgba(10,16,30,.72);
  --glass2:rgba(16,24,44,.6);
  --line:rgba(150,185,255,.14);
  --line2:rgba(150,185,255,.28);
  --text:#e2e9ff;
  --dim:#8391b4;
  --faint:#4d5878;
  --amber:#ffb547;
  --amber-d:rgba(255,181,71,.16);
  --cyan:#7fe3ff;
  --cyan-d:rgba(127,227,255,.14);
  --red:#ff5d5d;
  --green:#6dffb0;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ui:"Chakra Petch",system-ui,sans-serif;
  --hud:52px;
  --con:68px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

#sky{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ---------- cockpit frame ---------- */
#ship{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;height:100dvh;transition:opacity .6s}
#ship::before{ /* canopy vignette + struts */
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(0,0,0,.65) 100%),
    linear-gradient(115deg,rgba(30,40,64,.55) 0,rgba(30,40,64,0) 9%),
    linear-gradient(-115deg,rgba(30,40,64,.55) 0,rgba(30,40,64,0) 9%);
}
.hud{height:var(--hud);flex:none;display:flex;align-items:center;gap:12px;padding:0 16px;padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line);background:linear-gradient(rgba(6,9,18,.92),rgba(6,9,18,.55));position:relative;z-index:4}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:30px;height:30px;fill:none;stroke:var(--cyan);stroke-width:1.6}
.brand-mark .dot{fill:var(--amber);stroke:none}
.brand-name{font-weight:700;letter-spacing:.22em;font-size:15px}
.hud-mid{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.1em}
.hud-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--glass2);display:grid;place-items:center;cursor:pointer}
.hud-btn svg{width:20px;height:20px;fill:none;stroke:var(--dim);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hud-btn .on{display:none}
.hud-btn[aria-pressed="true"] .on{display:inline}
.hud-btn[aria-pressed="true"] .off{display:none}
.hud-btn[aria-pressed="true"] svg{stroke:var(--amber)}

.viewport{flex:1;min-height:0;overflow:hidden;overflow:clip;position:relative;z-index:2}
.track{display:flex;width:400%;height:100%;transition:transform .6s cubic-bezier(.7,0,.2,1),filter .6s}
.track.warping{filter:blur(7px) brightness(1.25)}
.panel{width:25%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.panel-inner{max-width:660px;margin:0 auto;padding:18px 16px 28px}

.console{height:calc(var(--con) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-left:10px;padding-right:10px;border-top:1px solid var(--line);background:linear-gradient(rgba(8,12,24,.6),rgba(5,8,16,.96));position:relative;z-index:4}
.console button{margin:8px 0;border:1px solid transparent;border-radius:12px;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--dim);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;transition:color .2s,background .2s,border-color .2s}
.console svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.console button:hover{color:var(--text)}
.console button.active{color:var(--amber);background:var(--amber-d);border-color:rgba(255,181,71,.3);box-shadow:0 0 18px rgba(255,181,71,.12) inset}

/* ---------- telescope ---------- */
.scope{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line2);background:radial-gradient(130% 120% at 50% 0%,#0d2238 0,#060b16 70%);min-height:200px;padding:20px 20px 16px;display:flex;flex-direction:column;box-shadow:0 0 0 6px rgba(20,30,52,.55),0 20px 60px rgba(0,0,0,.5)}
.scope.boot{animation:scopeBoot 1.2s steps(1) both}
#static{position:absolute;inset:0;width:100%;height:100%;opacity:.12;mix-blend-mode:screen;pointer-events:none}
.scope::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(127,227,255,.05) 0 1px,transparent 1px 3px)}
.scope-ring{position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;border:1px dashed rgba(127,227,255,.18);pointer-events:none;animation:spin 60s linear infinite}
.scope-head{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--cyan);display:flex;align-items:center;gap:8px;position:relative}
.led{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2.4s infinite}
.transmission{font-family:var(--ui);font-weight:600;font-size:clamp(23px,5.2vw,32px);line-height:1.22;margin:18px 0 18px;min-height:2.5em;position:relative;text-shadow:0 0 18px rgba(127,227,255,.35)}
.transmission .cur{display:inline-block;width:.5em;height:1em;background:var(--cyan);vertical-align:-.12em;margin-left:2px;animation:blink 1s steps(1) infinite}
.transmission.glitch{animation:glitch .25s steps(2) 2}
.scope-foot{margin-top:auto;display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.08em;position:relative}
#scopeYear.known{color:var(--amber)}

.scope.alert{animation:alert .7s ease-out}
.scope.lock{border-color:rgba(109,255,176,.6);box-shadow:0 0 0 6px rgba(20,52,40,.55),0 0 40px rgba(109,255,176,.25)}

.computer{font-family:var(--mono);font-size:13px;line-height:1.55;color:var(--dim);margin:14px 2px 4px;min-height:21px}
.computer .ln{display:block;animation:lnIn .35s ease-out both}
.computer .ln::before{content:"> ";color:var(--faint)}
.computer .ln.bad{color:#ffb0a8}
.computer .ln.good{color:var(--green)}
.computer .ln.sys{color:var(--amber)}

/* scanner */
.scanner{margin-top:14px;padding:12px 14px 30px;border:1px solid var(--line);border-radius:16px;background:var(--glass)}
.scanner-label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--dim);margin-bottom:40px}
#zoneText{color:var(--cyan)}
.scanner-track{position:relative;height:2px;background:linear-gradient(90deg,var(--cyan),rgba(127,227,255,.15));margin:0 6px 0 16px}
.zone{position:absolute;top:-9px;height:20px;border-radius:4px;background:rgba(127,227,255,.13);border:1px solid rgba(127,227,255,.45);transition:left .7s cubic-bezier(.3,.8,.3,1),width .7s cubic-bezier(.3,.8,.3,1);left:0;width:100%}
.zone.hit{background:rgba(109,255,176,.2);border-color:var(--green)}
.earth{position:absolute;left:-16px;top:-7px;width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9fe0ff,#2c74c9 55%,#103a6e);box-shadow:0 0 10px rgba(80,170,255,.7)}
.ticks{position:absolute;inset:0}
.tick{position:absolute;top:10px;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.tick::before{content:"";position:absolute;left:50%;top:-9px;width:1px;height:5px;background:var(--faint)}
.mark{position:absolute;top:-21px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;animation:drop .55s cubic-bezier(.3,1.6,.5,1) both;z-index:2}
.mark b{font-family:var(--mono);font-size:10px;font-weight:500;color:var(--red);background:rgba(4,6,12,.85);padding:0 3px;border-radius:3px;white-space:nowrap}
.mark i{width:2px;height:16px;background:var(--red);box-shadow:0 0 6px var(--red)}
.mark.actual b{color:var(--amber)}.mark.actual i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.mark.good b{color:var(--green)}.mark.good i{background:var(--green);box-shadow:0 0 8px var(--green)}
.mark.low{top:-2px;flex-direction:column-reverse}

/* modules */
.modules{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.module{border:1px solid var(--line);border-radius:14px;padding:10px 11px;background:var(--glass);min-height:72px;opacity:.55;transition:opacity .4s,border-color .4s,box-shadow .4s}
.m-name{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint)}
.m-val{font-size:12.5px;color:var(--faint);margin-top:6px;line-height:1.3}
.module.on{opacity:1;border-color:rgba(255,181,71,.45);box-shadow:0 0 22px rgba(255,181,71,.12) inset}
.module.on .m-name{color:var(--amber)}
.module.on .m-val{color:var(--text);font-size:15px;font-weight:600}
.module[data-i="2"].on .m-val{font-size:13px;font-weight:500}
.module.booting{animation:boot 1.1s ease-out}
.module[data-i="2"].on{grid-column:1/-1}
.module.on{min-height:0}

/* controls */
.controls{grid-template-columns:minmax(0,1fr);margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:18px;background:var(--glass);display:grid;gap:12px}
.throttle input{width:100%;-webkit-appearance:none;appearance:none;height:34px;background:transparent;cursor:pointer;margin:0}
.throttle input::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(90deg,rgba(127,227,255,.35),rgba(255,181,71,.45));border:1px solid var(--line2)}
.throttle input::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(90deg,rgba(127,227,255,.35),rgba(255,181,71,.45));border:1px solid var(--line2)}
.throttle input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:34px;margin-top:-14px;border-radius:6px;background:linear-gradient(#ffe0a8,#ffb547);border:1px solid #6b4a12;box-shadow:0 0 14px rgba(255,181,71,.55),inset 0 -6px 0 rgba(0,0,0,.18)}
.throttle input::-moz-range-thumb{width:22px;height:34px;border-radius:6px;background:linear-gradient(#ffe0a8,#ffb547);border:1px solid #6b4a12;box-shadow:0 0 14px rgba(255,181,71,.55)}
.throttle input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px;border-radius:8px}
.throttle-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;color:var(--faint);padding:0 4px}
.readout{display:flex;align-items:center;gap:10px}
#num{flex:1;min-width:0;width:100%;font-family:var(--mono);font-weight:700;font-size:30px;letter-spacing:.04em;color:var(--amber);background:#03050a;border:1px solid var(--line2);border-radius:12px;padding:8px 12px;text-align:right;text-shadow:0 0 12px rgba(255,181,71,.5)}
#num:focus{outline:none;border-color:var(--amber)}
.unit{font-family:var(--mono);color:var(--dim);font-size:13px;margin-left:-4px}
.engage{font-family:var(--ui);font-weight:700;letter-spacing:.2em;font-size:15px;padding:0 22px;height:54px;border-radius:12px;border:1px solid #ffcf85;background:linear-gradient(#ffc76b,#f39a1e);color:#1d1203;cursor:pointer;box-shadow:0 0 22px rgba(255,160,40,.35);transition:transform .1s,filter .2s}
.engage:hover{filter:brightness(1.08)}
.engage:active{transform:translateY(1px)}
.engage:disabled{filter:grayscale(1) brightness(.55);cursor:not-allowed;box-shadow:none}
.engage.wide{width:100%}
.controls.off{display:none}

/* reveal */
.reveal{margin-top:14px;padding:18px;border-radius:18px;border:1px solid var(--line2);background:var(--glass);animation:lnIn .6s ease-out both}
.rv-rank{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--amber)}
.rv-big{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
.rv-big strong{font-size:46px;line-height:1;font-weight:700;color:var(--text)}
.rv-big span{color:var(--dim);font-family:var(--mono);font-size:13px}
.rv-year{font-family:var(--mono);color:var(--cyan);font-size:13px}
.rv-fact{font-size:16px;line-height:1.5;margin:12px 0 16px;color:#cdd7f3}
.rv-row{display:flex;gap:8px;flex-wrap:wrap}
.ghost{height:46px;padding:0 16px;border-radius:12px;border:1px solid var(--line2);background:var(--glass2);cursor:pointer;font-weight:600;letter-spacing:.12em;font-size:13px}
.ghost:hover{border-color:var(--cyan)}
.reveal .engage{height:46px;font-size:13px}

/* ---------- logbook / comms / manual ---------- */
.ptitle{font-size:13px;font-family:var(--mono);font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--amber);margin:6px 0 16px}
.psub{font-size:12px;font-family:var(--mono);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:28px 0 12px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{border:1px solid var(--line);border-radius:14px;background:var(--glass);padding:14px 10px;text-align:center}
.stat strong{display:block;font-size:30px;font-weight:700;line-height:1}
.stat span{display:block;margin-top:6px;font-size:11px;color:var(--dim);letter-spacing:.06em}
.dist{display:grid;gap:6px}
.drow{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;color:var(--dim)}
.dbar{height:22px;border-radius:5px;background:rgba(127,227,255,.14);min-width:26px;display:flex;align-items:center;justify-content:flex-end;padding:0 8px;color:var(--text);font-size:11.5px;transition:width .8s cubic-bezier(.3,.8,.3,1)}
.dbar.today{background:linear-gradient(90deg,rgba(255,181,71,.35),rgba(255,181,71,.7));color:#1d1203;font-weight:700}
.next{margin-top:28px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 16px;border-radius:14px;border:1px dashed var(--line2);font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--dim)}
.next strong{font-size:22px;color:var(--cyan);letter-spacing:.06em;font-weight:500}
.pnote{color:var(--dim);margin:0 0 14px;line-height:1.5}
.sharebox{font-family:var(--mono);font-size:16px;line-height:1.6;background:#03050a;border:1px solid var(--line2);border-radius:14px;padding:16px;margin:0 0 14px;min-height:110px;white-space:pre-wrap;color:var(--text)}
.sharebox:empty::before{content:"// channel closed";color:var(--faint)}
.toast{font-family:var(--mono);font-size:12px;color:var(--green);min-height:18px;margin:10px 0 0;text-align:center}
.manual p,.manual li{line-height:1.6;color:#cdd7f3;font-size:15.5px}
.manual .lead{font-size:20px;color:var(--text);font-weight:500;line-height:1.4;margin-top:0}
.manual ol{padding-left:22px}
.manual li{margin:4px 0}
.ranks{margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ranks div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--glass)}
.ranks dt{font-family:var(--mono);font-size:11px;color:var(--amber);letter-spacing:.1em}
.ranks dd{margin:4px 0 0;font-weight:600}
.fine{font-size:13px!important;color:var(--dim)!important}

/* ---------- overlays ---------- */
.intro{position:fixed;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none;background:radial-gradient(circle,transparent 30%,rgba(0,0,0,.6));transition:opacity .8s}
.intro.done{opacity:0}
.intro-text{font-family:var(--mono);font-size:12px;letter-spacing:.4em;color:var(--cyan);opacity:.8;margin-top:40vh}
body.introing #ship{opacity:0}
.starmap{position:fixed;inset:0;z-index:30;background:radial-gradient(ellipse at center,rgba(5,8,18,.95),rgba(2,3,8,.99));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;animation:fadeIn .5s both}
#mapSvg{width:min(100%,1000px);height:auto;max-height:62vh;overflow:visible}
.map-caption{font-family:var(--mono);font-size:13px;color:var(--dim);text-align:center;max-width:560px;line-height:1.6;opacity:0;transition:opacity .8s}
.map-caption.on{opacity:1}
.map-caption strong{color:var(--green);font-size:18px;display:block;margin-bottom:4px;letter-spacing:.06em}
#mapClose{opacity:0;transition:opacity .6s}
#mapClose.on{opacity:1}
.flash{position:fixed;inset:0;z-index:40;background:#fff;pointer-events:none;animation:flash .7s ease-out both}
.lost{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(0,0,0,.0);animation:lostBg 2.6s ease-in both}
.lost-inner{text-align:center;padding:16px}
.lost-big{font-family:var(--mono);font-weight:700;font-size:clamp(30px,9vw,64px);letter-spacing:.3em;color:var(--red);text-shadow:0 0 30px rgba(255,93,93,.6);animation:flicker 2.2s steps(1) 1.1s both}
.lost-small{font-family:var(--mono);color:var(--dim);margin:14px 0 22px;font-size:13px;line-height:1.6;opacity:0;animation:fadeIn 1s 2.2s both}
.lost .engage{opacity:0;animation:fadeIn 1s 2.6s both}
#ship.drift{animation:drift 2.8s ease-in forwards}
#ship.jolt{animation:jolt .45s cubic-bezier(.36,.07,.19,.97)}

/* ---------- keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{50%{opacity:.15}}
@keyframes glitch{0%{transform:translate(2px,0);filter:hue-rotate(40deg)}50%{transform:translate(-2px,1px)}100%{transform:none}}
@keyframes scopeBoot{0%{opacity:0}10%{opacity:.8}14%{opacity:.1}22%{opacity:.9}26%{opacity:.3}34%{opacity:1}}
@keyframes alert{0%{box-shadow:0 0 0 6px rgba(120,20,20,.8),0 0 60px rgba(255,60,60,.6);border-color:var(--red)}100%{box-shadow:0 0 0 6px rgba(20,30,52,.55),0 20px 60px rgba(0,0,0,.5)}}
@keyframes jolt{10%,90%{transform:translate(-1px,1px)}20%,80%{transform:translate(3px,-1px)}30%,50%,70%{transform:translate(-5px,2px) rotate(-.3deg)}40%,60%{transform:translate(5px,-2px) rotate(.3deg)}}
@keyframes drop{from{transform:translate(-50%,-26px);opacity:0}to{transform:translate(-50%,0);opacity:1}}
@keyframes lnIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes boot{0%{opacity:.4;box-shadow:0 0 0 rgba(255,181,71,0)}20%{opacity:1}25%{opacity:.3}35%{opacity:1;box-shadow:0 0 40px rgba(255,181,71,.55)}100%{box-shadow:0 0 22px rgba(255,181,71,.12) inset}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
@keyframes drift{to{transform:translate(-30px,40px) rotate(-4deg) scale(.94);opacity:.04;filter:blur(4px)}}
@keyframes lostBg{to{background:rgba(2,3,8,.9)}}
@keyframes flicker{0%{opacity:0}5%{opacity:1}8%{opacity:.2}12%{opacity:1}40%{opacity:.6}42%{opacity:1}}

@media (max-width:520px){
  .brand-name{font-size:13px;letter-spacing:.18em}
  .module{min-height:0;padding:9px 10px}
  .m-name{font-size:9px;letter-spacing:.08em}
  .m-val{font-size:11.5px}
  .module.on .m-val{font-size:14px}
  .module[data-i="2"].on{grid-column:1/-1}
  .scope{min-height:0;padding:16px 16px 14px}
  .transmission{margin:12px 0 14px}
  .computer{font-size:12px;margin-top:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .console button{font-size:9.5px;letter-spacing:.1em}
  #num{font-size:26px}
  .engage{padding:0 16px}
  .ranks{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}