/* ============================================================================
   MarsTalk — styles
   ========================================================================== */
:root{
  --bg:#05070f; --bg2:#0a1020;
  --glass:rgba(12,18,34,.74); --glass-brd:rgba(120,160,230,.20);
  --ink:#e8eef7; --mute:#9fb0c8; --faint:#6b7a92;
  --earth:#4a90e2; --earth-lt:#7db6ff;
  --mars:#e0623a; --mars-lt:#ff8159;
  --light:#6fe3ff;            /* radio / light path */
  --aim:#ffcf5a;              /* where Mars will be  */
  --rocket:#8cff9e;           /* rocket trajectory   */
  --ok:#73e8a0;
  --shadow:0 10px 40px rgba(0,0,0,.55);
  --r:14px;
  font-synthesis:none;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow:hidden; background:radial-gradient(120% 120% at 70% 10%,var(--bg2),var(--bg) 60%);
  color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; user-select:none;
}
#stage{position:fixed; inset:0; z-index:0}
#stage canvas{display:block}

button{font-family:inherit; cursor:pointer; color:var(--ink); border:none; background:none}
.panel{
  position:fixed; z-index:10; background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:var(--r); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:var(--shadow); padding:14px 16px;
}
.panel-h{margin:0 0 6px; font-size:14px; letter-spacing:.3px; font-weight:650}
.panel-note{margin:0 0 10px; font-size:11.5px; line-height:1.45; color:var(--mute)}

/* ---- Loading ---- */
#loading{position:fixed; inset:0; z-index:40; display:flex; gap:14px; align-items:center; justify-content:center;
  flex-direction:column; color:var(--mute); background:var(--bg); transition:opacity .6s; font-size:14px}
#loading.gone{opacity:0; pointer-events:none}
.spinner{width:40px; height:40px; border-radius:50%; border:3px solid rgba(255,255,255,.12); border-top-color:var(--mars); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Brand ---- */
#brand{position:fixed; z-index:11; top:16px; left:20px; display:flex; align-items:center; gap:11px; pointer-events:none}
#brand .logo{width:40px; height:40px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.brand-name{font-size:22px; font-weight:750; letter-spacing:.2px; line-height:1}
.brand-name .accent{color:var(--mars-lt)}
.brand-sub{display:block; font-size:11px; color:var(--mute); margin-top:3px; letter-spacing:.2px}
.brand-txt{display:flex; flex-direction:column}

/* ---- Stat chips ---- */
#stats{position:fixed; z-index:10; top:18px; left:50%; transform:translateX(-50%);
  display:flex; gap:9px; flex-wrap:wrap; justify-content:center; max-width:62vw}
.chip{display:flex; align-items:center; gap:9px; background:var(--glass); border:1px solid var(--glass-brd);
  border-radius:12px; padding:8px 13px 8px 11px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:var(--shadow); min-width:120px}
.chip-ic{font-size:17px; opacity:.95}
.chip-val{display:block; font-size:15px; font-weight:700; line-height:1.15; font-variant-numeric:tabular-nums}
.chip-lbl{display:block; font-size:10px; color:var(--mute); margin-top:2px; letter-spacing:.2px; white-space:nowrap}
#chipLight .chip-val{color:var(--light)}
#chipRocket .chip-val{color:var(--rocket)}
#chipRate .chip-val{color:var(--earth-lt)}
.chip.flash{animation:flash .5s}
@keyframes flash{0%{background:rgba(111,227,255,.22)}100%{background:var(--glass)}}

/* ---- DSN panel ---- */
#dsnPanel{left:20px; top:104px; width:248px}
#dsnList{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.dsn-item{display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:9px;
  background:rgba(255,255,255,.03); border:1px solid transparent; transition:.25s}
.dsn-item.active{background:rgba(111,227,255,.10); border-color:rgba(111,227,255,.35); box-shadow:0 0 16px rgba(111,227,255,.12) inset}
.dsn-led{width:9px; height:9px; border-radius:50%; background:#33415c; flex:none; transition:.25s}
.dsn-item.active .dsn-led{background:var(--light); box-shadow:0 0 9px var(--light)}
.dsn-name{font-size:12.5px; font-weight:620}
.dsn-meta{font-size:10.5px; color:var(--mute)}
.dsn-tx{margin-left:auto; font-size:10px; color:var(--light); opacity:0; transition:.25s; white-space:nowrap}
.dsn-item.active .dsn-tx{opacity:.95}
.dsn-foot{margin-top:11px; padding-top:10px; border-top:1px solid var(--glass-brd); display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--mute)}
.dsn-foot strong{color:var(--ink); font-weight:600}

/* ---- Messenger ---- */
#messenger{top:16px; right:20px; width:300px; max-height:calc(100vh - 150px); display:flex; flex-direction:column}
.dir{display:flex; gap:6px; margin-bottom:9px; background:rgba(0,0,0,.25); padding:4px; border-radius:11px}
.dir-btn{flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:7px 4px; border-radius:8px;
  font-size:11.5px; font-weight:600; color:var(--mute); transition:.2s}
.dir-btn.active{background:rgba(255,255,255,.08); color:var(--ink); box-shadow:0 1px 6px rgba(0,0,0,.3)}
.dot{width:8px; height:8px; border-radius:50%}
.dot.earth{background:var(--earth)} .dot.mars{background:var(--mars)}
#msgInput{width:100%; resize:none; background:rgba(0,0,0,.28); border:1px solid var(--glass-brd); color:var(--ink);
  border-radius:10px; padding:9px 11px; font-size:13px; font-family:inherit; line-height:1.4}
#msgInput:focus{outline:none; border-color:var(--earth)}
.msg-row{display:flex; align-items:center; justify-content:space-between; margin-top:9px}
.hint{font-size:11px; color:var(--mute)}
#sendBtn{background:linear-gradient(135deg,var(--earth),#3a6fb8); padding:8px 16px; border-radius:9px; font-weight:650; font-size:13px;
  box-shadow:0 4px 14px rgba(74,144,226,.35); transition:.18s}
#sendBtn:hover{filter:brightness(1.1)} #sendBtn:active{transform:translateY(1px)}
#sendBtn:disabled{opacity:.5; cursor:not-allowed}
body.dir-m2e #sendBtn{background:linear-gradient(135deg,var(--mars),#b54327); box-shadow:0 4px 14px rgba(224,98,58,.35)}

#msgLog{margin-top:12px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:2px}
#msgLog::-webkit-scrollbar{width:6px} #msgLog::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:3px}
.bubble{border-radius:10px; padding:8px 11px; font-size:12.5px; line-height:1.4; position:relative; border:1px solid transparent}
.bubble .who{font-size:9.5px; letter-spacing:.4px; text-transform:uppercase; opacity:.75; margin-bottom:3px; display:flex; gap:6px; align-items:center}
.bubble.e2m{background:rgba(74,144,226,.12); border-color:rgba(74,144,226,.28); align-self:flex-start}
.bubble.m2e{background:rgba(224,98,58,.12); border-color:rgba(224,98,58,.28); align-self:flex-end}
.bubble .stamp{font-size:10px; color:var(--mute); margin-top:4px}
.bubble.flight{border-style:dashed}
.flight-clock{font-variant-numeric:tabular-nums; color:var(--light); font-weight:650}
.prog{height:3px; border-radius:2px; background:rgba(255,255,255,.12); margin-top:6px; overflow:hidden}
.prog>i{display:block; height:100%; width:0; background:var(--light); box-shadow:0 0 8px var(--light); transition:width .12s linear}
.bubble .ok{color:var(--ok); font-weight:650}

/* ---- Legend ---- */
#legend{position:fixed; z-index:10; left:20px; bottom:96px; display:flex; flex-direction:column; gap:5px;
  background:var(--glass); border:1px solid var(--glass-brd); border-radius:10px; padding:9px 12px; font-size:11px; color:var(--mute);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
#legend span{display:flex; align-items:center; gap:8px}
.ln{width:18px; height:0; border-top:2px solid; display:inline-block}
.ln.light{border-color:var(--light)}
.ln.aim{border-top-style:dashed; border-color:var(--aim)}
.ln.rocket{border-color:var(--rocket)}

/* ---- Timeline ---- */
#timeline{position:fixed; z-index:12; left:0; right:0; bottom:0; display:flex; align-items:center; gap:18px;
  padding:14px 22px 16px; background:linear-gradient(to top,rgba(5,7,15,.92),rgba(5,7,15,.55) 70%,transparent);
  pointer-events:none}
#timeline>*{pointer-events:auto}
.tl-left,.tl-right{display:flex; align-items:center; gap:10px; flex:none}
.tl-center{flex:1; display:flex; flex-direction:column; gap:6px; min-width:0}
#timeline button{background:rgba(255,255,255,.07); border:1px solid var(--glass-brd); border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:600; transition:.18s}
#timeline button:hover{background:rgba(255,255,255,.13)}
#todayBtn{color:var(--mars-lt)}
#playBtn{width:40px; font-size:14px}
#playBtn.playing{background:rgba(140,255,158,.16); color:var(--rocket); border-color:rgba(140,255,158,.4)}
#launchBtn{background:linear-gradient(135deg,#2a3550,#1a2238); border-color:rgba(140,255,158,.3); color:var(--rocket)}
#launchBtn:hover{box-shadow:0 0 18px rgba(140,255,158,.2)}
#launchBtn:disabled{opacity:.55; cursor:wait}
.speed{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--mute)}
.speed select{background:rgba(255,255,255,.07); color:var(--ink); border:1px solid var(--glass-brd); border-radius:8px; padding:6px 7px; font-size:11.5px; font-family:inherit}

/* range slider with closeness heatmap track */
#timeSlider{--tl-grad:linear-gradient(90deg,#1b2233,#2a3958); -webkit-appearance:none; appearance:none; width:100%; height:10px;
  border-radius:6px; background:var(--tl-grad); border:1px solid var(--glass-brd); outline:none; cursor:pointer}
#timeSlider::-webkit-slider-thumb{-webkit-appearance:none; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--mars); box-shadow:0 0 12px rgba(255,129,89,.7), 0 2px 6px rgba(0,0,0,.5); cursor:grab; margin-top:-1px}
#timeSlider::-webkit-slider-thumb:active{cursor:grabbing}
#timeSlider::-moz-range-thumb{width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--mars); box-shadow:0 0 12px rgba(255,129,89,.7); cursor:grab}
#timeSlider::-moz-range-track{height:10px; border-radius:6px; background:var(--tl-grad)}
.tl-readout{display:flex; align-items:baseline; gap:10px; font-size:12px; color:var(--mute)}
#tlDate{font-size:14px; font-weight:680; color:var(--ink); font-variant-numeric:tabular-nums}
.tl-rel{color:var(--mars-lt)}
.tl-state{margin-left:auto; font-weight:600}
.tl-state.close{color:var(--light)} .tl-state.far{color:var(--faint)}

/* ---- Intro modal ---- */
.modal{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center;
  background:rgba(3,5,11,.66); backdrop-filter:blur(6px); transition:opacity .4s}
.modal.gone{opacity:0; pointer-events:none}
.modal-card{position:relative; width:min(520px,92vw); background:linear-gradient(160deg,rgba(20,28,48,.96),rgba(10,14,26,.96));
  border:1px solid var(--glass-brd); border-radius:20px; padding:30px 32px; box-shadow:var(--shadow)}
.modal-card h1{margin:0 0 12px; font-size:26px; font-weight:750}
.modal-card h1 strong{color:var(--mars-lt)}
.modal-card p{margin:0 0 14px; font-size:14px; line-height:1.6; color:var(--mute)}
.modal-card ul{margin:0 0 22px; padding-left:20px; font-size:13.5px; line-height:1.7; color:var(--mute)}
.modal-card li b{color:var(--ink); font-weight:620}
.modal-card .earth-t{color:var(--earth-lt); font-weight:600} .modal-card .mars-t{color:var(--mars-lt); font-weight:600}
#introGo{background:linear-gradient(135deg,var(--mars),#b54327); padding:11px 22px; border-radius:11px; font-weight:680; font-size:14px;
  box-shadow:0 6px 20px rgba(224,98,58,.4)}
#introGo:hover{filter:brightness(1.08)}
.modal-x{position:absolute; top:14px; right:16px; font-size:18px; color:var(--mute); width:30px; height:30px; border-radius:8px}
.modal-x:hover{background:rgba(255,255,255,.08); color:var(--ink)}

/* ---- Toast ---- */
#toast{position:fixed; z-index:60; left:50%; bottom:96px; transform:translate(-50%,20px); opacity:0;
  background:rgba(20,28,48,.95); border:1px solid var(--glass-brd); border-radius:11px; padding:11px 18px;
  font-size:13px; box-shadow:var(--shadow); transition:.35s; pointer-events:none; max-width:80vw; text-align:center}
#toast.show{opacity:1; transform:translate(-50%,0)}

/* ---- Rocket flight control + HUD ---- */
.xfer{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--mute)}
.xfer select,.win-xfer select{background:rgba(255,255,255,.07); color:var(--ink); border:1px solid var(--glass-brd); border-radius:8px; padding:6px 8px; font-size:11.5px; font-family:inherit}
.win-xfer{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:4px 0 12px}
.win-xfer label{font-size:12px; color:var(--mute)}
.win-xfer-note{font-size:11px; color:var(--faint)}
#rocketHud{position:fixed; z-index:30; left:50%; bottom:118px; transform:translateX(-50%);
  display:flex; align-items:center; gap:13px; background:var(--glass); border:1px solid rgba(140,255,158,.4);
  border-radius:13px; padding:11px 18px; box-shadow:0 8px 30px rgba(0,0,0,.5), 0 0 22px rgba(140,255,158,.12);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
#rocketHud.hidden{display:none}
.rkt-ic{font-size:22px}
.rkt-info{display:flex; flex-direction:column; gap:6px; min-width:240px}
.rkt-line{display:flex; justify-content:space-between; gap:18px; font-size:12.5px; align-items:baseline}
#rktProg{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}
#rktFactor{color:var(--rocket); font-weight:700; font-variant-numeric:tabular-nums}
.rkt-bar{height:4px; border-radius:2px; background:rgba(255,255,255,.13); overflow:hidden}
.rkt-bar>i{display:block; height:100%; width:0; background:var(--rocket); box-shadow:0 0 8px var(--rocket); transition:width .1s linear}
.rkt-info{max-height:40vh; overflow-y:auto}
.rkt-head{font-size:12.5px; font-weight:650; color:var(--ink); margin-bottom:6px}
.rkt-row{display:grid; grid-template-columns:1fr auto; gap:1px 10px; align-items:baseline; margin-top:7px}
.rkt-day{font-size:11.5px; color:var(--ink); font-variant-numeric:tabular-nums}
.rkt-sp{font-size:10.5px; color:var(--light); font-variant-numeric:tabular-nums; text-align:right}
.rkt-row .rkt-bar{grid-column:1 / -1; margin-top:3px}
.rkt-more{font-size:10.5px; color:var(--mute); margin-top:6px}

/* ---- Launch windows table ---- */
#windowsBtn{background:rgba(255,255,255,.07); border:1px solid var(--glass-brd); border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:600; color:var(--earth-lt); transition:.18s}
#windowsBtn:hover{background:rgba(74,144,226,.16); box-shadow:0 0 14px rgba(74,144,226,.18)}
.win-card{width:min(640px,95vw)}
.win-card h1{font-size:22px; margin-bottom:8px}
.win-row{display:grid; grid-template-columns:1.25fr 1.25fr .6fr 1.5fr auto; gap:10px; align-items:center; padding:9px 10px}
.win-head{font-size:10.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--mute); border-bottom:1px solid var(--glass-brd); padding-bottom:8px; margin-top:6px}
.win-list{max-height:46vh; overflow-y:auto; margin-top:2px; padding-right:2px}
.win-list::-webkit-scrollbar{width:7px} .win-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:4px}
.win-item{border-radius:10px; border:1px solid transparent; transition:.16s; cursor:pointer}
.win-item:hover{background:rgba(255,255,255,.06); border-color:var(--glass-brd)}
.win-item.best{background:rgba(140,255,158,.08); border-color:rgba(140,255,158,.3)}
.wl-date{font-weight:650; color:var(--ink); font-variant-numeric:tabular-nums}
.wl-arr,.wl-trip{color:var(--mute); font-size:12.5px; font-variant-numeric:tabular-nums}
.wl-dv{display:flex; align-items:center; gap:8px; color:var(--mute); font-size:12.5px; font-variant-numeric:tabular-nums}
.dvbar{height:6px; border-radius:3px; min-width:8px; display:inline-block; flex:none}
.win-best-tag{font-size:9px; color:var(--rocket); border:1px solid rgba(140,255,158,.45); border-radius:5px; padding:1px 5px; margin-left:7px; vertical-align:middle; letter-spacing:.3px}
.wl-jump{background:linear-gradient(135deg,var(--mars),#b54327); color:#fff; padding:6px 13px; border-radius:8px; font-size:12px; font-weight:650; white-space:nowrap}
.wl-jump:hover{filter:brightness(1.1)} .wl-jump:active{transform:translateY(1px)}
.win-foot{font-size:10.5px; color:var(--faint); margin:12px 0 0; line-height:1.45}

/* ---- Hover tooltip (planets / Sun / rocket) ---- */
#hoverTip{position:fixed; z-index:55; left:0; top:0; max-width:300px; opacity:0; pointer-events:none;
  background:rgba(9,13,24,.96); border:1px solid var(--glass-brd); border-radius:12px; padding:11px 13px;
  box-shadow:var(--shadow); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-size:12px; line-height:1.5; transition:opacity .12s}
#hoverTip.show{opacity:1}
.tip-title{font-size:14px; font-weight:700; margin-bottom:6px; display:flex; align-items:center; gap:8px}
.tip-dot{width:11px; height:11px; border-radius:50%; flex:none; box-shadow:0 0 8px currentColor}
.tip-rows{display:grid; grid-template-columns:auto 1fr; gap:3px 12px; margin:4px 0}
.tip-rows .k{color:var(--mute); white-space:nowrap}
.tip-rows .v{color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.tip-blurb{color:var(--mute); font-size:11.5px; margin-top:7px}
.tip-note{color:var(--faint); font-size:10px; margin-top:8px; font-style:italic}
.tip-live{color:var(--rocket); font-weight:650; margin-top:8px; font-variant-numeric:tabular-nums; border-top:1px solid var(--glass-brd); padding-top:7px}
.rkt-speed-line{font-size:11.5px; color:var(--light); font-variant-numeric:tabular-nums}

/* ---- Responsive ---- */
@media (max-width:980px){
  #stats{max-width:none; left:auto; right:20px; top:64px; transform:none; justify-content:flex-end}
  #messenger{top:auto; bottom:150px; max-height:42vh}
  .chip-lbl{display:none}
}
@media (max-width:680px){
  #dsnPanel,#legend,.rkt-speed label{display:none}
  #stats{position:fixed; top:60px; right:12px}
  #messenger{width:min(300px,calc(100vw - 24px)); right:12px}
}