/**
 * Club List Player card compose (modern season UI).
 * Canvas base: 1024 × 1536 (club-player-bg.png). Positions use % for tweaks.
 *
 * html2canvas gotchas used here:
 * - Never set parent font-size:0 (clips glyphs)
 * - Prefer overflow-x clip only; overflow-y visible on text rows
 * - line-height ~1.2 (not 1) so bold/uppercase ascenders aren't cropped
 */

.club-player-banner {
  --cp-w: 1024px;
  --cp-h: 1536px;

  /* Club logo / shield */
  --cp-logo-left: 6.3%;
  --cp-logo-top: 31.4%;
  --cp-logo-w: 11.5%;
  --cp-logo-h: 7.7%;

  /* Total players number (red count inside baked TOTAL PLAYERS box) */
  --cp-total-left: 81.2%;
  --cp-total-top: 26.6%;
  --cp-total-w: 14.2%;
  --cp-total-h: 5.6%;

  /* Club name slot — slightly shorter than full PNG bar; font is fixed px */
  --cp-name-left: 24.5%;
  --cp-name-top: 38.8%;
  --cp-name-w: 53.5%;
  --cp-name-h: 2.5%;
  --cp-name-bg: #021873;

  /* Dynamic player lists — taller so dense Def/Mid rows don't clip last names */
  --cp-lists-left: 6.7%;
  --cp-lists-top: 41.6%;
  --cp-lists-w: 88.3%;
  --cp-lists-h: 49.2%;

  --cp-row-h: 24px;
  --cp-avatar: 18px;
  --cp-avatar-top: 4px;
  --cp-font: 16px;
  --cp-code-font: 16px;
  --cp-row-pad-top: 0px;
  --cp-gap: 8px;
  --cp-col-gap: 8px;
  --cp-pad-x: 10px;
  --cp-pad-y: 0px;
  --cp-head-pad-y: 6px;
  --cp-head-pad-x: 11px;

  position: relative;
  width: var(--cp-w);
  height: var(--cp-h);
  max-width: 100%;
  aspect-ratio: 1024 / 1536;
  overflow: hidden;
  background: #fff;
  color: #0b3d91;
  /* Roboto (site header) — full Vietnamese; avoid Arial faux-bold glyph fallback */
  font-family: "Roboto", "Segoe UI", Arial, Helvetica, sans-serif;
  user-select: none;
  /* Season UI parents often set text-align:center — names must stay left of avatar */
  text-align: left;
}

.club-player-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: 1;
  pointer-events: none;
}

.club-player-banner__layer {
  position: absolute;
  z-index: 4;
}

.club-player-banner__logo {
  left: var(--cp-logo-left);
  top: var(--cp-logo-top);
  width: var(--cp-logo-w);
  height: var(--cp-logo-h);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  overflow: hidden;
  box-sizing: border-box;
}

.club-player-banner__logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.club-player-banner__total {
  left: var(--cp-total-left);
  top: var(--cp-total-top);
  width: var(--cp-total-w);
  height: var(--cp-total-h);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  overflow: visible;
  box-sizing: border-box;
}

.club-player-banner__total-text {
  color: #e31b23;
  font-weight: 700;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-style: italic;
  display: block;
  padding: 0;
  margin: 0;
}

.club-player-banner__club-name {
  left: var(--cp-name-left);
  top: var(--cp-name-top);
  width: var(--cp-name-w);
  height: var(--cp-name-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Exact PNG bar navy — wrong hex reads as a second box outside the frame */
  background: var(--cp-name-bg);
  box-sizing: border-box;
  padding: 0;
  line-height: 0;
}

.club-player-banner__club-name-text {
  color: #fff;
  font-weight: 700;
  font-size: 33px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  margin: 0;
}

.club-player-banner__club-name .club-player-banner__bake {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.club-player-banner__list-mask {
  left: var(--cp-lists-left);
  top: var(--cp-lists-top);
  width: var(--cp-lists-w);
  height: var(--cp-lists-h);
  /* Above bg (2), below player lists (4) — hides baked empty boxes in bg art */
  z-index: 3;
  background: #f7f9fc;
  border-radius: 6px;
}

.club-player-banner__lists {
  left: var(--cp-lists-left);
  top: var(--cp-lists-top);
  width: var(--cp-lists-w);
  height: var(--cp-lists-h);
  z-index: 4;
  box-sizing: border-box;
  padding: 2px;
  overflow: hidden;
}

.club-player-banner__lists-inner {
  /* Top (GK/FW) shares leftover height with bottom (Def/Mid). */
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: minmax(0, 0.42fr) minmax(0, 0.58fr);
  column-gap: var(--cp-gap);
  row-gap: var(--cp-col-gap);
  align-content: stretch;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  transform-origin: top center;
}

.club-player-banner__group {
  background: #fff;
  border: 1.5px solid #1a4fa0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  align-self: stretch;
  text-align: left;
}

.club-player-banner__group[data-pos="g"] { grid-column: 1; grid-row: 1; }
.club-player-banner__group[data-pos="f"] { grid-column: 2; grid-row: 1; }
.club-player-banner__group[data-pos="d"] { grid-column: 1; grid-row: 2; }
.club-player-banner__group[data-pos="m"] { grid-column: 2; grid-row: 2; }

.club-player-banner__group[hidden] {
  display: none !important;
}

.club-player-banner__group-head {
  display: flex;
  align-items: center;
  align-self: flex-start;
  max-width: 100%;
  background: #123f8c;
  color: #fff;
  height: auto;
  line-height: 1;
  padding: var(--cp-head-pad-y) var(--cp-head-pad-x) calc(var(--cp-head-pad-y) - 1px);
  border-bottom-right-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
}

.club-player-banner__group-head span {
  display: block;
  line-height: 1;
  padding: 0;
  margin: 0;
}

.club-player-banner__group-head svg {
  width: 13px;
  height: 13px;
  display: block;
  flex: 0 0 13px;
  margin-right: 5px;
}

.club-player-banner__group-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: var(--cp-pad-y) var(--cp-pad-x) 8px;
  box-sizing: border-box;
  text-align: left;
}

.club-player-banner__row {
  position: relative;
  display: block;
  height: var(--cp-row-h);
  min-height: var(--cp-row-h);
  line-height: 0;
  padding: 0;
  border-bottom: 1px solid rgba(18, 63, 140, 0.08);
  box-sizing: border-box;
  /* visible Y so baked Vietnamese tone marks aren't cropped by row box */
  overflow-x: hidden;
  overflow-y: visible;
  white-space: nowrap;
  text-align: left;
}

.club-player-banner__row:last-child {
  border-bottom: 0;
}

/* Pre-layout HTML (replaced by .club-player-banner__bake before capture) */
.club-player-banner__avatar {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--cp-avatar);
  height: var(--cp-avatar);
  margin: calc(var(--cp-avatar) / -2) 0 0;
  border-radius: 50%;
  object-fit: fill;
  background: #d9e4f5;
  display: block;
  padding: 0;
  border: 0;
}

.club-player-banner__pname {
  position: absolute;
  left: calc(var(--cp-avatar) + 8px);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  color: #15499a;
  font-weight: 700;
  font-size: var(--cp-font);
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-align: left !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0;
  height: auto;
}

/* Canvas-baked row/header — pixel-perfect vertical align for html2canvas */
.club-player-banner__bake {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: top;
}

.club-player-banner__group-head .club-player-banner__bake {
  width: auto;
  height: auto;
  max-width: 100%;
}

.club-player-banner-host {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1024px;
  height: 1536px;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  z-index: -1;
}

/* List cards reuse MoM card chrome (Preview / Share on hover) */
.ctm-component--modern .ctm-card--list-player,
.ctm-card--list-player {
  grid-column: span 1;
}

.ctm-component--modern .ctm-card--list-player .ctm-card__stage,
.ctm-card--list-player .ctm-card__stage {
  position: relative;
  height: auto !important;
  min-height: 0;
  aspect-ratio: 1024 / 1536;
  padding: 0;
  overflow: hidden;
  background: #020617;
  display: block;
}

.ctm-component--modern .ctm-card--list-player .ctm-card__trophy,
.ctm-component--modern .ctm-card--list-player .ctm-card__mom-img,
.ctm-card--list-player .ctm-card__trophy,
.ctm-card--list-player .ctm-card__mom-img {
  position: absolute !important;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center top;
  display: block;
  filter: none !important;
  transform: none !important;
}

.ctm-card--list-player .ctm-card__body {
  display: none;
}

.ctm-card--list-player .ctm-card__badge {
  z-index: 4;
}

.ctm-card--list-player:hover .ctm-card__mom-actions,
.ctm-card--list-player:focus-within .ctm-card__mom-actions {
  opacity: 1;
  pointer-events: auto;
}

.ctm__row[data-award-kind="list_player"] .ctm__col--award {
  opacity: 0.85;
}