/* Header-tab NPCs (nav-npc.jsx). The orbs are the real 180x210 shop orb scaled
   to the tab; only the parts that read at this size are drawn (no ring/hands). */
.nav-npc{--lx:0;--ly:0;position:relative;flex:none;width:26px;height:26px;pointer-events:none}
.nav-npc .nav-npc-orb{position:absolute;left:-77px;top:-83px;transform:scale(.168);transform-origin:90px 96px;cursor:inherit;pointer-events:none}
.nav-npc .orb-face{transform:translate(calc(var(--lx) * 7px),calc(var(--ly) * 5px))}
.nav-npc .orb-ball{box-shadow:0 0 30px rgba(110,200,255,.75),inset -12px -16px 30px rgba(25,5,80,.55),inset 6px 8px 18px rgba(255,255,255,.35)}
/* Grim keeps his own look from black-market.css (.orb-grim); a red glow here. */
.nav-npc .orb-grim .orb-ball{box-shadow:0 0 34px rgba(220,0,40,.7),inset -14px -18px 30px rgba(0,0,0,.9),inset 8px 10px 22px rgba(255,40,60,.15)}
.nav-npc .orb-grim .orb-eye{width:19px;height:7px}
/* Mira, the tournament host: a gold orb with a crown and a determined brow. */
.nav-npc .orb-mira .orb-ball{background:radial-gradient(circle at 34% 28%,#fff 0,#fff6d0 9%,#ffd36b 32%,#f08a24 68%,#8a3a06 100%);
  box-shadow:0 0 32px rgba(255,190,80,.8),inset -12px -16px 30px rgba(110,40,0,.55),inset 6px 8px 18px rgba(255,255,255,.4)}
.nav-npc .orb-mira .orb-core{background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.4),transparent 25%,rgba(255,150,40,.4) 50%,transparent 70%,rgba(255,240,160,.4) 85%,transparent)}
.nav-npc .orb-mira .orb-eye,.nav-npc .orb-mira .orb-mouth{background:#3a1600}
.nav-npc .orb-mira .orb-brow{opacity:1;background:#3a1600;top:-3px}
.nav-npc .orb-mira .orb-brow:nth-of-type(1){transform:rotate(16deg)}.nav-npc .orb-mira .orb-brow:nth-of-type(2){transform:rotate(-16deg)}
.nav-npc .orb-mira .orb-blush{background:#ff8a5a}
.orb-crown{left:50%;top:-24px;width:64px;height:34px;margin-left:-32px;transform:rotate(-8deg);transform-origin:50% 100%}
.orb-crown::before{content:"";position:absolute;inset:0;background:linear-gradient(#fff6c8,#ffc23a 45%,#c87a10);
  clip-path:polygon(0 100%,0 22%,22% 62%,50% 0,78% 62%,100% 22%,100% 100%);filter:drop-shadow(0 2px 0 #8a4a06)}
.orb-crown::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;border-radius:2px;background:linear-gradient(90deg,#c87a10,#ffe27a 50%,#c87a10)}
.orb-crown i{bottom:12px;width:9px;height:9px;border-radius:50%;z-index:1;background:radial-gradient(circle at 35% 30%,#fff,#ff4a6a 45%,#9a0a2a);box-shadow:0 0 4px rgba(255,60,90,.8)}
.orb-crown i:nth-child(1){left:6px}.orb-crown i:nth-child(2){left:50%;margin-left:-5px;bottom:16px;background:radial-gradient(circle at 35% 30%,#fff,#4ac8ff 45%,#0a4a9a);box-shadow:0 0 4px rgba(60,180,255,.8)}.orb-crown i:nth-child(3){right:6px}

/* Noma: her real sprite (72x84). */
.nav-npc-noma{position:absolute;left:-23px;top:-29px;width:72px;height:84px;transform:scale(.36);transform-origin:36px 42px}
.nav-npc-noma .nma-face{transform:translate(calc(var(--lx) * 5px),calc(var(--ly) * 4px))}
.nav-npc-noma .nma-glow{opacity:.8}

/* Glitch: purple gas with a dark hollow, two pixel slit eyes and a flat mouth,
   torn and RGB-split now and then. */
.nav-npc-glx{position:absolute;inset:0;animation:nav-glx-tear 3.7s steps(1) infinite}
.nav-npc-glx i{position:absolute;border-radius:50%;filter:blur(2.5px);mix-blend-mode:screen;animation:nav-glx-gas 3s ease-in-out infinite}
.nav-npc-glx i:nth-child(1){inset:1px;background:radial-gradient(circle,#8b3dffcc,#8b3dff55 45%,transparent 72%)}
.nav-npc-glx i:nth-child(2){left:-3px;top:4px;width:16px;height:16px;background:radial-gradient(circle,#ff2e9aaa,transparent 70%);animation-delay:-1s;animation-duration:3.6s}
.nav-npc-glx i:nth-child(3){right:-3px;top:2px;width:15px;height:15px;background:radial-gradient(circle,#50dcffaa,transparent 70%);animation-delay:-2s;animation-duration:2.6s}
.nav-npc-glx i:nth-child(4){left:5px;top:5px;width:16px;height:14px;filter:blur(2px);mix-blend-mode:normal;background:radial-gradient(circle,rgba(5,2,10,.9),rgba(5,2,10,0) 70%);animation:none}
.nav-npc-glx b{position:absolute;top:10px;width:6px;height:2px;background:#f3e8ff;box-shadow:0 0 3px #b07aff,-.7px 0 0 #ff2e9a,.7px 0 0 #50dcff;
  translate:calc(var(--lx) * 1.5px) calc(var(--ly) * 1px);animation:nav-glx-blink 4.3s steps(1) infinite}
.nav-npc-glx b.is-l{left:5px;transform:skewY(18deg)}.nav-npc-glx b.is-r{right:5px;transform:skewY(-18deg)}
.nav-npc-glx em{position:absolute;left:10px;top:16px;width:6px;height:1px;background:#f3e8ff;opacity:.9;translate:calc(var(--lx) * 1.5px) calc(var(--ly) * 1px)}
@keyframes nav-glx-gas{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(1px,-1px) scale(1.08)}66%{transform:translate(-1px,1px) scale(.94)}}
@keyframes nav-glx-blink{0%,93%{height:2px;top:10px}94%,97%{height:1px;top:11px}}
@keyframes nav-glx-tear{0%,86%,100%{transform:none;filter:none}87%{transform:translateX(2px);filter:hue-rotate(60deg)}89%{transform:translateX(-2px) skewX(10deg)}91%{transform:none;filter:invert(.15)}}