/* SpaceSick — quiet, cinematic, mobile-first */

:root {
  --bg: #010309;
  --text: rgba(232, 230, 240, 0.92);
  --text-dim: rgba(208, 206, 224, 0.62);
  --text-faint: rgba(190, 190, 214, 0.42);
  --accent: #4361ee;
  --accent-deep: #3a0ca3;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", "Helvetica Neue", sans-serif;
  --pace: 1; /* tweakable pacing multiplier */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#stars {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Uranus ORBIT hero backdrop — full-bleed from-space portrait, shown only on
   Uranus's orbit view (js/uranus-orbit.js toggles display). z-index 0 keeps it
   above the starfield but BELOW #system-view (z1), so the Uranian moons + Sun
   dot render on top and stay clickable. Never intercepts input. */
#uranus-orbit-hero {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: none;
}
/* On Uranus's orbit view the from-space backdrop IS the planet, so hide the
   small procedural medallion (sphere, glow, CTA) to avoid a double sphere. It
   keeps its layout box (visibility, not display) so the copy below stays put;
   landing uses the always-present "Land on Planet" button. */
#scene-planet[data-planet-id="uranus"] .planet-stage { visibility: hidden; }

/* ---------- scenes ---------- */
.scene {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 1;
  transition: opacity 1.6s ease;
  overflow-y: auto;
  overflow-x: hidden;
}
.scene.faded { opacity: 0; pointer-events: none; }
.scene.gone { display: none; }
.scene { scrollbar-width: none; }
.scene::-webkit-scrollbar { display: none; }

/* ---------- intro ---------- */
#scene-intro {
  justify-content: center;
  text-align: center;
  padding: 8vh 28px;
  gap: 0;
}

.brand {
  position: fixed;
  top: max(28px, env(safe-area-inset-top));
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 3s ease;
  z-index: 3;
  pointer-events: none;
}
.brand.visible { opacity: 1; }

/* ---------- intro: Earth below the text ---------- */
.earth-stage {
  position: absolute;
  left: 50%;
  bottom: -56vmin;
  transform: translateX(-50%);
  width: 104vmin;
  aspect-ratio: 1;
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 5s ease;
  z-index: 0;
  --glow: rgba(100, 160, 255, 0.25);
}
.earth-stage.visible { opacity: 1; }
/* Belt-and-suspenders: the intro's blue planet-glow is a large circular accent
   glow present in the DOM at load. Keep it explicitly hidden until the stage is
   animated in (the existing .visible path), so it can never paint an
   uninitialized blue circle for a frame before JS reveals the stage. The reveal
   is instant — the parent .earth-stage's own 5s opacity fade carries the visible
   ramp, so the glow looks identical to before once shown. */
.earth-stage .planet-glow { opacity: 0; }
.earth-stage.visible .planet-glow { opacity: 1; }
.earth-stage:focus { outline: none; }
#earth { pointer-events: none; }

/* accent edge glow on hover / touch — traces the sphere's rim */
.earth-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 70px 6px rgba(90, 130, 255, 0.32),
              inset 0 0 46px rgba(120, 150, 255, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
@media (hover: hover) {
  .earth-stage:hover::after { opacity: 1; }
}

/* floating "begin journey →" near the Earth's crown */
.earth-cta {
  position: absolute;
  left: 50%;
  top: 4vmin;
  transform: translate(-50%, 0);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 3.6vw, 19px);
  letter-spacing: 0.08em;
  color: var(--accent);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
  white-space: nowrap;
}
.earth-cta .ec-arrow { transition: transform 0.5s ease; }
@media (hover: hover) {
  .earth-stage:hover .earth-cta {
    opacity: 0.95;
    transform: translate(-50%, -6px);
  }
  .earth-stage:hover .earth-cta .ec-arrow { transform: translateX(3px); }
}
#earth { filter: brightness(0.9); }
#earth {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.intro-lines, #begin { position: relative; z-index: 1; }

.intro-lines {
  display: flex;
  flex-direction: column;
  gap: clamp(26px, 5vh, 44px);
  max-width: 620px;
}
.intro-lines p {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 5.6vw, 36px);
  line-height: 1.5;
  color: var(--text);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 2.4s ease, transform 2.4s ease;
  text-wrap: pretty;
}
.intro-lines p.visible {
  opacity: 1;
  transform: translateY(0);
}
/* the rotating opening line fades in a beat slower, for gravity */
.intro-lines p.first-line {
  transition: opacity 3.4s ease, transform 3.4s ease;
}
.intro-lines p em {
  font-style: italic;
  color: #aab4f5;
}

#begin {
  margin-top: clamp(40px, 8vh, 72px);
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--text);
  background: transparent;
  border: 1px solid rgba(120, 130, 220, 0.35);
  border-radius: 999px;
  padding: 18px 54px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 2.5s ease, border-color 0.6s ease, box-shadow 0.6s ease;
  animation: none;
}
#begin.visible {
  opacity: 1;
  animation: pulse 4.5s ease-in-out infinite;
}
#begin:hover {
  border-color: rgba(140, 150, 240, 0.7);
  box-shadow: 0 0 36px rgba(67, 97, 238, 0.25);
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 rgba(67, 97, 238, 0); }
    50% { box-shadow: 0 0 42px rgba(67, 97, 238, 0.28); }
  }
}

/* ---------- planet counter (opening screen) ---------- */
.planet-counter {
  position: relative;
  z-index: 1;
  margin-top: clamp(20px, 3.5vh, 32px);
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 2s ease;
}
.planet-counter.visible { opacity: 1; }

/* ---------- rotating cosmic quote ---------- */.cosmic-quote {
  position: relative;
  z-index: 1;
  margin-top: clamp(34px, 7vh, 64px);
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 2s ease;
  pointer-events: none;
}
.cosmic-quote.visible { opacity: 1; }
.cosmic-quote .cq-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 3.4vw, 20px);
  line-height: 1.5;
  color: var(--accent);
  text-wrap: pretty;
}
.cosmic-quote .cq-author {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}
#scene-planet {
  justify-content: flex-start;
  text-align: center;
  padding: max(60px, 9vh) 26px 40px;
  /* Vertical pans scroll the scene; horizontal pans belong to the world-swipe
     handler. Without this, Android Chrome claims horizontal drags for its own
     scroll/overscroll and the swipe never reaches JS. (Inner horizontally-
     scrollable strips set their own touch-action and still work.) */
  touch-action: pan-y;
}
.planet-stage {
  position: relative;
  width: min(62vw, 300px, 36vh);
  aspect-ratio: 1;
  margin: 1vh auto 4.5vh;
  flex-shrink: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.planet-stage:focus { outline: none; }
.planet-glow {
  position: absolute;
  inset: -36%;
  border-radius: 50%;
  /* The fallback is transparent so this circular glow never paints the raw
     accent blue (#4361ee) for an uninitialized frame before JS sets the
     per-view --glow. Each view sets --glow (orbit views via showPlanet; the
     intro Earth via .earth-stage's CSS) before the glow is ever revealed. */
  background: radial-gradient(circle, var(--glow, transparent) 0%, rgba(0,0,0,0) 65%);
  pointer-events: none;
}
/* accent hover glow — behind the sphere, emanating from its silhouette */
.planet-hover-glow {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle,
    var(--planet-accent, rgba(120,150,255,0.4)) 38%,
    rgba(0,0,0,0) 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 0;
}
@media (hover: hover) {
  .planet-stage:hover .planet-hover-glow { opacity: 0.4; }
}
#planet {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
/* floating "land here →" label */
.planet-cta {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -130%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 3.6vw, 19px);
  letter-spacing: 0.08em;
  color: var(--planet-accent-solid, var(--accent));
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.planet-cta .pc-arrow { transition: transform 0.5s ease; }
@media (hover: hover) {
  .planet-stage:hover .planet-cta {
    opacity: 0.95;
    transform: translate(-50%, -150%);
  }
  .planet-stage:hover .planet-cta .pc-arrow { transform: translateX(3px); }
}

/* arrival gestures */
@media (prefers-reduced-motion: no-preference) {
  .planet-stage.arrive-center { animation: arriveCenter 2.2s ease-out; }
  .planet-stage.arrive-settle { animation: arriveSettle 2.6s cubic-bezier(0.22, 0.8, 0.35, 1); }
}
@keyframes arriveCenter {
  from { transform: scale(0.82); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes arriveSettle {
  0% { transform: translate(7%, -3%) scale(0.88) rotate(2.5deg); opacity: 0; }
  55% { transform: translate(-1.5%, 0.6%) scale(1.015) rotate(-0.5deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

#planet-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(30px, 7vw, 44px);
  letter-spacing: 0.04em;
  color: var(--text);
}
#planet-catalog {
  margin-top: 7px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0.62;
}
#planet-catalog[hidden] { display: none; }
#planet-sub {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- the Asteroid Belt: a field, not a sphere ---------- */
#belt-field,
#binary-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}
.planet-stage.field-stage,
.planet-stage.binary-stage {
  /* roomier than a single world's medallion */
  width: min(82vw, 460px, 52vh);
}
.planet-stage.field-stage {
  /* you do not "land" on a field */
  cursor: default;
}
.field-stage #belt-field { display: block; }
.binary-stage #binary-field { display: block; }
.field-stage #planet,
.binary-stage #planet { display: none; }
.field-stage .planet-cta { display: none; }
.field-stage .planet-glow { opacity: 0.72; }
.field-stage .planet-hover-glow { display: none; }
/* the binary keeps its land CTA, but the pair fills the medallion so the hover
   glow behind a single sphere would read wrong — drop it */
.binary-stage .planet-hover-glow { display: none; }
.binary-stage .planet-glow { opacity: 0.8; }

/* third title tier — the tagline beneath the subtitle */
.planet-tagline {
  margin-top: clamp(10px, 1.7vh, 16px);
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 4vw, 21px);
  letter-spacing: 0.01em;
  color: var(--text-dim);
  text-wrap: pretty;
}
/* the field's poetic close — lands last, after the delayed wow-fact */
.field-closing {
  margin: clamp(22px, 3.5vh, 34px) auto 0;
  max-width: 460px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 4.2vw, 21px);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #cbc0ad;
  opacity: 0;
  transition: opacity 2.2s ease;
  text-wrap: pretty;
}
.field-closing.visible { opacity: 1; }

/* ---------- tag pills (time tag + home system) ---------- */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(16px, 2.5vh, 24px);
}
#time-tag, #home-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 8px 16px 8px 13px;
  min-height: 36px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transition: opacity 1.6s ease, border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
#time-tag.visible, #home-tag.visible { opacity: 1; }
#time-tag .tt-icon, #home-tag .tt-icon { font-size: 13px; line-height: 1; }
#home-tag .tt-icon svg { display: block; }
/* children never intercept the cursor — the pill is one solid hit area */
#time-tag .tt-icon, #time-tag .tt-label,
#home-tag .tt-icon, #home-tag .tt-label { pointer-events: none; }
/* Home System — warm gold, our Sun's color family */
#home-tag {
  color: #e2c08f;
  background: rgba(212, 165, 116, 0.13);
  border: 1px solid rgba(212, 165, 116, 0.32);
}
#home-tag:hover, #home-tag:focus-visible {
  background: rgba(212, 165, 116, 0.22);
  border-color: rgba(228, 192, 142, 0.7);
  box-shadow: 0 0 26px rgba(212, 165, 116, 0.3);
  color: #f2dcb6;
}
/* Fast Calendar — cool blue, the intentional-warp color */
#time-tag[data-kind="fast"] {
  color: #b9c6ff;
  background: rgba(67, 97, 238, 0.13);
  border: 1px solid rgba(120, 140, 240, 0.32);
}
#time-tag[data-kind="fast"]:hover, #time-tag[data-kind="fast"]:focus-visible {
  background: rgba(67, 97, 238, 0.24);
  border-color: rgba(150, 170, 255, 0.7);
  box-shadow: 0 0 26px rgba(67, 97, 238, 0.3);
  color: #d2dbff;
}
/* Slow Clock — warm amber, the return-to-Earth color */
#time-tag[data-kind="slow"] {
  color: #f0cf9e;
  background: rgba(230, 170, 95, 0.13);
  border: 1px solid rgba(230, 175, 100, 0.32);
}
#time-tag[data-kind="slow"]:hover, #time-tag[data-kind="slow"]:focus-visible {
  background: rgba(230, 170, 95, 0.24);
  border-color: rgba(245, 200, 130, 0.7);
  box-shadow: 0 0 26px rgba(230, 170, 95, 0.3);
  color: #f7dcb0;
}

/* ---------- time tag modal ---------- */
.tag-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(1, 3, 9, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.tag-modal.open { opacity: 1; pointer-events: auto; }
.tag-card {
  max-width: 440px;
  background: rgba(10, 14, 28, 0.92);
  border: 1px solid rgba(120, 130, 180, 0.22);
  border-radius: 18px;
  padding: 26px 28px 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.5s cubic-bezier(0.22, 0.8, 0.35, 1);
  text-align: left;
}
.tag-modal.open .tag-card { transform: translateY(0) scale(1); }
.tag-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.tag-card-head .tt-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.tag-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.tag-modal[data-kind="fast"] .tag-card h3,
.tag-modal[data-kind="fast"] .tag-card-head .tt-icon { color: #b9c6ff; }
.tag-modal[data-kind="slow"] .tag-card h3,
.tag-modal[data-kind="slow"] .tag-card-head .tt-icon { color: #f0cf9e; }
.tag-modal[data-kind="fast"] .tag-card { border-color: rgba(120, 140, 240, 0.3); }
.tag-modal[data-kind="slow"] .tag-card { border-color: rgba(230, 175, 100, 0.3); }
.tag-modal[data-kind="home"] .tag-card h3,
.tag-modal[data-kind="home"] .tag-card-head .tt-icon { color: #e8c89a; }
.tag-modal[data-kind="home"] .tag-card { border-color: rgba(212, 165, 116, 0.32); }
.tag-card p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-dim);
  text-wrap: pretty;
  white-space: pre-line;
}

#facts {
  list-style: none;
  margin: clamp(26px, 4.5vh, 44px) 0 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
#facts li {
  font-family: var(--serif);
  font-size: clamp(18px, 4.4vw, 22px);
  line-height: 1.55;
  color: var(--text-dim);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.8s ease, transform 1.8s ease;
  text-wrap: pretty;
}
#facts li.visible { opacity: 1; transform: translateY(0); }

#wow {
  margin: clamp(26px, 4vh, 40px) auto 0;
  max-width: 460px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 4.2vw, 20px);
  line-height: 1.65;
  color: #9aa6e8;
  opacity: 0;
  transition: opacity 2.2s ease;
  text-wrap: pretty;
}
#wow.visible { opacity: 1; }

#discovered {
  margin-top: clamp(22px, 3.5vh, 34px);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0;
  transition: opacity 2.2s ease;
}
#discovered.visible { opacity: 1; }

/* ---------- learn more (in-place expansion) ---------- */
#learn-toggle {
  margin-top: clamp(22px, 3.5vh, 34px);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(15px, 3.6vw, 18px);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: var(--learn-accent, var(--accent));
  opacity: 0;
  transition: opacity 0.45s ease, color 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
#learn-toggle.visible { opacity: 0.92; }
#learn-toggle .lt-label {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.5s ease;
  padding-bottom: 2px;
}
#learn-toggle:hover .lt-label { background-size: 100% 1px; }
#learn-toggle .lt-arrow { transition: transform 0.5s ease; }
#learn-toggle:hover .lt-arrow { transform: translateX(3px); }
#learn-toggle.open:hover .lt-arrow { transform: translateX(-3px); }

.learn-more {
  width: min(560px, 100%);
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 0.8, 0.3, 1),
              opacity 0.6s ease, margin-top 0.6s ease;
  opacity: 0;
  margin-top: 0;
}
.learn-more.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: clamp(24px, 4vh, 38px);
}
.learn-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 4vh, 36px);
  text-align: left;
}
.learn-block h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--learn-accent, var(--text-dim));
  opacity: 0.85;
  margin-bottom: 12px;
}
.learn-block p {
  font-family: var(--serif);
  font-size: clamp(17px, 4vw, 20px);
  line-height: 1.68;
  color: var(--text-dim);
  text-wrap: pretty;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: clamp(34px, 5.5vh, 56px) 0 28px;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.actions.visible { opacity: 1; }

.btn {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(67, 97, 238, 0.08);
  border: 1px solid rgba(120, 130, 220, 0.3);
  border-radius: 999px;
  padding: 15px 28px;
  min-height: 48px;
  cursor: pointer;
  transition: border-color 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
}
.btn:hover {
  border-color: rgba(140, 150, 240, 0.65);
  background: rgba(67, 97, 238, 0.16);
  box-shadow: 0 0 28px rgba(67, 97, 238, 0.18);
}
.btn.ghost {
  background: transparent;
  border-color: rgba(140, 140, 170, 0.22);
  color: var(--text-dim);
}

/* ---------- surface scene ---------- */
#scene-surface {
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  background: var(--bg);
  /* See #scene-planet: hand horizontal pans to the world-swipe handler. */
  touch-action: pan-y;
}
.surface-hero {
  position: relative;
  width: 100%;
  height: 100svh;
  flex-shrink: 0;
  overflow: hidden;
}
#surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* GUARDRAIL: the hero/backdrop canvas must never intercept clicks meant for
     the surface controls, ribbon, or navigation that layer above it. */
  pointer-events: none;
  animation: kenburns 50s ease-in-out infinite alternate;
  transform-origin: 50% 70%;
}
@media (prefers-reduced-motion: reduce) {
  #surface { animation: none; }
}
@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}
.surface-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 100%;
  padding: 60px 28px calc(34px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(1, 3, 9, 0.92) 34%, rgba(1, 3, 9, 0));
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.surface-info h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(24px, 5.5vw, 32px);
  letter-spacing: 0.05em;
}
.surface-info .conditions {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.surface-info p.desc {
  max-width: 520px;
  font-family: var(--serif);
  font-size: clamp(17px, 4.3vw, 21px);
  line-height: 1.65;
  color: var(--text-dim);
  text-wrap: pretty;
}
.surface-info .actions { margin: 10px 0 0; }

/* below-the-hero content: the learn-more expansion lives here, in normal
   flow, so expanding it grows the scene and lets it scroll. */
.surface-extra {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 28px;
  background: var(--bg);
}
.surface-extra .learn-more.open { margin-bottom: calc(48px + env(safe-area-inset-bottom)); }

/* ---------- corner controls ---------- */
.corner {
  position: fixed;
  z-index: 10;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(4, 8, 20, 0.4);
  border: 1px solid rgba(140, 140, 170, 0.16);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity 1.2s ease, color 0.4s ease, border-color 0.4s ease;
}
.corner:hover { color: var(--text-dim); border-color: rgba(160, 160, 200, 0.35); }
.corner.hidden { opacity: 0; pointer-events: none; }

#return-earth {
  top: max(20px, env(safe-area-inset-top));
  left: 20px;
}
#journey-btn {
  top: max(20px, env(safe-area-inset-top));
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#journey-btn .corner-icon { font-size: 13px; line-height: 1; }
#mute {
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 20px;
}
#share-world {
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 50px);
  right: 20px;
}
#share-world.copied {
  color: var(--text-dim);
  border-color: rgba(160, 160, 200, 0.35);
}

/* ---------- journey ribbon (ambient nav strip) ---------- */
.journey-ribbon {
  position: fixed;
  top: max(43px, calc(env(safe-area-inset-top) + 23px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 9px;
  /* Vertical padding gives the active dot's enlarged ring + glow room so
     overflow-y:hidden doesn't clip it top/bottom; `top` above is pulled up by
     the same amount so the dots don't visually move. The strip has no
     background, so the taller (transparent) box is invisible. Horizontal
     scroll (overflow-x) and the edge-fade masks are unchanged. */
  padding: 22px 14px;
  max-width: calc(100vw - 28px);
  opacity: 0;
  transition: opacity 2.4s ease;
  pointer-events: none;
  /* horizontally scrollable: the strip shrinks to its content and stays
     centered via translateX; once the dots exceed max-width it pins to
     max-width and scrolls from the start (no justify-content centering, which
     would inflate scrollWidth and mis-trigger the edge fades). */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.journey-ribbon::-webkit-scrollbar { display: none; }   /* WebKit */
.journey-ribbon.visible { opacity: 1; pointer-events: auto; }
.journey-ribbon.visible .rib-dot { pointer-events: auto; }

/* soft edge fade — applied only on whichever side has off-screen dots, so a
   ribbon whose dots all fit looks identical to the un-scrolled original. */
.journey-ribbon.fade-left {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 100%);
}
.journey-ribbon.fade-right {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 30px), transparent 100%);
}
.journey-ribbon.fade-left.fade-right {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}

.rib-sep {
  width: 1px;
  height: 13px;
  margin: 0 5px;
  background: linear-gradient(rgba(150,160,210,0) 0%, rgba(150,160,210,0.28) 50%, rgba(150,160,210,0) 100%);
  flex: 0 0 auto;
}
/* tier separators inside the exoplanet block — quieter than the Home→exo
   divider, marking where the distance crosses ~100 ly and ~1,000 ly. Faint,
   unlabeled: just enough to feel the cosmos thinning out with depth. */
.rib-sep--tier {
  height: 10px;
  margin: 0 4px;
  background: linear-gradient(rgba(150,160,210,0) 0%, rgba(150,160,210,0.13) 50%, rgba(150,160,210,0) 100%);
}

.rib-dot {
  position: relative;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(150, 160, 200, 0.22);
  cursor: pointer;
  transition: background 0.6s ease, box-shadow 0.6s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  /* a generous invisible hit area without growing the visual dot */
  box-sizing: content-box;
}
.rib-dot::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
}
.rib-dot.visited {
  background: var(--rib-accent);
  box-shadow: 0 0 7px -1px var(--rib-accent);
}
.rib-dot.current {
  background: var(--rib-accent);
  transform: scale(1.55);
  box-shadow: 0 0 0 2px rgba(2, 4, 12, 0.9), 0 0 0 3.5px color-mix(in srgb, var(--rib-accent) 55%, transparent), 0 0 12px 1px var(--rib-accent);
  animation: rib-pulse 3.2s ease-in-out infinite;
}
@keyframes rib-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(2, 4, 12, 0.9), 0 0 0 3.5px color-mix(in srgb, var(--rib-accent) 50%, transparent), 0 0 10px 1px var(--rib-accent); }
  50% { box-shadow: 0 0 0 2px rgba(2, 4, 12, 0.9), 0 0 0 5px color-mix(in srgb, var(--rib-accent) 28%, transparent), 0 0 16px 2px var(--rib-accent); }
}

/* ribbon hover tooltip — a single shared element on <body> (built in app.js),
   positioned in viewport coordinates. Lives outside the ribbon's scroll box so
   it never contributes to scrollWidth. Appears instantly (no fade). */
#rib-tooltip {
  position: fixed;
  z-index: 10;                 /* above the ribbon (z-index 9) */
  transform: translateX(-50%);
  padding: 3px 9px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-dim);
  background: rgba(8, 12, 24, 0.86);
  border: 1px solid rgba(150, 160, 210, 0.18);
  border-radius: 4px;
  pointer-events: none;
  display: none;
}
#rib-tooltip.visible { display: block; }
/* flip-above variant anchors its bottom edge to the given top coordinate */
#rib-tooltip.above { transform: translate(-50%, -100%); }
@media (hover: hover) {
  .rib-dot:hover { background: var(--rib-accent); box-shadow: 0 0 9px 0 var(--rib-accent); }
}

/* ---------- vessel telemetry HUD ---------- */
.hud {
  position: fixed;
  left: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transition: opacity 1.4s ease;
}
.hud.hidden, .hud.suppressed { opacity: 0; pointer-events: none; }
.hud-chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: rgba(4, 8, 20, 0.45);
  border: 1px solid rgba(140, 140, 170, 0.16);
  border-radius: 14px;
  padding: 10px 16px 10px 13px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: left;
  transition: border-color 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
.hud-chip:hover { border-color: rgba(160, 160, 200, 0.35); }
.hud-glyph {
  color: #8ea0f0;
  font-size: 14px;
  line-height: 1;
  opacity: 0.85;
}
.hud-text { display: flex; flex-direction: column; gap: 2px; }
.hud-name {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-dim);
}
/* Long vessel names (e.g. ANTIMATTER ANNIHILATION ENGINE) tighten their
   tracking so they don't overflow the compact chip; the mobile rule below lets
   them wrap to two clean lines. */
.hud-name--long { letter-spacing: 0.16em; }
.hud-loc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text-faint);
}
.hud-panel {
  display: flex;
  flex-direction: column;
  gap: 13px;
  width: max-content;
  min-width: 196px;
  padding: 0 18px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(6px);
  background: linear-gradient(180deg, rgba(12, 18, 38, 0.82), rgba(6, 10, 24, 0.88));
  border: 1px solid rgba(120, 140, 220, 0.18);
  border-radius: 14px;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  transition: max-height 0.5s cubic-bezier(0.22, 0.8, 0.32, 1), opacity 0.5s ease,
              transform 0.5s ease, padding 0.5s ease;
  pointer-events: none;
}
@media (hover: hover) {
  /* Bug fix: the base .hud-panel rule sets pointer-events:none (so the
     collapsed, zero-height panel never steals clicks from whatever sits
     behind it). This reveal rule was only restoring the VISUAL state
     (opacity/max-height/transform/padding) and never flipping pointer-events
     back to auto — so on hover-capable devices the panel looked open but
     every click inside it (Change vessel, Replay intro) passed straight
     through to whatever was behind the HUD. :focus-within is included so
     keyboard users tabbing into the panel's buttons get the same reveal +
     interactivity that hover gives mouse users, not just visibility.
     (Note: .hud-panel and .hud-chip are plain stacked flex children of .hud
     — not absolutely positioned — so the 10px flex gap between them is part
     of .hud's own box and moving the cursor across it does not drop :hover;
     no dead-zone/race condition exists there.) */
  .hud:hover .hud-panel,
  .hud:focus-within .hud-panel {
    max-height: 340px; opacity: 1; transform: none; padding: 18px; pointer-events: auto;
  }
}
.hud.open .hud-panel { max-height: 340px; opacity: 1; transform: none; padding: 18px; pointer-events: auto; }

/* "Change vessel" lives inside the expandable panel so touch devices (no hover)
   can reach the ship selector after a tap opens the stats. On hover-capable
   devices the chip-click still opens the Bay directly, so this button is hidden
   there to leave desktop behavior untouched. */
.hud-change {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 11px 14px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: rgba(120, 140, 220, 0.10);
  border: 1px solid rgba(120, 140, 220, 0.22);
  border-radius: 11px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto; /* explicit: don't rely solely on inheriting this from .hud-panel */
}
.hud-change .hc-arrow { font-size: 16px; color: var(--text-faint); }
@media (hover: none) {
  .hud-change { display: flex; }
}
/* "Replay intro" — a rare, low-frequency utility action, so it reads as
   subordinate to "Change vessel": no fill/border, just a quiet text link under
   a hairline divider. Unlike .hud-change it is NOT restricted to touch devices
   — the hud-chip's click already opens the Bay directly on desktop, but there
   is no equivalent desktop shortcut for replaying the intro, so this stays
   visible in the panel on every input type. */
.hud-replay {
  display: block;
  width: 100%;
  margin-top: 1px;
  padding: 10px 2px 0;
  border: none;
  border-top: 1px solid rgba(120, 140, 220, 0.14);
  background: none;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
  pointer-events: auto; /* explicit: don't rely solely on inheriting this from .hud-panel */
}
.hud-replay:hover, .hud-replay:focus-visible { color: var(--text-dim); }
.hud-row { display: flex; flex-direction: column; gap: 3px; }
.hud-k {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.hud-v {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--text-dim);
}

/* ---------- first-warp vessel introduction ---------- */
.vessel-intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vh, 24px);
  padding: 0 28px 22vh;
  pointer-events: none;
  text-align: center;
}
.vessel-intro p {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100vw - 56px));
  max-width: 620px;
  font-family: var(--serif);
  font-size: clamp(19px, 4.6vw, 28px);
  line-height: 1.45;
  color: var(--text);
  text-shadow: 0 0 26px rgba(120, 150, 255, 0.3), 0 2px 24px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.45s ease;
  text-wrap: pretty;
}
.vessel-intro p em {
  font-style: italic;
  color: #b9c6ff;
  text-shadow: 0 0 30px rgba(140, 165, 255, 0.55);
}
.vessel-intro p.visible { opacity: 1; }

/* ---------- journey panel ---------- */
.journey-scrim {
  position: fixed;
  inset: 0;
  z-index: 44;
  background: rgba(1, 3, 9, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.journey-scrim.open { opacity: 1; pointer-events: auto; }

.journey-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 45;
  height: 100%;
  width: min(340px, 86vw);
  display: flex;
  flex-direction: column;
  padding: max(26px, env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(12, 18, 38, 0.82), rgba(6, 10, 24, 0.88));
  border-left: 1px solid rgba(120, 140, 220, 0.18);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.32, 1);
}
.journey-panel.open { transform: translateX(0); }

.journey-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.journey-title {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.journey-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.3s ease;
}
.journey-close:hover { color: var(--text); }

.journey-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 140, 220, 0.3) transparent;
}
.journey-list::-webkit-scrollbar { width: 5px; }
.journey-list::-webkit-scrollbar-thumb { background: rgba(120, 140, 220, 0.3); border-radius: 3px; }

.journey-empty {
  margin: auto;
  max-width: 220px;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--text-faint);
  text-wrap: pretty;
}

.journey-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: left;
  background: transparent;
  width: 100%;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.journey-item:hover {
  background: rgba(67, 97, 238, 0.1);
  border-color: rgba(120, 140, 240, 0.35);
  box-shadow: 0 0 22px rgba(67, 97, 238, 0.16);
}
.journey-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 10px 1px var(--dot, #4361ee);
}
.journey-item-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.journey-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  text-wrap: pretty;
}
.journey-time {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.journey-clear {
  margin-top: 16px;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid rgba(140, 140, 170, 0.18);
  border-radius: 999px;
  padding: 12px;
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.journey-clear:hover { color: var(--text-dim); border-color: rgba(160, 160, 200, 0.34); }
.journey-clear.hidden { display: none; }

/* ---------- warp flash ---------- */
#flash {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(circle at 50% 50%, rgba(220, 226, 255, 0.95), rgba(120, 140, 255, 0.6) 45%, rgba(2, 4, 12, 0) 80%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
#flash.warm {
  background: radial-gradient(circle at 50% 50%, rgba(255, 240, 218, 0.92), rgba(230, 170, 95, 0.5) 45%, rgba(2, 4, 12, 0) 80%);
}
#flash.on { opacity: 1; transition: opacity 0.35s ease; }

/* ---------- warp distance readout ---------- */
/* HUD-style flash of the distance jump, riding on top of the warp. Numbers in
   the telemetry serif, units/labels in the uppercase sans of the HUD keys, all
   in the warm gold of the active states. Centered, cinematic, gone by arrival. */
/* Opacity + entrance scale are driven per-frame from JS (requestAnimationFrame),
   not via CSS transitions — the canvas-style rAF path paints reliably in every
   environment, where compositor-driven transitions can be suspended. */
#warp-readout {
  position: fixed;
  inset: 0;
  z-index: 49;                 /* above scenes + HUD, below the arrival flash (50) */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 0 24px;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  will-change: opacity, transform;
  --readout-gold: #f2cd84;
}
.warp-readout .wr-line {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.16em;
  color: var(--readout-gold);
}
.wr-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(58px, 12vw, 150px);
  line-height: 0.94;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 38px rgba(242, 205, 132, 0.42), 0 2px 30px rgba(0, 0, 0, 0.6);
}
.wr-unit {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(15px, 2.1vw, 25px);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  align-self: center;
  opacity: 0.8;
  margin-left: 0.04em;
}
.wr-arrow {
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(34px, 6vw, 78px);
  align-self: center;
  opacity: 0.66;
  margin: 0 0.06em;
}
.wr-lead {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(12px, 1.5vw, 17px);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  align-self: center;
  opacity: 0.58;
}
.wr-mid {
  align-self: center;
  font-size: clamp(26px, 3.6vw, 48px);
  opacity: 0.4;
  margin: 0 0.04em;
}
.wr-sub {
  font-family: var(--sans);
  font-size: clamp(12px, 1.5vw, 17px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--readout-gold);
  opacity: 0.4;
}
/* the most dramatic jumps (PSR B1620-26 b, 12,400 ly) land with extra weight */
#warp-readout.colossal .wr-num {
  font-size: clamp(64px, 14vw, 184px);
  text-shadow: 0 0 60px rgba(242, 205, 132, 0.6), 0 2px 40px rgba(0, 0, 0, 0.72);
}
/* labeled treatment carries more glyphs — shrink so it stays on one line */
.treat-labeled .wr-num { font-size: clamp(40px, 7.4vw, 92px); }
.treat-labeled .wr-unit { font-size: clamp(13px, 1.7vw, 20px); }
/* first-warp time flash: vessel-name eyebrow, big year-count, leg caption */
.treat-time { gap: 10px; }
.treat-time .wr-lead {
  color: var(--readout-gold);
  opacity: 0.66;
  margin-bottom: 2px;
}
.treat-time .wr-sub { opacity: 0.5; }

/* ---------- vessel-aware travel-time readout (treat-livetime) ---------- */
/* Replaces the old gold distance flash. A cool HUD: the selected vessel's drive
   name over the leg's travel time, in mono, pale blue-white, tracked. A soft,
   feathered dark scrim (with a faint blur behind it) keeps it legible over the
   bright, streaked warp background. */
.treat-livetime {
  gap: clamp(12px, 1.6vh, 18px);
}
.treat-livetime::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(820px, 92vw);
  height: clamp(190px, 36vh, 300px);
  background: radial-gradient(ellipse at center,
              rgba(6, 9, 18, 0.6) 0%, rgba(6, 9, 18, 0.4) 44%, rgba(6, 9, 18, 0) 76%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  -webkit-mask: radial-gradient(ellipse at center, #000 32%, transparent 72%);
  mask: radial-gradient(ellipse at center, #000 32%, transparent 72%);
  pointer-events: none;
}
.treat-livetime .wr-drive,
.treat-livetime .wr-leg {
  position: relative; /* above the ::before scrim */
}
.wr-drive {
  font-family: var(--mono, ui-monospace, "SF Mono", "JetBrains Mono", Menlo, "Liberation Mono", monospace);
  font-weight: 500;
  font-size: clamp(12px, 1.7vw, 17px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(178, 203, 240, 0.82);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
}
.wr-leg {
  font-family: var(--mono, ui-monospace, "SF Mono", "JetBrains Mono", Menlo, "Liberation Mono", monospace);
  font-weight: 400;
  font-size: clamp(27px, 5.6vw, 58px);
  letter-spacing: 0.04em;
  line-height: 1.12;
  color: #e9f0fb;
  max-width: 13ch;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.72), 0 0 38px rgba(26, 48, 88, 0.5);
}
.wr-leg .wr-time {
  font-weight: 600;
  color: #fbfdff;
}

@media (max-width: 640px) {
  #warp-readout { gap: 10px; }
  .treat-labeled .wr-line { gap: 0.12em; }
  .treat-livetime .wr-leg { max-width: 11ch; }
}

/* animation-suspended environments: show final states instantly */
.no-anim *, .no-anim *::before, .no-anim *::after {
  transition: none !important;
  animation: none !important;
}

/* fade-from-black veil used on first load */
#veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  pointer-events: none;
  opacity: 1;
  transition: opacity 3s ease;
}
#veil.lifted { opacity: 0; }

/* ---------- HUD chip → Vessel Bay affordance ---------- */
.hud-swap {
  margin-left: 2px;
  color: var(--text-faint);
  font-size: 19px;
  line-height: 1;
  transition: color 0.35s ease, transform 0.35s ease;
}
.hud-chip:hover .hud-swap { color: #8ea0f0; transform: translateX(2px); }

/* ---------- Vessel Bay (ship selector) ---------- */
.vessel-scrim {
  position: fixed;
  inset: 0;
  z-index: 46;
  background: rgba(1, 3, 9, 0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.vessel-scrim.open { opacity: 1; pointer-events: auto; }

.vessel-bay {
  position: fixed;
  z-index: 47;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 18px)) scale(0.985);
  width: min(780px, 94vw);
  max-height: min(88vh, 880px);
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(12, 18, 38, 0.93), rgba(6, 10, 24, 0.96));
  border: 1px solid rgba(120, 140, 220, 0.2);
  border-radius: 22px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22, 0.8, 0.32, 1);
}
.vessel-bay.open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Gate mode (first-run launch ritual): a larger, more cinematic frame, no ×, and
   a Launch action pinned at the bottom. Same Bay content, a committal moment. */
.vessel-bay.gate {
  width: min(1040px, 95vw);
  max-height: min(92vh, 940px);
}
.vessel-bay.gate .bay-close { display: none; }
.bay-launch-bar { display: none; }
.vessel-bay.gate .bay-launch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(16px, 2.2vw, 24px);
  padding-top: clamp(16px, 2.2vw, 22px);
  border-top: 1px solid rgba(120, 140, 220, 0.16);
}
.bay-launch-hint {
  font-family: var(--serif);
  font-size: clamp(14px, 1.7vw, 16.5px);
  line-height: 1.45;
  color: var(--text-dim);
  flex: 1;
  min-width: 200px;
  text-wrap: pretty;
}
.bay-launch {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-size: clamp(17px, 2vw, 20px);
  letter-spacing: 0.01em;
  color: var(--text);
  cursor: pointer;
  padding: 13px 30px;
  background: rgba(67, 97, 238, 0.16);
  border: 1px solid rgba(130, 150, 245, 0.55);
  border-radius: 999px;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.bay-launch:hover {
  background: rgba(67, 97, 238, 0.28);
  border-color: rgba(150, 168, 255, 0.85);
  box-shadow: 0 0 38px rgba(67, 97, 238, 0.3);
  transform: translateY(-1px);
}
.bay-launch .bl-arrow { transition: transform 0.35s ease; }
.bay-launch:hover .bl-arrow { transform: translateX(4px); }

.bay-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: clamp(18px, 2.4vw, 26px);
}
.bay-title-wrap { flex: 1; min-width: 0; }
.bay-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 10px;
}
.bay-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(27px, 4vw, 36px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--text);
}
.bay-sub {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(14.5px, 1.7vw, 17px);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 54ch;
  text-wrap: pretty;
}
.bay-close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.3s ease;
}
.bay-close:hover { color: var(--text); }

.bay-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 -6px;
  padding: 2px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120, 140, 220, 0.3) transparent;
}
.bay-list::-webkit-scrollbar { width: 5px; }
.bay-list::-webkit-scrollbar-thumb { background: rgba(120, 140, 220, 0.3); border-radius: 3px; }

.bay-card {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: clamp(14px, 2.5vw, 26px);
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: clamp(15px, 2vw, 20px) clamp(16px, 2.2vw, 22px);
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(140, 150, 190, 0.14);
  border-radius: 15px;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.bay-card:hover {
  background: rgba(67, 97, 238, 0.09);
  border-color: rgba(120, 140, 240, 0.38);
  box-shadow: 0 0 30px rgba(67, 97, 238, 0.14);
}
.bay-card.selected {
  background: rgba(67, 97, 238, 0.14);
  border-color: rgba(130, 150, 245, 0.6);
  box-shadow: 0 0 0 1px rgba(130, 150, 245, 0.32), 0 0 38px rgba(67, 97, 238, 0.2);
}
.bay-card-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bay-card-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.bay-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(20px, 2.6vw, 24px);
  line-height: 1.1;
  color: var(--text);
}
.bay-current {
  display: none;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #aeb9f5;
  border: 1px solid rgba(130, 150, 245, 0.5);
  border-radius: 999px;
  padding: 3px 9px;
  transform: translateY(-2px);
}
.bay-card.selected .bay-current { display: inline-block; }
.bay-desc {
  font-family: var(--serif);
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.5;
  color: var(--text-dim);
  max-width: 62ch;
  text-wrap: pretty;
}
.bay-card-ref {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  text-align: right;
  min-width: max-content;
}
.bay-ref-label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.bay-ref-time {
  font-family: var(--serif);
  font-size: clamp(19px, 2.5vw, 24px);
  line-height: 1;
  color: #b9c6ff;
}
.bay-card.selected .bay-ref-time { color: #cdd6ff; }

/* ---------- Step 3: fleet visuals, ritual framing, selection moment ---------- */

/* Bay framing — a launch-bay slot feel, not a menu: a faint starfield-adjacent
   haze and a horizon line beneath the title, consistent with the SpaceSick mood. */
.vessel-bay::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(78, 102, 200, 0.16), transparent 60%),
    radial-gradient(80% 50% at 88% 108%, rgba(67, 97, 238, 0.1), transparent 70%);
  z-index: 0;
}
.bay-head, .bay-list { position: relative; z-index: 1; }
.bay-head {
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid rgba(120, 140, 220, 0.14);
}

/* The vessel visual — a recessed exhibit slot holding one ship of the fleet.
   Phase 2: full renders (layered SVG gradients, js/vessel-renders.js). The slot
   is a quiet display case: near-black recess, soft case light, thin frame. */
.bay-vis {
  flex-shrink: 0;
  width: clamp(66px, 9vw, 94px);
  height: clamp(66px, 9vw, 94px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  border: 1px solid rgba(140, 150, 190, 0.16);
  background:
    radial-gradient(90% 75% at 50% 26%, rgba(52, 70, 130, 0.13), transparent 74%),
    rgba(1, 3, 10, 0.62);
  transition: border-color 0.45s ease, box-shadow 0.45s ease, transform 0.45s cubic-bezier(0.22, 0.8, 0.32, 1);
}
.bay-vis-svg { width: 100%; height: 100%; display: block; transition: filter 0.45s ease; }
.bay-card:hover .bay-vis { border-color: rgba(120, 140, 240, 0.3); }
.bay-card:hover .bay-vis-svg { filter: brightness(1.08); }
.bay-card.selected .bay-vis {
  border-color: rgba(130, 150, 245, 0.5);
  box-shadow: inset 0 0 22px rgba(67, 97, 238, 0.18), 0 0 24px rgba(67, 97, 238, 0.18);
  transform: scale(1.04);
}
.bay-card.selected .bay-vis-svg { filter: brightness(1.1); }

/* Drive emission: the fusion nozzle idle and the antimatter annihilation light
   carry .vr-beat — on the selected card that light breathes, quietly. */
.bay-card.selected .vr-beat { animation: bay-core-pulse 2.6s ease-in-out infinite; }
@keyframes bay-core-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

/* Speed indicator — fraction of light speed (log scale) + the real km/s figure. */
.bay-meter {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
}
.bay-meter-track {
  flex: 1;
  max-width: 200px;
  height: 3px;
  border-radius: 2px;
  background: rgba(150, 160, 200, 0.16);
  overflow: hidden;
}
.bay-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(120, 140, 240, 0.55), #aab9ff);
  transition: width 0.7s cubic-bezier(0.22, 0.8, 0.32, 1);
}
.bay-card.selected .bay-meter-fill { box-shadow: 0 0 10px rgba(120, 150, 255, 0.7); }
.bay-speed {
  font-family: var(--mono, var(--sans));
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  white-space: nowrap;
  min-width: max-content;
}

/* Selection moment: the picked ship eases forward, a glow sweep crosses the card,
   then it settles as hero. VISUAL ONLY. */
.bay-card.confirming {
  border-color: rgba(150, 168, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(150, 168, 255, 0.4), 0 0 50px rgba(67, 97, 238, 0.32);
  transform: scale(1.02);
}
.bay-card.confirming .bay-vis {
  transform: scale(1.12);
  box-shadow: inset 0 0 30px rgba(90, 120, 240, 0.4), 0 0 34px rgba(90, 120, 240, 0.3);
}
.bay-card.confirming .bay-vis-svg { filter: brightness(1.16); }
.bay-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(180, 198, 255, 0.18) 50%, transparent 70%);
  opacity: 0;
}
.bay-card.confirming::after { animation: bay-sweep 0.85s ease-out; }
@keyframes bay-sweep {
  0% { opacity: 0; transform: translateX(-60%); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(60%); }
}
.bay-card.just-set { animation: bay-settle 0.5s ease-out; }
@keyframes bay-settle {
  0% { transform: scale(1.05); }
  60% { transform: scale(0.995); }
  100% { transform: scale(1); }
}
.bay-card { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .bay-card.confirming::after,
  .bay-card.just-set,
  .bay-card.selected .vr-beat { animation: none; }
}

/* ==========================================================
   MOBILE (≤ 600px) — additive overrides only; desktop untouched
   ========================================================== */
@media (max-width: 600px) {

  /* --- Issue 1: header row — compact buttons, wordmark yields --- */
  .corner {
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 8px 13px;
    min-height: 44px;
    min-width: 44px;
  }
  #return-earth { left: 12px; }
  #journey-btn { right: 12px; }
  .brand { font-size: 14px; letter-spacing: 0.36em; text-indent: 0.36em; }
  /* once the journey buttons are on screen, the wordmark steps aside */
  body:has(#journey-btn:not(.hidden)) .brand { opacity: 0 !important; }

  /* --- journey ribbon: clears the (taller) mobile header, tighter spacing --- */
  .journey-ribbon {
    top: max(48px, calc(env(safe-area-inset-top) + 30px));
    gap: 6px;
    padding: 22px 10px;
  }
  .rib-dot { width: 6px; height: 6px; }
  .rib-sep { margin: 0 3px; }

  /* --- Issue 3: telemetry HUD — smaller, and scroll content clears it --- */
  .hud { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .hud-chip { padding: 7px 12px; min-height: 44px; gap: 8px; }
  .hud-name { font-size: 9px; }
  .hud-name--long {
    letter-spacing: 0.12em;
    white-space: normal;
    line-height: 1.25;
    max-width: 172px;
  }
  .hud-loc { font-size: 12px; }
  .hud-glyph { font-size: 12px; }
  /* --- Issue 3b: planet/orbit art must clear the top controls + JR band --- */
  /* The buttons end ~64px down and the ribbon ends ~82px down; reserve below
     that so the orbit medallion (and its glow halo) never rides up under them. */
  #scene-planet {
    padding-top: max(108px, calc(env(safe-area-inset-top) + 92px));
    padding-bottom: 128px;
  }
  /* cap the medallion on small viewports and nudge it down a touch more so its
     upper edge — glow included — clears the ribbon. Desktop sizing untouched. */
  .planet-stage {
    width: min(56vw, 226px, 34vh);
    margin-top: 6px;
    margin-bottom: 3vh;
  }
  .planet-stage.field-stage,
  .planet-stage.binary-stage {
    width: min(74vw, 300px, 46vh);
  }

  /* --- Issue 4: surface — stacked full-width actions, reachable learn-more --- */
  .surface-info .actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
    gap: 10px;
  }
  .surface-info .actions .btn { width: 100%; padding: 13px 18px; }
  /* Surface copy can run long; on phones let the hero grow with its content
     instead of clipping it, and keep the info pinned to the bottom over the
     planet image. Normal-flow (not absolute) so it can never be cut off and the
     scene scrolls to reveal all of it. */
  .surface-hero {
    height: auto;
    min-height: 100svh;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* When the body text is long enough to overflow a screen, flex-end can no
       longer keep the name low — it rides up under the top controls + Journey
       Ribbon. Reserve the same JR-band clearance the orbit view uses so the
       name always starts below the ribbon. Short content stays bottom-pinned. */
    padding-top: max(100px, calc(env(safe-area-inset-top) + 84px));
  }
  .surface-info {
    position: relative;
    bottom: auto;
    gap: 12px;
    padding-left: 24px;
    padding-right: 24px;
    /* clear the floating bottom chips (telemetry + SOUND) so the end of the
       body text and the Learn more control sit above them and stay tappable */
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }
  #learn-toggle { font-size: 16px; padding: 10px 8px; min-height: 44px; }
  .surface-extra .learn-more.open {
    margin-bottom: calc(132px + env(safe-area-inset-bottom));
  }

  /* --- Issue 6: outgoing scene clears fast beneath the warp --- */
  body.warping .scene.faded { transition-duration: 0.55s; }

  /* --- Issue 7: general polish --- */
  #mute {
    right: 12px;
    bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px));
    min-height: 44px;
    min-width: 44px;
  }
  #share-world {
    right: 12px;
    bottom: calc(max(28px, calc(env(safe-area-inset-bottom) + 12px)) + 52px);
    min-height: 44px;
  }
  #time-tag, #home-tag { min-height: 44px; padding: 10px 18px 10px 15px; }
  #scene-planet .actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 340px;
  }
  #scene-planet .actions .btn { width: 100%; }
  .cosmic-quote .cq-text { font-size: 16px; }
  #scene-intro { padding: 10vh clamp(26px, 7vw, 34px); }
  .intro-lines { gap: clamp(30px, 5.5vh, 48px); }
  /* ease the opening type on phones: smaller, airier, never edge-to-edge */
  .intro-lines p { font-size: clamp(20px, 5.1vw, 26px); line-height: 1.62; }
  .tag-card { padding: 22px 22px 24px; }
  .journey-panel { width: min(320px, 88vw); }

  /* Vessel Bay: near full-screen, cards stack the reference time below the copy */
  .vessel-bay {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    left: 0;
    top: 0;
    transform: translateY(16px);
    border-radius: 0;
    border: none;
    padding: max(20px, env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  }
  .vessel-bay.open { transform: translateY(0); }
  /* visual + copy share the top row; meter and reference time stack below */
  .bay-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
  }
  .bay-vis { width: 64px; height: 64px; }
  .bay-card-main { flex: 1; min-width: 0; }
  .bay-card-ref {
    flex-basis: 100%;
    flex-direction: row;
    align-items: baseline;
    gap: 9px;
    text-align: left;
    padding-top: 11px;
    border-top: 1px solid rgba(120, 140, 220, 0.12);
  }
  .bay-ref-label { order: 0; }
  .bay-meter-track { max-width: none; }
  /* Gate mode at phone width: truly full-screen, launch button full-width */
  .vessel-bay.gate { width: 100vw; max-height: 100dvh; }
  .vessel-bay.gate .bay-launch-bar { flex-direction: column; align-items: stretch; gap: 12px; }
  .bay-launch { justify-content: center; width: 100%; padding: 15px 24px; }
  .bay-launch-hint { min-width: 0; text-align: center; }
}