/* /css/styles.css */
/* =========================================================
   klaskranking.com — Leaderboard
   ========================================================= */

:root {
  --page: #eceff4;
  --shell: #fbfcfd;
  --surface: #ffffff;
  --ink: #0d1626;
  --ink-2: #2a3446;
  --muted: #576072;
  --muted-2: #626b7c;
  --line: #e5e8ee;
  --line-soft: #eef0f4;
  --head: #f5f6f9;
  --navy: #13213b;

  /* Medals */
  --gold: #d29b1e;
  --gold-ink: #9a6c0a;   /* cifras grandes en oro (podio): >= 3:1 sobre los fondos dorados */
  --gold-text: #8c6209;  /* texto pequeño en oro (puestos, tablas): >= 4.5:1 sobre --gold-row y blanco */
  --gold-bg: linear-gradient(135deg, #fffaf0 0%, #fdf0cf 100%);
  --gold-line: #efd08a;
  --gold-row: #fdf3da;

  --silver: #8d96a4;
  --silver-ink: #7d8694;
  --silver-bg: linear-gradient(135deg, #fbfcfd 0%, #eef1f5 100%);
  --silver-line: #d8dde5;
  --silver-row: #eef1f6;

  --bronze: #b65b2c;
  --bronze-ink: #ae5426;
  --bronze-bg: linear-gradient(135deg, #fdf3ec 0%, #f8e2d4 100%);
  --bronze-line: #e7b597;
  --bronze-row: #fbe9df;

  --c-int: #2f5bd3;
  --c-nat: #d29b1e;
  --c-loc: #24998a;
  --c-kls: #13213b;

  --radius: 14px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 0;
}

a { color: inherit; }
button, input, select { font: inherit; color: inherit; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Shell ---------- */
.shell {
  max-width: 1400px;
  margin: 20px auto;
  background: var(--shell);
  border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 26, 44, .04), 0 24px 70px -20px rgba(16, 26, 44, .14);
  overflow: hidden;
  position: relative;
}

/* ---------- Top bar ---------- */
.topbar {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  height: 78px;
  padding: 0 40px 0 42px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(251, 252, 253, .9);
  backdrop-filter: blur(8px);
}

.logo {
  font-family: var(--font);
  font-size: 27px;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #344360;
  font-weight: 400;
  margin-right: 70px;
}
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo b { color: var(--ink); font-weight: 700; }
.logo__ika {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  box-shadow: 0 4px 12px -4px rgba(210, 155, 30, .55);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo__ika { transform: rotate(-12deg) scale(1.06); }
}

.nav { display: flex; gap: 58px; height: 100%; }
.nav__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: var(--muted);
  font-size: 15px;
  transition: color .2s;
}
.nav__link:hover { color: var(--ink); }
.nav__link.is-active { color: var(--ink); font-weight: 500; }
.nav__link.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: #c9cfd9; box-shadow: 0 0 0 4px rgba(19, 33, 59, .06); }
.search svg { width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 14.5px; }
.search input::placeholder { color: var(--muted-2); }

.account {
  width: 54px;
  height: 43px;
  border: 0;
  border-radius: 9px;
  background: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(19, 33, 59, .6);
  transition: transform .15s, background .2s;
}
.account:hover { background: #1c2d4d; }
.account:active { transform: scale(.96); }
.account svg { width: 20px; height: 20px; fill: none; stroke: rgba(255,255,255,.75); stroke-width: 1.8; stroke-linecap: round; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 246px;
  padding: 44px 42px 40px;
}

.hero__media {
  position: absolute;
  top: 0;
  right: 0;
  width: 63%;
  height: calc(100% + 70px);
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 48%),
    linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 18%, #000 48%),
    linear-gradient(180deg, #000 55%, transparent 100%);
  mask-composite: intersect;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 18% 8%;
  filter: saturate(.42) brightness(1.18) contrast(.86);
  transform: scale(1);
  animation: heroIn 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(240, 244, 250, .38), rgba(240, 244, 250, .18));
}
@keyframes heroIn {
  from { opacity: 0; transform: scale(1.1); }
  to   { opacity: 1; transform: scale(1); }
}

.hero__text { position: relative; z-index: 1; max-width: 560px; }

.eyebrow {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #3e4757;
}

.hero__title {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 78px;
  line-height: .92;
  letter-spacing: -0.045em;
  color: #0a1222;
}

.hero__lead {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.5;
  color: var(--muted);
}

.hero__tagline {
  position: absolute;
  z-index: 1;
  right: 26px;
  top: 146px; /* su ultima linea ("One global ranking") a la altura del texto de debajo del titulo, ajustado por Alvaro */
  margin: 0;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #4a5465;
}

/* ---------- Board ---------- */
.board {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 534px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 0 18px 24px 20px;
}

/* ---------- Podium cards ---------- */
.podium { display: grid; gap: 20px; }

.pod {
  position: relative;
  padding: 22px 20px 16px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  opacity: 0;
  transform: translateY(14px);
  animation: rise .7s cubic-bezier(.2, .7, .2, 1) forwards;
  transition: box-shadow .25s, translate .25s;
}
.pod:nth-child(2) { animation-delay: .08s; }
.pod:nth-child(3) { animation-delay: .16s; }
.pod { cursor: pointer; }
/* "translate" y no "transform": la animacion de entrada (rise, forwards) fija transform y tapaba el hover */
.pod:hover { translate: 0 -3px; box-shadow: 0 18px 36px -18px rgba(16, 26, 44, .35); }
.pod:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }

.pod--1 { background: var(--gold-bg); border-color: var(--gold-line); box-shadow: 0 14px 34px -18px rgba(210, 155, 30, .55); --medal: var(--gold); --medal-ink: var(--gold-ink); }
.pod--2 { background: var(--silver-bg); border-color: var(--silver-line); box-shadow: 0 14px 34px -20px rgba(70, 85, 110, .35); --medal: var(--silver); --medal-ink: var(--silver-ink); }
.pod--3 { background: var(--bronze-bg); border-color: var(--bronze-line); box-shadow: 0 14px 34px -18px rgba(182, 91, 44, .4); --medal: var(--bronze); --medal-ink: var(--bronze-ink); }

@keyframes rise { to { opacity: 1; transform: none; } }

.pod__head {
  display: grid;
  grid-template-columns: 40px 106px minmax(0, 1fr) 138px;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(13, 22, 38, .08);
}

.pod__rank {
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--medal-ink); /* el tono oscuro de la medalla: el claro no llegaba a 3:1 sobre su fondo */
  text-align: center;
}
.pod__crown {
  position: absolute;
  left: 50%;
  top: -27px;
  width: 28px;
  transform: translateX(-50%);
  fill: var(--gold);
}

.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 20%, #2b3b5c 0%, #121c30 70%);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  user-select: none;
}
.pod .avatar {
  width: 106px;
  height: 106px;
  font-size: 34px;
  border: 4px solid #fff;
  box-shadow: 0 10px 24px -10px rgba(13, 22, 38, .55), 0 0 0 1px rgba(13, 22, 38, .06);
  color: var(--medal);
}
.pod--1 .avatar { color: #f4c24f; }
.pod--2 .avatar { color: #d7dde6; }
.pod--3 .avatar { color: #e79a6c; }

.pod__id { min-width: 0; }
.pod__name {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.pod__name--sm { font-size: 23px; }
.pod__name--xs { font-size: 19px; }
.pod__country {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-2);
}
.pod__team {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pod__score {
  position: relative;
  display: grid;
  place-items: center;
  width: 138px;
  height: 84px;
  text-align: center;
}
.pod__score .laurel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--medal-ink); /* hojas del mismo color que la cifra */
  opacity: .9;
}
.pod__score strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--medal-ink);
  font-variant-numeric: tabular-nums;
}
.pod__score strong.is-long { font-size: 24px; }
.pod__score span {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--medal-ink);
}
.pod--2 .pod__score strong, .pod--2 .pod__score .laurel { color: #5e6774; } /* hojas del mismo gris que la cifra */
.pod--2 .pod__score span { color: var(--muted); }

/* tantas columnas iguales como cifras haya (4 en el mundial, 3 en los nacionales, 2 en 2024/25): repartidas y centradas */
.pod__stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  padding-top: 14px;
}
.pod__stat {
  text-align: center;
  padding: 0 6px;
}
.pod__stat + .pod__stat { border-left: 1px solid rgba(13, 22, 38, .08); }
.pod__stat b {
  display: block;
  font-size: 17.5px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pod__stat span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--muted); }

/* ---------- Flags ---------- */
.flag {
  width: 26px;
  height: 18px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(13, 22, 38, .08);
  background: var(--line-soft);
}
/* Suiza: bandera cuadrada de verdad, centrada en una caja del mismo ancho que las demas (asi la bandera queda
   centrada con el resto y el "SUI" de al lado alineado con "GER"); sin fondo gris ni borde alrededor */
.flag.flag--sq { object-fit: contain; background: none; box-shadow: none; }

/* ---------- Table card ---------- */
.table-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 20px 18px;
  box-shadow: 0 1px 2px rgba(16, 26, 44, .03), 0 18px 40px -26px rgba(16, 26, 44, .25);
  opacity: 0;
  animation: rise .7s .12s cubic-bezier(.2, .7, .2, 1) forwards;
  transform: translateY(14px);
}

.table-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 0 6px;
}
.table-card__head h2 {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 31px;
  letter-spacing: -0.03em;
  line-height: 1.05;
}
.table-card__head p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Selects */
.select {
  position: relative;
  display: inline-flex;
}
.select::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--ink-2);
  border-bottom: 1.6px solid var(--ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.select select {
  appearance: none;
  -webkit-appearance: none;
  height: 36px;
  padding: 0 38px 0 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font-size: 13.5px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.select select:hover { border-color: #cfd5de; }
.select select:focus-visible { outline: 0; border-color: #b8c0cc; box-shadow: 0 0 0 4px rgba(19, 33, 59, .07); }
.select--lg select { height: 42px; min-width: 164px; font-size: 14.5px; padding-left: 15px; }
.select--lg::after { right: 18px; }

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 6px 14px;
}
.toolbar__count { margin-left: auto; font-size: 13px; color: var(--muted-2); }

/* Table */
.table-wrap { overflow-x: auto; overflow-y: hidden; } /* sin barra vertical fugaz al entrar filas (animacion rowIn) */

.ranking {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.ranking thead th {
  height: 56px;
  padding: 0 10px;
  background: var(--head);
  font-size: 13.5px;
  font-weight: 400;
  color: var(--muted);
  text-align: center;
  line-height: 1.25;
}
.ranking thead th:first-child { border-radius: 9px 0 0 9px; }
.ranking thead th:last-child { border-radius: 0 9px 9px 0; }
.ranking thead th.c-player { text-align: left; }

.ranking th button {
  border: 0;
  background: none;
  padding: 4px 0;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: inherit;
}
.ranking th button:hover { color: var(--ink); }
.ranking th button.is-sorted::after {
  content: "";
  border-left: 4.5px solid transparent;
  border-right: 4.5px solid transparent;
  border-top: 5.5px solid var(--ink);
}
.ranking th button.is-asc::after { transform: rotate(180deg); }
.ranking th button.is-sorted { color: var(--ink); }

.ranking td {
  height: 43px;
  padding: 0 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
  font-size: 15px;
  color: var(--ink-2);
  white-space: nowrap;
}
.ranking tbody tr { animation: rowIn .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } }

.ranking tbody tr { cursor: pointer; }
.ranking tbody tr:hover td { background: #f8f9fb; }
.ranking tbody tr:hover td.c-player { text-decoration: underline; text-decoration-color: #c3c9d3; text-underline-offset: 3px; }
.ranking tbody tr:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

.c-rank { width: 46px; }
.ranking td.c-rank { font-size: 15px; color: var(--ink-2); }

/* Flechas de subir/bajar puestos tras los ultimos torneos (js/app.js, moveHtml) */
.ranking.has-moves .c-rank { width: 78px; }
.ranking.has-moves td.c-rank { text-align: left; padding-left: 14px; }
.mv { display: inline-flex; align-items: center; gap: 2px; margin-left: 7px; font-size: 11.5px; font-weight: 700; vertical-align: 1px; letter-spacing: 0; }
.mv i { font-style: normal; font-size: 9px; } /* el triangulo (decorativo, aria-hidden) */
.mv--up { color: #12804a; }
.mv--down { color: #8a93a3; font-weight: 600; }
.mv--new { padding: 1px 5px; border-radius: 4px; background: #e3f4ea; color: #12804a; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; }
.moves-note { margin: 2px 6px 10px; font-size: 12.5px; color: var(--muted-2); }
/* primera vez que se ven: las de subir suben con un pequeño rebote; las de bajar solo aparecen */
.ranking.mv-anim .mv { animation: mvIn .5s ease both; animation-delay: .25s; }
.ranking.mv-anim .mv--up, .ranking.mv-anim .mv--new { animation: mvUp .75s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: .3s; }
@keyframes mvIn { from { opacity: 0; } }
@keyframes mvUp { 0% { opacity: 0; transform: translateY(9px); } 60% { opacity: 1; } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ranking.mv-anim .mv { animation: none; } }
/* movil: la flecha debajo del puesto, para no quitarle sitio al nombre */
@media (max-width: 600px) {
  .ranking.has-moves .c-rank { width: 48px; }
  .ranking.has-moves td.c-rank { text-align: center; padding: 0 4px; line-height: 1.15; }
  .ranking.has-moves .mv { display: flex; justify-content: center; margin: 2px 0 0; font-size: 11px; }
  .ranking.has-moves .mv--new { padding: 0 3px; letter-spacing: 0; }
}
.ranking td.c-player {
  text-align: left;
  color: var(--ink);
  font-size: 15.5px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-player small {
  display: block;
  margin-top: -2px;
  font-size: 11.5px;
  color: var(--muted-2);
  overflow: hidden;
  text-overflow: ellipsis;
}
.c-nat { width: 92px; }
.ranking td.c-nat { text-align: left; }
.nat { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.nat .flag { width: 24px; height: 16px; }

.ranking td.c-total {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.ranking td.is-zero { color: #b7bdc7; }

/* Top-3 highlighted rows */
/* franja de color con 2px blancos arriba y abajo: el texto queda centrado en la franja y el hueco entre filas es igual */
.ranking tr.is-top td { border-top: 2px solid var(--surface); border-bottom: 2px solid var(--surface); }
.ranking tr.is-top td:first-child { border-radius: 9px 0 0 9px; }
.ranking tr.is-top td:last-child { border-radius: 0 9px 9px 0; }
.ranking tr.is-top td.c-player { font-weight: 600; }
.ranking tr.top-1 td, .ranking tr.top-1:hover td { background: var(--gold-row); }
.ranking tr.top-2 td, .ranking tr.top-2:hover td { background: var(--silver-row); }
.ranking tr.top-3 td, .ranking tr.top-3:hover td { background: var(--bronze-row); }
/* el numero de los tres primeros, igual en los tres (antes solo el 3 iba en negrita) */
.ranking tr.is-top td.c-rank { font-weight: 600; }
.ranking tr.top-1 td.c-rank { color: var(--gold-text); }
.ranking tr.top-2 td.c-rank { color: #5b6574; }
.ranking tr.top-3 td.c-rank { color: #8f3f17; }
.ranking tr.is-top + tr:not(.is-top) td { border-top: 0; }

.empty { margin: 32px 0; text-align: center; color: var(--muted); }

.table-card__foot { display: flex; justify-content: center; padding-top: 16px; }
.table-card__foot:empty, .table-card__foot[hidden] { display: none; }
.more {
  height: 40px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.more:hover { background: var(--head); border-color: #d6dbe3; }

/* ---------- Footer ---------- */
.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 16px 42px 22px;
  font-size: 12px;
  color: var(--muted-2);
}
.foot a { color: var(--muted); text-decoration: none; }
/* enlaces dentro del texto del pie (correo): subrayados para distinguirlos del texto */
.foot a[href^="mailto:"] { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(13, 22, 38, .35); }
.foot a:hover { text-decoration: underline; }

/* Enlaces a la web oficial de KlasKing (www.klasking.com): siempre subrayados */
.kl-link,
.foot a.kl-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness .15s;
}
.kl-link:hover { text-decoration-thickness: 2px; }
.kl-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 50;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .logo { margin-right: 24px; }
  .nav { gap: 32px; }
  .board { grid-template-columns: minmax(0, 1fr); }
  .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pod__head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pod__rank { position: absolute; left: 20px; top: 34px; font-size: 44px; }
  .pod__crown { top: -22px; width: 24px; }
  .pod__country { justify-content: center; }
  .pod__score { margin-top: 4px; }
  .pod__stat span { font-size: 12px; }
}

@media (max-width: 900px) {
  .shell { margin: 0; border-radius: 0; }
  .topbar { grid-template-columns: 1fr; height: auto; padding: 14px 16px 0; row-gap: 6px; }
  .logo { font-size: 23px; margin: 0; gap: 9px; }
  .logo__ika { width: 30px; height: 30px; }
  .account { width: 44px; height: 40px; }
  .nav { grid-column: 1 / -1; order: 4; gap: 26px; height: 46px; overflow-x: auto; scrollbar-width: none; }
  .hero { padding: 30px 16px 26px; min-height: 0; }
  .hero__media { width: 100%; opacity: .55; }
  .hero__title { font-size: 56px; }
  .hero__lead { font-size: 16px; }
  .hero__lead br { display: none; }
  .hero__tagline { display: none; }
  .board { padding: 0 12px 18px; }
  .podium { grid-template-columns: 1fr; }
  .pod__head { grid-template-columns: 34px 76px minmax(0, 1fr) 104px; justify-items: stretch; text-align: left; }
  .pod__rank { position: relative; left: auto; top: auto; font-size: 40px; }
  .pod .avatar { width: 76px; height: 76px; font-size: 25px; border-width: 3px; }
  .pod__name { font-size: 21px; }
  .pod__country { justify-content: flex-start; }
  .pod__score { width: 104px; height: 70px; }
  .pod__score strong { font-size: 25px; }
  .pod__score strong.is-long { font-size: 20px; }
  .table-card { padding: 18px 10px 14px; }
  .table-card__head { flex-direction: column; }
  .toolbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .toolbar .select, .toolbar .select select { width: 100%; min-width: 0; }
  .toolbar__count { grid-column: 1 / -1; margin-left: 0; }
  /* dos columnas: un filtro solo en su fila ocupa las dos. Ranking nacional (sin pais): equipo y ciudad juntos;
     mundial (pais, equipo, ciudad): la ciudad, tercera, a lo ancho */
  .toolbar #country-wrap[hidden] + .select:has(+ .select[hidden]),
  .toolbar #country-wrap[hidden] + .select[hidden] + .select,
  .toolbar #country-wrap:not([hidden]) + .select:not([hidden]) + .select { grid-column: 1 / -1; }
  .c-pts { display: none; }
  .foot { padding: 14px 16px 20px; }
}

@media (max-width: 520px) {
  .logo { font-size: 20px; }
  .hero__title { font-size: 46px; }
  .pod { padding: 16px 14px 12px; }
  .pod__head { grid-template-columns: 26px 58px minmax(0, 1fr) 84px; gap: 8px; }
  .pod__rank { font-size: 32px; }
  .pod__crown { width: 20px; top: -18px; }
  .pod .avatar { width: 58px; height: 58px; font-size: 20px; }
  .pod__name { font-size: 17px; }
  .pod__country { font-size: 13px; gap: 7px; }
  .pod__team { display: none; }
  .pod__score { width: 84px; height: 58px; }
  .pod__score strong { font-size: 20px; }
  .pod__score strong.is-long { font-size: 16px; }
  .pod__score span { font-size: 10px; }
  .pod__stat b { font-size: 15px; }
  .pod__stat span { font-size: 11px; }
  .c-nat { width: 70px; }
  .ranking td.c-player { max-width: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

/* Por debajo de 1240px el podio empuja la tabla hacia abajo: se oculta (movil incluido) */
@media (max-width: 1240px) {
  .board .podium { display: none; }
}

/* ---------- Boton + popup "How ranking points work" ---------- */
.pts-open {
  position: absolute;
  z-index: 2;
  right: 26px;
  top: 36px; /* a la altura de la linea pequeña de arriba del titulo (eyebrow), ajustado a ojo por Alvaro */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -14px rgba(13, 22, 38, .5);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.pts-open:hover { background: #fff; transform: translateY(-1px); }
.pts-open.is-off,
html.booting:not([data-view="rankings"]):not([data-view="tournaments"]):not([data-view="teams"]) .pts-open { display: none; }
.pts-open:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.pts-open span { color: var(--gold-ink); transition: transform .2s; }
.pts-open:hover span { transform: translateX(3px); }

.pts-dialog .ph__inner { width: min(720px, 100%); }
.pts { padding: 36px 40px 30px; font-size: 14.5px; color: var(--ink-2); }
.pts .eyebrow { margin-bottom: 10px; }
.pts__title {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.pts > p { margin: 0 0 18px; color: var(--muted); }
.pts .table-wrap { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.pts .tpoints__table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; background: var(--surface); }
.pts .tpoints__table th, .pts .tpoints__table td { padding: 9px 12px; text-align: right; white-space: nowrap; }
.pts .tpoints__table th:first-child, .pts .tpoints__table td:first-child { text-align: left; color: var(--muted); }
.pts .tpoints__table th { font-weight: 500; font-size: 12px; color: var(--muted); background: var(--head); }
.pts .tpoints__table tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.pts .tpoints__table tbody tr:first-child td { font-weight: 700; color: var(--gold-text); }
.pts ul { margin: 0; padding-left: 18px; color: var(--muted); }
.pts li + li { margin-top: 6px; }
.pts b { color: var(--ink); }

.pts .tpoints__table .sm { display: none; }

@media (max-width: 600px) {
  .pts .tpoints__table { font-size: 12.5px; }
  .pts .tpoints__table th, .pts .tpoints__table td { padding: 8px 5px; }
  .pts .tpoints__table th:first-child, .pts .tpoints__table td:first-child { padding-left: 10px; }
  .pts .tpoints__table th:last-child, .pts .tpoints__table td:last-child { padding-right: 10px; }
  .pts .tpoints__table th { font-size: 11px; }
  .pts .tpoints__table .lg { display: none; }
  .pts .tpoints__table .sm { display: inline; }
}

@media (max-width: 900px) {
  .pts-open { position: static; margin-top: 16px; height: 36px; font-size: 13px; }
  .pts { padding: 30px 18px 22px; }
  .pts__title { font-size: 27px; }
}

/* Buscador dentro de las tarjetas */
.search--card { width: auto; margin: 18px 6px 0; height: 44px; }
.search--card input { font-size: 15px; }
.tlist-card .search--card { width: auto; margin: 14px 8px 0; height: 40px; }

/* Separacion entre la cabecera de la tabla y la primera fila */
.ranking tbody tr:first-child td { border-top: 6px solid var(--surface); height: 49px; }

/* Entre 1241 y 1440px: podio + tabla en dos columnas sin que se corte "Total Points" */
@media (min-width: 1241px) and (max-width: 1440px) {
  .board { grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 18px; }
  .pod { padding: 18px 16px 14px 18px; }
  .pod__head { grid-template-columns: 34px 84px minmax(0, 1fr) 118px; gap: 10px; }
  .pod .avatar { width: 84px; height: 84px; font-size: 28px; }
  .pod__rank { font-size: 46px; }
  .pod__name { font-size: 23px; }
  .pod__name--sm { font-size: 20px; }
  .pod__name--xs { font-size: 17px; }
  .pod__score { width: 118px; height: 76px; }
  .pod__score strong { font-size: 27px; }
  .pod__score strong.is-long { font-size: 21px; }
  .pod__stat b { font-size: 15.5px; }
  .pod__stat span { font-size: 12px; }
  .table-card { padding-left: 14px; padding-right: 14px; }
  #ranking .ranking th, #ranking .ranking td { padding: 0 6px; }
  #ranking .ranking .c-nat { width: 40px; }
  #ranking .ranking .nat { font-size: 0; gap: 0; }
  #ranking .ranking td.c-player { max-width: 190px; }
}

/* Menu a la derecha en escritorio (ya no hay buscador ni perfil en la barra) */
@media (min-width: 901px) {
  .nav { justify-self: end; }
}

/* ---------- Pestañas tipo pildora (sustituye a la raya inferior) ---------- */
.nav { gap: 6px; align-items: center; }
.nav__link {
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-weight: 500;
  color: var(--ink-2);
  transition: background .2s, color .2s, box-shadow .2s;
}
.nav__link:hover { background: var(--line-soft); color: var(--ink); }
.nav__link.is-active,
.nav__link.is-active:hover {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(19, 33, 59, .7);
}
.nav__link.is-active::after { display: none; }
.nav__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 900px) {
  .nav { gap: 4px; height: auto; padding: 4px 0 12px; }
  .nav__link { height: 36px; padding: 0 14px; font-size: 14px; flex: none; }
}

/* Alineacion de la tabla: todo centrado en vertical y numeros a la derecha */
.ranking td { vertical-align: middle; }
.ranking .nat { display: flex; align-items: center; height: 20px; line-height: 1; }
.ranking .nat .flag { display: block; }
.ranking td.c-num, .ranking th.c-num { text-align: right; }
/* ancho fijo por columna: si no, el navegador la encoge o la ensancha segun la cifra mas larga que haya
   cargada en cada momento (ordenar, "ver mas"...), y los numeros saltan de sitio */
.ranking .c-pts { width: 100px; }
.ranking .c-total { width: 110px; }
.ranking th.c-num button { justify-content: flex-end; text-align: right; }

/* ---------- Buscador + boton de filtros ---------- */
.search-row { display: flex; gap: 8px; margin: 18px 6px 0; }
.search-row .search--card { flex: 1; margin: 0; }
.filters-toggle { display: none; }

@media (max-width: 900px) {
  .filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: none;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .filters-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .filters-toggle__n {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--gold);
    color: #fff;
    font-size: 11.5px;
    line-height: 20px;
    text-align: center;
  }
  .filters-open .filters-toggle { background: var(--navy); border-color: var(--navy); color: #fff; }

  /* plegado: ocultos el tipo de ranking y los selectores de pais/equipo */
  #ranking:not(.filters-open) .toolbar .select { display: none !important; }
  #ranking.filters-open .toolbar .select { animation: rise .25s ease both; }
  #ranking .table-card__head .select--lg { width: 100%; }
  #ranking .table-card__head .select--lg select { width: 100%; }
  #ranking .table-card__head { gap: 12px; }
  #ranking .table-card__head p { font-size: 14px; }

  /* cabecera superior con mas aire */
  .topbar { padding: 20px 18px 6px; row-gap: 14px; }
  .logo { font-size: 25px; gap: 11px; }
  .logo__ika { width: 36px; height: 36px; }
  .nav { padding: 0 0 12px; }
}


/* Objetivos tactiles de al menos 40px en movil */
@media (max-width: 900px) {
  .nav__link { height: 40px; }
  .pts-open { height: 40px; }
}

/* Foto de jugador dentro del avatar */
.avatar { overflow: hidden; }
.avatar__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }

/* ---------- Moviles pequeños (≤ 400px): que todo quepa ---------- */
@media (max-width: 400px) {
  .nav { gap: 2px; justify-content: space-between; }
  .nav__link { padding: 0 11px; font-size: 13.5px; }
  .ranking th, .ranking td { padding: 0 5px; }
  .ranking .c-rank { width: 34px; }
  .ranking .c-nat { width: 30px; }
  .ranking .nat { font-size: 0; gap: 0; }
  .ranking td.c-total { font-size: 15.5px; }
  .ranking th.c-total { font-size: 12px; }
  .table-card { padding-left: 8px; padding-right: 8px; }
}

/* ---------- Arranque sin saltos ----------
   boot.js marca <html data-view="..."> antes de pintar: la cabecera y el menu salen
   ya con la pestaña correcta y el contenido espera a que la app lo monte. */
[data-for] { display: none; }
html[data-view="rankings"] [data-for~="rankings"],
html[data-view="tournaments"] [data-for~="tournaments"],
html[data-view="calendar"] [data-for~="calendar"],
html[data-view="teams"] [data-for~="teams"],
html[data-view="news"] [data-for~="news"] { display: inline; }

html.booting main,
html.booting .foot { visibility: hidden; }

/* menu durante el arranque segun la pestaña de la URL */
html.booting:not([data-view="rankings"]) .nav__link.is-active { background: none; color: var(--ink-2); box-shadow: none; font-weight: 500; }
html.booting[data-view="tournaments"] .nav__link[data-view="tournaments"],
html.booting[data-view="calendar"] .nav__link[data-view="calendar"],
html.booting[data-view="teams"] .nav__link[data-view="teams"],
html.booting[data-view="news"] .nav__link[data-view="news"] {
  background: var(--navy); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(19, 33, 59, .7);
}

/* pestaña Organize en el arranque */
html.booting[data-view="organize"] .nav__link[data-view="organize"] { background: var(--navy); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(19, 33, 59, .7); }

/* Menu con 5 pestañas en movil: se desliza de lado, con aviso de que hay mas */
@media (max-width: 900px) {
  .nav { overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nav.is-end { -webkit-mask-image: none; mask-image: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { scroll-snap-align: start; }
}
@media (max-width: 400px) { .nav { justify-content: flex-start; } }

/* Flechas del menu en movil: avisan de que hay mas pestañas y las desplazan al pulsar */
.nav-wrap { display: contents; }
.nav-arrow { display: none; }
@media (max-width: 900px) {
  .nav-wrap { display: block; position: relative; grid-column: 1 / -1; order: 4; min-width: 0; }
  .nav-arrow {
    position: absolute;
    top: calc(50% - 6px); /* centrada con las pestañas (la .nav tiene 12px de aire abajo) */
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 4px 12px -4px rgba(13, 22, 38, .3);
    color: var(--ink);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity .2s, transform .2s;
  }
  .nav-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .nav-arrow--next { right: -4px; animation: navNudge 1.6s .8s ease-in-out 2; }
  .nav-arrow--prev { left: -4px; }
  .nav-arrow:active { transform: translateY(-50%) scale(.92); }
  .nav.is-end ~ .nav-arrow--next,
  .nav.is-start ~ .nav-arrow--prev { opacity: 0; pointer-events: none; }
  /* Difuminado con capas encima en vez de mask-image: Safari iOS pinta mal (descolocado)
     un menu deslizable con mascara. Las capas solo se ven por el lado con menu escondido. */
  .nav, .nav.is-end { -webkit-mask-image: none; mask-image: none; }
  /* sin "iman": devolvia el menu al inicio de una pestaña y dejaba la activa bajo la flecha */
  .nav { scroll-snap-type: none; }
  .nav-wrap::before,
  .nav-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0; /* hasta abajo: tapa tambien la sombra de la pestaña activa */
    z-index: 1;
    width: 96px;
    pointer-events: none;
    transition: opacity .2s;
  }
  /* opaco detras de la flecha (~44px) y se desvanece despues */
  .nav-wrap::before { left: -4px; background: linear-gradient(90deg, var(--shell) 52px, transparent); }
  .nav-wrap::after { right: -4px; background: linear-gradient(270deg, var(--shell) 52px, transparent); }
  .nav-wrap.is-start::before,
  .nav-wrap.is-end::after { opacity: 0; }
}
@keyframes navNudge { 0%, 100% { transform: translateY(-50%); } 50% { transform: translate(4px, -50%); } }

/* ---------- Boton modo claro/oscuro (sol en claro, luna en oscuro) ---------- */
.topbar { grid-template-columns: auto 1fr auto; }
.theme-toggle {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s;
}
.theme-toggle:hover { background: var(--head); }
.theme-toggle:active { transform: scale(.92); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-toggle svg { width: 20px; height: 20px; animation: themeSpin .4s cubic-bezier(.2, .8, .2, 1); }
.theme-toggle__sun { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.theme-toggle__sun circle { fill: var(--gold); }
.theme-toggle__moon { display: none; fill: #e8c46a; }
html[data-theme="dark"] .theme-toggle__sun { display: none; }
html[data-theme="dark"] .theme-toggle__moon { display: block; }
@keyframes themeSpin { from { opacity: 0; transform: rotate(-60deg) scale(.6); } }

@media (max-width: 900px) {
  /* fila 1: logo + boton; fila 2: menu */
  .topbar { grid-template-columns: 1fr auto; }
  .theme-toggle { justify-self: end; }
}

/* ---------- Selector de idioma (EN | ES), junto al boton sol/luna ---------- */
.topbar { grid-template-columns: auto 1fr auto auto; }
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.lang-switch button {
  min-width: 34px;
  height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.is-on { background: var(--navy); color: #fff; }
.lang-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

@media (max-width: 900px) {
  /* fila 1: logo + idioma + sol/luna; fila 2: menu */
  .topbar { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; }
  .lang-switch button { min-width: 32px; height: 30px; padding: 0 8px; }
}
@media (max-width: 400px) {
  .logo { font-size: 18px; gap: 8px; }
  .logo__ika { width: 30px; height: 30px; }
}

/* ---------- Redes sociales en el pie (Instagram, Facebook, Discord) ---------- */
.foot { align-items: center; }
.social { display: flex; gap: 10px; order: -1; width: 100%; justify-content: center; padding-bottom: 6px; }
.social__link { flex: none; }
.social__link {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 6px 14px -8px rgba(13, 22, 38, .55);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, filter .2s;
}
.foot .social__link { color: #fff; } /* ".foot a" (enlaces grises del pie) no debe teñir los logotipos */
/* 22px en un circulo de 42px: 10px exactos a cada lado. Con 21px quedaban 10,5px y en
   pantallas de ordenador (1x) cada logotipo se redondeaba distinto y se veia torcido. */
.social__link svg { display: block; width: 22px; height: 22px; fill: currentColor; }
.social__link--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.social__link--facebook { background: #1877f2; }
.social__link--discord { background: #5865f2; }
.social__link--whatsapp { background: #25d366; }
/* Linktree en sus colores (lima + verde bosque) para no confundirse con el verde de WhatsApp */
.social__link--linktree { background: #d2e823; }
.foot .social__link--linktree { color: #254f1a; }
/* solo con raton: en movil el :hover se queda "pegado" tras tocar y el icono se ve grande */
@media (hover: hover) and (pointer: fine) {
  .social__link:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 22px -10px rgba(13, 22, 38, .6); filter: saturate(1.15); }
}
.social__link:active { transform: scale(.94); }
.social__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
html[data-theme="dark"] .social__link { box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .8); }

/* ---------- Moviles/tactiles: sin efectos de "raton encima" que se quedan pegados ----------
   En iPhone/Android, tras tocar algo el :hover se queda activo hasta tocar otra cosa, y las
   tarjetas o botones se quedan levantados, girados o agrandados. Con "html" delante para
   ganar a las reglas :hover de los demas CSS (que se cargan despues de este). */
@media (hover: none) {
  html .pod:hover,
  html .tcard:hover,
  html .ncard.is-link:hover,
  html .tpod.is-link:hover,
  html .tbracket:hover,
  html .org-cta:hover,
  html .pts-open:hover,
  html .pts-open:hover span,
  html .tbracket:hover .tbracket__go span,
  html .ph__close:hover,
  html .logo:hover .logo__ika { transform: none; }
  html .pod:hover, html .tpod.is-link:hover { translate: none; box-shadow: none; }
}

/* Flechas del menu: ocultas hasta que js/organize.js sabe cuales tocan (evita el parpadeo al cargar) */
@media (max-width: 900px) {
  .nav-wrap:not(.is-ready) .nav-arrow,
  .nav-wrap:not(.is-ready)::before,
  .nav-wrap:not(.is-ready)::after { opacity: 0; pointer-events: none; }
  .nav-wrap:not(.is-ready) .nav-arrow--next { animation: none; }
}

/* pestaña About en el arranque (mismo sistema que las demas, ver boot.js) */
html[data-view="about"] [data-for~="about"],
html[data-view="organize"] [data-for~="organize"] { display: inline; }
html.booting[data-view="about"] .nav__link[data-view="about"] { background: var(--navy); color: #fff; font-weight: 600; box-shadow: 0 6px 16px -8px rgba(19, 33, 59, .7); }

/* El HTML solo trae los textos de Ranking en la cabecera (un unico H1, bueno para Google y
   lectores de pantalla). Al entrar directo en otra pestaña se oculta hasta que la app pone los
   suyos, igual que el contenido, para que no se vea "Rankings" un instante. */
html.booting:not([data-view="rankings"]) .hero__text { visibility: hidden; }

/* ---------- Temporadas anteriores (selector "Season") ---------- */
.rk-pickers { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rk-season select { min-width: 0; }
.rk-season-tag { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--head); color: var(--muted); font-size: .5em; font-weight: 700; letter-spacing: 0; vertical-align: middle; }
.archive-note { margin: 14px 6px 0; padding: 10px 14px; border-radius: 10px; border: 1px dashed var(--line); background: var(--head); color: var(--ink-2); font-size: 14px; line-height: 1.45; }
.archive-note b { color: var(--ink); }
/* columnas que no existen en esa temporada */
.ranking[data-hide~="international"] .c-international,
.ranking[data-hide~="national"] .c-national,
.ranking[data-hide~="local"] .c-local,
.ranking[data-hide~="klasking"] .c-klasking { display: none; }
/* en las temporadas anteriores no se abre la ficha (son datos de aquel año) */
#ranking .ranking tbody tr.is-static { cursor: default; }
#ranking .ranking tbody tr.is-static:hover td.c-player { text-decoration: none; }
.podium .pod.is-static { cursor: default; }
.podium.is-archive .pod__stats:empty { display: none; }
@media (max-width: 900px) {
  .rk-pickers { width: 100%; flex-wrap: nowrap; }
  .rk-pickers .select--lg { flex: 1; min-width: 0; }
  .rk-pickers .rk-season { flex: 0 0 auto; max-width: 46%; }
}

/* ===== Auditoria (impeccable adapt, 15/10/2026) ===== */
/* 901-1180px (iPad horizontal, portatiles pequeños): el menu completo no cabia y se cortaban EN/ES y sol/luna */
@media (min-width: 901px) and (max-width: 1180px) {
  .topbar { padding: 0 22px; gap: 12px; }
  .logo { margin-right: 4px; }
  .nav { gap: 2px; }
  .nav__link { padding: 0 12px; }
}
/* tactil: botones de al menos 40px de alto (EN/ES) */
@media (pointer: coarse) {
  .lang-switch button { height: 36px; min-width: 38px; }
}
/* rotulos de varias palabras: lineas equilibradas (sin una palabra sola abajo) */
.eyebrow { text-wrap: balance; }
@media (min-width: 901px) and (max-width: 990px) {
  .topbar { padding: 0 16px; gap: 8px; }
  .nav__link { padding: 0 9px; font-size: 14px; }
}
/* movil: el selector de temporada solo con el ancho de "2025/26"; el de ranking (pais) se queda el resto */
@media (max-width: 900px) {
  #ranking .table-card__head .rk-pickers .rk-season { flex: 0 0 auto; width: auto; max-width: none; }
  #ranking .table-card__head .rk-pickers .rk-season select { width: auto; min-width: 0; padding-right: 34px; }
  #ranking .table-card__head .rk-pickers .select--lg:not(.rk-season) { flex: 1 1 auto; min-width: 0; }
}
/* fila del jugador al llegar desde su ficha: azul claro opaco (tapa el color de la fila: no se mezcla con
   la plata ni el oro del podio) ~2 s y se desvanece */
.ranking tbody tr.is-flash td { animation: rowFlash 2s ease-out forwards; }
@keyframes rowFlash { 0%, 55% { box-shadow: inset 0 0 0 999px #cfe0ff; } 100% { box-shadow: inset 0 0 0 999px rgba(207, 224, 255, 0); } }
html[data-theme="dark"] .ranking tbody tr.is-flash td { animation-name: rowFlashDark; }
@keyframes rowFlashDark { 0%, 55% { box-shadow: inset 0 0 0 999px #1e3a6e; } 100% { box-shadow: inset 0 0 0 999px rgba(30, 58, 110, 0); } }
@media (prefers-reduced-motion: reduce) { .ranking tbody tr.is-flash td { animation: none; box-shadow: inset 0 0 0 999px #cfe0ff; } html[data-theme="dark"] .ranking tbody tr.is-flash td { box-shadow: inset 0 0 0 999px #1e3a6e; } }

/* ---------- Auditoria (01/11/2026) ---------- */
/* Movil/tablet: flechas del menu mas grandes (idioma y sol/luna se quedan como estaban: mas grandes no caben
   en la barra a 414px, se cortaba el sol) */
@media (max-width: 900px) {
  .nav-arrow { width: 40px; height: 40px; }
}
/* Tablet (760-900px): la tabla vuelve a mostrar internacional, nacional, local y KlasKing (solo el movil va con el total) */
@media (min-width: 760px) and (max-width: 900px) {
  .c-pts { display: table-cell; }
  .ranking .c-pts { width: 84px; }
}
/* textos de menos de 11px: a 11px */
@media (max-width: 520px) { .pod__score span { font-size: 11px; } }
/* Tablet (601-900px): el selector de ranking y el buscador sin estirarse a todo el ancho (lo pidio Alvaro: en iPad
   quedaban larguisimos). En movil siguen a todo el ancho y en escritorio no cambia nada */
@media (min-width: 601px) and (max-width: 900px) {
  #ranking .table-card__head .rk-pickers { justify-content: flex-start; }
  #ranking .table-card__head .rk-pickers .select--lg:not(.rk-season) { flex: 0 0 260px; }
  #ranking .search-row { max-width: 560px; }
}
/* moviles muy estrechos (iPhone SE: 320px): logo y EN/ES mas compactos, si no el sol se salia de la barra */
@media (max-width: 360px) {
  .topbar { column-gap: 6px; }
  .logo { font-size: 16px; gap: 6px; }
  .logo__ika { width: 26px; height: 26px; }
  .lang-switch button { min-width: 30px; padding: 0 6px; }
}

/* Keep the mobile brand within its grid track so both navigation arrows retain equal gutters. */
@media (max-width: 900px) {
  .topbar .logo { min-width: 0; font-size: clamp(18px, 5vw, 22px); }
  .topbar .logo__ika { flex-shrink: 0; }
}
@media (max-width: 360px) { .topbar .logo { font-size: 16px; } }

/* Volver arriba: el mismo boton que munich-open y klaskmadrid, con los colores de la web */
.to-top { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 10px 24px -10px rgba(13, 22, 38, .55); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .18s, visibility .18s, background-color .15s; }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.to-top:active { background: var(--gold-ink); }
@media (hover: hover) { .to-top:hover { background: var(--gold-ink); } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }
@media (max-width: 600px) { .foot { padding-bottom: 72px; } } /* que el boton no tape el pie al llegar al final */

/* Auditoria de filtros (02/11/2026): foco de teclado visible (WCAG 2.4.7) en todos los desplegables */
.select select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* movil: 44px de alto para el dedo. El zoom del iPhone al tocar un filtro se evita en js/boot.js (maximum-scale
   solo en iOS), asi los textos ("Todas las ciudades"...) mantienen su tamaño y caben */
@media (max-width: 760px) {
  .select select, .select--lg select { height: 44px; }
}
@media (max-width: 760px) {
  .tfilters .select select { height: 44px; } /* tournaments.css los dejaba en 38px */
}
/* movil: los textos de los filtros ("Todas las ciudades"...) caben en media fila: menos relleno y la flecha mas pegada */
@media (max-width: 760px) {
  .toolbar .select select, .tfilters .select select { padding: 0 21px 0 9px; }
  .toolbar .select::after, .tfilters .select::after { right: 9px; }
  .tfilters { margin-left: 0; margin-right: 0; }
}
@media (max-width: 760px) { .tfilters .select select { font-size: 13px; } } /* media columna algo mas estrecha que en Rankings: "Todas las ciudades" cabe */

/* iPad y ventanas medianas (901-1320px): con 7 pestañas el menu no cabe junto a EN/ES y sol/luna. Todo en una
   fila: las pestañas dentro de una capsula redonda que se desliza de lado, con flechas como en movil */
@media (min-width: 901px) and (max-width: 1320px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto; height: 78px; padding: 0 24px; gap: 12px; }
  .topbar .lang-switch { grid-column: 3; grid-row: 1; }
  .topbar .theme-toggle { grid-column: 4; grid-row: 1; }
  .nav-wrap {
    display: block; position: relative; grid-column: 2; grid-row: 1; justify-self: center;
    width: fit-content; max-width: 100%; min-width: 0; padding: 4px; overflow: hidden;
    border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  }
  .topbar .nav { width: 100%; min-width: 0; max-width: 100%; height: auto; gap: 2px; margin: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .topbar .nav::-webkit-scrollbar { display: none; }
  .topbar .nav__link { height: 36px; padding: 0 15px; font-size: 14.5px; }
  .nav-arrow {
    position: absolute; top: 50%; z-index: 2; display: grid; place-items: center;
    width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
    background: var(--surface); box-shadow: 0 4px 12px -4px rgba(13, 22, 38, .3); color: var(--ink);
    cursor: pointer; transform: translateY(-50%); transition: opacity .2s, transform .2s;
  }
  .nav-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .nav-arrow--next { right: 5px; animation: navNudge 1.6s .8s ease-in-out 2; }
  .nav-arrow--prev { left: 5px; }
  .nav-arrow:active { transform: translateY(-50%) scale(.92); }
  .nav.is-end ~ .nav-arrow--next,
  .nav.is-start ~ .nav-arrow--prev { opacity: 0; pointer-events: none; }
  .nav-wrap::before,
  .nav-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 80px; pointer-events: none; transition: opacity .2s; }
  .nav-wrap::before { left: 0; background: linear-gradient(90deg, var(--surface) 40px, transparent); }
  .nav-wrap::after { right: 0; background: linear-gradient(270deg, var(--surface) 40px, transparent); }
  .nav-wrap.is-start::before,
  .nav-wrap.is-end::after { opacity: 0; }
}
.nav__link { white-space: nowrap; } /* "Sobre IKA" no se parte en dos lineas */

/* Ranking en ordenador: columnas fijas. Con el reparto automatico del navegador, al ordenar por otra columna (la
   flecha ocupa sitio, en español "Internacional ▾" es mas largo) o al cargar otras cifras, las columnas cambiaban
   de ancho: banderas y numeros saltaban de sitio y el total se salia por la derecha. Ahora cada columna tiene
   su ancho y el jugador se queda con el resto (lo pidio Alvaro, 10/11/2026) */
/* Anchos justos: las cifras ocupan ~50px; manda la cabecera mas larga (en o es, con la flecha de orden). Lo que
   sobra es para el nombre del jugador (Alvaro: "que quepa mas nombre") */
@media (min-width: 901px) {
  #ranking .ranking { table-layout: fixed; }
  #ranking .ranking td.c-player { max-width: none; white-space: nowrap; }
  #ranking .ranking th.c-num { overflow: visible; }
  #ranking .ranking th.c-num, #ranking .ranking td.c-num, #ranking .ranking .c-nat { padding-left: 6px; padding-right: 6px; }
  #ranking .ranking .c-nat { width: 72px; }
  #ranking .ranking .c-international { width: 110px; }
  #ranking .ranking .c-national { width: 82px; }
  #ranking .ranking .c-local { width: 62px; }
  #ranking .ranking .c-klasking { width: 80px; }
  #ranking .ranking .c-total { width: 92px; }
}
@media (min-width: 1241px) and (max-width: 1440px) {
  #ranking .ranking .c-nat { width: 40px; }
  #ranking .ranking thead th { font-size: 12.5px; }
  #ranking .ranking th button { gap: 4px; }
  #ranking .ranking .c-international { width: 102px; }
  #ranking .ranking .c-national { width: 76px; }
  #ranking .ranking .c-local { width: 58px; }
  #ranking .ranking .c-klasking { width: 74px; }
  #ranking .ranking .c-total { width: 88px; }
}

/* /css/player.css */
/* =========================================================
   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);
  /* iniciales en el centro exacto: sin el espaciado negativo (las desplazaba) y sin el aire de la linea */
  letter-spacing: 0;
  line-height: 1;
  text-align: center;
}

.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-ink); /* hojas del mismo color que la cifra */
}
.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;
}

/* titulo de cada bloque de la ficha: discreto pero de titulo (no rotulo en mayusculas espaciadas) */
.ph__h {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}

/* 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-text); }
.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; white-space: nowrap; }
.ph__mates-more { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted-2); }
.ph__mates li[hidden], .ph__mates-more[hidden] { display: none; } /* js/player.js fitMates */

/* ---------- 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: 11px; letter-spacing: .22em; 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: 11px; 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; }
}

/* temporadas anteriores en la ficha: el nombre del ranking enlaza a ese ranking archivado */
.ph__past .ph__rk-name { color: inherit; text-decoration: none; }
.ph__past .ph__rk-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ph__past .ph__rk-name small { margin-left: 4px; color: var(--muted-2); font-weight: 600; }
.ph__past { margin-top: 22px; }
/* temporadas en la ficha: se pulsan para ver la ficha en esa temporada */
.ph__past li[data-season] { cursor: pointer; }
.ph__past li[data-season]:hover .ph__rk-name { text-decoration: underline; text-underline-offset: 3px; }
.ph__tlist li[data-href] { cursor: pointer; }
.ph__tlist li.is-static { cursor: default; }

/* pestañas de temporada de la ficha (debajo del pais): la activa en azul marino */
.ph__seasons { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 14px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .75); border: 1px solid rgba(13, 22, 38, .1); box-shadow: 0 6px 16px -10px rgba(13, 22, 38, .35); backdrop-filter: blur(6px); }
.ph__season-btn { border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; font: 700 13.5px/1 var(--display); letter-spacing: -.01em; color: var(--ink-2); cursor: pointer; font-variant-numeric: tabular-nums; transition: background-color .15s, color .15s; }
.ph__season-btn:hover:not(:disabled):not(.is-on) { background: rgba(13, 22, 38, .07); color: var(--ink); }
.ph__season-btn.is-on { background: var(--navy); color: #fff; box-shadow: 0 4px 10px -4px rgba(13, 22, 38, .5); cursor: default; }
.ph__season-btn:disabled { opacity: .38; cursor: not-allowed; }
.ph__season-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
html[data-theme="dark"] .ph__seasons { background: rgba(20, 28, 44, .8); border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .ph__season-btn { color: #cfd6e2; }
html[data-theme="dark"] .ph__season-btn:hover:not(:disabled):not(.is-on) { background: rgba(255, 255, 255, .08); color: #fff; }
html[data-theme="dark"] .ph__season-btn.is-on { background: #e8ecf2; color: #0d1626; }
@media (max-width: 860px) {
  .ph__seasons { margin-top: 10px; }
  .ph__season-btn { padding: 6px 12px; font-size: 12.5px; }
}

/* movil: sin puntos separadores colgando al partirse la linea (pais · equipo / jugadores) */
@media (max-width: 600px) {
  .ph__meta { column-gap: 14px; }
  .ph__meta i { display: none; }
}
/* tactil: pestañas de temporada de al menos 40px de alto */
@media (pointer: coarse) {
  .ph__season-btn { min-height: 38px; padding: 0 16px; }
}

/* Ordenador con poca altura (portatiles 1280-1536 de ancho, 768-960 de alto): ficha mas compacta
   para que se vea entera sin scroll (misma estructura, menos aire) */
@media (min-width: 901px) and (max-height: 960px) {
  .ph { padding: 14px 16px; }
  .ph__hero { min-height: 0; padding: 34px 48px 28px; gap: 20px; }
  .ph__avatar, .ph .crest--xl { width: 124px; height: 124px; font-size: 42px; }
  .ph__name { font-size: clamp(34px, 4.2vw, 54px); margin-bottom: 12px; }
  .ph__total { width: 220px; height: 122px; }
  .ph__total strong { font-size: 35px; }
  .ph__body { padding: 22px 48px 26px; gap: 28px; }
  .ph__h { margin-bottom: 9px; }
  .ph__rk li { padding: 10px 16px; }
  .ph__rk.ph__tlist li { padding: 9px 16px; }
  .ph__mates li > * { padding-top: 8px; padding-bottom: 8px; }
  .ph__mates { margin-top: 0; }
  .ph__side { gap: 18px; }
}
@media (min-width: 901px) and (max-height: 800px) {
  .ph__hero { padding: 26px 44px 22px; }
  .ph__avatar, .ph .crest--xl { width: 104px; height: 104px; font-size: 36px; }
  .ph__name { font-size: clamp(32px, 3.8vw, 48px); }
  .ph__rankbox { padding: 10px 18px; }
  .ph__total { height: 108px; }
  .ph__total strong { font-size: 32px; }
  .ph__body { padding: 18px 44px 22px; }
  .ph__rk li { padding: 8px 16px; }
  .ph__rk.ph__tlist li { padding: 7px 16px; }
  .ph__mates li > * { padding-top: 6px; padding-bottom: 6px; }
}

/* filas de "Rankings" de la ficha: se pulsan para ir a ese ranking */
.ph__rankings li[data-goto-ranking] { cursor: pointer; transition: background .15s; }
.ph__rankings li[data-goto-ranking]:hover { background: var(--head); }
.ph__rankings li[data-goto-ranking].is-current:hover { background: var(--medal-row); }
.ph__rankings li[data-goto-ranking]:hover .ph__rk-name { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c3c9d3; }
.ph__rankings li[data-goto-ranking]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

/* Point decay: dias que le quedan a cada torneo de la temporada actual (js/player.js) */
.ph__t-main em.ph__decay { display: inline; margin-left: 8px; font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; }

/* temporadas de la ficha: siempre en una fila (con All time son tres y en movil se partian en dos filas) */
.ph__seasons { flex-wrap: nowrap; max-width: 100%; }
@media (max-width: 520px) { .ph__season-btn { padding: 7px 10px; font-size: 12.5px; } }

/* Keep all season labels visible, including All time on narrow phones. */
.ph__season-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 520px) {
  #player-dialog .ph__id { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 18px; }
  #player-dialog .ph__avatar-wrap { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
  #player-dialog .ph__who { display: contents; }
  #player-dialog .ph__eyebrow, #player-dialog .ph__name, #player-dialog .ph__meta { grid-column: 2; }
  #player-dialog .ph__seasons { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
  #player-dialog .ph__total { width: min(170px, 100%); }
}

/* A changing rank must never change the width or wrapping of the player's name. */
.ph__who { flex: 1 1 0; }
#player-dialog .ph__rankbox { width: 150px; min-width: 0; }
#player-dialog .ph__rankbox strong { width: 100%; white-space: nowrap; }
@media (max-width: 860px) { #player-dialog .ph__rankbox { width: min(150px, 100%); } }

/* The identity needs enough room for every season tab on smaller laptops too. */
@media (min-width: 861px) and (max-width: 1100px) {
  #player-dialog .ph__hero { grid-template-columns: 1fr 1fr; }
  #player-dialog .ph__id { grid-column: 1 / -1; }
  #player-dialog .ph__rankbox, #player-dialog .ph__total { justify-self: center; }
}

#player-dialog .ph__name { min-width: 0; }

/* Numero del puesto: su tamaño sale de cuantos caracteres tiene (#1, #12, #149, #1234), para que quepa siempre dentro
   del cuadro (150px). Con esta letra tan gruesa el ultimo digito se pinta fuera de lo que mide el texto, asi que no
   basta con medirlo. Si no cabe, el navegador lo pega a la izquierda y se ve descentrado */
.ph__rankbox strong { font-size: min(64px, calc(172px / var(--chars, 2))); } /* tinta: ~0,63em por caracter; hueco util 114px */
@media (max-width: 860px) { .ph__rankbox strong { font-size: min(44px, calc(196px / var(--chars, 2))); } }

/* Dias que le quedan a los puntos de un torneo (point decay): etiqueta roja junto a la del tipo */
.tbadge--decay { --b-bg: #fde3e1; --b-ink: #b4231a; }
.ph__t-main > span .tbadge--decay { margin-left: 5px; }
@media (max-width: 900px) {
  /* movil: tipo y dias juntos en la misma linea, sin cortarse */
  .ph__t-main > span { gap: 5px; }
  .ph__t-main .tbadge { padding: 0 6px; letter-spacing: 0; }
  .ph__t-main > span .tbadge--decay { margin-left: 0; }
}
/* Cada fila se ajusta a su sitio (js/player.js, fitDecay): "173 days" si cabe; si no, "173 d."; si aun no cabe,
   el tipo corto (International), luego el abreviado (Int., Nat.); y por ultimo sin bandera */
.ph__rk.ph__tlist .tbadge--decay .lg { display: inline; }
.ph__rk.ph__tlist .tbadge--decay .sm { display: none; }
.ph__tlist .ph__t-main > span.fit-d .tbadge--decay .lg { display: none; }
.ph__tlist .ph__t-main > span.fit-d .tbadge--decay .sm { display: inline; }
.ph__tlist .ph__t-main > span.fit-sm .tbadge:not(.tbadge--decay) .lg { display: none; }
.ph__tlist .ph__t-main > span.fit-sm .tbadge:not(.tbadge--decay) .sm { display: inline; }
.ph__tlist .ph__t-main > span.fit-xs .tbadge:not(.tbadge--decay) .lg,
.ph__tlist .ph__t-main > span.fit-xs .tbadge:not(.tbadge--decay) .sm { display: none; }
.ph__tlist .ph__t-main > span.fit-xs .tbadge:not(.tbadge--decay) .xs { display: inline; }
.ph__tlist .ph__t-main > span.fit-noflag .flag { display: none; }

/* Torneos de la ficha: torneos arriba y sumas (KlasKing, otros, total) abajo, en un mismo recuadro.
   Tablet y ordenador (no movil): como mucho 6 torneos a la vista (la ficha de Konstantin); si hay mas, se
   desplazan dentro de su lista con una barra propia y el total sigue siempre visible abajo (lo pidio Alvaro) */
.ph__tbox { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.ph__tbox > .ph__rk { border: 0; border-radius: 0; }
.ph__tbox > .ph__tsums { border-top: 1px solid var(--line-soft); }
.ph__tbox > .ph__tsums:empty { display: none; }
@media (min-width: 601px) {
  .ph__tscroll {
    --row: 72px;
    max-height: calc(6 * var(--row) + 5px); /* 6 filas + sus 5 lineas de separacion */
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c9cfd8 transparent;
  }
  .ph__tscroll::-webkit-scrollbar { width: 8px; }
  .ph__tscroll::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
  .ph__tscroll::-webkit-scrollbar-thumb { background: #c9cfd8; border-radius: 99px; border: 2px solid var(--surface); }
  .ph__tscroll::-webkit-scrollbar-thumb:hover { background: #a9b1bd; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .ph__tscroll { --row: 86px; } /* en tablet cada fila mide 86px (nombre en 2 lineas) */
}
/* ordenador: ademas, que quepa en el alto de la ventana (pantallas bajas): menos filas a la vista, minimo 3 */
@media (min-width: 861px) {
  .ph__tscroll { max-height: min(calc(6 * var(--row) + 5px), max(calc(3 * var(--row) + 2px), calc(100dvh - var(--ph-rest, 462px)))); }
}

/* 861-1000px: la ficha va en dos columnas pero la derecha es estrecha (~265px): el "#27" se montaba encima de
   "World"/"Germany". Aqui el "de 739" va debajo del puesto y los huecos son menores, y el nombre nunca invade */
@media (min-width: 861px) and (max-width: 1000px) {
  .ph__rankings .ph__rk li { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; padding: 12px; }
  .ph__rankings .ph__rk-pos { line-height: 1.05; text-align: right; }
  .ph__rankings .ph__rk-pos small { display: block; margin: 2px 0 0; font-size: 11px; }
  .ph__rankings .ph__rk-name { gap: 8px; }
}
.ph__rk-name { overflow: hidden; }

/* 901-1100px: columna de torneos estrecha; los nombres largos ("Campeonato de Alemania 2026") en 2 lineas en vez
   de cortarse con "..." o montarse sobre el puesto. Las filas pueden ser mas altas: la lista cuenta con 86px */
@media (min-width: 901px) and (max-width: 1100px) {
  .ph__t-main strong { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; overflow-wrap: normal; word-break: keep-all; }
  .ph__tscroll { --row: 86px; }
}
/* 861-1100px: la cabecera es mas alta (el puesto baja a su propia fila): queda menos alto para la lista */
@media (min-width: 861px) and (max-width: 1100px) { .ph__tscroll { --ph-rest: 572px; } }

/* /css/tournaments.css */
/* =========================================================
   Tournaments view
   ========================================================= */

.tboard {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 0 18px 24px 20px;
}

/* Type badges */
.tbadge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--b-ink);
  background: var(--b-bg);
}
.tbadge--international { --b-bg: #e5ecfc; --b-ink: #2448b0; }
.tbadge--special       { --b-bg: #fbe6db; --b-ink: #8f3f17; }
.tbadge--worldcup      { --b-bg: #efe3fc; --b-ink: #6a2bb3; } /* Mundial: morado, distinto de los Opens */
.tbadge--national      { --b-bg: #fcefcf; --b-ink: #7d5908; }
.tbadge--local         { --b-bg: #ddf2ee; --b-ink: #13655b; }

/* ---------- List card ---------- */
.tlist-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 14px 14px;
  box-shadow: 0 1px 2px rgba(16, 26, 44, .03), 0 18px 40px -26px rgba(16, 26, 44, .25);
  animation: rise .6s cubic-bezier(.2, .7, .2, 1) both;
  position: sticky;
  top: 16px;
}
.tlist-card__head { padding: 0 8px; }
.tlist-card__head h2 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.tlist-card__head p { margin: 0; color: var(--muted); font-size: 14px; }
.tlist-card__head .tlist-note { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(244, 194, 79, .16); color: var(--ink-2); font-size: 13px; line-height: 1.4; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 8px 10px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
}
.chip small { font-size: 11.5px; color: var(--muted-2); }
.chip:hover { border-color: #cdd3dc; }
.chip.is-on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.is-on small { color: rgba(255, 255, 255, .6); }
.tlist-card__country { margin: 0 8px 12px; }
.tlist-card__country select { height: 34px; }

.tlist {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  max-height: min(calc(100vh - 260px), 900px);
  overflow-y: auto;
  scrollbar-width: thin;
}

.titem {
  width: 100%;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.titem:hover { background: var(--head); }
.titem:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.titem.is-active {
  background: var(--gold-row);
  border-color: var(--gold-line);
}
.tlist li + li .titem { margin-top: 2px; }

.titem__date {
  display: grid;
  place-items: center;
  width: 50px;
  height: 54px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  line-height: 1;
}
.titem__date b { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.titem__date small { margin-top: -10px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }

.titem__main { display: grid; gap: 3px; min-width: 0; }
.titem__main strong {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titem__meta, .titem__winner {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.titem__meta .flag { width: 18px; height: 12px; }
.titem__winner { color: var(--ink-2); }
.titem__winner svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Detail card ---------- */
.tdetail { padding: 30px 26px 20px; }
.tdetail__head { padding: 0 6px 20px; }
.tdetail__head .eyebrow { margin-bottom: 12px; }
.tdetail__name {
  margin: 0 0 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 48px);
  line-height: .98;
  letter-spacing: -0.04em;
  color: #0a1222;
}
.tdetail__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
  font-size: 15px;
  color: var(--ink-2);
}
.tdetail__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }
.tdetail__meta b { color: var(--ink); }

.tdetail__pending {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff6e2;
  border: 1px solid #f1d998;
  font-size: 14px;
  color: #6f5310;
}
.tdetail__pending b {
  padding: 3px 9px;
  border-radius: 999px;
  background: #e2a91f;
  color: #fff;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap; /* "Not valid for the ranking" en una linea */
  flex: none;
}
/* movil: etiqueta encima y el texto debajo, a lo ancho */
@media (max-width: 600px) {
  .tdetail__pending { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Mini podium */
.tpodium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}
.tpod {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 12px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  animation: rise .5s cubic-bezier(.2, .7, .2, 1) both;
  opacity: 0;
  transform: translateY(10px);
}
.tpod:nth-child(2) { animation-delay: .06s; }
.tpod:nth-child(3) { animation-delay: .12s; }
.tpod--1 { background: var(--gold-bg); border-color: var(--gold-line); --medal: var(--gold); }
.tpod--2 { background: var(--silver-bg); border-color: var(--silver-line); --medal: var(--silver); }
.tpod--3 { background: var(--bronze-bg); border-color: var(--bronze-line); --medal: var(--bronze); }
.tpod.is-link { cursor: pointer; transition: translate .2s, box-shadow .2s; }
.tpod.is-link:hover { translate: 0 -3px; box-shadow: 0 16px 30px -18px rgba(16, 26, 44, .35); } /* translate: ver .pod:hover */
.tpod.is-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.tpod__pos {
  grid-row: 1 / 3;
  font-family: var(--display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--medal);
}
.tpod__who { display: grid; gap: 3px; min-width: 0; }
.tpod__who strong { font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpod__who span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tpod__who .flag { width: 18px; height: 12px; }
.tpod__pts {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.tpod__pts small { margin-left: 4px; font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--muted); }

/* Results table tweaks */
.tresults .c-rank { width: 92px; white-space: nowrap; }
/* cabecera de la clasificacion de un torneo: algo mas alta que una fila, sin llegar a los 56px del ranking */
.tresults thead th { height: 48px; }
.tresults tr.is-static { cursor: default; }
.tresults tr.is-static:hover td.c-player { text-decoration: none; }
.tresults tr.is-static td.c-player { color: var(--ink-2); }
.tag-off {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--head);
  font-size: 11px;
  color: var(--muted-2);
  vertical-align: 1px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .tboard { grid-template-columns: minmax(0, 1fr); }
  .tlist-card { position: static; }
  .tlist { max-height: 420px; }
}
@media (max-width: 900px) {
  .tboard { padding: 0 12px 18px; }
  .tdetail { padding: 22px 12px 14px; }
  .tpodium { grid-template-columns: 1fr; }
  .tresults td, .tresults th { padding: 0 6px; }
  .tresults .c-rank { width: 72px; font-size: 13px; }
  .tresults .c-nat { width: 34px; }
  .tresults .nat { font-size: 0; gap: 0; }
  .tresults td.c-player { max-width: 170px; }
}

/* ---------- Upcoming ---------- */
.tbadge--upcoming { --b-bg: var(--navy); --b-ink: #fff; }
.titem--upcoming { border-style: dashed; border-color: #cfd5de; margin-bottom: 6px; }
.titem--upcoming .titem__date b { font-size: 15px; text-transform: uppercase; letter-spacing: .02em; }
.titem--upcoming .titem__date small { margin-top: -6px; }
.tupcoming {
  margin: 4px 6px 6px;
  padding: 22px 24px;
  border-radius: 12px;
  border: 1px dashed #cfd5de;
  background: var(--head);
  font-size: 15px;
  color: var(--ink-2);
}
.tupcoming p { margin: 0; }
.tupcoming p + p { margin-top: 10px; }
.tupcoming a { color: var(--ink); }
/* proximo torneo: datos (izquierda) + mapa (derecha); en movil, uno debajo de otro */
.tupcoming--map { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 24px; }
.tupcoming__about { grid-column: 1 / -1; padding-top: 16px; border-top: 1px dashed #cfd5de; }
.tupcoming:not(.tupcoming--map) .tupcoming__about { margin-top: 18px; }
.tupcoming__note { color: var(--muted); font-size: 14px; }
.tfacts { display: grid; gap: 14px; margin: 0; }
.tfacts__row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.tfacts dt { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tfacts dd { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.tfacts dd span { color: var(--muted); }
.tfacts dd .tfacts__tba { font-style: italic; }
.tfacts__btn {
  display: inline-block; margin-top: 8px; padding: 7px 14px; border-radius: 999px;
  background: var(--navy); color: #fff !important; font-weight: 700; font-size: 14px; text-decoration: none;
}
.tfacts__btn:hover { filter: brightness(1.15); }
.tmap { position: relative; overflow: hidden; height: 100%; min-height: 240px; border-radius: 10px; background: #e8e6e1; pointer-events: none; user-select: none; }
.tmap__tiles { position: absolute; left: 50%; top: 50%; width: 1280px; height: 768px; }
.tmap__tiles img { position: absolute; width: 256px; height: 256px; max-width: none; }
.tmap__pin {
  position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -31px 0 0 -13px;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg); transform-origin: 50% 50%;
  background: var(--navy); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(10, 18, 34, .35);
}
.tmap__pin::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.tmap__credit { position: absolute; right: 6px; bottom: 4px; padding: 1px 6px; border-radius: 4px; background: rgba(255, 255, 255, .8); font-size: 11px; color: #444; }
@media (max-width: 900px) {
  .tupcoming--map { grid-template-columns: minmax(0, 1fr); }
  .tmap { min-height: 220px; }
}
@media (max-width: 600px) {
  .tupcoming { padding: 18px 16px; }
  .tfacts__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ---------- Points system ---------- */
.tpoints {
  margin: 14px 4px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--head);
  font-size: 13.5px;
  color: var(--ink-2);
}
.tpoints summary {
  padding: 13px 16px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tpoints summary::-webkit-details-marker { display: none; }
.tpoints summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--ink-2);
  border-bottom: 1.6px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform .2s;
}
.tpoints[open] summary::after { transform: rotate(-135deg); }
.tpoints > p, .tpoints ul { margin: 0 16px 12px; }
.tpoints ul { padding-left: 18px; color: var(--muted); }
.tpoints li + li { margin-top: 5px; }
.tpoints b { color: var(--ink); }
.tpoints .table-wrap { margin: 0 10px 12px; }
.tpoints__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  background: var(--surface);
  border-radius: 8px;
  overflow: hidden;
}
.tpoints__table th, .tpoints__table td { padding: 6px 7px; text-align: right; white-space: nowrap; }
.tpoints__table th:first-child, .tpoints__table td:first-child { text-align: left; color: var(--muted); }
.tpoints__table th { font-weight: 500; font-size: 11px; color: var(--muted); background: var(--line-soft); }
.tpoints__table tbody tr + tr td { border-top: 1px solid var(--line-soft); }

/* Igual que el ranking: por debajo de 1240px las 3 tarjetas del podio sobran (la tabla ya lo muestra) */
@media (max-width: 1240px) {
  .tpodium { display: none; }
}

/* ---------- Enlace a resultados completos (Challonge) ---------- */
.tbracket {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 30px -18px rgba(19, 33, 59, .8);
  transition: transform .2s, box-shadow .2s;
}
.tbracket:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -18px rgba(19, 33, 59, .9); }
.tbracket:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tbracket__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .1);
}
.tbracket__icon svg { width: 24px; height: 24px; fill: none; stroke: #f4c24f; stroke-width: 1.8; stroke-linejoin: round; }
.tbracket__text { display: grid; gap: 2px; min-width: 0; }
.tbracket__text strong { font-size: 16px; font-weight: 700; }
.tbracket__text span { font-size: 13px; color: rgba(255, 255, 255, .7); }
.tbracket__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f4c24f;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.tbracket__go span { transition: transform .2s; }
.tbracket:hover .tbracket__go span { transform: translate(2px, -2px); }

.tdetail__sub {
  margin: 0 6px 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink-2);
}

@media (max-width: 600px) {
  .tbracket { grid-template-columns: auto minmax(0, 1fr); }
  .tbracket__go { grid-column: 1 / -1; justify-content: center; }
}

/* Buscador + Filters en la lista de torneos */
.tlist-card .search-row { margin: 14px 8px 0; }
.tlist-card .search-row .search--card { margin: 0; height: 40px; }
@media (max-width: 900px) {
  .tlist-card .filters-toggle { height: 40px; }
  #t-card:not(.filters-open) .tfilters { display: none !important; }
  #t-card.filters-open .tfilters { animation: rise .25s ease both; }
  #t-card:not(.filters-open) .tlist { margin-top: 12px; }
}

/* Desplegables de tipo y pais, uno al lado del otro */
.tfilters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 8px 0; }
/* siempre 12px entre lo de arriba (buscador o filtros) y la lista, tambien en Calendar en ordenador, sin filtros */
.tlist-card .tlist { margin-top: 12px; }
.tfilters .select, .tfilters select { width: 100%; min-width: 0; }
.tfilters select { height: 38px; }

/* Etiqueta de tipo: corta en movil */
.tbadge .sm { display: none; }
@media (max-width: 900px) {
  /* (la ficha no: alli cada fila se acorta solo si no cabe, js/player.js fitDecay) */
  .tlist .tbadge .lg { display: none; }
  .tlist .tbadge .sm { display: inline; }
}

/* Podio del torneo con el mismo aire que el del ranking */
.tpod { grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 16px 18px; }
.tpod__pos { font-size: 46px; text-align: center; letter-spacing: -0.05em; }
.tpod__who strong { font-size: 16px; }

/* PC: la lista es estrecha -> etiqueta corta y el nombre del torneo entero (hasta 2 lineas) */
@media (min-width: 901px) {
  .tlist .tbadge .lg { display: none; }
  .tlist .tbadge .sm { display: inline; }
  .tlist .titem__main strong { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; overflow-wrap: break-word; }
}

/* PC con la lista al lado (columna estrecha): la etiqueta (Local, National...) baja a la linea
   del pais y el nombre del torneo usa todo el ancho -> "Ancona · November 2025 · Group A" en una linea */
@media (min-width: 1241px) {
  .tlist .titem {
    grid-template-areas: "date name badge" "date meta badge" "date win badge";
    gap: 3px 12px;
  }
  .tlist .titem__main { display: contents; }
  .tlist .titem__date { grid-area: date; }
  /* el nombre puede pasar por encima de la columna de la etiqueta: la etiqueta va centrada en vertical
     (a la altura del pais), asi que no se pisan */
  .tlist .titem__main strong { grid-column: 2 / 4; grid-row: 1; }
  .tlist .titem__meta { grid-area: meta; }
  .tlist .titem__winner { grid-area: win; }
  .tlist .titem .tbadge { grid-area: badge; justify-self: end; align-self: center; }
  /* proximos: solo nombre + pais (sin ganador) -> dos filas, centradas junto a la fecha */
  .tlist .titem--upcoming { grid-template-areas: "date name badge" "date meta badge"; align-content: center; }
  /* la fecha (54px) es mas alta que las dos lineas: con margen negativo no las separa (sobresale en el padding) */
  .tlist .titem--upcoming .titem__date { grid-row: 1 / 3; align-self: center; margin-block: -4px; }
}

/* torneo que no puntua (menos de 8 jugadores o no validado): etiqueta en la lista */
.titem__off { font-size: 12px; font-weight: 600; color: var(--gold-ink, #8a6100); }
html[data-theme="dark"] .titem__off { color: #f0d48c; }

/* movil: los puntos separadores se quedaban colgando al final de linea al partirse; se separa con espacio */
@media (max-width: 600px) {
  .tdetail__meta { column-gap: 14px; }
  .tdetail__meta i { display: none; }
}

/* Point decay: hasta cuando cuentan los puntos del torneo, o por que ya no cuentan (js/tournaments.js) */
.tdetail__decay { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.tdetail__decay.is-gone { color: #8f3f17; }

/* organizador a lo ancho: con ciudad y pais quedan 5 filtros en 2 columnas */
.tfilters__wide { grid-column: 1 / -1; }

/* Upcoming tournaments sin filtros por ahora (js/tournaments.js, CAL_FILTERS): solo el buscador */
#t-card.no-filters .tfilters, #t-card.no-filters .filters-toggle { display: none !important; }

/* "All seasons": nombre de la temporada encima de sus torneos; entre temporadas, linea discontinua */
.tsep { display: flex; align-items: center; gap: 10px; margin: 14px 10px 6px; font: 700 11.5px/1 var(--font-display, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tsep::after { content: ""; flex: 1; border-top: 1.5px dashed var(--line); }
.tsep:not(.tsep--first) { padding-top: 14px; border-top: 1.5px dashed var(--muted-2); }
.tsep:not(.tsep--first)::after { display: none; }
.tsep--first { margin-top: 4px; }
.tbadge .xs { display: none; }

/* /css/teams.css */
/* =========================================================
   Teams view + ficha de equipo
   ========================================================= */

.teams-view {
  position: relative;
  z-index: 2;
  padding: 0 20px 26px;
}

.teams-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 4px 16px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(16, 26, 44, .03), 0 18px 40px -26px rgba(16, 26, 44, .25);
}
.teams-head h2 {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.03em;
}
.teams-head p { margin: 0; color: var(--muted); font-size: 14.5px; }

.teams-grid {
  list-style: none;
  margin: 0;
  padding: 0 4px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.teams-grid li { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; opacity: 0; transform: translateY(12px); }

/* ---------- Crest ---------- */
.crest {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  flex: none;
  border-radius: 50%;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .22), transparent 55%),
    var(--crest);
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(13, 22, 38, .08), 0 10px 22px -12px rgba(13, 22, 38, .6);
  overflow: hidden;
}
.crest::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .35);
}
.crest__mono {
  position: relative;
  font-family: var(--display);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.03em;
  color: #fff;
}
.crest__mono.is-3 { font-size: 20px; }
.crest__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #fff;
}
.crest--xl { width: 150px; height: 150px; border-width: 5px; }
.crest--xl::before { inset: 9px; border-width: 2px; }
.crest--xl .crest__mono { font-size: 50px; }
.crest--xl .crest__mono.is-3 { font-size: 40px; }

/* equipos con menos de 3 jugadores: debajo, sin puesto */
.teams-sep { grid-column: 1 / -1; display: grid; gap: 2px; padding: 22px 4px 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.teams-sep b { font-family: var(--display); font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.teams-sep span { font-size: 14px; color: var(--muted); }
/* sin puesto: sin atenuar (el texto pequeño perdia contraste); se distinguen por el borde discontinuo */
.tcard--unranked { border-style: dashed; }

/* ---------- Team card ---------- */
.tcard {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  padding: 26px 18px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 26, 44, .03), 0 14px 30px -24px rgba(16, 26, 44, .35);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tcard:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(16, 26, 44, .03), 0 22px 40px -24px rgba(16, 26, 44, .45); }
.tcard:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.tcard--gold   { background: var(--gold-bg);   border-color: var(--gold-line);   --medal: var(--gold); }
.tcard--silver { background: var(--silver-bg); border-color: var(--silver-line); --medal: var(--silver); }
.tcard--bronze { background: var(--bronze-bg); border-color: var(--bronze-line); --medal: var(--bronze); }

.tcard .crest { margin-bottom: 8px; }
.tcard__rank {
  position: absolute;
  top: 14px;
  left: 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--medal, var(--muted-2));
}
.tcard__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
}
.tcard__meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--muted);
}
.tcard__meta .flag { width: 20px; height: 13px; }
.tcard__pts {
  margin-top: 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tcard__pts small { margin-left: 4px; font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--muted); }
/* total del equipo, debajo de la media (en su propia linea: en movil no cabia junto al pais) */
.tcard__total { margin-top: -4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tcard__best {
  margin-top: 4px;
  padding-top: 10px;
  width: 100%;
  border-top: 1px solid rgba(13, 22, 38, .07);
  font-size: 12.5px;
  color: var(--muted);
}
.tcard__best b { color: var(--ink-2); font-weight: 600; }

/* ---------- Team hero ---------- */
.ph__team-link {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(13, 22, 38, .25);
  text-underline-offset: 3px;
}
.ph__team-link:hover { text-decoration-color: currentColor; }

.ph__rk.th__players li {
  grid-template-columns: 40px minmax(0, 1fr) 56px 96px;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background .15s;
  animation: rise .45s cubic-bezier(.2, .7, .2, 1) both;
  opacity: 0;
  transform: translateY(8px);
}
.ph__rk.th__players li:hover { background: var(--head); }
.ph__rk.th__players li:hover strong { text-decoration: underline; text-decoration-color: #c3c9d3; text-underline-offset: 3px; }
.ph__rk.th__players li:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.th__av { width: 40px; height: 40px; font-size: 14px; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(13, 22, 38, .08); }
.th__who { display: grid; gap: 3px; min-width: 0; }
.th__who strong { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th__who span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.th__who .flag { width: 18px; height: 12px; }
.th__rank {
  justify-self: center;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--head);
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink-2);
}
.th__rank.is-gold { background: var(--gold-row); color: var(--gold-text); }
.th__rank.is-silver { background: var(--silver-row); color: #5e6774; }
.th__rank.is-bronze { background: var(--bronze-row); color: var(--bronze-ink); }
.th__pts { text-align: right; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.th__pts small { font-family: var(--font); font-weight: 400; font-size: 12px; color: var(--muted-2); }

.ph__rk.th__stats li { grid-template-columns: minmax(0, 1fr) auto; padding: 13px 16px; }
.th__stats span { color: var(--muted); }
.th__stats b { color: var(--ink); font-weight: 600; text-align: right; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .teams-view { padding: 0 12px 18px; }
  .teams-head { flex-direction: column; align-items: stretch; padding: 16px; }
  .teams-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tcard { padding: 22px 10px 14px; }
  .tcard .crest { width: 58px; height: 58px; }
  .tcard__rank { font-size: 17px; top: 10px; left: 12px; }
  .tcard__name { font-size: 15.5px; }
  .tcard__meta { font-size: 11.5px; }
  .tcard__pts { font-size: 21px; line-height: 1.1; }
  .tcard__pts small { display: block; margin: 2px 0 0; font-size: 11px; }
  .tcard__total { margin-top: 0; font-size: 11px; }
  .tcard__best { font-size: 11.5px; }
  .teams-sep { padding-top: 16px; }
  .teams-sep b { font-size: 16px; }
  .teams-sep span { font-size: 13px; }
  .crest--xl { width: 88px; height: 88px; border-width: 4px; }
  .crest--xl .crest__mono { font-size: 30px; }
  .crest--xl .crest__mono.is-3 { font-size: 24px; }
  .ph__rk.th__players li { grid-template-columns: 34px minmax(0, 1fr) auto auto; gap: 8px; padding: 10px 12px; }
  .th__av { width: 34px; height: 34px; font-size: 12px; }
}

/* Filtro por pais */
.teams-chips { margin: 0 4px 16px; }
.teams-chips .chip { gap: 8px; height: 36px; padding: 0 14px; font-size: 13.5px; }
.teams-chips .flag { width: 20px; height: 13px; }

/* Con logo real (assets/teams/<id>.png, fondo transparente): sin circulo de color */
.crest:has(.crest__img) {
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.crest:has(.crest__img)::before,
.crest:has(.crest__img) .crest__mono { display: none; }
.crest .crest__img {
  object-fit: contain;
  background: transparent;
  filter: drop-shadow(0 6px 12px rgba(13, 22, 38, .25));
  border-radius: 22%;
}

.teams-search { margin: 0 4px 12px; width: auto; background: var(--surface); }

/* Tarjetas de equipo con lineas fijas (iguales en todas) */
.tcard { grid-template-rows: auto auto auto auto auto auto 1fr; }
.tcard > * { min-width: 0; max-width: 100%; }
.tcard__name { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard__meta { max-width: 100%; white-space: nowrap; }
.tcard__meta > span:last-child { margin-left: -2px; }
.tcard__cc { display: none; }
.tcard__best { display: grid; gap: 2px; align-self: end; }
.tcard__best small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.tcard__best > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .tcard__cn { display: none; }
  .tcard__cc { display: inline; }
  .tcard__name { font-size: 15px; }
  .tcard__meta { font-size: 12px; gap: 5px; }
}

@media (max-width: 900px) {
  .teams-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: 0; margin-right: 0; padding: 2px 4px 4px; -webkit-overflow-scrolling: touch; }
  .teams-chips::-webkit-scrollbar { display: none; }
  .teams-chips .chip { flex: none; }
}

/* Buscador + desplegable de pais (igual que en las otras pestañas) */
.teams-head { align-items: center; }
.teams-tools { display: flex; align-items: center; gap: 10px; flex: 0 1 760px; }
.teams-head + .teams-grid { margin-top: 0; }
.teams-head { margin-bottom: 18px; }
.teams-tools .search-row { flex: 1; margin: 0; min-width: 160px; }
.teams-tools .search--card { margin: 0; background: var(--surface); }
.teams-season select { height: 44px; min-width: 150px; }
.teams-country select { height: 44px; min-width: 170px; }
.teams-sort select { height: 44px; min-width: 180px; }
@media (max-width: 900px) {
  .teams-tools { flex: none; width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
  .teams-season, .teams-season select, .teams-country, .teams-country select, .teams-sort, .teams-sort select { width: 100%; }
  #view-teams:not(.filters-open) .teams-season, #view-teams:not(.filters-open) .teams-country, #view-teams:not(.filters-open) .teams-sort { display: none; }
  #view-teams.filters-open .teams-season, #view-teams.filters-open .teams-country, #view-teams.filters-open .teams-sort { animation: rise .25s ease both; }
}

/* movil/tablet: cabecera "All teams" alineada a la izquierda como en las otras pestañas */
@media (max-width: 900px) {
  .teams-head { align-items: stretch; text-align: left; }
}

/* total de puntos del equipo, en su propia linea bajo el pais (la cifra grande es la media por jugador) */
.th__teamtotal { margin: 8px 0 0; font-size: 14.5px; color: var(--muted); white-space: nowrap; }
.th__teamtotal b { margin-left: 4px; font-family: var(--display); font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-theme="dark"] .th__teamtotal b { color: #e8ecf2; }

/* Ficha de equipo en movil: como la del jugador (escudo a la izquierda, pestañas de temporada en su propia fila) */
@media (max-width: 520px) {
  #team-dialog .ph__id { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 18px; }
  #team-dialog .ph__avatar-wrap { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
  #team-dialog .ph__who { display: contents; }
  #team-dialog .ph__eyebrow, #team-dialog .ph__name, #team-dialog .ph__meta, #team-dialog .th__teamtotal { grid-column: 2; }
  #team-dialog .ph__seasons { grid-column: 1 / -1; justify-self: start; margin-top: 8px; }
}

/* /css/news.css */
/* =========================================================
   News view
   ========================================================= */

.news-view { position: relative; z-index: 2; padding: 0 20px 26px; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding: 0 4px;
}

.ncard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(16, 26, 44, .03), 0 18px 40px -28px rgba(16, 26, 44, .35);
  animation: rise .6s cubic-bezier(.2, .7, .2, 1) both;
  opacity: 0;
  transform: translateY(14px);
}

.ncard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--head);
}
.ncard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ncard__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.ncard--upcoming .ncard__tag { background: var(--navy); color: #fff; }
.ncard--result .ncard__tag { background: #f4c24f; color: var(--navy); }
.ncard__credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.ncard__body { display: grid; align-content: start; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.ncard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.ncard__meta .flag { width: 20px; height: 13px; }
.ncard__meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-2); }
.ncard__meta i:first-child { display: none; }
.ncard__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.ncard__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }

/* Featured: ocupa dos columnas, imagen a la izquierda */
.ncard--featured {
  grid-column: 1 / -1;
  flex-direction: row;
}
.ncard--featured .ncard__media { aspect-ratio: 2560 / 1490; flex: 1.45; }
.ncard--featured .ncard__body { flex: 1; padding: 28px 30px; align-content: center; }
.ncard--featured .ncard__title { font-size: 32px; }
.ncard--featured .ncard__text { font-size: 15.5px; }

/* Mini podio en resultados */
.npod { list-style: none; margin: 6px 0 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.npod__row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  font-size: 14px;
}
.npod__row + .npod__row { border-top: 1px solid var(--line-soft); }
.npod__row--1 { background: var(--gold-row); }
.npod__row--2 { background: var(--silver-row); }
.npod__row--3 { background: var(--bronze-row); }
.npod__pos { font-family: var(--display); font-weight: 800; color: var(--ink-2); }
.npod__row--1 .npod__pos { color: #84600a; }
.npod__row--3 .npod__pos { color: #8f3f17; }
.npod__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npod__name .flag { width: 18px; height: 12px; }
.npod__pts { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.npod__foot { margin: 0; font-size: 12px; color: var(--muted-2); }

/* Tarjeta de cifras */
.ncard--stats {
  justify-content: center;
  gap: 14px;
  padding: 28px 26px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(210, 155, 30, .28), transparent 60%),
    var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.ncard--stats .eyebrow { margin: 0; color: rgba(255, 255, 255, .6); }
.ncard--stats .ncard__title { color: #fff; }
.ncard--stats .ncard__text { color: rgba(255, 255, 255, .65); font-size: 13px; }
.nstats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; margin: 6px 0 0; }
.nstats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.nstats dt { font-size: 12.5px; color: rgba(255, 255, 255, .65); }
.nstats dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  color: #f4c24f;
  font-variant-numeric: tabular-nums;
}
.nstats dd small { font-size: 18px; margin-left: 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .news-view { padding: 0 12px 18px; }
  .news-grid { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .ncard--featured { grid-column: auto; flex-direction: column; }
  .ncard--featured .ncard__media { aspect-ratio: 16 / 10; min-height: 0; flex: none; }
  .ncard--featured .ncard__body { padding: 20px 20px 22px; }
  .ncard--featured .ncard__title { font-size: 25px; }
  .ncard__title { font-size: 21px; }
}

/* Carteles verticales: se ven enteros, con fondo desenfocado del propio cartel */
.ncard__media--poster img:not(.ncard__blur) { position: absolute; inset: 0; object-fit: contain; }
.ncard__blur { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(24px) saturate(1.2); transform: scale(1.2); opacity: .7; }
.ncard--featured .ncard__media--poster { aspect-ratio: auto; min-height: 480px; flex: 1.1; }
@media (max-width: 760px) { .ncard--featured .ncard__media--poster { aspect-ratio: 4 / 5; min-height: 0; } }

/* Noticias clicables (eventos IKA -> pestaña Tournaments) */
.ncard.is-link { cursor: pointer; transition: transform .2s, box-shadow .2s; }
.ncard.is-link:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(16, 26, 44, .04), 0 26px 50px -28px rgba(16, 26, 44, .5); }
.ncard.is-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.ncard.is-link:hover .ncard__title { text-decoration: underline; text-decoration-color: #c3c9d3; text-underline-offset: 4px; }

/* /css/organize.css */
/* =========================================================
   Organize view
   ========================================================= */
.org-view { position: relative; z-index: 2; display: grid; gap: 18px; padding: 0 20px 26px; }

.org-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: 0 1px 2px rgba(16, 26, 44, .03), 0 18px 40px -26px rgba(16, 26, 44, .25);
  animation: rise .6s cubic-bezier(.2, .7, .2, 1) both;
}
.org-h { margin: 0 0 16px; font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -0.03em; }

.org-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: radial-gradient(120% 140% at 100% 0%, rgba(210, 155, 30, .3), transparent 60%), var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.org-intro h2 { margin: 0 0 8px; font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; }
.org-intro p { margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.org-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: #f4c24f;
  color: var(--navy);
  font-weight: 700;
  font-size: 15.5px;
  text-decoration: none;
  transition: transform .2s;
}
.org-cta:hover { transform: translateY(-2px); }
.org-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.org-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: s; }
.org-steps li {
  counter-increment: s;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 18px;
  border-radius: 12px;
  background: var(--head);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.org-steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--navy);
  color: #f4c24f;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
}
.org-steps b { font-size: 16px; color: var(--ink); }
.org-steps a { color: var(--ink); }

.org-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.org-list { margin: 0 0 18px; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.org-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: background .2s;
}
.org-btn:hover { background: var(--head); }

.org-reps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.org-reps li { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; padding: 13px 16px; font-size: 14.5px; color: var(--muted); }
.org-reps li + li { border-top: 1px solid var(--line-soft); }
.org-reps b { color: var(--ink); font-weight: 600; text-align: right; }
.org-reps a { color: var(--ink); }
.org-globe svg { width: 22px; height: 22px; fill: none; stroke: var(--ink-2); stroke-width: 1.6; display: block; }

.org-points { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.org-points th, .org-points td { padding: 9px 12px; text-align: right; white-space: nowrap; }
.org-points th:first-child, .org-points td:first-child { text-align: left; color: var(--muted); }
.org-points th { font-weight: 500; font-size: 12px; color: var(--muted); background: var(--head); }
.org-points tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.org-points tbody tr:first-child td { font-weight: 700; color: #84600a; }
.org-note { margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }

.org-admin { margin: 4px 0 0; text-align: center; font-size: 13px; }
.org-admin a { color: var(--muted); }

@media (max-width: 1000px) { .org-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .org-view { padding: 0 12px 18px; gap: 14px; }
  .org-card { padding: 20px 16px; }
  .org-intro { flex-direction: column; align-items: flex-start; }
  .org-intro h2 { font-size: 25px; }
  .org-grid { grid-template-columns: 1fr; gap: 14px; }
  .org-points th, .org-points td { padding: 8px 5px; font-size: 12.5px; }
}
@media (max-width: 520px) { .org-steps { grid-template-columns: 1fr; } }
/* que nada ensanche la pagina en movil */
.org-view > *, .org-grid > * { min-width: 0; }
.org-card .table-wrap { overflow-x: auto; }

/* Tabla de puntos en movil: sin scroll, cabeceras cortas */
.org-points .sm { display: none; }
@media (max-width: 600px) {
  .org-card .table-wrap { overflow: visible; }
  .org-points { table-layout: fixed; }
  .org-points th, .org-points td { padding: 8px 2px; font-size: 12px; }
  .org-points th { font-size: 11px; }
  .org-points th:first-child, .org-points td:first-child { width: 15%; padding-left: 6px; }
  .org-points th:last-child, .org-points td:last-child { padding-right: 6px; }
  .org-points .lg { display: none; }
  .org-points .sm { display: inline; }
}

/* =========================================================
   About / Sobre IKA (reutiliza las tarjetas de Organize)
   ========================================================= */
.about-p { margin: 0 0 12px; font-size: 15px; line-height: 1.65; color: var(--ink-2); max-width: 70ch; }
.about-p:last-child { margin-bottom: 0; }
.about-note { margin: 0 0 16px; }

/* Cita "We are Klask" */
.about-motto {
  display: grid;
  align-content: center;
  gap: 14px;
  background: radial-gradient(120% 120% at 0% 100%, rgba(210, 155, 30, .22), transparent 60%), var(--surface);
}
.about-motto__quote {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  line-height: .95;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.about-motto__quote::before { content: "“"; color: var(--gold); margin-right: .04em; }
.about-motto__quote::after { content: "”"; color: var(--gold); margin-left: .02em; }
.about-motto__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 46ch; }

/* Mision: 5 tarjetas numeradas */
.about-mission { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: m; }
.about-mission li {
  counter-increment: m;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 18px;
  border-radius: 12px;
  background: var(--head);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.about-mission li::before {
  display: none; /* sin numeracion 01-05: los puntos de la mision no son una secuencia */
  content: counter(m, decimal-leading-zero);
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--gold-ink);
}
.about-mission b { font-size: 16px; color: var(--ink); }

/* Miembros fundadores: bandera + nombre a la izquierda */
.about-members li { grid-template-columns: 26px 1fr; }
.about-members b { text-align: left; }
.about-members + .org-note { margin-top: 14px; }

@media (max-width: 1240px) { .about-mission { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .about-mission { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-p { font-size: 14.5px; }
}
@media (max-width: 520px) { .about-mission { grid-template-columns: 1fr; } }

/* Filas pulsables (representantes -> ficha de jugador, fundadores -> equipo / ranking) */
.org-reps li.is-link { display: block; padding: 0; }
.org-reps__link {
  display: grid;
  grid-template-columns: 26px 1fr auto 16px;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  color: inherit;
  text-decoration: none;
  transition: background .15s;
}
.about-members .org-reps__link { grid-template-columns: 26px 1fr 16px; }
.org-reps__go { width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s, stroke .2s; }
.org-reps__link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.org-reps__link:active { background: var(--head); }
@media (hover: hover) and (pointer: fine) {
  .org-reps__link:hover { background: var(--head); }
  .org-reps__link:hover b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .org-reps__link:hover .org-reps__go { stroke: var(--ink); transform: translateX(3px); }
}

/* Botones de descarga bajo los requisitos: reglas oficiales + plantilla */
.org-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.org-list a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold); }
.privacy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.privacy .org-card { margin: 0; }
.privacy__updated { margin: 2px 4px 0; text-align: left; color: var(--muted); font-size: 13px; }
@media (max-width: 1100px) { .privacy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .privacy { grid-template-columns: 1fr; } }
.about-credit { color: var(--muted); } .about-credit a { color: var(--ink-2); text-underline-offset: 3px; }

/* /css/dark.css */
/* =========================================================
   Modo oscuro: se activa con <html data-theme="dark">, que pone js/boot.js
   segun el boton sol/luna o, si no se ha elegido, segun el movil/ordenador.
   Se carga la ultima para poder sobrescribir al resto.
   ========================================================= */

html[data-theme="light"] { color-scheme: light; }

html[data-theme="dark"] {
  color-scheme: dark;

  --page: #080d16;
  --shell: #0f1623;
  --surface: #151e2e;
  --ink: #e9eef6;
  --ink-2: #c6cfdc;
  --muted: #9aa5b7;
  --muted-2: #8792a5;
  --line: #2a3549;
  --line-soft: #1e2839;
  --head: #1a2436;
  --navy: #2c4373;

  --gold-ink: #e8b84a;
  --gold-text: #e8b84a;
  --gold-bg: linear-gradient(135deg, #261f12 0%, #362a10 100%);
  --gold-line: #6b5317;
  --gold-row: #2a2314;

  --silver-ink: #b7c0cd;
  --silver-bg: linear-gradient(135deg, #182131 0%, #222c3d 100%);
  --silver-line: #3a4558;
  --silver-row: #1f2939;

  --bronze-ink: #e48d5c;
  --bronze-bg: linear-gradient(135deg, #271912 0%, #362217 100%);
  --bronze-line: #6e3f26;
  --bronze-row: #2c1d16;

  --c-int: #6d8ff0;
  --c-loc: #3cbfae;
  --c-kls: #8fa3c7;
}

/* ---------- Estructura ---------- */
html[data-theme="dark"] .shell { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 24px 70px -20px rgba(0, 0, 0, .6); }
html[data-theme="dark"] .topbar { background: rgba(15, 22, 35, .9); }
html[data-theme="dark"] .logo { color: #a9b4c6; }
html[data-theme="dark"] .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); }
html[data-theme="dark"] .flag.flag--sq { box-shadow: none; }

/* ---------- Cabecera con foto ---------- */
html[data-theme="dark"] .hero__media img { filter: saturate(.4) brightness(.6) contrast(.95); }
html[data-theme="dark"] .hero__media::after { background: linear-gradient(180deg, rgba(15, 22, 35, .45), rgba(15, 22, 35, .25)); }
html[data-theme="dark"] .eyebrow { color: var(--muted); }
html[data-theme="dark"] .hero__title { color: var(--ink); }
html[data-theme="dark"] .hero__tagline { color: var(--muted); }

html[data-theme="dark"] .pts-open { background: rgba(21, 30, 46, .85); border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .pts-open:hover { background: var(--surface); }

/* ---------- Podio y tabla ---------- */
html[data-theme="dark"] .pod__head,
html[data-theme="dark"] .pod__stat + .pod__stat { border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .pod .avatar { border-color: var(--surface); }
html[data-theme="dark"] .pod--2 .pod__score strong, html[data-theme="dark"] .pod--2 .pod__score .laurel { color: var(--silver-ink); }

html[data-theme="dark"] .search:focus-within { border-color: #3d4a61; box-shadow: 0 0 0 4px rgba(255, 255, 255, .05); }
html[data-theme="dark"] .select select:hover,
html[data-theme="dark"] .chip:hover { border-color: #3d4a61; }
html[data-theme="dark"] .select select:focus-visible { border-color: #4a5870; box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); }
html[data-theme="dark"] .more:hover { border-color: #3d4a61; }

html[data-theme="dark"] .ranking tbody tr:hover td { background: #1b2537; }
html[data-theme="dark"] .ranking td.is-zero { color: #4d586b; }
html[data-theme="dark"] .mv--up { color: #4ad18c; }
html[data-theme="dark"] .mv--down { color: #7d889b; }
html[data-theme="dark"] .mv--new { background: #143a27; color: #6fe0a6; }
html[data-theme="dark"] .ranking tr.top-3 td.c-rank { color: var(--bronze-ink); }
html[data-theme="dark"] .ranking tbody tr:hover td.c-player,
html[data-theme="dark"] .ph__rk.ph__tlist li[data-tid]:hover strong,
html[data-theme="dark"] .ph__rk.th__players li:hover strong,
html[data-theme="dark"] .ncard.is-link:hover .ncard__title { text-decoration-color: #4d586b; }

/* ---------- Ficha de jugador / equipo (popup) ---------- */
html[data-theme="dark"] .ph::backdrop { background: rgba(0, 0, 0, .6); }
html[data-theme="dark"] .ph__inner { box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }
html[data-theme="dark"] .ph__close { background: rgba(21, 30, 46, .9); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .5); }
html[data-theme="dark"] .ph__close:hover { background: var(--surface); }
html[data-theme="dark"] .ph__hero { border-bottom-color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .ph__bg img { filter: saturate(.4) brightness(.6) contrast(.95); }
html[data-theme="dark"] .ph__avatar { border-color: var(--surface); }
html[data-theme="dark"] .ph__rank-chip { border-color: var(--shell); }
html[data-theme="dark"] .ph__rankbox { background: rgba(21, 30, 46, .8); border-color: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .ph__name { color: var(--ink); }
html[data-theme="dark"] .ph--silver { --medal-ink: var(--silver-ink); }
html[data-theme="dark"] .ph--none { --medal-ink: var(--ink); --hero-bg: linear-gradient(135deg, #151e2e 0%, #1c2638 100%); --medal-row: #1d2738; }
html[data-theme="dark"] .ph__t-main em { color: var(--gold-ink); }
html[data-theme="dark"] .ph__t-pos.is-silver,
html[data-theme="dark"] .th__rank.is-silver { color: var(--silver-ink); }
html[data-theme="dark"] .ph__rk.ph__tlist li.is-off .ph__t-pts { color: #4d586b; }

/* ---------- Torneos ---------- */
html[data-theme="dark"] .tbadge--international { --b-bg: #1c2a4d; --b-ink: #9db6ff; }
html[data-theme="dark"] .tbadge--special { --b-bg: #3a2218; --b-ink: #f2a57c; }
html[data-theme="dark"] .tbadge--worldcup { --b-bg: #2d1c47; --b-ink: #cba6ff; }
html[data-theme="dark"] .tbadge--national { --b-bg: #352a10; --b-ink: #f0c662; }
html[data-theme="dark"] .tbadge--local { --b-bg: #12322e; --b-ink: #6fd4c4; }
html[data-theme="dark"] .tdetail__name { color: var(--ink); }
html[data-theme="dark"] .tdetail__pending { background: #2a2312; border-color: #6b5317; color: #f0d48c; }
html[data-theme="dark"] .tdetail__decay.is-gone { color: #e9a07a; }
html[data-theme="dark"] .titem--upcoming,
html[data-theme="dark"] .tupcoming, html[data-theme="dark"] .tupcoming__about { border-color: var(--line); }

/* ---------- Equipos ---------- */
html[data-theme="dark"] .crest,
html[data-theme="dark"] .th__av { border-color: var(--surface); }
html[data-theme="dark"] .tcard__best { border-top-color: rgba(255, 255, 255, .07); }
html[data-theme="dark"] .ph__team-link { text-decoration-color: rgba(255, 255, 255, .25); }

/* ---------- Noticias ---------- */
html[data-theme="dark"] .ncard__tag { background: rgba(21, 30, 46, .92); }
/* resultados: etiqueta dorada tambien en oscuro (si no, quedaba texto azul oscuro sobre fondo oscuro) */
html[data-theme="dark"] .ncard--result .ncard__tag { background: #f4c24f; }
html[data-theme="dark"] .npod__row--1 .npod__pos { color: var(--gold-ink); }
html[data-theme="dark"] .npod__row--3 .npod__pos { color: var(--bronze-ink); }

/* ---------- Organize ---------- */
html[data-theme="dark"] .org-points tbody tr:first-child td { color: var(--gold-ink); }

/* Texto oscuro sobre botones dorados: --navy se aclara en modo oscuro, aqui se fija */
html[data-theme="dark"] .ncard--result .ncard__tag,
html[data-theme="dark"] .org-cta,
html[data-theme="dark"] .tbracket__go { color: #13213b; }

/* Sombras de tarjetas: en fondo oscuro, negras en vez de azuladas */
html[data-theme="dark"] .table-card,
html[data-theme="dark"] .tlist-card,
html[data-theme="dark"] .teams-head,
html[data-theme="dark"] .org-card,
html[data-theme="dark"] .ncard {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 18px 40px -26px rgba(0, 0, 0, .7);
}
html[data-theme="dark"] .tcard { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 30px -24px rgba(0, 0, 0, .7); }

/* numero del 2º en el ranking: el gris plata del modo claro casi no se ve sobre fondo oscuro */
html[data-theme="dark"] .ranking tr.top-2 td.c-rank { color: #b4bdcb; }

html[data-theme="dark"] .select select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html[data-theme="dark"] .tbadge--decay { --b-bg: #3d1a18; --b-ink: #ff9a90; }
html[data-theme="dark"] .ph__tscroll { scrollbar-color: #3a4558 transparent; }
html[data-theme="dark"] .ph__tscroll::-webkit-scrollbar-thumb { background: #3a4558; }