:root{
  --bg:#0b0e13;
  --fg:#eaf0ff;
  --muted:#a3b2d5;

  /* Transparencia legible sin perder presencia visual. */
  --card:rgba(10,14,20,.52);
  --card2:rgba(10,14,20,.40);
  --pill:rgba(0,0,0,.32);

  --line:rgba(255,255,255,.12);
  --line2:rgba(255,255,255,.18);

  --accent:#7ba9ff;
  --ok:#7eff9a;
  --bad:#ff7b7b;

  --shadow:0 18px 60px rgba(0,0,0,.55);
}

/* Fuente principal de la página. */
@font-face{
  font-family:"GenshinImpact";
  src:url("../fonts/Genshin.woff2") format("woff2");
  font-display:swap;
}

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

/* 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,.14);
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12));
}

/* ===== Fondo con video, viñeta y textura ligera ===== */
.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,.28),rgba(0,0,0,.78) 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%)}
}

/* ====== Encabezado ====== */
.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:var(--pill);
  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);
  cursor:pointer;
  user-select:none;
  transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease;
}
.rk-league-list li:hover{transform:translateY(-1px);background:rgba(255,255,255,.07);border-color:rgba(123,169,255,.42)}
.rk-league-list li.is-active{background:linear-gradient(135deg,rgba(123,169,255,.24),rgba(159,224,255,.12));border-color:rgba(123,169,255,.72);box-shadow:0 0 0 1px rgba(123,169,255,.14),0 10px 24px rgba(10,14,26,.28)}
.rk-league-list li.is-active span{color:#f8fbff;text-shadow:0 0 10px rgba(123,169,255,.34)}
.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}
.rk-league-list li.is-active small{color:#d9e7ff}

/* 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 ====== */
.rk-main{z-index:2;position:relative}
.rk-toolbar{display:flex;gap:12px;align-items:center;margin-bottom:12px}

/* Inputs sin desenfoque para conservar nitidez del fondo. */
.rk-input{
  flex:1;height:38px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.34);
  color:var(--fg);
  padding:0 12px;
  outline:none;
}
.rk-select-wrap{display:flex;gap:8px;align-items:center;color:var(--muted)}
.rk-select-wrap select{
  height:38px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.34);
  color:var(--fg);
  padding:0 10px;
}
.rk-league-filter-chip{
  min-height:38px;
  max-width:280px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(123,169,255,.50);
  border-radius:999px;
  background:linear-gradient(135deg,rgba(123,169,255,.22),rgba(159,224,255,.10));
  color:#f8fbff;
  padding:0 8px 0 14px;
  font:inherit;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);
  white-space:nowrap;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.rk-league-filter-chip[hidden]{display:none!important}
.rk-league-filter-chip:hover{transform:translateY(-1px);border-color:rgba(159,224,255,.85);background:linear-gradient(135deg,rgba(123,169,255,.30),rgba(159,224,255,.16));box-shadow:0 14px 28px rgba(0,0,0,.28),0 0 18px rgba(123,169,255,.18)}
.rk-league-filter-chip b{
  width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.13);
  color:#fff;
  font-size:17px;
  line-height:1;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
.rk-league-filter-chip:hover b{background:rgba(255,255,255,.22)}

/* Tabla sin desenfoque. */
.rk-table-wrap{
  background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.rk-table{width:100%;border-collapse:collapse;table-layout:auto}
.rk-table thead th{
  background:rgba(10,14,20,.86);
  padding:12px 14px;
  text-align:left;
  font-weight:700;
  color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.rk-table tbody td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.10);vertical-align:middle}
.rk-table tbody tr:hover{background:rgba(255,255,255,.05);cursor:pointer}
.rk-empty td{text-align:center;color:var(--muted)}
.rk-player{display:flex;align-items:center;gap:16px}
.rk-name{display:block;font-weight:800}
.rk-handle{display:block;color:var(--muted);font-size:12px;margin-top:2px}

/* ====== Liga, logo e insignia ====== */
.rk-league-cell{display:flex;align-items:center;gap:10px;}
.rank-logo{
  width:22px;height:22px;border-radius:999px;
  background-size:70% 70%;background-position:center;background-repeat:no-repeat;
  background-color:#0e141d;
  box-shadow:0 0 0 2px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.45);
  flex:0 0 22px;filter:saturate(1.1) contrast(1.05);
  position:relative;
}
/* Logo sin brillos adicionales. */
.rank-logo::before, .rank-logo::after{ content:none !important; display:none !important; }

@keyframes rk-sheen{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.rank-badge{
  display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.08);
  padding:6px 14px;border-radius:999px;font-weight:800;font-size:13.5px;
  background:var(--pill);
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  white-space:nowrap;
  position:relative; overflow:hidden; will-change:transform;
}

/* Logos por liga */
.rank-logo[data-league="bronze"]{background-image:url("../img/leagues/bronze.png")}
.rank-logo[data-league="silver"]{background-image:url("../img/leagues/silver.png")}
.rank-logo[data-league="gold"]{background-image:url("../img/leagues/gold.png")}
.rank-logo[data-league="platinum"]{background-image:url("../img/leagues/platinum.png")}
.rank-logo[data-league="diamond"]{background-image:url("../img/leagues/diamond.png")}
.rank-logo[data-league="master"]{background-image:url("../img/leagues/master.png")}
.rank-logo[data-league="primordial"]{background-image:url("../img/leagues/primordial.png")}
.rank-logo[data-league="abysslord"]{background-image:url("../img/leagues/abysslord.png")}

/* Gradientes base por liga */
.rank-badge[data-league="bronze"]{color:#f5e3cf;background:linear-gradient(90deg,#5a3b22,#7b4f2b,#5a3b22);background-size:200% 100%;animation:rk-sheen 9s linear infinite}
.rank-badge[data-league="silver"]{color:#0b0f14;background:linear-gradient(90deg,#d9d9d9,#c0c0c0,#d9d9d9);background-size:200% 100%;animation:rk-sheen 10s linear infinite}
.rank-badge[data-league="gold"]{color:#0b0f14;background:linear-gradient(90deg,#ffe08a,#ffd24d,#ffe08a);background-size:200% 100%;animation:rk-sheen 8s linear infinite}
.rank-badge[data-league="platinum"]{color:#07201c;background:linear-gradient(90deg,#5ae3d4,#3ac0b1,#5ae3d4);background-size:200% 100%;animation:rk-sheen 8s linear infinite}
.rank-badge[data-league="diamond"]{color:#072026;background:linear-gradient(90deg,#8af0ff,#40e0d0,#8af0ff);background-size:200% 100%;animation:rk-sheen 7s linear infinite}
.rank-badge[data-league="master"]{color:#fff;background:linear-gradient(90deg,#7c0e19,#d72c3a,#7c0e19);background-size:200% 100%;animation:rk-sheen 7s linear infinite}
.rank-badge[data-league="primordial"]{color:#0b0f14;background:linear-gradient(90deg,#ffffff,#f7f7f7,#ffffff);background-size:200% 100%;animation:rk-sheen 11s linear infinite}
.rank-badge[data-league="abysslord"]{color:#f6e8ff;background:linear-gradient(90deg,#6e37c9,#b565ff,#6e37c9);background-size:200% 100%;animation:rk-sheen 6s linear infinite}

/* Efecto RGB Abyss aplicado solo a insignias. */
@keyframes rgb-rot { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes rgb-pulse { 0%,100%{opacity:.16} 50%{opacity:.34} }

.rank-badge[data-league]::after{
  content:""; position:absolute; left:50%; top:50%;
  width:180%; height:180%;
  transform:translate(-50%,-50%);
  border-radius:inherit; pointer-events:none;
  background: conic-gradient(#ff0040,#ff7a00,#ffe600,#28ff00,#00eaff,#6a00ff,#ff00c8,#ff0040);
  filter: blur(10px) saturate(120%);
  mix-blend-mode: screen;
  opacity:.22;
  animation: rgb-rot 7.2s linear infinite, rgb-pulse 3.6s ease-in-out infinite;
}

/* Ajuste fino de alineación. */
.rank-badge[data-league="platinum"],
.rank-badge[data-league="diamond"],
.rank-badge[data-league="primordial"]{
  text-shadow:0 0 6px rgba(255,255,255,.18);
  box-shadow:0 2px 10px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08);
}
.rank-badge[data-league="platinum"]::after{opacity:.26; filter:blur(11px) saturate(128%); animation-duration:6.8s}
.rank-badge[data-league="diamond"]::after{opacity:.28; filter:blur(11px) saturate(130%); animation-duration:6.6s}
.rank-badge[data-league="primordial"]::after{opacity:.36; filter:blur(12px) saturate(135%); animation-duration:6.2s}
.rank-badge[data-league="primordial"]{
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 2px 8px rgba(0,0,0,.25),
    0 0 0 1px rgba(255,255,255,.28),
    0 0 26px rgba(255,255,255,.28),
    inset 0 0 18px rgba(255,255,255,.16);
}

/* Números */
.rk-num.ok{color:var(--ok);font-weight:800}
.rk-num.bad{color:var(--bad);font-weight:800}

/* Paginador */
.rk-pager{display:flex;gap:12px;align-items:center;justify-content:center;padding:12px}
.rk-page-info{opacity:.9}
.rk-btn{border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.30);color:var(--fg);cursor:pointer}
.rk-btn-pill{padding:10px 14px;border-radius:999px;transition:.22s}
.rk-btn-pill:hover{filter:brightness(1.05);transform:translateY(-1px)}
.rk-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ====== Visor de premios ====== */
.rk-frame-viewer{
  position:fixed;inset:0;background:rgba(0,0,0,.75);
  display:none;align-items:center;justify-content:center;z-index:1000;
}
.rk-frame-viewer.show{display:flex}
.rk-frame-box{max-width:min(92vw,900px);max-height:min(92vh,900px);display:grid;place-items:center;animation:rk-pop .15s ease}
.rk-frame-box img{max-width:100%;max-height:100%;object-fit:contain}
@keyframes rk-pop{from{transform:scale(.96);opacity:.4}to{transform:scale(1);opacity:1}}

/* Volumen compacto */
.pv-volume{
  position:fixed;left:12px;bottom:12px;z-index:140;
  display:inline-flex !important;align-items:center;gap:6px;
  background:rgba(0,0,0,.55)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:12px!important;
  padding:6px 8px!important;
  width:auto !important;max-width:none !important;white-space:nowrap !important;
  right:auto !important;
}
.pv-volume::before,.pv-volume::after{display:none!important;content:none!important}
.pv-vol-btn{
  background:rgba(255,255,255,.06)!important;
  color:rgba(255,255,255,.92)!important;
  border:1px solid rgba(255,255,255,.14)!important;
  width:28px;height:28px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;
  transition:transform .12s ease,background .12s ease,border-color .12s ease;
}
.pv-vol-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.22)!important}
.pv-vol-display{font-weight:900;letter-spacing:.08em;color:var(--accent);min-width:34px;text-align:center;font-size:12px}

/* ===== Marcos visibles y efectos asociados ===== */
.pv-avatar-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  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);
}
.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-wrap.big{width:54px;height:54px}
.rk-user .pv-avatar-wrap.big{margin-right:6px;}
.pv-avatar-wrap:not(.big){width:44px;height:44px}

.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;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.45));
  opacity:1;
}

/* Marcos: animaciones centralizadas en frames.css. */
.pv-avatar-wrap[data-frame="none"] .pv-avatar-frame{display:none}
.pv-avatar-wrap[data-frame="owner"] .pv-avatar-frame{display:none}

/* Paginador superior. */
.rk-pager-top{
  border-bottom:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
}

/* Títulos compactos en la página PvP. */
.rk-title-badge{font-size:11px;letter-spacing:.08em;padding:4px 8px;line-height:1;border-radius:999px;}
.rk-rewards .title-badge{font-size:12px;}


/* ===== Normalización global de fuente ===== */
html, body, button, input, select, textarea, option, table, th, td, span, strong, small {
  font-family:"GenshinImpact",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
}

.rk-rats-btn{
  width:100%;
  margin-top:14px;
  padding:14px 16px;
  border:none;
  border-radius:18px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff5ec;
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.16), transparent 42%),
    linear-gradient(135deg,#3e1a1a,#7a1f1f 42%,#b53333 72%,#5a1d1d 100%);
  box-shadow:0 18px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.14), 0 0 30px rgba(181,51,51,.22);
  cursor:pointer;
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.rk-rats-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 22px 48px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.18), 0 0 34px rgba(181,51,51,.28); }
.rk-rats-btn.is-active{
  background:
    radial-gradient(120% 160% at 50% 0%, rgba(255,255,255,.20), transparent 44%),
    linear-gradient(135deg,#1f1f45,#5422a5 38%,#8b48ff 70%,#36206d 100%);
  box-shadow:0 20px 48px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.18), 0 0 34px rgba(139,72,255,.28);
}
.rk-rats-btn::before{ content:"🐀 "; }

.rk-league-list li[data-league="bronze"] span{ color:#c68a57; }
.rk-league-list li[data-league="silver"] span{ color:#d7d7d7; }
.rk-league-list li[data-league="gold"] span{ color:#ffd766; }
.rk-league-list li[data-league="platinum"] span{ color:#6ff2e6; }
.rk-league-list li[data-league="diamond"] span{ color:#8feeff; }
.rk-league-list li[data-league="master"] span{ color:#ff7b7b; }
.rk-league-list li[data-league="primordial"] span{ color:#f2f2f2; }
.rk-league-list li[data-league="abysslord"] span{ color:#d8b0ff; }

.rk-rewards li{ gap:8px; flex-wrap:wrap; }
.rk-rewards .award-ph{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 10px; border-radius:999px;
  border:1px dashed rgba(255,255,255,.18);
  background:rgba(0,0,0,.28); color:#d7def2; font-size:11px; letter-spacing:.04em;
}
.rk-rewards .award-side-right{ margin-left:auto; }
.rk-rewards .award-side-left{ margin-right:2px; }
.rk-rewards .award-theone-item .theone-star{ color:#ffd24d; }
.rk-rewards.rats-mode #award-fighter-item,
.rk-rewards.rats-mode #award-duelist-item,
.rk-rewards.rats-mode #award-theone-item{ display:none; }
.rk-rewards.rats-mode #award-challenger img,
.rk-rewards.rats-mode #award-master img{ display:none; }
.rk-rewards.rats-mode #award-lord{ display:none; }
.rk-rewards .rats-frame-ph{ margin-left:auto; }

.rk-input::placeholder, .rk-select-wrap span, .rk-page-info, .rk-btn{ font-family:"GenshinImpact",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important; }

@media (max-width: 1280px){ .rk-layout{ grid-template-columns:1fr; } }


/* ===== Pulido visual del ranking ===== */
button,input,select,option,textarea{font-family:"GenshinImpact",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;}
#rkSeasonDates{display:none !important;}
.rk-toolbar{
  position:sticky;
  top:84px;
  z-index:85;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(8,12,18,.88),rgba(8,12,18,.72));
  box-shadow:0 14px 28px rgba(0,0,0,.30);
  backdrop-filter:blur(8px);
}
.rk-input{max-width:420px;}
.rk-league-list li[data-league="bronze"] small{ color:#c68a57; }
.rk-league-list li[data-league="silver"] small{ color:#d7d7d7; }
.rk-league-list li[data-league="gold"] small{ color:#ffd766; }
.rk-league-list li[data-league="platinum"] small{ color:#6ff2e6; }
.rk-league-list li[data-league="diamond"] small{ color:#8feeff; }
.rk-league-list li[data-league="master"] small{ color:#ff7b7b; }
.rk-league-list li[data-league="primordial"] small{ color:#f2f2f2; }
.rk-league-list li[data-league="abysslord"] small{ color:#d8b0ff; }
.rk-rewards li{align-items:center;}
.rk-rewards img{width:30px;height:30px;object-fit:contain;}
.rk-rewards .award-side-icon{
  width:28px;height:28px;object-fit:contain;flex:0 0 28px;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
}
.rk-rewards #award-fighter,
.rk-rewards #award-duelist,
.rk-rewards #award-lord{margin-left:auto;}
.rk-rewards.rats-mode #award-lord{display:block;}
.rk-rewards.rats-mode #award-bendicion{display:none !important;}
.rk-rewards.rats-mode #award-fighter,
.rk-rewards.rats-mode #award-duelist,
.rk-rewards.rats-mode #award-theone{display:none !important;}
.rk-rewards .title-badge[data-title-key="abyss-fighter"]{filter:drop-shadow(0 0 8px rgba(255,133,36,.16));}
.rk-rewards .title-badge[data-title-key="abyss-duelist"]{filter:drop-shadow(0 0 8px rgba(112,224,104,.16));}
@media (max-width: 1280px){ .rk-toolbar{top:74px;} }


/* ===== Pulido general del ranking PvP ===== */
.rk-player > div{padding-left:4px;}
.rk-user[role="link"]{cursor:pointer;}
.rk-user[role="link"] .rk-me-menu{display:none!important;}

/* ===== Ranking PvP y panel de sonido desplegable ===== */
@keyframes pvRankSoftIn{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes pvRankLine{0%,100%{opacity:.25;transform:scaleX(.68)}50%{opacity:.9;transform:scaleX(1)}}
.rk-topbar{animation:pvRankSoftIn .48s cubic-bezier(.16,1,.3,1) .02s both;box-shadow:0 14px 38px rgba(0,0,0,.32),inset 0 -1px 0 rgba(203,181,255,.08)}
.rk-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(203,181,255,.78),transparent);transform-origin:center;animation:pvRankLine 3.8s ease-in-out infinite;pointer-events:none}
.rk-info-col>.rk-card,.rk-left-col>.rk-card,.rk-toolbar,.rk-table-wrap{animation:pvRankSoftIn .56s cubic-bezier(.16,1,.3,1) both}
.rk-info-col>.rk-card:nth-child(1){animation-delay:.08s}.rk-info-col>.rk-card:nth-child(2){animation-delay:.14s}.rk-toolbar{animation-delay:.18s}.rk-table-wrap{animation-delay:.23s}.rk-left-col>.rk-card:nth-child(1){animation-delay:.28s}.rk-left-col>.rk-card:nth-child(2){animation-delay:.34s}
.rk-card,.rk-toolbar,.rk-table-wrap{position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(17,22,34,.88),rgba(8,11,19,.82))!important;border-color:rgba(203,181,255,.15)!important;box-shadow:0 18px 44px rgba(0,0,0,.38),inset 0 0 0 1px rgba(255,255,255,.035)!important;transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.rk-card::before,.rk-toolbar::before,.rk-table-wrap::before{content:"";position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);pointer-events:none}
.rk-card:hover,.rk-toolbar:hover,.rk-table-wrap:hover{transform:translateY(-2px);border-color:rgba(203,181,255,.25)!important;box-shadow:0 22px 54px rgba(0,0,0,.46),0 0 28px rgba(124,58,237,.12)!important}
.rk-btn,.rk-nav-btn,.rk-rats-btn,.rk-user,.rk-brand,.rk-input,.rk-select-wrap select,.rk-league-list li,.rk-rewards li{transition:transform .18s cubic-bezier(.16,.84,.32,1),box-shadow .18s ease,border-color .18s ease,background .18s ease,filter .18s ease,color .18s ease}
.rk-btn:hover:not(:disabled),.rk-nav-btn:hover,.rk-rats-btn:hover,.rk-user:hover,.rk-brand:hover,.rk-select-wrap select:hover,.rk-league-list li:hover,.rk-rewards li:hover{transform:translateY(-3px);border-color:rgba(203,181,255,.38)!important;box-shadow:0 14px 28px rgba(0,0,0,.30),0 0 20px rgba(139,92,246,.13);filter:brightness(1.08)}
.rk-btn:active:not(:disabled),.rk-nav-btn:active,.rk-rats-btn:active,.rk-user:active,.rk-brand:active{transform:translateY(0) scale(.985)}
.rk-input:hover,.rk-input:focus,.rk-select-wrap select:focus{border-color:rgba(203,181,255,.44)!important;box-shadow:0 0 0 3px rgba(139,92,246,.16),0 14px 30px rgba(0,0,0,.26);outline:none}
.rk-table tbody tr{transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.rk-table tbody tr:hover{transform:translateX(3px);background:rgba(203,181,255,.075)!important;box-shadow:inset 3px 0 0 rgba(203,181,255,.50)}
/* Panel de sonido. */
.pv-volume{position:fixed!important;right:20px!important;bottom:20px!important;left:auto!important;z-index:160!important;display:inline-flex!important;align-items:center!important;gap:10px!important;min-height:66px!important;width:auto!important;max-width:none!important;padding:12px 14px!important;border-radius:26px!important;background:linear-gradient(180deg,rgba(18,21,32,.92),rgba(8,10,16,.86))!important;border:1px solid rgba(203,181,255,.25)!important;box-shadow:0 16px 36px rgba(0,0,0,.42),0 0 24px rgba(124,58,237,.16),inset 0 0 0 1px rgba(255,255,255,.035)!important;backdrop-filter:blur(12px) saturate(130%);overflow:visible!important;animation:pvRankSoftIn .50s cubic-bezier(.16,1,.3,1) .30s both}
.pv-volume-controls{display:flex;align-items:center;gap:10px;max-width:368px;opacity:1;overflow:visible;transition:max-width .26s cubic-bezier(.16,.84,.32,1),opacity .2s ease,transform .22s ease,margin .22s ease}
.pv-volume.is-collapsed .pv-volume-controls,.pv-volume.is-hidden .pv-volume-controls{max-width:0;opacity:0;overflow:hidden;transform:translateX(8px);pointer-events:none;margin-left:-10px}
.pv-vol-toggle,.pv-vol-btn{flex:0 0 auto!important;width:42px!important;height:42px!important;border-radius:999px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;color:#fff!important;border:1px solid rgba(203,181,255,.24)!important;background:linear-gradient(180deg,rgba(38,43,58,.94),rgba(17,20,30,.94))!important;box-shadow:0 8px 16px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.035)!important;cursor:pointer!important;transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important;font-size:15px!important}
.pv-vol-toggle{font-size:20px!important;color:#dcd1ff!important;background:linear-gradient(180deg,rgba(80,61,130,.96),rgba(30,26,48,.96))!important}
.pv-vol-toggle:hover,.pv-vol-btn:hover{transform:translateY(-3px)!important;border-color:rgba(203,181,255,.58)!important;box-shadow:0 12px 22px rgba(0,0,0,.32),0 0 18px rgba(167,139,250,.22)!important}
.pv-vol-display{min-width:48px!important;text-align:center!important;color:#efeaff!important;font-weight:900!important;font-size:13px!important;font-variant-numeric:tabular-nums;text-shadow:0 0 10px rgba(203,181,255,.20)}
@media (max-width:760px){.pv-volume{right:12px!important;bottom:12px!important}.pv-vol-display{display:none}.pv-volume-controls{gap:7px}}
@media (prefers-reduced-motion:reduce){.rk-topbar,.rk-info-col>.rk-card,.rk-left-col>.rk-card,.rk-toolbar,.rk-table-wrap,.pv-volume,.rk-topbar::after{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}.rk-btn,.rk-nav-btn,.rk-rats-btn,.rk-user,.rk-brand,.rk-input,.rk-select-wrap select,.rk-league-list li,.rk-rewards li,.pv-vol-btn,.pv-volume-controls{transition:none!important}}

/* ===== Panel de sonido unificado con barra ===== */
.pv-volume{
  position:fixed!important;
  right:20px!important;
  bottom:20px!important;
  left:auto!important;
  z-index:999!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:10px!important;
  min-height:66px!important;
  width:auto!important;
  max-width:none!important;
  padding:12px 14px!important;
  border-radius:26px!important;
  background:linear-gradient(180deg,rgba(18,21,32,.92),rgba(8,10,16,.86))!important;
  border:1px solid rgba(203,181,255,.25)!important;
  box-shadow:0 16px 36px rgba(0,0,0,.42),0 0 24px rgba(124,58,237,.16),inset 0 0 0 1px rgba(255,255,255,.035)!important;
  backdrop-filter:blur(12px) saturate(130%);
  overflow:visible!important;
}
.pv-volume-controls{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  max-width:368px!important;
  opacity:1!important;
  overflow:visible!important;
  transition:max-width .26s cubic-bezier(.16,.84,.32,1),opacity .2s ease,transform .22s ease,margin .22s ease!important;
}
.pv-volume.is-collapsed .pv-volume-controls,
.pv-volume.is-hidden .pv-volume-controls{
  max-width:0!important;
  opacity:0!important;
  overflow:hidden!important;
  transform:translateX(8px)!important;
  pointer-events:none!important;
  margin-left:-10px!important;
}
.pv-vol-toggle,.pv-vol-btn{
  flex:0 0 auto!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  border:1px solid rgba(203,181,255,.24)!important;
  background:linear-gradient(180deg,rgba(38,43,58,.94),rgba(17,20,30,.94))!important;
  box-shadow:0 8px 16px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.035)!important;
  cursor:pointer!important;
  transition:transform .16s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease!important;
  font-size:15px!important;
  line-height:1!important;
}
.pv-vol-toggle{font-size:20px!important;color:#dcd1ff!important;background:linear-gradient(180deg,rgba(80,61,130,.96),rgba(30,26,48,.96))!important;}
.pv-vol-toggle:hover,.pv-vol-btn:hover{transform:translateY(-3px)!important;border-color:rgba(203,181,255,.58)!important;box-shadow:0 12px 22px rgba(0,0,0,.32),0 0 18px rgba(167,139,250,.22)!important;}
.pv-vol-toggle:active,.pv-vol-btn:active{transform:translateY(0) scale(.97)!important;}
.pv-vol-range{
  appearance:none!important;
  -webkit-appearance:none!important;
  width:150px!important;
  height:8px!important;
  border:0!important;
  border-radius:999px!important;
  outline:none!important;
  background:linear-gradient(90deg,rgba(203,181,255,.95),rgba(93,166,255,.78))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 0 14px rgba(124,58,237,.14)!important;
  cursor:pointer!important;
}
.pv-vol-range::-webkit-slider-thumb{-webkit-appearance:none!important;width:18px!important;height:18px!important;border-radius:50%!important;background:#f5f2ff!important;border:2px solid #8b5cf6!important;box-shadow:0 0 12px rgba(203,181,255,.45)!important;cursor:pointer!important;}
.pv-vol-range::-moz-range-thumb{width:18px!important;height:18px!important;border-radius:50%!important;background:#f5f2ff!important;border:2px solid #8b5cf6!important;box-shadow:0 0 12px rgba(203,181,255,.45)!important;cursor:pointer!important;}
.pv-vol-display{min-width:48px!important;text-align:center!important;color:#efeaff!important;font-weight:900!important;font-size:13px!important;font-variant-numeric:tabular-nums!important;text-shadow:0 0 10px rgba(203,181,255,.20)!important;}
@media (max-width:760px){.pv-volume{right:12px!important;bottom:12px!important;padding:10px 12px!important}.pv-vol-range{width:112px!important}.pv-vol-display{display:none!important}.pv-volume-controls{gap:7px!important}}

/* ===== Barra de volumen sin controles adicionales ===== */
.pv-volume #vol-down,.pv-volume #vol-up{display:none!important;}
.rk-btn,.rk-nav-btn,.rk-rats-btn,.rk-user,.rk-brand{position:relative;overflow:hidden;}
.rk-btn::after,.rk-nav-btn::after,.rk-rats-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.13) 48%,transparent 58%);transform:translateX(-145%);transition:transform .42s cubic-bezier(.16,.84,.32,1);pointer-events:none;}
.rk-btn:hover::after,.rk-nav-btn:hover::after,.rk-rats-btn:hover::after{transform:translateX(145%);}


/* ===== Marco del perfil superior sin recortes ===== */
.rk-topbar,
.rk-user,
.rk-user[role="link"],
.rk-user .pv-avatar-wrap,
.rk-user .pv-avatar-frame{
  overflow:visible !important;
}
.rk-user{
  isolation:isolate;
  padding:10px 14px 10px 12px;
  margin:4px 8px 4px 0;
}
.rk-user .pv-avatar-wrap.big{
  flex:0 0 54px;
  z-index:2;
}
.rk-user .rk-me-info{
  position:relative;
  z-index:3;
}

/* ===== Premios PvP sin aura animada ===== */
.rk-rewards img[src*="/frames/"],
.rk-rewards img[src*="img/frames/"],
.rk-rewards img[src*="../img/frames/"]{
  animation:none !important;
  will-change:auto !important;
}

/* Modo de rendimiento del ranking PvP.
   Durante scroll o interacción se aligeran animaciones y sombras pesadas.
   Al quedar la interfaz quieta, los efectos vuelven automáticamente. */
body.pv-ranked-motion-paused .pv-avatar-frame,
body.pv-ranked-motion-paused .avatar-frame,
body.pv-ranked-motion-paused .frame-img,
body.pv-ranked-motion-paused .frame-css,
body.pv-ranked-motion-paused .pv-player-avatar img.frame,
body.pv-ranked-motion-paused .pv-avatar-wrap > img.frame,
body.pv-ranked-motion-paused .pv-avatar-wrap.has-frame > img.frame,
body.pv-ranked-motion-paused .pv-avatar-wrap.has-frame > .frame,
body.pv-ranked-motion-paused .pv-avatar-wrap[data-frame-file] > .pv-avatar-frame,
body.pv-ranked-motion-paused .pv-avatar-wrap[data-frame-file] > .frame-img,
body.pv-ranked-motion-paused .pv-reward-frame > .pv-avatar-frame,
body.pv-ranked-motion-paused img[src*="/frames/"],
body.pv-ranked-motion-paused img[src*="img/frames/"],
body.pv-ranked-motion-paused img[src*="img%2Fframes%2F"],
body.pv-ranked-motion-paused img[src*="..%2Fimg%2Fframes%2F"],
body.pv-ranked-motion-paused .pv-avatar-wrap.frame-owner > .frame-css.owner,
body.pv-ranked-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-ranked-motion-paused .title-badge,
body.pv-ranked-motion-paused .title-badge::before,
body.pv-ranked-motion-paused .title-badge::after,
body.pv-ranked-motion-paused .pv-best-badge,
body.pv-ranked-motion-paused .pv-best-badge::before,
body.pv-ranked-motion-paused .pv-best-badge::after,
body.pv-ranked-motion-paused .anim-rank-title,
body.pv-ranked-motion-paused .rk-season-icon,
body.pv-ranked-motion-paused .rk-season h2 strong,
body.pv-ranked-motion-paused .rk-topbar::after{
  animation:none !important;
  transition:none !important;
  filter:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  will-change:auto !important;
}
body.pv-ranked-motion-paused .rk-card,
body.pv-ranked-motion-paused .rk-btn,
body.pv-ranked-motion-paused .rk-nav-btn,
body.pv-ranked-motion-paused .rk-rats-btn,
body.pv-ranked-motion-paused .rk-user,
body.pv-ranked-motion-paused select,
body.pv-ranked-motion-paused input{
  transition:none !important;
  box-shadow:none !important;
}
body.pv-ranked-motion-paused .rk-user:hover,
body.pv-ranked-motion-paused .rk-btn:hover,
body.pv-ranked-motion-paused .rk-nav-btn:hover,
body.pv-ranked-motion-paused .rk-rats-btn:hover{
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}
.rk-table tbody tr{
  content-visibility:auto;
  contain-intrinsic-size:66px;
}
.rk-table-wrap,
.rk-card,
.rk-toolbar{
  contain:layout paint style;
}


/* ===== Premios del Ranking de Ratas ===== */
.rk-rewards.rats-mode #award-fighter-item,
.rk-rewards.rats-mode #award-duelist-item,
.rk-rewards.rats-mode #award-theone-item{
  display:flex !important;
}
.rk-rewards.rats-mode #award-fighter,
.rk-rewards.rats-mode #award-duelist,
.rk-rewards.rats-mode #award-theone{
  display:block !important;
  margin-left:auto;
}
.rk-rewards.rats-mode #award-theone-item .theone-star{
  color:#ffd24d;
  text-shadow:0 0 10px rgba(255,210,77,.45);
}
.rk-rewards.rats-mode .title-badge[data-title-key="the-rat"]{
  font-size:12px !important;
}

/* ===== Móvil estable y selector personalizado ===== */
.rk-select-wrap select option,
.rk-select-wrap select optgroup{
  background:#070914;
  color:#f6f2ff;
}
.rk-select-wrap select option:checked{
  background:#111827;
  color:#ffffff;
}

@media (max-width: 900px){
  html{
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body#top{
    overflow-x:hidden;
    min-width:0;
  }
  .rk-topbar{
    position:sticky;
    top:0;
    grid-template-columns:1fr;
    justify-items:center;
    gap:7px;
    padding:8px 10px 9px;
    background:linear-gradient(180deg,rgba(7,10,18,.92),rgba(9,12,20,.76));
  }
  .rk-topbar::after{opacity:.7;}
  .rk-brand{
    grid-row:1;
    justify-self:center;
    font-size:15px;
    letter-spacing:.18em;
    line-height:1;
    padding:2px 0;
  }
  .rk-left{
    grid-row:2;
    justify-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:6px;
    max-width:100%;
  }
  .rk-logo{
    width:24px;
    height:24px;
  }
  .rk-left-title{
    font-size:11px;
    letter-spacing:.08em;
    line-height:1;
  }
  .rk-nav-btn{
    margin-left:2px;
    padding:6px 8px;
    border-radius:10px;
    font-size:10px;
    line-height:1;
    letter-spacing:.02em;
  }
  .rk-user{
    grid-row:3;
    justify-self:center;
    width:min(100%, 330px);
    max-width:100%;
    min-height:48px;
    margin:0;
    padding:6px 10px;
    gap:10px;
    border-radius:14px;
  }
  .rk-user .pv-avatar-wrap.big,
  .pv-avatar-wrap.big{
    width:42px;
    height:42px;
    flex:0 0 42px;
    margin-right:3px;
  }
  .rk-user .rk-me-info{min-width:0;}
  .rk-me-info span{
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
  }
  .rk-me-info small{
    max-width:230px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
  }

  .rk-layout{
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    margin:10px auto 86px;
    padding:0 10px;
    gap:10px;
  }
  .rk-main{order:1;width:100%;min-width:0;}
  .rk-info-col{order:2;width:100%;min-width:0;gap:10px;}
  .rk-left-col{order:3;width:100%;min-width:0;gap:10px;}
  .rk-card{
    width:100%;
    min-width:0;
    border-radius:15px;
    padding:10px;
  }
  .rk-season h2{
    left:0;
    font-size:14px;
    margin:0 0 6px;
    gap:5px;
  }
  .rk-p{font-size:11px;}
  .rk-howto h2,
  .rk-league-info h2,
  .rk-rewards h2{
    font-size:13px;
    margin-bottom:6px;
  }
  .rk-howto p{
    font-size:11px;
    line-height:1.35;
    margin:5px 0;
  }
  .rk-rats-btn{
    width:100%;
    margin-top:6px;
    min-height:36px;
    padding:8px 10px;
    border-radius:13px;
    font-size:11px;
    letter-spacing:.08em;
  }
  .pv-season-picker{margin-top:8px;gap:7px;}
  .pv-season-toggle{min-height:34px;padding:8px 12px;font-size:10px;}
  .pv-season-panel{padding:9px;border-radius:14px;}
  .pv-season-select{min-height:36px;font-size:16px;}

  .rk-toolbar{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "search search"
      "chip size";
    gap:7px;
    margin-bottom:8px;
    padding:9px;
    border-radius:15px;
    width:100%;
    min-width:0;
  }
  .rk-input{
    grid-area:search;
    width:100%;
    min-width:0;
    height:36px;
    border-radius:11px;
    padding:0 10px;
    font-size:16px;
  }
  .rk-league-filter-chip{
    grid-area:chip;
    width:100%;
    min-width:0;
    max-width:none;
    min-height:32px;
    padding:0 7px 0 10px;
    font-size:10px;
    justify-content:center;
  }
  .rk-league-filter-chip b{
    width:20px;
    height:20px;
    font-size:14px;
  }
  .rk-select-wrap{
    grid-area:size;
    gap:5px;
    justify-content:flex-end;
    min-width:108px;
  }
  .rk-select-wrap span{
    font-size:9px;
    letter-spacing:.05em;
    text-transform:uppercase;
  }
  .rk-select-wrap select{
    height:32px;
    min-width:52px;
    border-radius:10px;
    padding:0 7px;
    font-size:16px;
    background:#070914;
    color:#fff;
  }
  .rk-league-filter-chip[hidden] + .rk-select-wrap{justify-self:end;}

  .rk-table-wrap{
    width:100%;
    min-width:0;
    overflow:hidden;
    border-radius:15px;
    background:linear-gradient(180deg,rgba(7,10,18,.82),rgba(7,10,18,.66));
  }
  .rk-table-wrap::after{
    content:"";
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    width:20px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(6,8,14,.72));
    opacity:.75;
  }
  .rk-table-scroll{
    width:100%;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .rk-table-scroll::-webkit-scrollbar{display:none;}
  .rk-table{
    width:max-content;
    min-width:560px;
    table-layout:auto;
  }
  .rk-table thead th{
    padding:8px 9px;
    font-size:10px;
    letter-spacing:.04em;
    white-space:nowrap;
  }
  .rk-table tbody td{
    padding:8px 9px;
    font-size:11px;
    white-space:nowrap;
  }
  .rk-table th:nth-child(1),
  .rk-table td:nth-child(1){
    width:42px;
    text-align:center;
    padding-left:8px;
    padding-right:8px;
  }
  .rk-table th:nth-child(2),
  .rk-table td:nth-child(2){
    width:208px;
  }
  .rk-table th:nth-child(3),
  .rk-table td:nth-child(3){
    width:170px;
  }
  .rk-table th:nth-child(4),
  .rk-table td:nth-child(4),
  .rk-table th:nth-child(5),
  .rk-table td:nth-child(5),
  .rk-table th:nth-child(6),
  .rk-table td:nth-child(6){
    width:46px;
    text-align:center;
  }
  .rk-player{
    gap:10px;
    min-width:0;
  }
  .rk-player .pv-avatar-wrap{
    width:38px !important;
    height:38px !important;
    flex:0 0 38px;
  }
  .rk-name{
    max-width:138px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11.5px;
  }
  .rk-handle{
    max-width:138px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
  }
  .rk-player .title-badge{
    max-width:138px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9px;
  }
  .rk-league-cell{
    gap:7px;
  }
  .rank-logo{
    width:18px;
    height:18px;
    flex:0 0 18px;
  }
  .rank-badge{
    padding:5px 9px;
    font-size:10px;
    gap:5px;
    max-width:136px;
    justify-content:center;
  }
  .rk-pager{
    gap:7px;
    padding:8px;
  }
  .rk-btn-pill{
    padding:8px 10px;
    font-size:10px;
  }
  .rk-page-info{
    font-size:10px;
    min-width:80px;
    text-align:center;
  }

  .rk-league-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px;
  }
  .rk-league-list li{
    min-width:0;
    padding:7px 8px;
    border-radius:10px;
    gap:5px;
  }
  .rk-league-list img{width:20px;height:20px;margin-right:3px;}
  .rk-league-list span{font-size:10px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rk-league-list small{font-size:8px;white-space:nowrap;}
  .rk-rewards ul{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
  }
  .rk-rewards li{
    padding:7px 8px;
    border-radius:10px;
    min-width:0;
    gap:7px;
  }
  .rk-rewards li > strong{min-width:30px;font-size:10px;}
  .rk-rewards .title-badge{font-size:10px;min-width:0;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .rk-rewards img{width:24px;height:24px;}

  .pv-volume{
    right:10px!important;
    bottom:10px!important;
    padding:8px 9px!important;
    min-height:0!important;
    border-radius:20px!important;
  }
  .pv-vol-toggle,.pv-vol-btn{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    min-height:36px!important;
  }
  .pv-vol-range{width:100px!important;}
}

@media (max-width: 900px) and (orientation: landscape){
  .rk-topbar{
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    grid-template-areas:"left brand user";
    padding:5px 9px;
    gap:8px;
    min-height:58px;
  }
  .rk-brand{grid-area:brand;font-size:15px;letter-spacing:.17em;}
  .rk-left{grid-area:left;justify-self:start;flex-wrap:nowrap;gap:6px;}
  .rk-logo{width:24px;height:24px;}
  .rk-left-title{font-size:10px;}
  .rk-nav-btn{padding:6px 7px;font-size:9px;}
  .rk-user{
    grid-area:user;
    justify-self:end;
    width:auto;
    max-width:235px;
    min-height:42px;
    padding:5px 8px;
    gap:7px;
  }
  .rk-user .pv-avatar-wrap.big,
  .pv-avatar-wrap.big{
    width:36px;
    height:36px;
    flex-basis:36px;
  }
  .rk-me-info span{font-size:11px;max-width:152px;}
  .rk-me-info small{font-size:9px;max-width:152px;}

  .rk-layout{
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    grid-template-areas:
      "info main"
      "side main";
    align-items:start;
    gap:9px;
    margin:8px auto 72px;
    padding:0 9px;
  }
  .rk-info-col{grid-area:info;order:0;gap:8px;}
  .rk-main{grid-area:main;order:0;}
  .rk-left-col{grid-area:side;order:0;gap:8px;}
  .rk-card{padding:8px;border-radius:13px;}
  .rk-season h2{font-size:11px;margin-bottom:4px;}
  .rk-p{font-size:9px;line-height:1.25;}
  .rk-howto h2,.rk-league-info h2,.rk-rewards h2{font-size:10px;margin-bottom:5px;}
  .rk-howto p{font-size:8.5px;line-height:1.25;margin:4px 0;}
  .rk-rats-btn{min-height:30px;padding:6px 8px;font-size:8.5px;border-radius:10px;}
  .pv-season-picker{margin-top:6px;gap:5px;}
  .pv-season-toggle{min-height:30px;padding:6px 8px;font-size:8px;}
  .pv-season-panel{padding:7px;border-radius:12px;}
  .pv-season-select{min-height:32px;font-size:16px;}

  .rk-toolbar{
    grid-template-columns:minmax(140px,1fr) minmax(118px,auto) auto;
    grid-template-areas:"search chip size";
    padding:7px;
    gap:7px;
    margin-bottom:7px;
    border-radius:13px;
  }
  .rk-input{height:32px;font-size:16px;border-radius:10px;}
  .rk-league-filter-chip{min-height:30px;font-size:8.5px;padding:0 6px 0 8px;}
  .rk-select-wrap{min-width:94px;}
  .rk-select-wrap span{font-size:8px;}
  .rk-select-wrap select{height:30px;min-width:48px;font-size:16px;border-radius:9px;}
  .rk-table{min-width:540px;}
  .rk-table thead th{padding:7px 8px;font-size:9px;}
  .rk-table tbody td{padding:7px 8px;font-size:10px;}
  .rk-table th:nth-child(1),.rk-table td:nth-child(1){width:38px;}
  .rk-table th:nth-child(2),.rk-table td:nth-child(2){width:195px;}
  .rk-table th:nth-child(3),.rk-table td:nth-child(3){width:160px;}
  .rk-player .pv-avatar-wrap{width:34px!important;height:34px!important;flex-basis:34px;}
  .rk-name{max-width:130px;font-size:10px;}
  .rk-handle,.rk-player .title-badge{max-width:130px;font-size:8.5px;}
  .rank-badge{font-size:9px;padding:4px 8px;max-width:130px;}
  .rank-logo{width:17px;height:17px;flex-basis:17px;}
  .rk-pager{padding:6px;gap:6px;}
  .rk-btn-pill{padding:7px 9px;font-size:9px;}
  .rk-page-info{font-size:9px;min-width:72px;}

  .rk-league-list{grid-template-columns:1fr;gap:5px;}
  .rk-league-list li{padding:6px 7px;}
  .rk-league-list img{width:18px;height:18px;}
  .rk-league-list span{font-size:8.5px;}
  .rk-league-list small{font-size:7px;}
  .rk-rewards li{padding:6px 7px;gap:5px;}
  .rk-rewards li > strong{min-width:24px;font-size:8px;}
  .rk-rewards .title-badge{font-size:8px;max-width:110px;}
  .rk-rewards img{width:20px;height:20px;}
}

@media (max-width: 430px) and (orientation: portrait){
  .rk-layout{padding:0 8px;}
  .rk-brand{font-size:14px;}
  .rk-toolbar{
    grid-template-columns:1fr;
    grid-template-areas:"search" "chip" "size";
  }
  .rk-select-wrap{justify-content:center;width:100%;}
  .rk-table{min-width:548px;}
  .rk-league-list{grid-template-columns:1fr 1fr;}
}

/* ===== Barra superior, orden móvil y modal ===== */
.rk-table-title{
  position:relative;
  padding:18px 18px 12px;
  text-align:center;
  font-weight:1000;
  font-size:24px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#d8c7ff;
  text-shadow:0 0 12px rgba(167,139,250,.32),0 0 28px rgba(124,58,237,.18);
  background:
    radial-gradient(circle at 50% 0%,rgba(167,139,250,.18),transparent 58%),
    linear-gradient(90deg,transparent,rgba(203,181,255,.10),transparent);
  border-bottom:1px solid rgba(203,181,255,.12);
  isolation:isolate;
}
.rk-table-title::before,
.rk-table-title::after{
  content:"";
  position:absolute;
  top:50%;
  width:min(18%,150px);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(203,181,255,.72));
  pointer-events:none;
}
.rk-table-title::before{left:18px;transform:translateY(-50%)}
.rk-table-title::after{right:18px;transform:translateY(-50%) scaleX(-1)}
.rk-table-title[data-rank-mode="pvp"]{
  color:#f1d9ff;
  text-shadow:
    0 0 10px rgba(216,180,254,.52),
    0 0 24px rgba(168,85,247,.34),
    0 0 42px rgba(124,58,237,.20);
  background:
    radial-gradient(circle at 50% 0%,rgba(192,132,252,.32),transparent 58%),
    linear-gradient(90deg,transparent,rgba(168,85,247,.18),rgba(217,70,239,.16),rgba(168,85,247,.18),transparent);
  border-bottom-color:rgba(192,132,252,.24);
}
.rk-table-title[data-rank-mode="pvp"]::before,
.rk-table-title[data-rank-mode="pvp"]::after{
  background:linear-gradient(90deg,transparent,rgba(216,180,254,.82),rgba(168,85,247,.58));
}
.rk-table-title[data-rank-mode="pvp"]{
  box-shadow:inset 0 -1px 0 rgba(216,180,254,.10);
}
.rk-table-title[data-rank-mode="ratas"]{
  color:#ff7a7a;
  text-shadow:0 0 12px rgba(255,76,76,.36),0 0 30px rgba(180,20,20,.22);
  background:
    radial-gradient(circle at 50% 0%,rgba(255,78,78,.18),transparent 58%),
    linear-gradient(90deg,transparent,rgba(255,92,92,.10),transparent);
  border-bottom-color:rgba(255,92,92,.18);
}
.rk-table-title[data-rank-mode="ratas"]::before,
.rk-table-title[data-rank-mode="ratas"]::after{background:linear-gradient(90deg,transparent,rgba(255,94,94,.76))}

.rk-table-actions{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-bottom:1px solid rgba(255,255,255,.11);
  background:linear-gradient(180deg,rgba(5,8,15,.42),rgba(5,8,15,.22));
}
.rk-table-actions .rk-toolbar{
  position:static;
  top:auto;
  z-index:auto;
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none;
  animation:none;
  contain:none;
  overflow:visible;
}
.rk-table-actions .rk-toolbar::before{display:none;content:none}
.rk-table-actions .rk-input{max-width:none;min-width:220px;flex:1 1 300px;height:40px;background:rgba(0,0,0,.36)}
.rk-table-actions .rk-select-wrap{flex:0 0 auto;white-space:nowrap}
.rk-table-actions .rk-pager{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:0;
  margin:0;
  white-space:nowrap;
}
.rk-table-actions .rk-page-info{min-width:96px;text-align:center;color:#dfe7ff;font-weight:900;font-size:12px}
.rk-table-actions .rk-btn-pill{padding:9px 12px;font-size:12px}
.rk-table thead th{
  color:#e7edff;
  opacity:1;
  text-shadow:0 1px 8px rgba(0,0,0,.46);
}
.rk-table th:nth-child(3),
.rk-table th:nth-child(4),
.rk-table th:nth-child(5),
.rk-table th:nth-child(6){text-align:center}
.rk-table td:nth-child(4),
.rk-table td:nth-child(5),
.rk-table td:nth-child(6){text-align:center;font-variant-numeric:tabular-nums}

.rk-frame-viewer{padding:18px;cursor:zoom-out}
.rk-frame-box{
  max-width:min(86vw,520px);
  max-height:min(86vh,620px);
  padding:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 50% 18%,rgba(203,181,255,.14),rgba(7,9,15,.82) 64%);
  box-shadow:0 24px 80px rgba(0,0,0,.66),inset 0 0 0 1px rgba(255,255,255,.04);
  cursor:default;
}
.rk-frame-box img{display:block;max-width:100%;max-height:calc(86vh - 44px);object-fit:contain}

@media (max-width:900px){
  .rk-table-title{
    padding:11px 12px 9px;
    font-size:16px;
    letter-spacing:.12em;
  }
  .rk-table-title::before,.rk-table-title::after{width:15%;}
  .rk-table-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:8px;
  }
  .rk-table-actions .rk-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(92px,auto);
    grid-template-areas:"search size" "chip chip";
    gap:7px;
    width:100%;
  }
  .rk-table-actions .rk-input{
    grid-area:search;
    min-width:0;
    width:100%;
    height:34px;
    font-size:16px;
    border-radius:11px;
  }
  .rk-table-actions .rk-select-wrap{grid-area:size;justify-content:flex-end;min-width:0;gap:5px;}
  .rk-table-actions .rk-select-wrap span{font-size:8.5px;letter-spacing:.05em;text-transform:uppercase;}
  .rk-table-actions .rk-select-wrap select{height:34px;min-width:52px;border-radius:10px;font-size:16px;background:#070914;color:#fff;}
  .rk-table-actions .rk-league-filter-chip{grid-area:chip;width:100%;max-width:none;min-height:30px;font-size:9px;justify-content:center;}
  .rk-table-actions .rk-pager{justify-content:center;gap:6px;}
  .rk-table-actions .rk-btn-pill{padding:7px 9px;font-size:9px;}
  .rk-table-actions .rk-page-info{min-width:76px;font-size:9px;}
  .rk-table thead th{font-size:10px;color:#eef3ff;background:rgba(11,15,25,.96)}
  .rk-table th:nth-child(3),.rk-table td:nth-child(3){text-align:center;}
  .rk-frame-box{max-width:86vw;max-height:82vh;padding:10px;border-radius:20px;}
  .rk-frame-box img{max-height:calc(82vh - 30px)}
  .rk-rewards{overflow:visible !important;}
  .rk-rewards li{overflow:visible;}
  .rk-rewards .title-badge{line-height:1.35;overflow:visible;text-overflow:clip;}
}

@media (max-width:900px) and (orientation:portrait){
  .rk-topbar{gap:6px;padding:7px 9px 8px;}
  .rk-brand{grid-row:1;font-size:15px;letter-spacing:.18em;}
  .rk-left{grid-row:2;gap:7px;}
  .rk-left .rk-nav-btn{display:none;}
  .rk-logo{width:24px;height:24px;}
  .rk-left-title{font-size:12px;letter-spacing:.10em;}
  .rk-user{grid-row:3;min-height:46px;padding:6px 10px;}
  .rk-layout{display:flex;flex-direction:column;gap:10px;margin:10px auto 82px;padding:0 10px;}
  .rk-info-col,.rk-left-col{display:contents;}
  .rk-season{order:1;}
  .rk-league-info{order:2;}
  .rk-howto{order:3;padding:0;background:transparent !important;border:0;box-shadow:none !important;overflow:visible !important;}
  .rk-howto::before{display:none;content:none;}
  .rk-howto h2,.rk-howto p{display:none;}
  .rk-howto .rk-rats-btn{margin:0;width:100%;min-height:38px;font-size:11px;}
  .rk-main{order:4;width:100%;min-width:0;}
  .rk-rewards{order:5;}
  .rk-league-list{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rk-table{min-width:560px;}
  .rk-table th:nth-child(2),.rk-table td:nth-child(2){width:210px;}
  .rk-table th:nth-child(3),.rk-table td:nth-child(3){width:150px;}
  .rk-table th:nth-child(4),.rk-table td:nth-child(4),
  .rk-table th:nth-child(5),.rk-table td:nth-child(5),
  .rk-table th:nth-child(6),.rk-table td:nth-child(6){width:50px;}
}

@media (max-width:900px) and (orientation:landscape){
  .rk-table-title{font-size:13px;padding:8px 10px 7px;letter-spacing:.12em;}
  .rk-table-actions{padding:6px;gap:6px;}
  .rk-table-actions .rk-toolbar{
    grid-template-columns:minmax(132px,1fr) minmax(106px,auto) auto;
    grid-template-areas:"search chip size";
    gap:6px;
  }
  .rk-table-actions .rk-input{height:30px;font-size:16px;}
  .rk-table-actions .rk-select-wrap span{font-size:7.5px;}
  .rk-table-actions .rk-select-wrap select{height:30px;font-size:16px;}
  .rk-table-actions .rk-league-filter-chip{min-height:30px;font-size:8px;}
  .rk-table-actions .rk-pager{gap:5px;}
  .rk-table-actions .rk-btn-pill{padding:6px 8px;font-size:8px;}
  .rk-table-actions .rk-page-info{font-size:8px;min-width:66px;}
  .rk-table thead th{font-size:10px;color:#f1f5ff;padding:7px 8px;}
  .rk-table{min-width:550px;}
  .rk-table th:nth-child(3),.rk-table td:nth-child(3){width:150px;text-align:center;}
  .rk-rewards{overflow:visible !important;}
  .rk-rewards li{min-height:32px;overflow:visible;align-items:center;}
  .rk-rewards .title-badge{font-size:8.5px;line-height:1.45;max-width:128px;overflow:visible;text-overflow:clip;white-space:nowrap;}
  .rk-rewards img{width:22px;height:22px;}
  .rk-frame-box{max-width:min(70vw,430px);max-height:80vh;padding:9px;border-radius:18px;}
  .rk-frame-box img{max-height:calc(80vh - 26px);}
}

/* ===== Vista previa limpia y tabla vertical compacta ===== */
.rk-frame-viewer{
  padding:28px;
  cursor:zoom-out;
}
.rk-frame-box{
  width:min(88vw,860px);
  height:min(88vh,860px);
  max-width:min(88vw,860px);
  max-height:min(88vh,860px);
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:grid;
  place-items:center;
  cursor:default;
}
.rk-frame-box img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:drop-shadow(0 24px 60px rgba(0,0,0,.58));
}

@media (max-width:900px){
  .rk-frame-viewer{
    padding:14px 18px;
    overflow:hidden;
  }
  .rk-frame-box{
    width:min(76vh,340px);
    height:min(76vh,340px);
    max-width:calc(100vw - 36px);
    max-height:calc(100vh - 36px);
  }
}

@media (max-width:900px) and (orientation:portrait){
  .rk-table-wrap::after{
    width:8px;
    opacity:.28;
  }
  .rk-table-scroll{
    scrollbar-width:none;
  }
  .rk-table-scroll::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
  }
  .rk-table{
    width:max(100%,390px);
    min-width:390px;
    table-layout:fixed;
  }
  .rk-table thead th{
    padding:6px 4px;
    font-size:8.2px;
    letter-spacing:.025em;
  }
  .rk-table tbody td{
    padding:5px 4px;
    font-size:9px;
  }
  .rk-table th:nth-child(1),
  .rk-table td:nth-child(1){
    width:26px;
    padding-left:3px;
    padding-right:3px;
  }
  .rk-table th:nth-child(2),
  .rk-table td:nth-child(2){
    width:150px;
  }
  .rk-table th:nth-child(3),
  .rk-table td:nth-child(3){
    width:100px;
  }
  .rk-table th:nth-child(4),
  .rk-table td:nth-child(4){
    width:38px;
  }
  .rk-table th:nth-child(5),
  .rk-table td:nth-child(5),
  .rk-table th:nth-child(6),
  .rk-table td:nth-child(6){
    width:31px;
  }
  .rk-player{
    gap:6px;
  }
  .rk-player > div{
    padding-left:1px;
    min-width:0;
  }
  .rk-player .pv-avatar-wrap{
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
  }
  .rk-name{
    max-width:104px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9.4px;
    line-height:1.05;
  }
  .rk-handle,
  .rk-player .title-badge{
    max-width:104px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:7.7px;
    line-height:1.08;
  }
  .rk-league-cell{
    gap:4px;
    min-width:0;
    justify-content:flex-start;
  }
  .rank-logo{
    width:15px;
    height:15px;
    flex:0 0 15px;
    box-shadow:0 0 0 1px rgba(255,255,255,.14),0 1px 4px rgba(0,0,0,.42);
  }
  .rank-badge{
    max-width:76px;
    min-width:0;
    padding:3px 5px;
    border-radius:999px;
    gap:3px;
    justify-content:center;
    font-size:7.7px;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .rk-table td:nth-child(4),
  .rk-table td:nth-child(5),
  .rk-table td:nth-child(6){
    font-size:9px;
    font-weight:900;
  }
}

@media (max-width:430px) and (orientation:portrait){
  .rk-table{
    width:max(100%,374px);
    min-width:374px;
  }
  .rk-table th:nth-child(2),
  .rk-table td:nth-child(2){width:145px;}
  .rk-table th:nth-child(3),
  .rk-table td:nth-child(3){width:95px;}
  .rk-table th:nth-child(4),
  .rk-table td:nth-child(4){width:36px;}
  .rk-table th:nth-child(5),
  .rk-table td:nth-child(5),
  .rk-table th:nth-child(6),
  .rk-table td:nth-child(6){width:30px;}
  .rk-name{max-width:99px;font-size:9px;}
  .rk-handle,
  .rk-player .title-badge{max-width:99px;font-size:7.3px;}
  .rank-badge{max-width:72px;font-size:7.2px;padding-inline:4px;}
}

@media (max-width:900px) and (orientation:landscape){
  .rk-frame-box{
    width:min(72vh,320px);
    height:min(72vh,320px);
    max-width:calc(100vw - 36px);
    max-height:calc(100vh - 36px);
  }
}

/* ===== Tabla vertical y logo de liga centrado ===== */
.rank-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background-position:52% 50%;
  background-size:76% 76%;
}

@media (max-width:900px) and (orientation:portrait){
  .rk-table-scroll{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .rk-table-scroll::-webkit-scrollbar{display:none;width:0;height:0;}
  .rk-table{
    width:100%;
    min-width:365px;
    table-layout:fixed;
  }
  .rk-table thead th{
    padding:6px 3px;
    font-size:8.2px;
    line-height:1;
    letter-spacing:.018em;
  }
  .rk-table tbody td{
    padding:8px 3px;
    font-size:9px;
    line-height:1.05;
    vertical-align:middle;
  }
  .rk-table th:nth-child(1),
  .rk-table td:nth-child(1){
    width:23px;
    padding-left:2px;
    padding-right:2px;
    text-align:center;
  }
  .rk-table th:nth-child(2),
  .rk-table td:nth-child(2){width:140px;}
  .rk-table th:nth-child(3),
  .rk-table td:nth-child(3){width:98px;}
  .rk-table th:nth-child(4),
  .rk-table td:nth-child(4){width:35px;}
  .rk-table th:nth-child(5),
  .rk-table td:nth-child(5),
  .rk-table th:nth-child(6),
  .rk-table td:nth-child(6){width:27px;}

  .rk-player{
    gap:6px;
    min-width:0;
    align-items:center;
  }
  .rk-player > div{
    min-width:0;
    padding-left:1px;
  }
  .rk-player .pv-avatar-wrap{
    width:31px !important;
    height:31px !important;
    flex:0 0 31px !important;
    margin-block:3px;
  }
  .rk-table .pv-avatar-frame{
    width:142%;
    height:142%;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.36));
  }
  .rk-name{
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    line-height:1.05;
  }
  .rk-handle,
  .rk-player .rk-title-badge,
  .rk-player .title-badge{
    max-width:100px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:6.9px;
    letter-spacing:.04em;
    padding:1px 3px;
    line-height:1.04;
    border-radius:5px;
    gap:.16rem;
    transform-origin:left center;
  }
  .rk-player .title-badge::before,
  .rk-player .title-badge::after{
    font-size:.82em;
  }
  .rk-league-cell{
    gap:4px;
    min-width:0;
    justify-content:flex-start;
    transform:translateX(-2px);
  }
  .rank-logo{
    width:17px;
    height:17px;
    flex:0 0 17px;
    background-position:52% 50%;
    background-size:78% 78%;
    box-shadow:0 0 0 1px rgba(255,255,255,.14),0 1px 4px rgba(0,0,0,.40);
  }
  .rank-badge{
    max-width:74px;
    min-width:0;
    padding:3px 5px;
    border-radius:999px;
    gap:2px;
    justify-content:center;
    font-size:7.7px;
    line-height:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .rk-table td:nth-child(4),
  .rk-table td:nth-child(5),
  .rk-table td:nth-child(6){
    font-size:9.2px;
    font-weight:900;
    text-align:center;
  }
}

@media (max-width:430px) and (orientation:portrait){
  .rk-table{
    width:100%;
    min-width:365px;
  }
  .rk-table th:nth-child(1),
  .rk-table td:nth-child(1){width:23px;}
  .rk-table th:nth-child(2),
  .rk-table td:nth-child(2){width:140px;}
  .rk-table th:nth-child(3),
  .rk-table td:nth-child(3){width:98px;}
  .rk-table th:nth-child(4),
  .rk-table td:nth-child(4){width:35px;}
  .rk-table th:nth-child(5),
  .rk-table td:nth-child(5),
  .rk-table th:nth-child(6),
  .rk-table td:nth-child(6){width:27px;}
  .rk-name{max-width:100px;font-size:10px;}
  .rk-handle,
  .rk-player .rk-title-badge,
  .rk-player .title-badge{max-width:100px;font-size:6.9px;}
  .rank-badge{max-width:74px;font-size:7.7px;padding-inline:5px;}
}

/* ===== Ajuste fino de tabla vertical ===== */
@media (max-width:900px) and (orientation:portrait){
  .rk-table .rk-player .pv-avatar-frame{
    width:184%;
    height:184%;
    filter:drop-shadow(0 5px 11px rgba(0,0,0,.44));
  }
  .rk-table .rk-player > div{
    transform:translateX(4px);
  }
}

/* ===== Centrado de logos de liga en escritorio ===== */
@media (min-width:901px){
  .rk-table .rk-league-cell .rank-logo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    flex:0 0 22px;
    background-position:50% 50%;
    background-size:74% 74%;
    transform:none;
  }
}


/* ===== Barra superior para móvil vertical =====
   Escritorio, horizontal y tabla conservan su distribución. */
@media (max-width:900px) and (orientation:portrait){
  .rk-topbar{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "left"
      "user";
    justify-items:stretch;
    align-items:center;
    gap:7px;
    padding:8px 10px 10px;
    overflow:visible;
    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-brand{
    grid-area:brand;
    display:flex;
    align-items:center;
    justify-content:center;
    justify-self:center;
    min-width:0;
    padding-top:2px;
    text-align:center;
    font-size:17px;
    line-height:1;
    letter-spacing:.18em;
  }

  .rk-left{
    grid-area:left;
    justify-self:stretch;
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    justify-content:stretch;
    gap:8px;
    max-width:100%;
    overflow:visible;
  }

  .rk-logo{
    width:28px;
    height:28px;
    flex:0 0 28px;
  }

  .rk-left-title{
    min-width:0;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    line-height:1.05;
    letter-spacing:.06em;
  }

  .rk-left .rk-nav-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    justify-self:end;
    margin-left:0;
    padding:7px 9px;
    border-radius:999px;
    font-size:10px;
    line-height:1;
    letter-spacing:.04em;
    white-space:nowrap;
  }

  .rk-user,
  .rk-topbar .rk-user#userPanel{
    grid-area:user;
    justify-self:stretch;
    width:100%;
    max-width:none;
    min-height:58px;
    margin:0;
    padding:8px 14px 8px 12px;
    gap:14px;
    border-radius:18px;
    justify-content:flex-start;
    overflow:visible;
  }

  .rk-topbar .rk-user .pv-avatar-wrap.big,
  .rk-user .pv-avatar-wrap.big{
    width:45px;
    height:45px;
    flex:0 0 45px;
    margin-right:5px;
  }

  .rk-topbar .rk-user .pv-avatar-frame,
  .rk-user .pv-avatar-frame{
    width:184%;
    height:184%;
  }

  .rk-topbar .rk-user .rk-me-info,
  .rk-me-info{
    min-width:0;
    padding-left:2px;
    margin-left:0;
  }

  .rk-me-info span,
  .rk-me-info small{
    max-width:260px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .rk-me-info span{font-size:13px;}
  .rk-me-info small{font-size:11px;}
}

/* Adaptación XL del ranking PvP.
   La maqueta base se mantiene y el escalado aumenta solo en resoluciones grandes. */
@media (min-width: 1981px) and (min-height: 1081px){
  :root{
    --pv-ranked-xl:1.12;
    --pv-ranked-xl-soft:1.08;
  }

  .rk-topbar{
    padding:calc(12px * var(--pv-ranked-xl-soft)) calc(18px * var(--pv-ranked-xl-soft)) !important;
    gap:calc(14px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-logo{
    width:calc(34px * var(--pv-ranked-xl-soft)) !important;
    height:calc(34px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-left-title{font-size:calc(16px * var(--pv-ranked-xl-soft)) !important;}
  .rk-nav-btn{
    padding:calc(8px * var(--pv-ranked-xl-soft)) calc(12px * var(--pv-ranked-xl-soft)) !important;
    border-radius:calc(12px * var(--pv-ranked-xl-soft)) !important;
    font-size:calc(14px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-brand{font-size:calc(20px * var(--pv-ranked-xl-soft)) !important;}
  .rk-user{
    max-width:calc(340px * var(--pv-ranked-xl-soft)) !important;
    gap:calc(14px * var(--pv-ranked-xl-soft)) !important;
    padding:calc(8px * var(--pv-ranked-xl-soft)) calc(10px * var(--pv-ranked-xl-soft)) !important;
    border-radius:calc(14px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-user .pv-avatar-wrap.big{
    width:calc(54px * var(--pv-ranked-xl-soft)) !important;
    height:calc(54px * var(--pv-ranked-xl-soft)) !important;
    flex-basis:calc(54px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-me-info span{font-size:calc(18px * var(--pv-ranked-xl-soft)) !important;}
  .rk-me-info small{font-size:calc(15px * var(--pv-ranked-xl-soft)) !important;}

  .rk-layout{
    max-width:calc(1680px * var(--pv-ranked-xl)) !important;
    grid-template-columns:calc(320px * var(--pv-ranked-xl-soft)) minmax(calc(840px * var(--pv-ranked-xl-soft)), 1fr) calc(360px * var(--pv-ranked-xl-soft)) !important;
    gap:calc(24px * var(--pv-ranked-xl-soft)) !important;
    margin:calc(24px * var(--pv-ranked-xl-soft)) auto !important;
    padding:0 calc(18px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-info-col,
  .rk-left-col{gap:calc(14px * var(--pv-ranked-xl-soft)) !important;}
  .rk-card{
    border-radius:calc(16px * var(--pv-ranked-xl-soft)) !important;
    padding:calc(15px * var(--pv-ranked-xl-soft)) calc(13px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-howto h2,
  .rk-league-info h2{font-size:calc(18px * var(--pv-ranked-xl-soft)) !important;}
  .rk-howto p{font-size:calc(14px * var(--pv-ranked-xl-soft)) !important;}
  .rk-league-list{gap:calc(6px * var(--pv-ranked-xl-soft)) !important;}
  .rk-league-list li,
  .rk-rewards li{
    padding:calc(8px * var(--pv-ranked-xl-soft)) calc(10px * var(--pv-ranked-xl-soft)) !important;
    border-radius:calc(10px * var(--pv-ranked-xl-soft)) !important;
    font-size:calc(14px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-league-list img,
  .rk-rewards img{
    width:calc(28px * var(--pv-ranked-xl-soft)) !important;
    height:calc(28px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-league-list small{font-size:calc(12px * var(--pv-ranked-xl-soft)) !important;}
  .rk-rewards h2{font-size:calc(17px * var(--pv-ranked-xl-soft)) !important;}
  .rk-rewards .title-badge{font-size:calc(15px * var(--pv-ranked-xl-soft)) !important;}

  .rk-toolbar{
    gap:calc(12px * var(--pv-ranked-xl-soft)) !important;
    margin-bottom:calc(12px * var(--pv-ranked-xl-soft)) !important;
    padding:calc(10px * var(--pv-ranked-xl-soft)) !important;
    border-radius:calc(16px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-input,
  .rk-select-wrap select,
  .rk-league-filter-chip{
    min-height:calc(38px * var(--pv-ranked-xl-soft)) !important;
    font-size:calc(13px * var(--pv-ranked-xl-soft)) !important;
    border-radius:calc(12px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-table-wrap{border-radius:calc(16px * var(--pv-ranked-xl-soft)) !important;}
  .rk-table thead th{
    padding:calc(12px * var(--pv-ranked-xl-soft)) calc(14px * var(--pv-ranked-xl-soft)) !important;
    font-size:calc(13px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-table tbody td{
    padding:calc(12px * var(--pv-ranked-xl-soft)) calc(14px * var(--pv-ranked-xl-soft)) !important;
    font-size:calc(14px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-player{gap:calc(10px * var(--pv-ranked-xl-soft)) !important;}
  .rk-player .pv-avatar-wrap{
    width:calc(46px * var(--pv-ranked-xl-soft)) !important;
    height:calc(46px * var(--pv-ranked-xl-soft)) !important;
    flex-basis:calc(46px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-name{font-size:calc(15px * var(--pv-ranked-xl-soft)) !important;}
  .rk-handle,
  .rk-player .rk-title-badge,
  .rk-player .title-badge{
    font-size:calc(11px * var(--pv-ranked-xl-soft)) !important;
    max-width:calc(190px * var(--pv-ranked-xl-soft)) !important;
  }
  .rk-league-cell{gap:calc(10px * var(--pv-ranked-xl-soft)) !important;}
  .rk-table .rk-league-cell .rank-logo,
  .rank-logo{
    width:calc(22px * var(--pv-ranked-xl-soft)) !important;
    height:calc(22px * var(--pv-ranked-xl-soft)) !important;
    flex-basis:calc(22px * var(--pv-ranked-xl-soft)) !important;
  }
  .rank-badge{
    font-size:calc(12px * var(--pv-ranked-xl-soft)) !important;
    padding:calc(4px * var(--pv-ranked-xl-soft)) calc(9px * var(--pv-ranked-xl-soft)) !important;
  }

  @keyframes crownFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
  @keyframes emojiBob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-1px,0)}}
  @keyframes swordSwing{0%,100%{transform:rotate(-7deg) translate3d(0,0,0)}50%{transform:rotate(6deg) translate3d(0,-2px,0)}}
  @keyframes twinkle{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-1px,0) scale(1.045)}}
  @keyframes theOneCrownFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2px,0)}}
  @keyframes pvBestAura{0%,100%{transform:translate3d(0,0,0);opacity:.55}50%{transform:translate3d(0,-2px,0);opacity:.75}}
  @keyframes pvBestSpark{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.9}50%{transform:translate3d(0,-1px,0) scale(1.045);opacity:1}}

  .title-badge,
  .title-badge::before,
  .title-badge::after,
  .rk-title-badge,
  .rk-title-badge::before,
  .rk-title-badge::after{
    backface-visibility:hidden !important;
    -webkit-backface-visibility:hidden !important;
    -webkit-font-smoothing:antialiased;
    transform-origin:50% 50% !important;
    will-change:transform, opacity;
  }
}
@media (min-width: 2180px) and (min-height: 1081px){:root{--pv-ranked-xl:1.20;--pv-ranked-xl-soft:1.12;}}
@media (min-width: 2380px) and (min-height: 1081px){:root{--pv-ranked-xl:1.30;--pv-ranked-xl-soft:1.18;}}
@media (min-width: 2580px) and (min-height: 1081px){:root{--pv-ranked-xl:1.40;--pv-ranked-xl-soft:1.24;}}



/* Separación estable entre usuario y avatar en escritorio y XL. */
@media (min-width:901px){
  .rk-table .rk-player{
    gap:clamp(24px, 1.08vw, 32px) !important;
  }

  .rk-table .rk-player > div{
    padding-left:clamp(6px, .36vw, 12px) !important;
    margin-left:0 !important;
    min-width:0;
  }

  .rk-table .rk-player .pv-avatar-wrap{
    margin-right:0 !important;
    flex-shrink:0 !important;
  }
}

@media (min-width:1981px) and (min-height:1081px){
  .rk-table .rk-player{
    gap:clamp(28px, 1.24vw, 38px) !important;
  }

  .rk-table .rk-player > div{
    padding-left:clamp(8px, .45vw, 14px) !important;
  }

  .rk-table .rk-name,
  .rk-table .rk-handle,
  .rk-table .rk-player .rk-title-badge,
  .rk-table .rk-player .title-badge{
    max-width:clamp(210px, 12.6vw, 320px) !important;
  }
}

/* ===== Bendición Lunar visible en Top 1 normal y ratas ===== */
.rk-rewards #award-lord-item #award-bendicion.award-lunar-blessing{
  display:inline-flex !important;
  width:30px;
  height:30px;
  flex:0 0 30px;
  object-fit:contain;
  margin-left:auto;
  margin-right:2px;
  pointer-events:none;
  cursor:default;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.38)) drop-shadow(0 0 10px rgba(122,184,255,.20));
}
.rk-rewards #award-lord-item #award-lord{
  margin-left:0 !important;
}
.rk-rewards.rats-mode #award-lord-item #award-bendicion.award-lunar-blessing{
  display:inline-flex !important;
}
@media (max-width: 760px){
  .rk-rewards #award-lord-item #award-bendicion.award-lunar-blessing{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
}

/* ===== Control de ancho para iPad Pro horizontal ===== */
@media (min-width:1281px) and (max-width:1400px) and (min-height:760px) and (max-height:1100px) and (orientation:landscape){
  html,
  body{
    max-width:100%;
    overflow-x:hidden;
  }

  .rk-layout{
    width:100%;
    max-width:calc(100vw - 18px) !important;
    box-sizing:border-box;
    grid-template-columns:260px minmax(0,1fr) 300px !important;
    gap:14px !important;
    padding-left:9px !important;
    padding-right:9px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    overflow:visible;
  }

  .rk-info-col,
  .rk-left-col,
  .rk-main,
  .rk-card,
  .rk-table-wrap{
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
  }

  .rk-league-list li,
  .rk-rewards li{
    min-width:0;
  }

  .rk-league-list span,
  .rk-rewards .title-badge{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .rk-table-scroll{
    max-width:100%;
    overflow-x:auto;
  }
}