/* ===== v6 HUD / UI: pixel-station panels (chamfered corners, cyan hairlines, pixel font) ===== */
:root{--px:'Pixelify Sans',ui-monospace,'Cascadia Mono',monospace;--hudA:#1f2850;--hudB:#111733;--edge:#2a3870;--cy:#4ff0ff;--cyL:#7ff6ff;--dim:#8b92b8;--txt:#e8eaf6}
/* chamfer helper */
.game .hcard,.game .tbar,.game .tlist,.game .gtimer,.game .tasktab,.game .ib,.game .keyhint,.sabmenu,.mm-in,.rbox,.cbox,.mbox,.mbody,.mfoot,.mbox .x,.mmx,.game .banner,.gb .ic,.gb.cd::before,.startbtn,#nav button,.btn,.tlist .cb,.game kbd,.keyhint kbd,.mroom,.tcnt,.sabmenu button,.vc,.chat,.msg,.cin input,.mdone .btn{
  --c:7px;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c))}
.tlist .cb,.game kbd,.keyhint kbd,.tcnt,.mroom{--c:2px}
.gb .ic,.gb.cd::before{--c:12px}.gb.sm .ic,.gb.sm.cd::before{--c:9px}
/* shared panel skin */
.game .hcard,.game .tbar,.game .tlist,.game .gtimer,.game .tasktab,.game .ib,.game .keyhint,.sabmenu,.mm-in,.rbox,.cbox,.mbox{
  border:0!important;border-radius:0!important;background:linear-gradient(180deg,var(--hudA),var(--hudB))!important;
  box-shadow:inset 0 0 0 2px var(--edge),inset 0 3px 0 2px rgba(79,240,255,.10)!important;color:var(--txt);font-family:var(--px)}
.game .g-tl,.game .g-tr,.game .g-bc,.game .g-br{filter:drop-shadow(0 4px 0 rgba(0,0,0,.45))}
.game{font-family:var(--px)}

/* ---- top-left: crew task bar + my tasks ---- */
.game .g-tl{width:min(300px,44%)}
.game .tbar{display:grid;grid-template-columns:auto 1fr auto;gap:9px;align-items:center;padding:8px 11px}
.game .tbar b{font:600 11px var(--px);letter-spacing:1.5px;color:var(--dim);-webkit-text-stroke:0;margin:0}
.game .tfill{height:14px;border:0;border-radius:0;background:#0b1024;box-shadow:inset 0 0 0 2px var(--edge)}
.game .tfill i{border-radius:0;background:linear-gradient(#a6fbff,#2bb7d6);box-shadow:none}
.game .tfill i::after{display:none}
.game .tfill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(4% - 2px),#0b1024 calc(4% - 2px) 4%);pointer-events:none}
.game .tbar.locked .tfill i{background:repeating-linear-gradient(45deg,#ff5d6e 0 6px,#6b1020 6px 12px)}
.tpct{font:700 13px var(--px);color:var(--cyL);min-width:38px;text-align:right}
.game .tasktab{margin-top:6px;padding:6px 10px 6px 8px;gap:7px;font:600 12px var(--px);color:var(--txt)}
.game .tasktab svg{width:18px;height:18px}
.game .tasktab span{-webkit-text-stroke:0;letter-spacing:1.5px}
.tcnt{background:var(--cy);color:#07202a!important;padding:1px 6px;font-weight:700}
.game .tasktab em{color:var(--dim)}
.game .tlist{margin-top:5px;padding:8px 11px;font:500 12px/1.3 var(--px);max-height:230px}
.game .tlist p{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;margin:5px 0;color:var(--txt)}
.game .tlist p::before{display:none}
.tlist .cb{width:11px;height:11px;background:#0b1024;box-shadow:inset 0 0 0 2px #f5c542}
.game .tlist p.d .cb{background:var(--cy);box-shadow:none}.game .tlist p.d span{color:var(--dim);text-decoration:line-through}
.game .tlist em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--rc,var(--dim))}
.game .tlist p.al{display:block;color:#ff8a96;font-weight:600}
.game .tlist p.sb{color:#ff8a96}.game .tlist p.sb .cb{background:#ff3b4e;box-shadow:none;animation:pulse .6s infinite}
.gain{position:absolute;left:calc(100% + 8px);top:6px;font:700 15px var(--px);color:var(--cyL);white-space:nowrap;text-shadow:0 0 10px rgba(79,240,255,.7);animation:gain 1.4s forwards}
@keyframes gain{0%{opacity:0;transform:translateY(8px)}20%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-16px)}}

/* ---- top-right: timer, map, settings ---- */
.game .g-tr{gap:6px;align-items:stretch}
.game .gtimer{display:flex;gap:9px;align-items:center;height:48px;padding:0 14px;font:700 22px var(--px);letter-spacing:2px;-webkit-text-stroke:0;color:var(--txt)}
.clk{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--cy);position:relative}.clk::after{content:"";position:absolute;left:6px;top:3px;width:2px;height:5px;background:var(--cy)}
#hTimer.low{color:#ff5d6e;animation:pulse .8s infinite}
.game .ib{width:48px;height:48px;padding:0;display:grid;place-items:center;position:relative}
.game .ib svg{width:30px;height:30px}.game .ib:hover{transform:translateY(-2px)}
.game .ib kbd{position:absolute;right:3px;bottom:3px;font-size:8px;padding:0 3px}

/* ---- keys ---- */
.game kbd,.keyhint kbd{display:inline-block;min-width:16px;text-align:center;font:700 10px/1.5 var(--px);color:#0b1024;background:#d6d9ea;padding:0 4px;box-shadow:inset 0 -2px 0 #8b92b8}
.gb .key{position:absolute;top:-5px;right:-5px;z-index:4;font-size:11px;padding:1px 6px;background:var(--btn);box-shadow:inset 0 -2px 0 rgba(0,0,0,.3)}
.keyhint{position:absolute;left:12px;bottom:12px;z-index:5;display:flex;gap:14px;padding:8px 12px;font:500 12px var(--px)!important;color:var(--dim)!important;animation:hintfade .6s 9s forwards}
.keyhint span{display:flex;gap:3px;align-items:center}
.game:hover .keyhint{animation:none}
.keyhint .alonly{display:none}#hud.alien .keyhint .alonly{display:flex}
@keyframes hintfade{to{opacity:0;transform:translateY(8px)}}
@media (pointer:coarse){.keyhint{display:none}}

/* ---- action buttons: large, minimal single-purpose controls ---- */
.gb{--btn:#4ff0ff;filter:none!important}
.gb.emerg,.gb.sab{--btn:#ff5d6e}.gb.repair{--btn:#f2922e}.gb.fake{--btn:#a98bff}.gb.dist{--btn:#f5c542}.gb.council{--btn:#6ea8ff}
.gb .ic{width:92px!important;height:92px!important;border:0!important;border-radius:0!important;transform:none!important;animation:none!important;filter:none!important;display:grid!important;place-items:center;
  background:#10162f!important;box-shadow:inset 0 0 0 2px var(--btn),inset 0 -6px 0 rgba(0,0,0,.38)!important;transition:transform .12s ease,background .12s ease}
.gb.main .ic{width:122px!important;height:122px!important}.gb.sm .ic{width:74px!important;height:74px!important}
.gb .ic svg{width:58%!important;height:58%!important;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}.gb .ic .action-icon{width:74%!important;height:74%!important;filter:drop-shadow(0 3px 0 rgba(0,0,0,.42))}
.gb b{margin-top:7px!important;font:700 12px var(--px)!important;letter-spacing:1.5px;color:var(--btn)!important;-webkit-text-stroke:0!important;text-shadow:0 2px 0 #000}
.gb:not(:disabled):hover .ic{transform:translateY(-3px)!important;background:color-mix(in srgb,var(--btn) 17%,#10162f)!important}
.gb:not(:disabled):active .ic{transform:translateY(1px)!important;box-shadow:inset 0 0 0 2px var(--btn),inset 0 -3px 0 rgba(0,0,0,.38)!important}
.gb.main:not(:disabled){filter:drop-shadow(0 0 16px color-mix(in srgb,var(--btn) 45%,transparent))!important}
.gb:disabled{opacity:.7!important}
.gb:disabled .ic{transform:none!important;background:#111733!important;box-shadow:inset 0 0 0 3px #2a3870,inset 0 -9px 0 rgba(0,0,0,.35)!important}
.gb:disabled .ic svg{opacity:.35}.gb:disabled b{color:#59628c!important}.gb:disabled .key{background:#59628c}
.gb.cd::before{top:0!important;left:50%!important;width:92px!important;height:92px!important;margin-left:-46px!important;border-radius:0!important;z-index:2;
  background:linear-gradient(to top,rgba(4,6,14,.85) calc(var(--p,0)*1%),rgba(4,6,14,.25) 0)!important}
.gb.main.cd::before{width:122px!important;height:122px!important;margin-left:-61px!important}.gb.sm.cd::before{width:74px!important;height:74px!important;margin-left:-37px!important}
.gb .cdn{top:46px!important;font:700 26px var(--px)!important;-webkit-text-stroke:0!important;color:#fff;text-shadow:0 2px 0 #000}
.gb.main .cdn{top:61px!important}.gb.sm .cdn{top:37px!important;font-size:20px!important}
.alcol{gap:10px!important}

/* ---- room toast, banners, menus ---- */
.game .roomtoast{font:700 24px var(--px)!important;letter-spacing:5px;-webkit-text-stroke:0!important;color:#fff!important;padding:7px 28px;text-shadow:0 0 14px var(--rc,#4ff0ff);
  background:linear-gradient(90deg,transparent,rgba(16,22,48,.88) 18%,rgba(16,22,48,.88) 82%,transparent);box-shadow:inset 0 2px 0 var(--rc,#4ff0ff),inset 0 -2px 0 var(--rc,#4ff0ff)}
.game .banner{border:0!important;border-radius:0!important;font:700 16px var(--px)!important;letter-spacing:2px;padding:14px 28px 10px!important;color:#ff9aa5!important;text-shadow:none!important;
  background:repeating-linear-gradient(-45deg,#ff5d6e 0 8px,#2a0f1a 8px 16px) top/100% 5px no-repeat,linear-gradient(#2a0f1a,#16070d)!important;box-shadow:inset 0 0 0 2px #ff5d6e!important}
.game .banner.warn{color:#ffd34d!important;background:repeating-linear-gradient(-45deg,#f5c542 0 8px,#2a2208 8px 16px) top/100% 5px no-repeat,linear-gradient(#2a2208,#161204)!important;box-shadow:inset 0 0 0 2px #f5c542!important}
.game .banner small{font:500 12px var(--px)!important;letter-spacing:.5px;color:var(--txt);margin-top:3px}
.sabmenu{padding:10px!important;gap:5px!important}.sabmenu h4{font:700 12px var(--px);letter-spacing:2px;color:#ff8a96}
.sabmenu button{border:0!important;border-radius:0!important;font:600 13px var(--px)!important;color:var(--txt)!important;background:#1d2547!important;box-shadow:inset 0 0 0 2px var(--edge)!important;padding:8px 12px!important}
.sabmenu button:hover{background:#2a1530!important;box-shadow:inset 0 0 0 2px #ff5d6e!important}
.mm-in{padding:12px 14px 14px!important}
.mm-title{display:flex;gap:8px;align-items:center;font:700 14px var(--px);letter-spacing:3px;color:var(--cyL);margin-bottom:8px}
.mmx{right:10px!important;top:8px!important;width:30px!important;height:30px!important;border:0!important;border-radius:0!important;background:#3a1220!important;color:#ff8a96!important;box-shadow:inset 0 0 0 2px #ff5d6e!important;font:700 14px var(--px)!important}
.mm-leg{font:500 12px var(--px)!important}
.game .loading{font-family:var(--px);letter-spacing:4px;color:var(--cyL)}

/* ---- overlays: hold / customize / settings / briefing ---- */
.rbox,.cbox{padding:18px 22px!important}
.rbox h3,.cbox h3{font:700 18px var(--px)!important;letter-spacing:3px;color:var(--cyL)!important;-webkit-text-stroke:0!important}
.rbox p,.cbox p,.cbox small{font-family:var(--px)}
.holdbtn{font-family:var(--px)!important;letter-spacing:2px}

/* ---- lobby ---- */
.game .hcard{padding:8px 14px!important}.game .hcard small{font:600 10px var(--px);letter-spacing:2px;color:var(--dim)}
.game .hcard b{font-family:var(--px);letter-spacing:1px}
.game .code{font:700 24px var(--px)!important;letter-spacing:5px;color:var(--cyL)!important;text-shadow:0 0 12px rgba(79,240,255,.5)!important}
.startbtn{--c:12px;border:0!important;border-radius:0!important;font:700 26px var(--px)!important;letter-spacing:7px;color:#06202a!important;-webkit-text-stroke:0!important;padding:10px 46px!important;
  background:linear-gradient(#7ff6ff,#1f9cc0)!important;box-shadow:inset 0 -8px 0 rgba(0,0,0,.25),inset 0 4px 0 rgba(255,255,255,.45)!important}
.game .g-bc{filter:drop-shadow(0 5px 0 #0b3a48) drop-shadow(0 0 18px rgba(79,240,255,.35))}
.startbtn:hover{transform:translateY(-2px)}.startbtn:active{transform:translateY(3px)}

/* ---- task window ---- */
.mbox{padding:0!important;width:min(660px,100%)!important}
.mbox::before,.mbox::after{display:none!important}
.mhead{padding:16px 56px 12px 20px;background:linear-gradient(#27306a,#1a2150);box-shadow:inset 0 -2px 0 var(--edge)}
.mroom{display:inline-block;font:700 10px var(--px)!important;letter-spacing:2px;border:0!important;padding:3px 8px!important;background:rgba(0,0,0,.35)!important}
.mtitle{font:700 24px var(--px)!important;-webkit-text-stroke:0!important;letter-spacing:1px;margin:8px 0 3px!important;color:#fff!important}
.mgoal{font:15px/1.5 system-ui,sans-serif!important;color:#c9cde6!important;margin:0!important}
.mbody{margin:14px 18px!important;border:0!important;border-radius:0!important;background:#0b1024!important;box-shadow:inset 0 0 0 2px var(--edge)!important}
.mfoot{margin:0 18px 18px!important;padding:10px 12px!important;border:0!important;border-radius:0!important;background:rgba(79,240,255,.06)!important;box-shadow:inset 3px 0 0 var(--cy);font-size:13px}
.mbox .x{--c:5px;border:0!important;border-radius:0!important;width:34px!important;height:34px!important;right:14px!important;top:14px!important;background:#3a1220!important;color:#ff8a96!important;box-shadow:inset 0 0 0 2px #ff5d6e!important;font:700 14px var(--px)!important}
.mbox .x svg,.mmx svg,.fact-icon svg,.btn svg,.sabmenu svg,.ghost-help svg{vertical-align:middle;display:inline-block}.fact-icon{display:grid;place-items:center;width:22px;height:22px;flex:0 0 22px}.mfoot{display:flex;gap:8px;align-items:flex-start}.mfoot p{margin:0}
.action-icon{display:block;object-fit:contain;image-rendering:pixelated}.gb .ic .action-icon{width:60%!important;height:60%!important;filter:drop-shadow(0 3px 0 rgba(0,0,0,.42))}.btn .action-icon,.sabmenu .action-icon{display:inline-block;width:1.25em;height:1.25em;margin-right:4px;vertical-align:-.28em}.councilfx .action-icon{width:120px;height:120px;margin:auto}
.gb.council .action-icon{width:94%!important;height:94%!important}
.data-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.data-card{display:grid;grid-template-columns:54px 1fr;gap:6px;align-items:center;padding:7px;background:#1d2547;box-shadow:inset 0 0 0 2px var(--edge);font:600 12px var(--px)}.data-card img{width:54px;height:42px;object-fit:contain;image-rendering:pixelated}.data-card small{display:block;color:var(--dim);margin-top:3px}.data-card select{grid-column:1/-1;width:100%}@media(max-width:560px){.data-cards{grid-template-columns:1fr}.data-card{grid-template-columns:50px 1fr}.data-card select{grid-column:auto}}
.role-card{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:10px;width:min(620px,calc(100% - 32px));max-width:none;padding:14px 18px;background:linear-gradient(90deg,rgba(16,23,51,.9),rgba(31,40,80,.62),rgba(16,23,51,.9));box-shadow:inset 0 1px 0 rgba(127,246,255,.35),0 0 48px rgba(79,240,255,.15);overflow:hidden}.role-card.alien-card{background:linear-gradient(90deg,rgba(34,15,55,.92),rgba(74,38,99,.68),rgba(34,15,55,.92));box-shadow:inset 0 1px 0 rgba(212,255,59,.35),0 0 48px rgba(169,108,255,.2)}.role-card .role-h{font-size:clamp(32px,5vw,56px);letter-spacing:.045em;overflow-wrap:anywhere}.role-card .role-d{max-width:390px}.role-player{width:136px;height:182px;margin:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.45))}.role-player .pchar{width:136px;height:182px}.alien-player{filter:drop-shadow(0 0 20px rgba(212,255,59,.5))}.role-card .crew-row{grid-column:1/-1;margin-top:0}.ghost-help{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(15,37,58,.88);border:2px solid var(--cy);font:700 12px var(--px);color:var(--cyL);max-width:240px}.ghost-help small{font:500 10px var(--px);color:var(--txt)}
/* A stable first frame makes previews visible before the animated image sequence has painted. */
.role-player .pchar img:first-child,.cprev .pchar img:first-child,.skin .pchar img:first-child,.bigwalk .pchar img:first-child,.frames .pchar img:first-child{opacity:1!important}
.cprev .pchar{width:132px;height:176px;margin:auto}.skin .pchar{width:76px;height:102px;margin:auto}.bigwalk .pchar{width:160px;height:214px;margin:auto}.frames .pchar{width:100%;height:auto;min-height:116px}
@media(max-width:560px){.role-card{grid-template-columns:1fr;width:min(360px,calc(100% - 20px));padding:8px}.role-player{height:130px;width:98px}.role-player .pchar{width:98px;height:130px}.role-card .role-d{font-size:11px}}
.mdone h2{font-family:var(--px)!important;letter-spacing:4px}

/* ---- page chrome ---- */
.brand b,h2,h3,#nav button,.btn,.seg-ctl button,.skin b,.tc h4{font-family:var(--px)}
h2{letter-spacing:1px}
#nav button{--c:6px;border:0!important;border-radius:0!important;box-shadow:inset 0 0 0 2px #3b4163!important}
#nav button.on{box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.45)!important}
.btn{--c:6px;border:0!important;border-radius:0!important;box-shadow:inset 0 0 0 2px #3b4163,inset 0 -3px 0 rgba(0,0,0,.3)!important}
.btn.primary,.btn.sel{box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.45)!important}
.seg-ctl{border-radius:0!important}
.vc{--c:8px;border:0!important;border-radius:0!important}
/* "Less motion" setting (Settings → Animations); a looping sprite keeps its first frame */
html.calm *,html.calm *::before,html.calm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition:none!important}
html.calm .pchar.anim img.fr{animation:none!important;opacity:0}html.calm .pchar.anim img.fr:first-child{opacity:1}
@media(max-width:760px){.gb .ic{width:64px!important;height:64px!important}.gb.main .ic{width:80px!important;height:80px!important}.game .gtimer{font-size:16px;height:40px}.game .ib{width:40px;height:40px}}
.kit .ib{--c:7px;clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,0 calc(100% - var(--c)),0 var(--c));border:0!important;border-radius:0!important;width:48px;height:48px;display:grid;place-items:center;background:linear-gradient(180deg,var(--hudA),var(--hudB))!important;box-shadow:inset 0 0 0 2px var(--edge)!important}
.kit .ib svg{width:30px;height:30px}
/* readability: long explanatory text stays in a regular font */
.mfoot p,.mbody p,.mbody .hint,.mbody td,.mbody th,.mbody label.chip,.cbox p,.brief p,.tele li,.rbox p{font-family:system-ui,-apple-system,'Segoe UI',sans-serif!important}