/* ── THE EXPEDITION · MISSION CONTROL ─────────────────────── */
:root{
  color-scheme:dark;
  --void:#020108;
  --ink:#e9f0fb;
  --ink-dim:rgba(222,232,248,.7);
  --ink-faint:rgba(200,212,232,.4);
  --ember:#ff9c5a;
  --ice:#22d3ee;
  --nebula:#8b5cf6;
  --fd:'Marcellus',serif;
  --fu:'Space Grotesk',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--void);color:var(--ink);overflow:hidden}
body{font-family:var(--fu);font-weight:300}
a{color:inherit;text-decoration:none}

#space{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}

/* ── HEADER ───────────────────────────────────────────────── */
.exp-head{
  position:fixed;top:0;left:0;right:0;z-index:20;
  padding:1.2rem clamp(1rem,4vw,2.5rem);text-align:center;pointer-events:none;
}
.exp-head .back{
  position:absolute;left:clamp(1rem,4vw,2.5rem);top:1.35rem;
  pointer-events:auto;font-size:.8rem;letter-spacing:.12em;
  color:var(--ink-faint);transition:color .3s;
}
.exp-head .back:hover{color:var(--ember)}
.exp-head h1{
  font-family:var(--fd);font-weight:400;
  font-size:clamp(1.3rem,3vw,1.9rem);letter-spacing:.24em;
  text-shadow:0 0 30px rgba(139,92,246,.4);
}
.exp-head .hint{
  margin-top:.4rem;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);transition:opacity .8s;
}
.exp-head .hint.gone{opacity:0}

/* ── BRIEFING PANEL ───────────────────────────────────────── */
.briefing{
  position:fixed;z-index:25;
  left:clamp(1rem,4vw,3rem);bottom:clamp(1.2rem,4vh,2.5rem);
  width:min(22rem,calc(100vw - 2rem));
  padding:1.4rem 1.6rem;
  background:rgba(4,2,10,.82);backdrop-filter:blur(14px);
  border:1px solid rgba(139,92,246,.3);border-radius:18px;
  animation:briefUp .5s var(--ease);
}
.briefing[hidden]{display:none}
@keyframes briefUp{from{opacity:0;transform:translateY(18px)}to{opacity:1}}
.briefing h2{
  font-family:var(--fd);font-weight:400;font-size:1.6rem;letter-spacing:.14em;
}
.b-tag{margin-top:.3rem;font-size:.82rem;color:var(--ink-dim);line-height:1.5}
.b-stats{
  margin-top:1rem;display:flex;gap:1.2rem;flex-wrap:wrap;
}
.b-stats dt{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
}
.b-stats dd{font-size:.88rem;color:var(--ink);margin-top:.15rem}
.b-launch{margin-top:1.2rem;display:flex;gap:.6rem}
#rover-name{
  flex:1;min-width:0;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);border-radius:100px;
  padding:.65rem 1rem;color:var(--ink);font:inherit;font-size:.84rem;outline:none;
}
#rover-name:focus{border-color:var(--ice)}
.btn-fire{
  font-family:var(--fu);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.65rem 1.3rem;border-radius:100px;border:none;cursor:pointer;
  color:#1a0800;white-space:nowrap;
  background:linear-gradient(160deg,#ffd700,#ff9f00 45%,#ff6500);
  box-shadow:0 0 20px rgba(232,69,0,.4);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.btn-fire:hover{transform:translateY(-2px);box-shadow:0 0 32px rgba(232,69,0,.6)}
.btn-fire:disabled{opacity:.45;cursor:default;transform:none}
.btn-ghost{
  margin-top:.9rem;display:inline-block;background:none;cursor:pointer;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.55rem 1.2rem;border-radius:100px;color:var(--ink-dim);
  border:1px solid rgba(255,255,255,.16);font-family:var(--fu);
  transition:color .3s,border-color .3s;
}
.btn-ghost:hover{color:var(--ink);border-color:rgba(255,156,90,.5)}

/* ── TELEMETRY ────────────────────────────────────────────── */
.telemetry{
  position:fixed;z-index:25;
  right:clamp(1rem,4vw,3rem);bottom:clamp(1.2rem,4vh,2.5rem);
  width:min(21rem,calc(100vw - 2rem));
  padding:1.1rem 1.3rem;
  background:rgba(2,8,6,.82);backdrop-filter:blur(12px);
  border:1px solid rgba(34,211,238,.3);border-radius:14px;
  font-size:.8rem;
}
.telemetry[hidden]{display:none}
.tele-head{
  font-size:.64rem;letter-spacing:.3em;color:var(--ice);
  margin-bottom:.6rem;
}
.tele-head::before{
  content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--ice);margin-right:.5rem;
  box-shadow:0 0 8px var(--ice);
  animation:blink 1.1s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
#tele-lines p{
  color:var(--ink-dim);line-height:1.6;margin-top:.3rem;
  font-family:ui-monospace,'Cascadia Mono',monospace;font-size:.74rem;
}
#tele-lines p strong{color:var(--ink);font-weight:500}

/* ── NO WEBGL ─────────────────────────────────────────────── */
.no-webgl-msg[hidden]{display:none}
.no-webgl-msg{
  position:fixed;inset:0;z-index:40;display:flex;
  align-items:center;justify-content:center;text-align:center;
  padding:2rem;background:var(--void);
  font-size:1rem;color:var(--ink-dim);
}

@media(max-width:640px){
  .exp-head h1{font-size:1.05rem}
  .back-word{display:none}
  .briefing{left:50%;transform:translateX(-50%);bottom:1rem}
  @keyframes briefUp{from{opacity:0;transform:translateX(-50%) translateY(18px)}to{opacity:1;transform:translateX(-50%)}}
  .telemetry{right:50%;transform:translateX(50%);bottom:auto;top:5.4rem;max-height:34vh;overflow-y:auto}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}