/* TOPBAR V18 — exact user-provided shop asset + visible animated aura + alignment pass.
   This file is intentionally loaded AFTER topbar_v16.css so it wins the old experimental rules. */

/* ---- Store: use the exact supplied image, never distort or move it. ---- */
.zk-v9-store-cell{
  position:relative!important;
  z-index:80!important;
  isolation:isolate!important;
  overflow:visible!important;
  animation:none!important;
}
.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{display:none!important}
.zk-store-custom{
  position:absolute!important;
  left:3px!important;
  top:8px!important;
  width:87px!important;
  height:87px!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center center!important;
  image-rendering:auto!important;
  pointer-events:none!important;
  user-select:none!important;
  z-index:84!important;
  transform:none!important;
  transform-origin:center center!important;
  will-change:filter!important;
  animation:zk-v18-store-aura 1.32s ease-in-out infinite!important;
}
@keyframes zk-v18-store-aura{
  0%,100%{
    filter:
      brightness(1.00)
      saturate(1.00)
      drop-shadow(0 0 1px rgba(255,244,181,.28))
      drop-shadow(0 0 4px rgba(255,178,0,.30))!important;
  }
  50%{
    filter:
      brightness(1.065)
      saturate(1.045)
      drop-shadow(0 0 3px rgba(255,252,216,.92))
      drop-shadow(0 0 9px rgba(255,190,0,.86))
      drop-shadow(0 0 16px rgba(255,126,0,.42))!important;
  }
}
.zk-v9-store-cell.store-hover .zk-store-custom{
  animation-duration:.68s!important;
  filter:
    brightness(1.09)
    saturate(1.06)
    drop-shadow(0 0 4px rgba(255,255,230,1))
    drop-shadow(0 0 12px rgba(255,196,0,1))
    drop-shadow(0 0 20px rgba(255,130,0,.62))!important;
}
.zk-v9-store-cell.store-pressed .zk-store-custom{
  animation-play-state:paused!important;
  filter:
    brightness(.97)
    saturate(1.00)
    drop-shadow(0 0 2px rgba(255,232,155,.65))
    drop-shadow(0 0 6px rgba(255,160,0,.48))!important;
}
.store-btn{
  position:absolute!important;
  left:3px!important;
  top:8px!important;
  width:87px!important;
  height:87px!important;
  z-index:90!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:0!important;
}

/* ---- Money + cash: visibly larger and a few pixels LOWER. ---- */
.zeni-currency .money-tier-icon,
.cash-token-currency .cash-token-icon{
  position:absolute!important;
  left:1px!important;
  top:34px!important;
  width:50px!important;
  height:50px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  object-position:center center!important;
  image-rendering:pixelated!important;
  transform:none!important;
  opacity:1!important;
  z-index:8!important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.68))!important;
}
.zeni-currency>b{
  left:52px!important;
  top:36px!important;
  width:48px!important;
  height:38px!important;
  line-height:38px!important;
}
.cash-token-currency>b{
  left:51px!important;
  top:36px!important;
  width:43px!important;
  height:38px!important;
  line-height:38px!important;
}

/* ---- Character portrait: center it in the actual portrait aperture. ---- */
.profile-avatar{
  left:39px!important;
  top:31px!important;
  width:54px!important;
  height:54px!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  transform-origin:center center!important;
}
