[hidden]{display:none!important}
:root{
  --bg-from: #0d1631; --bg-to:#030813;
  --text:#e8eeff; --muted:#a3b1d1;
  --good:#25d366; --bad:#ff3b30;
  --shadow: rgba(0,0,0,.45);
  --accent: #ff7a18; --accent2:#4dc3ff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,Noto Sans;
  background: radial-gradient(1200px 900px at 20% 10%, #142149 0%, var(--bg-from) 40%, var(--bg-to) 100%);
  overflow:hidden;
}
#stars{position:fixed; inset:0; z-index:0; display:block}

/* HUD */
.hud{ position:fixed; inset:0 0 auto 0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; z-index:3 }
.hud .ghost{ background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:var(--text); padding:8px 12px; border-radius:10px; cursor:pointer }
.score{ min-width:42px; text-align:center; font-weight:700; background: rgba(0,0,0,0.35); padding:8px 10px; border-radius:12px; border:1px solid rgba(255,255,255,0.18) }
/* Equal, centered icon buttons */
#btnHelp.icon, #btnReset.icon{ width:52px; height:52px; padding:0; display:grid; place-items:center; font-size:26px; line-height:1; font-weight:900; border-radius:14px }
#btnHelp.icon{ font-size:24px }

.dots{ display:flex; gap:8px; align-items:center; justify-content:center }
.dots .dot{ width:10px; height:10px; border-radius:50%; background:#6272a4; opacity:.7; border:1px solid rgba(255,255,255,.25) }
.dots .dot.good{ background: var(--good); opacity:1 }
.dots .dot.bad{ background: var(--bad); opacity:1 }
.dots .dot.active{ box-shadow:0 0 0 6px rgba(255,255,255,0.08) }

/* Screens */
#app{ position:relative; z-index:2; width:100%; height:100% }
.screen{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; padding: clamp(10px,4vw,28px) }
.screen.active{ display:flex }
.card{
  width:min(900px,92vw);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(8px);
  padding: clamp(14px,4vw,28px);
  border-radius:18px; box-shadow: 0 10px 30px var(--shadow);
}
h1{ margin:0 0 8px 0; font-size: clamp(28px,6vw,40px) }
.subtitle{ color:var(--muted); margin:0 0 12px 0 }
.rules{ color:var(--muted); margin:0 0 16px 0; padding-left:18px }
.badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 12px; background: rgba(255,255,255,0.08); border-radius:999px }
.badge::before{ content:''; width:12px; height:12px; border-radius:50%; background: var(--accent2) }

.primary,.secondary,.ghost{ font-weight:700; letter-spacing:.2px; border-radius:12px; cursor:pointer; border:none; padding:14px 18px }
.primary{ background: linear-gradient(90deg, var(--accent), #ffb703); color:#0f0f0f; border:1px solid rgba(255,255,255,0.25) }
.secondary{ background: rgba(255,255,255,0.08); color:var(--text); border:1px solid rgba(255,255,255,0.25) }

/* Map */
.track{ position:absolute; inset:0; overflow:hidden; will-change: transform }
.planet-card{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center }
.planet{ width: min(68vw, 560px); max-height: 68vh; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(0,0,0,.55)) }
.planet-label{ position:absolute; top:10%; left:50%; transform:translateX(-50%); font-weight:700; color:#cde7ff; font-size: clamp(16px, 3.2vw, 24px) }

.enter-right{ animation: enterRight 700ms cubic-bezier(.22,.74,.29,.99) both }
.exit-left{ animation: exitLeft 700ms cubic-bezier(.22,.74,.29,.99) both; pointer-events:none }
@keyframes enterRight{ from{ transform: translateX(100%); opacity:0 } to{ transform: translateX(0); opacity:1 } }
@keyframes exitLeft { from{ transform: translateX(0); opacity:1 } to{ transform: translateX(-100%); opacity:0 } }

/* Quiz */
.answers{ display:grid; grid-template-columns:1fr; gap:10px }
.answers button{ text-align:left; background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2); color:var(--text); padding:12px 14px; border-radius:12px }
.answers button.correct{ outline:2px solid var(--good) }
.answers button.wrong{ outline:2px solid var(--bad) }
.q-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:12px }

/* Overlay */
.overlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(3,8,19,0.55); backdrop-filter: blur(3px); z-index:5 }
.result{ background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.18); border-radius:18px; padding:22px; width:min(560px,92vw); text-align:center; box-shadow: 0 10px 30px var(--shadow) }
.result img{ width:min(38vw, 220px) }

/* Final */
.progressbar{ height:12px; width:100%; background: rgba(255,255,255,0.12); border-radius:999px; overflow:hidden; margin:12px 0 6px }
.progressbar>div{ height:100%; width:0; background: linear-gradient(90deg, #23d5ab, #a7ff83) }

/* CTA fixed at bottom */
.cta{
  position:absolute; left:0; right:0;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding: 0 16px;
  display:flex; gap:12px; justify-content:center;
  z-index: 9;
  pointer-events: none;
}
.cta > *{ pointer-events:auto }

@media (min-width:740px){ .answers{ grid-template-columns:1fr 1fr } }