/* Ranking semanal (ranking, con barra inferior). Raíz: .screen.ui.s-ranking. Spec 8.13: pastilla
   de la semana arriba en el centro; podio (2.º · 1.º · 3.º, plata · oro · bronce) a la izquierda y la
   lista del 4.º en adelante a la derecha. Tu fila: .rank-me (marco dorado), fija abajo si no
   estás en el top. */

.s-ranking .ranking-body {
  display: flex; flex-direction: column; width: 100%; max-width: 1180px; max-height: 480px;
  align-self: center; margin: auto 0; padding: 8px 12px 12px;
}
.s-ranking .rk-head { flex: none; display: flex; justify-content: center; margin-bottom: 8px; }
.s-ranking .rk-week { letter-spacing: .9px; }
.s-ranking .rk-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 12px; }
.s-ranking .rk-wait { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; }

/* ---- Podio ---------------------------------------------------------------------------------- */
.s-ranking .rk-podium { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 8px; min-height: 0; }
.s-ranking .rk-plate {
  position: relative; flex: none; width: 92px; height: calc(150px * var(--art-k)); max-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px 6px;
}
.s-ranking .rk-plate.p1 { height: calc(170px * var(--art-k)); }
.s-ranking .rk-plate.pnl { overflow: visible; }
.s-ranking .rk-place { position: relative; left: auto; bottom: auto; flex: none; min-width: 26px; height: 24px; border-radius: 7px; font-size: 16px; }
.s-ranking .rk-plate .avf { flex: none; }
.s-ranking .rk-av { position: relative; flex: none; }
.s-ranking .rk-av .flag { position: absolute; right: -6px; bottom: -3px; width: 18px; height: 12px; box-shadow: 0 0 0 1.5px #0a1f47, 0 2px 3px rgba(0,0,0,.5); }
.s-ranking .rk-pname {
  flex: none; max-width: 100%; text-align: center; font: 800 12px/1.2 var(--f-ui); color: #fff; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.s-ranking .rk-plate .rk-coins { flex: none; }
.s-ranking .rk-plate .rk-coins .ty-num { font-size: 16px; }
.s-ranking .rk-plate .rk-coins img { width: 18px; height: 18px; }
.s-ranking .rk-you { position: absolute; top: -9px; right: -6px; z-index: 6; height: 16px; padding: 0 6px; }
.s-ranking .rk-plate.free { gap: 4px; }
.s-ranking .rk-plate.free .rk-place { opacity: .55; margin-bottom: 6px; }
.s-ranking .rk-q { color: var(--tx-4); text-shadow: none; }
.s-ranking .rk-plate.free .ty-small { color: var(--tx-4); }
/* El trofeo sobre la placa del campeón */
.s-ranking .rk-crown {
  position: absolute; left: 50%; bottom: calc(170px * var(--art-k) + 4px); width: calc(58px * var(--art-k)); height: calc(58px * var(--art-k));
  margin-left: calc(-29px * var(--art-k)); pointer-events: none;
}
.s-ranking .rk-crown .halo { --gc: rgba(255,200,60,.38); left: -40%; right: -40%; top: -40%; bottom: -40%; }
.s-ranking .rk-crown img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.5)); }

/* ---- Lista ---------------------------------------------------------------------------------- */
.s-ranking .rk-right { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.s-ranking .rk-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; margin-right: -4px; }
.s-ranking .rank-row { flex: none; height: 44px; padding: 0 12px 0 8px; gap: 10px; }
.s-ranking .rank-row.sticky { position: sticky; bottom: 0; z-index: 2; margin-top: auto; }
.s-ranking .rk-list .rank-row.sticky::after { /* sombra sobre las filas que pasan por debajo */
  content: ''; position: absolute; left: 6px; right: 6px; top: -12px; height: 10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,4,14,.55), rgba(0,4,14,0) 70%);
}
.s-ranking .rk-pos { flex: none; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.s-ranking .rk-pos .ty-num { font-size: 16px; color: #fff; }
.s-ranking .rank-me .rk-pos { box-shadow: inset 0 2px 6px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,211,77,.5); }
.s-ranking .rank-me .rk-pos .ty-num { color: var(--gold-2); }
.s-ranking .rk-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.s-ranking .rk-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.s-ranking .rk-n { font: 800 13px/1.1 var(--f-ui); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s-ranking .rk-name .flag { width: 16px; height: 11px; }
.s-ranking .rk-name .dot { width: 6px; height: 6px; }
.s-ranking .rk-coins { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.s-ranking .rk-coins img { width: 20px; height: 20px; }
/* Entrada escalonada: como mucho las 10 primeras filas (spec 1.4) */
.s-ranking .rk-list.stagger > :nth-child(n+11) { animation: none; }
.s-ranking .rk-coins .ty-num { font-size: 18px; color: #fff; text-shadow: 0 2px 0 rgba(0,8,30,.55); }
.s-ranking .rk-out { box-shadow: inset 0 0 0 1px rgba(126,174,255,.45), inset 0 1px 0 var(--sf-hi), 0 -6px 14px rgba(0,0,0,.35); }
.s-ranking .rk-empty { flex: 1 1 auto; min-height: 0; display: flex; }
.s-ranking .rk-empty .empty-st { flex: 1; padding: 12px; }
.s-ranking .rk-empty .empty-st > * { flex: none; }
.s-ranking .rk-empty .empty-art { width: calc(76px * var(--art-k)); height: calc(76px * var(--art-k)); }
.s-ranking .rk-empty.wide { grid-column: 1 / -1; }