/* ZENKAI TOPBAR V9 — ONLY TOPBAR.
   Fixed native UI modules + one continuous flexible center.
   All artwork comes from crops of the supplied topbar asset. */
:root{
  --zk-v9-native-h:105px;
  --zk-v9-logo-w:190px;
  --zk-v9-stage-left:165px;
  --zk-v9-min-stage:1158px;
}
html,body{width:100%;height:100%;overflow:hidden!important;overscroll-behavior:none!important}
.game-shell{height:100vh!important;overflow:hidden!important;grid-template-rows:105px 1fr 166px!important}
.hunter-topbar{
  position:relative!important;width:100%!important;height:105px!important;min-height:105px!important;
  padding:0!important;margin:0!important;display:block!important;overflow:hidden!important;
  background:#05090f!important;border:0!important;box-shadow:none!important;z-index:100!important;
}
.zk-v9-logo{
  position:absolute;z-index:10;left:7px;top:-7px;width:190px;height:auto;
  object-fit:contain;image-rendering:auto;filter:none;pointer-events:none;user-select:none;
}
.zk-v9-stage{
  position:absolute;left:var(--zk-v9-stage-left);right:8px;top:0;height:105px;
  display:grid;
  /* At 1158px native width, middle resolves to 162px — exactly the source server section. */
  grid-template-columns:286px 140px 136px 93px minmax(162px,1fr) 341px;
  align-items:start;overflow:hidden;background:#07111d;
}
.zk-v9-cell,.zk-v9-middle{position:relative;height:105px;min-width:0;overflow:visible}
.zk-v9-shell{position:absolute;inset:0;display:block;width:100%;height:105px;object-fit:fill;image-rendering:auto;pointer-events:none;user-select:none;z-index:1}
.zk-v9-profile-cell{width:286px}.zk-v9-zeni-cell{width:140px}.zk-v9-premium-cell{width:136px}.zk-v9-store-cell{width:93px}.zk-v9-right-cell{width:341px}

/* ONE continuous flexible center. Only the empty center grows.
   The top/bottom chrome strips are literal crops from the supplied source asset. */
.zk-v9-middle{
  overflow:hidden!important;
  background-color:#061321;
  background-image:
    url('assets/ui/zenkai_topbar_v9/center_top_strip.png'),
    url('assets/ui/zenkai_topbar_v9/center_bottom_strip.png'),
    linear-gradient(180deg,#071726 18px,#061321 18px,#061321 87px,#071421 87px);
  background-repeat:repeat-x,repeat-x,no-repeat;
  background-position:left top,left bottom,0 0;
  background-size:100px 18px,100px 18px,100% 100%;
}
.zk-v9-server-badge{
  position:absolute;z-index:3;left:50%;top:25px;transform:translateX(-50%);
  width:148px;height:57px;display:block;object-fit:contain;image-rendering:auto;
  filter:none;pointer-events:none;user-select:none;
}

/* Functional content aligned over the native source art. */
.profile-card{position:absolute!important;inset:0!important;width:286px!important;height:105px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;clip-path:none!important;overflow:visible!important;z-index:3!important;cursor:pointer!important}
.profile-card:hover,.profile-card:focus,.profile-card:active{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;filter:none!important}
.profile-avatar{position:absolute!important;left:31px!important;top:28px!important;width:55px!important;height:55px!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;object-fit:contain!important;object-position:center bottom!important;image-rendering:pixelated!important;pointer-events:none!important}
.profile-copy{position:absolute!important;left:101px!important;top:24px!important;width:136px!important;height:61px!important;padding:0!important;margin:0!important;display:grid!important;grid-template-rows:22px 17px 18px!important;align-content:start!important;text-align:left!important;line-height:1!important;pointer-events:none!important}
.profile-copy b{font:800 15px/20px Arial,sans-serif!important;letter-spacing:.1px!important;color:#f7f9fb!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;text-shadow:0 1px 2px #000!important}
.profile-copy small{font:700 10.5px/15px Arial,sans-serif!important;color:#d7e2ef!important;white-space:nowrap!important}.profile-copy em{font:800 9.5px/16px Arial,sans-serif!important;font-style:normal!important;color:#ffcf27!important;white-space:nowrap!important}.profile-copy em strong{color:#ffcf27!important}
.currency-pill{position:absolute!important;inset:0!important;width:100%!important;height:105px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;clip-path:none!important;overflow:visible!important;z-index:3!important}
.currency-pill .currency-icon,.currency-pill>img{position:absolute!important;left:14px!important;top:37px!important;width:30px!important;height:30px!important;margin:0!important;object-fit:contain!important;image-rendering:auto!important;filter:none!important;pointer-events:none!important}
.currency-pill>b{position:absolute!important;left:48px!important;top:34px!important;width:47px!important;height:38px!important;display:flex!important;align-items:center!important;justify-content:center!important;margin:0!important;color:#fff!important;font:800 15px/38px Arial,sans-serif!important;text-shadow:0 1px 2px #000!important;pointer-events:none!important}.secondary-currency>b{left:44px!important;width:45px!important}
.currency-pill>button{position:absolute!important;right:3px!important;top:31px!important;width:39px!important;height:50px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:transparent!important;font-size:0!important;cursor:pointer!important;z-index:5!important}
.currency-pill>button:hover,.currency-pill>button:focus,.currency-pill>button:active{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;filter:none!important}
.store-btn{position:absolute!important;inset:0!important;width:93px!important;height:105px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;clip-path:none!important;outline:0!important;color:transparent!important;font-size:0!important;cursor:pointer!important;z-index:4!important}.store-btn:hover,.store-btn:focus,.store-btn:active{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;filter:none!important}.store-btn img,.store-btn span{display:none!important}
.top-icons{position:absolute!important;inset:0!important;display:block!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:3!important}.top-icons .top-btn,.top-gear,.zk-v9-menu-btn{position:absolute!important;top:30px!important;width:53px!important;height:55px!important;min-width:0!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:0!important;color:transparent!important;font-size:0!important;cursor:pointer!important}
#invBtn{left:4px!important}#guildBtn{left:61px!important}#huntsBtn{left:118px!important}#bestiaryBtn{left:175px!important}.top-gear{left:232px!important;z-index:4!important}.zk-v9-menu-btn{left:289px!important;z-index:4!important}
.top-icons .top-btn:hover,.top-icons .top-btn:focus,.top-icons .top-btn:active,.top-gear:hover,.top-gear:focus,.top-gear:active,.zk-v9-menu-btn:hover,.zk-v9-menu-btn:focus,.zk-v9-menu-btn:active{background:transparent!important;border:0!important;box-shadow:none!important;outline:0!important;filter:none!important}.top-icons .top-btn img{display:none!important}.top-gear:before,.top-gear:after,.top-icons .top-btn:before,.top-icons .top-btn:after,.zk-v9-menu-btn:before,.zk-v9-menu-btn:after{content:none!important;display:none!important}.hunter-topbar button{-webkit-appearance:none!important;appearance:none!important}.hunter-topbar button::-moz-focus-inner{border:0!important;padding:0!important}

/* Below native width, scale the WHOLE authored bar uniformly. Never upscale art. */
.hunter-topbar.zk-v9-compact{overflow:hidden!important}
.hunter-topbar.zk-v9-compact .zk-v9-stage{right:auto;width:1158px;grid-template-columns:286px 140px 136px 93px 162px 341px;transform:scale(var(--zk-v9-scale,1));transform-origin:top left}
.hunter-topbar.zk-v9-compact .zk-v9-logo{transform:scale(var(--zk-v9-scale,1));transform-origin:top left}

/* ===== TOPBAR V11 — HUNTERA-LIKE HOVER + STORE GLOW =====================
   Base geometry stays V9 because that was the closest approved layout.
   Only hover behavior, server text and currency icon alignment change here. */

/* Allow Huntera-style floating tooltips to leave the bar. */
.hunter-topbar{overflow:visible!important}
.zk-v9-stage{overflow:visible!important}
.zk-v9-middle{overflow:hidden!important}

/* Keep authored artwork at native dimensions. Never blur/stretch closed assets. */
.zk-v9-shell{object-fit:contain!important;width:100%!important;height:105px!important;image-rendering:auto!important}

/* Currency artwork: vertically centered in the authored blank field. */
.currency-pill .currency-icon,.currency-pill>img{
  left:15px!important;top:40px!important;width:24px!important;height:24px!important;
  object-fit:contain!important;image-rendering:auto!important;transform:none!important;
}
.secondary-currency .currency-icon,.secondary-currency>img{
  left:16px!important;top:41px!important;width:22px!important;height:22px!important;
}
.currency-pill>b{left:43px!important;top:34px!important;width:58px!important;height:38px!important;line-height:38px!important}
.secondary-currency>b{left:42px!important;width:51px!important}

/* Plus hover: only a light halo over the existing + artwork. No black square. */
.currency-pill>button::before{
  content:"";position:absolute;inset:7px 5px 8px 5px;border-radius:7px;opacity:0;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,220,90,.16),rgba(255,184,0,.03) 62%,transparent 75%);
  box-shadow:0 0 0 1px rgba(255,209,74,.42),0 0 8px rgba(255,171,0,.55);
  transition:opacity .11s ease,box-shadow .11s ease,filter .11s ease;
}
.currency-pill>button:hover::before,.currency-pill>button:focus-visible::before{opacity:1;box-shadow:0 0 0 1px rgba(255,226,120,.75),0 0 10px rgba(255,177,0,.8)}
.currency-pill>button:active::before{opacity:.7;filter:brightness(.88)}

/* STORE — always has a restrained gold aura; hover strengthens the SAME artwork. */
.zk-v9-store-cell>.zk-v9-shell{
  filter:drop-shadow(0 0 2px rgba(255,198,32,.72)) drop-shadow(0 0 5px rgba(255,145,0,.32))!important;
  transition:filter .12s ease,transform .12s ease;
}
.zk-v9-store-cell.store-hover>.zk-v9-shell{
  filter:brightness(1.08) drop-shadow(0 0 3px rgba(255,235,130,.95)) drop-shadow(0 0 8px rgba(255,174,0,.74))!important;
}
.zk-v9-store-cell.store-pressed>.zk-v9-shell{filter:brightness(.94) drop-shadow(0 0 3px rgba(255,169,0,.6))!important;transform:translateY(1px)}

/* Server capsule is live text, not baked text. It can hold "9.744 jogadores online". */
.zk-v9-server-badge{display:none!important}
.zk-v9-middle{display:flex!important;align-items:center!important;justify-content:center!important;padding:0 24px!important}
.server-strip{
  position:relative!important;width:clamp(188px,52%,350px)!important;max-width:calc(100% - 24px)!important;height:54px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:0 18px!important;margin:0!important;
  border:1px solid #087ab5!important;border-radius:27px!important;background:linear-gradient(180deg,rgba(4,25,42,.97),rgba(3,15,27,.98))!important;
  box-shadow:inset 0 0 0 1px rgba(0,20,38,.95),inset 0 0 18px rgba(0,124,199,.10)!important;
  color:#d9e8f6!important;font:700 11px/1 Arial,sans-serif!important;white-space:nowrap!important;overflow:hidden!important;pointer-events:none!important;z-index:4!important;
}
.server-strip .online-dot{flex:0 0 8px!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#29e64e!important;box-shadow:0 0 8px #29e64e!important}
.server-strip #onlinePlayersText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Profile hover is subtle. The EXP line is the real Huntera-style information trigger. */
.profile-copy{pointer-events:none!important}
.profile-copy em{pointer-events:auto!important;position:relative!important;cursor:help!important;border-radius:4px!important;padding:0 3px!important;margin-left:-3px!important;transition:background .10s ease,color .10s ease,text-shadow .10s ease}
.profile-copy em:hover,.profile-copy em:focus-visible{background:rgba(255,191,28,.10)!important;color:#ffe07a!important;text-shadow:0 0 6px rgba(255,191,28,.62)!important;outline:none!important}

/* Huntera-style EXP breakdown panel: compact navy popover, green values, no giant bubble. */
.zk-exp-hover{
  position:absolute;left:98px;top:82px;width:246px;z-index:10000;display:none;
  padding:7px 9px 6px;border:1px solid #405270;border-radius:4px;
  background:linear-gradient(180deg,rgba(17,22,32,.99),rgba(10,14,23,.99));
  box-shadow:0 7px 22px rgba(0,0,0,.58),inset 0 0 0 1px rgba(8,11,18,.9);
  color:#cbd5e4;font:600 10px/1.25 Arial,sans-serif;text-align:left;
}
.zk-exp-hover.show{display:block}
.zk-exp-row{height:20px;display:grid;grid-template-columns:13px 1fr auto;gap:6px;align-items:center;border-bottom:1px solid rgba(78,94,117,.13)}
.zk-exp-row:last-of-type{border-bottom:0}
.zk-exp-mark{width:7px;height:7px;border:1px solid #7d8da4;border-radius:1px;background:#1a2230;box-shadow:inset 0 0 2px #000}
.zk-exp-row b{font-weight:800;color:#8bd34c;text-align:right;white-space:nowrap}
.zk-exp-total{margin-top:5px;padding-top:6px;border-top:1px solid #3f4d63;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#9aa8bb;font-size:9px;text-transform:uppercase;letter-spacing:.15px}
.zk-exp-total b{font-size:11px;color:#d5a44a}
.zk-exp-foot{margin:6px -9px -6px;padding:5px 9px;border-top:1px solid #28364a;background:#0b1019;color:#667892;font-size:8.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Functional icons: Huntera-like hover = subtle frame light + tiny label. No filled boxes. */
.top-icons .top-btn,.top-gear,.zk-v9-menu-btn{overflow:visible!important}
.top-icons .top-btn::before,.top-gear::before,.zk-v9-menu-btn::before{
  content:""!important;display:block!important;position:absolute!important;inset:5px 4px 5px 4px!important;border-radius:6px!important;opacity:0!important;pointer-events:none!important;
  background:radial-gradient(circle at 50% 45%,rgba(88,196,255,.10),transparent 70%)!important;
  box-shadow:inset 0 0 0 1px rgba(91,190,244,.52),0 0 7px rgba(0,157,232,.32)!important;transition:opacity .10s ease,box-shadow .10s ease!important;
}
.top-icons .top-btn:hover::before,.top-icons .top-btn:focus-visible::before,.top-gear:hover::before,.top-gear:focus-visible::before,.zk-v9-menu-btn:hover::before,.zk-v9-menu-btn:focus-visible::before{opacity:1!important;box-shadow:inset 0 0 0 1px rgba(132,216,255,.82),0 0 9px rgba(0,174,255,.48)!important}
.top-icons .top-btn::after,.top-gear::after,.zk-v9-menu-btn::after{
  content:attr(aria-label)!important;display:block!important;position:absolute!important;left:50%!important;top:calc(100% + 7px)!important;transform:translateX(-50%) translateY(-2px)!important;
  width:max-content!important;max-width:150px!important;padding:5px 7px!important;border:1px solid #405270!important;border-radius:3px!important;background:rgba(10,14,22,.98)!important;
  color:#cbd6e5!important;font:700 9px/1 Arial,sans-serif!important;letter-spacing:.1px!important;white-space:nowrap!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  box-shadow:0 5px 15px rgba(0,0,0,.5)!important;transition:opacity .09s ease,transform .09s ease,visibility .09s ease!important;z-index:10000!important;
}
.top-icons .top-btn:hover::after,.top-icons .top-btn:focus-visible::after,.top-gear:hover::after,.top-gear:focus-visible::after,.zk-v9-menu-btn:hover::after,.zk-v9-menu-btn:focus-visible::after{opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(0)!important}

/* The whole profile only receives a tiny brightness lift, never an overlay box. */
.zk-v9-profile-cell.profile-hover>.zk-v9-shell{filter:brightness(1.035)!important}

/* Compact mode keeps V9's uniform scaling; tooltip remains positioned with the authored bar. */
/* ===== END TOPBAR V11 ===================================================== */

/* ===== TOPBAR V12 — cash + Z coin + native-image hover polish ========= */
/* First resource is now visually CASH using the game's existing bills asset. */
.cash-currency .cash-icon{
  left:13px!important;top:36px!important;width:32px!important;height:32px!important;
  object-fit:contain!important;image-rendering:pixelated!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))!important;
}
.cash-currency>b{left:47px!important;width:53px!important}
/* Second resource is a crisp vector Z coin. No raster upscale. */
.z-currency .z-coin-icon{
  left:13px!important;top:36px!important;width:30px!important;height:30px!important;
  object-fit:contain!important;image-rendering:auto!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))!important;
}
.z-currency>b{left:45px!important;width:49px!important}

/* Hover on +: reveal a brightened crop of the ORIGINAL authored shell,
   rather than drawing a generic square/halo. */
.currency-pill>button::before{
  inset:0!important;border-radius:0!important;box-shadow:none!important;background-repeat:no-repeat!important;
  background-size:140px 105px!important;background-position:-98px -31px!important;
  opacity:0!important;filter:brightness(1.24) saturate(1.08) drop-shadow(0 0 4px rgba(255,187,22,.78))!important;
  transition:opacity .10s ease,filter .10s ease!important;
}
.zk-v9-zeni-cell .currency-pill>button::before{background-image:url('assets/ui/zenkai_topbar_v13/zeni_shell.png')!important}
.zk-v9-premium-cell .currency-pill>button::before{
  background-image:url('assets/ui/zenkai_topbar_v13/premium_shell.png')!important;
  background-size:136px 105px!important;background-position:-94px -31px!important;
}
.currency-pill>button:hover::before,.currency-pill>button:focus-visible::before{opacity:.92!important}
.currency-pill>button:active::before{opacity:.68!important;filter:brightness(.95) drop-shadow(0 0 2px rgba(255,163,0,.55))!important}

/* Store: preserve the native store PNG; gold outline is ambient, hover is stronger.
   No scale, no stretching, no generic rectangle. */
.zk-v9-store-cell>.zk-v9-shell{
  object-fit:contain!important;transform:none!important;
  filter:drop-shadow(0 0 2px rgba(255,204,60,.66)) drop-shadow(0 0 5px rgba(255,150,0,.28))!important;
}
.zk-v9-store-cell.store-hover>.zk-v9-shell{
  filter:brightness(1.10) saturate(1.04) drop-shadow(0 0 3px rgba(255,238,145,.98)) drop-shadow(0 0 9px rgba(255,170,0,.78))!important;
  transform:none!important;
}
.zk-v9-store-cell.store-pressed>.zk-v9-shell{transform:translateY(1px)!important}

/* Right-side functional hover uses a clipped duplicate of the same right_shell.
   This makes the authored icon/frame brighten — no new box is drawn. */
.top-icons .top-btn::before,.top-gear::before,.zk-v9-menu-btn::before{
  inset:0!important;border-radius:0!important;box-shadow:none!important;background-color:transparent!important;
  background-image:url('assets/ui/zenkai_topbar_v13/right_shell.png')!important;
  background-size:341px 105px!important;background-repeat:no-repeat!important;
  opacity:0!important;filter:brightness(1.18) saturate(1.08) drop-shadow(0 0 4px rgba(54,188,255,.48))!important;
  transition:opacity .10s ease,filter .10s ease!important;
}
#invBtn::before{background-position:-4px -30px!important}
#guildBtn::before{background-position:-61px -30px!important}
#huntsBtn::before{background-position:-118px -30px!important}
#bestiaryBtn::before{background-position:-175px -30px!important}
.top-gear::before{background-position:-232px -30px!important}
.zk-v9-menu-btn::before{background-position:-289px -30px!important}
.top-icons .top-btn:hover::before,.top-icons .top-btn:focus-visible::before,.top-gear:hover::before,.top-gear:focus-visible::before,.zk-v9-menu-btn:hover::before,.zk-v9-menu-btn:focus-visible::before{opacity:.95!important}

/* Keep the tiny Huntera-like labels, but make them less intrusive. */
.top-icons .top-btn::after,.top-gear::after,.zk-v9-menu-btn::after{
  top:calc(100% + 4px)!important;padding:4px 6px!important;border-color:#33445b!important;
  background:rgba(8,12,19,.97)!important;color:#bfcce0!important;font-size:8.5px!important;
}

/* EXP trigger: do not paint a pill. Only text highlight + breakdown panel. */
.profile-copy em:hover,.profile-copy em:focus-visible{
  background:transparent!important;color:#ffe47c!important;text-shadow:0 0 5px rgba(255,191,28,.68)!important;
}
/* Slightly softer profile hover: authored chrome itself brightens. */
.zk-v9-profile-cell.profile-hover>.zk-v9-shell{filter:brightness(1.025) saturate(1.02)!important}

/* Server text stays live and reserves room for future player count. */
.server-strip{width:clamp(210px,56%,390px)!important;min-width:210px!important;padding-inline:20px!important}
.server-strip #onlinePlayersText{font-size:11px!important;text-align:center!important}
/* ===== END TOPBAR V12 ================================================ */

/* ===== TOPBAR V13 — REAL CLIENT CURRENCIES + COMPACT MONEY ============
   IDs supplied by the project/client:
   money tiers: 19301 / 19302 / 19303 / 19304
   cash: 22515
   bag: 21040
   All item sprites are exported 1:1 from Tibia(4).dat + Tibia(4).spr. */

/* First resource: actual Zeni/money item, swapped by current balance.
   Keep the 32x32 sprite canvas native so the pixel art never becomes mushy. */
.zeni-currency .money-tier-icon{
  left:12px!important;
  top:39px!important; /* requested tiny downward correction */
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.58))!important;
  transform:none!important;
}
.zeni-currency>b{
  left:45px!important;
  width:56px!important;
  font-size:15px!important;
  letter-spacing:.1px!important;
}

/* Second resource: actual Cash item 22515 from the client. */
.cash-token-currency .cash-token-icon{
  left:12px!important;
  top:39px!important;
  width:32px!important;
  height:32px!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.58))!important;
  transform:none!important;
}
.cash-token-currency>b{
  left:44px!important;
  width:49px!important;
}

/* Inventory/bag money display uses the SAME tier sprite and compact number. */
.inventory-money img.zk-money-tier-icon{
  width:32px!important;
  height:32px!important;
  margin-top:2px!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
}
.inventory-money b{white-space:nowrap}

/* First top-right shortcut now visually uses item 21040 (Capsule-style bag).
   right_shell.png itself was rebuilt from the supplied shell + native item sprite,
   so hover keeps the same icon instead of flashing the old orange bag. */

/* Store animation: absolutely no movement / scaling / distortion.
   Only the outline glow breathes; hover makes it stronger. */
@keyframes zk-v13-store-aura{
  0%,100%{
    filter:brightness(1.00) saturate(1.00)
      drop-shadow(0 0 2px rgba(255,211,72,.68))
      drop-shadow(0 0 5px rgba(255,145,0,.34))!important;
  }
  50%{
    filter:brightness(1.035) saturate(1.015)
      drop-shadow(0 0 3px rgba(255,225,105,.82))
      drop-shadow(0 0 8px rgba(255,153,0,.48))!important;
  }
}
.zk-v9-store-cell>.zk-v9-shell{
  transform:none!important;
  animation:zk-v13-store-aura 2.15s ease-in-out infinite!important;
  will-change:filter;
}
.zk-v9-store-cell.store-hover>.zk-v9-shell{
  animation:none!important;
  transform:none!important;
  filter:brightness(1.10) saturate(1.04)
    drop-shadow(0 0 4px rgba(255,241,155,.98))
    drop-shadow(0 0 11px rgba(255,166,0,.82))!important;
}
.zk-v9-store-cell.store-pressed>.zk-v9-shell{
  animation:none!important;
  transform:none!important;
  filter:brightness(.96) saturate(1.01)
    drop-shadow(0 0 2px rgba(255,205,70,.72))
    drop-shadow(0 0 5px rgba(255,145,0,.42))!important;
}
@media (prefers-reduced-motion:reduce){
  .zk-v9-store-cell>.zk-v9-shell{animation:none!important}
}
/* ===== END TOPBAR V13 ================================================ */


/* ===== TOPBAR V14 — STABLE COMPACT VALUE + LARGER CLIENT ICONS + LIVE STORE AURA ===== */
/* Client item sprites have a 32x32 canvas but the painted object occupies ~19x19.
   Render the canvas at 44px so the visible currency itself is ~26px, matching the authored topbar scale. */
.zeni-currency .money-tier-icon,
.cash-token-currency .cash-token-icon{
  left:6px!important;
  top:31px!important;
  width:44px!important;
  height:44px!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  transform:none!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.62))!important;
}
.zeni-currency>b{
  left:46px!important;
  width:55px!important;
}
.cash-token-currency>b{
  left:45px!important;
  width:49px!important;
}

/* V12/V13 had an !important filter on the real store shell. Keep the authored shell clean and
   animate a second copy behind it. This guarantees a visible breathing glow without moving,
   scaling or deforming the store PNG. */
.zk-v9-store-cell{isolation:isolate!important;overflow:visible!important}
.zk-v9-store-cell>.zk-v9-shell{
  z-index:2!important;
  animation:none!important;
  transform:none!important;
  filter:none!important;
  transition:filter .12s ease!important;
}
.zk-v9-store-cell::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  pointer-events:none!important;
  background:url('assets/ui/zenkai_topbar_v13/store_shell.png') center center / contain no-repeat!important;
  opacity:.30;
  filter:brightness(1.18) saturate(1.06)
    drop-shadow(0 0 4px rgba(255,230,108,.90))
    drop-shadow(0 0 10px rgba(255,158,0,.74));
  animation:zk-v14-store-breathe 1.55s ease-in-out infinite!important;
  will-change:opacity,filter;
}
@keyframes zk-v14-store-breathe{
  0%,100%{
    opacity:.25;
    filter:brightness(1.12) saturate(1.03)
      drop-shadow(0 0 3px rgba(255,219,88,.72))
      drop-shadow(0 0 7px rgba(255,145,0,.48));
  }
  50%{
    opacity:.88;
    filter:brightness(1.30) saturate(1.10)
      drop-shadow(0 0 5px rgba(255,244,168,1))
      drop-shadow(0 0 14px rgba(255,168,0,.96));
  }
}
.zk-v9-store-cell.store-hover>.zk-v9-shell{
  transform:none!important;
  filter:brightness(1.07) saturate(1.04)!important;
}
.zk-v9-store-cell.store-hover::after{
  animation-duration:.82s!important;
  opacity:.92;
  filter:brightness(1.34) saturate(1.12)
    drop-shadow(0 0 6px rgba(255,248,183,1))
    drop-shadow(0 0 16px rgba(255,174,0,1));
}
.zk-v9-store-cell.store-pressed>.zk-v9-shell{
  transform:none!important;
  filter:brightness(.97)!important;
}
.zk-v9-store-cell.store-pressed::after{opacity:.55!important}
/* ===== END TOPBAR V14 ===== */

/* ===== TOPBAR V16 — REAL MONEY SOURCE + TRIMMED COINS + FRONT SHOP GLOW =====
   Fixes three concrete V15 bugs:
   1) V15 CSS was appended with literal "\\n" text, so the browser ignored that block.
   2) The external topbar script could not read lexical `zeni` inside game.js and forced 0.
   3) 32x32 currency PNGs contain 6px transparent padding; use trimmed native art instead. */

/* Currency sprites are transparent-trimmed copies of the ORIGINAL client item sprites.
   Source painted bbox is 19x19. Displaying at 38x38 is an exact 2x pixel scale. */
.zeni-currency .money-tier-icon,
.cash-token-currency .cash-token-icon{
  position:absolute!important;
  left:8px!important;
  top:34px!important;
  width:38px!important;
  height:38px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  image-rendering:pixelated!important;
  transform:none!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.72))!important;
  opacity:1!important;
}
.zeni-currency>b{
  left:48px!important;
  top:34px!important;
  width:54px!important;
  height:38px!important;
  font-size:15px!important;
  line-height:38px!important;
}
.cash-token-currency>b{
  left:47px!important;
  top:34px!important;
  width:48px!important;
  height:38px!important;
  font-size:15px!important;
  line-height:38px!important;
}
.inventory-money img.zk-money-tier-icon{
  width:38px!important;
  height:38px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  image-rendering:pixelated!important;
  transform:none!important;
}

/* Disable the old duplicate-image aura. It was visually trapped behind the topbar chrome. */
.zk-v9-store-cell::after{content:none!important;display:none!important;animation:none!important}

/* Store artwork stays 100% static. A transparent GOLD OUTLINE sits above the chrome and
   breathes around the authored yellow button only. No scale, no translate, no image distortion. */
.zk-v9-store-cell{
  position:relative!important;
  z-index:40!important;
  isolation:isolate!important;
  overflow:visible!important;
}
.zk-v9-store-cell>.zk-v9-shell{
  z-index:41!important;
  transform:none!important;
  animation:none!important;
  filter:none!important;
}
.zk-v9-store-cell::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:5px!important;
  top:24px!important;
  width:82px!important;
  height:69px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(255,213,74,.58)!important;
  border-radius:9px!important;
  background:transparent!important;
  pointer-events:none!important;
  z-index:43!important;
  opacity:.72!important;
  box-shadow:
    0 0 4px rgba(255,229,111,.78),
    0 0 9px rgba(255,170,0,.66),
    0 0 15px rgba(255,128,0,.26)!important;
  animation:zk-v16-shop-glow 1.35s ease-in-out infinite!important;
  will-change:opacity,box-shadow;
}
@keyframes zk-v16-shop-glow{
  0%,100%{
    opacity:.58;
    box-shadow:
      0 0 3px rgba(255,218,82,.62),
      0 0 7px rgba(255,155,0,.48),
      0 0 12px rgba(255,120,0,.18);
  }
  50%{
    opacity:1;
    box-shadow:
      0 0 5px rgba(255,245,172,1),
      0 0 12px rgba(255,185,0,.96),
      0 0 21px rgba(255,133,0,.52);
  }
}
.store-btn{z-index:50!important}
.zk-v9-store-cell.store-hover::before{
  animation-duration:.68s!important;
  border-color:rgba(255,242,165,.95)!important;
  box-shadow:
    0 0 6px rgba(255,250,196,1),
    0 0 15px rgba(255,193,0,1),
    0 0 25px rgba(255,139,0,.66)!important;
}
.zk-v9-store-cell.store-hover>.zk-v9-shell{
  transform:none!important;
  filter:brightness(1.06) saturate(1.03)!important;
}
.zk-v9-store-cell.store-pressed::before{
  animation-play-state:paused!important;
  opacity:.48!important;
  box-shadow:0 0 3px rgba(255,205,70,.7),0 0 7px rgba(255,145,0,.45)!important;
}
.zk-v9-store-cell.store-pressed>.zk-v9-shell{transform:none!important;filter:brightness(.96)!important}

/* Keep Huntera-like EXP hover content above the game world. */
.zk-exp-hover{z-index:10050!important}
/* ===== END TOPBAR V16 ===== */

/* ===== TOPBAR V17 — TRUE ANIMATED STORE GLOW (CSS ONLY) ================
   No baked/static glow image is used. The existing clean store art stays untouched.
   Two CSS-only border layers create a living gold aura around the shop button:
   - a soft breathing halo
   - a moving highlight that travels around the frame
   Both sit ABOVE the topbar chrome but BELOW the real clickable button. */

/* Kill every older store-aura implementation first. */
.zk-v9-store-cell::before,
.zk-v9-store-cell::after{
  content:none!important;
  display:none!important;
  animation:none!important;
  box-shadow:none!important;
  filter:none!important;
}
.zk-v9-store-cell>.zk-v9-shell{
  animation:none!important;
  filter:none!important;
  transform:none!important;
}

@property --zk-shop-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

.zk-v9-store-cell{
  position:relative!important;
  z-index:40!important;
  isolation:isolate!important;
  overflow:visible!important;
  --zk-shop-angle:0deg;
  animation:zk-v17-shop-angle 2.35s linear infinite!important;
}
@keyframes zk-v17-shop-angle{
  to{--zk-shop-angle:360deg}
}

/* Soft pulse: not a solid painted glow; it fades in/out continuously. */
.zk-v9-store-cell::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:5px!important;
  top:24px!important;
  width:82px!important;
  height:69px!important;
  box-sizing:border-box!important;
  border:2px solid rgba(255,196,35,.72)!important;
  border-radius:9px!important;
  background:transparent!important;
  pointer-events:none!important;
  z-index:43!important;
  opacity:.34!important;
  filter:blur(.15px)!important;
  box-shadow:
    0 0 3px rgba(255,224,108,.52),
    0 0 8px rgba(255,157,0,.34),
    inset 0 0 3px rgba(255,219,80,.18)!important;
  animation:zk-v17-shop-breathe 1.18s ease-in-out infinite alternate!important;
}
@keyframes zk-v17-shop-breathe{
  from{
    opacity:.24;
    box-shadow:
      0 0 2px rgba(255,218,90,.34),
      0 0 5px rgba(255,145,0,.18),
      inset 0 0 2px rgba(255,210,70,.10);
  }
  to{
    opacity:.82;
    box-shadow:
      0 0 5px rgba(255,244,173,.88),
      0 0 13px rgba(255,171,0,.70),
      inset 0 0 5px rgba(255,226,99,.30);
  }
}

/* Moving edge highlight. Most of the ring is transparent, so the light visibly travels. */
.zk-v9-store-cell::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:3px!important;
  top:22px!important;
  width:86px!important;
  height:73px!important;
  box-sizing:border-box!important;
  padding:2px!important;
  border-radius:11px!important;
  pointer-events:none!important;
  z-index:44!important;
  opacity:.92!important;
  background:conic-gradient(
    from var(--zk-shop-angle),
    transparent 0deg 250deg,
    rgba(255,169,0,0) 250deg,
    rgba(255,215,72,.48) 268deg,
    rgba(255,250,195,1) 283deg,
    rgba(255,187,0,.76) 300deg,
    rgba(255,130,0,0) 318deg,
    transparent 318deg 360deg
  )!important;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0)!important;
  -webkit-mask-composite:xor!important;
  mask-composite:exclude!important;
  filter:
    drop-shadow(0 0 2px rgba(255,245,175,.95))
    drop-shadow(0 0 5px rgba(255,166,0,.72))!important;
}

/* Hover = faster/stronger animation, still no scaling or fake baked light. */
.zk-v9-store-cell.store-hover{
  animation-duration:1.15s!important;
}
.zk-v9-store-cell.store-hover::before{
  animation-duration:.56s!important;
  border-color:rgba(255,229,125,.92)!important;
}
.zk-v9-store-cell.store-hover::after{
  opacity:1!important;
  filter:
    drop-shadow(0 0 3px rgba(255,252,214,1))
    drop-shadow(0 0 8px rgba(255,179,0,.96))!important;
}
.zk-v9-store-cell.store-hover>.zk-v9-shell{
  filter:brightness(1.055) saturate(1.025)!important;
  transform:none!important;
}

/* Press feedback is light-only. The authored button never moves. */
.zk-v9-store-cell.store-pressed{
  animation-play-state:paused!important;
}
.zk-v9-store-cell.store-pressed::before{
  animation-play-state:paused!important;
  opacity:.32!important;
}
.zk-v9-store-cell.store-pressed::after{
  opacity:.48!important;
  filter:drop-shadow(0 0 2px rgba(255,190,40,.55))!important;
}
.zk-v9-store-cell.store-pressed>.zk-v9-shell{
  filter:brightness(.96)!important;
  transform:none!important;
}

/* Real hitbox stays above both glow layers. */
.store-btn{z-index:50!important}
/* ===== END TOPBAR V17 ================================================== */