:root{
  --navy:#071b49; --blue:#1459ff; --cyan:#55d8ff; --gold:#f7c948;
  --white:#ffffff; --muted:#dce8ff; --ink:#10213f;
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; display:grid; place-items:center; padding:18px;
  font-family:Inter,Arial,sans-serif; color:var(--white);
  background:radial-gradient(circle at 20% 10%,#246bff55,transparent 28%),
             radial-gradient(circle at 90% 80%,#f7c94844,transparent 30%),
             linear-gradient(145deg,#061638,#12377e 55%,#0b1c42);
  overflow-x:hidden;
}
.stars:before,.stars:after{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:34px 34px; opacity:.14; animation:drift 18s linear infinite;
}
.stars:after{background-size:58px 58px; opacity:.1; animation-duration:28s}
@keyframes drift{to{transform:translateY(60px)}}
.phone{
  width:min(430px,100%); min-height:760px; border-radius:38px; padding:18px;
  background:linear-gradient(180deg,#0c255f,#071b49);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 35px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.06);
  position:relative;
}
.topbar{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:14px;margin:4px 4px 14px;color:#eaf2ff}
#xp{background:rgba(247,201,72,.18);border:1px solid rgba(247,201,72,.55);color:#ffe596;border-radius:999px;padding:7px 10px}
.screen{
  display:none; min-height:670px; border-radius:28px; padding:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(241,247,255,.94));
  color:var(--ink); box-shadow:inset 0 0 0 1px rgba(10,40,100,.08);
  animation:enter .35s ease;
}
.screen.active{display:block}
@keyframes enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.hero-orb{
  width:116px;height:116px;border-radius:36px;display:grid;place-items:center;
  font-size:58px;margin:22px auto;background:linear-gradient(135deg,#ffeaa0,#55d8ff);
  box-shadow:0 18px 45px rgba(20,89,255,.25); animation:float 2.4s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-8px)}}
.kicker{text-transform:uppercase;letter-spacing:.12em;font-weight:1000;color:#1459ff;font-size:13px}
h1{font-size:42px;line-height:1.02;margin:12px 0 14px}
h2{font-size:31px;line-height:1.08;margin:8px 0 18px}
p{font-size:18px;line-height:1.45}
label,.question{display:block;font-weight:900;margin:15px 0 8px}
input,textarea{
  width:100%;border:2px solid #d7e3ff;border-radius:18px;padding:14px 15px;
  font-size:16px;margin-bottom:9px;background:white;outline:none;color:#10213f;
}
textarea{min-height:78px;resize:vertical}.big{min-height:128px}
button{
  border:0;border-radius:18px;padding:15px 18px;font-weight:1000;font-size:16px;cursor:pointer;
  background:linear-gradient(135deg,#1764ff,#071b49);color:white;margin-top:14px;width:100%;
  box-shadow:0 14px 30px rgba(20,89,255,.28); transition:.15s ease;
}
button:hover{transform:translateY(-1px)}
button:disabled{opacity:.65;cursor:not-allowed}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choices button{
  background:#eef5ff;color:#12377e;box-shadow:none;border:2px solid #d8e6ff;margin:0;padding:13px 10px;
}
.choices button.selected{background:#fff0bd;border-color:#f7c948;color:#4a3600}
.progress{height:12px;background:#e5ecff;border-radius:999px;overflow:hidden;margin-bottom:20px}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#2ee59d);border-radius:999px}
.success{text-align:center;display:none;place-items:center}
.success.active{display:grid}
.medal{font-size:92px;filter:drop-shadow(0 18px 22px rgba(247,201,72,.35));animation:popmedal .8s ease}
@keyframes popmedal{0%{transform:scale(.2) rotate(-16deg);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1)}}
.small{opacity:.75}.error{color:#b42318;font-size:14px;font-weight:900}
.confetti-piece{
  position:fixed;width:10px;height:14px;background:#f7c948;top:-20px;border-radius:3px;
  animation:fall 1.4s ease-in forwards;z-index:20;
}
@keyframes fall{to{transform:translateY(105vh) rotate(520deg);opacity:0}}
@media(max-height:780px){.phone{min-height:auto}.screen{min-height:620px}}