/* base reset */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);height:100%}
html{height:100%;-webkit-text-size-adjust:100%}
body{margin:0;font:14px system-ui,-apple-system,sans-serif}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: one full-screen stage, screens swap inside it; deep-space single theme */
:root{
  --space:#0d1033; --space2:#1c1f5c; --ink:#f4f1ff; --muted:#a9a6d6;
  --flame:#ffb02e; --rocket:#ff5d73; --mint:#4fe3c1; --ground:#3a2f6b;
  --display:"Baloo 2","Arial Rounded MT Bold","Arial Black",sans-serif; --body:"Nunito",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:radial-gradient(ellipse at 50% 120%,var(--space2),var(--space) 70%);color:var(--ink);font-family:var(--body);overflow:hidden;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#app{transform-origin:0 0}
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.screen{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;gap:18px;padding-block:20px;text-align:center;overflow-y:auto}
h1,h2{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(30px,8vw,52px);line-height:1.05}
h2{font-size:clamp(22px,6vw,34px)}
p{margin:0;color:var(--muted);font-size:17px;max-width:32ch}
button{font:inherit;cursor:pointer;border:0}
button:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.btn{background:var(--rocket);color:#fff;font-family:var(--display);font-size:22px;padding:16px 28px;border-radius:999px;box-shadow:0 6px 0 #b8344a;transition:transform .1s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #b8344a}
.btn:disabled{opacity:.4}
.btn2{background:transparent;color:var(--ink);font-family:var(--display);font-size:20px;padding:14px 26px;border-radius:999px;border:3px solid var(--muted)}
.btn2:active{background:#1c1f5c}
.actions{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(320px,100%)}
.actions button{width:100%}
.onpl{position:relative;padding-top:40px}
.stand{position:absolute;left:50%;top:0;transform:translateX(-50%);z-index:1;display:flex;white-space:nowrap}
.final span{max-width:220px;text-wrap:balance}
.final small{color:var(--muted);font-weight:800}
.ghost{border:2px solid var(--space2);border-radius:999px;padding:12px 22px!important;font-size:17px;background:transparent;color:var(--muted);font-weight:800;padding:8px}
.counts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.counts{max-width:350px}
.counts button{width:56px;height:56px;border-radius:50%;background:var(--space2);color:var(--ink);font-family:var(--display);font-size:28px;border:3px solid transparent}
.counts button.on{border-color:var(--flame);background:#2c2f7a}
input[type=text]{font:inherit;font-size:22px;font-weight:800;text-align:center;width:min(320px,100%);padding:12px;border-radius:16px;border:3px solid var(--space2);background:#151845;color:var(--ink)}
.face{width:120px;height:120px;border-radius:50%;background:#151845 center/cover;border:4px dashed var(--muted);display:grid;place-items:center;font-size:44px;cursor:pointer}
.face.has{border:4px solid var(--flame)}
.planets{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:min(420px,100%)}
.planets button{background:transparent;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 2px;border-radius:14px;font-size:13px;font-weight:800;border:2px solid transparent}
.planets button.on{border-color:var(--flame);background:#1c1f5c}
.pl{border-radius:50%;flex:none}
/* launchpad */
.pad{position:relative;flex:1;width:100%;max-width:560px;min-height:420px}
.ground{position:absolute;left:-40px;right:-40px;bottom:0;height:120px;background:var(--ground);border-radius:50% 50% 0 0/40px 40px 0 0}
.crew{position:absolute;bottom:20px;left:0;right:0;display:flex;justify-content:center;gap:4px;flex-wrap:nowrap}
.astro{background:transparent;display:flex;flex-direction:column;align-items:center;width:auto;min-width:0;transition:transform .5s,opacity .5s}
.astro small{font-weight:800;color:var(--ink);font-size:12px;max-width:60px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.astro.next{animation:grow .45s cubic-bezier(.3,1.6,.5,1) both,hop 1s .45s infinite;z-index:5;transform-origin:50% 100%}
.astro.next svg{filter:drop-shadow(0 0 10px rgba(255,211,77,.9)) drop-shadow(0 0 3px #ffd34d)}
.crew:has(.next) .astro:not(.next):not(.gone){opacity:.55;transform:scale(.88);transform-origin:50% 100%}
.astro.next small{color:var(--flame)}
.astro.gone{opacity:0;transform:translateY(-120px) scale(.4);pointer-events:none}
@keyframes hop{0%,100%{transform:translateY(8px) scale(1.45)}50%{transform:translateY(-4px) scale(1.45)}}
@keyframes grow{from{transform:scale(1)}to{transform:translateY(8px) scale(1.45)}}
.launch-rocket{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);transition:transform .6s}
.hangar{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;min-height:110px}
.hint{font-weight:800;color:var(--flame);font-size:18px}
.bigstart{position:fixed;inset:0;z-index:5;background:radial-gradient(circle,#3ee07a,#139a49);color:#fff;font-family:var(--display);font-size:clamp(60px,20vw,140px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.bigstart span{font-family:var(--body);font-size:20px;font-weight:800;opacity:.85}
.fleet{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:6px;padding-bottom:95px}
.fly{animation:fly 2.6s cubic-bezier(.5,0,.8,.6) forwards}
@keyframes fly{0%{transform:translateY(0)}15%{transform:translateY(6px)}100%{transform:translateY(-130vh)}}
.flame{transform-box:view-box;transform-origin:50px 150px;animation:ignite .8s cubic-bezier(.2,.8,.3,1.15) both}
@keyframes ignite{0%{transform:scale(.25,0);opacity:0}40%{opacity:1}100%{transform:none;opacity:1}}
.flame .core{animation:glow .7s .8s ease-in-out infinite alternate}
@keyframes glow{to{opacity:.7}}
.smoke{position:absolute;width:0;height:0;pointer-events:none;z-index:3}
.puff{position:absolute;left:0;top:0;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffffff,#eef1fa 55%,#c9d0e8);box-shadow:inset 0 -4px 0 rgba(110,120,175,.18);opacity:0;
  animation:puff var(--t,3.4s) ease-out var(--d) forwards}
@keyframes puff{0%{transform:scale(.1);opacity:0}12%{opacity:1}55%{transform:translate(var(--dx),var(--dy)) scale(1);opacity:1}100%{transform:translate(calc(var(--dx) * 1.5),calc(var(--dy) - 18px)) scale(1.3);opacity:0}}
.cruise{position:fixed;inset:0;z-index:2;overflow:hidden}
.cruise canvas{position:absolute;inset:0;width:100%;height:100%}
.cr{position:absolute;left:0;top:0;will-change:transform}
.cr svg{transform:rotate(90deg)}
.cruise h2{position:absolute;left:0;right:0;top:calc(20px + env(safe-area-inset-top,0px))}
.walker{position:absolute;width:52px;height:75px;transform-origin:50% 100%}
.wkin{opacity:0}
.walker.out .wkin{animation:out 1.4s ease-out forwards}
@keyframes out{0%{opacity:0;transform:translate(-70px,-50px) scale(.5)}40%{opacity:1;transform:translate(-40px,-60px) scale(1)}75%{transform:translate(0,0)}88%{transform:translateY(-8px)}100%{opacity:1;transform:none}}
.walker.wave svg{animation:wave .6s ease-in-out 3 alternate}
@keyframes wave{to{transform:rotate(-8deg)}}
.cd{height:120px;font-family:var(--display);font-size:110px;line-height:120px;color:#3ee07a;flex:none}
.count{font-family:var(--display);font-size:min(40vw,240px);color:var(--flame);position:fixed;inset:0;display:grid;place-items:center;z-index:6;pointer-events:none}
/* landing */
.screen>*{flex-shrink:0}
.landscreen{gap:12px}
.land{position:relative;flex:1 0 auto;width:100%;max-width:560px;min-height:400px;overflow:hidden}
.land .big{bottom:auto}
.factbox{position:absolute;left:0;right:0;bottom:0;padding:12px 6px 10px;border-radius:22px;background:rgba(13,16,51,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:2}
.factbox .facts{width:100%}
.sheet{position:fixed;inset:0;z-index:20;background:rgba(5,6,25,.7);display:flex;align-items:flex-end;justify-content:center}
.sheetin{width:min(560px,100%);background:var(--space);border-radius:28px 28px 0 0;padding:22px max(16px,env(safe-area-inset-left,0px)) calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;max-height:90%;overflow-y:auto}
.land .big{position:absolute;left:50%;transform:translateX(-50%)}
.descend{position:absolute;width:80px;height:125px;transform-origin:50% 100%}
.dsin{transform:translateY(-600px)}
.descend.go .dsin{animation:down 2.4s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes down{to{transform:none}}
.km{font-family:var(--display);font-size:clamp(26px,8vw,44px);color:var(--mint);font-variant-numeric:tabular-nums}
.facts{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;width:min(440px,100%)}
.facts[hidden]{display:none!important}
.fwrap{overflow:hidden;border-radius:18px}
.ftrack{display:flex;transition:transform .35s ease}
.ftrack .fact{flex:0 0 100%;box-sizing:border-box;max-width:none;min-height:84px;display:grid;place-items:center}
.arr{width:44px;height:44px;border-radius:50%;background:#1c1f5c;color:var(--ink);font-size:28px;line-height:1}
.arr:active{background:#2c2f7a}
.dots{grid-column:1/-1;display:flex;justify-content:center;gap:8px}
.dots span{width:8px;height:8px;border-radius:50%;background:var(--space2);transition:background .2s,width .2s}
.dots span.on{background:var(--flame);width:20px;border-radius:4px}
.fact{background:#1c1f5c;border-radius:18px;padding:14px 18px;color:var(--ink);font-size:17px;max-width:34ch}
.final{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:22px 16px;width:min(560px,100%)}
.final div{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:800}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition:none!important}}

/* ===== toy-3D theme ===== */
:root{--space:#101a5c;--space2:#22318f;--ink:#ffffff;--muted:#b9c6ff;--flame:#ffd34d;--rocket:#ff6a2b;--mint:#7be3a0;--navy:#1d2a6b}
body{background:radial-gradient(120% 80% at 50% -10%,#3346b8 0%,#1a2678 45%,#0c1446 100%)}
h1,h2{font-weight:800;letter-spacing:.01em}
h1{font-size:clamp(40px,11vw,64px);line-height:.95;color:#fff;
  text-shadow:3px 0 0 #ff6a2b,-3px 0 0 #ff6a2b,0 3px 0 #ff6a2b,0 -3px 0 #ff6a2b,2px 2px 0 #ff6a2b,-2px 2px 0 #ff6a2b,2px -2px 0 #ff6a2b,-2px -2px 0 #ff6a2b,0 7px 0 #c2400f,0 12px 18px rgba(0,0,20,.45)}
h1 .b{color:#ffd34d;text-shadow:3px 0 0 #3b6df0,-3px 0 0 #3b6df0,0 3px 0 #3b6df0,0 -3px 0 #3b6df0,2px 2px 0 #3b6df0,-2px 2px 0 #3b6df0,2px -2px 0 #3b6df0,-2px -2px 0 #3b6df0,0 7px 0 #1f3fa8,0 12px 18px rgba(0,0,20,.45)}
h2{color:#fff;text-shadow:0 3px 0 rgba(0,0,30,.35)}
p{color:var(--muted);font-weight:600}
.btn{font-family:var(--display);font-weight:800;font-size:23px;color:#fff;padding:14px 30px 12px;border-radius:999px;
  background:linear-gradient(180deg,#ffa25a 0%,#ff6a2b 55%,#f2521a 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(160,40,0,.25),0 6px 0 #b9380c,0 12px 20px rgba(0,0,30,.35);
  text-shadow:0 2px 0 rgba(150,40,0,.4)}
.btn:active{transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.55),0 2px 0 #b9380c,0 5px 10px rgba(0,0,30,.3)}
.btn2,.ghost{font-family:var(--display);font-weight:800;font-size:20px;color:#2a44c4;padding:12px 26px 10px;border:0;border-radius:999px;
  background:linear-gradient(180deg,#ffffff 0%,#e3e9ff 100%);box-shadow:inset 0 -3px 0 rgba(42,68,196,.12),0 5px 0 #8e9fe6,0 10px 18px rgba(0,0,30,.3)}
.ghost{font-size:17px;padding:10px 20px 8px!important}
.btn2:active,.ghost:active{transform:translateY(3px);box-shadow:0 2px 0 #8e9fe6}
.counts{gap:12px}
.counts button{width:58px;height:58px;font-family:var(--display);font-weight:800;font-size:28px;color:#fff;border:0;
  background:radial-gradient(circle at 35% 30%,#5b74ff,#2b3fc0 70%);box-shadow:inset 0 -4px 0 rgba(0,0,40,.25),0 5px 0 #18238a}
.counts button.on{background:radial-gradient(circle at 35% 30%,#ffc46e,#ff6a2b 70%);box-shadow:inset 0 -4px 0 rgba(120,30,0,.25),0 5px 0 #b9380c}
input[type=text]{border:0;background:#fff;color:var(--navy);box-shadow:inset 0 3px 6px rgba(0,0,40,.15),0 5px 0 #8e9fe6;border-radius:20px}
input[type=text]::placeholder{color:#9aa6d6}
.face{background-color:rgba(255,255,255,.12);border:4px dashed #b9c6ff}
.face.has{border:4px solid #ffd34d;box-shadow:0 0 0 6px rgba(255,211,77,.25)}
.planets button{color:#fff;padding:8px 2px 6px;border-radius:18px;background:rgba(255,255,255,.07);border:3px solid transparent;font-family:var(--display);font-size:14px}
.planets button.on{border-color:#ffd34d;background:rgba(255,211,77,.16)}
.ground{left:-60px;right:-60px;height:130px;border-radius:50% 50% 0 0/50px 50px 0 0;
  background:
   radial-gradient(ellipse 22px 8px at 18% 40%,#1f3a9e 60%,transparent 62%),
   radial-gradient(ellipse 14px 5px at 70% 30%,#1f3a9e 60%,transparent 62%),
   radial-gradient(ellipse 30px 10px at 85% 70%,#1f3a9e 60%,transparent 62%),
   radial-gradient(ellipse 18px 6px at 40% 78%,#1f3a9e 60%,transparent 62%),
   radial-gradient(ellipse 10px 4px at 55% 52%,#1f3a9e 60%,transparent 62%),
   linear-gradient(180deg,#5b86ff 0%,#3360e0 25%,#2747b8 100%);
  box-shadow:inset 0 6px 0 rgba(255,255,255,.25)}
.hint{color:#ffd34d}
.astro.next small{color:#ffd34d}
.bigstart{font-weight:800;background:radial-gradient(circle at 50% 40%,#8af0a8 0%,#36c763 45%,#159a44 100%);
  text-shadow:0 6px 0 #0d7a33,0 12px 24px rgba(0,40,10,.4)}
.bigstart::before{content:"";position:absolute;width:min(70vw,420px);aspect-ratio:1;border-radius:50%;border:10px solid rgba(255,255,255,.25);box-shadow:inset 0 0 0 18px rgba(255,255,255,.12)}
.cd{font-family:var(--display);font-weight:800;color:#ffd34d;
  text-shadow:4px 0 0 #ff6a2b,-4px 0 0 #ff6a2b,0 4px 0 #ff6a2b,0 -4px 0 #ff6a2b,3px 3px 0 #ff6a2b,-3px 3px 0 #ff6a2b,3px -3px 0 #ff6a2b,-3px -3px 0 #ff6a2b,0 9px 0 #c2400f}
.km{font-weight:800;color:#ffd34d;text-shadow:0 4px 0 #c2400f}
.factbox{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;padding:8px 2px}
.fact{background:linear-gradient(180deg,#ffffff,#eef2ff);color:var(--navy);font-weight:800;font-size:18px;line-height:1.3;border-radius:22px;box-shadow:inset 0 -4px 0 rgba(42,68,196,.1)}
.fwrap{border-radius:22px;box-shadow:0 5px 0 #8e9fe6,0 12px 22px rgba(0,0,30,.35)}
.arr{color:#fff;font-size:30px;font-weight:800;background:radial-gradient(circle at 35% 30%,#ffb06e,#ff6a2b 70%);box-shadow:inset 0 -3px 0 rgba(120,30,0,.25),0 4px 0 #b9380c}
.arr:active{transform:translateY(3px);box-shadow:0 1px 0 #b9380c}
.dots span{background:rgba(255,255,255,.3)}
.dots span.on{background:#ffd34d}
.sheetin{background:linear-gradient(180deg,#2a3cb0,#16216a)}
.cpl{position:absolute;left:0;top:0;will-change:transform}
.final div{font-family:var(--display)}

.podium{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:4px}
.pcrew{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:0;margin-bottom:-12px;position:relative;z-index:2;padding-inline:10px}
.pa{margin-inline:-1px;animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes pop{from{transform:translateY(-30px) scale(.6);opacity:0}}
.ptop{width:100%;height:26px;border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#ffffff,#dfe5f7 70%,#c3cbe6);box-shadow:inset 0 -3px 0 rgba(42,68,196,.15);position:relative;z-index:1}
.pbody{width:100%;margin-top:-13px;padding:18px 10px 12px;border-radius:0 0 24px 24px/0 0 14px 14px;background:linear-gradient(180deg,#4f7bff,#2747c8 70%,#1d36a3);box-shadow:inset 0 4px 0 rgba(255,255,255,.2),0 10px 22px rgba(0,0,30,.4);display:flex;flex-direction:column;align-items:center;gap:8px}
.pmedal{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:32px;color:#a3530b;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd34d 45%,#f0a21b);box-shadow:inset 0 -3px 0 rgba(150,70,0,.3),0 4px 0 #b86d0c}
.plights{display:flex;justify-content:space-between;width:100%;padding-inline:4px}
.plights i{width:9px;height:9px;border-radius:50%;background:#fff6c8;box-shadow:0 0 8px 3px rgba(255,236,150,.8);animation:blink 1.2s infinite alternate}
.plights i:nth-child(2n){animation-delay:.6s}
@keyframes blink{to{opacity:.45}}
.board{width:min(440px,100%);background:linear-gradient(180deg,#ffffff,#eef2ff);border-radius:24px;padding:14px;box-shadow:0 6px 0 #8e9fe6,0 14px 26px rgba(0,0,30,.35);display:flex;flex-direction:column;gap:10px;color:var(--navy);text-align:left}
.bhead{display:flex;justify-content:space-between;font-family:var(--display);font-weight:800;font-size:22px;padding-inline:4px}
.row{display:grid;grid-template-columns:40px 40px minmax(0,1fr) auto;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:8px 12px 8px 8px;box-shadow:0 3px 0 #d7defa}
.medal{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:22px;color:#a3530b;background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd34d 45%,#f0a21b);box-shadow:inset 0 -2px 0 rgba(150,70,0,.3),0 3px 0 #b86d0c}
.rinfo{min-width:0;display:flex;flex-direction:column;gap:3px}
.rinfo b{font-family:var(--display);font-size:18px;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rinfo small{color:#5a67a8;font-weight:700;font-size:12px;font-variant-numeric:tabular-nums}
.bar{height:12px;border-radius:999px;background:#e3e8fb;overflow:hidden;box-shadow:inset 0 2px 3px rgba(0,0,40,.12)}
.fill{height:100%;width:0;border-radius:999px;background:linear-gradient(180deg,#ffe680,#f5b324);box-shadow:inset 0 2px 0 rgba(255,255,255,.6);transition:width 1.2s cubic-bezier(.3,.8,.3,1)}
.fill.full{width:100%}
.pct{font-family:var(--display);font-weight:800;font-size:18px;color:#2fbf86}

.parked{position:absolute;inset:0;pointer-events:none}
.slot{position:absolute;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center}
.slot svg{position:relative;animation:park .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes park{from{transform:translateY(-6px)}}
.spot{position:absolute;left:50%;bottom:-5px;width:120%;height:10px;transform:translateX(-50%);border-radius:50%;background:rgba(10,20,80,.35);border:2px dashed rgba(255,255,255,.35)}
.slot:has(svg) .spot{border-color:transparent}
.launch-rocket{transform-origin:50% 100%}
.launch-rocket.enter{animation:rise .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes rise{from{transform:translateX(-50%) translateY(40px) scale(.4);opacity:0}}
.launch-rocket::after{content:"";position:absolute;left:50%;bottom:-6px;width:84px;height:14px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(255,211,77,.55),transparent 70%);z-index:-1}

.screen{overflow-x:hidden}
.pad{overflow:visible}
.earthclip{position:absolute;left:-60px;right:-60px;bottom:0;overflow:hidden;pointer-events:none}
.earth{position:absolute}
.earth svg{display:block}
.cloud{position:absolute;left:-30%;width:90px;height:30px;border-radius:30px;background:#fff;opacity:.85;box-shadow:22px -12px 0 4px #fff,48px -2px 0 -2px #fff,inset 0 -5px 0 rgba(140,160,220,.25);animation:drift var(--d) linear infinite;pointer-events:none}
.cloud.c2{transform:scale(.7);animation-delay:-20s;opacity:.7}
@keyframes drift{to{left:120%}}
.slot{transform-origin:50% 100%}
.rk{display:flex;align-items:flex-end}
.spot{background:rgba(20,60,20,.3);border-color:rgba(255,255,255,.5)}
.slot.lu{transition:left .9s cubic-bezier(.4,1.3,.5,1),bottom .9s cubic-bezier(.4,1.3,.5,1),transform .9s cubic-bezier(.4,1.3,.5,1)}
.slot.lu .spot{display:none}
.screen::after{content:"";flex:0 0 32px}
.langs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.langs button{display:flex;align-items:center;gap:6px;font-family:var(--display);font-weight:800;font-size:14px;color:#fff;padding:7px 11px 5px;border-radius:999px;background:rgba(255,255,255,.1);border:3px solid transparent}
.langs button span{font-size:18px;line-height:1}
.langs button.on{background:linear-gradient(180deg,#ffffff,#e3e9ff);color:#2a44c4;box-shadow:0 4px 0 #8e9fe6}

/* action cues */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.btn::after{content:"";width:22px;height:22px;flex:none;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;filter:drop-shadow(0 2px 0 rgba(150,40,0,.4));animation:nudge 1s ease-in-out infinite}
.btn::before{content:"";position:absolute;inset:-5px -5px -11px -5px;border-radius:999px;border:3px solid #ffd34d;box-shadow:0 0 12px rgba(255,211,77,.6);opacity:0;pointer-events:none;z-index:-1;animation:ring 2s ease-out infinite}
.btn:disabled::after,.btn:disabled::before{animation:none;opacity:0}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes ring{0%{transform:scale(.98);opacity:0}15%{transform:scale(1);opacity:1}80%,100%{transform:scale(1.08,1.28);opacity:0}}
.astro{position:relative}
.astro.next::before{content:"";position:absolute;left:50%;top:-46px;width:38px;height:38px;margin-left:-19px;z-index:2;background:#ffd34d;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h13M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(90deg);animation:point .8s ease-in-out infinite;filter:drop-shadow(0 2px 0 #c2400f)}
@keyframes point{0%,100%{transform:rotate(90deg) translateX(0)}50%{transform:rotate(90deg) translateX(8px)}}
.bigstart::after{content:"👆";position:absolute;bottom:14%;font-size:64px;text-shadow:none;animation:tap 1.1s ease-in-out infinite}
@keyframes tap{0%,100%{transform:translateY(0) scale(1)}45%{transform:translateY(-18px) scale(1.05)}60%{transform:translateY(0) scale(.92)}}
.bigstart::before{animation:ringbig 1.6s ease-out infinite}
@keyframes ringbig{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.25);opacity:0}}
@media (prefers-reduced-motion:reduce){.btn::after,.btn::before,.astro.next::before,.bigstart::after,.bigstart::before{animation:none}}
.navrow{display:flex;gap:10px;align-items:center;justify-content:center;max-width:100%;flex-wrap:nowrap}
.navrow .btn{white-space:nowrap}
#back{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;flex:none}
#back .bi{font-size:22px;line-height:1}
.navrow.compact #back{width:56px;height:56px;padding:0!important;justify-content:center;border-radius:50%}
.navrow.compact #back .bl{display:none}
.navrow.compact #back .bi{font-size:28px}
.crop{align-items:center}
.crop .sheetin{border-radius:28px;max-width:min(380px,calc(100% - 24px))}
.cstage{position:relative;overflow:hidden;border-radius:24px;touch-action:none;cursor:grab;background:#0b1240;flex:none}
.cstage img{position:absolute;left:0;top:0;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cring{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(8,12,50,.6);border:4px solid #ffd34d;pointer-events:none}
.zrow{display:flex;align-items:center;gap:10px;width:100%;max-width:300px;color:#fff;font-family:var(--display);font-weight:800;font-size:24px}
.zrow input{flex:1;accent-color:#ff6a2b}
.startscr{gap:clamp(18px,3.4vh,30px)}
.startscr .srk{padding-bottom:22px;margin-bottom:4px}
.startscr h1{margin-top:4px}
.startscr p{margin-top:-6px}
.startscr .btn{margin-top:8px}
.btn{isolation:isolate;transition:transform .15s,filter .15s}
@media (hover:hover){.btn:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn2:hover,.ghost:hover{filter:brightness(1.04);transform:translateY(-1px)}}
/* flying rocket on start screen */
.startscr .srk{position:relative;width:200px;height:150px;padding:0;display:flex;justify-content:center;align-items:flex-start;flex:none}
.srk>svg{position:relative;z-index:2;animation:shake .09s linear infinite alternate}
@keyframes shake{from{transform:translate(-.8px,.6px)}to{transform:translate(.8px,-.6px)}}
.sl{position:absolute;top:-30px;width:2.5px;height:56px;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85));opacity:0;animation:streak .5s linear infinite}
.sl:nth-child(1){left:6%;animation-delay:0s;height:70px}
.sl:nth-child(2){left:18%;animation-delay:.22s;height:40px;animation-duration:.42s}
.sl:nth-child(3){left:29%;animation-delay:.1s;height:60px}
.sl:nth-child(4){left:36%;animation-delay:.36s;height:34px;animation-duration:.38s}
.sl:nth-child(5){left:64%;animation-delay:.05s;height:46px;animation-duration:.44s}
.sl:nth-child(6){left:72%;animation-delay:.3s;height:72px}
.sl:nth-child(7){left:83%;animation-delay:.15s;height:38px;animation-duration:.4s}
.sl:nth-child(8){left:93%;animation-delay:.4s;height:58px}
.sl:nth-child(9){left:50%;animation-delay:.27s;height:30px;animation-duration:.36s;top:120px}
@keyframes streak{0%{transform:translateY(-10px);opacity:0}15%{opacity:1}100%{transform:translateY(200px);opacity:0}}
.srk .flame{animation:ignite .8s cubic-bezier(.2,.8,.3,1.15) both,roar .12s .8s linear infinite alternate}
@keyframes roar{from{transform:scale(1,1)}to{transform:scale(1.06,1.18)}}
.tp{position:absolute;left:50%;top:110px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e6ebf8 60%,#c4cbe3);opacity:0;z-index:1;animation:trail .7s ease-out infinite}
.tp:nth-of-type(1){animation-delay:0s;--x:-5px}
.tp:nth-of-type(2){animation-delay:.18s;--x:4px}
.tp:nth-of-type(3){animation-delay:.35s;--x:-3px}
.tp:nth-of-type(4){animation-delay:.52s;--x:5px}
@keyframes trail{0%{transform:translate(0,0) scale(.5);opacity:0}15%{opacity:.95}100%{transform:translate(var(--x),80px) scale(1.4,2.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.srk>svg,.sl,.tp,.srk .flame{animation:none}}
/* animal avatars + photo info */
.face{width:110px;height:110px;background-size:cover;background-position:center}
.or{margin-top:-8px;font-size:14px}
.anrow{display:flex;align-items:center;gap:6px;width:min(440px,100%);margin-top:-6px}
.anrow .arr{flex:none;width:36px;height:36px;font-size:24px}
.anim{flex:1;min-width:0;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 10px;scrollbar-width:none}
.anim::-webkit-scrollbar{display:none}
.anim button{flex:none;width:58px;height:58px;padding:0;border-radius:50%;overflow:hidden;scroll-snap-align:center;background:#fff;border:3px solid transparent;box-shadow:0 4px 0 rgba(0,0,40,.35)}
.anim button img{display:block;width:100%;height:100%}
.anim button.on{border-color:#ffd34d;box-shadow:0 0 0 3px rgba(255,211,77,.35),0 4px 0 rgba(0,0,40,.35)}
.infoic{font-size:46px;line-height:1}
.sheetin .lock{background:rgba(255,255,255,.1);border-radius:16px;padding:10px 14px;color:#fff;font-size:14px;max-width:34ch}
/* full-bleed bottom screens */
.screen.full{padding-bottom:0}
.screen.full::after{display:none}
.screen.full .pad{flex:1 0 auto}
.landscreen .land{flex:1 0 auto;min-height:440px;align-self:center}
.factbox{left:50%!important;right:auto!important;width:min(440px,calc(100% - 24px));transform:translateX(-50%);bottom:calc(clamp(32px,6vh,56px) + 70px + env(safe-area-inset-bottom,0px))!important}
.landbtn{position:absolute;left:0;right:0;bottom:calc(clamp(32px,6vh,56px) + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;z-index:3}
.cruise h2{text-align:center}
/* edge-to-edge layout: gutter lives on .screen, not body */
:root{padding-bottom:0!important}
body{padding-left:0!important;padding-right:0!important}
.screen{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
.screen.full{padding-bottom:0}
.board,.pbody,.facts,.factbox,.row{box-sizing:border-box}
.rpl{display:grid;place-items:center;width:40px;height:40px}
/* new podium */
.podium{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:8px}
.parch{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);width:62%;aspect-ratio:1/1.05;border-radius:999px 999px 0 0;
  background:linear-gradient(180deg,#5b86ff,#2f55d6);border:10px solid #f4f6ff;border-bottom:0;box-shadow:inset 0 0 0 3px rgba(42,68,196,.25),0 8px 20px rgba(0,0,30,.35);z-index:0}
.pstar{position:absolute;left:50%;top:12%;transform:translateX(-50%);font-size:40px;line-height:1;color:#ffd34d;text-shadow:0 3px 0 #c27a0c,0 0 18px rgba(255,211,77,.8);animation:twinkle 1.6s ease-in-out infinite}
@keyframes twinkle{50%{transform:translateX(-50%) scale(1.15) rotate(8deg)}}
.pcrew{position:relative;z-index:2;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;margin-bottom:-26px;padding-top:min(26vw,120px)}
.stage{position:relative;width:100%;z-index:1}
.stop{height:40px;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#ffffff,#e9edfb 60%,#c9d1ee);box-shadow:inset 0 -4px 0 rgba(42,68,196,.15);position:relative;z-index:1}
.sside{margin-top:-20px;padding:28px 12px 14px;border-radius:0 0 50% 50%/0 0 26px 26px;background:linear-gradient(180deg,#4f7bff,#2747c8 70%,#1d36a3);box-shadow:inset 0 4px 0 rgba(255,255,255,.18),0 12px 24px rgba(0,0,30,.4);display:flex;flex-direction:column;align-items:center;gap:10px}
.sside .plights{display:flex;justify-content:space-between;width:100%;padding-inline:6px;box-sizing:border-box}
.ptop,.pbody{display:none}
.confetti{position:absolute;inset:-20px 0 30% 0;overflow:hidden;pointer-events:none;z-index:3}
.confetti i{position:absolute;top:-12px;width:7px;height:12px;border-radius:2px;opacity:.9;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(320px) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.confetti,.pstar{animation:none;display:none}}
.descend .dshadow{position:absolute;left:50%;bottom:-6px;width:64px;height:12px;margin-left:-32px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,20,.4),rgba(0,0,20,0) 70%);opacity:0;transform:scale(.3);transition:opacity .5s,transform .5s}
.descend.go .dshadow{opacity:.5;transform:scale(.7);transition:opacity 2.2s ease-in,transform 2.2s ease-in}
.descend.landed .dshadow{opacity:1;transform:scale(1)}
.podium{margin-top:-18px}
.pcrew{padding-top:min(24vw,108px)}
/* no gap under the page: paint the root too and keep its height inside the viewport */
html{box-sizing:border-box;background:#0c1446;min-height:100%;height:100dvh;overflow:hidden}
body{background:radial-gradient(120% 80% at 50% -10%,#3346b8 0%,#1a2678 45%,#0c1446 100%) #0c1446;min-height:100%}
.podium{margin-top:-36px}
.board{margin-bottom:14px}
.actions{margin-bottom:18px}
/* photo + animals in one row */
.or{margin-top:0;font-size:15px}
.anim button{width:68px;height:68px;position:relative}
.anim .cam{background:rgba(255,255,255,.12);border:3px dashed #b9c6ff;box-shadow:none;display:grid;place-items:center;overflow:visible}
.anim .cam .ci{font-size:30px}
.anim .cam img{border-radius:50%}
.anim .cam.has{border-style:solid;background:#fff}
.anim .cam .cb{display:none}
.anim .cam.has .cb{display:grid;place-items:center;position:absolute;right:-4px;bottom:-4px;width:24px;height:24px;border-radius:50%;background:#ff6a2b;font-size:12px;box-shadow:0 2px 0 #b9380c}
.anim .cam.on{border-color:#ffd34d}
/* clearer selected avatar */
.anim{padding:14px 8px 16px;gap:12px}
.anim button{transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s;overflow:visible}
.anim button img{border-radius:50%}
.anim:has(.on) button:not(.on){opacity:.55;transform:scale(.9)}
.anim button.on{transform:scale(1.15);border:4px solid #ffd34d;box-shadow:0 0 0 4px rgba(255,211,77,.35),0 0 18px rgba(255,211,77,.7),0 4px 0 rgba(0,0,40,.35);z-index:1}
.anim button.on::after{content:"✓";position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#2fbf86;color:#fff;font:800 15px/1 system-ui,sans-serif;box-shadow:0 2px 0 #1d8a5e,0 0 0 2px #fff}
/* equal planet cards */
.planets{grid-auto-rows:1fr;align-items:stretch}
.planets button{height:100%;justify-content:flex-start;padding:8px 2px 8px!important;gap:4px}
.planets button .pbox{flex:0 0 56px;height:56px!important;min-height:56px;width:100%;display:grid;place-items:center}
.planets button .pn{display:flex;align-items:center;justify-content:center;min-height:1.3em;line-height:1.1;white-space:nowrap}