:root{
  --bg:#030611;
  --bg2:#070b18;
  --cyan:#00e5ff;
  --magenta:#ff00aa;
  --panel: rgba(255,255,255,0.06);
  --panel-bright: rgba(255,255,255,0.14);
  --text:#cfefff;
  --muted:#77a5b6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 600px at 50% 50%, var(--bg2), var(--bg));
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  overflow:hidden;
}

#stars{
  position:fixed; inset:0; width:100%; height:100%;
  display:block;
}
#system{
  position:fixed; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}
#tunnel{
  position:fixed; inset:0; width:100%; height:100%; pointer-events:none;
  transform-box: fill-box; transform-origin: 50% 50%;
}

#cockpit{
  position:fixed; inset:0; pointer-events:none;
}
#hud{ width:100%; height:100%; opacity:0 }

#ui{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(420px, 86vw);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.18);
  border-radius:16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), inset 0 0 60px rgba(0, 229, 255, 0.08);
  backdrop-filter: blur(10px) saturate(120%);
  padding:28px 24px 24px;
  text-align:center;
}
#ui h1{
  font-family: Orbitron, Inter, sans-serif; letter-spacing: 0.18em; margin:0 0 8px; font-size:32px;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text; background-clip:text; color:transparent;
}
#ui .tag{ margin:0 0 18px; color:var(--muted); font-size:14px; letter-spacing:0.12em }
#ui label{ display:block; text-align:left; margin:12px 0 }
#ui label span{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px }
#ui input{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,0.18);
  background:rgba(10,18,32,0.6); color:var(--text); outline:none;
  box-shadow: inset 0 0 12px rgba(0,229,255,0.08);
}
#ui input:focus{ border-color: var(--cyan); box-shadow: inset 0 0 18px rgba(0,229,255,0.18), 0 0 0 3px rgba(0,229,255,0.12) }
#ui button{
  margin-top:18px; width:100%; padding:12px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,0.2); color:#00141b; font-weight:700;
  background: linear-gradient(90deg, var(--magenta), var(--cyan)); cursor:pointer;
  text-transform:uppercase; letter-spacing:0.12em;
}
#ui .hint{ margin:10px 0 0; color:var(--muted); font-size:12px }

#arrival{
  position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,0.6);
}
#arrival[hidden]{ display:none }
#arrival .inner{
  padding:24px 28px; border-radius:16px; background:var(--panel);
  border:1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px);
  text-align:center; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
#arrival h2{ font-family: Orbitron, Inter, sans-serif; letter-spacing:0.18em; margin:0 0 10px }
#arrival button{ margin-top:14px; padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,0.18); cursor:pointer }

/* Small helpers */
.hidden{ display:none !important }

/* Info footer */
#info{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:10;
}
#info .inner{
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.18);
  border-radius:12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5), inset 0 0 40px rgba(0, 229, 255, 0.06);
  backdrop-filter: blur(10px) saturate(120%);
  padding:10px 14px;
  max-width:min(820px, 92vw);
}
#info .blurb{
  margin:0 0 6px; font-size:12px; color:var(--muted);
}
#info .links{ margin:0; font-size:12px }
#info a{ color:var(--text); text-decoration:none; border-bottom:1px dotted rgba(255,255,255,0.25) }
#info a:hover{ color:#fff; border-bottom-color: rgba(255,255,255,0.5) }
#info .dot{ margin:0 8px; color:var(--muted) }