/* HACKERS-MUD graphical client - modern neon UI */
:root {
  --bg:#0a0a12; --bg2:#0f0f1c; --panel:#12131f; --panel2:#171a29;
  --line:#242841; --line2:#333856;
  --ink:#e7e9f5; --mut:#8b90b2; --dim:#5b6086;
  --red:#ff2d55; --red-d:#b3203f;
  --cyan:#66e0ff; --cyan-d:#2aa7cc;
  --grn:#3ce88b; --yel:#ffcf4a; --org:#ff9b45; --vio:#b98cff;
  --hp:#ff3b57; --en:#42c8ff; --xp:#3ce88b; --heat:#ff7a1a;
  --r:10px; --r-s:7px;
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:14px; -webkit-text-size-adjust:100%; overscroll-behavior:none; }
body { overflow:hidden; }
a { color:var(--cyan); }
.ns { padding:2rem; color:var(--red); font-family:var(--mono); }
button { font:inherit; color:inherit; cursor:pointer; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--line2); border-radius:6px; }
::-webkit-scrollbar-track { background:transparent; }

#app { position:fixed; inset:0; display:flex; flex-direction:column; }

/* ---------- shared bits ---------- */
.btn { background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2); border-radius:var(--r-s); padding:.5em .9em;
  color:var(--ink); font-weight:600; letter-spacing:.02em; transition:.12s; }
.btn:hover { border-color:var(--cyan-d); box-shadow:0 0 0 1px var(--cyan-d),0 0 14px -4px var(--cyan); }
.btn.pri { background:linear-gradient(180deg,var(--red),var(--red-d)); border-color:var(--red-d); color:#fff; }
.btn.pri:hover { box-shadow:0 0 18px -3px var(--red); }
.btn.sm { padding:.32em .6em; font-size:12px; }
.btn:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.chip { display:inline-flex; align-items:center; gap:.35em; padding:.2em .55em;
  border:1px solid var(--line2); border-radius:999px; font-size:11px; color:var(--mut); background:#0d0e18; }
.tag-illegal { color:var(--red); border-color:var(--red-d); }
kbd { font-family:var(--mono); background:#0c0d16; border:1px solid var(--line2);
  border-bottom-width:2px; border-radius:4px; padding:.05em .4em; font-size:11px; color:var(--cyan); }
.scan { position:absolute; inset:0; pointer-events:none; z-index:60;
  background:repeating-linear-gradient(0deg,transparent 0 2px,#0000000f 2px 3px); mix-blend-mode:overlay; }

/* ---------- login / create screens ---------- */
.screen { position:absolute; inset:0; display:grid; place-items:center; padding:24px;
  background:radial-gradient(1200px 700px at 50% -10%,#1a1030,transparent),var(--bg); overflow:auto; }
.screen::before { content:""; position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:linear-gradient(#ff2d5522 1px,transparent 1px),linear-gradient(90deg,#ff2d5511 1px,transparent 1px);
  background-size:44px 44px; mask:linear-gradient(180deg,transparent,#000 60%); }
.card { position:relative; width:min(440px,92vw); background:linear-gradient(180deg,#14152400,#141524);
  border:1px solid var(--line2); border-radius:var(--r); padding:26px 24px 22px;
  box-shadow:0 30px 80px -30px #000,0 0 0 1px #ffffff08 inset; }
.brand { font-family:var(--mono); font-weight:800; font-size:26px; letter-spacing:.06em;
  color:#fff; text-shadow:0 0 22px var(--red); }
.brand small { display:block; font-size:11px; letter-spacing:.32em; color:var(--cyan); font-weight:600; margin-top:4px; }
.card h2 { margin:18px 0 6px; font-size:15px; }
.card p.sub { margin:0 0 16px; color:var(--mut); font-size:13px; }
.field { margin:10px 0; }
.field label { display:block; font-size:11px; letter-spacing:.14em; color:var(--dim); text-transform:uppercase; margin-bottom:5px; }
.field input { width:100%; background:#0b0c15; border:1px solid var(--line2); border-radius:var(--r-s);
  padding:.7em .8em; color:var(--ink); font-family:var(--mono); }
.field input:focus { outline:none; border-color:var(--cyan-d); box-shadow:0 0 0 3px #66e0ff22; }
.row { display:flex; gap:10px; align-items:center; margin-top:16px; }
.row .btn { flex:1; }
.msg { min-height:1.2em; margin-top:10px; font-size:12px; color:var(--red); font-family:var(--mono); }
.msg.ok { color:var(--grn); }
.foot { margin-top:16px; font-size:11px; color:var(--dim); text-align:center; }
.foot a { color:var(--mut); }

.archs { display:grid; gap:10px; margin:14px 0; }
.arch { text-align:left; border:1px solid var(--line2); border-radius:var(--r-s);
  background:#0d0e18; padding:12px 14px; transition:.12s; }
.arch:hover,.arch.sel { border-color:var(--red-d); box-shadow:0 0 20px -6px var(--red); background:#15121c; }
.arch b { font-size:14px; }
.arch .st { font-family:var(--mono); font-size:11px; color:var(--cyan); margin-top:3px; }
.arch .bl { font-size:12px; color:var(--mut); margin-top:5px; }

/* ---------- game layout ---------- */
#game { position:absolute; inset:0; display:grid; grid-template-columns:248px 1fr 258px;
  grid-template-rows:52px 1fr 182px; grid-template-areas:
    "top top top" "left stage right" "left log right"; gap:8px; padding:8px; }
@media (max-width:1000px){ #game { grid-template-columns:1fr; grid-template-rows:52px 40vh auto auto;
  grid-template-areas:"top" "stage" "right" "log"; } #left { display:none; } }

.pane { background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden; position:relative; }
.pane h3 { margin:0; padding:8px 12px; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); border-bottom:1px solid var(--line); background:#0d0e18; }
.pane .body { padding:10px 12px; overflow:auto; height:100%; }

#top { grid-area:top; display:flex; align-items:center; gap:14px; padding:0 12px; }
#top .who { font-family:var(--mono); font-weight:700; white-space:nowrap; }
#top .who .lv { color:var(--yel); }
#top .who .arch { color:var(--mut); font-weight:400; font-size:12px; }
#top .bars { display:flex; gap:14px; flex:1; min-width:0; }
.bar { flex:1; min-width:70px; max-width:220px; }
.bar .lab { font-size:9px; letter-spacing:.12em; color:var(--dim); display:flex; justify-content:space-between; }
.bar .track { height:9px; border-radius:5px; background:#0b0c15; border:1px solid var(--line); overflow:hidden; margin-top:2px; }
.bar .fill { height:100%; transition:width .3s; box-shadow:0 0 12px -2px currentColor; }
.bar.hp .fill { background:var(--hp); color:var(--hp); }
.bar.en .fill { background:var(--en); color:var(--en); }
.bar.xp .fill { background:var(--xp); color:var(--xp); }
#top .eddies { font-family:var(--mono); color:var(--yel); font-weight:700; white-space:nowrap; }
#top .wanted { display:flex; gap:3px; align-items:center; }
#top .wanted i { width:8px; height:8px; border-radius:2px; background:#26283f; display:block; transform:rotate(45deg); }
#top .wanted.w1 i.a,#top .wanted.w2 i.a { background:var(--org); box-shadow:0 0 8px var(--org); }
#top .wanted.w2 i { background:var(--red); box-shadow:0 0 8px var(--red); }
#top .icons { display:flex; gap:4px; }
#top .icons .btn { padding:.3em .5em; font-size:15px; line-height:1; position:relative; }
#top .icons .btn .badge { font-size:9px; }

#left { grid-area:left; }
#stage { grid-area:stage; padding:0; background:#05060c; }
#stage canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
#roomName { position:absolute; left:12px; top:10px; z-index:20; font-family:var(--mono);
  font-weight:800; font-size:16px; letter-spacing:.02em; text-shadow:0 2px 10px #000,0 0 20px var(--red);
  pointer-events:none; max-width:70%; }
#roomName small { display:block; font-size:10px; letter-spacing:.24em; color:var(--cyan); font-weight:600; }
#roomDesc { position:absolute; left:12px; right:12px; bottom:10px; z-index:20; font-size:12px;
  color:#c9cde6; text-shadow:0 1px 6px #000; background:linear-gradient(0deg,#05060cdd,#05060c00);
  padding:14px 10px 4px; pointer-events:none; }
#hint { position:absolute; right:12px; top:10px; z-index:20; font-size:11px; color:var(--mut);
  font-family:var(--mono); text-align:right; text-shadow:0 1px 4px #000; }

#right { grid-area:right; }
#right .body { padding:8px; }
.ent { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--r-s);
  border:1px solid transparent; cursor:pointer; }
.ent:hover { border-color:var(--line2); background:#0d0e18; }
.ent .spr { width:30px; height:30px; flex:none; image-rendering:pixelated; border-radius:5px; background:#0b0c15; border:1px solid var(--line); }
.ent .nm { flex:1; min-width:0; }
.ent .nm b { display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ent .nm span { font-size:10px; color:var(--dim); }
.ent .act { font-size:10px; padding:.25em .5em; border-radius:5px; background:#0b0c15; border:1px solid var(--line2); color:var(--cyan); }
.ent.hostile .nm b { color:var(--red); }
.ent.boss .nm b { color:var(--yel); }
.ent .hpm { height:3px; border-radius:2px; background:#2a0f16; margin-top:3px; overflow:hidden; }
.ent .hpm i { display:block; height:100%; background:var(--red); }
.sect { font-size:9px; letter-spacing:.2em; color:var(--dim); text-transform:uppercase; margin:10px 6px 4px; }

#log { grid-area:log; }
#logBody { padding:8px 12px; height:calc(100% - 42px); overflow-y:auto; font-family:var(--mono);
  font-size:12.5px; line-height:1.5; }
#logBody div { white-space:pre-wrap; word-break:break-word; }
#cmdRow { display:flex; gap:8px; padding:8px; border-top:1px solid var(--line); }
#cmdRow input { flex:1; background:#0b0c15; border:1px solid var(--line2); border-radius:var(--r-s);
  padding:.55em .8em; color:var(--ink); font-family:var(--mono); }
#cmdRow input:focus { outline:none; border-color:var(--cyan-d); }

/* minimap */
#mapWrap canvas { width:100%; display:block; image-rendering:pixelated; border-radius:var(--r-s); background:#05060c; }
.qbox { margin-top:12px; }
.qbox .q { border:1px solid var(--line); border-radius:var(--r-s); padding:8px 10px; margin-bottom:8px; background:#0d0e18; }
.qbox .q b { font-size:12px; color:var(--vio); }
.qbox .q p { margin:4px 0 6px; font-size:11px; color:var(--mut); }
.qbox .q .pr { height:5px; border-radius:3px; background:#101322; overflow:hidden; }
.qbox .q .pr i { display:block; height:100%; background:var(--vio); }

/* modals */
.modal { position:absolute; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:#05060ccc; backdrop-filter:blur(3px); }
.modal .box { width:min(720px,94vw); max-height:86vh; overflow:auto;
  background:linear-gradient(180deg,var(--panel2),var(--panel)); border:1px solid var(--line2);
  border-radius:var(--r); box-shadow:0 40px 100px -30px #000; }
.modal .box h3 { margin:0; padding:14px 18px; font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal .box .body { padding:16px 18px; }
.modal .x { background:none; border:none; color:var(--mut); font-size:20px; line-height:1; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:10px; }
.slot { border:1px solid var(--line2); border-radius:var(--r-s); background:#0b0c15; padding:8px 6px;
  text-align:center; cursor:pointer; transition:.12s; }
.slot:hover { border-color:var(--cyan-d); box-shadow:0 0 14px -5px var(--cyan); }
.slot img,.slot canvas { width:44px; height:44px; image-rendering:pixelated; }
.slot .nm { font-size:10px; margin-top:4px; color:var(--ink); line-height:1.25; }
.slot .qn { font-size:10px; color:var(--yel); }
.slot.eq { border-color:var(--grn); }
.shoprow { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.shoprow .nm { flex:1; }
.shoprow .pr { font-family:var(--mono); color:var(--yel); }
.sheet { display:grid; grid-template-columns:1fr 1fr; gap:18px; font-family:var(--mono); font-size:12.5px; }
.sheet .k { color:var(--dim); }
.sheet b { color:var(--cyan); }
.statline { display:flex; justify-content:space-between; padding:3px 0; }
.statline .d { color:var(--grn); }

/* floating combat text handled on canvas; toast for level-ups */
#toast { position:absolute; left:50%; top:22%; transform:translateX(-50%); z-index:120;
  font-family:var(--mono); font-weight:800; font-size:22px; color:var(--yel);
  text-shadow:0 0 24px var(--yel),0 2px 8px #000; pointer-events:none; opacity:0; transition:opacity .3s; }
#toast.show { opacity:1; }

.loading { position:absolute; inset:0; display:grid; place-items:center; color:var(--mut); font-family:var(--mono); }

/* paper-doll wear/gear screen */
.doll { display:grid; grid-template-columns:120px 1fr 120px; gap:14px; align-items:start; }
.doll .dcol { display:flex; flex-direction:column; gap:8px; }
.doll .dmid { display:flex; flex-direction:column; align-items:center; gap:10px; }
.doll .dmid canvas { image-rendering:pixelated; background:radial-gradient(circle at 50% 35%,#1a2233,#0b0c15); border:1px solid var(--line2); border-radius:10px; }
.doll .dhand { display:flex; gap:8px; }
.dslot { position:relative; border:1px solid var(--line2); border-radius:var(--r-s); background:#0b0c15;
  min-height:58px; padding:16px 6px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.dslot.big { min-width:74px; }
.dslot.on { border-color:var(--grn); box-shadow:0 0 14px -6px var(--grn); cursor:pointer; }
.dslot.on:hover { border-color:var(--red); box-shadow:0 0 14px -4px var(--red); }
.dslot .dl { position:absolute; top:3px; left:0; right:0; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.dslot canvas { width:40px; height:40px; image-rendering:pixelated; }
.dslot .dn { font-size:9.5px; line-height:1.2; margin-top:3px; color:var(--ink); }
.dslot .de { color:#2a3050; font-size:18px; }
@media (max-width:640px){ .doll { grid-template-columns:1fr; } }

/* crafting-style inventory: sockets + backpack grid + detail panel */
.modal .box.wide { width:min(940px,96vw); }
.invx { display:grid; grid-template-columns:1fr 300px; gap:16px; align-items:start; }
.invx .sect { margin:12px 2px 5px; }
.invx .sect:first-child { margin-top:0; }
.ivbagh { display:flex; justify-content:space-between; align-items:baseline; }
.ivwt { font-family:var(--mono); font-size:10px; color:var(--yel); letter-spacing:0; }
.ivwbar { height:4px; border-radius:2px; background:#0b0c15; border:1px solid var(--line2); overflow:hidden; margin:0 2px 8px; }
.ivwbar i { display:block; height:100%; background:linear-gradient(90deg,var(--grn),var(--yel)); }
.ivsocks { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.ivbag { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; max-height:210px; overflow:auto; padding:2px; }
.ivslot { position:relative; aspect-ratio:1; border:1px solid var(--line2); border-radius:var(--r-s);
  background:#0b0c15; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:0; cursor:pointer; transition:border-color .1s, box-shadow .1s; }
.ivslot:not(.has) { cursor:default; }
.ivslot.has:hover { border-color:var(--cyan-d); box-shadow:0 0 14px -5px var(--cyan); }
.ivslot.sel { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan), 0 0 16px -4px var(--cyan); }
.ivslot canvas { width:82%; height:82%; image-rendering:pixelated; }
.ivslot canvas.ghost { opacity:.16; }
.ivslot.sock { aspect-ratio:auto; min-height:56px; padding-bottom:11px; }
.ivslot.sock.has { border-color:var(--grn); }
.ivslot .sl { position:absolute; bottom:2px; left:0; right:0; font-size:7.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); text-align:center; }
.ivslot .q { position:absolute; right:2px; bottom:2px; font-size:9px; font-family:var(--mono);
  color:var(--yel); background:#0b0c15cc; border-radius:3px; padding:0 2px; }
.ivslot .ill { position:absolute; left:2px; top:1px; font-size:10px; font-weight:800; color:var(--red); }
.ivdet { position:sticky; top:0; border:1px solid var(--line2); border-radius:var(--r);
  background:#0b0c15; padding:14px; min-height:220px; }
.ivhint { color:var(--dim); font-size:12px; }
.ivdh { display:flex; gap:12px; }
.ivbig { width:96px; height:96px; flex:none; image-rendering:pixelated; background:radial-gradient(circle at 50% 40%,#1a2233,#0b0c15);
  border:1px solid var(--line2); border-radius:8px; }
.ivdi { min-width:0; }
.ivdi b { font-size:14px; }
.ivmeta { font-size:10.5px; color:var(--dim); font-family:var(--mono); margin:3px 0 6px; }
.ivchips { display:flex; flex-wrap:wrap; gap:4px; }
.ivstats { font-family:var(--mono); font-size:11.5px; color:var(--cyan); margin:12px 0 6px; }
.ivdesc { font-size:12px; color:var(--mut); line-height:1.5; margin:0 0 12px; }
.ivacts { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.ivnote { font-size:10px; color:var(--dim); }
@media (max-width:720px){ .invx { grid-template-columns:1fr; } .ivdet { position:static; } }

/* item database viewer */
.dexwrap { max-width:1100px; margin:0 auto; padding:16px; }
.dexhead { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 0 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5; }
.dexhead .brand { font-size:20px; }
.dexhead .brand small { letter-spacing:.2em; }
.dexctl { display:flex; gap:8px; flex:1; flex-wrap:wrap; }
.dexctl input,.dexctl select { background:#0b0c15; border:1px solid var(--line2); border-radius:var(--r-s); padding:.5em .7em; color:var(--ink); font-family:var(--mono); }
.dexctl input { flex:1; min-width:180px; }
.dexgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; padding:16px 0 40px; }
.dexcard { display:flex; gap:12px; border:1px solid var(--line); border-radius:var(--r); background:linear-gradient(180deg,var(--panel2),var(--panel)); padding:12px; }
.dexcard.ill { border-color:#5a2030; }
.dexcard.leg { border-color:#7a6420; box-shadow:0 0 18px -8px var(--yel); }
.dexcard canvas { width:56px; height:56px; flex:none; image-rendering:pixelated; background:#0b0c15; border:1px solid var(--line); border-radius:6px; }
.dexcard .di { min-width:0; }
.dexcard .di b { font-size:13.5px; }
.dexcard .dm { font-size:10.5px; color:var(--dim); font-family:var(--mono); margin:2px 0; }
.dexcard .ds { font-size:11px; color:var(--cyan); font-family:var(--mono); margin-bottom:4px; }
.dexcard .di p { margin:0 0 6px; font-size:11.5px; color:var(--mut); line-height:1.4; }

/* sound / mixer popover */
.mix { position:absolute; right:8px; top:56px; z-index:130; width:230px; background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2); border-radius:var(--r); box-shadow:0 20px 60px -20px #000; padding:12px 14px; }
.mix h4 { margin:0 0 8px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }
.mix .mrow { display:flex; align-items:center; gap:8px; margin:8px 0; font-size:11px; }
.mix .mrow label { width:58px; color:var(--mut); }
.mix .mrow input[type=range] { flex:1; accent-color:var(--cyan); }
.mix .mrow .tog { margin-left:auto; }
.mix .seg { display:flex; gap:6px; margin-top:6px; }
.mix .seg button { flex:1; font-size:11px; padding:.35em; border:1px solid var(--line2); border-radius:6px; background:#0b0c15; color:var(--mut); }
.mix .seg button.on { border-color:var(--cyan-d); color:var(--cyan); }

/* SMS / online panel bits */
.sms-list { max-height:200px; overflow:auto; margin:6px 0; }
.sms-msg { padding:6px 10px; border-radius:8px; margin:4px 0; font-size:12px; max-width:80%; }
.sms-msg.them { background:#141a26; }
.sms-msg.me { background:#1a2438; margin-left:auto; text-align:right; }
.sms-msg .who { font-size:9px; color:var(--dim); display:block; }
.online-row { display:flex; align-items:center; gap:8px; padding:7px 8px; border:1px solid transparent; border-radius:var(--r-s); }
.online-row:hover { border-color:var(--line2); background:#0d0e18; }
.online-row .dot { width:7px; height:7px; border-radius:50%; background:var(--grn); box-shadow:0 0 6px var(--grn); flex:none; }
.online-row .oi { flex:1; min-width:0; }
.online-row .oi b { font-size:12.5px; }
.online-row .oi span { font-size:10px; color:var(--dim); }
.badge { position:absolute; top:-4px; right:-4px; min-width:15px; height:15px; padding:0 3px; border-radius:8px; background:var(--red); color:#fff; font-size:9px; font-weight:700; display:grid; place-items:center; }

/* loot modal */
.lootgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.lootcard { border:1px solid var(--line2); border-radius:var(--r-s); background:#0b0c15; padding:10px 8px; text-align:center; }
.lootcard canvas { width:46px; height:46px; image-rendering:pixelated; }
.lootcard .ln { font-size:10.5px; margin:4px 0 6px; line-height:1.2; min-height:2.4em; }

/* ---- world map / city atlas modal ---- */
.modal .box.mapbox { width:min(1280px,97vw); height:92vh; max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
.modal .box.mapbox .body { flex:1; padding:0; position:relative; overflow:hidden; }
.wm-wrap { position:absolute; inset:0; overflow:hidden; background:#05060c; }
.wm-canvas { position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:none; display:block; }
.wm-canvas.drag { cursor:grabbing; }

.wm-ctrls { position:absolute; top:12px; left:12px; display:flex; flex-direction:column; gap:6px; z-index:3; }
.wm-ctrls button { width:34px; height:34px; padding:0; font-size:15px; font-family:var(--mono); line-height:1;
  background:linear-gradient(180deg,var(--panel2),var(--panel)); color:var(--cyan);
  border:1px solid var(--line2); border-radius:var(--r-s); cursor:pointer; }
.wm-ctrls button:hover { border-color:var(--cyan-d); box-shadow:0 0 12px -4px var(--cyan); }

.wm-hud { position:absolute; top:12px; left:0; right:0; text-align:center; z-index:2; pointer-events:none;
  font-family:var(--mono); font-size:12px; letter-spacing:.12em; color:var(--mut); text-transform:uppercase; }
.wm-hud b { color:var(--ink); }
.wm-hud span { color:var(--dim); }

.wm-legend { position:absolute; bottom:12px; right:14px; z-index:2; display:flex; gap:12px; flex-wrap:wrap;
  font-family:var(--mono); font-size:10px; color:var(--mut); background:#0b0c15cc;
  border:1px solid var(--line2); border-radius:var(--r-s); padding:6px 10px; }
.wm-legend span { display:flex; align-items:center; gap:5px; }
.wm-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.wm-legend i.o { background:transparent; border:1px solid rgba(170,200,240,.6); }
.wm-legend i.f { background:rgba(120,140,190,.28); }

.wm-zones { position:absolute; bottom:12px; left:12px; z-index:3; width:220px;
  background:#0b0c15e6; border:1px solid var(--line2); border-radius:var(--r-s); overflow:hidden;
  font-family:var(--mono); }
.wm-zones-hd { padding:8px 10px; font-size:11px; letter-spacing:.16em; color:var(--cyan);
  cursor:pointer; border-bottom:1px solid var(--line); background:#0d0e18; }
.wm-zones.collapsed .wm-zones-list { display:none; }
.wm-zones-list { max-height:38vh; overflow:auto; }
.wm-zrow { display:flex; align-items:center; gap:8px; width:100%; padding:7px 10px; background:none;
  border:0; border-bottom:1px solid var(--line); color:var(--ink); font:inherit; font-size:11px;
  text-align:left; cursor:pointer; }
.wm-zrow:hover { background:#141a26; }
.wm-zrow i { width:9px; height:9px; border-radius:2px; flex:none; }
.wm-zrow span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wm-zrow em { color:var(--dim); font-style:normal; font-size:10px; }

.wm-inspect { position:absolute; top:0; right:0; width:310px; height:100%; z-index:4;
  background:#0b0c15f2; border-left:1px solid var(--line2); padding:16px 16px 20px; overflow:auto;
  font-family:var(--mono); }
.wm-inspect .wm-x { position:absolute; top:8px; right:10px; background:none; border:0; color:var(--mut); font-size:20px; cursor:pointer; }
.wm-i-name { font-size:15px; font-weight:700; color:var(--ink); padding-right:20px; }
.wm-i-zone { font-size:11px; margin:3px 0 10px; }
.wm-here { color:var(--red); border:1px solid var(--red-d); border-radius:999px; padding:1px 6px; font-size:9px; }
.wm-inset { width:100%; height:auto; background:#05060c; border:1px solid var(--line2); border-radius:var(--r-s); cursor:pointer; }
.wm-i-badges { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.wm-i-badges span { font-size:10px; color:var(--yel); border:1px solid var(--line2); border-radius:999px; padding:2px 8px; }
.wm-i-hd { font-size:10px; letter-spacing:.16em; color:var(--dim); text-transform:uppercase; margin:12px 0 6px; }
.wm-i-exits { list-style:none; margin:0; padding:0; }
.wm-i-exits li { display:flex; gap:8px; padding:5px 0; border-bottom:1px solid var(--line); font-size:11.5px; }
.wm-i-exits li b { color:var(--cyan); min-width:34px; }
.wm-i-exits li span { color:var(--mut); }
.wm-i-exits li.none { color:var(--dim); border:0; }

.wm-msg { position:absolute; inset:0; display:grid; place-items:center; z-index:5;
  font-family:var(--mono); font-size:13px; color:var(--dim); pointer-events:none; }