*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d1a;--surface:#131326;--surface2:#1a1a35;
  --text:#e2e2f0;--dim:rgba(210,218,248,.32);
  --teal:#5eead4;--violet:#a78bfa;--amber:#f59e0b;--blue:#60a5fa;
  --border:rgba(255,255,255,.06);
}
html,body{width:100%;height:100%;background:var(--bg);color:var(--text);overflow:hidden;font-family:'Cinzel',serif}

#bgCanvas{position:fixed;inset:0;z-index:0;display:block;pointer-events:none}
.nb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(100px);will-change:transform}
.nb1{width:min(65vw,500px);height:min(65vw,500px);background:radial-gradient(circle,rgba(100,50,200,.09) 0%,transparent 70%);top:-20%;left:-15%}
.nb2{width:min(55vw,440px);height:min(55vw,440px);background:radial-gradient(circle,rgba(0,160,140,.07) 0%,transparent 70%);bottom:-20%;right:-15%}
.nb3{width:min(30vw,260px);height:min(30vw,260px);background:radial-gradient(circle,rgba(245,158,11,.05) 0%,transparent 70%);top:30%;left:55%}
.vig{position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 25%,rgba(5,5,18,.88) 100%);pointer-events:none;z-index:1}

#stage{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;padding:2rem 1rem 6rem;will-change:transform}

.title{
  font-family:'Cinzel',serif;font-weight:400;
  font-size:clamp(.72rem,3.2vw,2.4rem);
  letter-spacing:clamp(.12em,1.4vw,.48em);
  text-transform:uppercase;text-align:center;color:var(--text);
  white-space:nowrap;animation:fadeUp 1.8s ease .2s both;
  text-shadow:0 0 18px rgba(165,190,255,.6),0 0 55px rgba(110,145,255,.3),0 0 110px rgba(80,110,220,.14),0 2px 4px rgba(0,0,12,.85),0 5px 18px rgba(0,0,22,.5);
}

#factWrap{margin-top:.9rem;min-height:1.8em;text-align:center;max-width:clamp(260px,60vw,480px)}
#factText{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(.72rem,1.2vw,.88rem);color:rgba(195,210,245,.52);letter-spacing:.05em;line-height:1.7;transition:opacity .5s,transform .5s}
#factText.out{opacity:0;transform:translateY(5px)}
#quoteWrap{margin-top:.45rem;max-width:clamp(220px,50vw,400px);text-align:center}
#quoteText{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(.6rem,.95vw,.74rem);color:rgba(167,139,250,.42);letter-spacing:.05em;line-height:1.65}

#buildingBar{margin-top:.9rem;min-height:1.4em;text-align:center}
#buildingText{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;font-size:clamp(.6rem,.95vw,.74rem);color:rgba(94,234,212,.45);letter-spacing:.06em}
#buildingText .lbl{font-family:'Cinzel',serif;font-style:normal;font-size:clamp(.42rem,.72vw,.56rem);letter-spacing:.32em;color:rgba(94,234,212,.3);text-transform:uppercase;margin-right:.4em}
#buildingText .sep{color:rgba(94,234,212,.22);margin:0 .5em}

.float-obj{position:fixed;z-index:20;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.55rem;transition:filter .3s ease;will-change:transform}
.float-obj:hover{filter:brightness(1.28)}
.deco{position:fixed;z-index:12;opacity:.45;pointer-events:none;will-change:transform}
.planet-label{text-align:center;pointer-events:none}
.planet-name{display:block;font-family:'Cinzel',serif;font-size:clamp(.4rem,.7vw,.56rem);letter-spacing:.28em;text-transform:uppercase;color:rgba(210,218,248,.65)}
.planet-desc{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.42rem,.62vw,.54rem);color:rgba(210,218,248,.28);margin-top:.18rem;letter-spacing:.04em}

#rocket{position:fixed;z-index:25;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.4rem;transition:filter .3s;will-change:transform}
#rocket:hover{filter:brightness(1.35) drop-shadow(0 0 12px rgba(94,234,212,.45))}
.rocket-lbl{font-family:'Cinzel',serif;font-size:clamp(.36rem,.6vw,.5rem);letter-spacing:.3em;text-transform:uppercase;color:rgba(94,234,212,.55);pointer-events:none}

.ctdot{position:fixed;border-radius:50%;pointer-events:none;z-index:9990;transform:translate(-50%,-50%);animation:ctFade .65s ease-out forwards}
@keyframes ctFade{0%{opacity:.85;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.15)}}

#visitCount{position:fixed;top:1.2rem;right:1.4rem;z-index:30;pointer-events:none;text-align:right}
#visitCount .vc-num{display:block;font-family:'Cinzel',serif;font-size:clamp(.52rem,.85vw,.68rem);letter-spacing:.2em;color:rgba(167,139,250,.5)}
#visitCount .vc-lbl{display:block;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.48rem,.72vw,.58rem);color:rgba(167,139,250,.28);letter-spacing:.06em;margin-top:.06rem}

#clockWrap{position:fixed;bottom:clamp(1rem,2.5vh,1.8rem);right:1.4rem;z-index:30;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:.2rem;transition:filter .25s}
#clockWrap:hover{filter:brightness(1.2)}
#clockCv{display:block}
#clockZone{font-family:'Cinzel',serif;font-size:.42rem;letter-spacing:.32em;text-transform:uppercase;color:rgba(94,234,212,.45)}

#bottomNav{position:fixed;bottom:clamp(1rem,2.5vh,1.8rem);left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:clamp(1rem,2.5vw,2rem);pointer-events:all}
#bottomNav a{font-family:'Cinzel',serif;font-size:clamp(.54rem,.95vw,.68rem);letter-spacing:.38em;text-transform:uppercase;text-decoration:none;color:var(--dim);border:1px solid rgba(210,218,248,.12);padding:.65em 1.5em;cursor:pointer;display:inline-block;transition:color .25s,border-color .25s}
#bottomNav a:hover{color:rgba(220,225,248,.88);border-color:rgba(210,218,248,.38)}

#aboutOv{display:none;position:fixed;inset:0;z-index:200;background:rgba(8,8,22,.92);backdrop-filter:blur(14px);align-items:center;justify-content:center}
#aboutOv.open{display:flex}
#aboutBox{max-width:400px;width:88%;padding:clamp(2rem,5vw,3rem) clamp(1.5rem,4vw,2.5rem);border:1px solid var(--border);background:var(--surface);text-align:center}
#aboutBox h2{font-family:'Cinzel',serif;font-size:.8rem;font-weight:400;letter-spacing:.5em;color:var(--text);margin-bottom:1.5rem}
#aboutBox p{font-family:'Cormorant Garamond',serif;font-size:.95rem;font-weight:300;color:rgba(195,210,245,.6);line-height:1.9;margin-bottom:.8rem}
#aboutBox a{color:rgba(195,210,245,.72);border-bottom:1px solid rgba(195,210,245,.22);text-decoration:none}
#closeAbout{display:inline-block;margin-top:1.5rem;font-family:'Cinzel',serif;font-size:.48rem;letter-spacing:.45em;text-transform:uppercase;color:var(--dim);cursor:pointer;background:none;border:none;transition:color .25s}
#closeAbout:hover{color:var(--text)}

#gameOv{display:none;position:fixed;inset:0;z-index:300;background:var(--bg)}
#gameOv.open{display:block}
#gameCv{position:absolute;inset:0;width:100%;height:100%;display:block}
#typerIn{position:absolute;bottom:clamp(3rem,7vh,5rem);left:50%;transform:translateX(-50%);width:clamp(220px,38vw,360px);background:rgba(12,12,32,.9);border:1px solid rgba(94,234,212,.28);color:var(--text);font-family:'Cinzel',serif;font-size:clamp(.72rem,1.3vw,.9rem);letter-spacing:.08em;padding:.6em 1em;text-align:center;outline:none;display:none;z-index:20;caret-color:var(--teal);transition:border-color .15s}
#typerIn::placeholder{color:rgba(94,234,212,.28);font-style:italic;font-family:'Cormorant Garamond',serif}
#typerIn.wrong{border-color:rgba(248,113,113,.6);animation:shake .2s ease}
#gameHUD{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:1.2rem 1.6rem;pointer-events:none;z-index:10}
.hg{display:flex;gap:2.2rem}
.hi{font-family:'Cinzel',serif;font-size:clamp(.44rem,.78vw,.6rem);letter-spacing:.32em;text-transform:uppercase;color:rgba(210,218,248,.35)}
.hv{display:block;font-size:clamp(.85rem,1.6vw,1.2rem);letter-spacing:.08em;color:rgba(210,218,248,.82);margin-top:.15rem}
#exitBtn{position:absolute;top:.9rem;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:.46rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(210,218,248,.25);background:none;border:none;cursor:pointer;z-index:20;transition:color .25s}
#exitBtn:hover{color:rgba(210,218,248,.68)}
.gs{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;z-index:15;text-align:center;padding:2rem}
.gs.show{display:flex}
.gs h2{font-family:'Cinzel',serif;font-size:clamp(.9rem,2.5vw,1.7rem);font-weight:400;letter-spacing:.4em;color:var(--text);margin-bottom:.9rem;text-shadow:0 0 40px rgba(130,160,255,.35)}
.gs p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.8rem,1.3vw,1rem);color:rgba(195,210,245,.5);line-height:1.8;max-width:380px;margin-bottom:.4rem}
.gbig{font-family:'Cinzel',serif;font-size:clamp(1.5rem,5vw,3rem);letter-spacing:.15em;color:var(--text);margin:1rem 0 .3rem;text-shadow:0 0 50px rgba(167,139,250,.55)}
.gsub{font-family:'Cinzel',serif;font-size:.55rem;letter-spacing:.38em;color:rgba(167,139,250,.6)}
.gdesc{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.8rem,1.2vw,.95rem);color:rgba(195,210,245,.4);margin-top:.6rem}
.gbtn{margin-top:1.8rem;font-family:'Cinzel',serif;font-size:clamp(.56rem,.9vw,.7rem);letter-spacing:.4em;text-transform:uppercase;color:var(--dim);background:none;border:1px solid rgba(210,218,248,.18);padding:.7em 2em;cursor:pointer;transition:color .25s,border-color .25s}
.gbtn:hover{color:var(--text);border-color:rgba(210,218,248,.5)}
.drow{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}
.dbtn{font-family:'Cinzel',serif;font-size:clamp(.5rem,.82vw,.64rem);letter-spacing:.32em;text-transform:uppercase;color:rgba(210,218,248,.35);background:none;border:1px solid rgba(210,218,248,.14);padding:.58em 1.3em;cursor:pointer;transition:all .25s}
.dbtn:hover,.dbtn.sel{color:var(--teal);border-color:rgba(94,234,212,.55);box-shadow:0 0 14px rgba(94,234,212,.18)}
.lives{display:flex;gap:.52rem;margin:1rem 0;pointer-events:none}
.ldot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 7px var(--teal)}
#memMsg{position:absolute;bottom:10%;left:50%;transform:translateX(-50%);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(.75rem,1.2vw,.9rem);color:rgba(94,234,212,.65);pointer-events:none;z-index:10;white-space:nowrap;min-height:1.4em}

@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes shake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 6px))}75%{transform:translateX(calc(-50% + 6px))}}
@media(max-width:600px){.deco{display:none}#visitCount{top:.8rem;right:.8rem}#clockWrap{bottom:3.5rem;right:.8rem}}