/* HUD chrome: an original navigation-console look (thin rules, uppercase tracked labels,
   glass panels with a coloured header band, corner ticks). */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--void);color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.5;overflow:hidden;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
p{margin:0}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--moho);outline-offset:3px;border-radius:3px}

/* layers */
#space-bg{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(60% 50% at 78% 58%, rgba(63,182,139,.10), transparent 70%),
    radial-gradient(40% 40% at 20% 20%, rgba(125,183,255,.07), transparent 70%),
    radial-gradient(50% 45% at 95% 10%, rgba(224,114,80,.08), transparent 70%),
    var(--void)}
#space{position:fixed;inset:0;width:100%;height:100%;z-index:1;display:block;transition:opacity .8s var(--ease)}
body.map-on #space{pointer-events:none}
/* the map fades in over the space dive and out over the climb back */
#map{position:fixed;inset:0;z-index:2;transition:opacity 1s var(--ease)}
#map.away{opacity:0;pointer-events:none}
#map-vignette{transition:opacity 1s var(--ease)}
#map-vignette.away{opacity:0}
#map-vignette{position:fixed;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(4,6,10,.75) 100%),
             linear-gradient(to bottom, rgba(4,6,10,.65), transparent 14%, transparent 86%, rgba(4,6,10,.7))}
#view{position:fixed;inset:0;z-index:5;pointer-events:none;outline:none}
#view > *{pointer-events:none}
#view .live, #view .live *{pointer-events:auto}

/* top bar */
.hud-top{position:fixed;z-index:10;left:0;right:0;top:0;display:flex;align-items:center;gap:22px;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(20px, env(safe-area-inset-right,0px)) 14px max(20px, env(safe-area-inset-left,0px));
  background:linear-gradient(to bottom, rgba(4,6,10,.85), rgba(4,6,10,0))}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:12.5px;white-space:nowrap}
.brand-mark{width:20px;height:20px;border-radius:50%;flex:none;
  background:linear-gradient(to bottom, var(--accent) 0 47%, var(--moho) 47% 53%, var(--earth) 53% 100%);transition:background .6s}
.crumbs{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-width:0;overflow:hidden;white-space:nowrap}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--fg)}
.crumbs .sep{color:var(--faint)}
.crumbs .here{color:var(--fg)}
.hud-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.mission{display:flex;gap:2px;padding:3px;border:1px solid var(--hair);border-radius:8px;background:rgba(10,12,16,.6);backdrop-filter:blur(8px)}
.mission button{border:0;background:transparent;padding:6px 11px;border-radius:6px;cursor:pointer;display:flex;align-items:center;gap:7px;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.mission button i{width:7px;height:7px;transform:rotate(45deg);background:var(--mars);display:block}
.mission button[data-m="moon_base"] i{background:var(--ice)}
.mission button[data-m="mars_sedimentary"] i{background:var(--ochre)}
.mission button[aria-checked="true"]{background:rgba(233,230,223,.1);color:var(--fg);box-shadow:inset 0 -2px 0 var(--accent)}
.mission button:hover{color:var(--fg)}
.mock-flag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--moho);
  border:1px dashed rgba(242,196,109,.6);padding:3px 8px;border-radius:999px;white-space:nowrap}

/* bottom bar */
.hud-bottom{position:fixed;z-index:10;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px max(20px, env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px));
  background:linear-gradient(to top, rgba(4,6,10,.85), rgba(4,6,10,0));pointer-events:none}
.hud-bottom > *{pointer-events:auto}
.menu{display:flex;gap:4px}
.menu a{text-decoration:none;font-family:var(--f-display);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:6px 10px;border-radius:4px}
.menu a:hover{color:var(--fg)}
.menu a[aria-current="page"]{color:var(--fg);box-shadow:inset 0 -2px 0 var(--moho)}
.keys{display:flex;gap:16px;font-size:12px;color:var(--muted);letter-spacing:.06em}
.keys kbd{font-family:var(--f-mono);font-size:11px;border:1px solid var(--hair);border-bottom-width:2px;border-radius:4px;padding:1px 6px;margin-right:6px;color:var(--fg);background:rgba(233,230,223,.06)}
.hud-bottom-right{display:flex;align-items:center;gap:18px}
.fx-btn{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);background:transparent;
  border:1px solid var(--hair);border-radius:999px;padding:4px 10px;cursor:pointer;white-space:nowrap}
.fx-btn b{font-weight:500;color:var(--fg)}
.fx-btn[aria-pressed="true"] b{color:var(--moho)}
.fx-btn:hover{border-color:var(--moho)}

/* panels */
.panel{position:relative;background:var(--glass);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid var(--hair);border-radius:4px}
.panel.ticks::before,.panel.ticks::after{content:"";position:absolute;width:12px;height:12px;border-color:var(--moho);border-style:solid;pointer-events:none}
.panel.ticks::before{top:-1px;left:-1px;border-width:2px 0 0 2px}
.panel.ticks::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hair)}
.panel-title{font-family:var(--f-display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;display:flex;align-items:center;gap:10px}
.panel-title::before{content:"";width:3px;height:14px;background:var(--accent);display:block}
.panel-body{padding:14px 16px}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* destination card (hover) */
.dcard{position:fixed;z-index:12;width:320px;max-width:calc(100vw - 32px);pointer-events:none;
  background:var(--glass-2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--hair);border-radius:3px;overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55);opacity:0;transform:translateY(6px);transition:opacity .18s, transform .18s var(--ease)}
.dcard.on{opacity:1;transform:none}
.dcard .band{--wc:var(--accent);padding:14px 16px 12px;background:linear-gradient(to bottom, color-mix(in oklab, var(--wc) 30%, transparent), color-mix(in oklab, var(--wc) 8%, transparent));
  border-top:2px solid var(--wc)}
.dcard .band h3{font-size:24px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.05}
.dcard .band p{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:5px}
.dcard .body{padding:12px 16px;display:grid;gap:8px}
.dcard .kv{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.dcard .kv span:first-child{color:var(--muted)}
.dcard .kv span:last-child{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.dcard .blurb{font-size:13px;color:var(--fg);opacity:.9}
.dcard .foot{padding:10px 16px;border-top:1px solid var(--hair);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--moho);font-family:var(--f-display);font-weight:600}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--hair);background:rgba(233,230,223,.06);padding:10px 16px;border-radius:3px;cursor:pointer;
  font-family:var(--f-display);font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;color:var(--fg)}
.btn:hover{border-color:var(--moho);background:rgba(242,196,109,.08)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.primary:hover{background:var(--moho);border-color:var(--moho)}
.btn kbd{font-family:var(--f-mono);font-size:10.5px;border:1px solid currentColor;border-radius:3px;padding:0 5px;opacity:.7}

/* Moho line */
.moho{height:1px;background:var(--moho);border:0;margin:0;box-shadow:0 0 12px rgba(242,196,109,.6), 0 0 2px var(--moho)}

/* reticle cursor (fine pointers only) */
#reticle{position:fixed;z-index:30;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;border:1px solid rgba(233,230,223,.55);border-radius:50%;
  pointer-events:none;opacity:0;transition:opacity .2s, width .2s, height .2s, margin .2s, border-color .2s}
#reticle::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--fg)}
body.reticle-on #reticle{opacity:1}
body.reticle-hot #reticle{width:40px;height:40px;margin:-20px 0 0 -20px;border-color:var(--moho)}
@media (hover:hover) and (pointer:fine){ body.reticle-on{cursor:none} body.reticle-on .live{cursor:auto} }

/* tooltip + toast */
#tip{position:fixed;z-index:40;pointer-events:none;background:var(--glass-2);backdrop-filter:blur(10px);border:1px solid var(--hair);border-radius:3px;
  padding:8px 10px;font-size:12.5px;line-height:1.4;max-width:280px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
#tip b{font-weight:600}
#toast{position:fixed;z-index:40;left:50%;bottom:72px;transform:translate(-50%, 12px);opacity:0;transition:opacity .25s, transform .25s var(--ease);
  background:var(--glass-2);border:1px solid var(--hair);border-top:2px solid var(--accent);padding:10px 16px;border-radius:3px;font-family:var(--f-display);
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:760px){
  .crumbs{display:none}
  .brand-name{font-size:11.5px;padding:3px 7px 3px 9px}
  .mission button{padding:6px 8px;font-size:11px}
  .keys{display:none}
  .hud-bottom{justify-content:center}
}
@media (max-width:520px){ .fx-btn{display:none} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0s !important;animation:none !important}
}
.menu .mshort{display:none}
@media (max-width:820px){ .menu .mlong{display:none} .menu .mshort{display:inline} }
@media (max-width:600px){ .menu{overflow-x:auto;scrollbar-width:none;max-width:100vw} .menu::-webkit-scrollbar{display:none} .menu a{flex:none} }

/* inside the presentation (present/ live slides): the deck's own buttons sit bottom-right */
.framed .hud-bottom-right{visibility:hidden}

/* brand: the UBAR name in a gold frame, with the gold planet-and-orbit logo */
.brand-logo{width:28px;height:28px;flex:none;filter:drop-shadow(0 0 6px rgba(242,196,109,.25))}
.brand-name{color:var(--moho);border:1.5px solid var(--moho);border-radius:4px;padding:4px 9px 4px 12px;letter-spacing:.34em;font-weight:700;font-size:13px;line-height:1;
  background:linear-gradient(180deg, rgba(242,196,109,.12), rgba(242,196,109,.02));box-shadow:0 0 12px rgba(242,196,109,.18), inset 0 0 8px rgba(242,196,109,.08)}
.brand:hover .brand-name{background:rgba(242,196,109,.18)}
@media (max-width:760px){
  .hud-top{min-width:0}
  .brand{gap:6px;flex:none}
  .brand-logo{width:24px;height:24px}
  .brand-name{font-size:10.5px;padding:3px 5px 3px 7px;letter-spacing:.26em}
  .hud-right{min-width:0;flex:1 1 auto;display:flex;justify-content:flex-end}
  .mission{min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .mission::-webkit-scrollbar{display:none}
  .mission button{flex:none}
}