/* =========================================================================
   RANKING MUNDIAL

   Todo el movimiento va por `transform` y `opacity` (compositor). La pantalla
   monta ~55 retratos animados en canvas a la vez, así que el hilo principal ya
   tiene trabajo: animar sombras o degradados aquí lo hundiría.
   ========================================================================= */

/* Tres categorías no caben a 375 px: la última se cortaba por la derecha.
   Se permite desplazamiento lateral y se ocultan las barras. */
.rk-tabs{
  margin-bottom:10px; display:flex; gap:6px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rk-tabs::-webkit-scrollbar{ display:none; }
.rk-tabs .tab{ display:inline-flex; align-items:center; gap:5px; flex:0 0 auto; white-space:nowrap; }
.rk-tabs .tab .ic{ width:1.1em; height:1.1em; }

/* ---------------- Cuenta atrás ---------------- */
.rk-countdown{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:7px 12px; margin-bottom:14px; border-radius:99px;
  background:linear-gradient(90deg, rgba(255,61,127,.14), rgba(168,85,247,.14));
  border:1px solid rgba(255,61,127,.32);
  font-size:11.5px; color:var(--tx-mid);
}
.rk-cd-label{ display:inline-flex; align-items:center; gap:5px; }
.rk-countdown .timer{ font-weight:900; color:#FF7FA8; font-variant-numeric:tabular-nums; }

/* ==================== PODIO ==================== */
.rk-podium{
  display:grid; grid-template-columns:1fr 1.24fr 1fr; align-items:end; gap:8px;
  margin-bottom:16px; padding:10px 4px 0;
}
.rk-pod{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:12px 6px 0; border-radius:16px 16px 0 0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--glow) 16%, transparent), transparent 62%);
  animation:rkRise .5s var(--ease-back) backwards;
}
.rk-pod-2{ animation-delay:.05s }
.rk-pod-1{ animation-delay:0s }
.rk-pod-3{ animation-delay:.1s }
@keyframes rkRise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}

.rk-pod.vacant{
  opacity:.65;
  filter:grayscale(.3);
}
.rk-pod.vacant .rk-pod-name{
  color:var(--tx-lo);
  font-style:italic;
}
.rk-pod.vacant .rk-crown{
  opacity:.35;
  filter:grayscale(1);
}
.rk-pod.vacant .rk-pod-base{
  opacity:.75;
}

/* El campeón se eleva sobre los otros dos: la jerarquía se lee sin leer nada. */
.rk-pod-1{ margin-bottom:26px; }

.rk-crown{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  animation:rkCrown 2.6s ease-in-out infinite;
}
@keyframes rkCrown{
  0%,100%{ transform:translateX(-50%) translateY(0) rotate(-4deg) }
  50%    { transform:translateX(-50%) translateY(-3px) rotate(4deg) }
}

.rk-pod-rank{
  display:grid; place-items:center;
  width:24px; height:24px; margin-top:2px; border-radius:50%;
  background:linear-gradient(160deg, var(--c1), var(--c2));
  color:#2A1B00; font-size:12.5px; font-weight:900;
  box-shadow:0 0 12px color-mix(in srgb, var(--glow) 55%, transparent);
}
.rk-pod-1 .rk-pod-rank{ width:28px; height:28px; font-size:14px; }

.rk-pod-name{
  max-width:100%; font-size:11px; font-weight:800; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rk-pod-1 .rk-pod-name{ font-size:12.5px; }
.rk-pod-score{ font-size:10.5px; color:var(--tx-lo); font-variant-numeric:tabular-nums; }

/* Cajón del podio */
.rk-pod-base{
  width:100%; margin-top:7px; padding:7px 4px;
  display:flex; align-items:center; justify-content:center; gap:4px;
  border-radius:10px 10px 0 0;
  background:linear-gradient(180deg, var(--c1), var(--c2));
  color:#2A1B00; font-size:11px; font-weight:900;
  box-shadow:0 0 10px color-mix(in srgb, var(--glow) 42%, transparent),inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(40,20,0,.28);
  position:relative;overflow:hidden;border-radius:0;clip-path:polygon(9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px),0 9px);
}
.rk-pod-base::after{content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.62),transparent);transform:skewX(-18deg);animation:asaltoBrillo 4.4s ease-in-out infinite;pointer-events:none}
.rk-pod-1 .rk-pod-base{ padding:14px 4px; }
.rk-pod-3 .rk-pod-base{ padding:5px 4px; }
/* Iconos sobre el cajón: dorado sobre dorado no se ve (mismo criterio que
   .btn.premium). Se oscurecen para que quede la silueta. */
.rk-pod-base .ic{ filter:brightness(.22) saturate(.5); }

.rk-pod.me .rk-pod-name{ color:var(--c-neon); }

/* ==================== TARJETA PROPIA ==================== */
.rk-me{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; margin-bottom:14px; border-radius:var(--r-md,14px);
  background:var(--panel); border:1px solid var(--stroke);
  position:relative; overflow:hidden;
}
.rk-me.in{
  border-color:color-mix(in srgb, var(--glow, #39FF88) 55%, transparent);
  box-shadow:0 0 18px color-mix(in srgb, var(--glow, #39FF88) 20%, transparent);
}
.rk-me.out{ border-color:rgba(255,77,109,.35); }
.rk-me::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c-neon);
}
.rk-me.out::before{ background:#FF4D6D; }

.rk-me-left{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.rk-me-rank{ font-size:15px; font-weight:900; color:var(--tx-hi); font-variant-numeric:tabular-nums; }
.rk-me-mid{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.rk-me-mid b{ font-size:13px; }
.rk-me-mid span{ font-size:11px; color:var(--tx-mid); }
.rk-gap{ display:inline-flex; align-items:center; gap:4px; color:var(--c-neon) !important; font-weight:700; }
.rk-gap .ic{ width:1em; height:1em; }

.rk-me-right{ flex:0 0 auto; text-align:right; display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.rk-tag{
  font-size:9.5px; font-weight:900; letter-spacing:.04em; padding:2px 8px; border-radius:99px;
  background:color-mix(in srgb, var(--glow, #39FF88) 22%, transparent);
  color:var(--glow, #39FF88);
  border:1px solid color-mix(in srgb, var(--glow, #39FF88) 45%, transparent);
}
.rk-tag.off{ background:rgba(255,77,109,.14); color:#FF8FA8; border-color:rgba(255,77,109,.35); }
.rk-me-prize{ font-size:12px; font-weight:800; display:inline-flex; align-items:center; gap:4px; }
.rk-me-prize.off{ color:var(--tx-lo); font-weight:600; }

/* ==================== LISTA ==================== */
.rk-list-panel{ margin-bottom:14px; }
.rk-list{ display:flex; flex-direction:column; gap:5px; }

.rk-row{
  display:flex; align-items:center; gap:9px;
  padding:6px 8px; border-radius:11px;
  background:rgba(255,255,255,.028);
  border:1px solid transparent;
  transition:background var(--t-fast);
}
/* Los tres tramos con premio llevan un filo de su color: se distingue de un
   vistazo dónde está cada franja sin tener que leer los números. */
.rk-row[style*="--glow"]{ border-color:color-mix(in srgb, var(--glow) 28%, transparent); }
.rk-row.me{
  background:rgba(57,255,136,.10);
  border-color:rgba(57,255,136,.45);
}
.rk-n{
  flex:0 0 26px; text-align:center;
  font-size:12px; font-weight:900; color:var(--tx-mid); font-variant-numeric:tabular-nums;
}
.rk-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.rk-info b{ font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rk-info span{ font-size:10px; color:var(--tx-lo); }
.rk-score{ flex:0 0 auto; font-size:12px; font-weight:800; font-variant-numeric:tabular-nums; }

/* Línea de corte de premios */
.rk-cut{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin:8px 0 4px; padding:5px;
  font-size:10px; font-weight:800; letter-spacing:.05em; color:#FF8FA8;
  border-top:1px dashed rgba(255,77,109,.5);
  border-bottom:1px dashed rgba(255,77,109,.5);
}
.rk-cut .ic{ width:1.1em; height:1.1em; }

/* ==================== CUADRO DE PREMIOS ==================== */
.rk-prizes{ margin-bottom:10px; }
.rk-prize-row{
  display:flex; align-items:center; gap:11px;
  padding:9px 4px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.rk-prize-row:last-child{ border-bottom:0; }
.rk-medal{
  flex:0 0 44px; height:44px; display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(160deg, var(--c1), var(--c2));
  color:#2A1B00; font-size:12px; font-weight:900;
  box-shadow:0 0 14px color-mix(in srgb, var(--glow) 38%, transparent),
             inset 0 1px 0 rgba(255,255,255,.55);
}
.rk-prize-mid{ flex:1 1 auto; min-width:0; }
.rk-prize-mid b{ font-size:12.5px; }
.rk-prize-items{
  display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:3px;
  font-size:10.5px; color:var(--tx-mid);
}
.rk-prize-items span{ display:inline-flex; align-items:center; gap:3px; }
.rk-prize-items .ic{ width:1.15em; height:1.15em; }
.rk-exclusive{
  display:inline-flex; align-items:center; gap:4px; margin-top:4px;
  font-size:10px; font-weight:800; color:#FF7FA8;
}

/* ==================== BANNER DE COBRO ==================== */
.rk-claim{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:11px 12px; margin-bottom:14px; border-radius:var(--r-md,14px);
  background:linear-gradient(115deg, #3A1E00, #7A3B00 55%, #3A1E00);
  border:1px solid rgba(255,176,32,.55);
  position:relative; overflow:hidden;
  animation:rkPulse 2.2s ease-in-out infinite;
}
@keyframes rkPulse{
  0%,100%{ box-shadow:0 0 0 rgba(255,176,32,0) }
  50%    { box-shadow:0 0 22px rgba(255,176,32,.42) }
}
/* Brillo que barre el banner. Sólo transform: no repinta. */
.rk-claim::after{
  content:""; position:absolute; top:0; left:-60%; width:38%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.30), transparent);
  transform:skewX(-22deg); animation:rkSheen 2.6s ease-in-out infinite;
}
/* 195% del padre sobre un elemento del 38% = 513,16% de su ancho.
   El comentario de arriba ya decia «solo transform: no repinta» — ahora es
   verdad; animaba `left`, que es justo lo contrario. */
@keyframes rkSheen{
  0%,66%{ transform:translateX(0) skewX(-22deg) }
  100%  { transform:translateX(513.16%) skewX(-22deg) }
}
.rk-claim-ico{ flex:0 0 auto; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.rk-claim-txt{ flex:1 1 auto; min-width:0; text-align:left; }
.rk-claim-txt b{ display:block; font-size:13px; color:#FFE9A8; }
.rk-claim-txt span{ font-size:10.5px; color:#E8C48A; }
.rk-claim-cta{
  flex:0 0 auto; padding:7px 13px; border-radius:10px;
  background:var(--g-premium); color:#2A1300;
  font-size:11.5px; font-weight:900; letter-spacing:.05em;
}

/* ==================== POPUP DE PREMIO ==================== */
.rk-win{ text-align:center; padding:4px 0 12px; }
.rk-win-ico{ animation:rkCrown 2.4s ease-in-out infinite; }
.rk-win-t{
  margin:8px 0 6px; font-size:19px; font-weight:900; letter-spacing:.06em;
  background:linear-gradient(90deg,#FFE9A8,#FF3D7F,#FFE9A8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rk-win-line{ font-size:11.5px; color:var(--tx-mid); margin:2px 0; }
.rk-win-line .ic{ width:1.15em; height:1.15em; vertical-align:-.2em; }
.rk-win-frame{
  margin-top:10px; padding:7px; border-radius:10px; text-align:center;
  font-size:11.5px; font-weight:800; color:#FF7FA8;
  background:rgba(255,61,127,.12); border:1px solid rgba(255,61,127,.4);
}

/* Movimiento reducido: lo pide el sistema por accesibilidad. */
@media (prefers-reduced-motion: reduce){
  .rk-pod, .rk-crown, .rk-claim, .rk-claim::after, .rk-win-ico{ animation:none !important; }
}

/* ---------------- Descripción de la categoría ---------------- */
/* Estaba en los datos y no se enseñaba: sin esto no se sabe si "Exterminio"
   cuenta bajas totales o sólo las de esta semana. */
.rk-desc{
  display:flex; align-items:center; gap:6px;
  margin:-6px 0 12px; padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.035); border:1px solid var(--stroke);
  font-size:10.5px; color:var(--tx-mid); line-height:1.35;
}
.rk-desc .ic{ width:1.25em; height:1.25em; flex:0 0 auto; }

/* ---------------- Variación de puesto ---------------- */
.rk-me-name{ display:flex; align-items:center; gap:6px; min-width:0; }
.rk-me-name b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk-delta{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:2px;
  padding:1px 6px; border-radius:99px;
  font-size:9.5px; font-weight:900; line-height:1.5;
}
.rk-delta .ic{ width:.95em; height:.95em; }
.rk-delta.up  { color:#39FF88; background:rgba(57,255,136,.14); }
.rk-delta.down{ color:#FF6B8A; background:rgba(255,77,109,.14); }
.rk-delta.same{ color:var(--tx-lo); background:rgba(255,255,255,.06); }

.rk-best{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--gold, #FFD34E) !important; font-size:10px !important; font-weight:700;
}
.rk-best .ic{ width:1em; height:1em; }

/* Procedencia de los datos: real o simulada. Mientras no haya servidor la
   tabla es local, y decirlo evita presentar como mundial algo que no lo es. */
.rk-fuente{
  display:flex; align-items:center; justify-content:center; gap:6px;
  margin-bottom:8px; padding:5px 10px; border-radius:99px;
  font-size:10.5px; font-weight:700;
}
.rk-fuente .ic{ width:1.15em; height:1.15em; }
.rk-fuente.real{ color:var(--c-neon); background:rgba(57,255,136,.10); border:1px solid rgba(57,255,136,.32); }
.rk-fuente.sim{ color:#FFC53D; background:rgba(255,197,61,.10); border:1px solid rgba(255,197,61,.32); }