/* Ranking (/ui/top-jugadores), igual que la maqueta propuesta/ranking.html (10-10-2026).
   Es el <style> de la maqueta sin la cabecera, el pie ni .sesion (están en arte-furtivo.css),
   más lo que la maqueta no dibuja: sin sesión, sin puesto en el corte, hoja vacía y varias hojas. */

/* ---------- Cabecera de la página ---------- */
.cab-ranking .marco { padding-block: var(--e-xl) var(--e-xl); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--e-l) var(--e-xxl); }
.cab-ranking .intro { display: grid; gap: var(--e-xs); max-width: 620px; }
.cab-ranking h1 { font-size: var(--t-titulo); color: var(--marfil); }
.cab-ranking .intro p { color: var(--marfil-suave); }
.tu-puesto { display: grid; gap: 2px; padding-left: var(--e-m); border-left: 2px solid var(--oro); }
.tu-puesto p:first-child { color: var(--marfil-suave); }
.tu-puesto strong { font-family: var(--f-titulo); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--oro); font-variant-numeric: lining-nums; }
.tu-puesto .nota { font-size: var(--t-secundario); font-variant-numeric: lining-nums; }
.tu-puesto .boton { font-size: var(--t-secundario); padding-block: 4px; margin-left: -20px; justify-self: start; }

/* ---------- Pestañas de cuaderno pegadas a la hoja ---------- */
.registro { padding-block: var(--e-xl) var(--e-3xl); }
.pestanas { display: flex; gap: 2px; align-items: flex-end; padding-left: var(--e-m); position: relative; z-index: 2; }
.pestana { position: relative; display: inline-flex; align-items: center; padding: 10px 18px 10px 26px; border-radius: var(--r-ficha) var(--r-ficha) 0 0;
  color: var(--marfil); text-decoration: none; font-size: 1.0625rem; font-weight: 500; line-height: 1.55; }
.pestana > span { padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size var(--d-foco) var(--curva-papel); }
.pestana::before { content: ""; position: absolute; left: 10px; top: 50%; width: 8px; height: 8px; background: var(--oro); transform: translateY(-50%) rotate(45deg) scale(0); transition: transform var(--d-foco) var(--curva-papel); }
.pestana:hover::before, .pestana:focus-visible::before { transform: translateY(-50%) rotate(45deg) scale(1); }
.pestana:hover > span, .pestana:focus-visible > span { background-size: 100% 2px; }
.pestana:focus-visible { outline-offset: 2px; }
.pestana[aria-current] { background-color: var(--arena); background-image: var(--grano); color: var(--tinta); font-weight: 700; box-shadow: inset 0 3px 0 var(--oro); margin-bottom: -1px; padding-bottom: 11px; }
.pestana[aria-current]::before { background: var(--terracota-oscura); transform: translateY(-50%) rotate(45deg) scale(1); }

/* ---------- El libro de registro ---------- */
.libro { padding: var(--e-xl) var(--e-xxl) var(--e-l); border-top-left-radius: 0; }
.libro-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px var(--e-l); padding-bottom: var(--e-m); border-bottom: 2px solid var(--tinta); }
.libro-cab h2 { font-size: var(--t-seccion); }
.libro-cab p { color: var(--tinta-suave); font-size: var(--t-secundario); font-variant-numeric: lining-nums; }
/* «Comunidad Adicthimos» (el nombre de la comunidad, solo aquí) va delante de la nota de la maqueta;
   en el móvil cada cosa en su renglón. */

/* Podio sobrio: escalones dibujados con tinta, sin copas ni brillos */
.podio { list-style: none; margin: 0; padding: var(--e-xl) 0 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; border-bottom: 2px solid var(--tinta); }
.podio li { display: grid; justify-items: center; text-align: center; gap: 2px; padding-inline: var(--e-m); }
.podio .p1 { order: 2; } .podio .p2 { order: 1; } .podio .p3 { order: 3; }
.podio .nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.375rem; line-height: 1.15; overflow-wrap: anywhere; }
.podio .p1 .nombre { font-size: 1.625rem; }
.podio .marca-tu { font-style: italic; color: var(--terracota-oscura); margin-left: 6px; }
.podio .meta { font-size: var(--t-secundario); color: var(--tinta-suave); font-variant-numeric: lining-nums; }
.podio .xp { font-family: var(--f-titulo); font-weight: 800; font-size: 1.25rem; font-variant-numeric: lining-nums; margin-bottom: var(--e-s); }
.podio .escalon { width: 100%; max-width: 260px; display: grid; place-items: start center; padding-top: 6px; border: 2px solid var(--tinta); border-bottom: 0; border-radius: 2px 2px 0 0;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--tinta) 7%, transparent) 0 2px, transparent 2px 7px), var(--arena-tarjeta);
  font-family: var(--f-titulo); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--terracota-oscura); font-variant-numeric: lining-nums; }
.podio .p1 .escalon { height: 88px; font-size: 2.125rem; }
.podio .p2 .escalon { height: 64px; }
.podio .p3 .escalon { height: 46px; }

/* Columnas y filas del padrón */
.columnas, .fila { display: grid; grid-template-columns: 76px minmax(0, 1fr) 96px 150px 140px; align-items: center; column-gap: var(--e-m); }
.regla-margen { background-image: linear-gradient(90deg, transparent 66px, color-mix(in srgb, var(--terracota-oscura) 42%, transparent) 66px 67px, transparent 67px 70px, color-mix(in srgb, var(--terracota-oscura) 42%, transparent) 70px 71px, transparent 71px); }
.columnas { padding: var(--e-s) var(--e-s) 8px; border-bottom: 1px solid var(--tinta); font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: var(--t-secundario); color: var(--tinta-suave); }
.columnas span:nth-child(n+3), .fila > span:nth-child(n+3) { text-align: right; }
.filas { list-style: none; margin: 0; padding: 0; }
.fila { padding: 12px var(--e-s); border-bottom: 1px solid var(--arena-oscura); font-variant-numeric: lining-nums tabular-nums; }
.fila .puesto { font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; text-align: left; padding-left: 8px; }
.fila .jugador { font-weight: 500; overflow-wrap: anywhere; }
.fila .nivel, .fila .casos { color: var(--tinta-suave); }
.fila .xp { font-family: var(--f-titulo); font-weight: 700; font-size: 1.1875rem; }
.etq { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* La fila del jugador con sesión: rombo, «Tú» escrito y fondo algo más cálido. Se queda al pie si no se ve. */
.fila.tu { position: sticky; bottom: 0; z-index: 3; background-color: #E3C98F; background-image: var(--grano), linear-gradient(90deg, transparent 66px, color-mix(in srgb, var(--terracota-oscura) 50%, transparent) 66px 67px, transparent 67px 70px, color-mix(in srgb, var(--terracota-oscura) 50%, transparent) 70px 71px, transparent 71px);
  border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta); box-shadow: 0 -12px 18px -12px color-mix(in srgb, var(--velo) 55%, transparent); }
.fila.tu .jugador { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font-weight: 700; }
.fila.tu .jugador::before { content: ""; flex: none; align-self: center; width: 10px; height: 10px; background: var(--terracota-oscura); transform: rotate(45deg); margin-right: 2px; }
.fila.tu .marca-tu { font-family: var(--f-titulo); font-style: italic; color: var(--terracota-oscura); }
.fila.tu .nivel, .fila.tu .casos { color: var(--tinta); }

/* Hoja sin nadie (corte semanal o mensual sin partidas, o base vacía) */
.libro .vacio { padding: var(--e-xxl) 0 var(--e-xl); display: grid; gap: var(--e-xs); justify-items: start; border-bottom: 1px solid var(--arena-oscura); }
.libro .vacio p:first-child { font-family: var(--f-titulo); font-weight: 700; font-size: var(--t-sub); }
.libro .vacio p { color: var(--tinta-suave); }
.libro .vacio p:first-child { color: var(--tinta); }

.libro-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-s) var(--e-l); padding-top: var(--e-l); }
.libro-pie p { font-size: var(--t-secundario); color: var(--tinta-suave); font-variant-numeric: lining-nums; }
.libro-pie .hojas { display: flex; flex-wrap: wrap; gap: 0 var(--e-l); }

/* ---------- Móvil: la tabla pasa a filas de dos renglones ---------- */
@media (max-width: 720px) {
  .cab-ranking .marco { padding-block: var(--e-l); gap: var(--e-m); }
  .cab-ranking .intro p { font-size: var(--t-secundario); }
  .tu-puesto strong { font-size: 1.875rem; }
  .registro { padding-block: var(--e-l) var(--e-xxl); }
  .pestanas { padding-left: 0; }
  .pestana { padding: 10px 14px 10px 22px; font-size: 1rem; }
  .pestana::before { left: 8px; width: 7px; height: 7px; }
  .libro { padding: var(--e-l) var(--e-m) var(--e-m); }
  .libro-cab { display: grid; gap: 2px; }
  .libro-cab h2 { font-size: 1.5rem; }
  .libro-cab .sep { display: none; }
  .libro-cab .orden { display: block; }
  .libro-cab .orden::first-letter { text-transform: uppercase; }
  .podio { padding-top: var(--e-l); }
  .podio li { padding-inline: 4px; }
  .podio .nombre, .podio .p1 .nombre { font-size: 1.0625rem; }
  .podio .meta { font-size: var(--t-minimo); line-height: 1.35; }
  .podio .meta .sep { display: block; height: 0; overflow: hidden; }
  .podio .xp { font-size: 1.0625rem; margin-bottom: var(--e-xs); }
  .podio .p1 .escalon { height: 64px; font-size: 1.75rem; }
  .podio .p2 .escalon { height: 48px; font-size: 1.5rem; }
  .podio .p3 .escalon { height: 36px; font-size: 1.375rem; }
  .columnas { display: none; }
  .fila { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "puesto jugador xp" "puesto nivel casos"; row-gap: 2px; column-gap: var(--e-s); padding: 10px 4px; }
  .regla-margen { background-image: none; }
  .fila.tu { background-image: var(--grano); }
  .fila .puesto { grid-area: puesto; align-self: start; padding-left: 0; text-align: center; }
  .fila .jugador { grid-area: jugador; }
  .fila .xp { grid-area: xp; }
  .fila .nivel { grid-area: nivel; text-align: left !important; font-size: var(--t-minimo); }
  .fila .casos { grid-area: casos; font-size: var(--t-minimo); }
  .nivel .etq, .casos .etq { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .libro-pie { justify-content: flex-start; }
  .libro .vacio { padding-block: var(--e-xl) var(--e-l); }
}