/* ===== Space Mission beta — app layer (menus, in-game layout, overlays). Loaded last. ===== */
:root{--ui:1;--fit:1;--bg0:#050815;--bg1:#0b1230;--p1:#18214a;--p2:#0f1634;--edge:#2c3c7c;--edge2:#4659a8;--cy:#4ff0ff;--cy2:#2bb7d6;--or:#f2922e;--red:#ff5d6e;--ok:#5ee08a;--txt:#e8eaf6;--mut:#98a2c9;--px:'Pixelify Sans',ui-monospace,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--cut:10px}
html,body{height:100%;overscroll-behavior:none}
[hidden]{display:none!important}
body{margin:0;background:var(--bg0);color:var(--txt);font-family:var(--sans);-webkit-tap-highlight-color:transparent;overflow:hidden}
#app{position:fixed;inset:0;overflow:hidden}
button{font-family:inherit;color:inherit}
kbd{font:600 11px var(--px);padding:1px 5px;background:#0a0f26;border:1px solid #3a4a8c;border-bottom-width:2px;color:#cfe;border-radius:3px}
.cut{clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}

/* ---------- backgrounds ---------- */
.bg-stars{position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,#1d2f6e 0,#0b1230 45%,var(--bg0) 80%);overflow:hidden}
.bg-stars i{position:absolute;width:2px;height:2px;background:#e7f9ff;box-shadow:0 0 6px #7febff;animation:tw 3s ease-in-out infinite}
@keyframes tw{50%{opacity:.15}}
.bg-planet{position:absolute;right:-12vmin;bottom:-30vmin;width:70vmin;height:70vmin;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b9a6ff,#7254d8 35%,#2c1a76 70%,#120a38);box-shadow:0 0 80px 10px rgba(138,108,240,.25),inset -30px -20px 60px rgba(0,0,0,.5);opacity:.85;image-rendering:pixelated}
.menu-wrap{position:relative;z-index:1;height:100%;overflow:auto;display:grid;place-items:center;padding:max(18px,env(safe-area-inset-top)) 16px 28px;box-sizing:border-box}
.ver{position:fixed;left:14px;bottom:10px;font:600 11px var(--px);color:#5d6aa3;letter-spacing:.2em;z-index:2}

/* ---------- typography ---------- */
.kicker{margin:0;font:600 12px var(--px);letter-spacing:.28em;color:#8ea6e6;text-transform:uppercase}
.title{margin:6px 0 6px;font:700 clamp(28px,5vw,44px)/1 var(--px);color:var(--cy);letter-spacing:.05em;text-shadow:0 0 24px rgba(79,240,255,.35)}
.sub{margin:0 0 18px;color:#b7c3e8;font:15px/1.5 var(--sans)}
.note{margin:6px 0 0;color:var(--mut);font:13px/1.45 var(--sans)}
.logo{margin:8px 0 18px;font:700 clamp(40px,9vw,82px)/.86 var(--px);letter-spacing:.06em;color:#fff;text-shadow:0 4px 0 #1a2c6e,0 0 30px rgba(79,240,255,.45);text-align:center}
.logo small{display:block;margin-top:10px;font-size:.36em;letter-spacing:.7em;color:var(--red);text-shadow:0 0 18px rgba(255,93,110,.55)}
.logo.sm{font-size:clamp(30px,5vw,48px);text-align:left;margin:0 0 6px}.logo.sm small{display:inline;margin-left:14px;font-size:.45em;letter-spacing:.45em}

/* ---------- buttons ---------- */
.btn-main,.btn-sec,.btn-sm,.btn-danger,.btn-ghost{--cut:8px;border:0;cursor:pointer;font:700 17px var(--px);letter-spacing:.1em;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 20px;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));transition:transform .12s,filter .12s}
.btn-main{color:#05172a;background:linear-gradient(#b6f8ff,#3ec7e9);box-shadow:inset 0 -5px 0 rgba(0,0,0,.22),inset 0 3px 0 rgba(255,255,255,.5)}
.btn-sec{color:#dce7ff;background:#1d2a5a;box-shadow:inset 0 0 0 2px #4d66bb,inset 0 -4px 0 rgba(0,0,0,.25)}
.btn-danger{color:#fff;background:linear-gradient(#ff7b88,#c22a42);box-shadow:inset 0 -4px 0 rgba(0,0,0,.25)}
.btn-ghost{min-height:40px;font-size:13px;color:#aab7e6;background:transparent;box-shadow:inset 0 0 0 2px #2f3f80}
.btn-sm{min-height:38px;padding:6px 14px;font-size:14px;color:#05172a;background:linear-gradient(#b6f8ff,#3ec7e9);--cut:6px}
.btn-main:hover,.btn-sec:hover,.btn-sm:hover,.btn-danger:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-main:active,.btn-sec:active,.btn-sm:active{transform:translateY(2px)}
:is(.btn-main,.btn-sec,.btn-sm,.btn-danger):disabled{opacity:.42;cursor:not-allowed;transform:none;filter:grayscale(.6)}
.btn-main svg,.btn-sec svg{width:22px;height:22px}
.mbtn-back{position:absolute;left:16px;top:14px;display:flex;align-items:center;gap:6px;background:none;border:0;color:#9fb6f2;font:700 13px var(--px);letter-spacing:.15em;cursor:pointer;padding:8px}
.mbtn-back svg{transform:rotate(180deg);width:14px;height:14px}.mbtn-back:hover{color:var(--cy)}
.link{background:none;border:0;color:var(--cy);cursor:pointer;font:600 13px var(--px);display:inline-flex;align-items:center;gap:5px;padding:4px}.link svg{width:14px;height:14px}

/* ---------- cards ---------- */
.card{--cut:16px;position:relative;width:min(760px,100%);box-sizing:border-box;padding:46px 34px 30px;background:linear-gradient(160deg,rgba(32,45,100,.97),rgba(12,18,48,.98));clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px var(--edge2),inset 0 0 0 5px rgba(10,14,40,.7),inset 0 0 0 7px #2a3a7a}
.card.card-narrow{width:min(480px,100%);text-align:center}.card.wide{width:min(1060px,100%)}
.pop{animation:pop .38s cubic-bezier(.2,1.3,.4,1) both}@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.row-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* ---------- forms ---------- */
.form{display:grid;gap:12px;text-align:left}.form label{font:600 12px var(--px);letter-spacing:.14em;color:#9fb2e8;text-transform:uppercase}
.inp{width:100%;box-sizing:border-box;background:#070c22;border:2px solid #3a51a0;color:#fff;padding:12px 14px;font:700 18px var(--px);outline:none}
.inp:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(79,240,255,.15)}
.inp.big{font-size:30px;letter-spacing:.35em;text-align:center;text-transform:uppercase;padding:14px}
.nick-field{position:relative}.nick-field span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:600 12px var(--px);color:#5f72b3}
.nick-prev{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0}.nick-prev b{font:700 18px var(--px);letter-spacing:.1em}
.np-astro{width:62px;height:83px}.np-astro .astro,.pilot-astro .astro,.wp-astro .astro{width:100%;height:100%}
.err{min-height:18px;margin:0;color:#ff9aa6;font:13px var(--sans);text-align:center}
.shake{animation:shk .35s}@keyframes shk{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- boot ---------- */
.boot{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:opacity .35s,transform .35s}
.boot.out{opacity:0;transform:scale(1.04)}
.boot-orbit{position:relative;width:150px;height:150px;display:grid;place-items:center;margin-bottom:6px}
.boot-ring{position:absolute;inset:0;border-radius:50%;border:3px dashed rgba(79,240,255,.5);animation:spin 6s linear infinite}
.boot-ring::after{content:'';position:absolute;top:-7px;left:50%;width:12px;height:12px;margin-left:-6px;background:var(--or);box-shadow:0 0 14px var(--or)}
.boot-ship{width:70px;height:94px;animation:flt 1.6s ease-in-out infinite}.boot-ship .astro{width:100%;height:100%}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes flt{50%{transform:translateY(-8px) rotate(4deg)}}
.boot-bar{width:min(340px,80vw);height:12px;padding:3px;background:#070c22;box-shadow:inset 0 0 0 2px #36509f}
.boot-bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--cy) 0 10px,#9ff7ff 10px 14px);box-shadow:0 0 12px var(--cy);transition:width .15s}
.boot-txt{font:600 13px var(--px);letter-spacing:.15em;color:#9fb2e8;min-height:20px}

/* ---------- home ---------- */
.home{width:min(1040px,100%)}
.home-head{margin-bottom:18px}.home-head .sub{margin:0}
.home-grid{display:grid;grid-template-columns:260px 1fr;gap:16px}
.pilot{--cut:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:22px 14px;background:linear-gradient(170deg,#1b2a66,#0d1438);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px var(--edge2)}
.pilot-astro{width:96px;height:128px;filter:drop-shadow(0 8px 0 rgba(0,0,0,.35))}
.pilot-nick{font:700 34px var(--px);letter-spacing:.12em;color:#fff}
.pilot-tut{margin:8px 0 0;font:12px var(--sans);color:#ffd27a;text-align:center}.pilot-tut.ok{color:var(--ok)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{--cut:12px;position:relative;display:flex;align-items:center;gap:14px;min-height:112px;padding:16px 18px;border:0;cursor:pointer;text-align:left;color:#e8eeff;background:linear-gradient(160deg,#22306a,#121a44);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px #3c52a8,inset 0 -6px 0 rgba(0,0,0,.25);transition:transform .14s,box-shadow .14s}
.tile:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--cy),inset 0 -6px 0 rgba(0,0,0,.25),0 10px 30px rgba(79,240,255,.12)}
.tile.primary{background:linear-gradient(160deg,#2be0ff,#1590c8);color:#04172b;box-shadow:inset 0 0 0 2px #b6f8ff,inset 0 -6px 0 rgba(0,0,0,.25)}
.tile.primary small{color:#0b3657}
.tile-ic{flex:none;width:58px;height:58px;display:grid;place-items:center;background:rgba(0,0,0,.25);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px)}
.tile-ic svg,.tile-ic img{width:44px;height:44px}
.tile-tx{display:grid;gap:4px}.tile-tx b{font:700 22px var(--px);letter-spacing:.08em}.tile-tx small{font:13px/1.35 var(--sans);color:#a9b6e2}
.tile.pulse::after{content:'';position:absolute;right:14px;top:14px;width:10px;height:10px;background:#ffd27a;box-shadow:0 0 12px #ffd27a;animation:tw 1.2s infinite}

/* ---------- play mode ---------- */
.modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.mode{--cut:14px;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 18px;border:0;cursor:pointer;color:#fff;background:linear-gradient(170deg,#24357a,#111a46);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px var(--edge2);transition:transform .14s}
.mode:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 2px var(--cy)}
.mode b{font:700 28px var(--px);letter-spacing:.12em;color:var(--cy)}.mode small{font:14px/1.4 var(--sans);color:#aebbe6;text-align:center}
.mode-ic svg,.mode-ic img{width:64px;height:64px}
.mode.disabled{cursor:not-allowed;filter:grayscale(1);opacity:.5;transform:none!important;box-shadow:inset 0 0 0 2px #3a4370}
.mode.disabled b{color:#aab}
.badge{position:absolute;top:12px;right:12px;padding:3px 8px;background:#3a4370;color:#dde;font:700 11px var(--px);letter-spacing:.15em}

/* ---------- online worlds ---------- */
.net{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;font:600 12px var(--px);letter-spacing:.1em;background:#0a1028;box-shadow:inset 0 0 0 1px #2c3c7c;color:#aab}
.net i{width:8px;height:8px;background:#f5c542;box-shadow:0 0 8px #f5c542;animation:tw 1s infinite}
.net.online{color:var(--ok)}.net.online i{background:var(--ok);box-shadow:0 0 8px var(--ok);animation:none}
.net.offline,.net.idle{color:#ff9aa6}.net.offline i,.net.idle i{background:var(--red);box-shadow:0 0 8px var(--red);animation:none}
.worlds{display:grid;grid-template-columns:1fr 280px;gap:16px}
.world-list{min-height:300px;max-height:min(56vh,520px);overflow:auto;background:#0a1030;box-shadow:inset 0 0 0 2px #24336e;padding:6px}
.world{display:grid;grid-template-columns:auto 1fr auto auto;gap:14px;align-items:center;padding:12px 12px;border-bottom:1px solid #1c2a5c;animation:pop .3s both}
.world:last-child{border:0}.world.locked{opacity:.55}
.w-dots{display:grid;grid-template-columns:repeat(4,8px);gap:3px}.w-dots i{width:8px;height:8px;background:#26346b}.w-dots i.on{background:var(--cy);box-shadow:0 0 6px var(--cy)}
.w-info b{display:block;font:700 17px var(--px);letter-spacing:.04em}.w-info small{font:13px var(--sans);color:#93a3d6}
.code{font:700 13px var(--px);color:#ffd27a;letter-spacing:.15em}
.w-count{font:700 18px var(--px);color:#c8d4ff}
.world-side{display:flex;flex-direction:column;gap:10px}
.empty{display:grid;justify-items:center;gap:10px;padding:50px 18px;text-align:center;color:#9aa8d6;font:14px/1.5 var(--sans)}
.empty svg,.empty img{width:52px;height:52px;opacity:.8}.empty b{font:700 18px var(--px);color:#ffb3bc}.empty.off p{max-width:420px;margin:0}

/* ---------- invitation code ---------- */
.code-boxes{display:flex;justify-content:center;gap:10px;margin:8px 0}
.cbx{width:56px;height:68px;box-sizing:border-box;background:#070c22;border:2px solid #3a51a0;color:#fff;text-align:center;font:700 34px var(--px);text-transform:uppercase;outline:none}
.cbx:focus{border-color:var(--cy);box-shadow:0 0 0 3px rgba(79,240,255,.18);transform:translateY(-2px)}
#codeForm #netPill{justify-self:center}

/* ---------- toasts ---------- */
#toasts{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3000;display:grid;gap:8px;justify-items:center;pointer-events:none;width:min(520px,92vw)}
.toast{padding:11px 18px;background:#16224f;color:#e8eeff;font:600 14px var(--sans);box-shadow:inset 0 0 0 2px #4d66bb,0 10px 30px rgba(0,0,0,.45);animation:pop .25s both;text-align:center}
.toast.error{background:#4a1626;box-shadow:inset 0 0 0 2px #ff6b7a,0 10px 30px rgba(0,0,0,.45)}.toast.ok{background:#123a2c;box-shadow:inset 0 0 0 2px var(--ok)}
.toast.out{opacity:0;transform:translateY(8px);transition:.3s}

/* ---------- dialogs ---------- */
.dlg{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(3,5,16,.72);backdrop-filter:blur(4px);animation:fade .2s}
@keyframes fade{from{opacity:0}}
.dlg-box{--cut:14px;position:relative;width:min(520px,100%);max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;padding:26px 24px 22px;background:linear-gradient(160deg,#1f2c66,#0e1538);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px var(--edge2);animation:pop .3s both;transform:scale(calc(var(--ui) * var(--fit)));transform-origin:center}
.dlg.wide .dlg-box{width:min(760px,100%)}
.dlg-x{position:absolute;right:10px;top:10px;width:38px;height:38px;display:grid;place-items:center;border:0;background:#0b1130;cursor:pointer;box-shadow:inset 0 0 0 2px #3a4d99}.dlg-x:hover{box-shadow:inset 0 0 0 2px var(--cy)}.dlg-x svg{width:18px;height:18px}
.dlg-title{display:flex;align-items:center;gap:10px;margin:0 40px 16px 0;font:700 24px var(--px);letter-spacing:.08em;color:var(--cy)}.dlg-title svg,.dlg-title img{width:28px;height:28px}
.dlg-box>.btn-main{width:100%;margin-top:16px}
.set-list{display:grid;gap:16px}.set-row{display:grid;gap:8px}
.set-row>label{display:flex;justify-content:space-between;font:600 12px var(--px);letter-spacing:.14em;text-transform:uppercase;color:#a6b5e8}.set-row>label b{color:var(--cy)}
.set-row input[type=range]{width:100%;accent-color:var(--cy);height:26px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg button{min-height:42px;border:0;cursor:pointer;background:#0b1130;color:#b8c4ee;font:700 14px var(--px);letter-spacing:.05em;box-shadow:inset 0 0 0 2px #2d3d80}
.seg button.on{background:#123a5a;color:var(--cy);box-shadow:inset 0 0 0 2px var(--cy)}
.set-inline{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.nick-tag{font:700 22px var(--px);letter-spacing:.12em;margin-right:auto}
.room-row{padding:12px;background:#0a1030;box-shadow:inset 0 0 0 2px #2b2f62}.room-row .set-inline button{flex:1;min-height:44px;font-size:14px}
.ctl-demo{display:flex;gap:10px;justify-content:center;padding:8px;background:#080d25;box-shadow:inset 0 0 0 1px #24336e}
.ctl-demo>span{opacity:.3;display:grid;place-items:center;transition:.2s}.ctl-demo>span.on{opacity:1}
.cd-joy{width:46px;height:46px;border-radius:50%;border:3px solid #3a4d99;position:relative}.cd-joy i{width:18px;height:18px;border-radius:50%;background:var(--cy)}
.cd-pad{width:46px;height:46px;position:relative}.cd-pad i{position:absolute;width:14px;height:14px;background:var(--cy)}.cd-pad i:nth-child(1){left:16px;top:0}.cd-pad i:nth-child(2){left:0;top:16px}.cd-pad i:nth-child(3){right:0;top:16px}.cd-pad i:nth-child(4){left:16px;bottom:0}
.cd-kbd{display:flex!important;gap:2px;align-items:center}

/* wardrobe & host */
.ward{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:start}
.ward-prev{display:grid;justify-items:center;gap:8px;padding:16px 8px;background:radial-gradient(circle at 50% 70%,#25408a,#0b1236 70%);box-shadow:inset 0 0 0 2px #2d4290}
.wp-astro{width:120px;height:160px}.ward-prev b{font:700 20px var(--px);letter-spacing:.1em}
.ward-opts .kicker{margin:4px 0 8px}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.suit{position:relative;height:46px;border:0;padding:0;cursor:pointer;background:var(--sw);box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),inset 0 0 0 3px rgba(0,0,0,.35)}
.suit.on{box-shadow:inset 0 -6px 0 rgba(0,0,0,.25),0 0 0 3px #fff,0 0 14px var(--sw)}
.suit:disabled{filter:grayscale(.85) brightness(.5);cursor:not-allowed}.suit small{font:600 10px var(--px);color:#fff;letter-spacing:.1em}
.hats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.hat{display:grid;justify-items:center;gap:2px;padding:6px 4px;border:0;cursor:pointer;background:#0b1130;box-shadow:inset 0 0 0 2px #2d3d80}
.hat span{width:46px;height:62px;overflow:hidden}.hat span .astro{width:100%;height:100%}
.hat small{font:600 11px var(--px);color:#a9b6e2}.hat.on{box-shadow:inset 0 0 0 2px var(--cy);background:#123a5a}.hat:hover{box-shadow:inset 0 0 0 2px #7aa0ff}
.steps{display:grid;gap:8px}.step-row{display:grid;grid-template-columns:1fr 44px 56px 44px;gap:6px;align-items:center;padding:6px 8px;background:#0b1130}
.step-row span{font:14px var(--sans);color:#c8d3f5}.step-row b{text-align:center;font:700 20px var(--px);color:var(--cy)}
.stp{height:40px;border:0;cursor:pointer;background:#1d2a5a;color:#fff;font:700 20px var(--px);box-shadow:inset 0 0 0 2px #4d66bb}.stp:hover{box-shadow:inset 0 0 0 2px var(--cy)}
.kv{width:100%;border-collapse:collapse;font:14px var(--sans)}.kv td{padding:7px 8px;border-bottom:1px solid #24336e}.kv td:last-child{text-align:right;font:700 16px var(--px);color:var(--cy)}
.brief3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.brief3>div{padding:12px;background:#0b1130;box-shadow:inset 0 0 0 1px #2d3d80}.brief3 b{display:flex;align-items:center;gap:6px;font:700 16px var(--px)}.brief3 b svg,.brief3 b img{width:22px;height:22px}.brief3 p{margin:8px 0 0;font:13px/1.5 var(--sans);color:#c5cff0}
.c-astro{color:#8fd3ff}.c-alien{color:#ff8a96}.c-council{color:#7fe3a0}
.tele2{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;font:14px/1.5 var(--sans)}.tele2 ul{padding-left:18px;color:#c5cff0}
.planet-ball{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#9ff0c8,#2fb38a 55%,#0d4a4a);box-shadow:0 0 40px rgba(79,240,200,.4)}

/* ======================= GAME ======================= */
.game.full{position:fixed;inset:0;width:100%;height:100%;border:0!important;border-radius:0!important;box-shadow:none!important;aspect-ratio:auto;max-width:none;min-height:0;margin:0;background:#090c18;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.game.full .gcv{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.game.full .loading{position:absolute;inset:0;display:grid;place-items:center;background:#090c18;z-index:30;color:var(--cy)}.game.full .loading svg,.game.full .loading img{width:64px;height:64px;animation:flt 1.2s infinite}
.hud{position:absolute;inset:0;pointer-events:none;z-index:8;padding:max(12px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}
.hud>div{position:absolute;pointer-events:none}.hud>div>*{pointer-events:auto}
.hud-tl{left:14px;top:12px;transform:scale(calc(var(--ui) * var(--fit)));transform-origin:top left;width:min(300px,42vw);display:grid;gap:8px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.hud-tc{left:50%;top:12px;transform:translateX(-50%) scale(calc(var(--ui) * var(--fit)));transform-origin:top center;display:grid;justify-items:center;gap:6px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.hud-tr{right:14px;top:12px;transform:scale(calc(var(--ui) * var(--fit)));transform-origin:top right;display:flex;gap:8px;filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.hud-bl{left:18px;bottom:18px;transform:scale(calc(var(--ui) * var(--fit)));transform-origin:bottom left}
.hud-bc{left:50%;bottom:16px;transform:translateX(-50%) scale(calc(var(--ui) * var(--fit)));transform-origin:bottom center}
.hud-br{right:16px;bottom:14px;transform:scale(calc(var(--ui) * var(--fit)));transform-origin:bottom right;display:flex;align-items:flex-end;gap:10px}
.game.full .hud-br .gb{position:relative}
.panel{--cut:8px;background:linear-gradient(#1f2850,#111733);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px #3a4d99}
.code-card{display:grid;gap:2px;padding:10px 14px;justify-self:start}.code-card small{font:600 10px var(--px);letter-spacing:.25em;color:#8ea6e6}
.code-btn{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;padding:0}.code-btn b{font:700 28px var(--px);letter-spacing:.22em;color:#ffd27a;text-shadow:0 0 14px rgba(255,210,122,.4)}.code-btn svg,.code-btn img{width:16px;height:16px;opacity:.7}
.world-name{font:12px var(--sans);color:#a9b6e2;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crew-pill{display:flex;align-items:center;gap:12px;padding:10px 16px}.crew-pill b{font:700 24px var(--px);letter-spacing:.1em;color:var(--cy)}
.crew-dots{display:grid;grid-template-columns:repeat(4,10px);gap:4px}.crew-dots i{width:10px;height:10px;background:#26346b}.crew-dots i.on{box-shadow:0 0 6px currentColor}
.hbtn{--cut:8px;position:relative;width:56px;height:56px;display:grid;place-items:center;border:0;cursor:pointer;background:linear-gradient(#1f2850,#111733);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px #3a4d99}
.hbtn:hover{box-shadow:inset 0 0 0 2px var(--cy)}.hbtn svg,.hbtn img{width:30px;height:30px}
.hbtn kbd{position:absolute;bottom:3px;right:3px;font-size:8px;padding:0 3px}
.hbtn .badge{position:absolute;top:4px;right:4px;left:auto;min-width:16px;height:16px;padding:0 3px;box-sizing:border-box;display:grid;place-items:center;background:var(--red);color:#fff;font:700 10px var(--px);font-style:normal}
.start-wrap{display:grid;justify-items:center;gap:6px}
.start-wrap small{font:600 13px var(--px);letter-spacing:.08em;color:#e8eeff;text-shadow:0 2px 0 #000,0 0 8px #000;padding:4px 10px;background:rgba(8,12,32,.7)}
.game.full .startbtn{position:static;transform:none;min-width:230px}
.game.full .startbtn:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}
.game.full .keyhint{position:absolute;left:14px;right:auto;top:auto;bottom:14px;transform:none;z-index:7;pointer-events:none;white-space:nowrap;flex-direction:column;gap:6px;align-items:flex-start}
body:not([data-controls=keyboard]) .game.full .keyhint{display:none}
@media (pointer:coarse){.game.full .keyhint{display:none}}
/* on-screen controls */
.ctl-joy,.ctl-pad{display:none}
body[data-controls=joystick] .ctl-joy{display:block;position:relative;left:auto;bottom:auto;width:132px;height:132px;border-radius:50%;touch-action:none;pointer-events:auto}
.ctl-joy i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9ff7ff,#2bb7d6);box-shadow:0 4px 0 #0d4a66,0 0 18px rgba(79,240,255,.45)}
body[data-controls=buttons] .ctl-pad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,52px);gap:4px;touch-action:none}
.ctl-pad button{border:0;background:rgba(20,28,64,.82);color:var(--cy);font-size:20px;cursor:pointer;box-shadow:inset 0 0 0 2px #3a4d99,0 4px 0 rgba(0,0,0,.4);touch-action:none}
.ctl-pad button.pressed{background:#1a5a7a;transform:translateY(2px);box-shadow:inset 0 0 0 2px var(--cy)}
.ctl-pad [data-dir=up]{grid-column:2;grid-row:1}.ctl-pad [data-dir=left]{grid-column:1;grid-row:2}.ctl-pad [data-dir=down]{grid-column:2;grid-row:3}.ctl-pad [data-dir=right]{grid-column:3;grid-row:2}
@media (pointer:fine){body[data-controls=joystick] .ctl-joy,body[data-controls=buttons] .ctl-pad{opacity:.8}}
/* chat drawer */
.chat-drawer{position:absolute;right:14px;top:84px;bottom:150px;width:min(340px,calc(100vw - 28px));z-index:20;display:flex;flex-direction:column;background:rgba(12,18,48,.95);box-shadow:inset 0 0 0 2px #3a4d99,0 18px 40px rgba(0,0,0,.5);animation:slideIn .2s}
.chat-drawer[hidden]{display:none}@keyframes slideIn{from{transform:translateX(30px);opacity:0}}
.chat-drawer header{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #26346b}.chat-drawer header b{font:700 14px var(--px);letter-spacing:.15em;color:var(--cy)}
.icon-x{width:32px;height:32px;display:grid;place-items:center;border:0;background:#0b1130;cursor:pointer;box-shadow:inset 0 0 0 1px #3a4d99}.icon-x svg{width:16px;height:16px}
.chat-log{flex:1;overflow:auto;padding:8px 12px;font:14px/1.45 var(--sans);display:flex;flex-direction:column;gap:4px;min-height:80px}
.cl{word-break:break-word}.cl b{margin-right:6px;font:700 13px var(--px);letter-spacing:.05em}.cl.sys{color:#8fb0ff;font-size:13px;font-style:italic}.cl.me span{color:#fff}.cl span{color:#d5ddf7}.cl.ghost span{color:#9fefff;font-style:italic}
.chat-in{display:grid;grid-template-columns:1fr auto;gap:6px;padding:8px;border-top:1px solid #26346b}
.chat-in input{min-width:0;background:#070c22;border:2px solid #2d3d80;color:#fff;padding:8px 10px;font:14px var(--sans);outline:none}.chat-in input:focus{border-color:var(--cy)}
/* toasts in game */
.game.full .roomtoast{top:auto;bottom:24%;z-index:6}
.net-lost{position:absolute;left:50%;top:84px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:8px;padding:10px 16px;background:#4a1626;color:#fff;font:700 14px var(--px);box-shadow:inset 0 0 0 2px #ff6b7a}
.net-lost i{width:10px;height:10px;background:#ff6b7a;animation:tw .8s infinite}
/* ship HUD tweaks */
.scene-ship .hud-tl .tlist{display:none}.scene-ship .hud-tl.open .tlist{display:block}
.scene-ship .hud-tl.open .tasktab em{transform:rotate(90deg)}
.game.full .tasktab{justify-self:start}
.game.full .gtimer{position:static}
.sab-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#4b3410;color:#ffd27a;font:700 13px var(--px);letter-spacing:.06em;box-shadow:inset 0 0 0 2px #f2922e;animation:tw 1s infinite}
.sab-pill.crit{background:#4a1020;color:#ffb3bc;box-shadow:inset 0 0 0 2px var(--red)}.sab-pill svg,.sab-pill img{width:18px;height:18px}.sab-pill b{color:#fff}
.game.full .gain{position:absolute;left:100%;top:6px;margin-left:10px;white-space:nowrap}
.game.full .alcol{display:flex;flex-direction:column;gap:8px;align-items:center}
.game.full .sabmenu{position:absolute;right:150px;bottom:150px;z-index:25}
.game.full .sabmenu em{font-style:normal;color:#ff9aa6;font-size:11px;margin-left:4px}
.game.full .banner{position:absolute;left:50%;transform:translateX(-50%);top:120px;z-index:15;max-width:min(560px,90vw);text-align:center;pointer-events:none}
.game.full .banner[data-slot=side]{top:186px}
.game.full .banner.ghost{background:linear-gradient(#7fe8ff,#2bb7d6)!important;color:#05223a!important}
.ghost-me .gcv{filter:saturate(.55) hue-rotate(-12deg) brightness(.95)}
.game.full .repair{position:absolute;inset:0;z-index:26}
.game.full .flash{z-index:9}
/* minimap */
.minimap-wrap{position:absolute;inset:0;z-index:24;display:grid;place-items:center;background:rgba(3,5,14,.66);padding:14px}
.mini-box{--cut:12px;width:min(900px,100%);padding:12px;background:#111836;clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px #3a4d99}
.mini-box header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.mini-box header b{font:700 16px var(--px);letter-spacing:.15em;color:var(--cy);margin-right:auto}
.mini-box canvas{width:100%;height:auto;max-height:calc(100dvh - 140px);object-fit:contain;display:block;background:#090c18}
.mm-leg{display:flex;gap:12px;align-items:center;margin-top:8px;font:13px var(--sans);color:#b8c4ee;flex-wrap:wrap}.mm-leg i{display:inline-block;width:12px;height:12px;margin-right:-6px}.mm-leg .me{background:#fff;border-radius:50%}.mm-leg .task{background:#ffd34d;border-radius:50%}.mm-leg .sab{background:#ff3b4e;border-radius:50%}

/* role reveal: intro word, then the line-up (Among Us style) */
.reveal{position:absolute;inset:0;z-index:50;overflow:hidden;background:#000;display:grid;place-items:center;animation:fade .3s}
.rv-sky{position:absolute;inset:0;background:radial-gradient(ellipse 70% 45% at 50% 62%,rgba(79,170,255,.28),transparent 70%),radial-gradient(circle at 50% 120%,#0d2a66,#000 60%);opacity:0;animation:rvSky 1s 1.3s forwards}
.reveal.alien .rv-sky{background:radial-gradient(ellipse 70% 45% at 50% 62%,rgba(255,50,80,.32),transparent 70%),radial-gradient(circle at 50% 120%,#4a0716,#000 60%)}
@keyframes rvSky{to{opacity:1}}
.rv-intro{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.rv-intro span{font:700 clamp(22px,4vw,34px) var(--px);letter-spacing:.5em;color:#cfe3ff;opacity:0;animation:rvIntro 1.35s ease forwards}
@keyframes rvIntro{0%{opacity:0;letter-spacing:1.2em}25%,70%{opacity:1;letter-spacing:.5em}100%{opacity:0;letter-spacing:.3em}}
.rv-main{position:relative;display:grid;justify-items:center;text-align:center;width:100%;padding:0 16px;box-sizing:border-box}
.rv-role{margin:0;font:700 clamp(48px,11vw,112px)/.9 var(--px);letter-spacing:.08em;color:#8fd3ff;text-shadow:0 0 34px rgba(79,170,255,.7),0 5px 0 #0b2a66;opacity:0;animation:rvSlam .55s 1.25s cubic-bezier(.2,1.6,.4,1) forwards}
.reveal.alien .rv-role{color:#ff4d5e;text-shadow:0 0 38px rgba(255,40,70,.8),0 5px 0 #4a0716}
@keyframes rvSlam{0%{opacity:0;transform:scale(2.2)}100%{opacity:1;transform:none}}
.rv-sub{margin:12px 0 0;font:600 clamp(14px,2.2vw,18px) var(--px);letter-spacing:.18em;color:#c4d6ff;opacity:0;animation:rvIn .4s 1.7s forwards}
.reveal.alien .rv-sub{color:#ffb3bc}
.rv-stage{position:relative;width:min(760px,100%);height:clamp(150px,30vh,230px);margin-top:clamp(14px,4vh,34px)}
.rv-spot{position:absolute;left:50%;bottom:6px;width:80%;height:46px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(143,211,255,.55),transparent);filter:blur(2px);opacity:0;animation:rvIn .6s 1.6s forwards}
.reveal.alien .rv-spot{background:radial-gradient(closest-side,rgba(255,77,94,.6),transparent)}
.rv-line{position:absolute;inset:0}
.rv-p{--w:clamp(70px,13vh,118px);--sp:min(92px,11.5vw);position:absolute;bottom:18px;left:calc(50% + var(--x) * var(--sp));width:var(--w);display:grid;justify-items:center;transform:translateX(-50%) scale(calc(1 - var(--d) * .1));transform-origin:50% 100%;filter:brightness(calc(1 - var(--d) * .14));opacity:0;animation:rvRise .6s calc(1.55s + var(--d) * .14s) cubic-bezier(.2,1.3,.4,1) forwards}
.rv-p .rv-a{width:100%}.rv-p .astro{width:100%}
.rv-p b{margin-top:4px;font:700 13px var(--px);color:#fff;text-shadow:0 2px 0 #000;white-space:nowrap}
.reveal.alien .rv-p b{color:#ff4d5e}
.rv-p.me b{font-size:15px}
@keyframes rvRise{0%{opacity:0;translate:0 60px}100%{opacity:1;translate:0 0}}
.rv-goal{max-width:520px;margin:clamp(8px,2vh,18px) 0 0;font:16px/1.5 var(--sans);color:#d4ddf7;opacity:0;animation:rvIn .5s 2.2s forwards}
@keyframes rvIn{from{opacity:0}to{opacity:1}}

/* meeting */
.meet{position:absolute;inset:0;z-index:40;background:rgba(4,7,20,.92);display:grid;animation:fade .25s}
.gather{position:relative;display:grid;place-items:center;align-content:center;gap:10px;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#16337a,#050914 70%)}
.g-rays{position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg,rgba(79,240,255,.07) 0 8deg,transparent 8deg 20deg);animation:spin 20s linear infinite}
.g-table{position:relative;width:min(280px,60vw);animation:pop .6s both}.g-table svg,.g-table img{width:100%;height:auto}
.g-ring{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;width:min(620px,92vw)}.g-cw{display:grid;justify-items:center;width:56px;animation:pop .4s both}.g-cw .astro{width:52px;height:70px}.g-cw small{font:600 11px var(--px);color:#cfe}
.gather h1{position:relative;margin:6px 0 0;font:700 clamp(32px,6vw,58px) var(--px);letter-spacing:.06em;color:#7fe3a0;text-shadow:0 0 26px rgba(127,227,160,.6)}
.gather p{position:relative;margin:0;font:16px var(--sans);color:#d5def7}.gather .dot{display:inline-block;width:12px;height:12px;margin-right:8px;vertical-align:-1px}
.mt{display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:max(14px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));min-height:0;height:100%;box-sizing:border-box;max-width:1240px;width:100%;margin:0 auto}
.mt-head{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:14px}
.mt-head h2{margin:0;font:700 clamp(20px,3vw,32px) var(--px);letter-spacing:.06em;color:#fff}
.mt-stage{padding:5px 12px;font:700 13px var(--px);letter-spacing:.18em;background:#1d2a5a;color:#b6c6ff}.mt-stage.st-vote{background:#5a1a2a;color:#ffb3bc;animation:tw 1s infinite}.mt-stage.st-results{background:#12432e;color:#9ff2c0}
.mt-bar{height:10px;background:#0b1130;box-shadow:inset 0 0 0 1px #2d3d80}.mt-bar i{display:block;height:100%;background:var(--cy);transition:width .25s linear}
.mt-time{font:700 26px var(--px);color:var(--cy);min-width:44px;text-align:right}
.mt-body{display:grid;grid-template-columns:1fr minmax(280px,360px);gap:14px;min-height:0}
.mt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;align-content:start;overflow:auto;min-height:0}
.vcard{--cut:10px;position:relative;display:grid;grid-template-columns:56px 1fr;align-items:center;gap:10px;min-height:86px;padding:8px 12px;cursor:pointer;background:linear-gradient(#1f2b62,#131b44);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));box-shadow:inset 0 0 0 2px #3a4d99;transition:transform .12s}
.vcard:hover{transform:translateY(-2px)}.vcard.sel{box-shadow:inset 0 0 0 3px #ffd34d;background:linear-gradient(#3a3a2a,#22201a)}
.vcard.mine{box-shadow:inset 0 0 0 2px var(--cy)}.vcard.dead{opacity:.45;cursor:default;filter:grayscale(.6)}.vcard.out{box-shadow:inset 0 0 0 3px var(--red)}
.vc-a{width:52px;height:70px}.vc-a .astro{width:100%;height:100%}
.vc-t b{display:block;font:700 18px var(--px);letter-spacing:.06em}.vc-t b small{font-size:12px;color:var(--cy)}.vc-t small{font:12px var(--sans);color:#9aa8d6}
.vcard.myvote{outline:3px solid #ffd84d;outline-offset:-3px;box-shadow:0 0 18px rgba(255,216,77,.35)}
.vc-mine{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:4px;padding:2px 6px;background:#ffd84d;color:#1b1630;font:700 10px var(--px);letter-spacing:.12em}
.vc-mine svg{width:12px;height:12px}
#meetSkip.mine{background:#ffd84d;color:#1b1630;opacity:1}
.vc-voted{position:absolute;right:8px;top:8px;padding:2px 6px;background:#12432e;color:#9ff2c0;font:700 10px var(--px);letter-spacing:.15em}
.vc-caller{position:absolute;right:8px;bottom:6px;font-size:16px}
.vc-conf{position:absolute;right:8px;top:50%;transform:translateY(-50%);display:flex;gap:6px}
.vc-conf button{width:42px;height:42px;display:grid;place-items:center;border:0;cursor:pointer}.vc-conf .cy{background:#2a9a5a}.vc-conf .cn{background:#a03246}.vc-conf svg{width:20px;height:20px}
.vc-dots{grid-column:1/-1;display:flex;gap:4px;flex-wrap:wrap;min-height:12px}.vc-dots i{width:14px;height:14px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.skipcard{cursor:default;grid-template-columns:1fr;min-height:60px}
.mt-side{display:flex;flex-direction:column;min-height:0;background:#0d1436;box-shadow:inset 0 0 0 2px #2d3d80}
.mt-tabs{display:grid;grid-template-columns:1fr 1fr}.mt-tabs button{border:0;padding:10px;cursor:pointer;background:#0a1030;color:#9aa8d6;font:700 13px var(--px);letter-spacing:.12em}.mt-tabs button.on{background:#1d2a5a;color:var(--cy)}
.mt-pane{flex:1;display:flex;flex-direction:column;min-height:0}.mt-pane[hidden]{display:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:6px 8px}.chip{border:0;padding:5px 9px;cursor:pointer;background:#1d2a5a;color:#cfe;font:12px var(--sans);box-shadow:inset 0 0 0 1px #3a4d99}.chip:hover{box-shadow:inset 0 0 0 1px var(--cy)}
.mt-log{flex:1;overflow:auto;padding:8px 12px;font:13px/1.6 var(--sans)}.mt-log p{margin:0;display:flex;gap:8px;align-items:center}.mt-log span{font:600 12px var(--px);color:#7f8fc4;min-width:40px}.mt-log i{width:10px;height:10px;flex:none}.mt-log .sys{color:#ff9aa6}
.mt-side .note{padding:0 12px 10px}
.mt-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.mt-foot span{font:14px var(--sans);color:#b8c4ee}
.meet .eject2{position:absolute;inset:0}
.meet .eject2 .txt{position:absolute;left:0;right:0;top:12%;text-align:center;z-index:5;padding:0 16px}
.meet .eject2 h2{font:700 clamp(20px,3.5vw,34px) var(--px);color:#fff;text-shadow:0 3px 0 #000;margin:0}
.meet .eject2 .sub{margin-top:10px;font:700 18px var(--px)}.res-ok{color:#7fe3a0}.res-bad{color:#ff9aa6}

/* results */
.over{position:absolute;inset:0;z-index:60;display:grid;place-items:center;padding:16px;overflow:auto;background:radial-gradient(circle at 50% 30%,#123a70,#040814 75%);animation:fade .4s}
.over.alien{background:radial-gradient(circle at 50% 30%,#4a0f22,#06030a 75%)}
.ov-box{text-align:center;width:min(900px,100%)}
.ov-box h1{margin:4px 0 6px;font:700 clamp(40px,8vw,80px)/1 var(--px);letter-spacing:.05em;color:#8fd3ff;text-shadow:0 0 30px rgba(79,170,255,.6)}
.over.alien .ov-box h1{color:#ff5d6e;text-shadow:0 0 30px rgba(255,60,90,.6)}
.ov-why{margin:0 0 22px;font:17px var(--sans);color:#d4ddf7}
.ov-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:10px 0 24px}
.ov-p{display:grid;justify-items:center;gap:2px;width:96px;padding:10px 4px;background:#0f1638;box-shadow:inset 0 0 0 2px #2d3d80;animation:pop .4s both}
.ov-p.alien{box-shadow:inset 0 0 0 2px var(--red);background:#2a0d1a}.ov-a{width:52px;height:70px}.ov-a .astro{width:100%;height:100%}
.ov-p b{font:700 15px var(--px)}.ov-p small{font:700 10px var(--px);letter-spacing:.2em;color:#8fd3ff}.ov-p.alien small{color:#ff8a96}
.ov-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.ov-btns button{min-width:220px}

/* tutorial card */
.tut{position:absolute;left:50%;top:86px;transform:translateX(-50%) scale(calc(var(--ui) * var(--fit)));transform-origin:top center;z-index:16;width:min(460px,calc(100vw - 28px));padding:12px 16px 14px;background:rgba(14,22,58,.94);box-shadow:inset 0 0 0 2px #ffd27a,0 10px 30px rgba(0,0,0,.45);pointer-events:auto}
.tut.bump{animation:pop .35s both}
.tut-top{display:flex;align-items:center;gap:10px}.tut-top .kicker{color:#ffd27a;font-size:11px}.tut-top .link{margin-left:auto;font-size:11px;color:#9fb2e8}
.tut-dots{display:flex;gap:4px}.tut-dots i{width:14px;height:6px;background:#2d3d80}.tut-dots i.ok{background:var(--ok)}.tut-dots i.cur{background:#ffd27a;animation:tw 1s infinite}
.tut h3{margin:6px 0 4px;font:700 20px var(--px);letter-spacing:.08em;color:#ffd27a}.tut p{margin:0;font:14px/1.45 var(--sans);color:#dfe6fb}
.tut-keys{display:flex;gap:4px;margin-top:8px}.tut-keys kbd{font-size:14px;padding:3px 8px}
.tut-free{display:flex;gap:10px;align-items:center;font:13px var(--sans);color:#dfe6fb}.tut-free b{font:700 13px var(--px);color:#ffd27a;letter-spacing:.12em}
.scene-ship .tut{top:132px}

/* ===== responsive ===== */
@media (max-width:860px){
  .home-grid{grid-template-columns:1fr}.pilot{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px 14px;padding:14px}
  .pilot-astro{width:56px;height:75px}.pilot-nick{font-size:26px}.pilot .kicker{width:auto}
  .worlds{grid-template-columns:1fr}.world-list{max-height:none;min-height:180px}
  .brief3{grid-template-columns:1fr}.ward{grid-template-columns:1fr}.wp-astro{width:80px;height:107px}
  .mt-body{grid-template-columns:1fr;grid-template-rows:auto minmax(200px,1fr)}.mt-grid{grid-template-columns:repeat(2,1fr);overflow:visible}
  .mt{overflow:auto}
}
@media (max-width:560px){
  .card{padding:44px 16px 20px}.tiles{grid-template-columns:1fr}.tile{min-height:76px}.tile-tx b{font-size:19px}
  .modes{grid-template-columns:1fr}.cbx{width:46px;height:58px;font-size:28px}.code-boxes{gap:6px}
  .world{grid-template-columns:1fr auto;gap:6px 10px}.w-dots{display:none}.w-count{grid-row:1;grid-column:2}.world .btn-sm{grid-column:1/-1}
  .hud-tl{width:min(260px,56vw)}.code-btn b{font-size:22px}.crew-pill{padding:8px 10px}.crew-pill b{font-size:18px}.crew-dots{display:none}
  .hbtn{width:46px;height:46px}.hbtn svg,.hbtn img{width:24px;height:24px}
  .hud-tc{top:70px}.scene-lobby .hud-tc{top:12px}
  .scene-lobby .hud-tl .world-name{display:none}
  .game.full .startbtn{min-width:150px;font-size:22px}
  .rv-p{--sp:min(70px,17vw)}.rv-goal{font-size:14px}
  .mt-head{grid-template-columns:1fr auto;}.mt-head .mt-bar{grid-column:1/-1;grid-row:2}
  .mt-grid{grid-template-columns:1fr 1fr;gap:6px}.vcard{grid-template-columns:40px 1fr;min-height:66px;padding:6px 8px}.vc-a{width:38px;height:51px}.vc-t b{font-size:15px}
  .tut{top:124px}.scene-ship .tut{top:150px}
  .chat-drawer{top:70px;bottom:170px}
}
@media (max-height:520px) and (orientation:landscape){
  .hud-tc{top:12px}.scene-ship .tut{top:70px;width:min(360px,50vw)}.tut p{font-size:12px}
  body[data-controls=joystick] .ctl-joy{width:110px;height:110px}
  .chat-drawer{top:64px;bottom:12px}
}

/* fit HUD to small screens (multiplies the user's UI size setting) */
@media (max-width:560px){:root{--fit:.86}
  .hud-tc{top:auto;bottom:auto;left:auto;right:14px;top:76px;transform:scale(calc(var(--ui) * var(--fit)));transform-origin:top right}
  .scene-lobby .hud-tc{left:50%;right:auto;top:84px;transform:translateX(-50%) scale(calc(var(--ui) * var(--fit)));transform-origin:top center}
  .tut,.scene-ship .tut{top:auto;bottom:178px;width:calc(100vw - 28px)}.tut-keys{display:none}.tut p{font-size:13px}
  .chat-drawer{top:132px}
}
@media (max-height:520px) and (orientation:landscape){:root{--fit:.68}
  .tut,.scene-ship .tut{top:62px;width:min(420px,46vw);transform:translateX(-50%) scale(calc(var(--ui) * var(--fit)))}
  .scene-ship .hud-tc{top:12px}
  .tut-keys{display:none}
  .game.full .banner{top:70px}
}

/* PNG hats in DOM previews (anchored by gen_hats.py) */
.pchar img.phat2{position:absolute;inset:auto;opacity:1!important;animation:none!important;image-rendering:pixelated;pointer-events:none}
.hat span{overflow:visible;padding-top:10px}

/* ---------- sabotage repair mini-games (client/repair.js) ---------- */
.game .repair.rg-wrap{position:absolute;inset:0;z-index:26;display:grid;place-items:center;padding:16px;background:rgba(2,5,14,.78);backdrop-filter:blur(2px)}
.rgame{--cut:14px;width:min(560px,100%);box-sizing:border-box;padding:18px 20px 16px;background:linear-gradient(#1a2452,#0d1433);border:2px solid #f2922e;box-shadow:0 0 0 4px #0a0f26,0 0 40px rgba(242,146,46,.25),0 24px 60px rgba(0,0,0,.6);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));animation:pop .3s both}
.rg-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;margin-bottom:14px}
.rg-ic{display:grid;place-items:center;width:46px;height:46px;background:#2a1a08;border:2px solid #f2922e}
.rg-head h3{margin:2px 0 4px;font:700 19px var(--px);letter-spacing:.14em;color:#ffc37a}
.rg-head p{margin:0;font:14px/1.4 var(--sans);color:#c7d0ef}
.rg-x{width:38px;height:38px;display:grid;place-items:center;background:#0a0f26;border:2px solid #3a4a8c;cursor:pointer;padding:0}.rg-x:hover{border-color:var(--red)}
.rg-body{display:grid;place-items:center;min-height:150px;padding:6px 0}
.rg-foot{display:grid;gap:6px;margin-top:12px}
.rg-bar{height:8px;background:#0a0f26;border:2px solid #2c3c7c}.rg-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f2922e,#5ee08a)}
.rg-st{font:600 12px var(--px);letter-spacing:.14em;color:var(--mut);text-transform:uppercase}
.rgame.solved{border-color:#5ee08a;box-shadow:0 0 0 4px #0a0f26,0 0 46px rgba(94,224,138,.35),0 24px 60px rgba(0,0,0,.6)}.rgame.solved .rg-st{color:#5ee08a}
/* fuse box */
.fuse{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;width:100%;padding:14px;box-sizing:border-box;background:#0a0f26;border:2px solid #2c3c7c}
.brk{display:grid;justify-items:center;gap:8px;padding:10px 0;background:#141c40;border:2px solid #2c3c7c;cursor:pointer}
.brk .led{width:12px;height:12px;background:#5a1420;border:2px solid #0a0f26;box-shadow:none}
.brk.on .led{background:#5ee08a;box-shadow:0 0 10px #5ee08a}
.brk .lever{position:relative;width:26px;height:58px;background:#060a1c;border:2px solid #3a4a8c}
.brk .lever b{position:absolute;left:2px;right:2px;bottom:3px;height:24px;background:linear-gradient(#ff8a96,#e5484d);border:2px solid #0a0f26;transition:bottom .12s}
.brk.on .lever b{bottom:calc(100% - 27px);background:linear-gradient(#b6f8ff,#3ec7e9)}
.brk small{font:700 12px var(--px);color:var(--mut)}
.brk:hover{border-color:#f2922e}
/* antenna */
.tune{display:grid;gap:12px;width:100%}
.tune canvas{width:100%;height:auto;border:2px solid #2c3c7c;image-rendering:pixelated}
.tune-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.tune-row input{width:100%;accent-color:#4ff0ff}
.tune-lock{--k:0;padding:6px 10px;font:700 12px var(--px);letter-spacing:.14em;color:var(--mut);border:2px solid #2c3c7c;background:linear-gradient(90deg,rgba(94,224,138,.35) calc(var(--k) * 100%),transparent 0)}
.tune-lock.on{color:#5ee08a;border-color:#5ee08a}
/* pipes */
.pipes{display:flex;align-items:center;justify-content:center;width:100%;padding:16px 8px;box-sizing:border-box;background:#0a0f26;border:2px solid #2c3c7c}
.pipe{width:min(62px,12vw);aspect-ratio:1;padding:0;background:#141c40;border:2px solid #2c3c7c;cursor:pointer}
.pipe svg{display:block;width:100%;height:100%;transform:rotate(var(--r,0deg));transition:transform .15s}
.pipe .pw{fill:#4a5078}.pipe .pj{fill:#6a7199}.pipe .pf{fill:#0a0f26;transition:fill .2s}
.pipe.wet .pf{fill:#3b82f0}.pipe.wet{border-color:#3b82f0}
.pipe:hover{border-color:#f2922e}
.tank{display:grid;place-items:center;width:48px;height:62px;background:#141c40;border:2px solid #3b82f0}
.tank.out{border-color:#2c3c7c;filter:grayscale(1) brightness(.7)}.tank.out.wet{border-color:#5ee08a;filter:none}
/* thrusters */
.thr{display:grid;gap:12px;width:100%}
.thr-row{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:center;opacity:.55}
.thr-row.cur,.thr-row.ok{opacity:1}
.thr-n{font:700 14px var(--px);color:#9cc4ff}
.thr-bar{position:relative;height:30px;background:#0a0f26;border:2px solid #2c3c7c}
.thr-bar .zone{position:absolute;top:0;bottom:0;background:rgba(94,224,138,.35);border-left:2px solid #5ee08a;border-right:2px solid #5ee08a}
.thr-bar .mk{position:absolute;top:-6px;bottom:-6px;width:6px;margin-left:-3px;background:#fff;box-shadow:0 0 8px #4ff0ff}
.thr-row.cur .thr-bar{border-color:#4ff0ff}
.thr-row.ok .thr-bar{border-color:#5ee08a}.thr-row.ok .mk{background:#5ee08a}
.thr-row.miss .thr-bar{border-color:var(--red);animation:shake .3s}
.thr-go{justify-self:center;margin-top:4px}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (max-width:520px){.fuse{grid-template-columns:repeat(3,1fr)}.rg-head h3{font-size:16px}.tank{width:34px;height:48px}}
.rgame{text-align:left}

/* ---------- eject: airlock opens, the player tumbles out into space ---------- */
.meet .ej3{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse 80% 60% at 80% 100%,#1d2f78,#070b1c 60%,#03050d)}
.ej-stars{position:absolute;inset:0;display:flex;width:200%;animation:ejStars 9s linear infinite}
.ej-stars.far{animation-duration:22s;opacity:.55}
.ej-stars>div{position:relative;width:50%;height:100%}
.ej-stars i{position:absolute;width:var(--s);height:var(--s);background:#e9f6ff;opacity:var(--o);box-shadow:0 0 4px #9fe9ff}
@keyframes ejStars{to{transform:translateX(-50%)}}
.ej-planet{position:absolute;right:-18vmin;bottom:-46vmin;width:80vmin;height:80vmin;border-radius:50%;background:radial-gradient(circle at 35% 28%,#c9b8ff,#8a6cf0 32%,#3b1f8a 65%,#160b40);box-shadow:0 0 60px 8px rgba(138,108,240,.35);animation:ejPlanet 7.5s ease-out both}
@keyframes ejPlanet{from{transform:scale(.88)}to{transform:scale(1)}}
.ej-hull{position:absolute;left:0;top:0;bottom:0;width:clamp(90px,17vw,200px);z-index:3;background:linear-gradient(90deg,#1a2050,#2c3570 70%,#3a4580);border-right:6px solid #0a0f26;box-shadow:inset -10px 0 0 #232b5e,8px 0 30px rgba(0,0,0,.5);animation:ejHull 7.5s ease-in both}
.ej-hull::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 58px,#141a44 58px 62px),radial-gradient(circle,#5a64a0 2px,transparent 3px) 10px 10px/30px 60px}
@keyframes ejHull{0%,35%{transform:none}100%{transform:translateX(-120%)}}
.ej-lamp{position:absolute;right:28px;top:calc(50% - 130px);width:22px;height:22px;background:#5a1420;border:3px solid #0a0f26;animation:ejLamp .45s steps(1) 6}
@keyframes ejLamp{50%{background:#ff3b4e;box-shadow:0 0 22px 6px #ff3b4e}}
.ej-hatch{position:absolute;right:-6px;top:calc(50% - 80px);width:70px;height:160px;background:#03050d;border:6px solid #0a0f26;outline:6px solid #f5c542;outline-offset:-2px;overflow:hidden}
.ej-hatch::after{content:"";position:absolute;inset:0;border:6px dashed #141828;pointer-events:none}
.ej-door{position:absolute;inset:0;background:linear-gradient(#5a64a0,#3a4580);border-bottom:6px solid #f5c542;animation:ejDoor .5s .7s cubic-bezier(.5,0,.8,.3) both}
@keyframes ejDoor{to{transform:translateY(-100%)}}
.ej-air{position:absolute;right:-6px;top:50%}
.ej-air i{position:absolute;width:6px;height:6px;background:#dff4ff;opacity:0;animation:ejAir .9s ease-out both}
@keyframes ejAir{0%{opacity:.9;transform:rotate(var(--a)) translateX(0)}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--l))}}
.ej-fly{position:absolute;left:clamp(40px,12vw,150px);top:calc(50% - 60px);width:clamp(70px,9vw,110px);z-index:2;opacity:0;animation:ejFly 5.8s 1s cubic-bezier(.25,.6,.35,1) both}
.ej-spin{animation:ejSpin 1.6s 1s linear infinite}
.ej-spin .astro{width:100%}
@keyframes ejFly{0%{opacity:1;transform:translate(0,0) scale(1.15)}12%{opacity:1;transform:translate(14vw,-2vh) scale(1.05)}85%{opacity:1}100%{opacity:0;transform:translate(78vw,14vh) scale(.18)}}
@keyframes ejSpin{to{transform:rotate(360deg)}}
.ej3 .txt{position:absolute;left:0;right:0;top:14%;z-index:6;text-align:center;padding:0 16px}
.ej3 .txt h2{margin:0 auto;max-width:900px;font:700 clamp(20px,3.4vw,34px)/1.3 var(--px);color:#fff;text-shadow:0 3px 0 #000,0 0 24px rgba(0,0,0,.8)}
.ej3 .sub{margin-top:10px;font:700 18px var(--px)}
.ej3.tie .txt{top:40%}
.ej3.alien .ej-planet{box-shadow:0 0 70px 10px rgba(255,77,94,.25)}
.ejecting.meet{animation:none}
.meet .ej3{animation:ejShake .4s .7s}
@keyframes ejShake{25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-3px)}75%{transform:translate(-3px,2px)}}

/* ---------- menus in the loading-screen style (nickname + home) ---------- */
.logo.md{font-size:clamp(34px,6vw,58px);margin:4px 0 12px}
.logo.left{text-align:left}.logo.left small{letter-spacing:.55em}
.boot-ring.r2{inset:-16px;border:2px solid rgba(143,166,255,.18);animation:spin 14s linear infinite reverse}
.boot-ring.r2::after{display:none}
.boot-orbit.big{width:200px;height:200px}.boot-orbit.big .boot-ship{width:96px;height:128px}
.boot-ship .pchar{filter:drop-shadow(0 8px 0 rgba(0,0,0,.35)) drop-shadow(0 0 18px rgba(79,240,255,.25))}
.boot-form{position:relative;width:min(440px,100%);height:auto;gap:10px;padding:46px 0 10px}
.boot-form .mbtn-back{left:0;top:0}
.suit-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:6px 0 4px}
.sw-dot{width:28px;height:28px;padding:0;border:3px solid #0a0f26;background:var(--sw);cursor:pointer;box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 0 0 2px #2c3c7c;transition:transform .12s}
.sw-dot:hover{transform:translateY(-2px)}
.sw-dot.on{box-shadow:inset 0 -5px 0 rgba(0,0,0,.25),0 0 0 3px #fff,0 0 16px var(--sw);transform:translateY(-2px)}
.nick-form{display:grid;gap:10px;width:100%;text-align:center}
.nick-form label{font:600 12px var(--px);letter-spacing:.28em;color:#8ea6e6}
.nick-form .inp.big{background:rgba(7,12,34,.85);border:0;border-bottom:3px solid #3a51a0;box-shadow:none}
.nick-form .inp.big:focus{border-bottom-color:var(--cy);box-shadow:0 10px 24px -14px var(--cy)}
.nick-form .inp::placeholder{color:#34447e;letter-spacing:.35em}
.nick-form .boot-txt{margin:0;font:13px/1.45 var(--sans);letter-spacing:0;color:#8f9cc8}
.nick-form .err{min-height:18px;margin:0}
.nick-form .btn-main svg{width:22px;height:22px}
.home2{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,560px);gap:clamp(20px,5vw,64px);align-items:center;justify-content:center;width:min(980px,100%)}
.home-hero{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.home-hero .boot-orbit{margin-bottom:14px}
.home-hero .link{display:inline-flex;align-items:center;gap:6px}
.home-menu .sub{margin:0 0 18px}
.mlist{display:grid;gap:10px}
.mrow{--cut:10px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 16px;border:0;cursor:pointer;text-align:left;color:#e8eeff;background:linear-gradient(90deg,rgba(34,48,106,.92),rgba(18,26,68,.72));clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));box-shadow:inset 3px 0 0 #3a51a0;transition:transform .15s,box-shadow .15s,background .15s}
.mrow:hover,.mrow:focus-visible{transform:translateX(6px);box-shadow:inset 4px 0 0 var(--cy),0 0 30px rgba(79,240,255,.12);outline:none}
.mrow-ic{display:grid;place-items:center;width:52px;height:52px;background:rgba(0,0,0,.28)}
.mrow-ic svg,.mrow-ic img{width:40px;height:40px}
.mrow-tx{display:grid;gap:3px}.mrow-tx b{font:700 21px var(--px);letter-spacing:.1em}.mrow-tx small{font:13px/1.35 var(--sans);color:#a9b6e2}
.mrow-go svg{width:18px;height:18px;transform:rotate(-90deg);opacity:.5;transition:opacity .15s,transform .15s}
.mrow:hover .mrow-go svg{opacity:1;transform:rotate(-90deg) translateY(4px)}
.mrow.primary{background:linear-gradient(90deg,#2be0ff,#1590c8);color:#04172b;box-shadow:inset 4px 0 0 #b6f8ff}
.mrow.primary small{color:#0b3657}.mrow.primary .mrow-ic{background:rgba(255,255,255,.25)}
.mrow.pulse{position:relative}.mrow.pulse::after{content:'';position:absolute;right:46px;top:50%;width:10px;height:10px;margin-top:-5px;background:#ffd27a;box-shadow:0 0 12px #ffd27a;animation:tw 1.2s infinite}
@media (max-width:760px){
  .home2{grid-template-columns:1fr;gap:14px}
  .home-hero{display:grid;grid-template-columns:auto 1fr;justify-items:start;text-align:left;column-gap:14px;row-gap:2px}
  .home-hero .boot-orbit.big{grid-row:1/5;width:110px;height:110px;margin:0}.home-hero .boot-orbit.big .boot-ship{width:56px;height:75px}
  .home-hero .pilot-nick{font-size:26px}
  .logo.md.left{text-align:center}.home-menu .sub{text-align:center}
  .mrow-tx b{font-size:18px}.mrow-ic{width:44px;height:44px}.mrow-ic svg{width:32px;height:32px}
}
/* free-practice note fades out so it does not cover the station */
.tut:has(.tut-free){animation:tutAway .6s 7s forwards}
@keyframes tutAway{to{opacity:0;visibility:hidden}}
@media (max-height:520px) and (min-width:761px){
  .home2{gap:24px}.home-hero .boot-orbit.big{width:120px;height:120px;margin-bottom:6px}.home-hero .boot-orbit.big .boot-ship{width:60px;height:80px}
  .home-hero .pilot-nick{font-size:24px}.home-hero .pilot-tut{display:none}
  .logo.md{font-size:30px;margin:0 0 12px}.logo.md small{margin-top:4px}.home-menu .sub{display:none}
  .mlist{gap:6px}.mrow{padding:6px 12px}.mrow-ic{width:38px;height:38px}.mrow-ic svg{width:28px;height:28px}.mrow-tx b{font-size:17px}.mrow-tx small{font-size:12px}
  .boot-form{padding-top:36px}.boot-form .boot-orbit{width:96px;height:96px}.boot-form .boot-ship{width:48px;height:64px}
}
/* pixel menu icons (pixIcon in art.js): one colour, flat tile */
.mrow-ic{color:#7fe9ff;background:#0a1030;box-shadow:inset 0 0 0 2px #2c3c7c}
.mrow-ic .pix-ic{width:32px;height:32px;image-rendering:pixelated}
.mrow:hover .mrow-ic{color:#fff;box-shadow:inset 0 0 0 2px var(--cy)}
.mrow.primary .mrow-ic{color:#04172b;background:rgba(255,255,255,.35);box-shadow:inset 0 0 0 2px rgba(4,23,43,.35)}
.mrow-ic .menu-ic{width:44px;height:44px;image-rendering:pixelated;filter:drop-shadow(0 2px 0 rgba(0,0,0,.45));transition:transform .15s}
.mrow.primary .mrow-ic{background:#0a1030;box-shadow:inset 0 0 0 2px #b6f8ff}
.mrow:hover .mrow-ic .menu-ic{transform:translateY(-2px)}

/* ---------- quick game, alien powers, signal, spectator, new tasks ---------- */
.modes.three{grid-template-columns:repeat(3,1fr)}.mode.hot{box-shadow:inset 0 0 0 2px var(--cy)}
.roles4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 14px}
.rolec{display:grid;justify-items:center;gap:6px;padding:14px 10px;border:0;cursor:pointer;color:#e8eeff;background:linear-gradient(160deg,#22306a,#121a44);box-shadow:inset 0 0 0 2px #2c3c7c;text-align:center}
.rolec b{font:700 15px var(--px);letter-spacing:.1em}.rolec small{font:12px/1.35 var(--sans);color:#a9b6e2}.rolec .rc-ic svg,.rolec .rc-ic img{width:56px;height:56px}
.rolec.on{box-shadow:inset 0 0 0 3px var(--cy),0 0 24px rgba(79,240,255,.2)}.rolec.alien.on{box-shadow:inset 0 0 0 3px var(--red),0 0 24px rgba(255,77,94,.25)}
.quick-row{display:flex;align-items:center;gap:14px;margin:0 0 16px;font:700 14px var(--px);letter-spacing:.1em}.quick-row small{font:13px var(--sans);color:var(--mut)}
.stepper{display:flex;align-items:center;gap:8px}.stepper b{min-width:24px;text-align:center;font-size:20px}
.btn-sm.watch{background:#2a1a50;color:#d8c8ff}
.sigm{width:190px;margin:0 0 8px auto;padding:6px 8px;background:rgba(20,8,24,.85);box-shadow:inset 0 0 0 2px #6a2040}
.sig-top{display:flex;justify-content:space-between;align-items:center;font:700 11px var(--px);letter-spacing:.12em;color:#ffb3bc}.sig-top b{display:flex;align-items:center;gap:4px}
.sig-bar{height:8px;margin-top:4px;background:#1a0a14}.sig-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f2922e,#ff4d5e);transition:width .3s}
.sigm.hot{animation:sigHot .8s infinite}@keyframes sigHot{50%{box-shadow:inset 0 0 0 2px #ff4d5e,0 0 16px rgba(255,77,94,.6)}}
.abmenu button{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;text-align:left}
.abmenu button span{display:grid}.abmenu small{font:11px var(--sans);opacity:.8}.abmenu .rdot,.sabmenu .rdot{display:inline-block;width:10px;height:10px}
.sigc{color:#ffb3bc;font-style:normal;font:700 11px var(--px)}.ab-note{margin:6px 0 0;font:11px/1.4 var(--sans);color:#c7b3d8;max-width:260px}
.gb.abil{--btn:#b04dff}
#gm.glitching .gcv{filter:hue-rotate(40deg) saturate(1.4);animation:glitchW .35s infinite}@keyframes glitchW{50%{transform:translateX(2px) skewX(.6deg)}}
.tlist p.wait{opacity:.55}.tlist p.jam span{color:#ffb347}.tlist small.part{color:var(--cy)}.tlist small.after{display:block;font:11px var(--sans);color:#ffd27a}
.spectator .tasktab,.spectator .tlist{display:none}
.watchbar{display:flex;align-items:center;gap:8px;padding:8px;background:rgba(10,15,38,.9);box-shadow:inset 0 0 0 2px #3a4a8c}
.watchbar #wPrev svg{transform:rotate(90deg)}.watchbar #wNext svg{transform:rotate(-90deg)}
.wb-who{display:grid;min-width:110px;text-align:center}.wb-who small{font:10px var(--px);color:var(--mut);letter-spacing:.12em}.wb-who b{font:700 15px var(--px)}
.dl-sky{position:relative;height:90px;background:linear-gradient(#030716,#0d1d4a);border:2px solid #2c3c7c;margin-bottom:8px;overflow:hidden}
.dl-sky .sat{position:absolute;top:14px;width:22px;height:12px;margin-left:-11px;background:#dfe8ff;box-shadow:-12px 0 0 -2px #4ff0ff,12px 0 0 -2px #4ff0ff}
.dl-sky .beam{position:absolute;bottom:0;width:6px;height:70px;margin-left:-3px;background:rgba(79,240,255,.25)}.dl-sky .beam.on{background:#4ff0ff;box-shadow:0 0 14px #4ff0ff}
.code-disp{text-align:center;font:700 34px var(--px);letter-spacing:.4em;margin:6px 0}.keypad{display:grid;grid-template-columns:repeat(3,64px);gap:6px;justify-content:center}
.tubes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tube{display:grid;justify-items:center;gap:4px;padding:8px;cursor:pointer;background:#141c40;border:2px solid #2c3c7c;color:#fff}
.tube i{width:18px;height:46px;border:2px solid #9ea3bf;border-top:0;background:linear-gradient(transparent 30%,hsl(calc(30 - var(--fe)),70%,40%) 30%)}.tube.sel{border-color:var(--cy);box-shadow:0 0 12px rgba(79,240,255,.4)}
.spec{display:block;width:100%;height:24px}.specs{display:grid;gap:6px;margin-top:8px}.spc{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;text-align:left}
.cellfit{display:flex;justify-content:center;gap:40px;text-align:center}.sock svg,.cellb svg{width:80px;height:80px}.cellb{padding:4px}.cellb svg{transform:rotate(var(--r));transition:transform .15s}
@media (max-width:760px){.modes.three,.roles4{grid-template-columns:1fr 1fr}}
/* mission-patch icons (tools/gen_menu_icons.py) */
.menu-ic{image-rendering:pixelated;display:block}
.mrow-ic .menu-ic{width:48px;height:48px}.mrow-ic{background:transparent;box-shadow:none}.mrow.primary .mrow-ic{background:transparent;box-shadow:none}
.mode-ic .menu-ic{width:84px;height:84px;margin:0 auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.4))}
.rolec .rc-ic .menu-ic{width:64px;height:64px}
.mode.disabled .menu-ic{filter:grayscale(.85) brightness(.75)}
/* waste compactor task */
.trash{display:grid;grid-template-columns:1fr 120px;gap:14px;align-items:end}
.tr-items{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tr-it.in{opacity:.25;transform:scale(.9)}
.tr-bin{position:relative;height:170px;background:#0a0f26;border:4px solid #4a5078;border-top:10px solid #6a7199;overflow:hidden;transition:height .3s}
.tr-fill{position:absolute;left:6px;right:6px;bottom:6px;height:0;background:repeating-linear-gradient(45deg,#6a7199 0 8px,#9ea3bf 8px 16px,#f2922e 16px 20px);transition:height .25s}
.tr-cube{position:absolute;left:30%;right:30%;bottom:6px;height:0;background:#6a7199;border:3px solid #141828;opacity:0}
.tr-bin.pressed .tr-fill{height:24%!important}.tr-bin.pressed .tr-cube{height:34%;opacity:1;transition:height .3s .2s}
.tr-bin.launch .tr-cube{transform:translateY(-260px) rotate(200deg);transition:transform .6s ease-in}
.vcard.mine{cursor:default}
/* crouch toggle for touch controls (keyboard: hold Shift) */
.ctl-crouch{display:none}
body[data-controls=joystick] .ctl-crouch,body[data-controls=buttons] .ctl-crouch{display:grid;justify-items:center;gap:2px;width:64px;padding:6px 0;margin-bottom:8px;border:0;cursor:pointer;color:#cfe;background:rgba(20,28,64,.82);box-shadow:inset 0 0 0 2px #3a4d99,0 4px 0 rgba(0,0,0,.4);pointer-events:auto;touch-action:none}
.ctl-crouch small{font:600 10px var(--px);letter-spacing:.08em}.ctl-crouch.on{box-shadow:inset 0 0 0 3px var(--cy),0 0 14px rgba(79,240,255,.4)}

/* map choice: a map still in design shows a small "soon" tag */
.seg button small.soon{display:block;font:600 10px var(--px);letter-spacing:.08em;color:#f2922e;opacity:.9}
.seg button:disabled{opacity:.55;cursor:not-allowed}
/* Voyager tasks (tasks-voyager.js) */
.choices.col{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.vrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:6px 0}.vrow b{min-width:110px}
.code{display:flex;flex-direction:column;gap:6px;font-family:ui-monospace,Consolas,monospace}
.code .ln{text-align:left;font-family:inherit;text-transform:none;letter-spacing:0}.code .ln small{opacity:.55;margin-right:8px}
.skygrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:300px;margin:8px auto;background:#070b1c;padding:6px;box-shadow:inset 0 0 0 2px #2c3c7c}
.skygrid .cell{aspect-ratio:1;min-height:0;padding:0;background:#0b1130;color:#ffe9a8;font-size:14px}

/* ===== Voyager mode HUD (SELENE) ===== */
.voy-pill{position:relative;display:flex;gap:8px;align-items:center;margin-top:6px;padding:5px 12px 8px;background:rgba(10,15,38,.88);box-shadow:inset 0 0 0 2px #2c3c7c;font:700 12px var(--px);letter-spacing:.1em;color:#d9e4ff}
.voy-pill span{color:var(--cy)}.voy-pill i{position:absolute;left:4px;right:4px;bottom:3px;height:3px;background:#1b2550}
.voy-pill i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--p);background:linear-gradient(90deg,#4ff0ff,#f2922e)}
.inv{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;justify-content:center;pointer-events:auto}
.inv .islot{position:relative;width:64px;height:64px;border:0;cursor:pointer;padding:6px;background:#8a3c42;box-shadow:inset 0 0 0 3px #e07a72,inset 0 -6px 0 rgba(0,0,0,.25);image-rendering:pixelated}
.inv .islot.full{background:#c45c5c}.inv .islot.sel{box-shadow:inset 0 0 0 3px #ffe14d,0 0 0 3px #ffe14d,inset 0 -6px 0 rgba(0,0,0,.25);transform:translateY(-4px)}
.inv .islot img{width:100%;height:100%;image-rendering:pixelated}
.inv .islot kbd{position:absolute;left:3px;top:2px;font:700 10px var(--px);color:#ffe9e4;background:none;border:0}
.inv small{flex-basis:100%;text-align:center;font:600 12px var(--px);color:#e8eaf6;text-shadow:0 2px 0 #000}
.tlist .jobline{font:700 12px var(--px);letter-spacing:.08em;color:var(--cy);display:flex;gap:6px;align-items:center}
.rv-job{font:700 18px var(--px);letter-spacing:.12em;color:#ffe14d;margin:.4em 0 0;display:grid;gap:4px}.rv-job small{font:500 14px system-ui;letter-spacing:0;color:#cfd6f3}
@media (max-width:600px){.inv .islot{width:52px;height:52px}}

/* Alien caught on the Moon: cargo pod fired by the mass-driver catapult (game.js capsuleEject, sprites from tools/build_voyager.py) */
.cat3{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#3b3f55,#0b0e1d 60%,#05060d)}
.cat3 .cap-sky{position:absolute;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 20%,#fff,transparent),radial-gradient(2px 2px at 40% 12%,#cfe,transparent),radial-gradient(1px 1px at 85% 45%,#fff,transparent),radial-gradient(1px 1px at 10% 55%,#fff,transparent),radial-gradient(1px 1px at 55% 40%,#fff,transparent);opacity:.8}
.cat3 .cat-earth{position:absolute;right:7%;top:34%;width:min(13vw,100px);aspect-ratio:300/286;background:url(assets/voyager/earth.png) center/contain no-repeat;image-rendering:pixelated}
.cat3 .cap-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#9a9dac,#6c6f80 40%,#4f5263);box-shadow:inset 0 5px 0 #b4b7c4}
.cat3 .cap-floor i{position:absolute;border-radius:50%;background:radial-gradient(ellipse at 45% 35%,#5d6072,#7c7f8f 70%);box-shadow:inset 0 3px 0 rgba(0,0,0,.25),0 2px 0 #b0b3c0}
.cat3 .cap-floor i:nth-child(1){left:58%;top:22%;width:120px;height:26px}.cat3 .cap-floor i:nth-child(2){left:78%;top:55%;width:70px;height:16px}
.cat3 .cap-floor i:nth-child(3){left:4%;top:70%;width:90px;height:20px}.cat3 .cap-floor i:nth-child(4){left:40%;top:78%;width:50px;height:12px}
.cat3 .cat-rig{position:absolute;left:6%;bottom:18%}   /* stands on the ground, not on the horizon line */
.cat3 .cat-pad{position:absolute;left:-4%;right:40%;bottom:-6%;height:16%;border-radius:50%;background:radial-gradient(ellipse,#c9ccd8 0 55%,#9fa2b2 56% 64%,rgba(0,0,0,.35) 66%,transparent 72%)}
.cat3 .cat-img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.cat3 .cat-podw{position:absolute;height:0;transform-origin:0 0}
.cat3 .cat-beam{position:absolute;left:0;top:-5px;width:100%;height:8px;border-radius:4px;background:#4ff0ff;opacity:.1;filter:blur(1px);box-shadow:0 0 18px 4px rgba(79,240,255,.7);animation:catCharge 2.4s .3s ease-in forwards,catBeamOff .4s 3s forwards}
.cat3 .cat-pod{position:absolute;left:0;bottom:2px;animation:catShake .14s 1.3s 10 alternate,catFire .9s 2.8s cubic-bezier(.6,0,1,.6) forwards}
.cat3 .cat-pod img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.cat3 .cat-win{position:absolute;border-radius:50%;overflow:hidden;background:#0b1130;display:grid;place-items:center}
.cat3 .cat-win::after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),rgba(160,240,255,.12) 38%,rgba(79,240,255,.18));animation:catRed .3s 1.3s 7 alternate}
.cat3 .cat-who{width:130%;margin-top:30%}.cat3 .cat-who .astro{width:100%}
.cat3 .cat-trail{position:absolute;right:70%;top:32%;height:36%;width:0;background:linear-gradient(90deg,rgba(79,240,255,0),rgba(79,240,255,.85),#fff);filter:blur(3px);animation:catTrail 1.6s 2.8s cubic-bezier(.6,0,1,.6) forwards}   /* grows behind the pod as it flies */
.cat3 .cat-spark{position:absolute;right:16%;top:4%;width:10px;height:10px;background:#fff;opacity:0;box-shadow:0 0 18px 6px rgba(160,240,255,.9);transform:rotate(45deg);animation:catSpark 1s 3.5s forwards}
.cat3 .txt{position:absolute;left:0;right:0;top:10%;text-align:center}
@keyframes catCharge{to{opacity:1}}
@keyframes catBeamOff{to{opacity:0}}
@keyframes catShake{from{transform:translateY(-2px) rotate(-1deg)}to{transform:translateY(1px) rotate(1deg)}}
@keyframes catRed{to{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.4),rgba(255,60,80,.45) 60%)}}
@keyframes catFire{to{transform:translateX(170vw)}}
@keyframes catTrail{0%{width:0;opacity:1}55%{width:60vw;opacity:1}100%{width:90vw;opacity:0}}
@keyframes catSpark{0%{opacity:0;transform:rotate(45deg) scale(.3)}40%{opacity:1;transform:rotate(45deg) scale(1.6)}100%{opacity:0;transform:rotate(45deg) scale(.2)}}

/* ===== Voyager launch cutscene (client/launch.js) ===== */
#gm.cutscene .hud,#gm.cutscene .keyhint,#gm.cutscene .roomtoast,#gm.cutscene .banner,#gm.cutscene .ctl{display:none!important}
#gm.cutscene::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 9vh 0 #000,inset 0 -9vh 0 #000;z-index:5}
.launch-ov{position:absolute;inset:0;z-index:40;background:transparent}.launch-ov canvas{opacity:0}.launch-ov.fly{background:#04050c;animation:lcIn .4s}.launch-ov.fly canvas{opacity:1}
.launch-ov canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.launch-ov .lc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;transition:opacity .6s}.launch-ov .lc-vid.on{opacity:1}
@media (orientation:portrait){.launch-ov .lc-vid{object-fit:contain}}
.lc-num{position:absolute;inset:0;display:grid;place-items:center;font:700 min(34vw,260px) var(--px);color:#fff;text-shadow:0 0 40px rgba(79,240,255,.8),0 8px 0 #0b1130;pointer-events:none}
.lc-num.pop{animation:lcPop .9s ease-out}.lc-num.go{font-size:min(16vw,140px);letter-spacing:.15em;color:#ffe14d;text-shadow:0 0 40px rgba(242,146,46,.9)}
.lc-cap{position:absolute;left:0;right:0;top:12%;text-align:center;font:700 clamp(18px,3vw,30px) var(--px);letter-spacing:.2em;color:var(--cy);opacity:0;transition:opacity .5s;text-shadow:0 3px 0 #000}
.lc-cap.on{opacity:1}
.lc-skip{position:absolute;right:18px;bottom:18px;z-index:2}
.lc-cred{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,rgba(20,30,70,.85),#03040a 70%);animation:lcIn 1.2s}
.lc-cred::before{content:'';position:absolute;right:8%;top:14%;width:min(38vw,320px);aspect-ratio:600/542;background:url(assets/voyager/probe.png) center/contain no-repeat;image-rendering:pixelated;animation:lcDrift 26s linear forwards;opacity:.9}
.lc-roll{position:absolute;left:50%;width:min(86vw,640px);transform:translateX(-50%);top:100%;text-align:center;animation:lcRoll 24s linear forwards}
.lc-roll h2{font:700 clamp(30px,6vw,56px) var(--px);letter-spacing:.2em;color:#fff;margin:0 0 1.2em}
.lc-roll p{font:500 clamp(16px,2.2vw,21px)/1.6 system-ui;color:#dfe6ff;margin:0 0 1.6em}
.lc-roll h3{font:700 clamp(18px,3vw,28px) var(--px);letter-spacing:.12em;color:#ffe14d;margin-top:2em}
@keyframes lcIn{from{opacity:0}}
@keyframes lcPop{from{transform:scale(1.8);opacity:0}25%{opacity:1}to{transform:scale(1);opacity:.85}}
@keyframes lcRoll{to{transform:translate(-50%,-100%);top:-10%}}
@keyframes lcDrift{from{transform:translate(0,0) rotate(-4deg)}to{transform:translate(-30vw,12vh) rotate(6deg) scale(.6)}}

/* map choice cards (core.js mapCards) */
.maprow{display:grid;gap:8px;margin:6px 0}.maprow>span{font:600 13px var(--px);letter-spacing:.06em;color:#b8c4ee}
.mapcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.mapc{display:grid;gap:6px;padding:6px;border:0;cursor:pointer;background:#0b1130;box-shadow:inset 0 0 0 2px #2d3d80;color:#b8c4ee;text-align:center}
.mapc img{width:100%;aspect-ratio:384/240;object-fit:cover;image-rendering:pixelated;display:block;filter:saturate(.75) brightness(.8);transition:filter .15s}
.mapc b{font:700 14px var(--px);letter-spacing:.12em}
.mapc:hover img{filter:none}.mapc.on{background:#123a5a;color:var(--cy);box-shadow:inset 0 0 0 3px var(--cy),0 0 18px rgba(79,240,255,.35)}.mapc.on img{filter:none}
.mapc:disabled{opacity:.5;cursor:not-allowed}.mapc small.soon{font:600 10px var(--px);color:#f2922e}

/* the tutorial card stays on top of the Council / ejection overlays */
#gm .tut{z-index:45}
#tMap .mapc small{font:600 11px var(--px);color:#ffd27a}#tMap .mapc small.ok{color:#5ee08a}
#gm:has(> #meet) .tut{top:auto;bottom:84px}

/* emote wheel (R) */
.emo-wheel{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle,rgba(4,7,20,.25),rgba(4,7,20,.6));animation:fade .15s}
.ew-ring{position:relative;width:min(78vmin,440px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(14,22,58,.55) 0 30%,rgba(14,22,58,.92) 31% 70%,rgba(14,22,58,.55) 71%);box-shadow:0 0 0 3px #2d3d80,inset 0 0 0 3px #2d3d80}
.ew-it{position:absolute;left:50%;top:50%;width:27%;aspect-ratio:1;transform:translate(calc(-50% + var(--x) * 155%), calc(-50% + var(--y) * 155%));border:0;border-radius:50%;cursor:pointer;background:#0b1130;box-shadow:inset 0 0 0 2px #3a4a8c;display:grid;place-items:center;padding:4px;transition:transform .12s,background .12s}
.ew-it img{width:62%;image-rendering:pixelated;pointer-events:none}.ew-it small{position:absolute;bottom:-18px;font:600 11px var(--px);color:#cfd6f3;white-space:nowrap;pointer-events:none}
.ew-it.on{background:#123a5a;box-shadow:inset 0 0 0 3px var(--cy),0 0 20px rgba(79,240,255,.5);transform:translate(calc(-50% + var(--x) * 155%), calc(-50% + var(--y) * 155%)) scale(1.12)}
.ew-mid{position:absolute;inset:34%;border-radius:50%;display:grid;place-content:center;text-align:center;gap:4px}.ew-mid b{font:700 16px var(--px);letter-spacing:.1em;color:var(--cy)}.ew-mid small{font:500 11px system-ui;color:#98a2c9}
.ctl-emote{display:none}
body[data-controls=joystick] .ctl-emote,body[data-controls=buttons] .ctl-emote{display:grid;justify-items:center;gap:2px;width:64px;padding:6px 0;margin-bottom:8px;border:0;cursor:pointer;color:#cfe;background:rgba(20,28,64,.82);box-shadow:inset 0 0 0 2px #3a4d99,0 4px 0 rgba(0,0,0,.4);pointer-events:auto;touch-action:none}
.ctl-emote small{font:600 10px var(--px);letter-spacing:.08em}

/* ===== Profile drawer (profile.js) ===== */
.prof-wrap{position:fixed;inset:0;z-index:60;background:rgba(3,5,14,0);transition:background .25s}
.prof-wrap.on{background:rgba(3,5,14,.6)}
.prof{position:absolute;right:0;top:0;bottom:0;width:min(760px,100vw);display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:18px;padding:22px;box-sizing:border-box;overflow:auto;
  background:linear-gradient(160deg,#101a46,#080d26);box-shadow:-4px 0 0 #2d3d80,-20px 0 50px rgba(0,0,0,.5);transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.prof-wrap.on .prof{transform:none}
.prof .icon-x{position:absolute;right:12px;top:12px;z-index:2}
.pf-hero{display:grid;justify-items:center;align-content:center;gap:8px}
.pf-stage{position:relative;width:100%;display:grid;place-items:center;padding:20px 0 10px}
.pf-spot{position:absolute;bottom:14px;width:70%;height:26px;border-radius:50%;background:radial-gradient(ellipse,rgba(79,240,255,.35),transparent 70%)}
.pf-astro{position:relative;width:min(220px,60vw);aspect-ratio:148/258;z-index:1}
.pf-astro .pf-frame{position:absolute;left:0;top:0;width:100%;height:100%;image-rendering:pixelated;display:block}
.pf-astro .pf-hat{position:absolute;image-rendering:pixelated;height:auto}
.pf-nickbox{position:relative;display:block;width:min(240px,80%);margin-top:12px}
.pf-nickin{width:100%;box-sizing:border-box;text-align:center;font:700 28px var(--px);letter-spacing:.2em;text-transform:uppercase;padding:6px 26px 6px 10px;border:0;outline:0;background:rgba(11,17,48,.6);box-shadow:inset 0 -3px 0 #2d3d80;text-shadow:0 2px 0 #000;transition:box-shadow .15s}
.pf-nickin:hover,.pf-nickin:focus{box-shadow:inset 0 -3px 0 var(--cy),0 0 0 2px #2d3d80}
.pf-nickin.bad{box-shadow:inset 0 -3px 0 #ff4d5e}
.pf-nickbox i{position:absolute;right:8px;top:50%;transform:translateY(-50%);color:#7f8cc0;pointer-events:none}
.pf-nickerr{min-height:14px;font:600 11px var(--px);color:#ff8a94}
.pf-opts{display:grid;align-content:start;gap:8px;padding-top:26px}
.pf-colors{display:flex;flex-wrap:wrap;gap:8px}
.pf-greet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pf-emo{display:grid;justify-items:center;gap:2px;padding:6px;border:0;cursor:pointer;background:#0b1130;box-shadow:inset 0 0 0 2px #2d3d80;color:#cfd6f3}
.pf-emo img{width:46px;image-rendering:pixelated}.pf-emo small{font:600 10px var(--px)}.pf-emo.on{background:#123a5a;box-shadow:inset 0 0 0 3px var(--cy)}
.mrow-ic.pf-ic .astro{width:auto;height:100%;aspect-ratio:148/198;position:relative}   /* the menu icon rule (.mrow-ic img 40×40) must not squash the astronaut */
.mrow-ic.pf-ic .astro > img{width:100%;height:100%;object-fit:contain}
.mrow-ic.pf-ic .astro .phat2{height:auto}
.pf-astro.home{width:100%;margin-top:-40.5%}   /* the emote headroom (extra 30 of 129 units) sits above the circle: the body itself is centred */
@media (max-width:640px){.prof{grid-template-columns:1fr;padding:18px 14px}.pf-astro{width:150px}}


/* signal meter (tasks-voyager.js as_contact) */
.sigbar{height:16px;background:#0b1130;box-shadow:inset 0 0 0 2px #2d3d80;margin:6px 0 10px;padding:3px}.sigbar .sb{display:block;height:100%;width:4%;transition:width .12s,background .12s}

/* nickname colour swatches (profile) and the Alien icon before a teammate's name */
.sw-dot.nk{border-radius:50%}
.ic-inl.al{color:#ff4d5e;margin-right:3px}
/* grab bar (tasks-voyager.js dock_capture) */
.grabbar{position:relative;height:34px;margin:10px 0;background:#0b1130;box-shadow:inset 0 0 0 2px #2d3d80}
.grabbar .zone{position:absolute;left:44%;width:12%;top:3px;bottom:3px;background:rgba(94,224,138,.35);box-shadow:inset 0 0 0 2px #5ee08a}
.grabbar .sat{position:absolute;top:7px;width:20px;height:20px;margin-left:-10px;background:#e8ecf6;box-shadow:0 0 0 2px #1b2242,inset 0 -4px 0 #9aa3c4}
.cr{min-width:96px}
.world-name .priv{color:#ffd27a;white-space:nowrap}

/* ===== Alien dynamite (rules: ABILITY.dynamite) ===== */
.bomb-warn{position:absolute;left:50%;top:22%;transform:translateX(-50%);z-index:25;display:grid;justify-items:center;gap:2px;padding:10px 22px 12px;background:rgba(60,8,16,.88);box-shadow:inset 0 0 0 3px #ff4d5e,0 0 30px rgba(255,60,80,.5);pointer-events:none;animation:bombPulse .5s infinite alternate}
.bomb-warn b{font:700 18px var(--px);letter-spacing:.12em;color:#fff}
.bomb-warn span{font:700 46px var(--px);color:#ffd34d;line-height:1;text-shadow:0 3px 0 #000}
.bomb-warn small{font:500 12px system-ui;color:#ffd0d4}
@keyframes bombPulse{to{box-shadow:inset 0 0 0 3px #ffd34d,0 0 44px rgba(255,120,60,.7)}}
.abmenu .ab-bomb b{color:#ff8a94}

/* ===== dust storm (distraction 'spores'): the crew sees nothing for ~4 s, the Alien only a haze ===== */
.storm{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden;background:#8a7a5c;opacity:0;animation:stormIn 4.5s ease-in-out forwards}
.storm.thin{background:rgba(138,122,92,.35)}
.storm i{position:absolute;inset:-50%;background:repeating-radial-gradient(circle at 30% 40%,rgba(210,190,150,.55) 0 3px,transparent 4px 18px),repeating-linear-gradient(115deg,rgba(90,76,52,.5) 0 6px,transparent 6px 26px);animation:stormDrift 1.2s linear infinite}
.storm i:nth-child(2){animation-duration:.8s;opacity:.7;transform:scale(1.3)}
.storm i:nth-child(3){animation-duration:1.7s;opacity:.5;transform:rotate(12deg)}
.storm.thin i{opacity:.25}
@keyframes stormIn{0%{opacity:0}12%{opacity:.97}85%{opacity:.97}100%{opacity:0}}
@keyframes stormDrift{to{transform:translate(18%,6%)}}