/* TOPBAR V21 — targeted cleanup: money value/icon, Store matte/shadow, clean numeric field.
   Loaded LAST. No generated replacement art; authored assets are only alpha/crop-cleaned. */

/* Zeni shell has its old decorative scratches removed in zeni_shell_clean.png. */
.zk-v9-zeni-cell>.zk-v9-shell{
  object-fit:contain!important;
  image-rendering:auto!important;
}

/* Currency icons: real 19x19 Tibia sprites enlarged at an integer-ish game-UI scale,
   centered on the same baseline as the numbers instead of floating near the top edge. */
.zeni-currency .money-tier-icon,
.cash-token-currency .cash-token-icon{
  position:absolute!important;
  left:7px!important;
  top:30px!important;
  width:44px!important;
  height:44px!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:fill!important;
  object-position:center!important;
  image-rendering:pixelated!important;
  transform:none!important;
  opacity:1!important;
  filter:none!important;
  z-index:12!important;
  pointer-events:none!important;
}
.cash-token-currency .cash-token-icon{left:6px!important;top:30px!important}

/* One clean, sharp text layer — no duplicated/dirty shadow. */
.zeni-currency>b,
.cash-token-currency>b{
  top:33px!important;
  height:40px!important;
  line-height:40px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font:800 16px/40px Arial,sans-serif!important;
  letter-spacing:0!important;
  text-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  white-space:nowrap!important;
  overflow:visible!important;
  z-index:13!important;
}
.zeni-currency>b{left:48px!important;width:58px!important}
.cash-token-currency>b{left:47px!important;width:51px!important}

/* Keep + controls completely separate from the text/icon area. */
.zk-v9-zeni-cell .currency-pill>button,
.zk-v9-premium-cell .currency-pill>button{
  z-index:20!important;
}

/* Store: the selected button image has had only its diffuse/matte fringe removed.
   At rest there is NO shadow. CSS owns 100% of the animated light. */
.zk-v9-store-cell{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  filter:none!important;
  overflow:visible!important;
  isolation:isolate!important;
}
.zk-v9-store-cell::before,
.zk-v9-store-cell::after{content:none!important;display:none!important}
.zk-store-custom{
  left:3px!important;
  top:21px!important;
  width:88px!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:none!important;
  transform:none!important;
  will-change:filter!important;
  animation:zk-v21-store-light 1.55s ease-in-out infinite!important;
  z-index:84!important;
}
@keyframes zk-v21-store-light{
  0%,100%{
    filter:brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255,187,0,0))!important;
  }
  45%,55%{
    filter:
      brightness(1.075)
      saturate(1.035)
      drop-shadow(0 0 2px rgba(255,247,190,.78))
      drop-shadow(0 0 6px rgba(255,193,0,.72))
      drop-shadow(0 0 11px rgba(255,135,0,.32))!important;
  }
}
.zk-v9-store-cell.store-hover .zk-store-custom{
  animation-duration:.72s!important;
  filter:
    brightness(1.10)
    saturate(1.05)
    drop-shadow(0 0 3px rgba(255,252,215,.98))
    drop-shadow(0 0 8px rgba(255,197,0,.90))
    drop-shadow(0 0 14px rgba(255,130,0,.46))!important;
}
.zk-v9-store-cell.store-pressed .zk-store-custom{
  animation-play-state:paused!important;
  filter:brightness(.97) saturate(1)!important;
}
.store-btn{
  left:3px!important;
  top:21px!important;
  width:88px!important;
  height:64px!important;
  background:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
  outline:0!important;
  z-index:90!important;
}
.store-btn:hover,.store-btn:focus,.store-btn:active{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Portrait aperture: final small alignment pass, no scaling of its shell. */
.profile-avatar{
  left:38px!important;
  top:28px!important;
  width:58px!important;
  height:58px!important;
  object-fit:contain!important;
  object-position:center center!important;
}
