:root{
  --bg-dark:#02101a;
  --card:#071826;
  --accent:#00ffd1;
  --accent2:#ffd600;
  --glass: rgba(255,255,255,0.03);
  --text:#d8f7f0;
}
*{box-sizing:border-box}
html,body{height:100%; margin:0; font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{
  background: linear-gradient(180deg,#00101b 0%, #021424 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.topbar{
  position:sticky; top:0; z-index:1000; display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; gap:12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.18));
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.brand{display:flex; align-items:center; gap:12px}
.logo{
  width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg,var(--accent), #0077ff); color:#012; font-weight:900; font-family:monospace;
}
.title{font-weight:700}
.nav a{color:var(--accent); text-decoration:none; margin-left:12px; font-weight:700}
.wrap{max-width:1100px; margin:18px auto; padding:0 18px 80px}

.hero{display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px}
.hero h1{font-size:1.5rem; margin:0}
.hero p{margin:4px 0 0; color:#bfeee5}
.hero-actions{display:flex; gap:8px}
.btn{background:var(--accent); color:#012; border:none; padding:10px 14px; border-radius:12px; cursor:pointer; font-weight:800}
.btn-ghost{background:transparent; color:var(--accent); border:1px solid rgba(255,255,255,0.04)}

.panel{background:var(--card); padding:14px; border-radius:12px; margin-bottom:16px; border:1px solid rgba(255,255,255,0.02)}
.muted{color:#bfeee5}

.panWrap{position:relative; width:100%; height:380px; border-radius:10px; overflow:hidden; background:linear-gradient(180deg,#001218,#021428); border:1px solid rgba(255,255,255,0.03)}
.panorama{
  position:absolute; left:0; top:0; height:100%; width:300%; /* wide panorama synthesized by JS; width expresses panorama length */
  background-repeat:no-repeat; background-size:cover; transform:translateX(0);
  will-change: transform;
}

/* hotspots */
.hotspot{
  position:absolute; pointer-events:none; transform:translate(-50%,-50%); display:none;
  background:linear-gradient(180deg, rgba(0,0,0,0.6), rgba(255,255,255,0.02));
  border-radius:10px; padding:8px 12px; font-weight:800; font-size:0.95rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.02);
}

/* weightless */
.weightArea{height:320px; border-radius:10px; background:linear-gradient(180deg,#04161c,#01222a); position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.02)}
.floating{
  position:absolute; user-select:none; cursor:pointer; transition: transform 0.12s linear; font-size:1.6rem;
  will-change: transform;
}

/* cards */
.cards{display:flex; gap:12px; margin-top:12px; flex-wrap:wrap}
.card{flex:1; min-width:200px; padding:12px; border-radius:10px; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02)); border:1px solid rgba(255,255,255,0.02)}

/* game */
.gameArea{height:360px; border-radius:10px; background:linear-gradient(180deg,#02111a,#001218); position:relative; overflow:hidden; border:1px solid rgba(255,255,255,0.03)}
.hud{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px; align-items:center}
.controls{display:flex; gap:8px; margin-top:12px}

.astro{position:absolute; font-size:2.2rem; cursor:pointer; user-select:none; text-shadow: 0 8px 20px rgba(0,0,0,0.6)}
.hint{margin-top:8px; color:#9fe8dd; font-size:0.95rem}
.footer{margin-top:22px; text-align:center; color:#9fe8dd; opacity:0.9; padding-bottom:40px}

/* small screens */
@media (max-width:800px){
  .hero{flex-direction:column; align-items:flex-start}
  .panWrap{height:260px}
  .panorama{width:360%}
  .gameArea{height:280px}
}