/* ============================================================================
   World Conquer 5187 — modular command HUD (magnificent skin, 1:1 backend)
   Scoped entirely under #nhud. Replaces the old #hud bottom bar; keeps the
   top nav, minimap, player nameplate and chat-log which live outside #hud.
   ========================================================================== */
:root{
  --nh-jade:#00f5ff; --nh-jade2:#12c7d6; --nh-jade-deep:#0a7d86;
  --nh-gold:#ffcf5a; --nh-gold-deep:#b8862b; --nh-blood:#ff4a5a;
  --nh-ink:#d2dde6; --nh-dim:#8393a0; --nh-faint:#556472;
  --nh-brd:rgba(120,190,210,.18); --nh-brd2:rgba(120,190,210,.30);
  --nh-hair:rgba(0,245,255,.45);
  --nh-panel:linear-gradient(180deg, rgba(21,31,40,.90), rgba(8,12,17,.94));
  --nh-hp:#ff4a5a; --nh-mp:#3fb6ff; --nh-xp:#4be08a;
  --nh-q-refined:#37e65f; --nh-q-unique:#49a2ff; --nh-q-elite:#c65cff; --nh-q-super:#ff4a38;
  --nh-slot:56px; --nh-gap:9px; --nh-r:13px;
  --nh-fh:'Bahnschrift','DIN Alternate','Oswald','Arial Narrow','Segoe UI',system-ui,sans-serif;
  --nh-fb:'Segoe UI',system-ui,-apple-system,sans-serif;
  --nh-fm:'Consolas',ui-monospace,'SF Mono',monospace;
}

/* hide the legacy HUD bar (its update fns still run harmlessly into hidden nodes) */
#hud{ display:none !important; }
/* the modular PK sigil now carries the live mode, so drop the legacy corner badge */
#pkind{ display:none !important; }
/* legacy skill popup + emote/option panels float above the new console */
#skillbar{ bottom:176px !important; }

/* z-index 11: above the world canvas, chat-log (8) and hint (10), but BELOW every
   interactive popup — inv(12), skillbar(12), warehouse(13), npcdlg(14), status(15),
   scope(16), shop(41), buyqty(70) — so shop/dialog/inventory windows layer on top. */
#nhud{ position:fixed; inset:0; z-index:11; pointer-events:none; font-family:var(--nh-fb); }
#nhud *{ box-sizing:border-box; }
#nhud .deck{
  background:var(--nh-panel); border:1px solid var(--nh-brd); border-radius:16px;
  box-shadow:0 -2px 0 rgba(0,245,255,.08) inset, 0 12px 34px rgba(0,0,0,.55), 0 0 26px rgba(0,180,200,.05);
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); position:relative; pointer-events:auto;
}
#nhud .deck::before{ content:""; position:absolute; left:14px; right:14px; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,var(--nh-hair),transparent); opacity:.8; }

/* ── vitals (bottom-left) ─────────────────────────────────────────────── */
#nhud .nh-vitals{ position:absolute; left:16px; bottom:14px; display:flex; align-items:flex-end; gap:13px; padding:11px 15px 12px; }
#nhud .nh-orb{ position:relative; width:74px; height:74px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 38% 32%, #1a3038, #0a141a 70%); border:1px solid var(--nh-brd2);
  box-shadow:inset 0 0 16px rgba(0,0,0,.7), 0 0 20px rgba(0,245,255,.12); display:grid; place-items:center; }
#nhud .nh-orb .rng{ position:absolute; inset:-4px; border-radius:50%;
  background:conic-gradient(var(--nh-hp) calc(var(--p,1)*360deg), rgba(255,74,90,.12) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent 60%, #000 62%);
  mask:radial-gradient(farthest-side, transparent 60%, #000 62%); filter:drop-shadow(0 0 6px rgba(255,74,90,.5)); }
/* STAMINA ring — yellow, sits OUTSIDE the red HP ring and encircles the orb (attrib 8, 0-100). */
#nhud .nh-orb .sta{ position:absolute; inset:-10px; border-radius:50%;
  background:conic-gradient(#ffc63a calc(var(--s,1)*360deg), rgba(255,198,58,.10) 0);
  -webkit-mask:radial-gradient(farthest-side, transparent 72%, #000 74%);
  mask:radial-gradient(farthest-side, transparent 72%, #000 74%); filter:drop-shadow(0 0 6px rgba(255,198,58,.55)); }
#nhud .nh-orb .face{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--nh-jade);
  background:radial-gradient(circle at 40% 30%, #14262e, #08121a); }
#nhud .nh-orb .face svg{ width:28px; height:28px; opacity:.9; }
#nhud .nh-orb .lv{ position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); font-family:var(--nh-fh);
  font-size:11px; font-weight:600; letter-spacing:1px; color:#0a1014;
  background:linear-gradient(180deg,var(--nh-gold),var(--nh-gold-deep)); padding:1px 9px; border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.5); }
#nhud .nh-bars{ display:flex; flex-direction:column; gap:7px; width:168px; padding-bottom:3px; }
#nhud .nh-bar{ position:relative; height:16px; border-radius:8px; background:rgba(0,0,0,.5); border:1px solid var(--nh-brd); overflow:hidden; }
#nhud .nh-bar > i{ position:absolute; inset:0; transform-origin:left; border-radius:inherit;
  background:linear-gradient(180deg, color-mix(in srgb, var(--c) 85%, #fff 15%), var(--c));
  box-shadow:0 0 12px var(--c); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
#nhud .nh-bar > span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 8px; font-family:var(--nh-fm); font-size:10.5px; font-variant-numeric:tabular-nums; color:#eaf3f6;
  text-shadow:0 1px 2px #000; letter-spacing:.3px; }
#nhud .nh-bar .tag{ color:rgba(255,255,255,.72); font-family:var(--nh-fh); letter-spacing:1px; }
#nhud .nh-bar.hp{ --c:var(--nh-hp); } #nhud .nh-bar.mp{ --c:var(--nh-mp); } #nhud .nh-bar.xp{ --c:var(--nh-xp); height:11px; }
#nhud .nh-bar.xp > span{ font-size:9px; }

/* ── hotbar (bottom-center) ───────────────────────────────────────────── */
#nhud .nh-center{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:7px; pointer-events:none; }
#nhud .nh-chat{ display:flex; align-items:center; gap:8px; pointer-events:auto; padding:5px 8px; border-radius:11px;
  background:linear-gradient(180deg, rgba(16,24,31,.8), rgba(8,12,17,.85)); border:1px solid var(--nh-brd);
  width:min(640px,64vw); }
#nhud .nh-talk{ font-family:var(--nh-fh); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#0a1014;
  background:linear-gradient(180deg,var(--nh-gold),var(--nh-gold-deep)); padding:3px 12px; border-radius:8px; cursor:pointer;
  flex:none; user-select:none; }
#nhud .nh-chatin{ flex:1; min-height:20px; padding:2px 8px; color:#eaf3f6; font-size:13px; outline:none;
  border-radius:7px; background:rgba(0,0,0,.28); border:1px solid transparent; }
#nhud .nh-chatin:focus{ border-color:var(--nh-jade); background:rgba(0,0,0,.45); }
#nhud .nh-chatin:empty::before{ content:'Press Enter to chat…'; color:var(--nh-faint); }

#nhud .nh-hotbar{ pointer-events:auto; padding:12px 15px 13px; display:flex; flex-direction:column; gap:8px; align-items:center; }
#nhud .nh-row{ display:flex; gap:var(--nh-gap); }
#nhud .nh-slot{ position:relative; width:var(--nh-slot); height:var(--nh-slot); border-radius:var(--nh-r);
  background:linear-gradient(160deg,#12202a,#0a141b 70%); border:1px solid var(--nh-brd2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -10px 16px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.4);
  cursor:pointer; user-select:none; outline:none;
  transition:transform .16s cubic-bezier(.2,1.3,.4,1), border-color .16s, box-shadow .16s; }
#nhud .nh-slot::before{ content:""; position:absolute; inset:-2px; border-radius:inherit; pointer-events:none; opacity:0;
  box-shadow:0 0 0 1px var(--q,transparent), 0 0 14px var(--q,transparent); transition:opacity .2s; }
#nhud .nh-slot[data-q]::before{ opacity:.9; }
#nhud .nh-slot .art{ position:absolute; inset:0; display:grid; place-items:center; color:var(--c,#bfeef4); }
#nhud .nh-slot .art svg{ width:32px; height:32px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)) drop-shadow(0 0 5px var(--c,transparent)); }
#nhud .nh-slot .art img{ width:40px; height:40px; object-fit:contain; image-rendering:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)); }
#nhud .nh-slot .key{ position:absolute; top:3px; left:4px; font-family:var(--nh-fh); font-size:11px; font-weight:600;
  color:#0a1014; background:linear-gradient(180deg,#cfe0e6,#8ba4ad); padding:0 5px; border-radius:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.5); line-height:16px; min-width:16px; text-align:center; }
#nhud .nh-slot .fn{ position:absolute; top:3px; right:5px; font-family:var(--nh-fh); font-size:9px; color:var(--nh-faint); font-weight:600; }
#nhud .nh-slot .qty{ position:absolute; bottom:2px; right:5px; font-family:var(--nh-fm); font-size:11px; font-weight:700;
  color:#eaf3f6; text-shadow:0 1px 3px #000,0 0 3px #000; font-variant-numeric:tabular-nums; }
#nhud .nh-slot .cd{ position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:conic-gradient(rgba(3,6,9,.74) var(--cd,0deg), transparent 0); opacity:0; transition:opacity .15s; }
#nhud .nh-slot .cdn{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--nh-fh); font-size:18px;
  font-weight:600; color:#eaf3f6; text-shadow:0 1px 4px #000; opacity:0; font-variant-numeric:tabular-nums; }
#nhud .nh-slot.cooling .cd, #nhud .nh-slot.cooling .cdn{ opacity:1; }
#nhud .nh-slot.cooling .art{ opacity:.4; }
#nhud .nh-slot:hover{ transform:translateY(-5px) scale(1.06); border-color:var(--nh-jade);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 22px rgba(0,245,255,.4), 0 10px 20px rgba(0,0,0,.5); }
#nhud .nh-slot:focus-visible{ border-color:var(--nh-jade); box-shadow:0 0 0 2px rgba(0,245,255,.6); }
#nhud .nh-slot.sel{ border-color:var(--nh-gold); box-shadow:inset 0 0 12px rgba(255,207,90,.25), 0 0 16px rgba(255,207,90,.35); }
#nhud .nh-slot.fire{ animation:nh-fire .42s cubic-bezier(.2,.9,.2,1); }
@keyframes nh-fire{ 0%{transform:scale(.9)} 40%{transform:scale(1.14); border-color:var(--nh-gold); box-shadow:0 0 30px var(--c,var(--nh-gold))} 100%{transform:scale(1)} }
#nhud .nh-slot.deny{ animation:nh-deny .3s; }
@keyframes nh-deny{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
#nhud .nh-slot.empty{ background:repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 6px, transparent 6px 12px), #0a1319;
  border-style:dashed; border-color:rgba(120,190,210,.18); }
#nhud .nh-slot.empty .art{ opacity:.14; }
#nhud .nh-slot.drop{ border-color:var(--nh-jade); box-shadow:0 0 20px rgba(0,245,255,.5); }
#nhud .nh-slot.drag{ opacity:.35; }
#nhud .nh-assign{ display:flex; align-items:center; gap:8px; background:none; border:1px solid var(--nh-brd);
  color:var(--nh-jade2); font-family:var(--nh-fh); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  padding:4px 14px; border-radius:8px; cursor:pointer; transition:.16s; }
#nhud .nh-assign:hover{ border-color:var(--nh-jade); color:var(--nh-jade); box-shadow:0 0 12px rgba(0,245,255,.25); }
#nhud .nh-assign svg{ width:12px; height:12px; }

/* action-log ticker (above hotbar) */
#nhud .nh-ticker{ position:absolute; left:50%; bottom:calc(100% + 6px); transform:translateX(-50%);
  display:flex; flex-direction:column-reverse; gap:4px; align-items:center; pointer-events:none; width:max-content; }
#nhud .nh-tick{ font-family:var(--nh-fm); font-size:12px; color:#bfe9ef; background:rgba(6,12,17,.72);
  border:1px solid var(--nh-brd); border-left:2px solid var(--nh-jade); padding:3px 12px; border-radius:6px;
  text-shadow:0 1px 2px #000; animation:nh-tin .3s both; }
#nhud .nh-tick b{ color:var(--c,var(--nh-gold)); font-weight:700; }
@keyframes nh-tin{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

/* ── command sigils (bottom-right) ────────────────────────────────────── */
#nhud .nh-sigils{ position:absolute; right:16px; bottom:14px; padding:11px 13px;
  display:grid; grid-template-columns:repeat(5,auto); gap:8px; }
#nhud .nh-sig{ position:relative; width:44px; height:44px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(160deg,#111d26,#0a141b); border:1px solid var(--nh-brd2); color:#a9c7ce; cursor:pointer;
  transition:.16s; outline:none; }
#nhud .nh-sig svg{ width:21px; height:21px; }
#nhud .nh-sig:hover{ color:var(--nh-jade); border-color:var(--nh-jade); transform:translateY(-2px); box-shadow:0 0 16px rgba(0,245,255,.3); }
#nhud .nh-sig:focus-visible{ box-shadow:0 0 0 2px rgba(0,245,255,.6); }
/* Sigil TOOLTIP — the icons alone are hard to read, so the label is a proper floating tooltip that
   rises above the button on hover (gold-accent glass + arrow), matching the notice styling. */
#nhud .nh-sig .lab{ position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px) scale(.96);
  font-family:var(--nh-fh); font-size:11px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  color:#ffe6b8; white-space:nowrap; opacity:0; pointer-events:none; z-index:40;
  padding:5px 10px; border-radius:8px; background:linear-gradient(180deg,rgba(30,22,8,.97),rgba(12,16,24,.97));
  border:1px solid rgba(255,182,72,.5); box-shadow:0 6px 18px rgba(0,0,0,.6), 0 0 14px rgba(255,170,60,.22);
  text-shadow:0 1px 2px rgba(0,0,0,.9); transition:opacity .14s ease, transform .14s cubic-bezier(.2,.9,.3,1.4); }
#nhud .nh-sig .lab::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:rgba(255,182,72,.5); }
#nhud .nh-sig:hover .lab, #nhud .nh-sig:focus-visible .lab{ opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
#nhud .nh-sig.pk{ border-color:color-mix(in srgb,var(--pkc) 55%, var(--nh-brd2)); color:var(--pkc); }
#nhud .nh-sig.pk::after{ content:attr(data-mode); position:absolute; top:-7px; right:-6px; font-family:var(--nh-fh);
  font-size:8px; font-weight:600; letter-spacing:.5px; padding:1px 5px; border-radius:6px; color:#070c0f;
  background:var(--pkc); box-shadow:0 1px 4px rgba(0,0,0,.5); text-transform:uppercase; white-space:nowrap; }

/* ── tooltip ──────────────────────────────────────────────────────────── */
#nhud .nh-tip{ position:fixed; z-index:40; min-width:180px; max-width:250px; padding:11px 13px; border-radius:11px;
  background:linear-gradient(180deg, rgba(13,20,27,.98), rgba(8,12,17,.98)); border:1px solid var(--nh-brd2);
  box-shadow:0 12px 34px rgba(0,0,0,.6), 0 0 22px rgba(0,180,200,.12); pointer-events:none; opacity:0;
  transform:translateY(6px); transition:opacity .12s, transform .12s; }
#nhud .nh-tip.on{ opacity:1; transform:none; }
#nhud .nh-tip .h{ display:flex; align-items:center; gap:8px; margin-bottom:5px; }
#nhud .nh-tip .h svg{ width:20px; height:20px; color:var(--c,var(--nh-jade)); flex:none; }
#nhud .nh-tip .h img{ width:22px; height:22px; flex:none; }
#nhud .nh-tip .nm{ font-family:var(--nh-fh); font-size:15px; letter-spacing:.4px; color:#eaf6fa; }
#nhud .nh-tip .kind{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:var(--c,var(--nh-jade2)); }
#nhud .nh-tip .d{ font-size:12px; color:var(--nh-dim); line-height:1.45; margin-top:4px; }
#nhud .nh-tip .meta{ display:flex; gap:12px; margin-top:8px; padding-top:8px; border-top:1px solid var(--nh-brd);
  font-family:var(--nh-fm); font-size:11px; color:var(--nh-ink); }
#nhud .nh-tip .meta b{ color:var(--nh-jade); } #nhud .nh-tip .meta .k{ color:var(--nh-faint); }

/* ── assign drawer ────────────────────────────────────────────────────── */
#nhud .nh-drawer{ position:absolute; left:50%; bottom:200px; transform:translate(-50%,20px); width:min(680px,92vw);
  background:linear-gradient(180deg, rgba(21,31,40,.94), rgba(8,12,17,.97)); border:1px solid var(--nh-brd2);
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,180,200,.1);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); padding:14px 16px 16px; pointer-events:auto;
  opacity:0; visibility:hidden; transition:.22s cubic-bezier(.2,.9,.2,1); }
#nhud .nh-drawer.on{ opacity:1; visibility:visible; transform:translate(-50%,0); }
#nhud .nh-drawer h3{ margin:0 0 3px; font-family:var(--nh-fh); font-size:15px; letter-spacing:1px; color:#eaf6fa; font-weight:600; }
#nhud .nh-drawer .hint{ font-size:11.5px; color:var(--nh-dim); margin-bottom:11px; }
#nhud .nh-tabs{ display:flex; gap:6px; margin-bottom:12px; }
#nhud .nh-tab{ font-family:var(--nh-fh); font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--nh-dim);
  background:none; border:1px solid var(--nh-brd); padding:5px 14px; border-radius:8px; cursor:pointer; transition:.15s; }
#nhud .nh-tab:hover{ color:var(--nh-ink); }
#nhud .nh-tab.on{ color:#07110f; background:linear-gradient(180deg,var(--nh-jade),var(--nh-jade-deep)); border-color:transparent; box-shadow:0 0 14px rgba(0,245,255,.35); }
#nhud .nh-palette{ display:grid; grid-template-columns:repeat(auto-fill,minmax(155px,1fr)); gap:8px; max-height:236px; overflow-y:auto; padding-right:4px; }
#nhud .nh-chip{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; cursor:grab;
  background:linear-gradient(160deg,#111d26,#0b141b); border:1px solid var(--nh-brd); transition:.14s; }
#nhud .nh-chip:hover{ border-color:var(--nh-jade); transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.4); }
#nhud .nh-chip:active{ cursor:grabbing; }
#nhud .nh-chip .ci{ width:36px; height:36px; border-radius:8px; display:grid; place-items:center; flex:none; color:var(--c,#bfeef4);
  background:radial-gradient(circle at 40% 30%,#16262e,#0a141a); border:1px solid var(--nh-brd); overflow:hidden; }
#nhud .nh-chip .ci svg{ width:20px; height:20px; filter:drop-shadow(0 0 4px var(--c,transparent)); }
#nhud .nh-chip .ci img{ width:30px; height:30px; object-fit:contain; }
#nhud .nh-chip .cn{ font-size:12.5px; color:var(--nh-ink); line-height:1.2; }
#nhud .nh-chip .ck{ font-size:9.5px; color:var(--nh-faint); text-transform:uppercase; letter-spacing:1px; }
#nhud .nh-drawer .cl{ position:absolute; top:12px; right:14px; width:26px; height:26px; border-radius:7px; cursor:pointer;
  background:none; border:1px solid var(--nh-brd); color:var(--nh-dim); display:grid; place-items:center; transition:.15s; font-size:15px; }
#nhud .nh-drawer .cl:hover{ color:var(--nh-blood); border-color:var(--nh-blood); }
#nhud .nh-palette::-webkit-scrollbar{ width:8px; } #nhud .nh-palette::-webkit-scrollbar-thumb{ background:var(--nh-brd2); border-radius:8px; }
#nhud .nh-empty{ grid-column:1/-1; color:var(--nh-faint); font-size:12px; padding:14px; text-align:center; }

@media (prefers-reduced-motion:reduce){ #nhud *{ animation:none !important; } }
@media (max-width:1000px){ #nhud .nh-vitals{ transform:scale(.9); transform-origin:left bottom; } #nhud .nh-sigils{ transform:scale(.9); transform-origin:right bottom; } }