/* screens.css — the codex, the fixer, popups. Tokens from style.css only. */

/* popups */
.modal-back{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,4,8,.78);animation:mfade .15s ease-out}
.modal{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:20px 22px;background:var(--panel);border:1px solid var(--yel);box-shadow:0 20px 60px rgba(0,0,0,.7);animation:mrise .18s ease-out}
.modal.wide{width:min(900px,100%);border-color:var(--cyan)}
.modal h3{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-family:var(--disp);font-size:15px;letter-spacing:.14em;color:var(--yel)}
.modal.wide h3{color:var(--cyan)}
.modal p{margin:0 0 12px;color:var(--ink)}
.warns{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:8px}
.warns li{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;background:var(--bg2);border:1px solid var(--line);font-size:13px;line-height:1.5}
.warns li .ic{color:var(--yel);margin-top:1px} .warns b{color:var(--yel)}
@keyframes mfade{from{opacity:0}} @keyframes mrise{from{opacity:0;transform:translateY(8px)}}

/* the fixer in the dive */
.btn .ic{width:15px;height:15px;margin-right:6px;vertical-align:-3px}
.btn.fx{border-color:var(--yel);color:var(--yel)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.fxnote{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:9px 11px;border:1px solid var(--yel);background:rgba(255,210,63,.06);font-size:12px;color:var(--ink)} .fxnote .ic{color:var(--yel)}

/* codex */
.ctabs{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);background:var(--bg2)}
.ctabs button{height:34px;padding:0 14px;background:transparent;border:1px solid transparent;color:var(--ink2);font-size:11px;letter-spacing:.14em}
.ctabs button:hover{color:var(--ink);border-color:var(--line)} .ctabs button.on{color:var(--cyan);border-color:var(--cyan);background:var(--panel2)}
.codex{display:grid;grid-template-columns:340px 1fr;gap:16px;margin-top:14px}
@media (max-width:860px){.codex{grid-template-columns:1fr}}
.clist{display:flex;flex-direction:column;gap:10px;min-width:0}
.cfilters{display:flex;flex-wrap:wrap;gap:6px}
.chipb{height:32px;padding:0 10px;background:transparent;border:1px solid var(--line);color:var(--ink2);font-size:11px;letter-spacing:.1em}
.chipb b{color:var(--ink);font-weight:400;margin-left:4px} .chipb:hover{border-color:var(--cyan);color:var(--ink)} .chipb.on{border-color:var(--cyan);color:var(--cyan);background:var(--panel2)}
.csearch{width:100%;height:38px;padding:0 12px;background:var(--bg);border:1px solid var(--line);color:var(--ink);font:inherit}
.csearch:focus{outline:none;border-color:var(--cyan)}
.cgroup{border:1px solid var(--line);background:var(--bg2)}
.cgh{padding:9px 12px;font-size:11px;letter-spacing:.18em;color:var(--ink2);border-bottom:1px solid var(--line)}
.crow{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:transparent;border:0;border-left:3px solid transparent;border-bottom:1px solid #1a2233;color:var(--ink);text-align:left}
.crow:last-child{border-bottom:0} .crow:hover{background:var(--panel2)} .crow.on{background:var(--panel2);border-left-color:var(--cyan)}
.crow .ct{flex:1;font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .cls{font-size:10px;padding:1px 6px}
.crow.greenlit>.ic{color:var(--grn)} .crow.paid>.ic{color:var(--yel)} .crow.sealed{color:var(--ink2)} .crow.sealed>.ic{color:var(--ink3)}
.crite{font-size:10px;letter-spacing:.12em;color:var(--mag)}
.ctag{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;font-size:10px;letter-spacing:.16em;border:1px solid currentColor}
.ctag.greenlit{color:var(--grn)} .ctag.paid{color:var(--yel)} .ctag.sealed{color:var(--ink2)}
.centry{min-width:0;border:1px solid var(--line);background:var(--bg2);padding:16px 18px}
.chead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.chead h3{margin:8px 0 4px;font-family:var(--disp);font-size:18px;letter-spacing:.08em;color:var(--ink)}
.cstate{margin:12px 0 0;padding:8px 11px;font-size:12px;border:1px solid var(--line)}
.cstate.greenlit{border-color:rgba(77,255,136,.35);color:var(--grn)} .cstate.paid{border-color:rgba(255,210,63,.4);color:var(--yel)} .cstate.sealed{color:var(--ink2)}
.ctaught{margin-top:10px;font-size:12px;color:var(--ink2)} .ctaught a{cursor:pointer}
.cfloors{display:flex;flex-direction:column;margin-top:12px}
.cfloor{padding:14px 0;border-top:1px solid #1a2233} .cfloor.now{background:rgba(63,246,255,.05);padding:14px 12px;border:1px solid var(--cyan)}
.cfh{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ink2)} .cfh .fl{font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--cyan)}
.cfh .here{margin-left:auto;font-size:10px;letter-spacing:.16em;color:var(--cyan)}
.cfloor.sealed .cfh .fl{color:var(--ink3)} .cfloor.sealed .ic{margin-left:auto;color:var(--ink3)}
.cask,.cq{margin-top:8px;font-size:13px;line-height:1.6}
.cmove{display:flex;gap:12px;align-items:baseline;margin-top:10px;padding:9px 12px;border:1px solid var(--line);background:var(--bg)}
.cmove span{font-size:10px;letter-spacing:.16em;color:var(--ink2);white-space:nowrap} .cmove code{color:var(--grn);font-size:13px;white-space:pre-wrap}
.cwhy{margin-top:8px;font-size:12px;line-height:1.6;color:var(--ink2)}
.cwords{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-top:12px}
.cword{padding:10px 12px;border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.5}
.cword b{color:var(--term);font-weight:700} .cword span{color:var(--ink2)}
.clocked{margin-top:14px;display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ink2)} .clocked div{display:flex;gap:8px;align-items:center}
.cpeople{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px;margin-top:12px}
.cperson{padding:14px;border:1px solid var(--line);background:var(--bg2)}
.cph{display:flex;gap:12px;align-items:center;margin-bottom:6px} .cph b{color:var(--ink)} .cph .muted{font-size:11px}
.ctalk{padding:10px 0;border-top:1px solid #1a2233;font-size:13px} .ctalk a{cursor:pointer}
@media (prefers-reduced-motion:reduce){.modal-back,.modal{animation:none}}

/* the board */
.board{display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1.05fr);gap:16px;margin-top:10px}
@media (max-width:1100px){.board{grid-template-columns:200px minmax(0,1fr)} .bdetail{grid-column:1 / -1}}
@media (max-width:760px){.board{grid-template-columns:1fr} .board .brail{flex-direction:row;flex-wrap:wrap;gap:8px} .brail .bgrp{flex:1 1 100%} .brail .bgrp:first-child{display:flex;flex-wrap:wrap;gap:6px} .brail .bgrp:first-child .blbl{flex-basis:100%} .brail .bgrp:first-child .brow{flex:0 0 auto;border:1px solid var(--line)} .brail .bgrp:last-child{display:none}}
.brail{display:flex;flex-direction:column;gap:18px}
.blbl{font-size:10px;letter-spacing:.2em;color:var(--ink2);padding:0 0 6px}
.brow{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:8px 10px;background:transparent;border:0;border-left:2px solid transparent;color:var(--ink);font-size:12px;text-align:left}
.brow b{font-weight:400;color:var(--ink2)} .brow:hover{background:var(--panel2)} .brow.on{background:var(--panel2);border-left-color:var(--cyan);color:var(--cyan)}
.bcls{display:flex;gap:6px} .bcls button{width:40px;height:34px;background:transparent;font-family:var(--disp);font-size:12px;opacity:.75} .bcls button:hover,.bcls button.on{opacity:1;background:var(--panel2);box-shadow:0 0 12px rgba(63,246,255,.15)}
.blist{display:flex;flex-direction:column;gap:10px;min-width:0}
.bgroup{border:1px solid var(--line);background:var(--bg2)}
.bgh{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:var(--panel);border:0;color:var(--ink);text-align:left}
.bgh:hover{background:var(--panel2)} .bgh .bn{font-family:var(--disp);font-size:12px;letter-spacing:.12em} .bgh .grow1{flex:1}
.bgh .bo{font-size:10px;letter-spacing:.14em;color:var(--cyan)} .bgh .bd2{font-size:10px;letter-spacing:.14em;color:var(--ink2)}
.gig{display:flex;align-items:center;gap:12px;width:100%;padding:12px;background:transparent;border:0;border-top:1px solid #1a2233;border-left:3px solid transparent;color:var(--ink);text-align:left;transition:background .12s}
.gig:hover{background:var(--panel2)} .gig.on{background:var(--panel2);border-left-color:var(--cyan)}
.gig .cls{font-size:11px;padding:2px 7px;flex-shrink:0}
.gmid{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0} .gt{font-size:13px;font-weight:700;overflow-wrap:anywhere;line-height:1.35} .gs{font-size:11px;color:var(--ink2)} .gs .rite{font-style:normal;color:var(--mag);letter-spacing:.1em}
.gright{display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:11px;white-space:nowrap}
.gpay{color:var(--yel)} .gcost{color:var(--ink2)} .gcost .h{font-style:normal;color:var(--org)} .gcost .c{font-style:normal;color:var(--mag)}
.gdone{display:flex;gap:5px;align-items:center;color:var(--grn)} .gwait{display:flex;gap:5px;align-items:center;color:var(--ink2);letter-spacing:.08em}
.gig.talk .gt,.gig.class .gt{color:var(--ink2);font-weight:400} .gig.sealed{color:var(--ink3)} .gig.sealed .gt{letter-spacing:.2em;font-weight:400}
.bdetail{border:1px solid var(--line);background:var(--bg2);padding:16px 18px;min-width:0}
.bdh h3{margin:6px 0 8px;font-family:var(--disp);font-size:18px;letter-spacing:.08em;color:var(--ink)} .bdh .muted{font-size:11px;letter-spacing:.12em}
.riteb{display:inline-flex;gap:6px;align-items:center;font-size:10px;letter-spacing:.16em;color:var(--mag);margin-bottom:6px}
.bsec{margin-top:14px} .breqs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:12px}
.breqs li{display:flex;gap:8px;align-items:center} .breqs li.ok .ic{color:var(--grn)} .breqs li.no{color:var(--ink2)} .breqs li.no .ic{color:var(--yel)} .breqs a{cursor:pointer}
.bbar{display:grid;grid-template-columns:70px 1fr 90px;gap:10px;align-items:center;font-size:11px;margin-bottom:8px}
.bbar .bl{color:var(--ink2);letter-spacing:.12em} .bbar .bv{text-align:right;color:var(--ink2)} .bbar .bv b{font-weight:400}
.bbar .bt{position:relative;height:10px;background:var(--line)} .bbar .bt i{position:absolute;left:0;top:0;bottom:0}
.bbar.h .bt i{background:var(--org)} .bbar.h .bv b{color:var(--org)} .bbar.c .bt i{background:var(--mag)} .bbar.c .bv b{color:var(--mag)}
.bbar .bt i.ghost{opacity:.3;animation:ghostp 1.4s ease-in-out infinite} @keyframes ghostp{50%{opacity:.7}}
.bwarn{display:flex;gap:10px;align-items:flex-start;margin-top:8px;padding:9px 11px;border:1px solid var(--yel);background:rgba(255,210,63,.06);font-size:12px;line-height:1.5} .bwarn .ic{color:var(--yel)}
.bpay{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--ink2)} .bpay b{font-weight:400;color:var(--yel)}
.bgo{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap} .btn.big{flex:1;height:48px;font-family:var(--disp);letter-spacing:.2em}
@media (prefers-reduced-motion:reduce){.bbar .bt i.ghost{animation:none}}

/* the map */
.alert{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:10px 14px;border:1px solid var(--line);background:var(--bg2);font-size:13px}
.alert span{flex:1} .alert.m{border-color:var(--mag)} .alert.m .ic{color:var(--mag);animation:hpulse 1.2s infinite} .alert.y{border-color:var(--yel)} .alert.y .ic{color:var(--yel)}
.ctabs button[disabled]{color:var(--ink3);cursor:default;display:inline-flex;align-items:center;gap:6px}
.mapwrap{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;margin-top:14px}
@media (max-width:1100px){.mapwrap{grid-template-columns:1fr}}
.map{position:relative;height:auto;min-height:540px;border:1px solid var(--line);overflow:hidden;background-color:var(--bg2);background-image:linear-gradient(rgba(35,48,73,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(35,48,73,.35) 1px,transparent 1px);background-size:40px 40px}
.mapin{position:absolute;left:0;right:0;top:0;bottom:40px} .map svg{position:absolute;inset:0;width:100%;height:100%}
.map polyline{fill:none;stroke:var(--cyan);stroke-width:2;stroke-dasharray:6 6;opacity:.55;animation:mdash 1.4s linear infinite} @keyframes mdash{to{stroke-dashoffset:-24}}
.stn{position:absolute;transform:translate(-50%,-11px);display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:0;color:var(--ink);padding:0}
.stn .dot{position:relative;width:22px;height:22px;border-radius:50%;background:var(--bg);border:3px solid var(--ink3);transition:transform .15s}
.stn.lit .dot{border-color:var(--cyan)} .stn.cleared .dot{background:var(--grn);border-color:var(--grn)}
.stn.here .dot{background:var(--mag);border-color:var(--mag);box-shadow:0 0 18px rgba(255,63,164,.7)}
.stn .ring{position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--mag);animation:mring 1.8s ease-out infinite} @keyframes mring{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}
.stn .card{display:flex;flex-direction:column;gap:5px;min-width:150px;padding:9px 11px;background:var(--panel);border:1px solid var(--line);text-align:left;transition:border-color .15s,transform .15s,box-shadow .15s}
.stn:hover .card{border-color:var(--cyan);transform:translateY(-2px);box-shadow:0 0 18px rgba(63,246,255,.15)} .stn:hover .dot{transform:scale(1.15)}
.stn.on .card{border-color:var(--mag);box-shadow:0 0 20px rgba(255,63,164,.2)}
.stn .k{font-size:10px;letter-spacing:.16em;color:var(--ink2)} .stn.cleared .k{color:var(--grn)} .stn.lit .k{color:var(--cyan)} .stn.on .k{color:var(--mag)}
.stn .n{font-family:var(--disp);font-size:13px;letter-spacing:.1em;white-space:normal;max-width:150px} .stn.new .n{color:var(--ink2)}
.nights{display:flex;flex-wrap:wrap;gap:3px;max-width:140px} .nights i{width:8px;height:8px;border:1px solid var(--ink3)} .nights i.r{background:var(--grn);border-color:var(--grn)}
.mlegend{position:absolute;left:0;right:0;bottom:0;height:40px;display:flex;align-items:center;gap:18px;padding:0 14px;border-top:1px solid var(--line);background:rgba(7,8,13,.85);font-size:10px;letter-spacing:.12em;color:var(--ink2)}
.mlegend span{display:flex;align-items:center;gap:7px} .mlegend i{width:9px;height:9px;border:1px solid var(--ink3)} .mlegend i.r{background:var(--grn);border-color:var(--grn)} .mlegend i.h{border-radius:50%;background:var(--mag);border-color:var(--mag)} .mlegend .grow1{flex:1}
.mpanel{border:1px solid var(--line);background:var(--bg2);display:flex;flex-direction:column;gap:10px;padding:16px}
.mph{display:flex;gap:14px;align-items:center} .mph .k{font-size:10px;letter-spacing:.2em;color:var(--mag)} .mph .n{font-family:var(--disp);font-size:18px;letter-spacing:.1em;margin:3px 0} .mph .muted{font-size:12px}
.mpw{font-size:12px;line-height:1.6;color:var(--ink2);padding-bottom:6px;border-bottom:1px solid var(--line)} .mpw b{color:var(--ink)}
.mnights,.mgigs{display:flex;flex-direction:column}
.mnight,.mgig{display:flex;align-items:center;gap:10px;padding:8px 6px;background:transparent;border:0;border-bottom:1px solid #1a2233;color:var(--ink);text-align:left;font-size:13px}
.mnight:hover,.mgig:hover{background:var(--panel2)} .mnight .d{font-family:var(--disp);font-size:11px;width:24px;color:var(--cyan)} .mnight .t,.mgig .t{flex:1}
.mnight.r{color:var(--ink2)} .mnight.r .d,.mnight.r .ic{color:var(--grn)} .mnight .new{font-size:10px;letter-spacing:.14em;color:var(--cyan)}
.mgig .cls{font-size:10px;padding:1px 6px} .mgig .s{font-size:10px;letter-spacing:.12em;color:var(--ink2)} .mgig .s.c{color:var(--cyan)} .mgig .s.g{color:var(--grn)}
.mgo{display:flex;gap:10px;margin-top:auto;padding-top:8px}
@media (max-width:760px){.map{height:auto;padding:12px 12px 52px} .mapin{position:static;display:flex;flex-direction:column;gap:8px} .map svg{display:none} .stn{position:static;transform:none;flex-direction:row;align-items:center} .stn .card{flex:1}}
@media (prefers-reduced-motion:reduce){.map polyline,.stn .ring{animation:none}}
.mgig.sealed{color:var(--ink3)} .mgig.sealed .t{letter-spacing:.2em}

/* marrow's stall */
.marrow{display:flex;gap:16px;align-items:center;margin-bottom:14px} .marrow h2{margin:0 0 8px}
.bubble{position:relative;display:inline-block;max-width:720px;padding:10px 14px;background:var(--panel2);border:1px solid var(--org);font-size:14px;line-height:1.55}
.stall2{display:grid;grid-template-columns:220px minmax(0,1fr) 260px;gap:16px}
@media (max-width:1100px){.stall2{grid-template-columns:200px minmax(0,1fr)} .pockets{grid-column:1 / -1}}
@media (max-width:760px){.stall2{grid-template-columns:1fr} .shelves{display:flex;flex-wrap:wrap;gap:6px} .shelves .blbl{flex-basis:100%} .shelves .brow{flex:0 0 auto;border:1px solid var(--line)}}
.shelves .brow{justify-content:flex-start} .shelves .brow span{flex:1} .shelves .brow .need{color:var(--mag);font-size:10px;letter-spacing:.12em}
.items{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;align-content:start}
.icard{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--bg2);border:1px solid var(--line);transition:transform .16s,border-color .16s,box-shadow .16s}
.icard:hover{transform:translateY(-3px);border-color:var(--org);box-shadow:0 10px 26px rgba(0,0,0,.45)} .icard.service:hover{border-color:var(--mag)} .icard.gift:hover,.icard.favor:hover,.icard.bd:hover,.icard.skin:hover{border-color:var(--cyan)}
.icard.cant{opacity:.7}
.ih{display:flex;justify-content:space-between;gap:8px;align-items:baseline} .in{font-size:14px;font-weight:700} .iown{font-size:10px;letter-spacing:.12em;color:var(--grn);white-space:nowrap}
.ib{font-size:12px;line-height:1.55;color:var(--ink2);flex:1}
.ieff{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:11px;color:var(--ink2)}
.ieff .bt{position:relative;height:6px;background:var(--line)} .ieff .bt i{position:absolute;top:0;bottom:0;left:0}
.ieff.h span:first-child{color:var(--org)} .ieff.h .bt i{background:var(--org)} .ieff.c span:first-child{color:var(--mag)} .ieff.c .bt i{background:var(--mag)}
.ieff .bt i.proj{opacity:.35;transition:opacity .16s} .icard:hover .ieff .bt i.proj{opacity:.85}
.ibtn{display:flex;gap:8px} .btn.buy{flex:1;border-color:var(--yel);color:var(--yel);background:transparent} .btn.buy:hover:not([disabled]){background:var(--yel);color:var(--bg)} .btn.eat{border-color:var(--org);color:var(--org)}
.pockets{display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid var(--line);background:var(--bg2)}
.pockets .meter .segs i{width:12px}
.plist{display:flex;flex-direction:column;gap:6px;font-size:12px;border-top:1px solid var(--line);padding-top:10px} .plist div{display:flex;justify-content:space-between} .plist b{font-weight:400;color:var(--ink2)}

/* crew */
.callbar{display:flex;align-items:center;gap:16px;margin:12px 0 16px;padding:14px 18px;border:1px solid var(--mag);background:rgba(255,63,164,.07);animation:hring 1.2s ease-out infinite}
.callbar>.ic{color:var(--mag);animation:cshake .9s ease-in-out infinite} @keyframes cshake{20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
.callbar .cb{flex:1;font-size:14px} .callbar .cb .k{font-size:11px;letter-spacing:.2em;color:var(--mag);margin-bottom:4px}
.callbar .cs{display:flex;flex-direction:column;align-items:center} .callbar .cs b{font-family:var(--disp);font-size:22px;color:var(--mag)} .callbar .cs span{font-size:10px;color:var(--ink2)}
.callbar .btn.big{flex:0 0 auto;padding:0 24px}
.crewquiet{margin:10px 0 14px}
.drillbox{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:12px 0 16px;padding:14px 18px;border:1px solid var(--line);background:rgba(63,246,255,.03)}
.drillbox .dbt{flex:1 1 300px} .drillbox .blbl{display:flex;align-items:center;gap:8px;color:var(--cyan)} .drillbox .dbt .muted{font-size:12px;margin-top:6px;line-height:1.5}
.drillbox .dbgo{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .drillbox .dbgo .btn.ghost{min-width:44px}
.drillbox .dbn{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3);margin-left:4px}
.drillbox .dbn input{width:64px;padding:7px 8px;background:transparent;border:1px solid var(--line);color:var(--ink);font-family:var(--mono);font-size:13px}
.drillbox .dbn input:focus-visible{outline:none;border-color:var(--cyan)}
.dm.drill{border-color:var(--cyan);box-shadow:0 0 40px rgba(63,246,255,.22)} .dm.drill .from .n{color:var(--cyan)}
.dm .drico{width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--line);color:var(--cyan)}
.dm .drsum{margin-top:10px;font-family:var(--disp);letter-spacing:.14em;color:var(--cyan)}
.crew2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px} @media (max-width:960px){.crew2{grid-template-columns:1fr}}
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;align-content:start}
.rcard{display:flex;gap:14px;padding:14px;background:var(--bg2);border:1px solid var(--line);transition:transform .16s,box-shadow .16s}
.rcard:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.45)} .rcard.d1{border-color:rgba(255,210,63,.45)} .rcard.d2{border-color:var(--mag)} .rcard.calling{box-shadow:0 0 0 1px var(--mag),0 0 22px rgba(255,63,164,.25)}
.rcard.flat{border-style:dashed;opacity:.75} .rcard.flat:hover{transform:none}
.rb{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px} .rn{font-size:15px;font-weight:700} .rn .muted{font-weight:400;font-size:12px} .ron{margin-left:8px;font-size:10px;letter-spacing:.14em;color:var(--mag);animation:hpulse 1.2s infinite}
.ra{font-size:12px;color:var(--ink2);letter-spacing:.06em;align-self:flex-start}
.rstats{display:flex;flex-wrap:wrap;gap:16px;font-size:11px} .rstats>div{display:flex;flex-direction:column;gap:5px} .rl{font-size:10px;letter-spacing:.14em;color:var(--ink2)}
.pips{display:flex;gap:3px} .pips i{width:20px;height:6px;background:var(--line)} .pips i.on{background:var(--cyan)}
.dang{display:flex;gap:4px;align-items:center} .dang i{width:10px;height:10px;border-radius:50%;border:1px solid var(--ink3)} .dang em{font-style:normal;font-size:10px;letter-spacing:.1em;margin-left:4px;color:var(--ink2)}
.rcard.d1 .dang i.on{background:var(--yel);border-color:var(--yel)} .rcard.d1 .dang em{color:var(--yel)} .rcard.d2 .dang i.on{background:var(--mag);border-color:var(--mag)} .rcard.d2 .dang em{color:var(--mag)}
.rk{font-size:12px;font-style:italic;color:var(--ink2)}
.ract{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px} .ract .btn{display:inline-flex;align-items:center;gap:6px} .ract .btn .ic{margin:0} .btn.fav{border-color:var(--mag);color:var(--mag)}
.calls{border:1px solid var(--line);background:var(--bg2);padding:12px 14px;align-self:start}
.lg{display:flex;gap:10px;padding:10px 0;border-top:1px solid #1a2233;font-size:12px;line-height:1.5} .lg:first-of-type{border-top:0} .lg>.ic{margin-top:2px;color:var(--grn)}
.lg .lq{color:var(--ink)} .lg .lt{color:var(--ink2);font-style:italic} .lg.letter{flex-direction:column;gap:4px;border-left:2px solid var(--cyan);padding-left:10px}
@media (prefers-reduced-motion:reduce){.callbar,.callbar>.ic,.ron{animation:none}}

/* choice stances */
.tone{font-size:10px;letter-spacing:.14em;margin-right:6px;color:var(--cyan)} .tone.press{color:var(--yel)} .tone.quiet{color:var(--ink2)} .tone.joke{color:var(--grn)} .tone.care{color:var(--mag)}

/* the door */
.intro p.lede{font-size:15px;line-height:1.7;color:var(--ink)}
.doorwhat{list-style:none;padding:0;margin:14px auto;max-width:640px;display:flex;flex-direction:column;gap:6px;text-align:left;font-size:13px;color:var(--ink2)} .doorwhat b{display:inline-block;width:110px;font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:var(--cyan)}

/* the end: license, companion */
.done h2{font-size:26px}
.lcard{max-width:860px;margin:14px auto} .lcard svg{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 40px rgba(0,0,0,.6))}
.lact{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0} .done .muted{text-align:center}
.lissue{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:560px;margin:14px auto}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13px;cursor:pointer} .chk input{margin-top:3px;accent-color:#ff3fa4}
.companion{margin-top:28px;padding:22px;border:1px solid var(--line);background:var(--bg2)}
.chead2{display:flex;justify-content:space-between;align-items:center} .chead2 h3{margin:0;font-family:var(--disp);letter-spacing:.14em;color:var(--cyan)}
.companion .muted{text-align:left}
.cact h4{margin:18px 0 8px;font-family:var(--disp);font-size:12px;letter-spacing:.16em;color:var(--ink)} .cact h4 span{color:var(--mag);margin-left:8px}
.cact ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:4px 18px}
.cact li{display:grid;grid-template-columns:18px 26px 1fr auto;gap:10px;align-items:center;padding:5px 0;font-size:13px;border-bottom:1px solid #1a2233;color:var(--ink2)}
.cact li.ok{color:var(--ink)} .cact .box{width:16px;height:16px;border:1px solid var(--ink3);display:flex;align-items:center;justify-content:center}
.cact li.ok .box{border-color:var(--grn);color:var(--grn)} .cact .nn{font-family:var(--disp);font-size:11px;color:var(--cyan)} .cact .dist{font-size:10px;letter-spacing:.1em;color:var(--ink3)}
.note{display:flex;gap:18px;margin-top:26px;padding:20px;background:#f6eae7;color:#221a16;border-radius:14px}
.note img{border-radius:10px;object-fit:cover;object-position:top;flex-shrink:0} .note p{margin:0 0 10px;font-size:14px;line-height:1.7}
.note .sig{display:flex;align-items:center;gap:10px;font-weight:700;margin-top:6px} .note .muted{color:#5a473c !important;text-align:left;font-size:12px}
@media (max-width:760px){.note{flex-direction:column}}
@media print{
  body.printing .hud2,body.printing .lcard,body.printing .lact,body.printing .lissue,body.printing .done>h2,body.printing .done>.alert,body.printing .done>.muted,body.printing #cprint,body.printing .toast,body::before,body::after{display:none !important}
  body.printing{background:#fff !important;color:#000} body.printing .panel,body.printing .companion{border:0;background:#fff;box-shadow:none;padding:0}
  body.printing .cact li{color:#000;border-color:#ddd} body.printing .cact .box{border-color:#000} body.printing .cact li.ok .box{color:#000} body.printing .chead2 h3,body.printing .cact .nn{color:#000}
}


/* the door: story left, sign-in card right, live numbers, footer */
.intro.door2{max-width:1100px;margin:0 auto;padding:clamp(28px,6vh,64px) 16px 28px;text-align:left}
.dhero{text-align:center;margin-bottom:clamp(28px,6vh,56px)} .door2 .dhero h1{font-size:clamp(17px,4.4vw,58px);white-space:nowrap}
.dgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,48px);align-items:center}
.door2 .lede{margin:0 0 22px;max-width:none;font-size:15px;line-height:1.8;color:var(--ink)}
.doorwhat{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.doorwhat li{display:grid;grid-template-columns:22px 110px 1fr;gap:12px;align-items:start;font-size:13px;line-height:20px;color:var(--ink2)}
.doorwhat li .ic{color:var(--cyan);margin-top:2px} .doorwhat b{font-family:var(--disp);font-size:11px;letter-spacing:.14em;color:var(--cyan);font-weight:600}
.dcard{display:flex;flex-direction:column;gap:12px;padding:24px;border:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--bg2));box-shadow:0 20px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(63,246,255,.08)}
.dcard h2{margin:0 0 4px;font-family:var(--disp);font-size:14px;letter-spacing:.24em;color:var(--ink)}
.dcard p{margin:0;max-width:none;text-align:left}
.dcard .btn.wide{width:100%;height:46px;font-family:var(--disp);letter-spacing:.16em}
.dcard .hint{font-size:11px;color:var(--ink2)}
.dcard .or{display:flex;align-items:center;gap:10px;margin:6px 0;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.dcard .or::before,.dcard .or::after{content:"";flex:1;height:1px;background:var(--line)}
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:8px} .login.one{grid-template-columns:minmax(0,1fr) auto}
.door2 .login input{width:100%;min-width:0;text-align:left;padding:11px 12px;border-color:var(--line)} .door2 .login input:focus{outline:none;border-color:var(--cyan)}
.login .btn{height:auto;padding:0 16px}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px} .btn.sm{height:30px;padding:0 10px;font-size:11px}
.door-id{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);background:var(--bg);margin:0}
.door-id img{width:34px;height:34px;border-radius:50%;border:1px solid var(--cyan)} .door-id span{flex:1;display:flex;flex-direction:column}
.door-id b{color:var(--ink)} .door-id em{font-style:normal;font-size:11px;color:var(--ink2)}
.door2 .footer{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:18px;border-top:1px solid var(--line);font-size:11px;color:var(--ink2);text-align:center}
.door2 .footer a{color:var(--ink2);text-decoration:underline;text-decoration-color:var(--line)} .door2 .footer a:hover{color:var(--cyan)}
@media (max-width:860px){.dgrid{grid-template-columns:1fr}   .login{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .login .btn{grid-column:1 / -1;height:44px} .login.one{grid-template-columns:minmax(0,1fr) auto} .login.one .btn{grid-column:auto}
  .doorwhat li{grid-template-columns:22px 1fr} .doorwhat li span{grid-column:2}}

/* real companies and standards: official mark, one colour */
.reals{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.real{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--line);background:rgba(7,8,13,.6);font-size:11px;letter-spacing:.06em;color:var(--ink);font-style:normal;white-space:nowrap}
.rmark{display:inline-block;flex:none;width:18px;height:18px;background:currentColor;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} /* the image is set inline, so its path resolves from the page, not from css/ */

/* the hall of fame strip under the title */
.modal.hall{width:min(980px,100%);padding:0;border-color:var(--line);background:linear-gradient(180deg,#101522,#0d1019);overflow:hidden}
.hallbtn{display:inline-flex;align-items:center;gap:10px;margin-top:16px;height:34px;padding:0 14px;background:rgba(13,16,25,.7);border:1px solid var(--line);color:var(--ink2);font:600 10px var(--disp);letter-spacing:.2em;cursor:pointer;transition:border-color .15s,color .15s}
.hallbtn:hover{border-color:var(--mag);color:var(--ink)} .hallbtn b{font-family:var(--mono);font-weight:700;color:var(--yel);letter-spacing:0}
.hhead{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line)}
.hlive{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.2em;color:var(--mag)} .hlive i{width:7px;height:7px;border-radius:50%;background:var(--mag);box-shadow:0 0 8px var(--mag);animation:hpulse 1.4s infinite}
.htitle{flex:1;font-family:var(--disp);font-size:12px;letter-spacing:.24em;color:var(--ink)}
.hsee{font-size:11px;letter-spacing:.12em;color:var(--cyan);text-decoration:none} .hsee:hover{text-decoration:underline}
.hstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.hstats .ps{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border-right:1px solid #1a2233} .hstats .ps:last-child{border-right:0}
.hstats b{font-family:var(--disp);font-size:22px;font-weight:600;color:var(--cyan);font-variant-numeric:tabular-nums} .hstats span{font-size:9px;letter-spacing:.18em;color:var(--ink2)}
.hstats .ps:nth-child(2) b{color:var(--yel)} .hstats .ps:nth-child(4) b{color:var(--mag)}
.htrack{overflow:hidden;padding:12px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.hrow{display:flex;gap:12px;width:max-content;padding:0 16px} .htrack:not(.loop) .hrow{margin:0 auto}
.htrack.loop .hrow{animation:hscroll 40s linear infinite} .htrack.loop:hover .hrow{animation-play-state:paused}
@keyframes hscroll{to{transform:translateX(-50%)}}
.minicard{display:flex;flex-direction:column;gap:2px;min-width:170px;padding:9px 12px;border:1px solid rgba(63,246,255,.45);border-radius:8px;background:linear-gradient(135deg,#101522,#07080d);text-decoration:none;box-shadow:inset 0 3px 0 #ff3fa4;transition:transform .15s,box-shadow .15s}
.minicard:hover{transform:translateY(-2px);box-shadow:inset 0 3px 0 #ff3fa4,0 8px 20px rgba(0,0,0,.5)}
.minicard .mh{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--ink)} .minicard .mc{font-size:10px;letter-spacing:.16em;color:var(--mag)} .minicard .mn{font-size:10px;color:var(--ink2)}
.minicard.maker{border-color:rgba(255,210,63,.6)} .minicard.maker .mc{color:var(--yel)}
@media (max-width:760px){.hstats{grid-template-columns:repeat(2,minmax(0,1fr))} .hstats .ps:nth-child(2){border-right:0} .hstats .ps:nth-child(-n+2){border-bottom:1px solid #1a2233} .hsee{display:none}}
@media (prefers-reduced-motion:reduce){.htrack.loop .hrow{animation:none} .hlive i{animation:none}}
/* the maker's contact card */

/* a card's picture in a crew call */
.cardimg{display:block;max-width:220px;max-height:140px;margin:8px 0;padding:6px;background:#fff;border-radius:6px}

/* the setting: easy, normal, cyberpsycho */
.diffpick{margin-bottom:16px} .diffpick h3{margin:0 0 12px;font-family:var(--disp);font-size:14px;letter-spacing:.16em;color:var(--yel)}
.diffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;margin:0 0 10px}
.diff{display:flex;flex-direction:column;gap:6px;text-align:left;padding:12px 14px;background:var(--panel);border:1px solid var(--line);color:var(--ink);cursor:pointer}
.diff b{display:flex;align-items:center;font-family:var(--disp);font-size:15px;letter-spacing:.14em;color:var(--cyan)} .diff.cyberpsycho b{color:var(--mag)}
.diff span{font-size:13px;color:var(--ink2)} .diff em{font-style:normal;font-size:12px;color:var(--ink)}
.diff:hover{border-color:var(--cyan)}
.lthemes{display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:center;margin:12px 0} .lthemes .btn.on{border-color:var(--cyan);color:var(--cyan)}
.diff .stars{font-style:normal;font-size:24px;line-height:1;vertical-align:-2px;margin-left:10px;letter-spacing:3px;color:var(--yel)} .diff .stars s{text-decoration:none;color:var(--ink3);opacity:.6}
.diffchip{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:var(--ink2);cursor:help} .diffchip .stars{font-style:normal;font-size:16px;letter-spacing:2px;color:var(--yel)} .diffchip .stars s{text-decoration:none;color:var(--ink3);opacity:.6}
.modal .diffs{margin:12px 0}
.b-id .who .ava,.b-id .who img{flex:none} .diffchip{flex:none}
@media (max-width:520px){.b-id .who{min-width:30px} .diffchip{margin-left:0;gap:0} .diffchip .stars{font-size:12px;letter-spacing:0} .diffchip > svg{display:none}}
.dicon{display:inline-flex;vertical-align:middle;margin-right:10px} .dicon .ic{width:30px;height:30px;stroke-width:1.8}
.dicon.easy{color:var(--cyan)} .dicon.normal{color:var(--yel)} .dicon.cyberpsycho{color:var(--mag);filter:drop-shadow(0 0 6px rgba(255,63,164,.55))}
.diffchip .dicon{margin-right:0} .diffchip .dicon .ic{width:18px;height:18px}
@media (max-width:520px){.diffchip .dicon .ic{width:16px;height:16px}}
.door-id .ava{width:34px;height:34px;flex:none;border-radius:50%;border:1px solid var(--cyan);display:inline-flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:12px;letter-spacing:.06em;color:var(--cyan)}
@media (max-width:760px){.map{padding-bottom:0} .mlegend{position:static;height:auto;flex-wrap:wrap;gap:6px 14px;padding:10px 12px;margin:12px -12px 0} .mlegend span{white-space:nowrap}}
/* the door's look inside: four captures and what each teaches */
.dpreview{margin:clamp(28px,5vh,48px) 0 8px;display:flex;flex-direction:column;gap:14px}
.dpreview h2{margin:0;font-family:var(--disp);font-size:13px;letter-spacing:.2em;color:var(--ink)}
.pstats{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)} .pstats b{font-family:var(--disp);font-size:18px;color:var(--cyan);margin-right:6px;letter-spacing:.04em}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pgrid figure{margin:0;display:flex;flex-direction:column;gap:10px}
.pgrid img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border:1px solid var(--line);transition:border-color .15s}
.pgrid a:hover img,.pgrid a:focus-visible img{border-color:var(--cyan)}
.pgrid figcaption{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.55;color:var(--ink2)} .pgrid figcaption b{font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--cyan);font-weight:600}
@media (max-width:760px){.pgrid{grid-template-columns:1fr}}
.pgrid a{cursor:zoom-in}
.shotview{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(3,4,8,.9);cursor:zoom-out;animation:mfade .15s ease-out}
.shotview figure{margin:0;max-width:min(1280px,100%);display:flex;flex-direction:column;gap:10px}
.shotview img{display:block;max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;margin:0 auto;border:1px solid var(--cyan);box-shadow:0 20px 60px rgba(0,0,0,.7)}
.shotview figcaption{display:flex;flex-direction:column;gap:4px;font-size:13px;line-height:1.55;color:var(--ink2);cursor:auto} .shotview figcaption b{font-family:var(--disp);font-size:11px;letter-spacing:.16em;color:var(--cyan);font-weight:600}
.shotx{position:absolute;top:10px;right:12px;width:40px;height:40px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:22px;line-height:1;cursor:pointer} .shotx:hover,.shotx:focus-visible{border-color:var(--cyan);color:var(--cyan)}
.gsibtn{display:flex;justify-content:center;min-height:44px} .modal .gsibtn{margin:14px 0}
/* the first night: Dispatch's card, and the one thing to press, lit */
.first{display:flex;flex-direction:column;gap:12px;border-color:var(--mag);background:linear-gradient(180deg,rgba(255,63,164,.07),transparent 70%),var(--panel)}
.first .fnarr{font-style:italic;color:var(--ink2);line-height:1.65;max-width:72ch}
.first .fsay{display:flex;gap:14px;align-items:flex-start}
.first .fsay>div:last-child{min-width:0}
.first .fwho{font-family:var(--disp);font-size:11px;letter-spacing:.2em;color:var(--mag)}
.first .fsay p{margin:4px 0 0;color:var(--ink);font-size:15px;line-height:1.6;max-width:68ch}
.first .frules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.first .frules li{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--ink2);line-height:1.55}
.first .frules li .ic{flex:none;margin-top:3px;color:var(--cyan)}
.first .row{gap:10px;flex-wrap:wrap} .first .btn{white-space:nowrap}
.first.welcome{max-width:760px;margin:clamp(12px,4vh,40px) auto}
.first.away{flex-direction:row;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--mag);margin-bottom:12px;font-size:13px;color:var(--ink2)}
.first.away>span{flex:none} .first.away>span:nth-child(2){flex:1;min-width:0} .first.away b{font-family:var(--disp);font-size:10.5px;letter-spacing:.18em;color:var(--mag);margin-right:6px}
.bdetail.solo{max-width:720px}
.lead{position:relative;box-shadow:0 0 0 2px var(--mag),0 0 18px rgba(255,63,164,.55);animation:leadpulse 1.6s ease-in-out infinite}
@keyframes leadpulse{50%{box-shadow:0 0 0 2px var(--mag),0 0 4px rgba(255,63,164,.2)}}
@media (prefers-reduced-motion:reduce){.lead{animation:none}}
.lead:focus-visible{outline:3px solid var(--yel);outline-offset:3px}
@media (max-width:560px){.first .fsay p{font-size:14px}.first.away{flex-wrap:wrap}}
/* the floor just cleared, above the next one, so the new floor never looks already solved */
.prevok{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;padding:6px 10px;border-left:2px solid var(--grn);background:rgba(77,255,136,.05);font-size:12px;color:var(--ink2)}
.prevok b{font-family:var(--disp);font-size:10px;letter-spacing:.16em;color:var(--grn);margin-right:4px} .prevok .ic{flex:none;margin-top:2px;color:var(--grn)}
/* the short wait while the campaign loads after the door */
.jacking{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.jacking .glitch{font-family:var(--disp);font-weight:800;font-size:clamp(20px,5vw,40px);letter-spacing:.14em;color:var(--cyan);text-shadow:0 0 18px rgba(63,246,255,.4)} .jacking .glitch span{color:var(--mag)}
.jacking .jl{font-family:var(--disp);font-size:11px;letter-spacing:.24em;color:var(--ink2)}
.jacking .jbar{width:min(240px,60vw);height:2px;background:var(--line);overflow:hidden} .jacking .jbar i{display:block;height:100%;width:40%;background:var(--cyan);animation:jbar 1.1s ease-in-out infinite}
@keyframes jbar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media (prefers-reduced-motion:reduce){.jacking .jbar i{animation:none;width:100%}}
.shellopen{margin-top:12px;align-self:flex-start}
/* the term card: a lit word's meaning, the course notes for the night it first came up, and an official source */
.termcard{position:fixed;z-index:120;width:min(360px,calc(100vw - 16px));padding:12px 14px;background:#0b0f18;border:1px solid var(--term);box-shadow:0 14px 40px rgba(0,0,0,.65);opacity:0;visibility:hidden;transform:translateY(-3px);transition:opacity .12s,transform .12s,visibility .12s}
.termcard.on{opacity:1;visibility:visible;transform:none}
.termcard .tk{font-family:var(--disp);font-size:11px;letter-spacing:.18em;color:var(--term);text-transform:uppercase}
.termcard p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink)}
.tlinks{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tlinks a{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--line);color:var(--cyan);text-decoration:none;font-size:10.5px;letter-spacing:.14em;font-family:var(--disp)}
.tlinks a:hover,.tlinks a:focus-visible{border-color:var(--cyan);background:rgba(63,246,255,.06)}
.tlinks a em{font-style:normal;white-space:nowrap;font-family:var(--mono);letter-spacing:0;color:var(--ink2);margin-left:6px;text-transform:none}
.cword .tlinks{margin-top:6px} .cwcount{margin:8px 0 4px;font-size:12px}
@media (prefers-reduced-motion:reduce){.termcard{transition:none}}
#handle{text-transform:uppercase} #handle::placeholder{text-transform:none}
.scene .opts.lead{outline:2px solid var(--mag);outline-offset:4px;box-shadow:none}
body.firstnight .stn .ring{animation:none} /* the map's own pulse stays still while Dispatch is pointing */
:focus-visible{outline:2px solid var(--yel);outline-offset:2px} /* one clear focus ring, distinct from the pink lead */
.dm .opts.lead,.task.lead{outline:2px solid var(--mag);outline-offset:4px;box-shadow:none;animation:none}
.dm .opts.lead,.task.lead{outline:2px solid var(--mag);outline-offset:4px;box-shadow:none;animation:none}
/* patch notes */
.patch{display:grid;gap:14px;margin-top:12px;max-width:820px}
.prel{border:1px solid var(--line);padding:12px 16px} .prel.cur{border-color:var(--cyan)}
.prel .ph{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px} .prel .ph b{font-family:var(--disp);letter-spacing:.12em;color:var(--cyan)} .prel .ph time{font-size:12px;color:var(--ink3)}
.prel .pnow{font-size:10px;letter-spacing:.18em;color:var(--bg);background:var(--cyan);padding:2px 6px}
.prel ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .prel li{display:grid;grid-template-columns:76px 1fr;gap:10px;font-size:13px;line-height:1.55;color:var(--ink2)}
.ptag{font-family:var(--disp);font-size:10px;letter-spacing:.14em;padding-top:3px} .ptag.new{color:var(--cyan)} .ptag.change{color:var(--yel,#ffd84a)} .ptag.fix{color:var(--grn,#5dff9a)}
@media (max-width:480px){.prel li{grid-template-columns:1fr;gap:2px}}

/* the shard: the runner's own notes */
.modal.jot .jtag{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:4px 0 10px;font-size:12px;color:var(--ink2)}
.modal.jot .jtag b{color:var(--cyan);font-weight:normal}
.modal.jot .jtag .btn{height:26px;padding:0 10px;font-size:10px}
.shint{margin:6px 0 14px;font-size:12px;line-height:1.5;max-width:720px}
.sempty{margin-top:10px}
.snotes{display:grid;gap:10px;margin-top:8px;max-width:820px}
.snote{border:1px solid var(--line);padding:12px 14px;background:rgba(63,246,255,.02)}
.snote[hidden]{display:none}
.snote .stext{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.55;color:var(--ink)}
.snote textarea{width:100%;box-sizing:border-box;padding:10px 12px;background:var(--bg);border:1px solid var(--cyan);color:var(--ink);font:13px/1.5 var(--mono);resize:vertical}
.snote .smeta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:10px;font-size:11px;color:var(--ink3)}
.snote .smeta .grow{flex:1}
.snote .smeta .btn{height:28px;padding:0 10px;font-size:10.5px}
.snote .smeta .btn.sdel{border-color:var(--red);color:var(--red)}
.snote .stag{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 8px;border:1px solid var(--line);background:none;color:var(--cyan);font:11px var(--mono);cursor:pointer;text-align:left}
.snote .stag span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.snote .stag:hover,.snote .stag:focus-visible{border-color:var(--cyan)}