:root{color-scheme:dark;--ink:#f1f6ff;--muted:#98aac4;--teal:#65e2d3;--orange:#ffae55;--panel:#121f33}*{box-sizing:border-box}body{margin:0;background:#050a13;color:var(--ink);font-family:ui-rounded,'SF Pro Rounded',system-ui,-apple-system,sans-serif}button{font:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.4;cursor:default}button:focus-visible,canvas:focus-visible{outline:3px solid var(--teal);outline-offset:4px}button{transition:transform .16s,background .16s}button:active:not(:disabled){transform:scale(.96)}[hidden]{display:none!important}#app{max-width:480px;min-height:100dvh;margin:auto;background:linear-gradient(#0e1928cc,#080e1bec),url('art/space-background.png') center/cover fixed;position:relative;overflow:hidden;padding:env(safe-area-inset-top) 20px max(18px,env(safe-area-inset-bottom));box-shadow:0 0 100px #10233d55}.top{height:66px;display:flex;align-items:center;justify-content:space-between}.brand{border:0;background:none;color:var(--ink);font-size:13px;font-weight:850;letter-spacing:1.4px;padding:0}.brand b{color:var(--teal)}.brandmark{display:inline-grid;place-items:center;background:#ffad4b;color:#121c2a;width:27px;height:27px;border-radius:10px;margin-right:5px}.icon{width:37px;height:37px;background:#17273c;border:1px solid #2a3b50;border-radius:13px;color:#d6e3f3;font-size:17px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--teal)}.hero{position:relative;padding:16px 0 22px}.hero h1{position:relative;z-index:1;font-size:clamp(30px,8vw,39px);line-height:1.13;letter-spacing:-1.5px;margin:12px 0}.hero p{font-size:13px;line-height:1.65;color:#a6b9d2;margin:0 0 12px}.heroart{width:100%;height:230px;object-fit:cover;object-position:50% 48%;border-radius:26px;margin:10px 0 16px;box-shadow:0 18px 40px #0006;animation:arrival .7s ease-out}.primary{border:1px solid #ffd093;background:linear-gradient(125deg,#ffb65c,#ff9140);color:#1c1c28;border-radius:17px;min-height:52px;padding:13px 20px;font-size:15px;font-weight:850;box-shadow:0 6px 25px #ff9f3018}.primary span{float:right;font-size:20px;line-height:19px}.hero>.primary{width:100%;text-align:left}.summary{display:flex;justify-content:space-between;color:#9bacc3;font-size:11px;margin-top:14px}.summary span:first-child{color:#ffce79}.sectionhead{display:flex;align-items:center;justify-content:space-between;margin-top:16px}h2{font-size:23px;letter-spacing:-.6px;margin:6px 0}.pill{background:#152a37;border:1px solid #28454e;padding:6px 10px;border-radius:100px;color:#9eeade;font-size:11px;white-space:nowrap}.journey{border-top:1px solid #253247}#worlds{display:flex;gap:8px;margin:20px 0 14px}#worlds button{flex:1;border:1px solid #2d3d54;background:#122034;border-radius:14px;color:#9aacc6;height:43px;font-size:12px;font-weight:800}#worlds button[aria-pressed=true]{border-color:var(--teal);background:#193b43;color:#befff3}.worldtitle{display:flex;align-items:center;justify-content:space-between;margin:20px 0 12px}.worldtitle h3{font-size:16px;margin:0}.worldtitle span{font-size:12px;color:#ffcb74}#levels{display:grid;gap:9px}#levels button{display:flex;align-items:center;text-align:left;gap:13px;min-height:68px;background:linear-gradient(120deg,#192a40,#111e31);border:1px solid #2a3c52;border-radius:18px;padding:10px 13px;color:var(--ink)}#levels button:disabled{opacity:.5}#levels button .num{width:37px;height:37px;border-radius:13px;display:grid;place-items:center;background:#25404d;color:#96f3dd;font-weight:850}#levels button .name{flex:1;font-size:13px;font-weight:750}#levels button .name small{display:block;color:#91a5c0;font-size:10px;font-weight:500;margin-top:5px}#levels button .stars{font-size:13px;letter-spacing:1px;color:#ffcf76}.footnote{text-align:center;font-size:10px;color:#7f94b1;margin:23px 0 12px}.textbutton{border:0;background:none;color:#a7c4df;padding:8px 0;font-size:12px}.missionhead{display:flex;justify-content:space-between;align-items:center;height:38px}.missionhead>span{font-size:10px;letter-spacing:2px;color:var(--teal)}.missiontitle{display:flex;align-items:center;justify-content:space-between;gap:7px;margin:8px 0 12px}.missiontitle h2{font-size:21px;margin:0}.instruments{display:flex;gap:20px;justify-content:space-between;margin-bottom:12px}.instruments>div:first-child{flex:1}.instruments label{font-size:9px;letter-spacing:1.4px;color:#9db0c9;display:block}.instruments label b{float:right;font-weight:600;letter-spacing:0;color:var(--teal)}.instruments strong{font-variant-numeric:tabular-nums;display:block;font-size:16px;margin-top:3px}.fueltrack{height:6px;background:#273549;border-radius:5px;overflow:hidden;margin-top:8px}#fuel{height:100%;width:100%;background:linear-gradient(90deg,#3bbba9,#98f1ce);transition:width .15s}#stage{position:relative;width:100%;aspect-ratio:360/640;max-height:calc(100dvh - 296px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:270px;overflow:hidden;border-radius:24px;border:1px solid #33475b;background:#060d1c url('art/space-background.png') center/cover}canvas{width:100%;height:100%;display:block;touch-action:none;outline:0}#stagehint{position:absolute;bottom:13px;left:0;right:0;text-align:center;pointer-events:none;font-size:11px;color:#b9d5e4}#flightbadge{position:absolute;top:15px;left:0;right:0;text-align:center;color:#94e5da;letter-spacing:2px;font-size:8px;pointer-events:none}.controls{display:flex;gap:10px;margin-top:12px}.controls>.primary{flex:1}.secondary{border:1px solid #34485e;background:#17263b;color:#c7d9ec;border-radius:16px;padding:10px 15px;font-size:12px}.subcontrols{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:4px}.subcontrols span{font-size:9px;text-align:right;color:#8da3be}.subcontrols .textbutton{color:var(--teal);white-space:nowrap}dialog{width:min(390px,calc(100% - 34px));border:1px solid #3e566e;background:linear-gradient(140deg,#1b3047,#0d192c);color:var(--ink);border-radius:28px;padding:28px;box-shadow:0 30px 120px #000a;text-align:center}dialog::backdrop{background:#020813bc;backdrop-filter:blur(9px)}dialog h2{font-size:27px;margin:12px 0}dialog p{font-size:13px;line-height:1.6;color:#aec2da}.dialogactions{display:grid;gap:10px;margin-top:22px}.bigstars{font-size:42px;letter-spacing:7px;color:#ffd17b;text-shadow:0 0 30px #ffb34544}.dialogstats{display:flex;justify-content:center;gap:25px;font-size:12px;color:var(--teal);margin:20px 0}.setting{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #33445c}.setting label{font-size:14px}.setting input{width:22px;height:22px;accent-color:#60d4c3}#toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%,20px);opacity:0;transition:.2s;background:#233b50;color:#e9ffff;border:1px solid #47738a;padding:12px 18px;border-radius:15px;font-size:12px;z-index:20;max-width:90%;pointer-events:none;text-align:center}#toast.on{opacity:1;transform:translate(-50%,0)}#loader{position:fixed;inset:0;background:#08101e;z-index:50;display:flex;gap:20px;align-items:center;justify-content:center;flex-direction:column}#loader span{color:#8da8c5;font-size:12px}.spinner{width:40px;height:40px;border:3px solid #213b50;border-top-color:var(--teal);border-radius:50%;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes arrival{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media(min-width:700px){body{padding:24px}#app{border:1px solid #25364b;border-radius:32px;min-height:calc(100dvh - 48px)}#stage{max-height:610px}.heroart{height:240px}}@media(max-height:700px){.top{height:49px}.missiontitle{margin:4px 0 8px}.instruments{margin-bottom:7px}#stage{max-height:calc(100dvh - 250px)}.primary{min-height:46px}.controls{margin-top:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Preserve the logical playfield aspect ratio instead of stretching the canvas. */
#stage{width:min(100%,calc((100dvh - 275px) * .5625));max-height:none;min-height:0;margin-inline:auto}
@media(min-width:700px){#stage{width:343px;max-width:100%;max-height:none}}
@media(max-height:520px){#stage{width:260px;max-width:100%;max-height:none}}
