.tft-trait-tip{
  position: fixed; z-index: 2147483647; display:none; pointer-events:none;
  width:360px; max-width:calc(100vw - 40px);
  background:#0f1a3d; color:#e6eaff;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:12px 14px;
  box-shadow:0 16px 36px rgba(0,0,0,.45);
  font-size:14px; line-height:1.55;
}
.tft-trait-tip .tp-head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tft-trait-tip .tp-ico{width:22px;height:22px;object-fit:contain}
.tft-trait-tip .tp-title{font-weight:800}
.tft-trait-tip .tp-body{font-size:13px;margin-bottom:8px}
.tft-trait-tip .tp-mbrs{display:flex;gap:8px;flex-wrap:wrap}
.tft-trait-tip .tp-mbrs .mbr{width:32px;height:32px;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.12)}
.tft-trait-tip .tp-mbrs .mbr img{width:100%;height:100%;object-fit:cover}
.tft-trait-tip .tp-mbrs .mbr.cost-1{border-color:#9aa0a6}
.tft-trait-tip .tp-mbrs .mbr.cost-2{border-color:#34d399}
.tft-trait-tip .tp-mbrs .mbr.cost-3{border-color:#60a5fa}
.tft-trait-tip .tp-mbrs .mbr.cost-4{border-color:#c084fc}
.tft-trait-tip .tp-mbrs .mbr.cost-5{border-color:#facc15}

/* avoid clipping */
.tft-units-grid, .tft-units-grid * { overflow: visible !important; }
.unit-card, .unit-head, .unit-cover { transform: none !important; }
.unit-tags .trait-pop{ cursor: help; }