/* ============================================================
   INTERACTION POLISH  (make-interfaces-feel-better)
   Loaded LAST so it wins the cascade over base component styles.
   Tactile press, tabular figures, image depth, hover lift.
   ============================================================ */

/* Tactile press — scale 0.96, transform-only so it stays interruptible.
   Exact properties only; never transition: all. */
.btn, .seg, .q-action, .post-actions button, .post-menu, .m-nav-item, .m-iconbtn,
.sb-rank, .sb-item, .lore-card, .wp-perk, .gm-btn, .more, .copy-field button, .ref-link button {
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
}
.btn:active, .seg:active, .q-action:active, .post-actions button:active, .post-menu:active,
.m-nav-item:active, .m-iconbtn:active, .sb-rank:active, .sb-item:active, .gm-btn:active,
.more:active, .copy-field button:active, .ref-link button:active {
  transform: scale(.96);
}

/* Card hover lift — premium, gamified feel on tappable cards. */
.lore-card, .wp-perk {
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, border-color .18s ease;
}
.lore-card:hover, .wp-perk:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .42);
}
.lore-card.sealed:hover { transform: none; box-shadow: none; }

/* Tabular figures everywhere a number changes live — no width jitter. */
.sb-rank-xp, .m-xp, .lb-xp, .lb-chg, .cd-num, .podium-xp, .podium-base-num,
.pf-stat strong, .ref-mini strong, .chip-xp, .xp-gain, .ally-headline strong {
  font-variant-numeric: tabular-nums;
}

/* Subtle 1px light outline on avatars for consistent depth on the dark UI. */
.av { outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; }

/* Scannable list rows: gentle hover wash. */
.lb-row:not(.lb-colhead) { transition: background-color .16s ease; }
.lb-row:not(.lb-colhead):hover { background: rgba(255, 255, 255, .03); }
.act-row, .liveact, .ref-item, .chain-row { border-radius: 10px; transition: background-color .16s ease; }
.act-row:hover, .liveact:hover, .ref-item:hover { background: rgba(255, 255, 255, .04); }

@media (prefers-reduced-motion: reduce) {
  .btn:active, .seg:active, .q-action:active, .post-actions button:active, .post-menu:active,
  .m-nav-item:active, .m-iconbtn:active, .sb-rank:active, .sb-item:active, .gm-btn:active,
  .more:active, .copy-field button:active, .ref-link button:active,
  .lore-card:hover, .wp-perk:hover { transform: none; }
}