/* Player stats tables: avatar + name (aligned with Survivors v2–style thumbnails) */

/*
 * JS (styleBootstrapTable / applyTableStylingWithoutSorting) used to set table overflow:hidden — that
 * clips the scaled avatar inside the table box. Force visible on player-stats table ids.
 */
#playerstable,
#playerstable-tourny,
#playerstable_single,
#playerstable_lifetime,
#playerstablebydiv_formatted {
  overflow: visible !important;
}

.table-responsive:has(#playerstable),
.table-responsive:has(#playerstable-tourny),
.table-responsive:has(#playerstable_single),
.table-responsive:has(#playerstable_lifetime),
.table-responsive:has(#playerstablebydiv_formatted) {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Keep every cell vertically centered when the name column is taller (avatar row). */
#playerstable tbody td,
#playerstable-tourny tbody td,
#playerstablebody td,
#playerstablebody-tourny td,
#playerstable_single tbody td,
#playerstable_lifetime tbody td,
#playerstablebydiv_formatted tbody td {
  vertical-align: middle !important;
}

#playerstable thead th,
#playerstable-tourny thead th,
#playerstable_single thead th,
#playerstable_lifetime thead th,
#playerstablebydiv_formatted thead th {
  vertical-align: middle;
}

/* Override styleBootstrapTable() inline line-height on name cells (reduces stray line-box height). */
#playerstable tbody td.playerstats-name-td,
#playerstable-tourny tbody td.playerstats-name-td,
#playerstablebody td.playerstats-name-td,
#playerstablebody-tourny td.playerstats-name-td,
#playerstable_single tbody td.playerstats-name-td,
#playerstable_lifetime tbody td.playerstats-name-td,
#playerstablebydiv_formatted tbody td.playerstats-name-td {
  line-height: 1 !important;
}

.playerstats-name-td {
  text-align: left !important;
  vertical-align: middle;
  overflow: visible !important;
  position: relative;
}

.playerstats-name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 0;
  text-align: left;
}

/* Favorite star (injected first) stays on the same row as avatar + name */
.playerstats-name-cell > a:first-child {
  flex-shrink: 0;
  align-self: center;
}

/*
 * Photo avatars: img is position:absolute so flex no longer uses intrinsic bitmap min-height
 * (the #1 cause of taller rows vs initials-only rows).
 */
.playerstats-avatar-frame {
  box-sizing: border-box;
  position: relative;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  flex-shrink: 0;
  align-self: center;
  overflow: hidden;
  border-radius: 50%;
  line-height: 0;
  font-size: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.25);
  transform-origin: center center;
  transition: transform 0.18s ease-out;
  will-change: transform;
}

.playerstats-avatar-frame .playerstats-player-avatar {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.playerstats-player-initials {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  max-width: 26px;
  max-height: 26px;
  border-radius: 50%;
  flex: 0 0 26px;
  flex-shrink: 0;
  align-self: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #fff;
  /* Fallback if JS has not set per-memid color yet */
  background: #555;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform-origin: center center;
  transition: transform 0.18s ease-out;
  will-change: transform;
}

.playerstats-name-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  text-decoration: none;
}

.playerstats-name-link .playerstats-name-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hover zoom (layout box stays 26px; transform draws larger) */
.playerstats-name-link:hover .playerstats-avatar-frame,
.playerstats-name-link:hover .playerstats-player-initials {
  transform: scale(2.35);
}

/*
 * Later <tr>s paint after earlier ones, so the zoom sits under the row below.
 * With border-collapse:collapse, z-index on <tr> is often ignored — lift every <td> in the hovered row.
 * Must be above sticky thead th (z-index ~100 from styleBootstrapTable) so zoom isn't under the header.
 */
#playerstable tbody tr:has(.playerstats-name-link:hover) td,
#playerstable-tourny tbody tr:has(.playerstats-name-link:hover) td,
#playerstablebody tr:has(.playerstats-name-link:hover) td,
#playerstablebody-tourny tr:has(.playerstats-name-link:hover) td,
#playerstable_single tbody tr:has(.playerstats-name-link:hover) td,
#playerstable_lifetime tbody tr:has(.playerstats-name-link:hover) td,
#playerstablebydiv_formatted tbody tr:has(.playerstats-name-link:hover) td {
  position: relative;
  z-index: 150;
}