/* Estilos del ranking de personajes. */

@import url("/css/titles/titles.css");

@font-face{
  font-family:"GenshinImpact";
  src:url("/fonts/Genshin.woff2") format("woff2");
  font-display:swap;
}

:root{
  --bg:#0a0e14;
  --panel:rgba(10,14,20,.55);
  --panel2:rgba(10,14,20,.40);
  --stroke:rgba(255,255,255,.12);
  --stroke2:rgba(255,255,255,.18);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --shadow:0 18px 60px rgba(0,0,0,.55);
  --radius:18px;
  --radius-sm:14px;

  /* Elementos usados para colorear nombres. */
  --pyro:#ff5a4f;
  --hydro:#4ab3ff;
  --anemo:#4ff0c8;
  --electro:#b57bff;
  --dendro:#7dff5a;
  --cryo:#7fe5ff;
  --geo:#ffcf63;
  --none:#d3d3d3;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"GenshinImpact",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

/* Barra de desplazamiento. */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.25)}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12));
}

/* ===== Fondo ===== */
.pv-bg-wrap{position:fixed;inset:0;z-index:-3}
.pv-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04);opacity:.92}
.pv-bg-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,rgba(0,0,0,.25),rgba(0,0,0,.74) 70%,rgba(0,0,0,.92));z-index:1}
.pv-bg-grain{position:absolute;inset:-50%;background-image:url("/img/grain.png");background-repeat:repeat;opacity:.06;animation:grainMove 10s linear infinite;z-index:2;pointer-events:none}
@keyframes grainMove{0%{transform:translate(0,0)}100%{transform:translate(6%,6%)}}

/* ===== Barra superior ===== */
.pv-topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(10,14,20,.78),rgba(10,14,20,.56));
  backdrop-filter:blur(14px) saturate(140%);
}

.pv-left{display:flex;align-items:center;gap:12px;justify-self:start;}
.pv-comp{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.pv-comp-icon{width:44px;height:44px;border-radius:14px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 14px 40px rgba(0,0,0,.45)}
.pv-comp-text{display:flex;flex-direction:column;line-height:1.05}
.pv-comp-kicker{font-weight:900;letter-spacing:.18em;font-size:12px;opacity:.92}
.pv-comp-title{font-weight:900;letter-spacing:.06em;font-size:14px}

.pv-navlink{
  text-decoration:none;
  color:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.18);
  padding:10px 12px;
  border-radius:999px;
  transition:transform .14s ease,background .14s ease,border-color .14s ease;
  white-space:nowrap;
}
.pv-navlink:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}

.pv-center{
  justify-self:center;
  text-decoration:none;
  font-weight:1000;
  letter-spacing:.22em;
  font-size:20px;
  color:rgba(255,255,255,.94);
  text-shadow:0 0 20px rgba(255,255,255,.08),0 0 60px rgba(0,0,0,.65);
}
.pv-center:hover{filter:brightness(1.05)}

.pv-user{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:inherit;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  transition:transform .14s ease,background .14s ease,border-color .14s ease;
  max-width:320px;
}
.pv-user:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.pv-avatar-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:999px;
  overflow:visible; /* El marco se coloca por fuera del avatar. */
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.25);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  flex:0 0 auto;
}
.pv-avatar-wrap.big{ width:54px; height:54px; }

.pv-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  display:block;
  position:relative;
  z-index:2;
  box-shadow:0 0 0 2px rgba(0,0,0,.35) inset;
}

.pv-avatar-frame{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:178%;
  height:178%;
  object-fit:contain;
  pointer-events:none;
  z-index:1; /* Capa posterior para enmarcar sin tapar el avatar. */
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  opacity:1;
}

.pv-user-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.pv-user-name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv-user-rank{font-size:12px;color:rgba(255,255,255,.74);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width: 980px){
  .pv-topbar{ grid-template-columns: 1fr 1fr; }
  .pv-center{ display:none; }
  .pv-user{ max-width:240px; }
}

/* ===== Estructura ===== */
.wrap{max-width:1880px;margin:0 auto;padding:18px 10px 70px}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:stretch;margin-top:14px}
@media (max-width: 980px){.hero{grid-template-columns:1fr}}

.hero-left,.hero-right{
  padding:18px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(10,14,20,.62),rgba(10,14,20,.34));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}
.hero h1{margin:0 0 8px;font-size:34px;letter-spacing:.02em}
.hero p{margin:0;color:var(--muted);line-height:1.35}
.hero p b{color:rgba(255,255,255,.92)}
.muted{color:var(--muted)}

.hint-card{height:100%;display:flex;flex-direction:column;justify-content:center}
.hint-title{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;opacity:.92;margin-bottom:8px}
.hint-text{color:var(--muted);line-height:1.4}

/* ===== Panel y controles ===== */
.panel{
  margin-top:16px;
  padding:14px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(10,14,20,.52),rgba(10,14,20,.30));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:6px 4px 10px}
.field{display:flex;flex-direction:column;gap:6px;min-width:150px}
.field--wide{min-width:260px;flex:1 1 260px}
.field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.88}

.field input,
.field select{
  font-family:inherit;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  transition:border-color .14s ease,box-shadow .14s ease;
}
.field select{appearance:none;-webkit-appearance:none}
.field input:focus,
.field select:focus{border-color:rgba(255,255,255,.26);box-shadow:0 0 0 3px rgba(255,255,255,.07)}

/* Opciones con contraste legible. */
select option{background:#070b12;color:#fff}

.select-with-icon{position:relative;display:flex;align-items:center}
.sel-ico{width:18px;height:18px;position:absolute;left:12px;opacity:.95;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.select-with-icon select{padding-left:40px;width:100%}

.field--checks{min-width:170px}
.check{display:flex;align-items:center;gap:10px;padding:10px 12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.14);border-radius:12px}
.check input{transform:scale(1.05)}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.92);
  cursor:pointer;user-select:none;
  transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);box-shadow:0 12px 40px rgba(0,0,0,.35)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(0,0,0,.18)}
.btn.icon{width:44px;height:44px;padding:0;font-size:20px;line-height:1}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Paginador */
.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0 10px}
.pager--bottom{margin-top:12px}
.pager-info{font-size:12px;letter-spacing:.10em;text-transform:uppercase;opacity:.9}

/* ===== Tabla ===== */
.table-wrap{overflow:visible;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.20)}
.rank-table{width:100%;border-collapse:collapse;}
.rank-table thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,14,20,.92),rgba(10,14,20,.72));
  border-bottom:1px solid rgba(255,255,255,.14);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 10px;text-align:left;
}
.rank-table tbody td{padding:10px 10px;border-bottom:1px solid rgba(255,255,255,.08);vertical-align:middle}
.rank-table tbody tr{cursor:pointer;transition:background .14s ease,transform .14s ease}
.rank-table tbody tr:hover{background:rgba(255,255,255,.04)}
.rank-table tbody tr:active{transform:scale(.997)}
.loading{color:rgba(255,255,255,.70);padding:18px 12px}

/* Celda de personaje */
.charcell{display:flex;align-items:center;gap:12px}
.charimg{
  width:46px;height:46px;border-radius:14px;object-fit:cover;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);
  box-shadow:0 10px 30px rgba(0,0,0,.30);
  transition:transform .18s ease,filter .18s ease;
}
.rank-table tbody tr:hover .charimg{transform:translateY(-1px) scale(1.03);filter:saturate(1.1) contrast(1.06)}
.charname{font-weight:1000;letter-spacing:.02em}

/* Colores elementales */
.el-Pyro{color:var(--pyro)}
.el-Hydro{color:var(--hydro)}
.el-Anemo{color:var(--anemo)}
.el-Electro{color:var(--electro)}
.el-Dendro{color:var(--dendro)}
.el-Cryo{color:var(--cryo)}
.el-Geo{color:var(--geo)}
.el-Ninguno{color:var(--none)}

/* Celda del jugador destacado */
.topcell{display:flex;align-items:center;gap:17px;padding-left:6px}
.avatar-wrap{
  position:relative;
  width:46px;height:46px;
  border-radius:999px;
  overflow:visible;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  flex:0 0 auto;
}
.avatar{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:999px;
  position:relative;
  z-index:2;
  box-shadow:0 0 0 2px rgba(0,0,0,.35) inset;
}
.avatar-frame{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:178%;height:178%;
  object-fit:contain;
  pointer-events:none;
  z-index:1;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
}
/* Marcos y auras centralizados en frames.css. */

.topname{display:flex;flex-direction:column;gap:3px;min-width:0}
.topname a{color:rgba(255,255,255,.92);text-decoration:none;font-weight:1000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topname a:hover{text-decoration:underline}
.topsub{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:rgba(255,255,255,.70);font-size:12px}

/* ===== Insignias destacadas ===== */
.best-badge{
  --c: rgba(255,255,255,.9);
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-weight:1000;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.10));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.best-badge::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:radial-gradient(120px 38px at 10% 40%, rgba(255,255,255,.20), transparent 60%),
             radial-gradient(120px 38px at 90% 60%, rgba(255,255,255,.12), transparent 60%);
  opacity:.9;
}
.best-badge::after{
  content:"";
  position:absolute;
  inset:-4px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-120%);
  animation:bestSweep 3.2s ease-in-out infinite;
  opacity:.85;
}
@keyframes bestSweep{0%{transform:translateX(-120%)}55%{transform:translateX(120%)}100%{transform:translateX(120%)}}

.best-badge .best-text-inner{position:relative;z-index:1;color:var(--c);text-shadow:0 0 14px rgba(0,0,0,.55)}

.best-pyro{--c:var(--pyro);border-color:rgba(255,90,79,.35);box-shadow:0 12px 38px rgba(255,90,79,.12),0 18px 60px rgba(0,0,0,.40)}
.best-hydro{--c:var(--hydro);border-color:rgba(74,179,255,.35);box-shadow:0 12px 38px rgba(74,179,255,.12),0 18px 60px rgba(0,0,0,.40)}
.best-anemo{--c:var(--anemo);border-color:rgba(79,240,200,.35);box-shadow:0 12px 38px rgba(79,240,200,.12),0 18px 60px rgba(0,0,0,.40)}
.best-electro{--c:var(--electro);border-color:rgba(181,123,255,.35);box-shadow:0 12px 38px rgba(181,123,255,.12),0 18px 60px rgba(0,0,0,.40)}
.best-dendro{--c:var(--dendro);border-color:rgba(125,255,90,.35);box-shadow:0 12px 38px rgba(125,255,90,.10),0 18px 60px rgba(0,0,0,.40)}
.best-cryo{--c:var(--cryo);border-color:rgba(127,229,255,.35);box-shadow:0 12px 38px rgba(127,229,255,.12),0 18px 60px rgba(0,0,0,.40)}
.best-geo{--c:var(--geo);border-color:rgba(255,207,99,.35);box-shadow:0 12px 38px rgba(255,207,99,.12),0 18px 60px rgba(0,0,0,.40)}
.best-none{--c:rgba(255,255,255,.88)}

/* Título simple para personajes 4★ */
.best-text{font-weight:1000;letter-spacing:.06em;text-transform:uppercase;font-size:11px;opacity:.92;padding:2px 0}

/* Números */
.num{font-variant-numeric:tabular-nums;font-weight:1000}
.winrate{display:flex;align-items:center;gap:10px}
.wrbar{height:8px;width:120px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.wrfill{height:100%;width:0%;background:rgba(255,255,255,.55);box-shadow:0 0 20px rgba(255,255,255,.18);transition:width .35s ease}

/* ===== Panel de volumen ===== */
.pv-volume{
  position:fixed;
  right:16px;
  bottom:16px;
  z-index:80;
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.28);
  backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.pv-vol-btn{
  width:36px;height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  cursor:pointer;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.pv-vol-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.pv-vol-btn:active{transform:translateY(0)}
.pv-vol-display{font-weight:900;letter-spacing:.08em;font-size:12px;min-width:44px;text-align:center}

.pv-vol-toggle{min-width:36px}
.pv-volume.is-hidden{padding:10px}
.pv-volume.is-hidden #vol-mute,
.pv-volume.is-hidden #vol-down,
.pv-volume.is-hidden #vol-up,
.pv-volume.is-hidden #vol-display{display:none}
.pv-volume.is-hidden .pv-vol-toggle{border-radius:999px}


/* Marcos: animaciones centralizadas en frames.css. */



.no-owner{color:rgba(255,255,255,.55);font-weight:800;letter-spacing:.08em}


/* ===== Barra superior compartida con el ranking PvP ===== */
.rk-topbar{
  position:sticky;top:0;z-index:100;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:12px 18px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg,rgba(10,14,20,.78),rgba(10,14,20,.56));
  backdrop-filter:blur(14px) saturate(140%);
}
.rk-left{display:flex;align-items:center;gap:12px;justify-self:start;}
.rk-logo{width:34px;height:34px;filter:drop-shadow(0 0 10px rgba(0,0,0,.70))}
.rk-left-title{font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#f8fbff;opacity:.95;white-space:nowrap}
.rk-nav-btn{
  margin-left:6px;text-decoration:none;color:var(--fg);
  border:1px solid var(--line);
  background:#000;
  padding:8px 12px;border-radius:12px;
  transition:.22s;
}
.rk-nav-btn:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 0 12px rgba(123,169,255,.35)}
.rk-brand{
  text-decoration:none;
  font-weight:1000;
  letter-spacing:.22em;
  font-size:20px;
  color:rgba(255,255,255,.94);
  text-shadow:0 0 20px rgba(255,255,255,.08),0 0 60px rgba(0,0,0,.65);
}
.rk-brand:hover{filter:brightness(1.05)}
.anim-rank-title{
  background:linear-gradient(90deg,#7ba9ff,#9fe0ff,#7ba9ff);
  background-size:300% 300%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:shine 5s linear infinite;
}
@keyframes shine{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ===== Usuario ===== */
.rk-user{
  justify-self:end;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  cursor:pointer;
  max-width:320px;
  position:relative;
  transition:transform .14s ease,background .14s ease,border-color .14s ease;
}
.rk-user:hover{transform:translateY(-1px);background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.rk-me-info{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1}
.rk-me-info span{font-weight:700;font-size:18px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.rk-me-info small{
  color:#ffd66e;font-size:15px;margin-top:2px;text-shadow:0 0 6px #000;
}
.rk-me-menu{
  position:absolute;top:76px;right:0;
  background:rgba(10,14,20,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:6px 0;
  display:none;
  flex-direction:column;
  min-width:180px;
  z-index:200;
}
.rk-user.open #meMenu{display:flex}
.rk-menu-item{padding:10px 14px;text-align:left;color:var(--fg);background:none;border:none;cursor:pointer;text-decoration:none;display:block}
.rk-menu-item:hover{background:rgba(255,255,255,.08)}
.rk-menu-item.danger{color:var(--bad)}

/* ====== Estructura ====== */
.rk-layout{
  display:grid;
  grid-template-columns: 320px minmax(820px, 1fr) 360px;
  gap:24px;
  max-width:1680px;
  margin:24px auto;
  padding:0 16px;
}
.rk-info-col,.rk-left-col{display:flex;flex-direction:column;gap:14px}

/* Tarjetas sin desenfoque para mantener el fondo nítido. */
.rk-card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 12px;
  box-shadow:var(--shadow);
}

/* Utilidades del marcado. */
.rk-p{margin:.25rem 0}
.rk-muted{opacity:.8}

/* Panel de información */
.rk-howto{border-color:rgba(255,255,255,.14)}
.rk-howto h2{margin:0 0 8px;color:#ffd66e;font-size:18px}
.rk-howto p{margin:6px 2px;color:#d7def2;font-size:14px}

/* Ligas laterales */
.rk-league-info h2{text-align:center;font-size:18px;margin:0 0 8px;color:var(--accent)}
.rk-league-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rk-league-list li{
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(0,0,0,.22);
  padding:8px 10px;border-radius:10px;
  border:1px solid var(--line);
}
.rk-league-list img{width:24px;height:24px;margin-right:8px}
.rk-league-list span{flex:1;font-weight:700}
.rk-league-list small{color:var(--muted);font-size:12px}

/* Premios */
.rk-rewards h2{text-align:center;color:#ffd66e;font-size:17px;margin:0 0 8px}
.rk-rewards ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rk-rewards li{
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
  background:rgba(0,0,0,.22);
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.rk-rewards li:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}
.rk-rewards li > strong{min-width:42px;text-align:left;}
.rk-rewards .title-badge{ font-size:15px; font-weight:800; line-height:1; }
.rk-rewards img{ width:28px; height:28px; margin-left:auto; }

/* ====== Barra de herramientas y tabla ====== */

/* ===== Distribución con Top 8 lateral ===== */
.pv-layout{
  position:relative;
  margin-top:14px;
  display:grid;
  grid-template-columns: 640px minmax(0, 1fr);
  gap:20px;
  align-items:start;
}

/* Top 8 lateral con la tabla alineada a la derecha. */
.pv-side{
  position:sticky;
  top:96px;
  width:100%;
  max-height:none; /* El desplazamiento queda a cargo de la página. */
  overflow:visible;
}

.pv-main{position:relative;z-index:1;margin-left:-6px;}

@media (max-width: 1180px){
  .pv-layout{grid-template-columns:1fr}
  .pv-side{position:static;width:auto;max-height:none;overflow:visible}
}





.side-card{
  padding:16px;
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(10,14,20,.62),rgba(10,14,20,.32));
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}

.side-head{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.side-title{
  margin:0;
  font-weight:1000;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:14px;
}
.side-sub{color:rgba(255,255,255,.70);font-size:12px;letter-spacing:.06em}

.side-controls{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}
.side-field{display:flex;flex-direction:column;gap:6px}
.side-field label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.88}
.side-field select{
  font-family:inherit;
  color:rgba(255,255,255,.92);
  background:rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
.side-field select:focus{border-color:rgba(255,255,255,.26);box-shadow:0 0 0 3px rgba(255,255,255,.07)}

/* Selector de rareza del Top 8. */
#topRarity[data-rarity="5"]{
  color:rgba(255,214,110,.95);
  text-shadow:0 0 10px rgba(255,214,110,.18);
}
#topRarity[data-rarity="4"]{
  color:rgba(181,123,255,.95);
  text-shadow:0 0 10px rgba(181,123,255,.22);
}
#topRarity[data-rarity="all"]{
  color:rgba(255,255,255,.95);
  text-shadow:0 0 10px rgba(255,255,255,.16);
}




/* ===== Top 8 de temporada ===== */
/* Base RGB con brillo controlado. */
.top8-item[data-el="Pyro"]{ --elrgb: 255,96,74; }
.top8-item[data-el="Hydro"]{ --elrgb: 40,150,255; }
.top8-item[data-el="Dendro"]{ --elrgb: 96,220,88; }
.top8-item[data-el="Electro"]{ --elrgb: 168,110,255; }
.top8-item[data-el="Anemo"]{ --elrgb: 70,230,200; }
.top8-item[data-el="Cryo"]{ --elrgb: 105,220,255; }
.top8-item[data-el="Geo"]{ --elrgb: 255,200,96; }

.top8-item[data-el="Pyro"]::before{
  background:radial-gradient(circle at 30% 30%, rgba(255,140,100,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 40%, rgba(255,60,90,.35), rgba(0,0,0,0) 60%),
             linear-gradient(135deg, rgba(255,120,80,.38), rgba(120,20,20,.20));
}
.top8-item[data-el="Hydro"]::before{
  background:radial-gradient(circle at 30% 30%, rgba(120,210,255,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 40%, rgba(60,120,255,.35), rgba(0,0,0,0) 60%),
             linear-gradient(135deg, rgba(80,190,255,.34), rgba(10,40,120,.18));
}
.top8-item[data-el="Electro"]::before{
  background:radial-gradient(circle at 30% 30%, rgba(200,120,255,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 40%, rgba(120,60,255,.35), rgba(0,0,0,0) 60%),
             linear-gradient(135deg, rgba(190,110,255,.34), rgba(70,10,120,.18));
}
.top8-item[data-el="Cryo"]::before{
  background:radial-gradient(circle at 30% 30%, rgba(170,245,255,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 40%, rgba(120,190,255,.35), rgba(0,0,0,0) 60%),
             linear-gradient(135deg, rgba(140,235,255,.34), rgba(20,80,120,.18));
}
.top8-item[data-el="Anemo"]::before{
  background:radial-gradient(circle at 30% 30%, rgba(140,255,210,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 40%, rgba(70,220,170,.35), rgba(0,0,0,0) 60%),
             linear-gradient(135deg, rgba(100,255,205,.30), rgba(10,80,60,.16));
}
.top8-item[data-el="Dendro"]::before{
  background:radial-gradient(circle at 30% 30%, rgba(190,255,140,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 40%, rgba(120,220,70,.35), rgba(0,0,0,0) 60%),
             linear-gradient(135deg, rgba(170,255,120,.30), rgba(40,80,10,.16));
}
.top8-item[data-el="Geo"]::before{
  background:radial-gradient(circle at 30% 30%, rgba(255,220,120,.55), rgba(0,0,0,0) 55%),
             radial-gradient(circle at 70% 40%, rgba(255,180,60,.35), rgba(0,0,0,0) 60%),
             linear-gradient(135deg, rgba(255,210,120,.30), rgba(80,50,10,.16));
}

.top8-item:not([data-el]){ --elrgb: 210,210,210; }

.top8-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;

  /* Cuadros cuadrados con desplazamiento interno sin barra visible. */
  max-height:calc(100vh - 260px);
  overflow:auto;
  padding-right:4px;
  scrollbar-width:none;
}
.top8-list::-webkit-scrollbar{width:0;height:0}

.top8-empty{
  padding:14px 12px;
  border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  color:rgba(255,255,255,.70);
  background:rgba(0,0,0,.18);
  line-height:1.35;
}

/* Tarjeta con imagen completa. */
.top8-item{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(var(--elrgb,255,255,255), .18);

  /* Fondo elemental compartido con el Top 8 del perfil. */
  background:
    radial-gradient(85% 85% at 30% 22%, rgba(var(--elrgb), .40), rgba(0,0,0,0) 62%),
    radial-gradient(95% 95% at 75% 82%, rgba(var(--elrgb), .22), rgba(0,0,0,0) 62%),
    radial-gradient(120% 120% at 50% 50%, rgba(var(--elrgb), .10), rgba(0,0,0,0) 68%),
    linear-gradient(180deg, rgba(0,0,0,40), rgba(0,0,0,18));

  box-shadow:0 14px 38px rgba(0,0,0,40);
  cursor:pointer;
  transform:translateZ(0);
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;

  /* Proporción cuadrada. */
  aspect-ratio: 1 / 1;
}
.top8-item::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  background:
    conic-gradient(from 0deg,
      rgba(var(--elrgb,210,210,210), .46),
      transparent 25% 75%,
      rgba(var(--elrgb,210,210,210), .46));
  filter: blur(12px);
  opacity: 1;
  animation: pv-ambientSpin 8s linear infinite; /* Reutiliza la animación global. */
  pointer-events:none;
  mix-blend-mode: screen;
  z-index:1;
}
.top8-item::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(var(--elrgb,210,210,210), .22), rgba(0,0,0,0) 60%),
    radial-gradient(70% 70% at 80% 80%, rgba(var(--elrgb,210,210,210), .14), rgba(0,0,0,0) 65%);
  opacity:.95;
  pointer-events:none;
  z-index:1;
}
.top8-item:hover{
  transform:translateY(-2px);
  border-color:rgba(var(--elrgb), .78);
  box-shadow:0 22px 60px rgba(0,0,0,.55);
}

@keyframes top8-float{
  0%,100%{ transform: translate3d(0, 2px, 0) scale(1.06); }
  50%{ transform: translate3d(0, -2px, 0) scale(1.06); }
}

.top8-img{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;

  /* Ajuste vertical para encajar el rostro. */
  object-position:50% 35%;

  filter:saturate(1.08) contrast(1.05);
  animation: top8-float 4.8s ease-in-out infinite;
  will-change: transform, filter;
}

/* Oscurece la base para mejorar la lectura. */
.top8-overlay{
  position:absolute;
  inset:0;
  /* Capa reservada para efectos sin alterar la imagen. */
  background:none;
  z-index:3;
  pointer-events:none;
}

/* Insignia de posición uniforme. */
.top8-rank{
  position:absolute;
  left:10px;
  top:10px;
  z-index:4;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.62);
  font-weight:1000;
  letter-spacing:.10em;
  font-size:11px;
  color:rgba(255,255,255,.95);
  text-shadow:0 2px 10px rgba(0,0,0,.75);
  backdrop-filter: blur(10px) saturate(140%);
}

.top8-meta{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:0;
  align-items:stretch;
  pointer-events:none;
}


/* Datos del Top 8 bajo la posición. */
.top8-lines{
  position:absolute;
  left:10px;
  top:46px; /* Ubicación bajo la insignia de posición. */
  z-index:4;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
  pointer-events:none;
}
.top8-line{
display:inline-flex;
  align-items:center;
  justify-content:flex-start;
gap:10px;
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.62); /* Fondo oscuro para métricas del Top 8. */
  backdrop-filter: blur(10px) saturate(140%);
  font-weight:1000;
  font-size:11px;
  letter-spacing:.06em;
  text-shadow:0 2px 10px rgba(0,0,0,.70);
}

.top8-line .k{opacity:.90}
.top8-line .v{color:rgba(255,255,255,.96);font-variant-numeric:tabular-nums;margin-left:8px;}
.top8-line.is-picks .k,
.top8-line.is-picks .v{ color: var(--hydro); }
.top8-line.is-bans .k,
.top8-line.is-bans .v{ color: var(--pyro); }
.top8-line.is-wr .k,
.top8-line.is-wr .v{ color: rgba(255,255,255,.96); }

/* Orden visual de métricas y nombre. */
.top8-stats{ order:1; display:flex; gap:8px; flex-wrap:wrap; }
.top8-name{
  order:2;
  width:100%;
  min-height:26px;
  font-weight:800;
  letter-spacing:.5px;
  font-size:14px;
  line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:0;
  background:rgba(0,0,0,.72);
  border-top:2px solid rgba(255,255,255,.08);
  text-transform:uppercase;
}
.top8-name.el-Pyro{ color:var(--pyro); }
.top8-name.el-Hydro{ color:var(--hydro); }
.top8-name.el-Dendro{ color:var(--dendro); }
.top8-name.el-Electro{ color:var(--electro); }
.top8-name.el-Anemo{ color:var(--anemo); }
.top8-name.el-Cryo{ color:var(--cryo); }
.top8-name.el-Geo{ color:var(--geo); }

.top8-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.28);
  backdrop-filter: blur(10px) saturate(140%);
  font-weight:1000;
  font-size:11px;
  letter-spacing:.02em;
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}
.top8-pill b{color:rgba(255,255,255,.92)}

/* Formato compacto para móvil. */
@media (max-width: 520px){
  .top8-list{grid-template-columns:1fr;}
}


/* Marcos: animaciones centralizadas en frames.css. */


/* Marcos: animaciones centralizadas en frames.css. */


/* Entrada visual, botones y panel de sonido. */
@keyframes pvCharsSoftInV4{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.rk-topbar,.pv-side,.pv-main,.hero,.panel,.pv-volume{animation:pvCharsSoftInV4 .58s cubic-bezier(.16,1,.3,1) both;}
.rk-topbar{animation-delay:.02s}.pv-side{animation-delay:.08s}.hero{animation-delay:.12s}.panel{animation-delay:.18s}.pv-volume{animation-delay:.22s}

.pv-volume{gap:10px!important;padding:9px 10px!important;transition:width .26s cubic-bezier(.16,.84,.32,1),padding .22s ease,box-shadow .22s ease,border-color .22s ease,transform .18s ease!important;}
.pv-vol-controls{display:flex;align-items:center;gap:10px;overflow:hidden;max-width:190px;opacity:1;transition:max-width .26s cubic-bezier(.16,.84,.32,1),opacity .18s ease,transform .22s ease;}
.pv-vol-range{appearance:none;-webkit-appearance:none;width:126px;height:8px;border-radius:999px;outline:none;background:linear-gradient(90deg,rgba(203,181,255,.88),rgba(77,183,255,.76));box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),0 0 12px rgba(124,58,237,.14);cursor:pointer;}
.pv-vol-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#f7f4ff;border:2px solid #8b5cf6;box-shadow:0 0 14px rgba(203,181,255,.46);}
.pv-vol-range::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#f7f4ff;border:2px solid #8b5cf6;box-shadow:0 0 14px rgba(203,181,255,.46);}
.pv-volume.is-collapsed{padding:9px!important;}
.pv-volume.is-collapsed .pv-vol-controls{max-width:0;opacity:0;transform:translateX(8px);pointer-events:none;}
.pv-volume.is-collapsed .pv-vol-toggle{border-radius:999px;}
.pv-volume.is-hidden #vol-mute,.pv-volume.is-hidden #vol-down,.pv-volume.is-hidden #vol-up,.pv-volume.is-hidden #vol-display{display:initial;}
.pv-volume.is-hidden{padding:9px 10px!important;}

.btn,.rk-nav-btn,.rk-user,select,input,.top8-item,.rank-table tbody tr{transition:transform .20s cubic-bezier(.16,1,.3,1),box-shadow .22s ease,border-color .22s ease,filter .20s ease,background .22s ease!important;}
.btn,.rk-nav-btn{background:linear-gradient(180deg,rgba(35,39,55,.88),rgba(12,15,24,.78))!important;border-color:rgba(255,255,255,.15)!important;box-shadow:0 10px 24px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.035);}
.btn:hover,.rk-nav-btn:hover{transform:translateY(-3px);border-color:rgba(203,181,255,.42)!important;box-shadow:0 16px 32px rgba(0,0,0,.34),0 0 22px rgba(124,58,237,.14)!important;filter:brightness(1.06);}
.btn:active,.rk-nav-btn:active{transform:translateY(0) scale(.98);}
select,input[type="search"]{box-shadow:0 10px 24px rgba(0,0,0,.20);}
select:hover,input[type="search"]:hover{border-color:rgba(203,181,255,.32)!important;box-shadow:0 14px 30px rgba(0,0,0,.26),0 0 18px rgba(124,58,237,.10);}
.top8-item:hover{transform:translateY(-5px) scale(1.012)!important;box-shadow:0 18px 36px rgba(0,0,0,.38),0 0 24px rgba(var(--elrgb,203,181,255),.16)!important;}
.rank-table tbody tr:hover{transform:translateY(-2px);box-shadow:inset 3px 0 0 rgba(203,181,255,.46),0 10px 26px rgba(0,0,0,.16);}
.hero-left,.hero-right,.panel,.side-card{box-shadow:0 22px 60px rgba(0,0,0,.38),0 0 32px rgba(124,58,237,.07);}
@media (prefers-reduced-motion:reduce){.rk-topbar,.pv-side,.pv-main,.hero,.panel,.pv-volume{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}.btn,.rk-nav-btn,.rk-user,select,input,.top8-item,.rank-table tbody tr,.pv-vol-controls{transition:none!important}}

/* Separación estable del perfil superior. */
.rk-topbar .rk-user#userPanel,
.rk-topbar .rk-user{
  gap:22px !important;
  padding:10px 16px 10px 14px !important;
  overflow:visible !important;
}
.rk-topbar .rk-user .pv-avatar-wrap.big{
  flex:0 0 54px !important;
  margin-right:12px !important;
  z-index:2 !important;
}
.rk-topbar .rk-user .rk-me-info{
  position:relative !important;
  z-index:4 !important;
  margin-left:4px !important;
  min-width:0 !important;
}
.rk-topbar .rk-user .pv-avatar-frame{
  z-index:1 !important;
  pointer-events:none !important;
}



/* Modo de rendimiento del ranking de personajes.
   Durante scroll o interacción se aligeran marcos y títulos pesados.
   Botones, filtros y Top 8 conservan sus animaciones principales. */
body.pv-chars-motion-paused .pv-avatar-frame,
body.pv-chars-motion-paused .avatar-frame,
body.pv-chars-motion-paused .frame-img,
body.pv-chars-motion-paused .frame-css,
body.pv-chars-motion-paused .pv-player-avatar img.frame,
body.pv-chars-motion-paused .avatar-wrap > img.frame,
body.pv-chars-motion-paused .avatar-wrap.has-frame > img.frame,
body.pv-chars-motion-paused .avatar-wrap.has-frame > .frame,
body.pv-chars-motion-paused .avatar-wrap[data-frame-file] > .frame,
body.pv-chars-motion-paused .avatar-wrap[data-frame-file] > .frame-img,
body.pv-chars-motion-paused .pv-avatar-wrap[data-frame-file] > .pv-avatar-frame,
body.pv-chars-motion-paused .pv-reward-frame > .pv-avatar-frame,
body.pv-chars-motion-paused img[src*="/frames/"],
body.pv-chars-motion-paused img[src*="img/frames/"],
body.pv-chars-motion-paused img[src*="img%2Fframes%2F"],
body.pv-chars-motion-paused .avatar-wrap.frame-owner > .frame-css.owner,
body.pv-chars-motion-paused .pv-avatar-wrap.frame-owner > .frame-css.owner,
body.pv-chars-motion-paused .avatar-wrap[data-frame="owner"]::after,
body.pv-chars-motion-paused .pv-avatar-wrap[data-frame="owner"]::after{
  animation:none !important;
  transition:none !important;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  will-change:auto !important;
}

body.pv-chars-motion-paused .title-badge,
body.pv-chars-motion-paused .title-badge::before,
body.pv-chars-motion-paused .title-badge::after,
body.pv-chars-motion-paused .pv-best-badge,
body.pv-chars-motion-paused .pv-best-badge::before,
body.pv-chars-motion-paused .pv-best-badge::after,
body.pv-chars-motion-paused .anim-rank-title{
  animation:none !important;
  transition:none !important;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  will-change:auto !important;
}

/* El balanceo del Top 8 permanece activo. */
body.pv-chars-motion-paused .top8-img{
  animation:top8-float 4.8s ease-in-out infinite !important;
  animation-play-state:running !important;
}

/* En movimiento se aligeran solo las filas de la tabla. */
body.pv-chars-motion-paused .rank-table tbody tr{
  transition:background .12s ease, transform .12s ease !important;
  box-shadow:none !important;
}
body.pv-chars-motion-paused .rank-table tbody tr:hover .charimg{
  filter:none !important;
  box-shadow:none !important;
}

/* Ayuda al navegador a no repintar todo el ranking fuera de pantalla. */
.rank-table tbody tr{
  content-visibility:auto;
  contain-intrinsic-size:72px;
}
.top8-item,
.panel,
.side-card{
  contain:layout paint style;
}

.top8-list{
  padding-top:24px !important;
  padding-bottom:12px !important;
  padding-right:10px !important;
  scroll-padding-top:28px;
  max-height:calc(100vh - 300px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin !important;
  scrollbar-color:rgba(203,181,255,.72) rgba(0,0,0,.24) !important;
}
.top8-list::-webkit-scrollbar{width:10px!important;height:10px!important}
.top8-list::-webkit-scrollbar-track{background:rgba(0,0,0,.24)!important;border-radius:999px!important}
.top8-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(203,181,255,.86),rgba(77,183,255,.72))!important;
  border-radius:999px!important;
  border:2px solid rgba(0,0,0,.30)!important;
}
.top8-list::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(203,181,255,.86))!important}
.side-card{overflow:hidden !important;}
.top8-item:hover{transform:translateY(-5px) scale(1.012) !important;}


/* Botones y filtros conservan su respuesta visual durante el modo ligero. */
.controls .btn,
.pager .btn,
.side-controls select,
.controls select,
.controls input,
.rk-nav-btn{
  transition:transform .20s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .22s ease, filter .20s ease, background .22s ease !important;
}
.controls .btn:hover,
.pager .btn:hover,
.rk-nav-btn:hover{
  transform:translateY(-3px) scale(1.015) !important;
  border-color:rgba(203,181,255,.46) !important;
  box-shadow:0 18px 34px rgba(0,0,0,.36), 0 0 24px rgba(124,58,237,.16) !important;
  filter:brightness(1.07) saturate(1.06) !important;
}
.controls .btn:active,
.pager .btn:active,
.rk-nav-btn:active{transform:translateY(0) scale(.985) !important;}
.side-controls select:hover,
.controls select:hover,
.controls input:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(203,181,255,.38) !important;
  box-shadow:0 12px 24px rgba(0,0,0,.24), 0 0 18px rgba(124,58,237,.10) !important;
}
.side-controls select:focus,
.controls select:focus,
.controls input:focus{
  transform:translateY(-1px) !important;
  border-color:rgba(203,181,255,.52) !important;
  box-shadow:0 0 0 3px rgba(203,181,255,.12), 0 14px 26px rgba(0,0,0,.26) !important;
}
body.pv-chars-motion-paused .controls .btn,
body.pv-chars-motion-paused .pager .btn,
body.pv-chars-motion-paused .rk-nav-btn,
body.pv-chars-motion-paused .side-controls select,
body.pv-chars-motion-paused .controls select,
body.pv-chars-motion-paused .controls input,
body.pv-chars-motion-paused .top8-item,
body.pv-chars-motion-paused .top8-item::before,
body.pv-chars-motion-paused .top8-item::after{
  animation-play-state:running !important;
}

/* Adaptación móvil del ranking de personajes.
   Los cambios se limitan a anchos de teléfono. */
@media (max-width: 920px){
  body{
    background:#05070d;
    -webkit-text-size-adjust:100%;
  }

  .rk-topbar{
    top:0;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"left user";
    gap:8px;
    padding:8px 10px;
    border-bottom-color:rgba(203,181,255,.18);
    background:linear-gradient(180deg,rgba(8,10,18,.94),rgba(8,10,18,.76));
    backdrop-filter:blur(16px) saturate(145%);
  }
  .rk-left{
    grid-area:left;
    min-width:0;
    gap:8px;
    justify-self:stretch;
    overflow:hidden;
  }
  .rk-logo{width:28px;height:28px;flex:0 0 auto;}
  .rk-left-title{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
    letter-spacing:.06em;
    line-height:1.05;
  }
  .rk-nav-btn{
    margin-left:0;
    flex:0 0 auto;
    padding:7px 9px;
    border-radius:999px;
    font-size:10px;
    letter-spacing:.04em;
    line-height:1;
  }
  .rk-brand{display:none;}
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    grid-area:user;
    justify-self:end;
    max-width:148px;
    gap:7px !important;
    padding:5px 8px !important;
    border-radius:999px;
    overflow:hidden !important;
  }
  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    margin-right:0 !important;
  }
  .rk-topbar .rk-user .rk-me-info,
  .rk-me-info{
    min-width:0 !important;
    margin-left:0 !important;
  }
  .rk-me-info span{
    max-width:86px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    line-height:1.05;
  }
  .rk-me-info small{
    max-width:86px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    line-height:1.05;
  }

  .wrap{
    max-width:none;
    width:100%;
    padding:8px 8px 76px;
  }
  .pv-layout{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
  }
  .pv-side{
    position:static !important;
    top:auto !important;
    width:100%;
    max-height:none !important;
    overflow:visible !important;
    order:1;
  }
  .pv-main{
    order:2;
    margin-left:0 !important;
    width:100%;
  }

  .side-card{
    padding:10px;
    border-radius:20px;
    overflow:hidden !important;
    background:
      radial-gradient(110% 120% at 50% -20%,rgba(203,181,255,.16),transparent 56%),
      linear-gradient(180deg,rgba(12,15,25,.82),rgba(5,7,12,.62));
    border-color:rgba(203,181,255,.20);
    box-shadow:0 18px 42px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.035);
  }
  .side-head{
    align-items:center;
    text-align:center;
    gap:3px;
    margin-bottom:8px;
  }
  .side-title{
    font-size:12px;
    line-height:1.14;
    letter-spacing:.075em;
  }
  .side-sub{
    font-size:10px;
    line-height:1.15;
    color:rgba(255,255,255,.68);
  }
  .side-controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:9px;
  }
  .side-field{gap:4px;min-width:0;}
  .side-field label{
    font-size:9px;
    letter-spacing:.10em;
  }
  .side-field select{
    width:100%;
    min-width:0;
    height:36px;
    padding:7px 10px;
    border-radius:12px;
    font-size:11px;
    background:rgba(0,0,0,.38);
  }

  .top8-list{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:2px !important;
    scrollbar-width:none !important;
  }
  .top8-list::-webkit-scrollbar{display:none !important;}
  .top8-item{
    aspect-ratio:.78/1 !important;
    min-height:0;
    border-radius:15px;
    border-color:rgba(var(--elrgb,203,181,255),.26);
    background:
      radial-gradient(90% 70% at 50% 28%,rgba(var(--elrgb,203,181,255),.22),transparent 62%),
      linear-gradient(180deg,rgba(255,255,255,.035),rgba(0,0,0,.34));
    box-shadow:0 10px 24px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.035);
  }
  .top8-item::before{
    inset:-6px;
    filter:blur(8px);
    opacity:.55;
  }
  .top8-item::after{
    opacity:.72;
  }
  .top8-img{
    inset:22px 6px 19px 6px !important;
    width:auto !important;
    height:auto !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    filter:saturate(1.08) contrast(1.06) drop-shadow(0 7px 10px rgba(0,0,0,.46));
  }
  .top8-rank{
    left:5px;
    top:5px;
    height:19px;
    padding:0 6px;
    font-size:8px;
    letter-spacing:.06em;
    border-radius:999px;
  }
  .top8-lines{
    left:5px;
    top:28px;
    gap:2px;
    max-width:calc(100% - 10px);
  }
  .top8-line{
    max-width:100%;
    gap:2px;
    padding:2px 4px;
    border-radius:999px;
    font-size:7px;
    line-height:1;
    letter-spacing:.02em;
    background:rgba(0,0,0,.52);
  }
  .top8-line .k{display:none;}
  .top8-line .v{margin-left:0;}
  .top8-meta{z-index:5;}
  .top8-name{
    min-height:18px;
    padding:4px 3px 5px;
    font-size:8px;
    line-height:1.05;
    letter-spacing:.02em;
    background:rgba(0,0,0,.70);
    border-top:1px solid rgba(255,255,255,.10);
  }

  .hero{
    grid-template-columns:1fr;
    gap:8px;
    margin-top:0;
  }
  .hero-left,
  .hero-right,
  .panel{
    padding:10px;
    border-radius:18px;
    background:linear-gradient(180deg,rgba(10,14,20,.70),rgba(10,14,20,.40));
    border-color:rgba(255,255,255,.13);
    box-shadow:0 16px 40px rgba(0,0,0,.34);
  }
  .hero h1{
    margin-bottom:6px;
    font-size:20px;
    line-height:1.05;
    text-align:center;
  }
  .hero p,
  .hint-text{
    font-size:11px;
    line-height:1.34;
  }
  .hint-title{
    margin-bottom:6px;
    text-align:center;
    font-size:10px;
    letter-spacing:.10em;
  }

  .panel{margin-top:0;}
  .controls{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:end;
    padding:0 0 8px;
  }
  .field,
  .field--checks{
    min-width:0;
    width:100%;
  }
  .field--wide{
    grid-column:1 / -1;
    min-width:0;
    flex:none;
  }
  .field label{
    font-size:9px;
    letter-spacing:.10em;
  }
  .field input,
  .field select,
  .check{
    width:100%;
    min-width:0;
    height:40px;
    padding:8px 10px;
    border-radius:13px;
    font-size:12px;
  }
  .select-with-icon select{padding-left:34px;}
  .sel-ico{left:10px;width:16px;height:16px;}
  .check{
    justify-content:center;
    gap:8px;
  }

  .pager{
    gap:9px;
    margin:6px 0 8px;
  }
  .pager-info{
    font-size:10px;
    letter-spacing:.08em;
  }
  .btn.icon{
    width:38px;
    height:38px;
    font-size:18px;
  }

  .table-wrap{
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    border-radius:15px;
  }
  .rank-table{
    min-width:720px;
  }
  .rank-table thead th{
    padding:10px 8px;
    font-size:10px;
  }
  .rank-table tbody td{
    padding:9px 8px;
  }
  .charcell{gap:9px;}
  .charimg{
    width:40px;
    height:40px;
    border-radius:12px;
  }
  .charname{font-size:12px;}
  .topcell{gap:13px;}
  .avatar-wrap{width:40px;height:40px;}
  .topname a{font-size:12px;}
  .topsub{font-size:10px;gap:5px;}
  .best-badge{font-size:9px;padding:4px 7px;}
  .wrbar{width:76px;}

  .pv-volume{
    right:10px;
    bottom:10px;
    padding:7px 8px !important;
  }
}

@media (max-width: 520px){
  .rk-topbar{
    grid-template-columns:1fr;
    grid-template-areas:"left" "user";
    gap:6px;
    padding:7px 8px;
  }
  .rk-left{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
  }
  .rk-left-title{font-size:12px;}
  .rk-nav-btn{padding:7px 8px;font-size:10px;}
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    justify-self:stretch;
    max-width:none;
    width:100%;
    justify-content:center;
  }
  .rk-me-info span,
  .rk-me-info small{max-width:210px;}
  .wrap{padding-left:7px;padding-right:7px;}
  .side-title{font-size:11px;}
  .top8-list{gap:6px !important;}
  .top8-line{font-size:6.8px;padding:2px 3px;}
  .top8-name{font-size:7.6px;}
  .hero-right{display:none;}
}

@media (max-width: 920px) and (orientation: landscape){
  .rk-topbar{
    grid-template-columns:minmax(0,1fr) auto minmax(0,170px);
    grid-template-areas:"left brand user";
    padding:5px 10px;
    gap:8px;
  }
  .rk-brand{
    display:block;
    grid-area:brand;
    font-size:13px;
    letter-spacing:.15em;
  }
  .rk-logo{width:25px;height:25px;}
  .rk-left-title{font-size:11px;}
  .rk-nav-btn{padding:6px 8px;font-size:9px;}
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    max-width:170px;
    padding:4px 7px !important;
  }
  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:30px !important;
    height:30px !important;
    flex-basis:30px !important;
  }
  .rk-me-info span{font-size:11px;max-width:110px;}
  .rk-me-info small{font-size:9px;max-width:110px;}

  .wrap{padding:6px 8px 58px;}
  .pv-layout{gap:8px;margin-top:6px;}
  .side-card{
    display:grid;
    grid-template-columns:150px 160px minmax(0,1fr);
    gap:8px;
    align-items:center;
    padding:7px 8px;
    border-radius:16px;
  }
  .side-head{
    align-items:flex-start;
    text-align:left;
    margin:0;
  }
  .side-title{
    font-size:9px;
    line-height:1.15;
    letter-spacing:.06em;
  }
  .side-sub{font-size:8px;line-height:1.1;}
  .side-controls{
    grid-template-columns:1fr;
    gap:5px;
    margin:0;
  }
  .side-field label{display:none;}
  .side-field select{
    height:28px;
    padding:5px 8px;
    font-size:10px;
    border-radius:10px;
  }
  .top8-list{
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    gap:5px !important;
    padding:0 !important;
  }
  .top8-item{border-radius:12px;}
  .top8-img{
    inset:17px 3px 16px 3px !important;
  }
  .top8-rank{
    left:4px;
    top:4px;
    height:15px;
    padding:0 5px;
    font-size:7px;
  }
  .top8-lines{display:none;}
  .top8-name{
    min-height:14px;
    padding:3px 2px;
    font-size:6.8px;
  }

  .hero{
    display:block;
    margin:0;
  }
  .hero-right{display:none;}
  .hero-left{
    padding:7px 10px;
    border-radius:14px;
  }
  .hero h1{display:none;}
  .hero p{
    font-size:10px;
    line-height:1.22;
    text-align:center;
  }
  .hero p br{display:none;}

  .panel{
    padding:8px;
    border-radius:14px;
  }
  .controls{
    grid-template-columns:1.45fr 1fr 1fr .78fr 1fr;
    gap:6px;
    padding-bottom:6px;
  }
  .field--wide{grid-column:auto;}
  .field label{display:none;}
  .field input,
  .field select,
  .check{
    height:31px;
    padding:5px 8px;
    font-size:10px;
    border-radius:10px;
  }
  .select-with-icon select{padding-left:28px;}
  .sel-ico{left:8px;width:14px;height:14px;}
  .check span{white-space:nowrap;}
  .pager{margin:4px 0 5px;}
  .pager-info{font-size:9px;}
  .btn.icon{width:32px;height:32px;font-size:16px;}
  .rank-table{min-width:720px;}
}

/* Ajustes móviles del filtro 4★ y del encabezado. */
.rarity-star,
.rarity-star--4{
  color:#b57bff;
  text-shadow:0 0 10px rgba(181,123,255,.55), 0 1px 4px rgba(0,0,0,.65);
}
.check input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  min-width:16px !important;
  flex:0 0 16px !important;
  transform:none !important;
  accent-color:#b57bff;
  margin:0;
}
.check span{line-height:1;}

@media (max-width: 920px){
  /* Encabezado con espacio suficiente para el marco del perfil. */
  .rk-topbar{
    overflow:visible !important;
  }
  .rk-brand{
    display:flex !important;
    align-items:center;
    justify-content:center;
    grid-area:brand;
    justify-self:center;
    min-width:0;
    text-align:center;
    line-height:1;
  }
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    overflow:visible !important;
    min-height:52px;
    gap:12px !important;
    padding:7px 12px 7px 9px !important;
    border-radius:18px;
  }
  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    margin-right:3px !important;
  }
  .rk-topbar .rk-user .pv-avatar-frame,
  .rk-user .pv-avatar-frame{
    width:184% !important;
    height:184% !important;
  }
  .rk-topbar .rk-user .rk-me-info,
  .rk-me-info{
    padding-left:2px !important;
    margin-left:0 !important;
  }

  /* Top 8 móvil con chibis contenidos en su casilla. */
  .top8-item{
    isolation:isolate;
  }
  .top8-img{
    left:50% !important;
    top:51% !important;
    right:auto !important;
    bottom:auto !important;
    width:76% !important;
    height:50% !important;
    max-width:76% !important;
    max-height:50% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:translate(-50%,-45%) !important;
    animation:none !important;
    filter:saturate(1.1) contrast(1.05) drop-shadow(0 8px 12px rgba(0,0,0,.54));
  }
  .top8-lines{
    display:flex !important;
    left:5px !important;
    top:27px !important;
    right:5px !important;
    max-width:none !important;
    gap:2px !important;
    align-items:flex-start;
  }
  .top8-line{
    display:inline-flex !important;
    align-items:center !important;
    max-width:100%;
    gap:2px !important;
    padding:2px 4px !important;
    font-size:6.6px !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
    white-space:nowrap;
    background:rgba(0,0,0,.66) !important;
    border-color:rgba(255,255,255,.16) !important;
  }
  .top8-line .k{
    display:inline !important;
    opacity:.96 !important;
  }
  .top8-line .v{
    margin-left:1px !important;
  }
  .top8-name{
    z-index:6;
  }

  .field--checks .check{
    min-height:36px;
  }
}

@media (max-width: 520px){
  /* En vertical, el título principal mantiene acceso al inicio. */
  .rk-topbar{
    grid-template-columns:1fr !important;
    grid-template-areas:"brand" "left" "user" !important;
    gap:7px !important;
    padding:8px 10px 10px !important;
  }
  .rk-brand{
    font-size:17px !important;
    letter-spacing:.18em !important;
    padding-top:2px;
  }
  .rk-left{
    grid-template-columns:auto minmax(0,1fr) auto !important;
    gap:8px !important;
  }
  .rk-left-title{font-size:12px !important;}
  .rk-nav-btn{font-size:10px !important; padding:7px 9px !important;}
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    justify-self:stretch !important;
    width:100% !important;
    max-width:none !important;
    justify-content:flex-start !important;
    min-height:58px !important;
    padding:8px 14px 8px 12px !important;
    gap:14px !important;
  }
  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:45px !important;
    height:45px !important;
    flex-basis:45px !important;
    margin-right:5px !important;
  }
  .rk-me-info span,
  .rk-me-info small{
    max-width:260px !important;
  }
  .rk-me-info span{font-size:13px !important;}
  .rk-me-info small{font-size:11px !important;}

  .top8-item{
    aspect-ratio:.78/1.06 !important;
  }
  .top8-img{
    top:53% !important;
    width:72% !important;
    height:47% !important;
    max-width:72% !important;
    max-height:47% !important;
  }
  .top8-lines{
    top:26px !important;
    left:4px !important;
    right:4px !important;
  }
  .top8-line{
    font-size:6.1px !important;
    padding:2px 3px !important;
    gap:1px !important;
  }
  .top8-name{
    min-height:18px !important;
    padding:4px 2px 5px !important;
    font-size:7.2px !important;
  }
  .check input[type="checkbox"]{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    flex-basis:14px !important;
  }
}

@media (max-width: 920px) and (orientation: landscape){
  /* En horizontal, título centrado y perfil con espacio suficiente. */
  .rk-topbar{
    position:sticky;
    grid-template-columns:minmax(0,1fr) minmax(0,190px) !important;
    grid-template-areas:"left user" !important;
    min-height:66px;
    padding:7px 10px !important;
    gap:10px !important;
    overflow:visible !important;
  }
  .rk-brand{
    position:absolute;
    left:50%;
    top:8px;
    transform:translateX(-50%);
    display:flex !important;
    font-size:14px !important;
    letter-spacing:.17em !important;
    z-index:2;
    pointer-events:auto;
  }
  .rk-left{
    padding-top:18px;
    min-width:0;
  }
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    margin-top:18px;
    max-width:190px !important;
    min-height:42px !important;
    padding:6px 10px 6px 8px !important;
    gap:12px !important;
    overflow:visible !important;
  }
  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
    margin-right:4px !important;
  }
  .rk-me-info span{font-size:12px !important;max-width:124px !important;}
  .rk-me-info small{font-size:10px !important;max-width:124px !important;}

  /* Top 8 horizontal en matriz 4x2. */
  .side-card{
    grid-template-columns:132px 138px minmax(0,1fr) !important;
    gap:9px !important;
    padding:8px 10px !important;
    align-items:stretch !important;
  }
  .side-head{align-self:center;}
  .side-title{font-size:9.5px !important;line-height:1.18 !important;}
  .side-sub{font-size:8.5px !important;}
  .side-controls{align-self:center;}
  .top8-list{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr));
    gap:6px !important;
    padding:0 !important;
    align-self:stretch;
  }
  .top8-item{
    aspect-ratio:1.08/1 !important;
    border-radius:13px !important;
  }
  .top8-img{
    top:43% !important;
    width:56% !important;
    height:46% !important;
    max-width:56% !important;
    max-height:46% !important;
    transform:translate(-50%,-42%) !important;
  }
  .top8-rank{
    left:5px !important;
    top:5px !important;
    height:17px !important;
    padding:0 6px !important;
    font-size:7.5px !important;
  }
  .top8-lines{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    left:4px !important;
    right:4px !important;
    top:auto !important;
    bottom:17px !important;
    gap:2px !important;
  }
  .top8-line{
    font-size:6.2px !important;
    padding:2px 3px !important;
    gap:1px !important;
    letter-spacing:0 !important;
  }
  .top8-line .k{display:inline !important;}
  .top8-name{
    min-height:16px !important;
    padding:3px 3px 4px !important;
    font-size:7px !important;
    line-height:1 !important;
  }

  /* Texto explicativo integrado en horizontal. */
  .hero{display:block !important;margin:0 !important;}
  .hero-left{
    display:grid !important;
    grid-template-columns:132px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:8px 12px !important;
    border-radius:15px !important;
  }
  .hero-right{display:none !important;}
  .hero h1{
    display:block !important;
    margin:0 !important;
    font-size:14px !important;
    line-height:1.05 !important;
    text-align:left !important;
  }
  .hero p{
    margin:0 !important;
    font-size:9.8px !important;
    line-height:1.24 !important;
    text-align:left !important;
  }
  .hero p br{display:block !important;}

  /* Separación leve entre nombre, título y marco. */
  .topcell{
    gap:20px !important;
    padding-left:10px !important;
  }
  .topname{
    margin-left:3px !important;
  }

  .check input[type="checkbox"]{
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
    flex-basis:13px !important;
  }
}


/* Ajustes móviles del filtro 4★ y del panel de sonido. */

/* Estrella del filtro 4★ con color propio. */
.check .rarity-star,
.check .rarity-star--4,
.rarity-star,
.rarity-star--4{
  color:#b57bff !important;
  -webkit-text-fill-color:#b57bff !important;
  text-shadow:0 0 10px rgba(181,123,255,.58), 0 1px 4px rgba(0,0,0,.68) !important;
}

/* Panel colapsado sin espacio invisible lateral. */
#pvVolPanel.pv-volume.is-collapsed{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  width:54px !important;
  min-width:54px !important;
  max-width:54px !important;
  height:54px !important;
  padding:8px !important;
  border-radius:999px !important;
}
#pvVolPanel.pv-volume.is-collapsed .pv-vol-controls{
  display:none !important;
  width:0 !important;
  min-width:0 !important;
  max-width:0 !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
  gap:0 !important;
  opacity:0 !important;
  transform:none !important;
  pointer-events:none !important;
}
#vol-toggle.pv-vol-btn.pv-vol-toggle{
  flex:0 0 36px !important;
  width:36px !important;
  min-width:36px !important;
  max-width:36px !important;
  height:36px !important;
  margin:0 !important;
  padding:0 !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-indent:0 !important;
  text-align:center !important;
  line-height:1 !important;
  font-size:18px !important;
}
#vol-toggle.pv-vol-btn.pv-vol-toggle::before,
#vol-toggle.pv-vol-btn.pv-vol-toggle::after{
  content:none !important;
  display:none !important;
}

@media (max-width:920px){
  /* Selectores personalizados con ancho flexible. */
  .controls .field,
  .controls .field--checks,
  .controls .field--wide{
    min-width:0 !important;
    width:100% !important;
  }
  .controls .pv-sel{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    display:flex !important;
  }
  .controls .pv-sel button{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  .controls .pv-sel .pv-sel-txt{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Chibis del Top 8 móvil con presencia completa. */
  .top8-item{
    overflow:hidden !important;
  }
  .top8-img{
    left:50% !important;
    right:auto !important;
    bottom:auto !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    animation:none !important;
    pointer-events:none !important;
  }
}

@media (max-width:520px){
  /* Filtros verticales compactos. */
  .panel .controls{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    align-items:end !important;
    padding:0 0 7px !important;
  }
  .panel .field--wide{
    grid-column:1 / -1 !important;
  }
  .panel .field label{
    display:block !important;
    min-height:10px !important;
    margin:0 0 3px !important;
    font-size:7.5px !important;
    line-height:1 !important;
    letter-spacing:.08em !important;
    opacity:.76 !important;
  }
  .panel .field input,
  .panel .field select,
  .panel .check,
  .panel .pv-sel button{
    height:33px !important;
    min-height:33px !important;
    padding:0 8px !important;
    border-radius:11px !important;
    font-size:9.5px !important;
    letter-spacing:.02em !important;
  }
  .panel .pv-sel button{
    gap:5px !important;
  }
  .panel .pv-sel .pv-sel-ic{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
  }
  .panel .pv-sel .pv-sel-caret{
    flex:0 0 auto !important;
    font-size:9px !important;
  }
  .panel .check{
    justify-content:center !important;
    gap:5px !important;
    white-space:nowrap !important;
  }
  .panel .check span{
    font-size:8.5px !important;
    letter-spacing:.07em !important;
    line-height:1 !important;
  }
  .panel .check input[type="checkbox"]{
    width:12px !important;
    height:12px !important;
    min-width:12px !important;
    flex:0 0 12px !important;
  }

  /* Top 8 vertical con chibi grande y datos legibles. */
  .top8-item{
    aspect-ratio:.82/1.08 !important;
  }
  .top8-img{
    top:42% !important;
    width:118% !important;
    height:70% !important;
    max-width:118% !important;
    max-height:70% !important;
    transform:translate(-50%,-46%) scale(1.10) !important;
    filter:saturate(1.1) contrast(1.06) drop-shadow(0 9px 12px rgba(0,0,0,.56)) !important;
  }
  .top8-lines{
    top:auto !important;
    bottom:22px !important;
    left:4px !important;
    right:auto !important;
    max-width:calc(100% - 8px) !important;
    gap:2px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
  .top8-line{
    font-size:5.9px !important;
    line-height:1 !important;
    padding:2px 3px !important;
    gap:1px !important;
    border-radius:999px !important;
    background:rgba(0,0,0,.66) !important;
  }
  .top8-line .k{
    display:inline !important;
  }
  .top8-line .v{
    margin-left:1px !important;
  }
  .top8-name{
    min-height:18px !important;
    padding:4px 2px 5px !important;
    font-size:7.1px !important;
    line-height:1 !important;
  }

  /* Tabla vertical con separación entre nombre, título y marco. */
  .rank-table .topcell{
    gap:19px !important;
    padding-left:14px !important;
  }
  .rank-table .topname{
    margin-left:4px !important;
  }
}

@media (max-width:920px) and (orientation:landscape){
  /* Filtros horizontales en barra compacta. */
  .panel .controls{
    display:grid !important;
    grid-template-columns:minmax(120px,1.15fr) minmax(82px,.78fr) minmax(82px,.78fr) minmax(76px,.58fr) minmax(92px,.74fr) !important;
    gap:5px !important;
    align-items:end !important;
    padding:0 0 6px !important;
  }
  .panel .field,
  .panel .field--wide,
  .panel .field--checks{
    min-width:0 !important;
    width:100% !important;
  }
  .panel .field--wide{
    grid-column:auto !important;
  }
  .panel .field label{
    display:block !important;
    margin:0 0 2px !important;
    min-height:8px !important;
    font-size:6.8px !important;
    line-height:1 !important;
    letter-spacing:.065em !important;
    opacity:.78 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
  .panel .field input,
  .panel .field select,
  .panel .check,
  .panel .pv-sel button{
    height:28px !important;
    min-height:28px !important;
    padding:0 6px !important;
    border-radius:9px !important;
    font-size:8.4px !important;
    letter-spacing:.01em !important;
  }
  .panel .field input{
    padding-left:8px !important;
  }
  .panel .pv-sel button{
    gap:4px !important;
  }
  .panel .pv-sel .pv-sel-ic{
    width:12px !important;
    height:12px !important;
    flex:0 0 12px !important;
  }
  .panel .pv-sel .pv-sel-caret{
    font-size:8px !important;
  }
  .panel .check{
    justify-content:center !important;
    gap:4px !important;
    white-space:nowrap !important;
  }
  .panel .check span{
    font-size:7.6px !important;
    line-height:1 !important;
    letter-spacing:.05em !important;
  }
  .panel .check input[type="checkbox"]{
    width:11px !important;
    height:11px !important;
    min-width:11px !important;
    flex:0 0 11px !important;
  }

  /* Ajuste limitado al chibi del Top 8 horizontal. */
  .top8-img{
    top:42% !important;
    width:104% !important;
    height:76% !important;
    max-width:104% !important;
    max-height:76% !important;
    transform:translate(-50%,-45%) scale(1.13) !important;
    filter:saturate(1.1) contrast(1.06) drop-shadow(0 8px 12px rgba(0,0,0,.54)) !important;
  }
  .top8-lines{
    bottom:17px !important;
  }
}


/* Filtro 4★ sin parpadeo ni duplicado de texto.
   El traductor actualiza solo la etiqueta directa. */
.check{
  align-items:center !important;
}
.check #only4{
  margin:0 !important;
  align-self:center !important;
}
.check .only4-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  transform:none !important;
  margin:0 !important;
  padding:0 !important;
}
.check .only4-label .rarity-star,
.check .only4-label .rarity-star--4{
  display:inline-block !important;
  color:#b57bff !important;
  -webkit-text-fill-color:#b57bff !important;
  line-height:1 !important;
  margin-left:1px !important;
  transform:translateY(-.02em) !important;
  text-shadow:0 0 10px rgba(181,123,255,.58), 0 1px 4px rgba(0,0,0,.68) !important;
}
@media (max-width:920px){
  .panel .check{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
  }
  .panel .check .only4-label{
    display:inline-flex !important;
    align-items:center !important;
    line-height:1 !important;
  }
}

/* Alineación móvil del filtro 4★.
   El selector mantiene el control en flex solo en teléfonos. */
@media (max-width:920px){
  .panel .field--checks > label.check{
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;
    margin:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    line-height:1 !important;
    vertical-align:middle !important;
  }
  .panel .field--checks > label.check > input#only4{
    display:block !important;
    align-self:center !important;
    margin:0 !important;
    position:relative !important;
    top:0 !important;
    transform:none !important;
  }
  .panel .field--checks > label.check > .only4-label{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    align-self:center !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    line-height:1 !important;
    vertical-align:middle !important;
    position:relative !important;
    top:0 !important;
    transform:translateY(0) !important;
  }
  .panel .field--checks > label.check > .only4-label .rarity-star,
  .panel .field--checks > label.check > .only4-label .rarity-star--4{
    display:inline-flex !important;
    align-items:center !important;
    line-height:1 !important;
    margin-left:1px !important;
    position:relative !important;
    top:0 !important;
    transform:translateY(0) !important;
  }
}

/* Pulido de barra superior y Top 8 en móvil horizontal. */
@media (max-width:920px) and (orientation:landscape){
  /* Barra superior compacta sin cortar el marco del perfil. */
  .rk-topbar{
    min-height:52px !important;
    padding:4px 10px !important;
    gap:8px !important;
    align-items:center !important;
  }
  .rk-brand{
    top:4px !important;
    font-size:13px !important;
    letter-spacing:.17em !important;
    line-height:1 !important;
  }
  .rk-left{
    padding-top:0 !important;
    align-self:center !important;
    gap:7px !important;
  }
  .rk-logo{
    width:25px !important;
    height:25px !important;
  }
  .rk-left-title{
    font-size:10.5px !important;
    line-height:1 !important;
    letter-spacing:.055em !important;
  }
  .rk-nav-btn{
    padding:5px 8px !important;
    font-size:8.5px !important;
    line-height:1 !important;
    border-radius:999px !important;
  }
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    margin-top:0 !important;
    align-self:center !important;
    min-height:40px !important;
    max-width:190px !important;
    padding:4px 10px 4px 8px !important;
    gap:12px !important;
  }
  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
    margin-right:4px !important;
  }

  /* Top 8 con título, controles y personajes centrados. */
  .side-card{
    display:grid !important;
    grid-template-columns:140px minmax(0,1fr) !important;
    grid-template-rows:auto 1fr !important;
    grid-template-areas:
      "head list"
      "controls list" !important;
    column-gap:10px !important;
    row-gap:6px !important;
    align-items:center !important;
    padding:8px 10px !important;
  }
  .side-head{
    grid-area:head !important;
    align-self:end !important;
    justify-self:stretch !important;
    text-align:left !important;
    margin:0 !important;
  }
  .side-title{
    font-size:9.5px !important;
    line-height:1.12 !important;
    letter-spacing:.055em !important;
    max-width:128px !important;
  }
  .side-sub{
    margin-top:2px !important;
    font-size:8px !important;
    line-height:1 !important;
  }
  .side-controls{
    grid-area:controls !important;
    align-self:start !important;
    justify-self:stretch !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    margin:0 !important;
  }
  .side-field select{
    height:28px !important;
    padding:5px 8px !important;
    font-size:9.5px !important;
    border-radius:10px !important;
  }
  .top8-list{
    grid-area:list !important;
    align-self:center !important;
    justify-self:center !important;
    width:100% !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
  }
}

/* Animación suave del Top 8 y métricas lineales legibles. */

@media (min-width:921px){
  .top8-lines{
    top:auto !important;
    bottom:36px !important;
    left:10px !important;
    right:10px !important;
    max-width:none !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    gap:7px !important;
    pointer-events:none !important;
  }
  .top8-line{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:auto !important;
    max-width:none !important;
    gap:4px !important;
    padding:6px 9px !important;
    border-radius:999px !important;
    font-size:13px !important;
    line-height:1 !important;
    letter-spacing:.025em !important;
    background:rgba(0,0,0,.68) !important;
    border-color:rgba(255,255,255,.18) !important;
    box-shadow:0 7px 14px rgba(0,0,0,.30) !important;
  }
  .top8-line .k{
    display:inline !important;
    opacity:.96 !important;
  }
  .top8-line .v{
    margin-left:0 !important;
    font-size:1em !important;
  }
  .top8-name{
    min-height:34px !important;
    padding:8px 10px !important;
    font-size:15px !important;
  }
}

@keyframes top8-mobile-float-same-as-pc-v49{
  0%,100%{ translate:0 2px; }
  50%{ translate:0 -2px; }
}

@media (max-width:920px){
  .top8-img,
  body.pv-chars-motion-paused .top8-img{
    animation:top8-mobile-float-same-as-pc-v49 4.8s ease-in-out infinite !important;
    animation-play-state:running !important;
    will-change:translate, filter !important;
  }
}

/* Tabla compacta para móvil vertical. */
@media (max-width:920px) and (orientation:portrait){
  .table-wrap{
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-radius:14px;
  }
  .table-wrap::-webkit-scrollbar{display:none;width:0;height:0;}

  .rank-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    border-collapse:collapse;
  }

  .rank-table thead th{
    padding:7px 3px;
    font-size:7.4px;
    line-height:1;
    letter-spacing:.04em;
    white-space:normal;
    text-align:center;
  }

  .rank-table tbody td{
    padding:7px 3px;
    font-size:8.8px;
    line-height:1.05;
    vertical-align:middle;
  }

  .rank-table th.col-char,
  .rank-table td.col-char{width:24%;}
  .rank-table th.col-top,
  .rank-table td.col-top{width:36%;}
  .rank-table th.col-toppts,
  .rank-table td.col-toppts{width:13%;}
  .rank-table th.col-total,
  .rank-table td.col-total{width:14%;}
  .rank-table th.col-wr,
  .rank-table td.col-wr{width:13%;}

  .rank-table td.col-toppts,
  .rank-table td.col-total,
  .rank-table td.col-wr,
  .rank-table th.col-toppts,
  .rank-table th.col-total,
  .rank-table th.col-wr{
    text-align:center;
  }

  .charcell{
    gap:5px;
    min-width:0;
  }
  .charimg{
    width:28px;
    height:28px;
    flex:0 0 28px;
    border-radius:9px;
  }
  .charnames{
    min-width:0;
  }
  .charname{
    max-width:52px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8.8px;
    line-height:1.05;
    letter-spacing:.01em;
  }

  .topcell{
    gap:8px;
    padding-left:2px;
    min-width:0;
  }
  .avatar-wrap{
    width:29px;
    height:29px;
    flex:0 0 29px;
  }
  .avatar-frame{
    width:184%;
    height:184%;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.44));
  }
  .topname{
    min-width:0;
    gap:2px;
    margin-left:1px;
  }
  .topline,
  .topsub{
    min-width:0;
  }
  .topname a{
    display:block;
    max-width:76px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8.8px;
    line-height:1.05;
  }
  .topsub{
    gap:0;
    flex-wrap:nowrap;
    overflow:hidden;
  }
  .best-badge{
    max-width:76px;
    min-width:0;
    padding:2px 4px;
    border-radius:999px;
    gap:.16rem;
    font-size:5.9px;
    line-height:1;
    letter-spacing:.035em;
    white-space:nowrap;
  }
  .best-text{
    max-width:76px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:6.2px;
    line-height:1;
    letter-spacing:.035em;
    padding:1px 0;
  }
  .best-badge::before,
  .best-badge::after{
    opacity:.55;
  }
  .best-badge .best-text-inner{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .rank-table .num,
  .rank-table td.col-wr{
    display:block;
    width:100%;
    text-align:center;
    font-size:8.8px;
    line-height:1;
    font-weight:1000;
    font-variant-numeric:tabular-nums;
  }
}

@media (max-width:430px) and (orientation:portrait){
  .rank-table thead th{
    padding-inline:2px;
    font-size:7px;
    letter-spacing:.025em;
  }
  .rank-table tbody td{
    padding-inline:2px;
  }
  .charcell{gap:4px;}
  .charimg{
    width:27px;
    height:27px;
    flex-basis:27px;
  }
  .charname{max-width:50px;font-size:8.4px;}
  .topcell{gap:7px;padding-left:1px;}
  .avatar-wrap{
    width:28px;
    height:28px;
    flex-basis:28px;
  }
  .topname a{max-width:72px;font-size:8.4px;}
  .best-badge,
  .best-text{max-width:72px;font-size:5.7px;}
  .rank-table .num,
  .rank-table td.col-wr{font-size:8.5px;}
}

/* Títulos destacados legibles en tabla vertical. */
@media (max-width:920px) and (orientation:portrait){
  .rank-table th.col-char,
  .rank-table td.col-char{width:22%;}
  .rank-table th.col-top,
  .rank-table td.col-top{width:40%;}
  .rank-table th.col-toppts,
  .rank-table td.col-toppts{width:12.5%;}
  .rank-table th.col-total,
  .rank-table td.col-total{width:13%;}
  .rank-table th.col-wr,
  .rank-table td.col-wr{width:12.5%;}

  .rank-table td.col-top{
    overflow:visible;
  }

  .rank-table .topcell{
    gap:7px;
    overflow:visible;
  }

  .rank-table .topname{
    min-width:0;
    max-width:none;
    overflow:visible;
  }

  .rank-table .topsub{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    width:max-content;
    max-width:none;
    min-width:0;
    overflow:visible;
  }

  .rank-table .topsub .title-badge[data-title-style^="best-"],
  .rank-table .topsub .title-badge[data-title-key^="the-best-"]{
    display:inline-flex;
    align-items:center;
    flex:0 0 auto;
    width:max-content;
    max-width:none;
    min-width:0;
    padding:0;
    border:0;
    white-space:nowrap;
    word-break:normal;
    overflow:visible;
    font-size:7.2px;
    line-height:1;
    letter-spacing:.012em;
    transform:scaleX(.94);
    transform-origin:left center;
  }
}

@media (max-width:380px) and (orientation:portrait){
  .rank-table .topsub .title-badge[data-title-style^="best-"],
  .rank-table .topsub .title-badge[data-title-key^="the-best-"]{
    font-size:6.8px;
    transform:scaleX(.92);
  }
}


/* Ajuste de distancia entre avatar, nombre y título en tabla vertical. */
@media (max-width:920px) and (orientation:portrait){
  .rank-table .topcell{
    gap:4px;
  }
  .rank-table .topname{
    transform:translateX(-4px);
  }
}

/* Adaptación XL del ranking de personajes.
   El escalado aumenta solo en pantallas grandes. */
@media (min-width: 1981px) and (min-height: 1081px){
  :root{
    --pv-chars-xl:1.12;
    --pv-chars-xl-soft:1.08;
  }

  .rk-topbar,
  .pv-topbar{
    padding:calc(12px * var(--pv-chars-xl-soft)) calc(18px * var(--pv-chars-xl-soft)) !important;
    gap:calc(14px * var(--pv-chars-xl-soft)) !important;
  }
  .rk-logo,
  .pv-comp-icon{
    width:calc(44px * var(--pv-chars-xl-soft)) !important;
    height:calc(44px * var(--pv-chars-xl-soft)) !important;
  }
  .rk-left-title,
  .pv-comp-title{font-size:calc(14px * var(--pv-chars-xl-soft)) !important;}
  .pv-comp-kicker{font-size:calc(12px * var(--pv-chars-xl-soft)) !important;}
  .rk-brand,
  .pv-center{font-size:calc(20px * var(--pv-chars-xl-soft)) !important;}
  .rk-nav-btn,
  .pv-navlink{
    padding:calc(9px * var(--pv-chars-xl-soft)) calc(13px * var(--pv-chars-xl-soft)) !important;
    font-size:calc(14px * var(--pv-chars-xl-soft)) !important;
  }
  .rk-user,
  .pv-user{
    gap:calc(14px * var(--pv-chars-xl-soft)) !important;
    padding:calc(8px * var(--pv-chars-xl-soft)) calc(10px * var(--pv-chars-xl-soft)) !important;
    max-width:calc(340px * var(--pv-chars-xl-soft)) !important;
  }
  .rk-user .pv-avatar-wrap.big,
  .pv-user .pv-avatar-wrap.big{
    width:calc(54px * var(--pv-chars-xl-soft)) !important;
    height:calc(54px * var(--pv-chars-xl-soft)) !important;
    flex-basis:calc(54px * var(--pv-chars-xl-soft)) !important;
  }
  .rk-me-info span,
  .pv-user-name{font-size:calc(18px * var(--pv-chars-xl-soft)) !important;}
  .rk-me-info small,
  .pv-user-rank{font-size:calc(13px * var(--pv-chars-xl-soft)) !important;}

  .wrap{
    max-width:calc(1880px * var(--pv-chars-xl)) !important;
    padding:calc(20px * var(--pv-chars-xl-soft)) calc(14px * var(--pv-chars-xl-soft)) calc(78px * var(--pv-chars-xl-soft)) !important;
  }
  .hero{
    gap:calc(18px * var(--pv-chars-xl-soft)) !important;
    margin-top:calc(16px * var(--pv-chars-xl-soft)) !important;
  }
  .hero-left,
  .hero-right,
  .panel{
    padding:calc(18px * var(--pv-chars-xl-soft)) !important;
    border-radius:calc(18px * var(--pv-chars-xl-soft)) !important;
  }
  .hero h1{font-size:calc(34px * var(--pv-chars-xl-soft)) !important;}
  .hero p,
  .hint-text{font-size:calc(14px * var(--pv-chars-xl-soft)) !important;}
  .hint-title{font-size:calc(12px * var(--pv-chars-xl-soft)) !important;}

  .controls{
    gap:calc(12px * var(--pv-chars-xl-soft)) !important;
    padding:calc(7px * var(--pv-chars-xl-soft)) calc(5px * var(--pv-chars-xl-soft)) calc(12px * var(--pv-chars-xl-soft)) !important;
  }
  .field label{font-size:calc(11px * var(--pv-chars-xl-soft)) !important;}
  .field input,
  .field select,
  .check{
    padding:calc(10px * var(--pv-chars-xl-soft)) calc(12px * var(--pv-chars-xl-soft)) !important;
    border-radius:calc(12px * var(--pv-chars-xl-soft)) !important;
    font-size:calc(14px * var(--pv-chars-xl-soft)) !important;
  }
  .btn{
    padding:calc(10px * var(--pv-chars-xl-soft)) calc(14px * var(--pv-chars-xl-soft)) !important;
    font-size:calc(14px * var(--pv-chars-xl-soft)) !important;
  }
  .btn.icon{
    width:calc(44px * var(--pv-chars-xl-soft)) !important;
    height:calc(44px * var(--pv-chars-xl-soft)) !important;
  }
  .panel-title{font-size:calc(18px * var(--pv-chars-xl-soft)) !important;}
  .panel-meta,
  .pager-info{font-size:calc(12px * var(--pv-chars-xl-soft)) !important;}

  .table-wrap{border-radius:calc(16px * var(--pv-chars-xl-soft)) !important;}
  .rank-table thead th{
    padding:calc(12px * var(--pv-chars-xl-soft)) calc(10px * var(--pv-chars-xl-soft)) !important;
    font-size:calc(11.5px * var(--pv-chars-xl-soft)) !important;
  }
  .rank-table tbody td{
    padding:calc(11px * var(--pv-chars-xl-soft)) calc(10px * var(--pv-chars-xl-soft)) !important;
    font-size:calc(14px * var(--pv-chars-xl-soft)) !important;
  }
  .charcell{gap:calc(12px * var(--pv-chars-xl-soft)) !important;}
  .charimg{
    width:calc(50px * var(--pv-chars-xl-soft)) !important;
    height:calc(50px * var(--pv-chars-xl-soft)) !important;
    border-radius:calc(14px * var(--pv-chars-xl-soft)) !important;
  }
  .charname{font-size:calc(15px * var(--pv-chars-xl-soft)) !important;}
  .topcell{gap:calc(17px * var(--pv-chars-xl-soft)) !important;}
  .avatar-wrap{
    width:calc(48px * var(--pv-chars-xl-soft)) !important;
    height:calc(48px * var(--pv-chars-xl-soft)) !important;
    flex-basis:calc(48px * var(--pv-chars-xl-soft)) !important;
  }
  .topname a{font-size:calc(15px * var(--pv-chars-xl-soft)) !important;}
  .topsub{font-size:calc(12px * var(--pv-chars-xl-soft)) !important;}
  .best-badge{
    font-size:calc(11px * var(--pv-chars-xl-soft)) !important;
    padding:calc(5px * var(--pv-chars-xl-soft)) calc(10px * var(--pv-chars-xl-soft)) !important;
  }
  .best-text{font-size:calc(11px * var(--pv-chars-xl-soft)) !important;}
  .wrbar{
    width:calc(120px * var(--pv-chars-xl-soft)) !important;
    height:calc(8px * var(--pv-chars-xl-soft)) !important;
  }
  .pv-volume{
    right:calc(18px * var(--pv-chars-xl-soft)) !important;
    bottom:calc(18px * var(--pv-chars-xl-soft)) !important;
    padding:calc(10px * var(--pv-chars-xl-soft)) calc(12px * var(--pv-chars-xl-soft)) !important;
  }
}
@media (min-width: 2180px) and (min-height: 1081px){:root{--pv-chars-xl:1.32;--pv-chars-xl-soft:1.20;}}
@media (min-width: 2380px) and (min-height: 1081px){:root{--pv-chars-xl:1.46;--pv-chars-xl-soft:1.30;}}
@media (min-width: 2580px) and (min-height: 1081px){:root{--pv-chars-xl:1.62;--pv-chars-xl-soft:1.40;}}

/* Refuerzo visual para pantallas XL.
   Tabla y títulos ganan cuerpo sin alterar móvil ni la maqueta base. */
@media (min-width: 1981px) and (min-height: 1081px){
  .wrap{
    max-width:min(2440px, calc(100vw - 72px)) !important;
  }
  .main,
  .panel{
    gap:calc(20px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .table-wrap{
    border-radius:22px !important;
  }
  .rank-table{
    border-spacing:0 !important;
  }
  .rank-table thead th{
    padding:calc(14px * var(--pv-chars-xl-soft, 1.2)) calc(14px * var(--pv-chars-xl-soft, 1.2)) !important;
    font-size:calc(12.8px * var(--pv-chars-xl-soft, 1.2)) !important;
    letter-spacing:.08em !important;
  }
  .rank-table tbody tr{
    min-height:calc(86px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .rank-table tbody td{
    padding:calc(16px * var(--pv-chars-xl-soft, 1.2)) calc(14px * var(--pv-chars-xl-soft, 1.2)) !important;
    font-size:calc(15.6px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .rank-table .num,
  .rank-table td.col-wr,
  .rank-table td.col-total,
  .rank-table td.col-toppts{
    font-size:calc(16px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .charcell{
    gap:calc(17px * var(--pv-chars-xl-soft, 1.2)) !important;
    min-height:calc(70px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .charimg{
    width:calc(58px * var(--pv-chars-xl-soft, 1.2)) !important;
    height:calc(58px * var(--pv-chars-xl-soft, 1.2)) !important;
    border-radius:calc(16px * var(--pv-chars-xl-soft, 1.2)) !important;
    flex:0 0 calc(58px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .charname{
    font-size:calc(17.5px * var(--pv-chars-xl-soft, 1.2)) !important;
    line-height:1.05 !important;
  }
  .topcell{
    gap:calc(22px * var(--pv-chars-xl-soft, 1.2)) !important;
    min-height:calc(70px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .topcell .avatar-wrap,
  .rank-table .topcell .avatar-wrap{
    width:calc(58px * var(--pv-chars-xl-soft, 1.2)) !important;
    height:calc(58px * var(--pv-chars-xl-soft, 1.2)) !important;
    flex:0 0 calc(58px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .topname,
  .topname a,
  .rank-table .topname,
  .rank-table .topname a{
    font-size:calc(17px * var(--pv-chars-xl-soft, 1.2)) !important;
    line-height:1.05 !important;
  }
  .topsub,
  .rank-table .topsub{
    font-size:calc(14.2px * var(--pv-chars-xl-soft, 1.2)) !important;
    line-height:1.1 !important;
  }
  .rank-table .topsub .title-badge,
  .rank-table .topsub .title-badge[data-title-style^="best-"],
  .rank-table .topsub .title-badge[data-title-key^="the-best-"],
  .topsub .title-badge[data-title-style^="best-"],
  .topsub .title-badge[data-title-key^="the-best-"]{
    font-size:calc(13.5px * var(--pv-chars-xl-soft, 1.2)) !important;
    line-height:1.04 !important;
    padding:calc(4px * var(--pv-chars-xl-soft, 1.2)) calc(12px * var(--pv-chars-xl-soft, 1.2)) !important;
    max-width:none !important;
    white-space:nowrap !important;
  }
  .best-badge,
  .best-text{
    font-size:calc(12.8px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
  .wrbar{
    width:calc(142px * var(--pv-chars-xl-soft, 1.2)) !important;
    height:calc(10px * var(--pv-chars-xl-soft, 1.2)) !important;
  }
}



/* Énfasis visual y perfil superior en pantallas XL. */
.hint-text b,
.hint-text strong{
  color:rgba(255,255,255,.98) !important;
  font-weight:950 !important;
  text-shadow:0 0 14px rgba(255,255,255,.18), 0 2px 8px rgba(0,0,0,.62);
}

@media (min-width:1964px) and (min-height:1068px){
  .rk-topbar .rk-user#userPanel{
    overflow:visible !important;
    align-items:center !important;
    gap:20px !important;
    padding:11px 18px 11px 15px !important;
  }
  .rk-topbar .rk-user#userPanel .pv-avatar-wrap.big{
    width:72px !important;
    height:72px !important;
    min-width:72px !important;
    min-height:72px !important;
    flex:0 0 72px !important;
    margin-right:8px !important;
    overflow:visible !important;
    transform:none !important;
    image-rendering:auto !important;
  }
  .rk-topbar .rk-user#userPanel .pv-avatar{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    image-rendering:auto !important;
    transform:translateZ(0);
    backface-visibility:hidden;
  }
  .rk-topbar .rk-user#userPanel .pv-avatar-frame{
    width:204% !important;
    height:204% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    image-rendering:auto !important;
    transform:translate(-50%,-50%) translateZ(0) !important;
    transform-origin:center center !important;
    pointer-events:none !important;
  }
  .rk-topbar .rk-user#userPanel .rk-me-info{
    margin-left:8px !important;
    min-width:0 !important;
  }
}

/* Adaptación para móviles horizontales amplios y tablets.
   El Top 8 usa layout móvil y las tablets conservan perfil y métricas alineadas. */

/* Móviles horizontales anchos usan la versión móvil del Top 8. */
@media (min-width:921px) and (max-width:950px) and (max-height:500px) and (orientation:landscape){
  body{overflow-x:hidden !important;}
  .wrap{
    max-width:none !important;
    width:100% !important;
    padding:6px 8px 58px !important;
  }
  .pv-layout{
    display:flex !important;
    flex-direction:column !important;
    gap:8px !important;
    margin-top:6px !important;
  }
  .pv-side{
    position:static !important;
    top:auto !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    order:1 !important;
  }
  .pv-main{
    order:2 !important;
    width:100% !important;
    margin-left:0 !important;
  }
  .side-card{
    display:grid !important;
    grid-template-columns:150px minmax(0,1fr) !important;
    grid-template-rows:auto 1fr !important;
    grid-template-areas:
      "head list"
      "controls list" !important;
    column-gap:10px !important;
    row-gap:6px !important;
    align-items:center !important;
    padding:8px 10px !important;
    border-radius:18px !important;
    overflow:hidden !important;
  }
  .side-head{
    grid-area:head !important;
    align-self:end !important;
    justify-self:stretch !important;
    text-align:left !important;
    margin:0 !important;
  }
  .side-title{
    font-size:9.5px !important;
    line-height:1.12 !important;
    letter-spacing:.055em !important;
    max-width:140px !important;
  }
  .side-sub{
    margin-top:2px !important;
    font-size:8px !important;
    line-height:1 !important;
  }
  .side-controls{
    grid-area:controls !important;
    align-self:start !important;
    justify-self:stretch !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:6px !important;
    margin:0 !important;
  }
  .side-field{min-width:0 !important;}
  .side-field label{font-size:7.5px !important;line-height:1 !important;}
  .side-field select{
    width:100% !important;
    height:28px !important;
    padding:5px 8px !important;
    font-size:9.5px !important;
    border-radius:10px !important;
  }
  .top8-list{
    grid-area:list !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0 !important;
    align-self:center !important;
    justify-self:center !important;
  }
  .top8-item{
    aspect-ratio:1.08/1 !important;
    border-radius:13px !important;
  }
  .top8-img,
  body.pv-chars-motion-paused .top8-img{
    left:50% !important;
    top:42% !important;
    right:auto !important;
    bottom:auto !important;
    width:104% !important;
    height:76% !important;
    max-width:104% !important;
    max-height:76% !important;
    object-fit:contain !important;
    object-position:center bottom !important;
    transform:translate(-50%,-45%) scale(1.13) !important;
    animation:top8-mobile-float-same-as-pc-v49 4.8s ease-in-out infinite !important;
    filter:saturate(1.1) contrast(1.06) drop-shadow(0 8px 12px rgba(0,0,0,.54)) !important;
  }
  .top8-rank{
    left:5px !important;
    top:5px !important;
    height:17px !important;
    padding:0 6px !important;
    font-size:7.5px !important;
  }
  .top8-lines{
    display:flex !important;
    flex-direction:row !important;
    justify-content:center !important;
    align-items:center !important;
    left:4px !important;
    right:4px !important;
    top:auto !important;
    bottom:17px !important;
    gap:2px !important;
  }
  .top8-line{
    font-size:6.2px !important;
    line-height:1 !important;
    padding:2px 3px !important;
    gap:1px !important;
    letter-spacing:0 !important;
  }
  .top8-line .k{display:inline !important;}
  .top8-line .v{margin-left:1px !important;}
  .top8-name{
    min-height:16px !important;
    padding:3px 3px 4px !important;
    font-size:7px !important;
    line-height:1 !important;
  }
}

/* Tablets en vertical y horizontal, separadas de teléfonos por altura mínima. */
@media (min-width:700px) and (max-width:1180px) and (min-height:700px){
  .rk-topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;
    grid-template-areas:"left brand user" !important;
    align-items:center !important;
    min-height:72px !important;
    padding:10px 16px !important;
    gap:14px !important;
    overflow:visible !important;
  }
  .rk-left{
    grid-area:left !important;
    padding-top:0 !important;
    justify-self:start !important;
    align-self:center !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  .rk-brand{
    grid-area:brand !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    justify-self:center !important;
    align-self:center !important;
    margin:0 !important;
    min-width:max-content !important;
    font-size:18px !important;
    line-height:1 !important;
    letter-spacing:.20em !important;
    text-align:center !important;
    z-index:3 !important;
  }
  .rk-user,
  .rk-topbar .rk-user#userPanel{
    grid-area:user !important;
    justify-self:end !important;
    align-self:center !important;
    width:auto !important;
    max-width:330px !important;
    min-height:54px !important;
    margin:0 !important;
    padding:7px 14px 7px 10px !important;
    gap:14px !important;
    overflow:visible !important;
    border-radius:18px !important;
  }
  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:44px !important;
    height:44px !important;
    flex:0 0 44px !important;
    margin-right:5px !important;
  }
  .rk-topbar .rk-user .pv-avatar-frame,
  .rk-user .pv-avatar-frame{
    width:184% !important;
    height:184% !important;
  }
  .rk-topbar .rk-user .rk-me-info,
  .rk-me-info{
    min-width:0 !important;
    max-width:240px !important;
    padding-left:2px !important;
    margin-left:0 !important;
  }
  .rk-me-info span,
  .rk-me-info small{
    max-width:220px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
  .rk-me-info span{font-size:14px !important;}
  .rk-me-info small{font-size:11px !important;}

  /* Tabla con avatar y marco separados del nombre del Top 1. */
  .table-wrap{
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .rank-table{
    width:100% !important;
    min-width:760px !important;
    table-layout:fixed !important;
  }
  .rank-table th.col-char,
  .rank-table td.col-char{width:23% !important;}
  .rank-table th.col-top,
  .rank-table td.col-top{width:38% !important;}
  .rank-table th.col-toppts,
  .rank-table td.col-toppts{width:13% !important;text-align:center !important;}
  .rank-table th.col-total,
  .rank-table td.col-total{width:14% !important;text-align:center !important;}
  .rank-table th.col-wr,
  .rank-table td.col-wr{width:12% !important;text-align:center !important;}
  .rank-table td.col-wr,
  .rank-table .num{
    text-align:center !important;
  }
  .rank-table td.col-wr{
    display:table-cell !important;
  }
  .rank-table .topcell{
    justify-content:flex-start !important;
    align-items:center !important;
    gap:26px !important;
    padding-left:12px !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  .rank-table .avatar-wrap{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    overflow:visible !important;
  }
  .rank-table .avatar-frame{
    width:184% !important;
    height:184% !important;
  }
  .rank-table .topname{
    min-width:0 !important;
    max-width:100% !important;
    margin-left:0 !important;
    transform:none !important;
    overflow:visible !important;
    gap:4px !important;
  }
  .rank-table .topline,
  .rank-table .topsub{
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  .rank-table .topname a{
    max-width:180px !important;
    font-size:12.5px !important;
    line-height:1.05 !important;
  }
  .rank-table .topsub{
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
  }
  .rank-table .topsub .title-badge[data-title-style^="best-"],
  .rank-table .topsub .title-badge[data-title-key^="the-best-"],
  .rank-table .best-badge,
  .rank-table .best-text{
    max-width:190px !important;
    width:auto !important;
    min-width:0 !important;
    overflow:visible !important;
    white-space:nowrap !important;
    text-overflow:clip !important;
    transform:none !important;
    font-size:8.2px !important;
    line-height:1 !important;
    letter-spacing:.03em !important;
  }
}

@media (min-width:1000px) and (max-width:1180px) and (min-height:700px) and (orientation:landscape){
  .rank-table{min-width:0 !important;}
  .rank-table .topname a{max-width:210px !important;}
  .rank-table .topsub .title-badge[data-title-style^="best-"],
  .rank-table .topsub .title-badge[data-title-key^="the-best-"],
  .rank-table .best-badge,
  .rank-table .best-text{max-width:220px !important;font-size:9px !important;}
}

/* Ajuste de tabla para iPad Mini vertical.
   La tabla se compacta dentro del ancho disponible. */
@media (min-width:740px) and (max-width:790px) and (min-height:950px) and (orientation:portrait){
  .panel{
    padding-left:10px !important;
    padding-right:10px !important;
    overflow:hidden !important;
  }

  .table-wrap{
    overflow-x:hidden !important;
    overflow-y:visible !important;
    width:100% !important;
    max-width:100% !important;
  }

  .rank-table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  .rank-table thead th{
    padding:9px 4px !important;
    font-size:9.2px !important;
    line-height:1.05 !important;
    letter-spacing:.055em !important;
    text-align:center !important;
    white-space:normal !important;
  }

  .rank-table tbody td{
    padding:9px 4px !important;
    font-size:10px !important;
    line-height:1.08 !important;
  }

  .rank-table th.col-char,
  .rank-table td.col-char{width:22% !important;}
  .rank-table th.col-top,
  .rank-table td.col-top{width:39% !important;}
  .rank-table th.col-toppts,
  .rank-table td.col-toppts{width:12.5% !important;}
  .rank-table th.col-total,
  .rank-table td.col-total{width:14% !important;}
  .rank-table th.col-wr,
  .rank-table td.col-wr{width:12.5% !important;}

  .charcell{
    gap:7px !important;
    min-width:0 !important;
  }
  .charimg{
    width:34px !important;
    height:34px !important;
    flex:0 0 34px !important;
    border-radius:10px !important;
  }
  .charnames{min-width:0 !important;}
  .charname{
    max-width:88px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:10.5px !important;
  }

  .rank-table .topcell{
    gap:16px !important;
    padding-left:6px !important;
    min-width:0 !important;
    overflow:visible !important;
  }
  .rank-table .avatar-wrap{
    width:36px !important;
    height:36px !important;
    flex:0 0 36px !important;
  }
  .rank-table .avatar-frame{
    width:184% !important;
    height:184% !important;
  }
  .rank-table .topname{
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
    gap:3px !important;
  }
  .rank-table .topname a{
    display:block !important;
    max-width:150px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:10.5px !important;
    line-height:1.05 !important;
  }
  .rank-table .topsub{
    width:auto !important;
    max-width:155px !important;
    overflow:visible !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
  }
  .rank-table .topsub .title-badge[data-title-style^="best-"],
  .rank-table .topsub .title-badge[data-title-key^="the-best-"],
  .rank-table .best-badge,
  .rank-table .best-text{
    max-width:155px !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:7.2px !important;
    line-height:1 !important;
    letter-spacing:.025em !important;
  }

  .rank-table .num,
  .rank-table td.col-toppts,
  .rank-table td.col-total,
  .rank-table td.col-wr{
    text-align:center !important;
    font-size:9.5px !important;
    line-height:1 !important;
  }
}

/* V30 - Effects OFF real para Ranking Characters en teléfonos lentos.
   Apaga el trabajo pesado invisible del TOP 8: rebotes, conic blur, barridos,
   filtros/backdrop y animaciones del fondo cuando pv-effects está OFF. */
html.pv-effects-off .pv-abyss-bg,
html.pv-effects-off .pv-abyss-bg::before,
html.pv-effects-off .pv-bg-wrap,
html.pv-effects-off .pv-bg-wrap::before,
html.pv-effects-off .pv-bg-wrap::after,
html.pv-effects-off .pv-bg-grain,
html.pv-effects-off .rk-topbar,
html.pv-effects-off .pv-side,
html.pv-effects-off .pv-main,
html.pv-effects-off .hero,
html.pv-effects-off .panel,
html.pv-effects-off .pv-volume,
html.pv-effects-off .rk-brand::before,
html.pv-effects-off .rk-brand::after,
html.pv-effects-off .best-badge::before,
html.pv-effects-off .best-badge::after{
  animation:none !important;
  transition:none !important;
  will-change:auto !important;
}

html.pv-effects-off .pv-abyss-bg,
html.pv-effects-off .pv-abyss-bg::before{
  opacity:1 !important;
  transform:none !important;
}

html.pv-effects-off .top8-list{
  contain:layout paint style !important;
  content-visibility:auto !important;
  will-change:auto !important;
}

html.pv-effects-off .top8-item,
html.pv-effects-off body.pv-chars-motion-paused .top8-item{
  contain:layout paint style !important;
  transform:none !important;
  transition:none !important;
  box-shadow:0 8px 18px rgba(0,0,0,.26) !important;
  will-change:auto !important;
}

html.pv-effects-off .top8-item:hover,
html.pv-effects-off body.pv-chars-motion-paused .top8-item:hover{
  transform:none !important;
  box-shadow:0 8px 18px rgba(0,0,0,.26) !important;
  filter:none !important;
}

html.pv-effects-off .top8-item::before,
html.pv-effects-off .top8-item::after,
html.pv-effects-off body.pv-chars-motion-paused .top8-item::before,
html.pv-effects-off body.pv-chars-motion-paused .top8-item::after{
  content:none !important;
  display:none !important;
  animation:none !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  will-change:auto !important;
}

html.pv-effects-off .top8-img,
html.pv-effects-off body.pv-chars-motion-paused .top8-img,
html.pv-effects-off .top8-list .top8-img,
html.pv-effects-off body.pv-chars-motion-paused .top8-list .top8-img{
  animation:none !important;
  animation-play-state:paused !important;
  translate:0 0 !important;
  will-change:auto !important;
  filter:none !important;
}

html.pv-effects-off .top8-rank,
html.pv-effects-off .top8-line,
html.pv-effects-off .top8-pill,
html.pv-effects-off .panel,
html.pv-effects-off .side-card,
html.pv-effects-off .rk-topbar,
html.pv-effects-off .pv-volume{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

@media (max-width:920px){
  html.pv-effects-off .top8-img,
  html.pv-effects-off body.pv-chars-motion-paused .top8-img{
    animation:none !important;
    animation-play-state:paused !important;
    translate:0 0 !important;
    will-change:auto !important;
  }
}

/* V31 - Ranking Characters: rendimiento estable incluso con efectos ON.
   Mantiene el fondo elemental del TOP 8, pero elimina el conic blur giratorio,
   filtros pesados y rebote móvil que casi no se aprecian y cuestan FPS. */
.top8-item{
  box-shadow:0 10px 24px rgba(0,0,0,.34) !important;
  will-change:auto !important;
}

.top8-item::before{
  content:"" !important;
  display:block !important;
  inset:0 !important;
  border-radius:inherit !important;
  opacity:.88 !important;
  filter:none !important;
  animation:none !important;
  mix-blend-mode:normal !important;
  will-change:auto !important;
  transform:none !important;
  background:
    radial-gradient(82% 82% at 30% 24%, rgba(var(--elrgb,210,210,210), .34), rgba(0,0,0,0) 62%),
    radial-gradient(92% 92% at 76% 82%, rgba(var(--elrgb,210,210,210), .20), rgba(0,0,0,0) 64%),
    linear-gradient(135deg, rgba(var(--elrgb,210,210,210), .22), rgba(0,0,0,.10)) !important;
}

.top8-item::after{
  content:"" !important;
  display:block !important;
  opacity:.55 !important;
  filter:none !important;
  animation:none !important;
  will-change:auto !important;
  mix-blend-mode:normal !important;
}

.top8-img{
  will-change:auto !important;
}

.top8-pill{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

@media (max-width:920px){
  .top8-img,
  body.pv-chars-motion-paused .top8-img,
  html.pv-effects-off .top8-img,
  html.pv-effects-off body.pv-chars-motion-paused .top8-img{
    animation:none !important;
    transform:none !important;
    translate:0 0 !important;
    filter:saturate(1.04) contrast(1.03) !important;
    will-change:auto !important;
  }

  .top8-item:hover,
  html.pv-effects-off .top8-item:hover,
  html.pv-effects-off body.pv-chars-motion-paused .top8-item:hover{
    transform:none !important;
    box-shadow:0 10px 24px rgba(0,0,0,.34) !important;
  }
}

/* Corrige V30: con efectos OFF ya no se borra el fondo elemental, solo se queda estático. */
html.pv-effects-off .top8-item::before,
html.pv-effects-off body.pv-chars-motion-paused .top8-item::before{
  content:"" !important;
  display:block !important;
  opacity:.88 !important;
  filter:none !important;
  animation:none !important;
  mix-blend-mode:normal !important;
  will-change:auto !important;
  background:
    radial-gradient(82% 82% at 30% 24%, rgba(var(--elrgb,210,210,210), .34), rgba(0,0,0,0) 62%),
    radial-gradient(92% 92% at 76% 82%, rgba(var(--elrgb,210,210,210), .20), rgba(0,0,0,0) 64%),
    linear-gradient(135deg, rgba(var(--elrgb,210,210,210), .22), rgba(0,0,0,.10)) !important;
}

html.pv-effects-off .top8-item::after,
html.pv-effects-off body.pv-chars-motion-paused .top8-item::after{
  content:"" !important;
  display:block !important;
  opacity:.35 !important;
  filter:none !important;
  animation:none !important;
  will-change:auto !important;
}

/* En PC no se toca la animación de los títulos THE BEST. */
@media (min-width:921px){
  html.pv-effects-off .best-badge::after{
    content:"" !important;
    display:block !important;
    opacity:.85 !important;
    animation:bestSweep 3.2s ease-in-out infinite !important;
  }
  html.pv-effects-off .anim-rank-title{
    animation:shine 5s linear infinite !important;
  }
}