/* ── THE PLANETARIUM ──────────────────────────────────────── */
: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}

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

/* ── HEADER ───────────────────────────────────────────────── */
.plan-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;
}
.plan-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;
}
.plan-head .back:hover{color:var(--ember)}
.plan-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);
}
.plan-head .hint{
  margin-top:.4rem;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-faint);
  transition:opacity .8s;
}
.plan-head .hint.gone{opacity:0}

/* ── CONSTELLATION CARD ───────────────────────────────────── */
.const-card{
  position:fixed;left:50%;bottom:7.5rem;z-index:20;
  transform:translateX(-50%);
  max-width:min(30rem,calc(100vw - 2rem));
  padding:1.2rem 1.6rem;text-align:center;
  background:rgba(4,2,10,.78);
  border:1px solid rgba(139,92,246,.3);
  border-radius:18px;backdrop-filter:blur(12px);
  animation:cardUp .5s var(--ease);
}
@keyframes cardUp{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%)}}
.const-card h2{
  font-family:var(--fd);font-weight:400;letter-spacing:.16em;
  font-size:1.25rem;color:var(--ink);
}
.const-card p{
  margin-top:.5rem;font-size:.92rem;line-height:1.55;color:var(--ink-dim);
}

/* ── PLANET CARD ──────────────────────────────────────────── */
.planet-card{
  text-align:left;max-width:min(26rem,calc(100vw - 2rem));
  max-height:min(52vh,30rem);overflow-y:auto;scrollbar-width:thin;
  border-color:rgba(34,211,238,.35);
}
.planet-nav{display:flex;align-items:center;justify-content:space-between;gap:.8rem;text-align:center}
.planet-nav h2{font-family:var(--fd);font-weight:400;letter-spacing:.14em;font-size:1.3rem}
.planet-kind{font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ice);margin-top:.15rem}
.pnav{
  width:2.4rem;height:2.4rem;border-radius:50%;cursor:pointer;flex:0 0 auto;
  color:var(--ink-dim);background:rgba(8,5,16,.7);
  border:1px solid rgba(139,92,246,.35);font-size:1rem;
  transition:color .3s,border-color .3s,transform .25s var(--ease);
}
.pnav:hover{color:var(--ice);border-color:var(--ice);transform:translateY(-2px)}
.planet-facts{margin-top:.9rem;list-style:none;display:grid;gap:.55rem}
.planet-facts li{
  font-size:.88rem;line-height:1.5;color:var(--ink-dim);
  padding-left:1rem;position:relative;
}
.planet-facts li::before{
  content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--ember);box-shadow:0 0 8px var(--ember);
}
.planet-moonbox{margin-top:1rem;border-top:1px solid rgba(139,92,246,.22);padding-top:.8rem}
.planet-moonbox[hidden]{display:none}
.moon-head{font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-faint)}
.planet-moons{margin-top:.5rem;list-style:none;display:grid;gap:.45rem}
.planet-moons li{font-size:.84rem;line-height:1.45;color:var(--ink-dim)}
.planet-moons b{font-weight:500;color:var(--ink)}
.planet-note{
  margin-top:.9rem;font-size:.7rem;letter-spacing:.08em;color:var(--ink-faint);
}
.planet-card .story-btn{display:block;margin:1rem auto 0}
.ctl-planets{border-color:rgba(34,211,238,.4)}
body.planets-on .plan-head .hint{opacity:0}
@media(max-width:640px){
  .planet-card{bottom:6.5rem;max-height:46vh}
}
@media(min-width:900px){
  /* step aside — the world takes center stage */
  .planet-card{
    left:clamp(1.5rem,4vw,3.5rem);bottom:50%;
    transform:translateY(50%);
    animation:cardSide .5s var(--ease);
  }
  @keyframes cardSide{from{opacity:0;transform:translateY(50%) translateX(-14px)}to{opacity:1;transform:translateY(50%)}}
}

/* ── STORY OVERLAY ────────────────────────────────────────── */
.story{
  position:fixed;left:50%;bottom:7.5rem;z-index:30;
  transform:translateX(-50%);
  width:min(34rem,calc(100vw - 2rem));
  padding:1.5rem 1.8rem;text-align:center;
  background:rgba(2,1,8,.84);
  border:1px solid rgba(255,156,90,.28);
  border-radius:20px;backdrop-filter:blur(14px);
}
.story p{
  font-family:var(--fd);font-size:clamp(1.05rem,2.4vw,1.35rem);
  line-height:1.7;color:var(--ink);min-height:4.5em;
}
.story-btn{
  margin-top:1rem;padding:.7rem 2.2rem;border-radius:100px;
  font-family:var(--fu);font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase;cursor:pointer;
  color:#1a0800;border:none;
  background:linear-gradient(160deg,#ffd700,#ff9f00 45%,#ff6500);
  box-shadow:0 0 22px rgba(232,69,0,.4);
  transition:transform .25s var(--ease),box-shadow .25s;
}
.story-btn:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(232,69,0,.6)}

/* ── CONTROLS ─────────────────────────────────────────────── */
.controls{
  position:fixed;left:50%;bottom:1.4rem;z-index:25;
  transform:translateX(-50%);
  display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;
  width:max-content;max-width:calc(100vw - 1.5rem);
}
.ctl{
  padding:.85rem 1.5rem;border-radius:100px;cursor:pointer;
  font-family:var(--fu);font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-dim);
  background:rgba(8,5,16,.7);
  border:1px solid rgba(139,92,246,.35);
  backdrop-filter:blur(10px);
  transition:color .3s,border-color .3s,box-shadow .3s,transform .25s var(--ease);
}
.ctl:hover{color:var(--ice);border-color:var(--ice);box-shadow:0 0 18px rgba(34,211,238,.25);transform:translateY(-2px)}
.ctl-cube{
  border-color:rgba(255,156,90,.4);color:var(--ink);
}
.ctl-cube:hover{color:var(--ember);border-color:var(--ember);box-shadow:0 0 22px rgba(255,156,90,.3)}

/* ── 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:
    radial-gradient(1.5px 1.5px at 20% 25%,#fff 50%,transparent 51%),
    radial-gradient(1px 1px at 65% 60%,#dde8ff 50%,transparent 51%),
    radial-gradient(2px 2px at 80% 20%,#ffe9d2 50%,transparent 51%),
    radial-gradient(1px 1px at 40% 80%,#fff 50%,transparent 51%),
    var(--void);
  font-size:1rem;color:var(--ink-dim);
}

/* controls step aside while a story is being told */
.controls{transition:opacity .5s var(--ease)}
body.story-on .controls{opacity:0;pointer-events:none}
body.planets-on .controls{opacity:0;pointer-events:none}

@media(max-width:640px){
  .plan-head h1{font-size:1.1rem}
  .back-word{display:none}
  .ctl{padding:.8rem 1.1rem;font-size:.72rem}
  .const-card,.story{bottom:6.5rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
}