/* Player page (ver_jogador.asp), classic design: the legacy markup skinned inside .vj (with .inf-skin from
   css/club-info.css): pill tabs, card panels, label/value rows, and the shared meters in place of image bars. */

.vj { gap: 0; }
.vj :where(td, th, font, b, a, div, li, p, select) { font-family: "Roboto", Arial, sans-serif; }
.vj :where(td, th) { color: #23301a; }
.vj #table1 tr:last-child td { border-bottom: 0; }
.vj td[width='50%'][valign='top'] > table, .vj td[width='50%'][valign='top'] > div > table { width: 100% !important; }
.vj td[width='50%'][valign='top'] { padding: 0; }
.vj td[width='50%'][valign='top']:first-child { padding-inline-end: 8px; }
.vj td[width='50%'][valign='top'] + td[width='50%'][valign='top'] { padding-inline-start: 8px; }
.vj td[width='50%'][valign='top'] table.table_border { margin-bottom: 12px; }
.vj > table, .vj table[width='95%'], .vj table[width="95%"] { width: 100% !important; }

/* Player switcher (club's squad) */
.vj form[name='clubes'] table { width: 100% !important; margin: 0 0 4px; }
.vj form[name='clubes'] td { padding: 0; }
.vj form[name='clubes'] select { min-height: 34px; margin-inline-start: 6px; max-width: 100%; }

/* Tabs: Information / Contract, Skills / Other Skills, Main Stats / Other Stats - in a card head like .inf-card
   (the match report board green), the panel below as the card body */
.vj #headerTB {
  position: static; width: auto; height: auto; margin: 14px 0 0; padding: 8px 12px; border-radius: 12px 12px 0 0;
  background: radial-gradient(ellipse at top, #2f5a37 0%, transparent 70%), linear-gradient(180deg, #13321c 0%, #1f5426 100%);
}
.vj #headerTB ul#primary { position: static; width: auto; margin: 0; padding: 0; display: block; }
.vj #headerTB ul#primary > div { flex-wrap: wrap; gap: 6px; }
.vj #headerTB ul#primary li { display: inline-block; margin: 0 6px 0 0; list-style: none; }
.vj #headerTB ul#primary a, .vj #headerTB ul#primary span {
  float: none; width: auto; display: inline-flex; align-items: center; min-height: 28px; margin: 0; padding: 4px 14px;
  border: 1px solid rgba(255,255,255,0.28); border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: bold;
  background: rgba(255,255,255,0.1); color: #e4f3c4; text-decoration: none;
}
.vj #headerTB ul#primary span { background: #98d056; border-color: #98d056; color: #13321c; }
.vj #headerTB ul#primary a:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.45); color: #fff; margin: 0; padding: 4px 14px; }

/* Tab panels as the card bodies */
/* the first box (face card and details) has no tabs: a plain card, as on ver_equipa.asp */
.vj #main.vj-main--solo { margin-top: 4px; border-top: 1px solid #d6e4b5; border-radius: 12px; }
.vj #main { border: 1px solid #d6e4b5; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; padding: 0; overflow: hidden; box-shadow: 0 1px 2px rgba(35,48,26,0.05); }
.vj #contents { background: #fff; padding: 14px 16px; min-height: 0; }

/* Information tab: label / value rows beside the face and the shirt */
.vj #table1 { width: 100% !important; border-collapse: collapse; }
.vj #table1 td { padding: 5px 4px; vertical-align: middle; border-bottom: 1px solid #f0f4e6; font-size: 13px; }
.vj #table1 td[rowspan] { border-bottom: 0; vertical-align: top; padding-inline-end: 14px; }
.vj #table1 td[width='110'], .vj #table1 td[width="110"] {
  text-align: start !important; white-space: nowrap; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #6b7760;
}
.vj #table1 td[width='110'] b, .vj #table1 td[width="110"] b { font-weight: bold; }
.vj #table1 td[width='13'], .vj #table1 td[width='11'], .vj #table1 td[width="13"], .vj #table1 td[width="11"] { width: 6px; padding: 0; }
.vj #table1 font[size='+1'] { font-size: 22px; font-weight: bold; color: #1f2a17; }
/* Compact player card in place of the bare face: quality tier colours (PM-2026 tiers), quality and position on top,
   the flag, the surname and potential at the foot. Fixed size: it does not stretch with the info rows. */
.vj #table1 td.vj-face { width: 170px !important; min-width: 170px; vertical-align: top; padding: 4px 16px 4px 0; }
.vj #table1 td.vj-face td, .vj #table1 td.vj-face tr { border-bottom: 0; padding: 0; }
.vj-card {
  position: relative; z-index: 0; isolation: isolate; width: 150px; margin: 0 auto; padding: 30px 8px 0; overflow: hidden; border-radius: 14px; color: #1f2a17;
  /* its own stacking context: the rating, position and flag stay inside it, under the site menus */
  background: linear-gradient(160deg, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 3px 10px rgba(35,48,26,0.22);
}
.vj-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 38%); }
.vj-card--none   { --c1: #f7f8f5; --c2: #e4e8dc; --c3: #c2c9b6; }
.vj-card--base   { --c1: #f4f8ea; --c2: #d6e5b8; --c3: #a9c27c; }
.vj-card--bronze { --c1: #f5d6b9; --c2: #d69c6e; --c3: #9c5f38; }
.vj-card--silver { --c1: #f6f8fa; --c2: #d3d9df; --c3: #939ea9; }
.vj-card--gold   { --c1: #fff4c7; --c2: #f1c94f; --c3: #ad7f15; }
.vj-card--elite  { --c1: #fffbe0; --c2: #ffd640; --c3: #b97c00; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.65), 0 0 16px rgba(255,196,30,0.6); }
.vj-card > table, .vj-card > .face-viewer { position: relative; margin: 0 auto; }
/* the face renderer reserves ~200px for a ~175px face: trim the empty bottom */
.vj-card .face-viewer { height: 180px; overflow: hidden; }
.vj-card__rate { position: absolute; top: 8px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.vj-card__rate b { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.vj-card__rate span:first-child { margin-top: 2px; font-size: 13px; }
.vj-card__rate span { margin-top: 3px; font-size: 11px; font-weight: bold; letter-spacing: 0.4px; }
.vj-card__flag { position: absolute; top: 11px; right: 10px; z-index: 2; line-height: 0; }
.vj-card__flag img { border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
[dir='rtl'] .vj-card__rate { left: auto; right: 10px; }
[dir='rtl'] .vj-card__flag { right: auto; left: 10px; }
.vj-card__foot {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px -8px 0; padding: 6px 10px;
  background: rgba(255,255,255,0.5); border-top: 1px solid rgba(0,0,0,0.08);
}
.vj-card__name { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: 11px; font-weight: 900; letter-spacing: 0.6px; }
/* POT sits just above the strip (bottom-right of the face), so the centred name keeps the whole width */
.vj-card__pot { position: absolute; top: -26px; right: 6px; padding: 1px 6px; border-radius: 6px; background: #1f2a17; color: #fff; font-size: 10px; font-weight: bold; box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
[dir='rtl'] .vj-card__pot { right: auto; left: 6px; }
/* National team caps and goals: a second line of the card's foot */
.vj-card__nt {
  position: relative; z-index: 2; display: flex; justify-content: space-around; align-items: center; gap: 6px; margin: 0 -8px; padding: 4px 8px 6px;
  background: rgba(255,255,255,0.5); font-size: 11px; white-space: nowrap;
}
.vj-card__nt > span { display: inline-flex; align-items: center; gap: 3px; cursor: default; }
.vj-card__nt img { border-radius: 2px; }
.vj-card__nt b { font-weight: 900; color: #1f2a17; font-variant-numeric: tabular-nums; }
.vj-card__nt i { font-style: normal; font-size: 9px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.4px; color: #4d5a3f; }
.vj-card__ball { width: 11px; height: 11px; margin-inline-start: 4px; border-radius: 50% !important; }
.vj-card__u21 { position: relative; display: inline-flex; }
.vj-card__u21 sup { position: absolute; right: -5px; top: -6px; padding: 0 2px; border-radius: 3px; background: #2f6b22; color: #fff; font-size: 7px; font-weight: bold; line-height: 10px; }
.vj-card__nt .vj-card__u21 + b { margin-inline-start: 4px; }
.vj-mob { display: none; }
/* Listed for transfer (as PM-2026's banner): deadline, minimum price, Approach */
.vj-listed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; padding: 10px 14px; border-radius: 10px; background: #fdf3dc; border: 1px solid #f0d58e; }
.vj-listed__dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: #e08a00; box-shadow: 0 0 0 4px rgba(224,138,0,0.2); }
.vj-listed__txt { display: flex; flex-direction: column; min-width: 0; }
.vj-listed__txt b { font-size: 13px; font-weight: 800; color: #8a4f00; }
.vj-listed__txt span { font-size: 11px; color: #8a6420; }
.vj-listed__price { display: flex; flex-direction: column; align-items: flex-end; margin-inline-start: auto; }
.vj-listed__price span { font-size: 9px; font-weight: bold; letter-spacing: 0.8px; text-transform: uppercase; color: #8a6420; }
.vj-listed__price b { font-size: 16px; font-weight: 800; color: #6b3d00; font-variant-numeric: tabular-nums; }
.vj-listed--free { background: #e8f4dc; border-color: #b9dc8f; }
.vj-listed--free .vj-listed__dot { background: #4c9a1c; box-shadow: 0 0 0 4px rgba(76,154,28,0.2); }
.vj-listed--free .vj-listed__txt b { color: #2f6512; }
.vj .vj-listed--free a.vj-listed__btn { margin-inline-start: auto; background: #2f6b22; }
.vj .vj-listed--free a.vj-listed__btn:hover { background: #24561a; }
.vj a.vj-listed__btn { padding: 7px 14px; border-radius: 8px; background: #c97a00; color: #fff; font-size: 12px; font-weight: bold; text-decoration: none; }
.vj a.vj-listed__btn:hover { background: #a86500; color: #fff; }
.vj #table1:has(td.vj-face) tr.vj-pos { display: none; }
.vj-card__rate em { margin-top: 3px; padding: 0 4px; border-radius: 4px; background: #1f2a17; color: #fff; font-size: 8px; font-style: normal; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; }
.vj-chip { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: 6px; padding: 2px 10px; border-radius: 999px; background: #2f6b22; color: #fff; font-size: 11px; font-weight: bold; vertical-align: 3px; white-space: nowrap; }
.vj-chip b { font-size: 13px; }
.vj-chip--pot { background: #d9a400; color: #2a1d00; }
.vj-num { display: inline-block; min-width: 26px; margin-inline-start: 6px; padding: 1px 7px; border-radius: 6px; background: #eef4df; color: #1f4d0f; font-size: 12px; text-align: center; }
.vj #table1 .inf-bar { margin-inline-end: 8px; }
/* the manager's quote: one box (the table's second row is only a spacer) */
.vj #table3 { width: 100% !important; margin-bottom: 12px; }
.vj #table3 tr + tr { display: none; }
.vj #table3 td { padding: 10px 14px; background: #f7faef; border-left: 4px solid #9cc94a; border-radius: 10px; font-size: 13px; color: #2d3b1f; }
.vj #table3 td img { vertical-align: -2px; margin-inline-end: 4px; }

/* Contract tab */
.vj #AutoNumber2 { width: 100% !important; border-collapse: collapse; }
.vj #AutoNumber2 td { padding: 7px 6px; border-bottom: 1px solid #f0f4e6; font-size: 13px; }
.vj #AutoNumber2 td b { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: #6b7760; }

/* Skill and stats tables */
.vj .inf-skin table.table_border, .vj table.table_border { margin-bottom: 10px; }
.vj tr.list1 td, .vj tr.list2 td, .vj td.list1, .vj td.list2 { background: #fff; border-bottom: 1px solid #f0f4e6; padding: 5px 8px; font-size: 12px; }
.vj tr.list2 td, .vj td.list2 { background: #fafcf5; }
.vj .table_header td, .vj tr.table_header td { font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #2e6b12; }
.vj .jogadores { font-family: inherit; font-size: 12px; color: #23301a; }
.vj .inf-bar { vertical-align: middle; }
.vj #stats > table, .vj #other_stats > table { width: 100% !important; }
.vj tr.titulo5 td { background: #f3f8e6; border-bottom: 1px solid #e3ecd0; padding: 8px 4px; }
.vj tr.titulo5 .jogadores, .vj tr.titulo5 td { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.8px; color: #6b7760; }
.vj #stats td, .vj #other_stats td { padding: 6px 4px; font-size: 12px; font-variant-numeric: tabular-nums; }
.vj tt { font-family: inherit; }

@media (max-width: 820px) {
  /* phones: the key details beside the card instead of the kit; the same rows hide below */
  .vj #table1 td.vj-face { display: flex; flex: 1 1 100%; align-items: flex-start; gap: 12px; text-align: start; }
  .vj #table1 td.vj-face .vj-card { flex: 0 0 auto; width: 138px; margin: 0; }
  .vj #table1 tr:has(> td.vj-face) > td:not(.vj-face) { display: none; }
  .vj #table1:has(td.vj-face) tr.vj-core { display: none; }
  .vj-mob { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; padding-top: 2px; text-align: start; }
  .vj-mob__name { font-size: 17px; font-weight: bold; line-height: 1.2; color: #1f2a17; overflow-wrap: anywhere; }
  .vj-mob__name span { display: block; font-size: 11px; font-weight: normal; color: #6b7760; }
  .vj-mob__row { display: flex; flex-direction: column; gap: 1px; font-size: 12px; min-width: 0; }
  .vj-mob__row span { font-size: 9px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; color: #6b7760; }
  .vj-mob__row b { overflow-wrap: anywhere; }
  .vj-mob__row img { vertical-align: -1px; }
  /* compact: the column ends about level with the card */
  .vj-mob { gap: 5px; }
  .vj-mob__name { font-size: 14px; }
  .vj-mob__name span { font-size: 11px; }
  .vj-mob__row { gap: 0; line-height: 1.2; }
  .vj-mob__row span { font-size: 10px; letter-spacing: 0.6px; }
  .vj-mob__row b { font-size: 12px; font-weight: 600; }
  .vj-mob__row--bar b { display: flex; flex-wrap: nowrap; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; white-space: nowrap; }
  .vj-mob__row:not(.vj-mob__row--bar) + .vj-mob__row--bar { margin-top: 4px; padding-top: 6px; border-top: 1px dashed #d6e4b5; }
  .vj-mob__row--bar .inf-bar { flex: 0 0 40px; width: 40px; height: 5px; margin: 0; }
  /* shorter on phones */
  .vj #table1 td { padding-top: 4px; padding-bottom: 4px; font-size: 12px; }
  .vj tr.list1 td, .vj tr.list2 td, .vj td.list1, .vj td.list2 { padding: 4px 6px; }
  .vj td:has(> .vj-num) { white-space: nowrap; }
  .vj-num { margin-inline-start: 4px; padding: 0 5px; font-size: 11px; }
  .vj #contents { padding: 10px; }
  /* the page's layout tables must not grow past the screen (the info table's first row did: 522px on 375) */
  .vj > table { table-layout: fixed; }
  .vj > table td { min-width: 0; }
  .vj #table1 font[size='+1'] { white-space: normal; overflow-wrap: anywhere; }
  /* info card: face and shirt side by side on top, then label beside value */
  .vj #table1, .vj #table1 tbody { display: block; }
  .vj #table1 tr { display: flex; flex-wrap: nowrap; align-items: center; border-bottom: 1px solid #f0f4e6; }
  .vj #table1 tr:first-child { flex-wrap: wrap; }
  .vj #table1 td { display: block; border-bottom: 0; min-width: 0; }
  .vj #table1 td[rowspan] { order: -1; flex: 1 1 50%; width: auto !important; text-align: center; padding: 0 0 10px; }
  .vj #table1 td[rowspan] table { margin: 0 auto; }
  .vj #table1 td[rowspan] .pm-art { max-width: 120px; max-height: 144px; }
  .vj #table1 td.vj-face { width: auto !important; min-width: 0; padding: 0 0 10px; }
  .vj #table1 td.vj-face tr { display: table-row; border-bottom: 0; }
  .vj #table1 td.vj-face td { display: table-cell; }
  .vj #table1 td[width='110'], .vj #table1 td[width="110"] { flex: 0 0 38%; width: auto; white-space: normal; }
  .vj #table1 td[width='13'], .vj #table1 td[width='11'], .vj #table1 td[width="13"], .vj #table1 td[width="11"] { display: none; }
  .vj #table1 td:not([width]):not([rowspan]) { flex: 1 1 auto; overflow-wrap: anywhere; }
  .vj #table1 font[size='+1'] { font-size: 18px; }
  /* skills: the two columns stack */
  .vj td[width='50%'][valign='top'], .vj td[width='50%'][valign='top']:first-child, .vj td[width='50%'][valign='top'] + td[width='50%'][valign='top'] { display: block; width: 100% !important; padding: 0; }
  .vj td[width='50%'][valign='top'] td { white-space: normal; }
  .vj td.list1[width='35%'], .vj td.list2[width='35%'] { width: 30%; }
  /* stats: scroll sideways inside the card instead of squeezing the columns */
  .vj #stats > table, .vj #other_stats > table { display: block; overflow-x: auto; }
  .vj #stats td, .vj #other_stats td { white-space: nowrap; }
  .vj #contents { padding: 12px; }
  .vj #headerTB ul#primary a, .vj #headerTB ul#primary span { min-height: 34px; }
  .vj table { max-width: 100%; }
  .vj td[nowrap] { white-space: normal; }
}