/* ---------- ranking kiosco ---------- */
.pestanas{display:flex;gap:8px;justify-content:center;}
.pestana{
  flex:1;min-height:60px;border-radius:14px;border:3px solid var(--wapuu-navy);
  background:var(--wc-white);color:var(--wc-ink);font-family:var(--display);font-weight:800;
  font-size:clamp(16px,3.6vw,22px);box-shadow:0 4px 0 var(--wapuu-navy);
}
.pestana[aria-selected="true"]{background:var(--wc-yellow);}
.tabla{
  flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  background:var(--wc-cyan-pale);border:var(--linea) solid var(--wapuu-navy);border-radius:var(--radio);padding:10px;
}
.fila{
  display:grid;grid-template-columns:auto 46px 1fr auto;align-items:center;gap:12px;
  background:var(--wc-white);border:3px solid var(--wapuu-navy);border-radius:14px;padding:8px 14px;
}
.fila .mini-wapuu{width:46px;height:46px;}
.fila .pos{font-family:var(--datos);font-weight:700;font-size:20px;width:34px;text-align:center;}
.fila .nom{font-family:var(--display);font-weight:800;font-size:clamp(17px,3.8vw,24px);color:var(--wapuu-navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fila .nom small{display:block;font-family:var(--texto);font-size:13px;font-weight:700;opacity:.6;}
.fila .t{font-family:var(--datos);font-weight:700;font-size:clamp(17px,4vw,24px);font-variant-numeric:tabular-nums;}
.fila.mio{background:var(--wc-yellow);box-shadow:0 0 0 5px var(--wapuu-gold);}
.vacio{text-align:center;font-weight:700;opacity:.75;padding:30px 10px;}

/* ---------- ranking en vivo ---------- */
#p-vivo{padding:clamp(16px,2vw,26px);gap:clamp(10px,1.6vh,20px);background:var(--wc-cyan);}
.vivo-cab{display:flex;align-items:center;gap:18px;flex-wrap:wrap;position:relative;}
.vivo-cab .marca{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.4vw,52px);color:var(--wapuu-navy);line-height:1;}
.vivo-cab .marca small{display:block;font-family:var(--texto);font-size:clamp(13px,1.2vw,20px);font-weight:700;opacity:.78;}
.estado{
  margin-left:auto;display:flex;align-items:center;gap:10px;background:var(--wc-white);
  border:3px solid var(--wapuu-navy);border-radius:999px;padding:8px 18px;font-weight:800;
  font-size:clamp(13px,1.1vw,18px);color:var(--wc-ink);
}
.punto{width:14px;height:14px;border-radius:50%;background:var(--wapuu-green-lt);border:2px solid var(--wapuu-navy);flex:none;}
.estado.malo .punto{background:var(--wapuu-red-lt);animation:pulso 1.2s ease-in-out infinite;}
.vivo-cols{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,22px);}
.vivo-col{display:flex;flex-direction:column;gap:10px;min-height:0;}
.vivo-col h2{
  text-align:center;background:var(--wc-blue);color:var(--wc-white);border:var(--linea) solid var(--wapuu-navy);
  border-radius:16px;padding:8px 10px;font-size:clamp(24px,2.2vw,40px);font-weight:800;
}
.vivo-lista{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(5px,.7vh,10px);overflow:hidden;}
.vivo-fila{
  display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:clamp(8px,.8vw,16px);
  background:var(--wc-white);border:3px solid var(--wapuu-navy);border-radius:14px;
  padding:clamp(4px,.6vh,10px) clamp(8px,.8vw,16px);flex:1;min-height:0;
}
.vivo-fila .pos{font-family:var(--datos);font-weight:700;font-size:clamp(16px,1.7vw,32px);width:2.2ch;text-align:center;}
.vivo-fila .mini-wapuu{width:clamp(30px,3vw,58px);height:clamp(30px,3vw,58px);}
.vivo-fila .nom{font-family:var(--display);font-weight:800;font-size:clamp(17px,2vw,38px);color:var(--wapuu-navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vivo-fila .t{font-family:var(--datos);font-weight:700;font-size:clamp(16px,1.8vw,34px);font-variant-numeric:tabular-nums;}
.vivo-fila.destacar{animation:destacar 3s ease-out;}
@keyframes destacar{0%{background:var(--wc-yellow);transform:scale(1.04);box-shadow:0 0 0 8px var(--wapuu-gold);}
  70%{background:var(--wc-yellow);}100%{background:var(--wc-white);transform:scale(1);box-shadow:none;}}
.vivo-vacio{display:grid;place-items:center;text-align:center;font-weight:700;color:var(--wapuu-navy);opacity:.7;
  border:3px dashed rgba(4,31,51,.35);border-radius:14px;flex:1;padding:10px;font-size:clamp(14px,1.2vw,22px);}
.vivo-pie{text-align:center;font-family:var(--display);font-weight:800;font-size:clamp(16px,1.6vw,28px);color:var(--wapuu-navy);opacity:.85;margin:0;}
#hotspot-vivo{position:absolute;left:0;top:0;width:100px;height:80px;}

/* ---------- posición del jugador en el ranking ---------- */
.banner-pos{
  background:var(--wapuu-navy);color:var(--wc-yellow);border-radius:14px;padding:12px 16px;text-align:center;
  font-family:var(--display);font-weight:800;font-size:clamp(20px,4.6vw,32px);flex:none;
}
.sep-puntos{text-align:center;font-weight:800;letter-spacing:.3em;color:var(--wapuu-navy);opacity:.6;flex:none;}
.banner-pos{position:sticky;top:0;z-index:2;}