:root{
  --build:9;
  --bg:#020705; --acc:#66ffb2; --acc2:#1fd18a; --ink:#c8ffe2; --dim:#3f6f5c; --dim2:#1b3a2e;
  --panel:rgba(2,14,10,.86); --warn:#ffd23f; --warn2:#bfae74; --red:#ff2d4f; --onacc:#001a0d;
  --mono:'Cascadia Mono','Consolas','SF Mono','Menlo','DejaVu Sans Mono','Liberation Mono',ui-monospace,monospace;
  --sideW:340px;
}
html[data-mode=invade]{
  --bg:#05020a; --acc:#b88cff; --acc2:#7c4dd6; --ink:#eadcff; --dim:#6a5590; --dim2:#271a3d;
  --panel:rgba(10,4,20,.88); --warn:#ffd23f; --warn2:#bfae74; --onacc:#120024;
}
html[data-mode=cascade]{
  --bg:#070103; --acc:#ff4d6a; --acc2:#d11a3c; --ink:#ffd6dd; --dim:#86414e; --dim2:#3a1620;
  --panel:rgba(20,3,7,.88); --warn:#ffb347; --warn2:#c99a6a; --onacc:#1a0005;
}
html[data-mode=void]{
  --bg:#010409; --acc:#5cc8ff; --acc2:#1e7fd1; --ink:#d4eeff; --dim:#3f6383; --dim2:#15283c;
  --panel:rgba(2,7,16,.88); --warn:#c9b6ff; --warn2:#9a8cc4; --onacc:#000d1a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;
  font-family:var(--mono);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#cv{cursor:crosshair}
#crt{position:fixed;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%);mix-blend-mode:multiply}
button{font-family:var(--mono);cursor:pointer}

#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
#hud>*{pointer-events:auto}
#hud #hint,#hud #tl,#hud #log{pointer-events:none}

/* ---------- timer / phase */
#tl{position:absolute;left:18px;top:12px;max-width:min(380px,46vw)}
#timer{font-weight:700;font-size:46px;line-height:1;letter-spacing:.02em;color:var(--acc);
  text-shadow:0 0 18px color-mix(in srgb,var(--acc) 50%,transparent)}
#timer.low{color:#fff;text-shadow:0 0 14px var(--acc),0 0 30px var(--acc);animation:jit .18s steps(2) infinite}
#timer.idle{color:var(--dim);text-shadow:none}
@keyframes jit{50%{transform:translate(1px,-1px)}}
#phase{font-size:12px;letter-spacing:.22em;color:var(--dim);margin-top:4px;text-transform:uppercase}
#icemini{margin-top:6px;display:none;flex-wrap:wrap;gap:4px 10px;font-size:11px;letter-spacing:.16em;color:var(--warn)}
#icemini.show{display:flex}

/* ---------- side column */
#side{position:absolute;z-index:3;right:0;top:0;bottom:0;width:var(--sideW);display:flex;flex-direction:column;
  background:var(--panel);border-left:1px solid var(--dim2);backdrop-filter:blur(3px)}
#modebar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:14px 12px 12px}
#modebar #reset{grid-column:1/-1}
#modebar button{--bc:#ff2d4f;--bg:rgba(40,0,8,.55);flex:1;min-width:0;padding:9px 2px;font-size:13px;font-weight:700;letter-spacing:.24em;text-indent:.24em;white-space:nowrap;
  color:var(--bc);background:var(--bg);border:1px solid var(--bc);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:background .15s,color .15s,box-shadow .15s}
#modebar button:hover,#modebar button.on{background:var(--bc);color:#000}
#modebar button.on{box-shadow:0 0 18px var(--bc)}
#modebar #reset{--bc:#66ffb2;--bg:rgba(0,30,16,.55)}
#modebar #invade{--bc:#b88cff;--bg:rgba(22,8,40,.55)}
#modebar #cascade{--bc:#ff4d6a;--bg:rgba(40,0,8,.55)}
#modebar #void{--bc:#5cc8ff;--bg:rgba(0,14,40,.55)}
#rtog{display:flex;justify-content:space-between;align-items:center;width:100%;background:none;border:0;
  border-top:1px solid var(--dim2);border-bottom:1px solid var(--dim2);color:var(--acc);padding:9px 12px;font-size:13px;letter-spacing:.2em;cursor:default}
#opc{color:var(--ink);font-weight:400} #opc.short{color:var(--warn)}
#rarr{display:none;font-weight:400}
#rbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column}
#side.closed #rbody,#side.closed #link{display:none}
.rcap,.row{display:grid;grid-template-columns:1fr 42px 34px 34px 48px 14px;gap:5px;align-items:center}
.rcap{padding:7px 12px 3px;font-size:10px;color:var(--dim);letter-spacing:.12em}
.rcap span:nth-child(n+2){text-align:right}
#rows{display:flex;flex-direction:column}
.row{padding:5px 12px;border-bottom:1px solid color-mix(in srgb,var(--dim2) 60%,transparent);font-size:13px}
.row.off{opacity:.38}
.row.me{background:color-mix(in srgb,var(--acc) 8%,transparent)}
.nm{display:flex;align-items:center;gap:7px;min-width:0}
.nm i{flex:0 0 12px;height:12px;transform:rotate(45deg);box-shadow:0 0 0 1px rgba(255,255,255,.55)}
.nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nm em{font-style:normal;font-size:9px;color:var(--dim);letter-spacing:.1em;border:1px solid var(--dim2);padding:0 3px}
.mv,.sc,.ph{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.mv.zero{color:var(--red)} .sc{color:#7fd7ff} .ph{color:#bff6ff;text-align:right} .sc.zero,.ph.zero{color:var(--dim)}
.bn{display:flex;align-items:center;justify-content:flex-end;gap:2px;color:var(--dim)}
.bn input{width:40px;background:#000;border:1px solid var(--dim2);color:var(--warn);font-family:var(--mono);font-size:13px;padding:2px 3px;text-align:center;-webkit-user-select:text;user-select:text;-moz-appearance:textfield}
.bn input::-webkit-inner-spin-button,.bn input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bn input:focus{outline:1px solid var(--warn)}
.kx{background:none;border:0;color:var(--dim);font-size:15px;padding:0;line-height:1}
.kx:hover{color:var(--red)}
#pool{display:none;margin:8px 12px 0;padding:6px 8px;border:1px dashed var(--dim);font-size:12px;letter-spacing:.15em;color:var(--ink);justify-content:space-between}
#pool.show{display:flex}
#pool b{color:var(--acc);font-weight:400}
.rb{display:flex;gap:6px;padding:8px 12px}
.rb button{flex:1;background:color-mix(in srgb,var(--acc) 6%,transparent);border:1px solid var(--dim);color:var(--acc);padding:6px;font-size:12px;letter-spacing:.2em}
.rb button:hover{background:var(--acc);color:var(--onacc)}
#req{padding:0 12px 8px;font-size:11px;letter-spacing:.14em;color:var(--dim)}
#req b{color:var(--ink);font-weight:400}
.ich{padding:9px 12px 4px;font-size:10px;letter-spacing:.2em;color:var(--dim);border-top:1px solid var(--dim2)}
#allies,#ice{display:flex;flex-direction:column;gap:6px;padding:4px 12px 10px}
.ice,.ally{border-left:2px solid var(--warn);padding:2px 0 2px 8px;background:linear-gradient(90deg,color-mix(in srgb,var(--warn) 9%,transparent),transparent)}
.ice b,.ally b{display:block;font-size:12px;letter-spacing:.18em;color:var(--warn)}
.ice span,.ally span{display:block;font-size:11px;color:var(--warn2);line-height:1.35}
.ally{border-color:#7fd7ff;background:linear-gradient(90deg,rgba(127,215,255,.08),transparent)}
.ally b{color:#7fd7ff} .ally span{color:#8fb6c8}
.ally.osma{border-color:#c9a6ff;background:linear-gradient(90deg,rgba(201,166,255,.08),transparent)}
.ally.osma b{color:#c9a6ff} .ally.osma span{color:#ab9ac4}
.rules{padding:0 12px 10px;font-size:11px;line-height:1.5;color:var(--dim)}
.rules b{color:var(--acc);font-weight:400}
.grow{flex:1}
#link{display:flex;align-items:center;gap:8px;padding:8px 12px 12px;font-size:11px;color:var(--dim);letter-spacing:.15em;border-top:1px solid var(--dim2)}
#linktxt{flex:1}
#linkdot{width:8px;height:8px;border-radius:50%;background:var(--warn);box-shadow:0 0 8px var(--warn)}
#linkdot.ok{background:var(--acc);box-shadow:0 0 8px var(--acc)}
#linkdot.bad{background:var(--red);box-shadow:0 0 8px var(--red)}
#mute,#music{background:none;border:1px solid var(--dim2);color:var(--acc);font-size:11px;min-width:26px;height:22px;padding:0 4px}
#mute.off,#music.off{color:var(--dim);text-decoration:line-through}

/* ---------- route / scan */
#me{position:absolute;left:calc((100vw - var(--sideW)) / 2);bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px}
#modes{display:flex;border:1px solid var(--dim)}
#modes button{background:transparent;border:0;color:var(--dim);padding:7px 20px;font-size:13px;letter-spacing:.25em}
#modes button.on{background:var(--acc);color:var(--onacc)}
#modes button[data-m=scan].on{background:#7fd7ff;color:#00131c}
#me{flex-direction:row;flex-wrap:wrap;justify-content:center}
#pathBtn{padding:7px 16px;font-size:13px;letter-spacing:.2em;color:#bff6ff;background:rgba(0,30,40,.5);border:1px solid #4fd8ff;
  text-shadow:0 0 8px #4fd8ff;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
#pathBtn:hover:not(:disabled){background:#bff6ff;color:#001a22;text-shadow:none}
#pathBtn:disabled{opacity:.35;cursor:default}
#cd{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:160px;height:3px;background:var(--dim2);visibility:hidden}
#cd.on{visibility:visible}
#cd i{display:block;height:100%;width:0;background:var(--warn)}
#hint{position:absolute;left:calc((100vw - var(--sideW)) / 2);bottom:76px;transform:translateX(-50%);text-align:center;font-size:12px;letter-spacing:.18em;color:var(--dim);width:min(560px,80vw);text-transform:uppercase}
#hint b{color:var(--acc);font-weight:400}

/* ---------- log */
#log{position:absolute;left:18px;bottom:12px;width:clamp(160px,calc((100vw - var(--sideW)) / 2 - 230px),420px);display:flex;flex-direction:column;justify-content:flex-end;gap:3px;font-size:12px;
  max-height:clamp(100px,calc(20vh - 22px),158px);overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
  padding:8px 10px;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15));border-left:1px solid var(--dim2)}
#log:empty{display:none}
#log div{color:var(--dim);animation:lgin .4s ease-out;line-height:1.35}
#log .ev{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
#log .say{color:#d9e6e0}
#log .say b{font-weight:700;letter-spacing:.12em;margin-right:4px}
#log div b{font-weight:400}
#log .say b{font-weight:700}
#log div:last-child{color:var(--ink)}
#log .say:last-child{color:#fff}

/* ---------- Horus text (class names follow COMP/CON / Foundry LANCER) */
.horus--subtle{display:inline-block;color:#ffb3c1;text-shadow:1px 0 rgba(255,0,80,.55),-1px 0 rgba(0,255,220,.45);animation:hsub 2.8s steps(1) infinite}
@keyframes hsub{0%,86%{transform:none;opacity:1;filter:none}88%{transform:translateX(1px) skewX(-8deg);opacity:.75}91%{transform:translateX(-1px)}94%{filter:blur(.6px)}97%{opacity:.9;transform:none}}
code.horus{position:relative;display:inline-block;font-family:var(--mono);font-size:12px;padding:1px 7px;color:#ffe3ea;background:#160008;
  border:1px solid rgba(255,45,79,.55);box-shadow:0 0 10px rgba(255,45,79,.35) inset;text-shadow:2px 0 #ff0040,-2px 0 #00ffd5;animation:hfull 1.1s steps(2) infinite}
code.horus::before,code.horus::after{content:attr(data-t);position:absolute;left:7px;top:1px;width:calc(100% - 14px);overflow:hidden;white-space:nowrap;pointer-events:none}
code.horus::before{color:#00ffd5;clip-path:inset(0 0 55% 0);transform:translateX(-2px);animation:hslice 0.7s steps(3) infinite}
code.horus::after{color:#ff0040;clip-path:inset(60% 0 0 0);transform:translateX(2px);animation:hslice 0.9s steps(2) infinite reverse}
@keyframes hfull{0%,70%{transform:none}75%{transform:skewX(-10deg) translateX(-1px)}85%{transform:skewX(6deg) translateX(1px)}}
@keyframes hslice{0%{clip-path:inset(0 0 70% 0)}33%{clip-path:inset(40% 0 30% 0)}66%{clip-path:inset(75% 0 0 0)}100%{clip-path:inset(10% 0 60% 0)}}

/* ---------- NHP panel */
#nhps{display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-top:1px solid var(--dim2)}
.nhp{border:1px solid var(--dim2);background:rgba(0,0,0,.35);padding:6px 8px;min-width:0}
.nhp b{display:block;font-size:13px;letter-spacing:.22em;font-weight:700}
.nhp i{font-style:normal;font-size:10px;letter-spacing:.2em;padding:0 4px;border:1px solid currentColor}
.nhp em{font-style:normal;font-size:10px;letter-spacing:.12em;color:var(--dim);display:block;margin-top:3px}
.nhp span{display:block;font-size:10px;line-height:1.35;color:#9fb3ab;margin-top:3px}
.nhp span.gname,#log .gname{display:inline;margin:0;font-size:inherit;color:#ffb37f}
.nhp.soma{border-color:#6f6740;background:linear-gradient(90deg,rgba(242,230,160,.08),rgba(0,0,0,.3))}
.nhp.soma .nh{display:flex;align-items:center;gap:8px}
.nhp.soma b{display:inline;color:#f2e6a0;font-size:15px}
.nhp.soma i{color:#f2e6a0}
.nhp.soma em{display:inline;margin:0 0 0 auto}
.nhp.soma span{font-size:11px;color:#c9c2a0}
.nhprow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.nhprow .nhp i{display:inline-block;margin-top:3px}
.nhp.amos b,.nhp.amos i{color:#7fd7ff}
.nhp.osma b,.nhp.osma i{color:#c9a6ff}
.nhp.gate b,.nhp.gate i{color:#ffb37f}
.nhp.gate b{animation:gflick 1.6s steps(1) infinite}
@keyframes gflick{0%,92%{opacity:1}94%{opacity:.4;transform:translateX(1px)}96%{opacity:1;transform:none}}
@keyframes lgin{from{opacity:0;transform:translateX(-8px)}}

/* ---------- join overlay */
.ov{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,rgba(2,20,13,.82),rgba(0,0,0,.92))}
.ov.show{display:flex}
#joinf{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(340px,86vw)}
#joinf label{letter-spacing:.35em;font-size:13px;color:var(--acc)}
#joinf input{width:100%;background:#000;border:1px solid var(--acc2);color:var(--ink);font-family:var(--mono);font-size:22px;letter-spacing:.12em;
  text-align:center;padding:10px;text-transform:uppercase;-webkit-user-select:text;user-select:text}
#joinf input:focus{outline:none;box-shadow:0 0 0 1px var(--acc),0 0 24px color-mix(in srgb,var(--acc) 25%,transparent)}
#joinf button[type=submit]{width:100%;padding:11px;background:var(--acc);color:var(--onacc);border:0;font-size:16px;font-weight:700;letter-spacing:.4em}
#joinf .ghost{background:none;border:0;color:var(--dim);font-size:12px;letter-spacing:.15em}
.eye{width:120px;height:62px;position:relative;margin-bottom:6px}
.eye::before{content:"";position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px;border:2px solid var(--acc);border-radius:100% 0;transform:rotate(45deg);box-shadow:0 0 18px color-mix(in srgb,var(--acc) 40%,transparent)}
.eye i{position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px;border-radius:50%;background:var(--acc);box-shadow:0 0 22px var(--acc);animation:look 4s ease-in-out infinite}
@keyframes look{0%,100%{transform:translateX(0)}30%{transform:translateX(-14px)}60%{transform:translateX(12px)}}

/* ---------- win */
#win{position:fixed;left:0;top:0;bottom:0;right:var(--sideW);z-index:20;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 1.2s}
#win.on{opacity:1}
#win .wbox{text-align:center;background:radial-gradient(ellipse at center,rgba(0,0,0,.8),transparent 70%);padding:40px 60px}
.wt{font-weight:700;font-size:clamp(34px,8vw,92px);letter-spacing:.3em;color:var(--acc);text-shadow:0 0 30px var(--acc);animation:shk 3s steps(1) infinite}
@keyframes shk{0%,93%{transform:none}94%{transform:translate(-3px,1px) skewX(-6deg)}97%{transform:translate(2px,-1px)}}
.ws{margin-top:8px;font-size:15px;letter-spacing:.2em;color:var(--ink)}
.wh{margin-top:6px;font-size:11px;letter-spacing:.2em;color:var(--dim)}

/* ---------- fail (cascade) */
#fail{position:fixed;inset:0;z-index:40;pointer-events:none;background:transparent;transition:background 2.8s ease-in;overflow:hidden;
  --fbg:rgba(120,0,16,.9); --fink:#ffc2c9; --fglow:#ff1a3c; --fa:#ff0040; --fb:#00ffd5; --fbig:#fff}
#fail[data-c=green]{--fbg:rgba(0,44,22,.93); --fink:#b8ffd6; --fglow:#1fd18a; --fa:#3dff9a; --fb:#0090ff; --fbig:#eafff2}
#fail[data-c=blue]{--fbg:rgba(0,20,62,.93); --fink:#b9e4ff; --fglow:#1a8cff; --fa:#00c8ff; --fb:#5a2bff; --fbig:#e6f7ff}
#fail[data-c=yellow]{--fbg:rgba(62,46,4,.94); --fink:#f3dc96; --fglow:#c8961a; --fa:#e0b23a; --fb:#5f8f3a; --fbig:#fff3cf}
#fail.on{background:var(--fbg);pointer-events:auto}
#fail.on::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px);animation:roll 0.6s linear infinite}
@keyframes roll{to{background-position:0 8px}}
#glyphs span{position:absolute;white-space:nowrap;color:var(--fink);font-family:var(--mono);text-shadow:0 0 6px var(--fglow),2px 0 var(--fa),-2px 0 var(--fb);animation:gl .35s steps(3) infinite}
#glyphs span.big{color:var(--fbig)}
@keyframes gl{33%{transform:translate(-2px,1px) skewX(-8deg)}66%{transform:translate(2px,-1px) skewX(6deg);opacity:.75}}
#reboot{position:absolute;right:18px;bottom:16px;font-size:12px;letter-spacing:.3em;color:var(--fink);z-index:2}

/* ---------- toasts */
#toasts{position:fixed;inset:0;pointer-events:none;z-index:25}
.toast{position:absolute;transform:translate(-50%,-140%);font-size:12px;letter-spacing:.2em;color:var(--warn);
  background:rgba(0,0,0,.78);border:1px solid currentColor;padding:3px 8px;white-space:nowrap;animation:tst 1.4s ease-out forwards}
.toast.r{color:#ff6b80}
.toast.n{color:#7fd7ff}
.toast.c{left:calc((100vw - var(--sideW)) / 2)!important;top:30%!important}
@keyframes tst{0%{opacity:0;margin-top:6px}12%{opacity:1;margin-top:0}75%{opacity:1}100%{opacity:0;margin-top:-14px}}

/* ---------- narrow screens: side column becomes a drawer */
@media (max-width:860px){
  :root{--sideW:0px}
  #side{width:min(300px,62vw);bottom:auto;max-height:100vh;border-bottom:1px solid var(--dim2)}
  #side:not(.closed){bottom:0;width:min(340px,94vw)}
  #rtog{cursor:pointer}
  #rarr{display:inline}
  #timer{font-size:32px}
  #tl{max-width:40vw}
  #log{display:none}
  #modebar button{font-size:11px;padding:8px 2px;letter-spacing:.12em;text-indent:.12em}
  #win{right:0}
}

/* ================= v7 additions ================= */
/* join code */
#codebar{display:flex;align-items:center;gap:8px;padding:10px 12px 0;font-size:11px;letter-spacing:.2em;color:var(--dim)}
#codebar b{font-size:20px;letter-spacing:.32em;color:var(--ink);text-shadow:0 0 12px color-mix(in srgb,var(--acc) 45%,transparent);flex:1}
#codebar button{background:none;border:1px solid var(--dim);color:var(--acc);font-size:11px;letter-spacing:.12em;padding:4px 7px}
#codebar button:hover{background:var(--acc);color:var(--onacc)}
.coderow{display:flex;gap:8px;width:100%}
.coderow input{flex:1;letter-spacing:.5em!important;font-size:26px!important}
.coderow button{background:transparent;border:1px solid var(--acc2);color:var(--acc);padding:0 14px;letter-spacing:.2em}
.coderow button:hover{background:var(--acc);color:var(--onacc)}
#joinMsg{min-height:16px;font-size:12px;letter-spacing:.08em;color:var(--dim);text-align:center}
#side>.rb{padding:10px 12px 8px}

/* chat: scrollable shared thoughtspace */
#log{pointer-events:auto!important;overflow-y:auto;overflow-x:hidden;justify-content:flex-start;
  -webkit-mask-image:none;mask-image:none;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
#log::-webkit-scrollbar{width:6px}
#log::-webkit-scrollbar-thumb{background:var(--dim);border-radius:3px}
#log>div:first-child{margin-top:auto}
#log .say q{quotes:none;font-style:italic;color:#d9e6e0}
#log .say:last-child q{color:#fff}
#log .say b::before{content:'◇ ';opacity:.6}
#log .asmo b::before{content:'◆ '}
.alive-word{font-weight:700;letter-spacing:.4em;color:#e0b23a;text-shadow:0 0 8px #3fa9ff}

/* NHP cards light up while their ability acts */
.nhp{transition:box-shadow .3s,border-color .3s,background .3s}
.nhp.hot{border-color:currentColor;box-shadow:0 0 16px currentColor,inset 0 0 12px rgba(255,255,255,.08);animation:nhot .5s ease-in-out infinite alternate}
.nhp.soma.hot{color:#f2e6a0}.nhp.amos.hot{color:#7fd7ff}.nhp.osma.hot{color:#c9a6ff}.nhp.gate.hot{color:#ffb37f}
@keyframes nhot{to{background:rgba(255,255,255,.07)}}
.row.stun .nm span::after{content:' ⚡STUN';color:#ff6b80;font-size:10px;letter-spacing:.1em}

/* STUN overlay (only on the seized operator's screen) */
#stun{position:fixed;inset:0;z-index:45;display:none;align-items:center;justify-content:center;background:rgba(40,0,10,.55);backdrop-filter:blur(2px) saturate(.4);cursor:not-allowed}
#stun.on{display:flex}
#stun>div{text-align:center;padding:24px 40px;border:1px solid #ff6b80;background:rgba(0,0,0,.75);box-shadow:0 0 30px rgba(255,45,79,.4)}
#stun span{display:block;font-size:32px;font-weight:700;letter-spacing:.4em;color:#ff6b80;animation:jit .2s steps(2) infinite}
#stun b{display:block;font-size:22px;margin:6px 0;color:#fff}
#stun em{font-style:normal;font-size:12px;letter-spacing:.12em;color:#ffb3c1}

/* ALIVE: the one time ASMO is understood. Blue pulse fading to the ??? failure yellow */
#alive{position:fixed;left:0;top:0;bottom:0;right:var(--sideW);z-index:22;pointer-events:none;display:flex;align-items:center;justify-content:center;opacity:0}
#alive span{font-weight:700;font-size:clamp(60px,14vw,190px);letter-spacing:.35em;text-indent:.35em}
#alive.on{animation:aliveFade 6s ease-out forwards}
#alive.on span{animation:aliveCol 6s ease-out forwards}
@keyframes aliveFade{0%{opacity:0}6%{opacity:1}12%{opacity:.55}18%{opacity:1}24%{opacity:.6}30%{opacity:1}75%{opacity:.9}100%{opacity:0}}
@keyframes aliveCol{0%,30%{color:#5cc8ff;text-shadow:0 0 30px #1a8cff,0 0 70px #1a8cff;transform:scale(1)}
  65%{color:#e0b23a;text-shadow:0 0 30px #c8961a,0 0 60px #6b4a00;transform:scale(1.04)}100%{color:#c8961a;text-shadow:0 0 20px #6b4a00;transform:scale(1.08)}}

/* help orb */
#helpOrb{position:fixed;z-index:12;top:16px;right:calc(var(--sideW) + 18px);width:40px;height:40px;border-radius:50%;
  border:1px solid var(--acc);background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--acc) 55%,#fff 0%),color-mix(in srgb,var(--acc) 18%,#000) 70%);
  color:#fff;font-size:20px;font-weight:700;box-shadow:0 0 18px color-mix(in srgb,var(--acc) 60%,transparent);animation:orb 2.6s ease-in-out infinite}
#helpOrb:hover{transform:scale(1.08)}
@keyframes orb{50%{box-shadow:0 0 30px color-mix(in srgb,var(--acc) 80%,transparent)}}
@media (max-width:860px){#helpOrb{top:auto;bottom:22px;right:14px;width:34px;height:34px;font-size:17px}}

/* field guide */
#guide{z-index:60;background:rgba(0,0,0,.82)}
#guide .gpanel{width:min(1000px,94vw);height:min(88vh,920px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--dim);box-shadow:0 0 50px rgba(0,0,0,.8)}
.ghead{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--dim2)}
.gtitle{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:700;letter-spacing:.3em;color:var(--acc)}
.gorb{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--acc);color:#fff;font-size:15px;box-shadow:0 0 12px var(--acc)}
#gclose{background:none;border:1px solid var(--dim);color:var(--ink);font-size:20px;width:34px;height:32px}
#gclose:hover{background:var(--acc);color:var(--onacc)}
.gtabs{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 16px;border-bottom:1px solid var(--dim2);font-size:11px;letter-spacing:.18em}
.gtabs a{color:var(--dim);text-decoration:none}
.gtabs a:hover{color:var(--acc)}
.gbody{position:relative;flex:1;overflow-y:auto;padding:6px 22px 30px;-webkit-user-select:text;user-select:text;scrollbar-width:thin;scrollbar-color:var(--dim) transparent}
.gbody section{padding:14px 0 10px;border-bottom:1px dashed var(--dim2)}
.gbody h2{margin:6px 0 10px;font-size:15px;letter-spacing:.3em;color:var(--acc)}
.gbody p,.gbody li,.gbody span{font-size:13px;line-height:1.55;color:#cfdcd6}
.gbody b{color:#fff}
.gbody code{color:var(--acc)}
.gbody kbd{border:1px solid var(--dim);padding:0 4px;font-family:var(--mono);color:#fff}
.gbody .note{color:var(--dim);font-size:12px}
.gart{width:100%;height:auto;max-height:170px;margin:4px 0}
.gt{font:10px var(--mono);fill:#e8fff3}
.gl{font:10px var(--mono);letter-spacing:.15em;fill:#7aa597}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{border:1px solid var(--dim2);padding:8px;background:rgba(0,0,0,.3)}
.step svg{width:100%;height:auto}
.step b{display:block;font-size:12px;letter-spacing:.15em;color:var(--acc);margin:4px 0}
.step span{font-size:12px}
.legend{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 18px}
.legend>div{display:grid;grid-template-columns:48px 1fr;column-gap:10px;align-items:center}
.legend svg{width:48px;height:48px;grid-row:span 2}
.legend b{font-size:13px;letter-spacing:.08em}
.legend span{font-size:12px;color:#9fb3ab}
.ctl{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
.ctl>div{display:flex;gap:12px;align-items:flex-start}
.ctl p{margin:0}
.kbtn{flex:0 0 auto;min-width:86px;text-align:center;padding:6px 8px;font-size:12px;letter-spacing:.2em;border:1px solid var(--dim);color:var(--acc)}
.kbtn.on{background:var(--acc);color:var(--onacc)}
.kbtn.scan{color:#7fd7ff;border-color:#7fd7ff}
.kbtn.path{color:#bff6ff;border-color:#4fd8ff}
.res{padding-left:20px;margin:6px 0}
.res li{margin:4px 0}
.nhpg{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.nc{border:1px solid var(--dim2);border-left:3px solid;padding:8px 10px;background:rgba(0,0,0,.3)}
.nc b{display:block;letter-spacing:.2em;margin-bottom:4px}
.nc ul{margin:6px 0 0;padding-left:18px}
.nc.soma{border-left-color:#f2e6a0}.nc.soma>b{color:#f2e6a0}
.nc.amos{border-left-color:#7fd7ff}.nc.amos>b{color:#7fd7ff}
.nc.osma{border-left-color:#c9a6ff}.nc.osma>b{color:#c9a6ff}
.nc.gate{border-left-color:#ffb37f}.nc.gate>b,.nc.gate .gname{color:#ffb37f}
.nc.asmo{border-left-color:#ff6b80}.nc.asmo>b{color:#ff6b80}
.icel{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.icel>div{border:1px solid var(--dim2);padding:8px;background:rgba(0,0,0,.3)}
.icel i{font-style:normal;font-size:18px;color:var(--warn);margin-right:6px}
.icel b{color:var(--warn);letter-spacing:.18em;font-size:12px}
.icel span{display:block;font-size:12px;margin-top:4px}
.modesg{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.mc{padding:10px;border:1px solid;background:rgba(0,0,0,.35)}
.mc b{display:block;letter-spacing:.25em;margin-bottom:6px}
.mc span{display:block;font-size:12px}
.mc em{display:block;margin-top:8px;font-style:normal;font-size:11px;letter-spacing:.06em;color:var(--dim)}
.m-sim{border-color:#66ffb2}.m-sim b{color:#66ffb2}
.m-inv{border-color:#b88cff}.m-inv b{color:#b88cff}
.m-cas{border-color:#ff4d6a}.m-cas b{color:#ff4d6a}
.m-q{border-color:#5cc8ff}.m-q b{color:#5cc8ff}
.c-soma{color:#f2e6a0!important}.c-asmo{color:#ff6b80!important}
@media (max-width:860px){.steps,.modesg{grid-template-columns:repeat(2,1fr)}.legend,.ctl,.nhpg,.icel{grid-template-columns:1fr}}

.nc ul b{display:inline;margin:0;letter-spacing:.15em}

/* ================= v8: join flow + connection state ================= */
#jcodeBox{text-align:center;width:100%}
#jcodeBox label{display:block;letter-spacing:.35em;font-size:13px;color:var(--acc)}
#jcode{font-size:44px;font-weight:700;letter-spacing:.45em;text-indent:.45em;color:var(--ink);text-shadow:0 0 18px color-mix(in srgb,var(--acc) 55%,transparent);margin:4px 0}
#jinfo{font-size:12px;letter-spacing:.1em;color:var(--dim);min-height:15px}
#jcodeEntry{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.jlinks{display:flex;gap:18px;justify-content:center}
#netWarn{display:none;font-size:12px;line-height:1.5;color:#ffd0d6;background:rgba(80,0,14,.6);border:1px solid #ff2d4f;padding:8px 10px;text-align:center}
#netWarn.show{display:block}
#netWarn b{display:block;color:#ff6b80;letter-spacing:.2em;margin-bottom:2px}
#netState{font-style:normal;font-size:12px;color:var(--warn);margin-left:-4px}
#netState.ok{color:var(--acc);text-shadow:0 0 6px var(--acc)}
#netState.bad{color:#ff2d4f;text-shadow:0 0 6px #ff2d4f;animation:jit .3s steps(2) infinite}