/* Styles for astro_tilt. */
:root{--ink:#050818;--navy:#090d28;--cyan:#52e8ff;--blue:#4a72ff;--violet:#8b5cf6;--pink:#ff4f9a;--yellow:#ffe052;--red:#ff596d;--glass:rgba(8,12,38,.72);--line:rgba(255,255,255,.15);--muted:#b8c0df}
    *{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{font-family:"Noto Sans Thai",Tahoma,sans-serif;color:#fff;background:var(--ink);touch-action:none;user-select:none}button,select{font:inherit}h1,h2,.eyebrow,.mission strong,.pill strong{font-family:"Mitr","Noto Sans Thai",sans-serif}.hidden{display:none!important}
    #game{position:fixed;inset:0;background:radial-gradient(circle at 50% 110%,#162466 0,transparent 47%),linear-gradient(#050818,#090d28)}#spaceCanvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
    .vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,5,18,.4),transparent 22%,transparent 75%,rgba(3,5,18,.48)),radial-gradient(circle,transparent 45%,rgba(2,3,13,.48))}
    .topbar{position:absolute;z-index:3;inset:max(12px,env(safe-area-inset-top)) 14px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:10px;pointer-events:none}.hud-side{display:flex;gap:8px}.hud-side:last-child{justify-content:flex-end}.pill{min-width:86px;padding:9px 13px;border:1px solid var(--line);border-radius:17px;background:var(--glass);box-shadow:0 12px 35px rgba(0,0,0,.25);backdrop-filter:blur(14px);text-align:center}.pill span{display:block;color:#aeb9dc;font-size:.62rem;font-weight:900;letter-spacing:.1em}.pill strong{display:block;margin-top:2px;font-size:clamp(1rem,2.6vw,1.4rem);line-height:1.05}.mission{min-width:min(340px,44vw);padding:10px 20px;border:1px solid rgba(82,232,255,.24);border-radius:22px;background:rgba(7,14,43,.75);box-shadow:0 0 35px rgba(82,232,255,.08);backdrop-filter:blur(16px);text-align:center}.mission small{display:block;color:#7ceefe;font-size:.62rem;font-weight:900;letter-spacing:.16em}.mission strong{display:block;margin-top:3px;font-size:clamp(.9rem,2.4vw,1.25rem)}
    .time-track{position:absolute;z-index:3;top:calc(max(12px,env(safe-area-inset-top)) + 72px);left:50%;width:min(360px,62vw);height:5px;overflow:hidden;translate:-50% 0;border-radius:99px;background:rgba(255,255,255,.14)}.time-track span{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,var(--cyan),var(--violet),var(--pink));transition:transform .2s linear}
    .bottom-bar{position:absolute;z-index:4;inset:auto 14px max(12px,env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:space-between;gap:10px;pointer-events:none}.control-status{display:flex;align-items:center;gap:9px;max-width:min(480px,70vw);padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--glass);backdrop-filter:blur(14px);color:#d9def2;font-size:.74rem}.status-dot{width:9px;height:9px;flex:0 0 auto;border-radius:50%;color:var(--yellow);background:currentColor;box-shadow:0 0 13px currentColor}.status-dot.ready{color:var(--cyan)}.status-dot.touch{color:var(--violet)}.actions{display:flex;gap:8px;pointer-events:auto}.icon-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:15px;color:#fff;background:var(--glass);backdrop-filter:blur(14px);cursor:pointer;font-size:1.05rem}.icon-btn:hover,.icon-btn:focus-visible{background:rgba(74,114,255,.7);outline:3px solid rgba(82,232,255,.2)}
    #flash{position:absolute;z-index:2;inset:0;pointer-events:none;opacity:0;background:rgba(255,64,91,.26)}#flash.hit{animation:flash .35s ease-out}@keyframes flash{35%{opacity:1}to{opacity:0}}#toast{position:absolute;z-index:5;left:50%;top:47%;translate:-50% -50%;pointer-events:none;opacity:0;font-size:clamp(1.8rem,7vw,4.5rem);font-weight:1000;text-align:center;text-shadow:0 8px 32px rgba(0,0,0,.55)}#toast.show{animation:toast .7s ease-out}@keyframes toast{20%,60%{opacity:1;scale:1.08}to{opacity:0;translate:-50% -85%}}
    .screen{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:clamp(16px,3vw,36px);overflow:auto;background:radial-gradient(circle at 16% 18%,rgba(77,82,255,.3),transparent 29%),radial-gradient(circle at 85% 78%,rgba(255,79,154,.18),transparent 26%),linear-gradient(150deg,#050818,#101743 55%,#160b38)}.screen:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.36;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#52e8ff 1px,transparent 1px);background-position:0 0,18px 18px;background-size:38px 38px,58px 58px}.panel{position:relative;width:min(960px,100%);padding:clamp(22px,4vw,46px);border:1px solid rgba(255,255,255,.17);border-radius:34px;background:rgba(5,8,28,.72);box-shadow:0 38px 110px rgba(0,0,0,.52);backdrop-filter:blur(22px)}
    .welcome{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,5vw,70px);align-items:center}.eyebrow{display:flex;align-items:center;gap:10px;color:#74eeff;font-size:.72rem;font-weight:900;letter-spacing:.17em}.eyebrow:before{content:"";width:30px;height:3px;border-radius:10px;background:var(--cyan);box-shadow:0 0 15px var(--cyan)}h1{margin:14px 0 15px;font-size:clamp(4rem,10vw,8.2rem);line-height:.75;letter-spacing:-.09em}.astro{display:block;color:#fff}.tilt{display:block;color:transparent;background:linear-gradient(90deg,var(--cyan),#8ca2ff 42%,#bd77ff 70%,var(--pink));-webkit-background-clip:text;background-clip:text}.lead{max-width:590px;margin:23px 0;color:var(--muted);font-size:clamp(.96rem,2vw,1.16rem);line-height:1.75}.features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}.chip{padding:7px 11px;border:1px solid rgba(255,255,255,.12);border-radius:99px;background:rgba(255,255,255,.055);color:#dbe1f7;font-size:.7rem;font-weight:800}
    .settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}.field{display:grid;gap:6px;color:#c0c8e4;font-size:.7rem;font-weight:800}.field select{width:100%;padding:11px 12px;border:1px solid rgba(255,255,255,.14);border-radius:13px;color:#fff;background:#11183f;outline:none}.field select:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(82,232,255,.13)}
    .primary,.secondary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:12px 20px;border-radius:16px;color:#fff;cursor:pointer;font-weight:900}.primary{border:0;background:linear-gradient(135deg,#3268ef,#8958f5);box-shadow:0 15px 38px rgba(63,86,228,.34)}.secondary{margin-top:9px;border:1px solid rgba(255,255,255,.17);background:rgba(255,255,255,.06)}.primary:hover,.secondary:hover,.primary:focus-visible,.secondary:focus-visible{translate:0 -2px;filter:brightness(1.12);outline:3px solid rgba(82,232,255,.18)}.note{margin:13px 0 0;color:#939dbc;font-size:.67rem;text-align:center}
    .visual{position:relative;aspect-ratio:1;max-width:390px;margin:auto}.orbit{position:absolute;inset:5%;border:1px dashed rgba(82,232,255,.3);border-radius:50%;animation:spin 16s linear infinite}.orbit.b{inset:22%;border-color:rgba(255,79,154,.3);animation-direction:reverse;animation-duration:10s}.orbit:before{content:"★";position:absolute;left:48%;top:-16px;color:var(--yellow);font-size:1.5rem;text-shadow:0 0 16px var(--yellow)}.planet{position:absolute;inset:35%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#77f2ff,#3b57da 45%,#241256 72%);box-shadow:0 0 50px rgba(82,232,255,.34)}.ship-demo{position:absolute;left:34%;top:18%;font-size:clamp(5rem,12vw,8rem);filter:drop-shadow(0 22px 20px rgba(0,0,0,.38));rotate:-8deg;animation:fly 3s ease-in-out infinite}.meteor-demo{position:absolute;right:3%;bottom:17%;font-size:3.5rem;filter:drop-shadow(0 15px 14px rgba(0,0,0,.4));animation:meteor 2.4s ease-in-out infinite}@keyframes spin{to{rotate:360deg}}@keyframes fly{50%{translate:25px -18px;rotate:14deg}}@keyframes meteor{50%{translate:-15px 12px;rotate:25deg}}
    .permission{position:fixed;z-index:26;inset:0;display:grid;place-items:center;padding:18px;background:rgba(3,5,18,.82);backdrop-filter:blur(12px)}.permission-card{width:min(440px,100%);padding:30px;border:1px solid var(--line);border-radius:28px;background:#0d1337;text-align:center}.permission-card .phone{font-size:4rem;animation:tiltPhone 2s ease-in-out infinite}@keyframes tiltPhone{25%{rotate:-15deg}75%{rotate:15deg}}.permission-card h2{margin:8px 0;font-size:2rem}.permission-card p{margin:0 0 20px;color:var(--muted);line-height:1.65}
    .result{max-width:620px;text-align:center}.trophy{font-size:clamp(4.5rem,12vw,7rem);filter:drop-shadow(0 18px 20px rgba(0,0,0,.4))}.result h2{margin:6px 0 4px;font-size:clamp(2.4rem,7vw,4.5rem);line-height:1}.result-copy{margin:9px 0 20px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.stats div{padding:17px 8px;border:1px solid rgba(255,255,255,.11);border-radius:18px;background:rgba(255,255,255,.055)}.stats span{display:block;color:#aeb7d6;font-size:.65rem;font-weight:900;letter-spacing:.08em}.stats strong{display:block;margin-top:4px;font-size:clamp(1.35rem,4vw,2rem)}.result-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.result-actions .secondary{margin:0}
    .paused{position:fixed;z-index:15;inset:0;display:grid;place-items:center;padding:18px;background:rgba(3,5,18,.78);backdrop-filter:blur(12px)}.pause-card{width:min(390px,100%);padding:30px;border:1px solid var(--line);border-radius:27px;background:#0d1337;text-align:center}.pause-card h2{margin:7px 0;font-size:2rem}.pause-card p{margin:0 0 20px;color:var(--muted)}
    @media(max-width:760px){.welcome{grid-template-columns:1fr}.visual{display:none}.panel{border-radius:26px}h1{font-size:clamp(4.3rem,22vw,7.2rem)}.pill{min-width:67px;padding:8px 9px}.pill.lives-pill{display:none}.mission{min-width:42vw;padding-inline:10px}.topbar{gap:6px}.time-track{top:calc(max(12px,env(safe-area-inset-top)) + 67px)}.control-status{max-width:72vw;padding:9px 11px}.settings{grid-template-columns:1fr 1fr}}
    @media(max-width:430px){.pill span{font-size:.53rem}.pill strong{font-size:.96rem}.mission small{font-size:.52rem}.mission strong{font-size:.88rem}.settings{grid-template-columns:1fr}.features{margin-bottom:16px}.lead{margin-block:15px 18px}.stats{gap:5px}.stats div{padding:13px 4px}.result-actions{grid-template-columns:1fr}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important}}