/* Gamified Agent HQ (showcase). Lightweight: SVG + CSS + vanilla JS. */
body.hqp{overflow-x:hidden}
.hqwrap{position:relative;margin:0 auto}
.hqbox{position:relative;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:
 radial-gradient(900px 500px at 70% 40%,#4fc3ff12,transparent 60%),radial-gradient(700px 400px at 15% 80%,#5be04a10,transparent 60%),
 linear-gradient(#4fc3ff0a 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#4fc3ff0a 1px,transparent 1px) 0 0/28px 28px,#0a0f1f;box-shadow:4px 4px 0 var(--lime2)}
.stage{position:absolute;left:0;top:0;transform-origin:0 0}
.stage svg.edges{position:absolute;inset:0;overflow:visible}
.edge{fill:none;stroke:#2a3a66;stroke-width:3;stroke-dasharray:2 7;stroke-linecap:round}
.edge.hot{stroke:#5be04a;stroke-opacity:.9;filter:drop-shadow(0 0 4px #5be04a)}
.edge.hotr{stroke:#ff5d6c;filter:drop-shadow(0 0 4px #ff5d6c)}
.edge.hotp{stroke:#b48cff;filter:drop-shadow(0 0 4px #b48cff)}
.edge.hotc{stroke:#4fc3ff;filter:drop-shadow(0 0 4px #4fc3ff)}
.pk{filter:drop-shadow(0 0 6px currentColor)}
.lane{position:absolute;font:9px var(--px);color:#8f97ad88;letter-spacing:.12em}
.zone{position:absolute;border:1.5px dashed #ffffff12;border-radius:16px}
/* nodes */
.nd{position:absolute;width:0;height:0;cursor:pointer}
.nd .bd{position:absolute;left:-46px;top:-52px;width:92px;display:flex;flex-direction:column;align-items:center}
.nd .sp{width:72px;height:72px;animation:bob 2.6s ease-in-out infinite;position:relative}
.nd .sp svg{width:100%;height:100%;display:block;filter:drop-shadow(0 4px 0 #00000080)}
.nd .ring{position:absolute;left:50%;top:30px;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;border:2px solid var(--c,#5be04a);opacity:0;pointer-events:none}
.nd.talk .ring{animation:pulse 1.1s ease-out infinite}
.nd.glow .sp svg{filter:drop-shadow(0 0 10px var(--c,#5be04a)) drop-shadow(0 0 22px var(--c,#5be04a))}
.nd .pl{margin-top:4px;background:#0b1020;border:1.5px solid var(--c,#5be04a);border-radius:7px;padding:3px 7px 4px;text-align:center;min-width:84px;box-shadow:2px 2px 0 #000}
.nd .pl b{display:block;font:7.5px var(--px);color:var(--cream);white-space:nowrap;letter-spacing:.02em}
.nd .xp{display:flex;align-items:center;gap:4px;margin-top:3px}
.nd .xp i{font:6px var(--px);font-style:normal;color:var(--c,#5be04a);white-space:nowrap}
.nd .xp s{flex:1;height:3px;background:#1b2748;border-radius:2px;overflow:hidden;display:block;text-decoration:none}
.nd .xp s u{display:block;height:100%;background:var(--c,#5be04a);transition:width .5s}
.nd:hover .pl,.nd.sel .pl{background:#141e3b}
.nd.book .bd{width:118px;left:-59px;top:-40px}
.nd.book .sp{width:60px;height:60px}
.nd.book .pl{min-width:112px}
.nd.book .pnl{font:9px var(--px);margin-top:3px;display:block}
.nd.jev .sp{width:68px;height:68px}
.float{position:absolute;font:11px var(--px);pointer-events:none;animation:floatup 1.6s ease-out forwards;text-shadow:2px 2px 0 #000;white-space:nowrap}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pulse{0%{opacity:.9;transform:scale(.7)}100%{opacity:0;transform:scale(1.5)}}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,0)}15%{opacity:1}100%{opacity:0;transform:translate(-50%,-46px)}}
@keyframes blink{0%,92%,100%{opacity:1}95%{opacity:.1}}
.eye{animation:blink 4s infinite}
/* speech bubbles */
.bub{position:absolute;transform:translate(-50%,-100%);max-width:270px;background:var(--cream);color:var(--navy);font:600 13px/1.35 var(--ui);padding:8px 11px;border-radius:10px;box-shadow:3px 3px 0 #000;pointer-events:none;animation:pop .22s ease-out;z-index:5}
.bub:after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-6px;border:6px solid transparent;border-top-color:var(--cream);border-bottom:0}
.bub b{font:7.5px var(--px);display:block;margin-bottom:3px;color:var(--c,#1f6a19)}
.bub.out{animation:fade .3s forwards}
@keyframes pop{0%{transform:translate(-50%,-90%) scale(.6);opacity:0}100%{transform:translate(-50%,-100%) scale(1);opacity:1}}
@keyframes fade{to{opacity:0;transform:translate(-50%,-110%)}}
/* HUD */
.hud{position:absolute;left:14px;right:14px;top:12px;display:flex;gap:10px;align-items:stretch;z-index:20;pointer-events:none}
.hud>div{background:#0b1020e6;border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;backdrop-filter:blur(6px);box-shadow:2px 2px 0 #000}
.hud .lg img{height:30px;display:block}
.hud .lbl{font-size:8px}
.hud .pv{font:18px var(--px);margin-top:4px;white-space:nowrap}
.hud .pv.sm{font-size:13px}
.hud .mini{display:flex;gap:3px;margin-top:6px}.hud .mini i{width:12px;height:12px;border-radius:3px;background:var(--navy3)}
.hud .mini i.w{background:var(--lime)}.hud .mini i.l{background:var(--red)}.hud .mini i.t{outline:2px solid var(--cream);outline-offset:1px}
.hud .lvl{min-width:170px}.hud .lvl .bar{height:6px;border-radius:9px;background:var(--navy3);margin-top:6px;overflow:hidden}.hud .lvl .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--lime),var(--glow));transition:width .4s}
.hud .src{margin-left:auto;display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end}
.tick-up{animation:tku .6s}.tick-dn{animation:tkd .6s}
@keyframes tku{0%{text-shadow:0 0 0 #5be04a}40%{text-shadow:0 0 16px #5be04a;transform:scale(1.06)}}
@keyframes tkd{0%{}40%{text-shadow:0 0 16px #ff5d6c;transform:scale(1.06)}}
/* chat log */
.log{position:absolute;left:14px;bottom:12px;width:430px;z-index:15;background:#0b1020e0;border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;font-size:12px;box-shadow:2px 2px 0 #000;pointer-events:none}
.log .lh{font:8px var(--px);color:var(--mut);margin-bottom:5px;display:flex;justify-content:space-between}
.log .ln{display:flex;gap:8px;padding:2.5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:pop2 .3s}
.log .ln b{font:7.5px var(--px);padding-top:2px;flex:none}
.log .ln span{overflow:hidden;text-overflow:ellipsis;color:var(--cream2)}
@keyframes pop2{from{opacity:0;transform:translateY(6px)}}
/* toasts */
.toasts{position:absolute;right:14px;top:92px;z-index:30;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{max-width:440px;display:flex;align-items:center;gap:10px;background:linear-gradient(90deg,#173d13,#0b1020);border:2px solid var(--lime);border-radius:12px;padding:9px 14px 9px 10px;box-shadow:3px 3px 0 #000,0 0 24px #5be04a55;animation:tin .4s cubic-bezier(.2,1.4,.4,1);min-width:260px}
.toast .ic{width:34px;height:34px;border-radius:9px;background:var(--lime);display:grid;place-items:center;font-size:18px;box-shadow:inset 0 -3px 0 #3fb833}
.toast b{display:block;font:8px var(--px);color:var(--lime);margin-bottom:3px}.toast span{font:600 13px var(--ui)}
.toast.gold{border-color:var(--amber);background:linear-gradient(90deg,#4a3a10,#0b1020);box-shadow:3px 3px 0 #000,0 0 24px #ffc23d55}.toast.gold .ic{background:var(--amber);box-shadow:inset 0 -3px 0 #b8862a}.toast.gold b{color:var(--amber)}
.toast.purple{border-color:var(--purple);background:linear-gradient(90deg,#2d1a5c,#0b1020)}.toast.purple .ic{background:var(--purple)}.toast.purple b{color:var(--purple)}
.toast.out{animation:tout .4s forwards}
@keyframes tin{from{transform:translateX(120%);opacity:0}}
@keyframes tout{to{transform:translateX(120%);opacity:0}}
/* node card */
.ncard{position:absolute;z-index:40;width:320px;background:linear-gradient(180deg,#141e3b,#0b1020);border:2px solid var(--c,#5be04a);border-radius:16px;padding:16px;box-shadow:4px 4px 0 #000,0 20px 50px #000a;animation:pop3 .2s}
@keyframes pop3{from{transform:scale(.92);opacity:0}}
.ncard .h{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.ncard .h .sp{width:58px;height:58px;flex:none;background:#0a0f1f;border-radius:12px;border:1px solid var(--line);padding:4px}
.ncard .h .sp svg{width:100%;height:100%}
.ncard .h b{font:11px var(--px);display:block}.ncard .h small{color:var(--mut);font-size:12px}
.ncard .lv{display:flex;justify-content:space-between;font:8px var(--px);color:var(--c,#5be04a);margin-bottom:5px}
.ncard .xb{height:7px;border-radius:9px;background:var(--navy3);overflow:hidden;margin-bottom:12px}.ncard .xb i{display:block;height:100%;background:var(--c,#5be04a)}
.ncard .kv{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.ncard .kv div{background:#0a0f1f;border:1px solid var(--line);border-radius:9px;padding:7px 9px}
.ncard .kv i{display:block;font:7px var(--px);font-style:normal;color:var(--mut);margin-bottom:4px}.ncard .kv b{font:600 13px var(--ui)}
.ncard .msgs{font-size:12px;color:var(--cream2);max-height:150px;overflow:hidden}
.ncard .msgs div{padding:5px 0;border-top:1px solid var(--line)}
.ncard .msgs div time{font:9px var(--sk);color:var(--mut);margin-right:6px}
.ncard .x{position:absolute;right:12px;top:10px;font:10px var(--px);color:var(--mut);cursor:pointer;pointer-events:auto}
.ncard .h3{font:8px var(--px);color:var(--mut);margin-bottom:4px}
.sheetbg{display:none}
/* title row (normal desktop) */
.hqhead{display:flex;align-items:center;gap:14px;margin:18px 0 14px}
.hqhead img{width:46px;height:46px}
.hqhead h1{font:18px var(--px);margin:0;text-shadow:2px 2px 0 var(--lime2)}
.hqhead p{margin:3px 0 0;color:var(--cream2);font-size:13px}
.hqhead .r{margin-left:auto;display:flex;gap:8px}
.hint2{color:var(--mut);font-size:12px;text-align:center;margin:10px 0 0}
/* demo mode: map only, full screen */
body.demo{overflow:hidden;background:#0a0f1f}
body.demo .nav,body.demo footer,body.demo .hqhead,body.demo .hint2{display:none!important}
body.demo .hqwrap{position:fixed;inset:0;margin:0;max-width:none!important;padding:0!important}
body.demo .hqbox{position:absolute;inset:0;border:0;border-radius:0;box-shadow:none}
/* mobile */
body.mob .hqwrap{padding:0}
body.mob .hqhead{margin:12px 14px 10px}
body.mob .hqhead h1{font-size:14px}body.mob .hqhead p{display:none}body.mob .hqhead .r{display:none}body.mob .hqhead img{width:34px;height:34px}
body.mob .hqbox{border-radius:0;border-left:0;border-right:0;box-shadow:none}
body.mob .hud{position:sticky;top:56px;left:0;right:0;margin:0;padding:8px 10px;gap:6px;background:#0a0f1fee;border-bottom:1.5px solid var(--line);flex-wrap:nowrap}
body.mob .hud>div{padding:6px 8px;border-radius:9px;flex:1;min-width:0}
body.mob .hud .pv{font-size:13px}body.mob .hud .pv.sm{font-size:10px}
body.mob .hud .lg,body.mob .hud .src,body.mob .hud .hide-m{display:none}
body.mob .hud .lvl{min-width:0}
body.mob .log{position:sticky;top:118px;left:0;width:auto;margin:0;border-radius:0;border-left:0;border-right:0;padding:6px 12px;z-index:19}
body.mob .log .lh{display:none}body.mob .log .ln:nth-child(n+3){display:none}
body.mob .toasts{position:fixed;left:12px;right:12px;top:auto;bottom:18px;align-items:stretch}
body.mob .toast{min-width:0}
body.mob .ncard{position:fixed;left:0;right:0;bottom:0;top:auto!important;width:auto;border-radius:20px 20px 0 0;border-width:2px 0 0;padding:18px 18px 28px;animation:sheet .28s cubic-bezier(.2,.9,.3,1)}
body.mob .ncard:before{content:"";display:block;width:44px;height:5px;border-radius:9px;background:#ffffff33;margin:-6px auto 12px}
body.mob .sheetbg.on{display:block;position:fixed;inset:0;background:#000a;z-index:39}
@keyframes sheet{from{transform:translateY(100%)}}
body.mob .bub{max-width:190px;font-size:11px}
body.demo.mob{overflow:auto}
body.demo.mob .hqwrap{position:relative;inset:auto}
body.demo.mob .hqbox{position:relative;inset:auto}
body.mob #hqouter{padding:0!important}
body.demo.mob .hud{top:0}body.demo.mob .log{top:62px}
body.mob .hud .pv .x2{display:none}
body.mob .hud .pv{font-size:12px}
/* eye glow flicker (chibi robots) */
@keyframes eyefl{0%,38%,44%,90%,100%{opacity:1}40%{opacity:.55}42%{opacity:.9}94%{opacity:.08}}
.eye{animation:eyefl 4.2s steps(1,end) infinite}
.nd:nth-of-type(3n) .eye{animation-duration:3.4s;animation-delay:-1.1s}
.nd:nth-of-type(3n+1) .eye{animation-duration:5.1s;animation-delay:-2.3s}
.nd .sp svg rect.eye{filter:drop-shadow(0 0 .6px currentColor)}