/* =========================================================
   Hero de jugador (dialog)
   ========================================================= */


/* El <dialog> ocupa toda la pantalla (transparente) y centra la tarjeta.
   Asi funciona igual en Safari iOS, que no centra bien dialogs de alto variable. */
.ph {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 24px 16px;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.ph::backdrop {
  background: rgba(10, 16, 30, .5);
  backdrop-filter: blur(6px);
  animation: phFade .25s ease both;
}
.ph.is-closing::backdrop { animation: phFadeOut .18s ease both; }

.ph[open] { display: flex; align-items: center; justify-content: center; }
.ph__inner {
  position: relative;
  width: min(1060px, 100%);
  max-height: 100%;
  flex: 0 1 auto;
  overflow: auto;
  border-radius: 22px;
  background: var(--shell);
  box-shadow: 0 40px 100px -30px rgba(8, 14, 28, .6);
  animation: phIn .42s cubic-bezier(.2, .8, .2, 1) both;
  overscroll-behavior: contain;
}
.ph.is-closing .ph__inner { animation: phOut .18s ease both; }

@keyframes phFade { from { opacity: 0; } }
@keyframes phFadeOut { to { opacity: 0; } }
@keyframes phIn { from { opacity: 0; transform: translateY(24px) scale(.98); } }
@keyframes phOut { to { opacity: 0; transform: translateY(10px) scale(.99); } }

/* Medal themes */
.ph--gold   { --medal: var(--gold);   --medal-ink: var(--gold-ink);   --hero-bg: var(--gold-bg);   --medal-row: var(--gold-row);   --avatar-ink: #f4c24f; }
.ph--silver { --medal: var(--silver); --medal-ink: #5e6774;           --hero-bg: var(--silver-bg); --medal-row: var(--silver-row); --avatar-ink: #d7dde6; }
.ph--bronze { --medal: var(--bronze); --medal-ink: var(--bronze-ink); --hero-bg: var(--bronze-bg); --medal-row: var(--bronze-row); --avatar-ink: #e79a6c; }
.ph--none   { --medal: #9aa4b4;       --medal-ink: var(--navy);       --hero-bg: linear-gradient(135deg, #f8fafc 0%, #e8edf4 100%); --medal-row: #eef2f8; --avatar-ink: #ffffff; }

.ph__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 4px 14px -4px rgba(13, 22, 38, .3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s, background .2s;
}
.ph__close:hover { background: #fff; transform: rotate(90deg); }
.ph__close:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.ph__close svg { width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }

/* ---------- Hero ---------- */
.ph__hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  min-height: 300px;
  padding: 56px 56px 48px;
  background: var(--hero-bg);
  border-bottom: 1px solid rgba(13, 22, 38, .07);
  overflow: hidden;
  isolation: isolate;
}

.ph__bg {
  position: absolute;
  inset: 0 0 0 auto;
  width: 62%;
  z-index: -2;
  opacity: .32;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 65%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 65%);
}
.ph__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% 10%;
  filter: saturate(.4) brightness(1.15) contrast(.85);
}

.ph__ghost {
  position: absolute;
  z-index: -1;
  right: 250px;
  bottom: -0.2em;
  font-family: var(--display);
  font-weight: 900;
  font-size: 330px;
  line-height: .8;
  letter-spacing: -0.07em;
  color: var(--medal);
  opacity: .16;
  pointer-events: none;
  animation: ghostIn .9s .05s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes ghostIn { from { opacity: 0; transform: translateY(40px); } }

.ph__id {
  display: flex;
  align-items: center;
  gap: 30px;
  min-width: 0;
}

.ph__avatar {
  flex: none;
  width: 150px;
  height: 150px;
  font-size: 50px;
  border: 5px solid #fff;
  box-shadow: 0 20px 40px -18px rgba(13, 22, 38, .7), 0 0 0 1px rgba(13, 22, 38, .06);
  color: var(--avatar-ink);
}

.ph__who { min-width: 0; }

.ph__avatar-wrap { position: relative; flex: none; }
.ph__rank-chip {
  position: absolute;
  right: -6px;
  bottom: 2px;
  min-width: 54px;
  height: 54px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 4px solid #fff;
  background: var(--medal);
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 18px -8px rgba(13, 22, 38, .6);
}
.ph--none .ph__rank-chip { background: var(--navy); }

.ph__rankbox {
  display: grid;
  justify-items: center;
  align-content: center;
  min-width: 150px;
  padding: 16px 22px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(13, 22, 38, .08);
  box-shadow: 0 12px 30px -18px rgba(13, 22, 38, .35);
  backdrop-filter: blur(6px);
  text-align: center;
}
.ph__rankbox-k { font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.ph__rankbox strong {
  margin: 6px 0 4px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--medal-ink);
}
.ph--none .ph__rankbox strong { color: var(--ink); }


.ph__eyebrow { margin-bottom: 14px; color: var(--ink-2); }

.ph__name {
  margin: 0 0 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 5.6vw, 66px);
  line-height: .95;
  letter-spacing: -0.045em;
  color: #0a1222;
  overflow-wrap: break-word;
  hyphens: none;
}

.ph__name--sm { font-size: clamp(30px, 4.2vw, 52px); }

.ph__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  color: var(--ink-2);
}
.ph__meta i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--muted-2);
}

.ph__total {
  position: relative;
  display: grid;
  place-items: center;
  width: 220px;
  height: 140px;
  text-align: center;
}
.ph__total .laurel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--medal);
}
.ph__total strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--medal-ink);
  font-variant-numeric: tabular-nums;
}
.ph__total span {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--medal-ink);
  opacity: .85;
}

/* ---------- Body ---------- */
.ph__body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 32px;
  padding: 32px 56px 44px;
}

.ph__h {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Tournaments list */
.ph__rk.ph__tlist li {
  grid-template-columns: 62px minmax(0, 1fr) 84px 76px;
  gap: 12px;
  padding: 12px 16px;
}
.ph__rk.ph__tlist li[data-tid] { cursor: pointer; transition: background .15s; }
.ph__rk.ph__tlist li[data-tid]:hover { background: var(--head); }
.ph__rk.ph__tlist li[data-tid]:hover strong { text-decoration: underline; text-decoration-color: #c3c9d3; text-underline-offset: 3px; }
.ph__rk.ph__tlist li[data-tid]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.ph__t-date { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.2; }
.ph__t-date small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted-2); }
.ph__t-main { display: grid; gap: 5px; min-width: 0; }
.ph__t-main strong { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph__t-main > span { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ph__t-main .flag { width: 18px; height: 12px; }
.ph__t-main em { font-style: normal; font-size: 11px; color: #946a0b; }
.ph__t-pos {
  justify-self: center;
  min-width: 38px;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--head);
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: var(--ink-2);
}
.ph__t-pos.is-gold { background: var(--gold-row); color: var(--gold-ink); }
.ph__t-pos.is-silver { background: var(--silver-row); color: #5e6774; }
.ph__t-pos.is-bronze { background: var(--bronze-row); color: var(--bronze-ink); }
.ph__t-pts {
  text-align: right;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.ph__rk.ph__tlist li.is-off .ph__t-pts { color: #bcc2cc; text-decoration: line-through; font-weight: 600; }
.ph__rk.ph__tlist li.is-off .ph__t-main strong { color: var(--ink-2); }
.ph__rk.ph__tlist li.ph__t-sum {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px 16px;
  background: var(--head);
  font-size: 13.5px;
  color: var(--muted);
}
.ph__rk.ph__tlist li.ph__t-total { background: var(--medal-row); color: var(--ink); font-weight: 600; font-size: 14.5px; }
.ph__rk.ph__tlist li.ph__t-total .ph__t-pts { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.ph__t-empty { color: var(--muted); font-size: 14px; }
.ph__tlist { animation: rise .5s .05s cubic-bezier(.2, .7, .2, 1) both; opacity: 0; transform: translateY(10px); }

/* Rankings list */
.ph__rk {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.ph__rk li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 92px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.ph__rk li + li { border-top: 1px solid var(--line-soft); }
.ph__rk li.is-current { background: var(--medal-row); color: var(--ink); font-weight: 600; }
.ph__rk-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ph__rk-name .flag { width: 22px; height: 15px; }
.ph__rk-name svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.6; }
.ph__rk-pos {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ph__rk-pos small { margin-left: 5px; font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--muted-2); letter-spacing: 0; }
.ph__rk-pts { text-align: right; font-variant-numeric: tabular-nums; }
.ph__rk-pts small { color: var(--muted-2); font-weight: 400; }

.ph__side { display: grid; gap: 28px; align-content: start; }

/* Teammates */
.ph__mates .ph__rk li { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 8px; padding: 0; }
.ph__mates button {
  display: contents;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.ph__mates li { cursor: pointer; transition: background .15s; }
.ph__mates li:hover { background: var(--head); }
.ph__mates li > * { padding-top: 11px; padding-bottom: 11px; }
.ph__mate-rank { padding-left: 16px; font-size: 13px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.ph__mate-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ph__mate-pts { padding-right: 16px; font-variant-numeric: tabular-nums; }
.ph__mates-more { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted-2); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .ph { padding: 16px 12px; }
  .ph__inner { border-radius: 20px; }
  .ph__hero { grid-template-columns: 1fr 1fr; gap: 16px 12px; padding: 48px 18px 24px; min-height: 0; }
  .ph__id { grid-column: 1 / -1; }
  .ph__bg { width: 100%; opacity: .35; }
  .ph__ghost { right: 16px; font-size: 220px; }
  .ph__id { gap: 18px; }
  .ph__avatar { width: 88px; height: 88px; font-size: 30px; border-width: 4px; }
  .ph__eyebrow { font-size: 10px; letter-spacing: .26em; margin-bottom: 8px; }
  .ph__name { font-size: 34px; margin-bottom: 10px; }
  .ph__meta { font-size: 14px; }
  .ph__total { width: 170px; height: 108px; justify-self: center; }
  .ph__rankbox { min-width: 0; padding: 10px 14px; justify-self: center; }
  .ph__rankbox strong { font-size: 44px; }
  .ph__rank-chip { min-width: 40px; height: 40px; font-size: 14px; border-width: 3px; padding: 0 7px; right: -8px; bottom: -4px; }
  .ph__total strong { font-size: 36px; }
  .ph__body { grid-template-columns: 1fr; gap: 26px; padding: 24px 16px 32px; }
  .ph__rk.ph__tlist li { grid-template-columns: 46px minmax(0, 1fr) 70px 58px; gap: 8px; padding: 11px 12px; }
}

/* Mensaje "sin torneos": una sola columna a todo el ancho */
.ph__rk.ph__tlist li.ph__t-empty { grid-template-columns: 1fr; padding: 16px; font-size: 14px; color: var(--muted); }

/* Filas de torneos de la ficha: todas iguales de alto */
.ph__rk.ph__tlist li[data-tid] { min-height: 72px; }
.ph__t-main strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph__t-main > span { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
.ph__t-main > span .tbadge { flex: none; }
.ph__t-main em { display: none; }
@media (max-width: 900px) {
  .ph__rk.ph__tlist li[data-tid] { min-height: 70px; }
  .ph__t-main .tbadge { font-size: 10.5px; padding: 0 7px; height: 20px; }
}
@media (max-width: 900px) {
  .ph__rk.ph__tlist li[data-tid] { grid-template-columns: 50px minmax(0, 1fr) auto 62px; gap: 10px; }
  .ph__t-date { font-size: 12.5px; }
  .ph__t-main strong { font-size: 14px; }
  .ph__t-pos { padding: 4px 7px; font-size: 14px; }
}
@media (max-width: 900px) {
  /* nombre en hasta 2 lineas, espacio reservado igual en todas las filas */
  .ph__t-main strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    line-height: 1.25;
  }
  .ph__t-main { align-content: center; align-self: stretch; }
  /* misma altura para todas: la de un nombre de 2 lineas + bandera */
  .ph__rk.ph__tlist li[data-tid] { height: 86px; min-height: 0; padding-top: 0; padding-bottom: 0; }
}

/* El foco al abrir va a la tarjeta (sin marco); el marco del boton cerrar solo con teclado */
.ph__inner:focus { outline: none; }

@media (max-width: 400px) {
  .ph__rankings .ph__rk li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 12px; }
  .ph__rk-pos small { margin-left: 3px; }
}

/* Nombres de jugador/equipo: nunca partir una palabra por la mitad */
.ph__name { overflow-wrap: normal; word-break: keep-all; hyphens: none; }

/* movil: nombres de torneo de la ficha sin cortar palabras ("Championship") */
@media (max-width: 900px) {
  .ph__rk.ph__tlist li[data-tid] { grid-template-columns: 44px minmax(0, 1fr) auto 58px; gap: 8px; }
  .ph__t-main strong { font-size: 13px; line-height: 1.2; overflow-wrap: normal; word-break: keep-all; -webkit-line-clamp: 3; }
  .ph__t-pos { padding: 4px 6px; font-size: 13px; }
  .ph__t-pts { font-size: 15px; }
}