/* ===== Capas (prioridad solicitada) =====
   wallpaper: z-index -2
   blur:      z-index -1
   contenido: z-index  0
*/

:root{
  --bg0:#070a12;
  --bg1:#0b1020;
  --text:#e9eefc;
  --muted:rgba(233,238,252,.62);
}

*{box-sizing:border-box}
html,body {
    background: #000000 !important;
}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg0),var(--bg1));
  color:var(--text);
  overflow-x:hidden;
}

.wrap{max-width:1180px;margin:0 auto;padding:18px 18px 60px}

.hero-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:stretch;
}

/* ===== Topbar (simple) ===== */
.topbar{
  height:56px;
  position:sticky;top:0;z-index:50;
  background: linear-gradient(180deg, rgba(8,11,20,.92), rgba(8,11,20,.74));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__inner{
  max-width:1180px;height:100%;
  margin:0 auto;padding:0 18px;
  display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;gap:10px;min-width:170px}
.brand__icon{width:16px;height:16px;border-radius:4px;background:linear-gradient(180deg,#2b74ff,#42d9ff);box-shadow:0 0 18px rgba(66,217,255,.45)}
.brand__text{font-weight:700;letter-spacing:.2px}
.nav{display:flex;align-items:center;gap:20px;flex:1;justify-content:center}
.nav__link{color:rgba(233,238,252,.72);text-decoration:none;font-weight:700;font-size:12px;letter-spacing:.14em;padding:10px 6px;border-radius:10px}
.nav__link.is-active{color:rgba(233,238,252,.95)}
.topbar__right{display:flex;align-items:center;gap:10px}
.notif-dot{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 10px rgba(255,59,59,.55)}
.pill{width:26px;height:26px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px}

/* ===== HERO ===== */
.player-hero{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  height:220px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  z-index:0; /* contexto */
}

/* wallpaper (z -2) */
.player-hero::before{
  content:"";
  position:absolute; inset:0;
  background:url("/static/ui_icons/wallpaper_webp.webp") center/cover no-repeat;
  opacity:.98;
  filter:saturate(1.05) contrast(1.04);
  z-index:-2;
}

/* overlay/velo (también debajo del contenido) */
.player-hero__veil{
  position:absolute; inset:0;
  background:
    radial-gradient(520px 240px at 80% 52%, rgba(255,170,85,.14), transparent 66%),
    linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.42));
  z-index:-1; /* misma “familia” que blur */
}

/* borde + línea inferior */
.player-hero__border{position:absolute;inset:0;pointer-events:none;z-index:0}
.player-hero__border::before{
  content:"";
  position:absolute; inset:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  opacity:.92;
}
.player-hero__border::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,154,61,.95));
  opacity:.95;
}

/* contenido (z 0) */
.hero-left{
  position:relative;
  z-index:0;
  padding:20px 20px 0 20px;
  padding-right:170px; /* espacio para casco (ajustado) */
}
.player-name{
  margin:2px 0 6px;
  font-size:42px;
  font-weight:900;
  letter-spacing:-.02em;
  text-shadow:0 14px 32px rgba(0,0,0,.60);
}
/* SUBTITLE: la subimos y garantizamos visibilidad */
.player-sub{
  margin:0;
  font-size:13px;
  font-weight:400;
  color:var(--muted);
  position:relative;
  z-index:0;
  transform: translateY(-2px);
}

/* Casco: bajamos un poco vs v6 y centramos texto debajo */
.hero-rank{
  position:absolute;
  top:0;
  right:18px;
  width:200px;
  height:100%;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
}
.hero-rank__img{
  width:110px;
  height:110px;
  object-fit:contain;
  margin-top:10px; /* más abajo que antes (menos negativo) */
  align-self:flex-end;     /* casco más pegado al borde derecho */
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.70));
}

/* Rank text centrado bajo casco y por encima del blur */
.rank-text{
  position:absolute;
  right:0;
  bottom:12px;     /* igual que el blur */
  width:200px;
  height:76px;     /* igual que el blur */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:none !important;
}

.rank-number{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:8px;
  width:100%;
}

.rank-label{
  font-size:14px;          /* mismo tamaño que el texto inferior */
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(233,238,252,.68);
}

.rank-hash{
  font-size:36px;
  font-weight:900;
  color:rgba(200,200,200,.95);
}

.rank-number 
.rank-hash{
  font-size:36px;
  font-weight:900;
  color:rgba(200,200,200,.95);
}

.rank-division{
  margin-top:2px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.22em;
  color:rgba(255,206,120,.78);
}

.rank-top{
  font-size:14px;
  font-weight:600;
  text-align:center;
  margin-top:6px;
  color:rgba(233,238,252,.75);
}


/* Rectángulo blur (z -1) => solo encima del wallpaper, debajo del texto */
.hero-inner{
  position:absolute;
  left:16px; right:16px;
  bottom:12px;
  height:76px;
  background:rgba(0,0,0,.14);
  backdrop-filter: blur(3px); /* blur más reducido */
  border-left:1px solid rgba(255,255,255,.14);
  border-right:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  overflow:hidden;
  z-index:-1; /* clave: queda debajo del texto */
}
.hero-inner__line{
  position:absolute;left:0;right:0;top:0;height:1px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.22) 0%,
    rgba(255,255,255,.16) 35%,
    rgba(255,255,255,.08) 55%,
    rgba(255,255,255,.00) 76%
  );
}
.badges{
  position:relative;
  height:100%;
  display:flex;align-items:center;gap:10px;
  padding:0 14px;
  z-index:0;
  pointer-events:auto;
}
.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:rgba(233,238,252,.85);
  font-weight:800;font-size:12px;
}
.badge__dot{
  width:8px;height:8px;border-radius:50%;
  background: linear-gradient(180deg, #ffc06a, #ff7a2b);
  box-shadow:0 0 12px rgba(255,154,61,.45);
}

/* ===== FUTURO ===== */
.future-panel{
  height:220px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  display:flex;align-items:center;justify-content:center;
}
.future-panel__content{padding:18px;text-align:center}
.future-title{font-size:12px;font-weight:900;letter-spacing:.22em;color:rgba(233,238,252,.75)}
.future-sub{margin-top:6px;font-size:14px;color:rgba(233,238,252,.55);font-weight:600}

/* =====================================================================
   HERO (GameRanger | Age of Empires Rankings) – v17
   Nota: este bloque sobreescribe el layout anterior sin afectar el resto.
   ===================================================================== */

/* El usuario pidió FUTURO abajo del hero */
.hero-row{grid-template-columns:1fr !important}

.hero-breakout{display:block}

/* Breadcrumb superior */
.gr-breadcrumb{
  width: min(900px, 100%);
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 2px 14px;
  color:rgba(233,238,252,.88);
  font-weight:700;
  font-size:18px;
  letter-spacing:-.01em;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.gr-breadcrumb__dot{
  width:14px;height:14px;border-radius:4px;
  background:linear-gradient(180deg,#3aa0ff,#6fe7ff);
  box-shadow:0 0 18px rgba(111,231,255,.35);
}
.gr-breadcrumb__brand{opacity:.95}
.gr-breadcrumb__sep{opacity:.55}
.gr-breadcrumb__rest{opacity:.85;font-weight:600}

/* Tarjeta hero */
.gr-hero{
  position:relative;
  width: min(900px, 100%);
  border-radius:18px;
  overflow:hidden;
  /* más alto para que el footer (Gold Division | Rank | Desde) quede abajo sin encimar */
  min-height:230px;
  border:1px solid rgba(245,197,66,.28);
  box-shadow:0 22px 70px rgba(0,0,0,.55);
}

/* fondo */
.gr-hero::before{
  content:"";
  position:absolute; inset:0;
  background:url("/static/ui_icons/wallpaper_webp.webp") center/cover no-repeat;
  filter:saturate(1.06) contrast(1.05);
  opacity:.98;
}


/* Borde dorado tipo “premium” (como en la plantilla de referencia) */
.gr-hero::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  z-index:5;
  box-shadow:
    0 0 0 1px rgba(245,197,66,.22) inset,
    0 0 22px rgba(245,197,66,.12);
}

/* Refuerzo sutil en la esquina inferior-derecha (codo más marcado) */
.gr-hero__cornerGlow{
  z-index:2;
  position:absolute;
  inset:-1px;
  border-radius:18px;
  pointer-events:none;
  background:
    radial-gradient(520px 280px at 92% 92%, rgba(245,197,66,.18), transparent 60%);
  mix-blend-mode:screen;
  opacity:.85;
}

/* === Segment Glow (neón por segmentos) === */
.gr-hero__segmentGlow{
  position:absolute;
  inset:0;
  border-radius:18px;
  pointer-events:none;
  z-index:4;

  /* segmentos: bottom-right fuerte + bottom tenue + right tenue */
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 55%,
      rgba(245,197,66,.00) 62%,
      rgba(245,197,66,.85) 74%,
      rgba(245,197,66,.00) 90%,
      transparent 100%) bottom / 100% 10px no-repeat,
    linear-gradient(180deg,
      transparent 0%,
      transparent 40%,
      rgba(245,197,66,.00) 52%,
      rgba(245,197,66,.70) 72%,
      rgba(245,197,66,.00) 92%,
      transparent 100%) right / 10px 100% no-repeat,
    radial-gradient(220px 160px at 92% 92%,
      rgba(245,197,66,.95),
      rgba(245,197,66,.30) 42%,
      rgba(245,197,66,0) 68%);

  filter: blur(8px);
  opacity:.30;

  /* máscara para que solo se vea en el borde (anillo) */
  padding:2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  animation: grSegmentGlow 10s ease-in-out infinite; /* 6/min */
}

@keyframes grSegmentGlow{
  0%,100%{ opacity:.20; filter: blur(7px); }
  50%{ opacity:.85; filter: blur(11px); }
}

@media (prefers-reduced-motion: reduce){
  .gr-hero__segmentGlow{ animation:none; opacity:.35; }
}
.gr-hero__overlay{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(520px 220px at 18% 50%, rgba(255,198,120,.22), transparent 60%),
    radial-gradient(520px 220px at 82% 40%, rgba(255,198,120,.10), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55));
}

/* marco dorado (como en la referencia) */
.gr-hero{
  border:1px solid rgba(255,220,155,.18);
}
.gr-hero .gr-hero__content{
  position:relative;
  z-index:3;
  position:relative;
  z-index:1;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  /* fuerza el footer a ir al fondo del hero */
  justify-content:space-between;
  padding:18px 18px;
}

.gr-hero__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.gr-hero .gr-hero__content::before{
  content:"";
  position:absolute; inset:10px;
  border-radius:14px;
  pointer-events:none;
  border:1px solid rgba(255,220,155,.10);
}
.gr-hero .gr-hero__content::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  border-radius:18px;
  box-shadow:
    inset 0 0 0 1px rgba(255,220,155,.10),
    0 0 22px rgba(255,198,120,.10);
  /* breathing glow (6 veces por minuto = 10s) */
  animation: grBorderBreathing 10s ease-in-out infinite;
}

@keyframes grBorderBreathing{
  0%, 100%{
    box-shadow:
      inset 0 0 0 1px rgba(255,220,155,.10),
      0 0 18px rgba(255,198,120,.08),
      0 0 0 rgba(255,198,120,0);
    opacity:.85;
  }
  50%{
    box-shadow:
      inset 0 0 0 1px rgba(255,220,155,.16),
      0 0 34px rgba(255,198,120,.22),
      0 0 70px rgba(255,198,120,.10);
    opacity:1;
  }
}

/* Lado izquierdo */
.gr-left{display:flex;align-items:center;gap:18px;min-width:0}

.gr-avatar{
  width:176px;height:176px;border-radius:999px;
  background:transparent;
  border:2px solid rgba(255,220,155,.70);
  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    0 0 26px rgba(255,198,120,.14);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
  overflow:hidden;
}
.gr-avatar__inner{
  position:relative;
  overflow:hidden;
  width:100%;height:100%;border-radius:999px;
  background:transparent;
  border:0;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;
}

/* Luz de barrido sobre el casco (1 barrido cada 10s = 6/min) */
.gr-avatar__inner::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-140%;
  width:80%;
  height:170%;
  transform: rotate(20deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.12) 65%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode: screen;
  opacity:0;
  pointer-events:none;
  z-index:3;
  animation: helmetSweep 10s linear infinite;
}

@keyframes helmetSweep{
  0%, 6%{ left:-140%; opacity:0; }
  10%{ left:110%; opacity:.95; }
  13%{ left:140%; opacity:0; }
  100%{ left:140%; opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .gr-hero .gr-hero__content::after,
  .gr-avatar__inner::after{
    animation:none !important;
  }
}

.gr-avatar__helmet{
  width:166px;
  height:auto;
  display:block;
  object-fit:contain;
  transform:translateY(3px);
}

/* Texto tipo link pero sin interacción (para "Rank #35 CBA v21") */
.gr-link.gr-link--static{
  cursor:default;
  pointer-events:none;
  text-decoration:none;
}

.gr-info{min-width:0}
.gr-name{
  font-size:46px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.02;
  margin-top:-6px;
  text-shadow:0 14px 32px rgba(0,0,0,.65);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gr-sub{
  margin-top:4px;
  font-size:14px;
  font-weight:600;
  color:rgba(233,238,252,.58);
}

.gr-meta{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:12px;
  color:rgba(233,238,252,.72);
  font-weight:700;
  font-size:14px;
}

.gr-meta{gap:14px;}
.gr-metaItem{
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.gr-metaSep{
  width:1px;
  height:18px;
  background:rgba(255,255,255,.16);
  display:inline-block;
}
.gr-link{
  color:rgba(233,238,252,.78);
  text-decoration:none;
}
.gr-link:hover{ text-decoration:underline; color:rgba(233,238,252,.92); }

/* Footer inferior del hero (rango, link y fecha) */
.gr-footer{
  position:relative;
  z-index:1;
  margin-top:2px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.gr-footer__left{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  /* Shift dinámico para alinear el centro del texto de división con el centro del casco */
  transform: translateX(var(--footer-shift, 0px));
  transition: transform 180ms ease;
  will-change: transform;
}
.gr-footer__right{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.gr-footer .gr-since{
  font-size:14px;
  font-weight:700;
  color:rgba(233,238,252,.72);
}


.gr-rank-badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.10);
}
.gr-rank-ico{
  width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.55));
}

.gr-lock{display:inline-flex;align-items:center;justify-content:center;opacity:.70}
.gr-lock::before{content:"🔒";font-size:14px}

.gr-link{
  color:rgba(233,238,252,.68);
  text-decoration:none;
  font-weight:700;
}
.gr-link:hover{color:rgba(255,255,255,.92)}

/* Lado derecho */
.gr-right{display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:0 0 auto}






/* === Stats table (Partidas/Ganadas/Perdidas/ELO/Win Rate/Streak) === */
.gr-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding:0;
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}
.gr-statsCell{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  color:rgba(233,238,252,.86);
  text-align:center;
  border-right:1px solid rgba(255,255,255,.10);
  border-top:1px solid rgba(255,255,255,.10);
}
.gr-statsCell:nth-child(4n){ border-right:none; }
.gr-statsCell:nth-child(-n+4){ border-top:none; }

.gr-statsCell--head{
  font-size:12px;
  font-weight:800;
  letter-spacing:.2px;
  color:rgba(233,238,252,.78);
}
.gr-statsCell--val{
  font-size:20px;
  font-weight:900;
  color:rgba(233,238,252,.92);
}
.gr-statsNum{ line-height:1; }
.gr-statsCell.is-empty{ opacity:0; }

.gr-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.95}
.gr-ico--sword::before{content:"⚔";font-size:15px}
.gr-ico--hourglass::before{content:"⌛";font-size:14px}
.gr-ico--team::before{content:"👥";font-size:14px}
.gr-ico--bars::before{content:"▮▮▮";font-size:12px;letter-spacing:2px}
.gr-ico--refresh::before{content:"⟳";font-size:16px}
.gr-ico--share::before{content:"⤴";font-size:16px}.gr-ico--trophy::before{content:"🏆";font-size:15px}
.gr-ico--flag::before{content:"🚩";font-size:14px}
.gr-ico--fire::before{content:"🔥";font-size:15px}
.gr-ico--elo::before{content:"⭐";font-size:14px}
.gr-ico--winrate::before{content:"🎯";font-size:14px}


.gr-right__bottom{display:flex;align-items:center;gap:12px}
.gr-since{color:rgba(233,238,252,.70);font-weight:700}

.gr-actions{display:flex;align-items:center;gap:10px}
.gr-action{
  width:34px;height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.22);
  color:rgba(233,238,252,.86);
  cursor:pointer;
  backdrop-filter: blur(8px);
}
.gr-action:hover{background:rgba(0,0,0,.32)}

/* Responsive: apilar */
@media (max-width: 820px){
  .gr-breadcrumb{font-size:16px}
  .gr-hero .gr-hero__content{flex-direction:column;align-items:flex-start}
  .gr-right{align-items:flex-start}
  .gr-name{font-size:38px}
}

/* Responsive */
@media (max-width: 980px){
  .hero-row{grid-template-columns:1fr}
  .nav{display:none}
  .hero-left{padding-right:20px}
  .hero-rank{
  position:absolute;
  top:0;
  right:18px;
  width:200px;
  height:100%;
  z-index:0;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:flex-start;
}
  .rank-text{
  position:absolute;
  right:0;
  bottom:12px;     /* igual que el blur */
  width:200px;
  height:76px;     /* igual que el blur */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:none !important;
}
}


.rank-bottom{
  font-size:14px;
  font-weight:600;
  text-align:center;
  opacity:0.95;
}


/* Centrar mejor los badges dentro del blur */
.hero-badges, .badges-row, .hero-status{
  transform: translateY(8px);
}



.rank-top{
  font-size:14px;
  font-weight:600;
  text-align:center;
  margin-top:6px;
  color:rgba(233,238,252,.75);
}

/* ===== Overrides: Rank hash + CBA v21 ===== */
.rank-hash{
  font-size: 30px !important; /* más chico que antes */
  font-weight: 900;
  color: #ffffff !important;
}
.rank-top{
  color:#ffffff !important;   /* CBA v21 en blanco */
  font-size:12px !important;  /* más chico para dejar espacio al # */
  font-weight:700;
}
.rank-division{
  font-size:10px !important;  /* GOLD DIVISION más chico */
}


/* ===== Overrides: Order + unified typography ===== */
.rank-text{
  justify-content:center;
  gap:6px; /* separación uniforme */
}

.rank-division, .rank-top, .rank-label, .rank-hash{
  font-family: inherit; /* mismo font */
  text-transform: uppercase;
  letter-spacing: .16em;
}

.rank-division{
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
  color: rgba(255,206,120,.90); /* dorado */
  font-size: 12px !important;
  font-weight: 900;
}

.rank-hash{
  font-size: 34px !important; /* un poquito más grande */
  font-weight: 900;
  color: #ffffff !important;
  letter-spacing: .06em; /* el # necesita menos */
  text-transform:none;   /* mantener el #35 tal cual */
}

.rank-label{
  font-size: 14px !important;
  font-weight: 900;
  color: rgba(233,238,252,.80);
  letter-spacing: .16em;
}

.rank-top{
  font-size: 12px !important;
  font-weight: 900;
  color: #ffffff !important; /* CBAv21 en blanco */
}


/* ===== Layout Adjustments v4 ===== */

/* Center helmet vertically with division block */
.hero-rank{
  justify-content: center !important;
}

/* Remove underline from GOLD DIVISION */
.rank-division{
  text-decoration: none !important;
}

/* CBAv21 styled similar to Online */
.rank-top{
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: rgba(233,238,252,.75) !important;
}

/* Independent #35 in hero corner */
.hero-rank-corner{
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 32px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: .05em;
  z-index: 5;
}


/* ===== Overrides v5: Helmet position + force #35 corner only ===== */

/* Casco más a la izquierda y más arriba */
.hero-rank{
  top: -12px !important;
  right: 60px !important;  /* más inset => se mueve a la izquierda */
  justify-content: flex-start !important;
}
.hero-rank__img{
  margin-top: 0px !important;
}

/* Ocultar cualquier rankNumber que quedara por error */
#rankNumber, #rankNumber_REMOVED{
  display:none !important;
}

/* #35 esquina hero */
.hero-rank-corner{
  top: 14px !important;
  right: 18px !important;
}


/* ===== Overrides v6: Helmet aligned with GOLD DIVISION + vertical centering ===== */

/* El bloque del casco+texto vive en la misma columna para que queden centrados en X */
.hero-rank{
  top: 0px !important;
  right: 22px !important;
  bottom: 88px !important;            /* deja libre el rectángulo blur (12 + 76) */
  height: auto !important;
  width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;      /* centro horizontal casco + GOLD DIVISION */
  justify-content: center !important;  /* centro vertical entre top hero y top del blur */
  pointer-events: none;
}

/* Casco */
.hero-rank__img{
  margin-top: 0px !important;
  align-self: center !important;
}

/* Texto (GOLD DIVISION / CBAv21) dentro del mismo bloque, sin absolute */
.rank-text{
  position: static !important;
  width: 100% !important;
  height: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 10px !important;
  display:flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Baja más el #35 de la esquina para que se aprecie */
.hero-rank-corner{
  top: 44px !important;
  right: 18px !important;
}


/* ===== Overrides v7: Move GOLD DIVISION + CBAv21 into blur + force #35 visible ===== */

/* El rectángulo blur empieza en bottom:12px y tiene height:76px.
   Ponemos el bloque del casco/texto apoyado en esa zona (dentro del blur). */
.hero-rank{
  bottom: 12px !important;              /* pegado al blur */
  justify-content: flex-end !important;  /* baja todo */
  padding-bottom: 10px !important;       /* mete texto dentro del blur */
}

/* Empuja el texto un poco más abajo para que quede dentro del blur */
.rank-text{
  margin-top: 6px !important;
}

/* #35: forzar que se vea sí o sí */
.hero-rank-corner{
  display:block !important;
  z-index: 9999 !important;
  color: #ffffff !important;
  font-size: 34px !important;
  font-weight: 900 !important;
  top: 86px !important;     /* más abajo */
  right: 22px !important;
  text-shadow: 0 6px 18px rgba(0,0,0,.75);
}

/* Por si alguna regla lo oculta */
#heroRankCorner{ visibility: visible !important; opacity: 1 !important; }


/* ===== Layout v8: Avatar bottom-left + corner labels ===== */

/* Nombre + subtítulo un poco más a la derecha */
.hero-left{
  padding-left: 92px !important;
  padding-right: 220px !important;
}

/* Label superior izquierda: GOLD DIVISION */
.hero-division-label{
  position:absolute;
  top:14px;
  left:18px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: rgba(255,206,120,.92);
  z-index:6;
}

/* Esquina superior derecha: #35 + CBAv21 */
.hero-corner{
  position:absolute;
  top:14px;
  right:18px;
  text-align:right;
  z-index:7;
}
.hero-corner-sub{
  margin-top:6px;
  font-size:14px;
  font-weight:600;
  color: rgba(233,238,252,.75);
}

/* Forzar #35 a estar en la esquina (sin offsets raros de v7) */
.hero-rank-corner{
  position:static !important;
  display:block !important;
  font-size:34px !important;
  font-weight:900 !important;
  color: rgba(200,200,200,.95) !important;
  letter-spacing:.06em;
  text-shadow: 0 6px 18px rgba(0,0,0,.75);
}

/* Casco centrado (sin texto debajo) */
.hero-rank{
  left:0 !important;
  right:0 !important;
  top:0 !important;
  bottom:88px !important; /* deja libre el blur */
  width:auto !important;
  height:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:none;
}
.hero-rank__img{
  width:112px !important;
  height:112px !important;
}

/* Avatar placeholder en rincón inferior izquierdo */
.hero-avatar{
  position:absolute;
  left:18px;
  bottom:14px;
  width:88px;
  height:88px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  overflow:hidden;
  z-index:2;
}
.hero-avatar__placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.22em;
  color: rgba(233,238,252,.62);
}

/* Rectángulo blur más chico y con badges corridos a la derecha */
.hero-inner{
  left:118px !important;  /* deja espacio para el avatar */
  right:auto !important;
  width:320px !important;
  height:68px !important;
  bottom:16px !important;
  border-top-left-radius:12px !important;
  border-top-right-radius:12px !important;
}
.badges{
  padding:0 12px !important;
  gap:10px !important;
}
.badge{
  padding:8px 12px !important;
  border-radius:10px !important;
}

/* ===== Layout v9: Avatar top-left, Division top-right, helmet + rank stacked ===== */

/* Avatar ahora arriba-izquierda */
.hero-avatar{
  top:14px !important;
  bottom:auto !important;
  left:18px !important;
}

/* Texto (nombre/sub) más a la derecha para respetar el avatar */
.hero-left{
  padding-left: 132px !important;
  padding-right: 260px !important; /* deja aire para el bloque derecho */
}

/* Bloque derecho: todo centrado en columna */
.hero-right-stack{
  position:absolute;
  top:14px;
  right:18px;
  width:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  z-index:7;
  pointer-events:none;
}

/* GOLD DIVISION ahora en la esquina superior derecha (dentro del stack) */
.hero-right-stack .hero-division-label{
  position:static !important;
  margin:0;
}

/* Casco centrado debajo de GOLD DIVISION */
.hero-helmet{
  width:112px;
  height:112px;
  object-fit:contain;
  margin-top:10px;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,.70));
}

/* #35 + CBAv21 centrados debajo del casco, con espacio */
.hero-rank-stack{
  margin-top:14px; /* separación del casco */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.hero-rank-number{
  font-size:34px;
  font-weight:900;
  color: rgba(200,200,200,.95);
  letter-spacing:.06em;
  text-shadow: 0 6px 18px rgba(0,0,0,.75);
}

.hero-rank-sub{
  font-size:14px;
  font-weight:600;
  color: rgba(233,238,252,.75);
}

/* Ya no usamos el casco centrado antiguo */
.hero-rank{ display:none !important; }

/* Blur inferior: regresa a ancho normal (avatar ya no estorba abajo) */
.hero-inner{
  left:16px !important;
  right:16px !important;
  width:auto !important;
}



/* === NEW POSITIONING === */

.hero-division-top {
    position: absolute;
    top: 15px;
    left: 25px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #d4af37;
}

.hero-rank-top {
    position: absolute;
    top: 15px;
    right: 25px;
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ccc;
}

/* Raise helmet slightly */
.hero-helmet {
    position: absolute;
    top: 40px;
}



/* === SIMPLIFIED: Only GOLD DIVISION + Helmet, top-right === */

.hero-right-stack{
    position: absolute;
    top: 15px;
    right: 25px;
    display: flex;
    flex-direction: column;
    align-items: center; /* centers helmet under label */
    gap: 10px;
    width: 170px; /* stable centering box */
    pointer-events: none;
}

.hero-division-top{
    position: static; /* now inside the stack */
    padding: 6px 14px;
    border-radius: 20px;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(6px);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #d4af37;
    text-align: center;
    width: fit-content;
    pointer-events: auto;
}

.hero-helmet{
    position: static; /* let flex layout control it */
    display: block;
    transform: translateY(2px); /* slight lift */
    pointer-events: auto;
}

/* In case older rules exist, neutralize */
.hero-rank-top, .hero-rank-stack, .hero-rank-number, .hero-rank-sub { display: none !important; }



/* === V13: Embed GOLD DIVISION into top border + raise helmet === */

.hero-right-stack{
    top: -8px;           /* pushes stack into the top border area */
    right: 22px;
}

.hero-division-top{
    transform: translateY(-6px); /* slight embed into border */
}

.hero-helmet{
    transform: translateY(-10px); /* raise helmet so it doesn't invade blur rect */
}



/* === V14: Smaller Gold Division label + helmet resize + click expand === */

.hero-right-stack{
    top: 10px;      /* place below top border line */
    right: 22px;
    width: 150px;
    gap: 8px;
}

.hero-division-top{
    font-size: 12px;
    padding: 5px 12px;
    transform: none;
}

.helmet-btn{
    all: unset;
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
}

.hero-helmet{
    width: 92px;   /* reduced size */
    height: auto;
    transform: translateY(-2px);
}

/* Modal */
.helmet-modal{
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.helmet-modal.is-open{
    display: block;
}

.helmet-modal__backdrop{
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(6px);
}

.helmet-modal__content{
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
}

.helmet-modal__img{
    width: min(520px, 78vw);
    height: auto;
    filter: drop-shadow(0 10px 30px rgba(0,0,0,0.6));
}



/* === V15: Gold Division label fused with top border === */

.hero-right-stack{
    top: 0px; /* align to top border */
    right: 22px;
    gap: 10px;
}

.hero-division-top{
    font-size: 11px;               /* slightly smaller */
    color: #ffffff;                 /* white text */
    background: rgba(0,0,0,0.50);
    border-left: 1px solid rgba(212,175,55,0.95);
    border-right: 1px solid rgba(212,175,55,0.95);
    border-bottom: 1px solid rgba(212,175,55,0.95);
    border-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding: 6px 12px;
}

.hero-helmet{
    transform: translateY(-8px); /* raise helmet a bit more */
    width: 92px;
}



/* === V15: Modal looks like superposed window === */
.helmet-modal__backdrop{
    background: rgba(0,0,0,0.35);
}

.helmet-modal__content{
    pointer-events: none; /* allow outside-click to register easily; image will re-enable */
}

.helmet-modal__img{
    pointer-events: auto;
    background: rgba(15,16,20,0.65);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 18px;
    backdrop-filter: blur(8px);
}



/* === V16: Gold Division above Avatar + helmet higher === */

.hero-division-left{
    position: absolute;
    top: 8px;
    left: 25px;
    font-size: 11px;
    color: #ffffff;
    background: rgba(0,0,0,0.50);
    border-left: 1px solid rgba(212,175,55,0.95);
    border-right: 1px solid rgba(212,175,55,0.95);
    border-bottom: 1px solid rgba(212,175,55,0.95);
    border-top: 0;
    padding: 6px 12px;
}

.hero-avatar{
    margin-top: 28px; /* push avatar slightly down */
}

.hero-helmet{
    transform: translateY(-16px); /* raise helmet more */
}


/* === V17 (Antonio): Layout centrado + sección futura abajo + hero menos alto === */

/* Breakout: permite que el HERO ignore el max-width de .wrap y se centre por sí mismo */
.hero-breakout{
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

/* La fila superior ahora es columna para que el FUTURO quede debajo del HERO */
.hero-row{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:center;      /* centra el hero (y el panel futuro) */
  min-height: unset;
}

/* HERO: menos alto (más compacto) */
.player-hero{
  height: 240px;
  width: 760px;                 /* más angosto */
  max-width: 100%; /* respeta márgenes en pantallas pequeñas */
}

/* Panel futuro: abajo del hero, sin empujarlo con margen enorme */
.future-panel{
  width: 760px;
  max-width: 100%;
  height: 220px;
  margin-top: 0;
}

/* Eliminamos el label izquierdo (ya no existe). Neutralizamos por si queda algo */
.hero-division-left{ display:none !important; }

/* Avatar (manteniendo tamaño grande) */
.hero-avatar{
  width: 118px;
  height: 118px;
  border-radius: 16px;
  margin-top: 0 !important;
}
.hero-avatar__placeholder{
  font-size: 12px;
}

/* Ajuste del texto para respetar el avatar grande */
.hero-left{
  padding-left: 160px !important;
}

/* Borde dorado fijo */
.player-hero__border::before{
  border: 1px solid rgba(212,175,55,.85) !important;
  box-shadow: 0 0 0 1px rgba(212,175,55,.22), 0 18px 55px rgba(0,0,0,.55);
}
.player-hero__border::after{
  content: none !important;
}

/* GOLD DIVISION incrustado: solo bordes laterales+inferior en dorado */
.hero-division-top{
  border-left: 1px solid rgba(212,175,55,.95) !important;
  border-right: 1px solid rgba(212,175,55,.95) !important;
  border-bottom: 1px solid rgba(212,175,55,.95) !important;
  border-top: 0 !important; /* comparte el superior con el borde general */
}

/* Asegurar que el label quede por encima del borde */
.hero-right-stack{ z-index: 10; }

/* Responsive */
@media (max-width: 980px){
  .hero-row{ min-height: unset; }
  .player-hero{ height: 240px; }
  .future-panel{ margin-top: 0; }
  .hero-left{ padding-left: 160px !important; }
}


/* === PREMIUM HERO BORDER EFFECT (Blue Premium Card Style) === */

.gr-hero{
  position: relative;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(20,30,50,.85), rgba(10,18,30,.92));
  border: 1px solid rgba(90,150,255,.35);
  box-shadow:
    0 0 0 1px rgba(120,180,255,.15),
    0 0 35px rgba(40,120,255,.25),
    inset 0 0 0 1px rgba(255,255,255,.04);
  overflow: hidden;
}

.gr-hero::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  padding:1px;
  background: linear-gradient(135deg, rgba(120,180,255,.7), rgba(40,120,255,.4), rgba(120,180,255,.7));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
}



/* === Integración backend: avatar real / inicial === */
.gr-avatar__photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  display:block;
  position:absolute;
  inset:0;
  z-index:1;
}
.gr-avatar__letter{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:42px;
  color:rgba(255,255,255,.92);
  letter-spacing:.5px;
  z-index:1;
  text-shadow:0 8px 22px rgba(0,0,0,.55);
}

/* ===== Ajustes solicitados (alineación premium) ===== */
.gr-hero{
  min-height: 250px;
}

.gr-hero__top{
  display:flex;
  align-items:flex-start;
  gap:28px;
  padding-bottom:10px;
}

.gr-avatarWrap{
  flex:0 0 auto;
}

/* Nombre y tabla se recorren a la derecha juntos */
.gr-topMain{
  flex:1 1 auto;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
  min-width:0;
}

.gr-info{
  flex:0 0 auto;
  min-width:260px;
  padding-top:8px;
}

.gr-right{
  flex:1 1 auto;
  display:flex;
  justify-content:flex-end;
  min-width:0;
}

/* Footer: sin “pills” azules, texto limpio como referencia */
.gr-footer .gr-rank-text,
.gr-footer .gr-link,
.gr-footer .gr-link--static{
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(233,238,252,.88) !important;
  font-weight:600;
}

.gr-footer .gr-since{
  color:rgba(233,238,252,.78);
  font-weight:600;
}

/* Separador más visible */
.gr-footer .gr-metaSep{
  background:rgba(255,255,255,.18);
}



/* --- Nuevo acomodo (Gold Division | Rank | Perfil Verificado | Registro) --- */
.gr-subtitle{
  margin-top:2px;
  font-size:16px;
  font-weight:600;
  color:rgba(233,238,252,.62);
}

.gr-miniDivider{
  margin-top:12px;
  height:1px;
  width:100%;
  background:linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.14), rgba(255,255,255,.0));
}

.gr-rankRow{
  margin-top:10px;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:15px;
  font-weight:700;
  color:rgba(233,238,252,.80);
}

.gr-rank-sub{
  font-weight:700;
  color:rgba(233,238,252,.76);
}

.gr-verifyRow{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.gr-verifiedBadge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:16px;
  font-weight:800;
  color:rgba(233,238,252,.88);
}

.gr-check{
  width:22px;height:22px;
  display:inline-flex;
  align-items:center;justify-content:center;
  border-radius:999px;
  background:rgba(46, 204, 113, .18);
  border:1px solid rgba(46, 204, 113, .55);
  color:rgba(46, 204, 113, .95);
  font-size:14px;
  line-height:1;
}

.gr-register{
  font-size:16px;
  font-weight:800;
  color:rgba(233,238,252,.70);
  white-space:nowrap;
}

/* Hacer que el bloque izquierdo respire mejor al quitar el footer */
.gr-info{max-width: 520px;}



/* ===== AJUSTE LAYOUT HERO (tabla al límite + alineación por filas) ===== */
.wrap{max-width:1160px}

.gr-hero{
  width:min(1120px, 100%);
  margin:0 auto;
}

/* Ahora el top del hero es 2 filas: (1) avatar+info+tabla, (2) verificado+registro */
.gr-hero__top{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:12px;
}
.gr-topRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-width:0;
}

/* Info + tabla: alinear el bloque de Gold Division | Rank con la fila inferior (0/5/100%) */
.gr-topMain{
  flex:1 1 auto;
  display:flex;
  align-items:flex-end; /* <- clave: baja el último renglón del info a la altura del último renglón de la tabla */
  justify-content:space-between;
  gap:34px;
  min-width:0;
}

.gr-info{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  padding-top:0px;
  padding-left:12px;
}
.gr-rankRow{
  margin-top:auto; /* empuja Gold Division | Rank hacia abajo dentro del bloque de info */
}

/* Tabla a la derecha, fija y pegada al límite */
.gr-right{
  flex:0 0 auto;
  margin-left:auto;
}

/* Fila inferior: Perfil Verificado (izq) / Registro (der) */
.gr-bottomMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-left:210px; /* 176px avatar + 22px gap + 12px ajuste */
}
@media (max-width: 860px){
  .gr-bottomMeta{padding-left:0}
  .gr-topRow{flex-direction:column; align-items:flex-start}
  .gr-right{width:100%}
}


/* === HERO HEIGHT REDUCTION === */

.gr-hero{
  min-height: 190px !important;  /* más compacto */
  padding-bottom: 12px !important;
}


/* === REMOVE VERIFY + REGISTER ROW === */

.gr-verifyRow,
.gr-bottomMeta,
.gr-verifiedBadge,
.gr-register{
  display: none !important;
}


/* ============================
   Hover: Gold Division + Rank
   ============================ */
.gr-divHover,
.gr-rankHover{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 10px;
  cursor: default;
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}

.gr-divHover:hover,
.gr-rankHover:hover{
  background: rgba(255, 210, 90, .10);
  box-shadow: 0 0 0 1px rgba(255, 210, 90, .25), 0 10px 26px rgba(0,0,0,.35);
  transform: translateY(-1px);
  color: rgba(255,255,255,.98);
}

.gr-divHover::after,
.gr-rankHover::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:2px;
  height:1px;
  opacity:0;
  background: linear-gradient(90deg, rgba(255,210,90,0), rgba(255,210,90,.8), rgba(255,210,90,0));
  transition: opacity 160ms ease;
}

.gr-divHover:hover::after,
.gr-rankHover:hover::after{
  opacity: .9;
}

/* ============================
   Stats grid 3x2 (label + value)
   ============================ */
.gr-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap:0;
  border-radius:14px;
  overflow:hidden;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.gr-statCell{
  padding: 12px 14px;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
  transition: transform 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.gr-statCell:nth-child(3),
.gr-statCell:nth-child(6){
  border-right: none;
}
.gr-statCell:nth-child(4),
.gr-statCell:nth-child(5),
.gr-statCell:nth-child(6){
  border-bottom: none;
}

.gr-statLabel{
  font-size: 12px;
  font-weight: 800;
  color: rgba(233,238,252,.74);
  letter-spacing: .01em;
  margin-bottom: 8px;
}

.gr-statValue{
  display:flex;
  align-items:center;
  gap:10px;
}

.gr-statNum{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 20px rgba(0,0,0,.45);
}

.gr-statCell:hover{
  background: rgba(255, 210, 90, .08);
  box-shadow: inset 0 0 0 1px rgba(255,210,90,.22), 0 14px 30px rgba(0,0,0,.35);
  transform: translateY(-1px);
}

@media (max-width: 860px){
  .gr-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gr-statCell:nth-child(3){ border-right: 1px solid rgba(255,255,255,.08); }
  .gr-statCell:nth-child(2),
  .gr-statCell:nth-child(4),
  .gr-statCell:nth-child(6){ border-right: none; }
  .gr-statCell:nth-child(5),
  .gr-statCell:nth-child(6){ border-bottom: none; }
}

/* Legacy table styles (ya no se usan con la grilla 3x2) */
.gr-statsCell{ display:none !important; }

/* =====================================================================
   Gold Division: efecto fijo (sin hover), solo para Gold Division
   ===================================================================== */
.gr-divHover{
  background: rgba(255, 210, 90, .10) !important;
  box-shadow: 0 0 0 1px rgba(255, 210, 90, .25), 0 10px 26px rgba(0,0,0,.35) !important;
  transform: translateY(-1px) !important;
  color: rgba(255,255,255,.98) !important;
}
.gr-divHover::after{
  opacity: .9 !important;
}
/* Quita interacción hover (se queda igual) */
.gr-divHover:hover{
  background: rgba(255, 210, 90, .10) !important;
  box-shadow: 0 0 0 1px rgba(255, 210, 90, .25), 0 10px 26px rgba(0,0,0,.35) !important;
  transform: translateY(-1px) !important;
  color: rgba(255,255,255,.98) !important;
}

/* =====================================================================
   Avatar: hover energía rodando por el círculo
   ===================================================================== */
.gr-avatar{
  position: relative;
  overflow: visible;
}
.gr-avatar::after{
  content:"";
  position:absolute;
  inset:-6px;               /* ring outside circle */
  border-radius:50%;
  background: conic-gradient(
    from 0deg,
    rgba(255,210,90,0) 0deg,
    rgba(255,210,90,.9) 40deg,
    rgba(255,210,90,0) 90deg,
    rgba(255,210,90,0) 360deg
  );
  filter: blur(2px);
  opacity:0;
  pointer-events:none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  transition: opacity 160ms ease;
}
@keyframes grSpinRing{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.gr-avatarWrap:hover .gr-avatar::after{
  opacity:1;
  animation: grSpinRing 2.6s linear infinite;
}

/* =====================================================================
   Tabla 3x2: proporciones fijas + centrado forzado (sin deformar celdas)
   ===================================================================== */
.gr-stats{
  /* mantiene 3 columnas y 2 filas con tamaños iguales */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 76px; /* altura fija para que TODOS los cuadros sean iguales */
  justify-items: stretch;
  align-items: stretch;
}

.gr-statCell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 10px 12px; /* consistente */
}

.gr-statLabel{
  width:100%;
  text-align:center;
  line-height: 1.15;
  margin-bottom: 8px;
}

.gr-statValue{
  width:100%;
  justify-content:center;
}

.gr-statNum{
  line-height: 1;
}

@media (max-width: 860px){
  .gr-stats{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-auto-rows: 76px;
  }
}

/* =====================================================================
   AJUSTES MANUALES (X/Y) – Movimiento libre
   Cambia solo estos valores en :root para mover elementos:
   - Nombre + subtítulo:   --gr-nameShiftX / --gr-nameShiftY
   - Gold Division + Rank: --gr-divisionShiftX / --gr-divisionShiftY
   ===================================================================== */
:root{
  --gr-nameShiftX: 0px;
  --gr-nameShiftY: 0px;

  --gr-divisionShiftX: 0px;
  --gr-divisionShiftY: 4px;
}

/* Bloques principales (cuando existen en el HTML) */
.gr-headerBlock{
  transform: translateX(var(--gr-nameShiftX)) translateY(var(--gr-nameShiftY));
  transition: transform 160ms ease;
  will-change: transform;
}
.gr-divisionBlock{
  transform: translateX(var(--gr-divisionShiftX)) translateY(var(--gr-divisionShiftY));
  transition: transform 160ms ease;
  will-change: transform;
}

/* Fallbacks (si el HTML usa clases directas) */
.gr-name{
  transform: translateX(var(--gr-nameShiftX)) translateY(var(--gr-nameShiftY));
  transition: transform 160ms ease;
  will-change: transform;
}
.gr-sub, .gr-subtitle{
  transform: translateX(var(--gr-nameShiftX)) translateY(var(--gr-nameShiftY));
  transition: transform 160ms ease;
  will-change: transform;
}
.gr-rankRow{
  transform: translateX(var(--gr-divisionShiftX)) translateY(var(--gr-divisionShiftY));
  transition: transform 160ms ease;
  will-change: transform;
}


/* ===== 3 tarjetas compactas bajo el hero ===== */
.playerSubRow{
  width:min(1220px, calc(100% - 40px));
  margin:10px auto 0 auto;
  display:grid;
  grid-template-columns: 1.05fr 1.05fr .9fr;
  gap:10px;
}
.subCard{
  position:relative;
  border:1px solid rgba(233,200,120,.35);
  border-radius:14px;
  background:rgba(10,14,26,.55);
  box-shadow:0 18px 40px rgba(0,0,0,.35) inset, 0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
.subCard .hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:5px 10px 3px 10px;
  border-bottom:1px solid rgba(233,200,120,.22);
}
.subTitle{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  letter-spacing:.2px;
  font-size:16px; /* más grande como pediste */
}
.subIcon{
  width:18px;height:18px;
  display:inline-grid;
  place-items:center;
  border-radius:6px;
  background:rgba(233,200,120,.12);
  border:1px solid rgba(233,200,120,.22);
  font-size:12px;
}
.musicNote{
  display:inline-block;
  margin-right:8px;
  font-size:14px;
  line-height:1;
}
.countryFlagInline{
  width:26px;
  height:26px;
  border-radius:4px;
  margin-right:8px;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
  vertical-align:middle;
}
.playerNameText{vertical-align:middle;}

.subBody{padding:4px 10px 4px 10px;}

.infoTop{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.infoAvatar{
  width:84px; height:84px;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(233,200,120,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.35) inset;
  flex:0 0 auto;
}
.infoAvatar img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
}
.infoLines{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.infoLine{
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(233,238,252,.86);
  font-size:13px;
}
.badgeOk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;height:16px;
  border-radius:50%;
  background:rgba(34,197,94,.18);
  border:1px solid rgba(34,197,94,.55);
  color:#22c55e;
  font-weight:900;
  font-size:12px;
  line-height:1;
}
.awardsRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.awardPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(233,200,120,.10);
  border:1px solid rgba(233,200,120,.26);
  color:rgba(233,238,252,.9);
  font-size:12px;
  font-weight:700;
}
.awardPill img{width:16px;height:16px;object-fit:contain;display:block;}
/* Spotify compact (normalizado: con o sin Spotify siempre ocupa lo mismo) */
.musicEmbed{border-radius:12px; overflow:hidden;}
/* IMPORTANTE: Spotify a veces ignora el atributo height del iframe; forzamos el alto */
.musicEmbed iframe{display:block; width:100%; height:152px !important; border:0;}

/* ===== Partidas recientes: layout detallado ===== */
.recentBlock{
  width:min(1220px, calc(100% - 40px));
  margin:14px auto 30px auto;
  border:1px solid rgba(233,200,120,.35);
  border-radius:16px;
  background:rgba(10,14,26,.55);
  overflow:hidden;
}
.recentHeader{
  padding:10px 12px;
  border-bottom:1px solid rgba(233,200,120,.22);
  display:flex; align-items:center; justify-content:space-between;
}
.recentHeader .ttl{
  display:flex; align-items:center; gap:8px;
  font-weight:900;
}
.matchCard{
  padding:10px 12px;
  border-top:1px solid rgba(255,255,255,.06);
}
.matchMeta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  color:rgba(233,238,252,.72);
  font-size:12px;
  margin-bottom:8px;
}
.kv{display:flex; gap:6px; align-items:center;}
.kv b{color:rgba(233,238,252,.92); font-weight:800;}
.teamGrid{
  display:grid;
  grid-template-columns:1fr 34px 1fr;
  gap:10px;
  align-items:start;
}
.vs{
  text-align:center;
  color:rgba(233,238,252,.6);
  font-weight:900;
  padding-top:6px;
}
.teamBox{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.18);
  border-radius:12px;
  padding:8px;
}
.teamTitle{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:900;
  font-size:12px;
  margin-bottom:6px;
  color:rgba(233,238,252,.88);
}
.teamTitle .resultWin{color:#22c55e;}
.teamTitle .resultLose{color:#ef4444;}
.playerRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 6px;
  border-radius:10px;
}
.playerRow + .playerRow{margin-top:4px;}
.pLeft{display:flex; align-items:center; gap:8px; min-width:0;}
.civIcon{
  width:22px;height:22px; border-radius:6px; overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  flex:0 0 auto;
}
.civIcon img{width:100%;height:100%;object-fit:cover;display:block;}
.pName{
  font-weight:800;
  font-size:12px;
  color:rgba(233,238,252,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pElo{
  font-weight:900;
  font-size:12px;
  color:rgba(233,200,120,.92);
  flex:0 0 auto;
}
@media (max-width: 980px){
  .playerSubRow{grid-template-columns:1fr; }
  .teamGrid{grid-template-columns:1fr; }
  .vs{display:none;}
  .musicEmbed iframe{height:152px !important;}
}



/* ==== PATCH v4: Info/Awards/Matches layout refinements ==== */

/* Gold Division + Rank vertical tweak */
:root{
  --gr-divisionShiftY: 4px;
}

/* Info card: fill space better */
.subCard .subTitle{
  font-size: 18px;
  letter-spacing: .2px;
}

.subCard .subIcon{
  font-size: 18px;
}

.infoTop{
  display:flex;
  gap: 14px;
  align-items:flex-start;
}

.infoAvatar{
  width: 96px;
  height: 96px;
  border-radius: 12px; /* square with soft corners */
  overflow:hidden;
  flex: 0 0 96px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

.infoAvatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.infoLines{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 2px;
}

.infoLine{
  font-size: 14.5px;
  color: rgba(233,238,252,.92);
}

.infoLine b{
  font-size: 15px;
}

.infoLine:first-child b{
  font-size: 18px;
}

.badgeOk{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(33,196,93,.18);
  border: 1px solid rgba(33,196,93,.55);
  color: #38d777;
  font-weight: 800;
  margin-right: 8px;
  transform: translateY(1px);
}

/* Awards: dignified layout (no pills) */
.awardsGrid{
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-top: 6px;
}

.awardItem{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.awardMedal{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.awardMedal--fire{
  background: rgba(255,140,0,.10);
  border-color: rgba(255,170,60,.35);
  box-shadow: 0 0 18px rgba(255,140,0,.18);
}

.awardMedal--trophy{
  background: rgba(255,215,0,.10);
  border-color: rgba(255,215,0,.32);
  box-shadow: 0 0 18px rgba(255,215,0,.14);
}

.awardTitle{
  font-weight: 800;
  font-size: 14.5px;
  color: rgba(255,255,255,.95);
}

.awardSub{
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(233,238,252,.70);
}

.awardItem.is-empty{
  opacity: .85;
}

/* Recent matches: premium card like mock */
.recentBlock{
  margin-top: 18px;
}

.matchFrame{
  margin-top: 14px;
  border-radius: 16px;
  padding: 14px;
  background: rgba(7,10,20,.55);
  border: 1px solid rgba(210,170,90,.18);
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.matchFrame__header{
  padding: 6px 6px 12px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.matchHeaderTitle{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
}

.matchNumber{
  margin-top: 8px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  font-weight: 700;
  color: rgba(233,238,252,.90);
}

.matchNumber__num{
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 1.4px;
  color: rgba(255,215,150,.96);
  text-shadow: 0 0 22px rgba(255,160,60,.18);
}

.matchMetaRow{
  margin-top: 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  color: rgba(233,238,252,.78);
  font-size: 13.5px;
}

.matchMetaSep{
  opacity: .55;
}

.matchFrame__inner{
  padding-top: 12px;
}

.teamsShell{
  display:grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: 12px;
  align-items: stretch;
}

.teamCol{
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px;
}

.teamCol__title{
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.9);
  margin-bottom: 10px;
}

.teamPlayer{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}

.teamPlayer:last-child{
  margin-bottom: 0;
}

.teamPlayer__civ{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow:hidden;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  flex: 0 0 44px;
}

.teamPlayer__civ img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.teamPlayer__meta{
  min-width: 0;
  flex: 1 1 auto;
}

.teamPlayer__name{
  font-weight: 900;
  font-size: 14px;
  color: rgba(255,255,255,.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teamPlayer__civName{
  margin-top: 2px;
  font-size: 12.5px;
  color: rgba(233,238,252,.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.teamPlayer__right{
  text-align:right;
  flex: 0 0 auto;
}

.teamPlayer__elo{
  font-size: 12.5px;
  color: rgba(233,238,252,.72);
}

.teamPlayer__res{
  margin-top: 4px;
  font-weight: 900;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  display:inline-block;
  border: 1px solid rgba(255,255,255,.12);
}

.teamPlayer__res.is-win{
  color: rgba(110,255,175,.95);
  background: rgba(50,190,110,.10);
  border-color: rgba(50,190,110,.32);
}

.teamPlayer__res.is-lose{
  color: rgba(255,130,130,.95);
  background: rgba(220,70,70,.10);
  border-color: rgba(220,70,70,.30);
}

.teamPlayer__res.is-abandon{
  color: rgba(255,190,120,.95);
  background: rgba(255,170,60,.10);
  border-color: rgba(255,170,60,.32);
}

.teamPlayer__res.is-neutral{
  color: rgba(233,238,252,.70);
  background: rgba(233,238,252,.06);
  border-color: rgba(233,238,252,.18);
}

.versusMid{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.versusBadge{
  font-weight: 950;
  font-size: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  letter-spacing: .6px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  text-transform: uppercase;
}

.versusBadge.is-win{
  color: rgba(110,255,175,.95);
  box-shadow: 0 0 22px rgba(50,190,110,.14);
  border-color: rgba(50,190,110,.28);
}

.versusBadge.is-lose{
  color: rgba(255,130,130,.95);
  box-shadow: 0 0 22px rgba(220,70,70,.12);
  border-color: rgba(220,70,70,.26);
}

.versusText{
  font-weight: 900;
  color: rgba(233,238,252,.55);
  letter-spacing: 2px;
}

.matchActions{
  display:flex;
  justify-content:center;
  margin-top: 12px;
}

.btnMatch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 14px;
  border: 1px solid rgba(210,170,90,.28);
  background: rgba(210,170,90,.10);
  color: rgba(255,240,210,.94);
  font-weight: 900;
  text-decoration:none;
}

.btnMatch:hover{
  background: rgba(210,170,90,.14);
  border-color: rgba(210,170,90,.36);
}

/* Responsive */
@media (max-width: 980px){
  .teamsShell{ grid-template-columns: 1fr; }
  .versusMid{ flex-direction: row; }
}


/* === Player UI fixes (Recent matches + Info/Music/Awards layout) === */

/* Breadcrumb actions (Compartir / Reportar) */
.gr-breadcrumb{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.gr-breadcrumb__left{display:flex; align-items:center; gap:10px;}
.gr-breadcrumb__actions{display:flex; align-items:center; gap:10px;}
.crumbBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.3px;
  text-decoration:none;
  cursor:pointer;
  border:1px solid rgba(233,200,120,.38);
  background:rgba(10,14,26,.55);
  color:rgba(233,238,252,.92);
}
.crumbBtn.is-copied{
  border-color: rgba(120,255,180,.55);
  box-shadow: 0 0 0 1px rgba(120,255,180,.25) inset, 0 10px 26px rgba(0,0,0,.35);
}
.crumbBtn--report{
  border-color: rgba(255,90,90,.45);
  color: rgba(255,180,180,.95);
}

/* Configurar perfil button in topbar */
.nav__link--btn{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(233,200,120,.35);
  background:rgba(10,14,26,.45);
  font-weight:900;
  font-size:12px;
}

/* Info card avatar moved to top-right */
.infoTop{ position:relative; min-height:112px; }
.subCard--info .infoLines{ padding-right:108px; }
.infoAvatar{
  position:absolute;
  top:6px;
  right:10px;
  width:86px;
  height:86px;
  border-radius:18px;
  overflow:hidden;
  border:2px solid rgba(233,200,120,.55);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}
.infoAvatar img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Music placeholder so the card never disappears */
.musicPlaceholder{
  height:152px;
  min-height:152px;
  border-radius:14px;
  border:1px dashed rgba(233,200,120,.25);
  background:rgba(10,14,26,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  text-align:center;
  padding:14px;
}
.musicPlaceholder__title{ font-weight:900; letter-spacing:.2px; }
.musicPlaceholder__sub{ font-size:12px; opacity:.8; }

/* Recent matches: clearer separation + top-right button */
.matchFrame{
  border:1px solid rgba(233,200,120,.40);
  box-shadow:0 18px 50px rgba(0,0,0,.38) inset, 0 14px 40px rgba(0,0,0,.45);
  position:relative;
}
.matchFrame + .matchFrame{ margin-top:14px; }
.matchFrame::after{
  content:"";
  position:absolute;
  left:14px; right:14px;
  bottom:-8px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(233,200,120,.28), transparent);
}
.matchFrame:last-of-type::after{ display:none; }

.matchFrame__header{ position:relative; padding-top:18px; }
.matchTopActions{
  position:absolute;
  top:12px;
  right:14px;
}
.btnMatch--top{
  padding:8px 12px;
  border-radius:12px;
  font-size:12px;
  font-weight:900;
}

/* Center ranked pill under meta */
.matchPills{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:10px;
}
.pillLive{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.35px;
  border:1px solid rgba(120,255,180,.35);
  background:rgba(10,14,26,.45);
  color:rgba(120,255,180,.95);
}
.pillLive .liveDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(120,255,180,.95);
  box-shadow:0 0 0 0 rgba(120,255,180,.55);
  animation:livePulse 1.1s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(120,255,180,.55); opacity:1; }
  70%{ box-shadow:0 0 0 10px rgba(120,255,180,0); opacity:.9; }
  100%{ box-shadow:0 0 0 0 rgba(120,255,180,0); opacity:1; }
}
.pillRanked{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  letter-spacing:.35px;
  border:1px solid rgba(233,200,120,.35);
  background:rgba(10,14,26,.45);
}
.pillRanked--ranked{
  border-color: rgba(120,255,180,.35);
}
.pillRanked--unranked{
  border-color: rgba(233,200,120,.35);
}

.pillRanked--progress,
.pillRanked--live{
  color: rgba(120,255,180,.95);
  border-color: rgba(120,255,180,.35);
}
.pillRanked--abandon{
  color: rgba(255,206,132,.98);
  border-color: rgba(255,190,102,.44);
  background: rgba(255,166,77,.12);
  box-shadow: inset 0 0 0 1px rgba(255,214,153,.08), 0 0 18px rgba(255,166,77,.10);
}
.pillRanked .liveDot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(120,255,180,.95);
  box-shadow:0 0 0 0 rgba(120,255,180,.55);
  animation:livePulse 1.1s infinite;
  display:inline-block;
  margin-right:8px;
}

/* Player slot colors (AoE típico) */
.playerSlot{ font-weight:900; }
.playerSlot.p1{ color:#3b82f6; }  /* blue */
.playerSlot.p2{ color:#ef4444; }  /* red */
.playerSlot.p3{ color:#22c55e; }  /* green */
.playerSlot.p4{ color:#facc15; }  /* yellow */
.playerSlot.p5{ color:#06b6d4; }  /* cyan */
.playerSlot.p6{ color:#a855f7; }  /* purple */
.playerSlot.p7{ color:#9ca3af; }  /* gray */
.playerSlot.p8{ color:#fb923c; }  /* orange */

/* ELO delta colors */
.eloDelta{
  margin-left:6px;
  font-weight:900;
}
.eloDelta.is-pos{ color: rgba(120,255,180,.95); }
.eloDelta.is-neg{ color: rgba(255,110,110,.95); }


/* ===== Player sub rows layout update ===== */
.playerSubRow.playerSubRow--info{
  grid-template-columns: 1fr;
}
.playerSubRow.playerSubRow--bottom{
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

/* reduce height ~20px for music + awards */
.subCard--music .musicEmbed iframe{
  height: 152px !important;
}
.subCard--music{ }
.subCard--awards .subBody{
  padding-top: 8px;
}

/* Settings icon menu */
.settingsWrap{ position: relative; display:flex; align-items:center; }
.settingsBtn{
  all: unset;
  cursor: pointer;
  width: 34px; height: 34px;
  display:grid; place-items:center;
  border-radius: 10px;
  border:1px solid rgba(233,200,120,.25);
  background: rgba(10,14,26,.55);
}
.settingsBtn img{ width:20px; height:20px; opacity:.95; }
.settingsBtn:hover{ border-color: rgba(233,200,120,.55); }
.settingsMenu{
  position:absolute;
  top: 44px;
  right: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 12px;
  border:1px solid rgba(233,200,120,.28);
  background: rgba(10,14,26,.92);
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
  display:none;
  z-index: 9999;
}
.settingsMenu.is-open{ display:block; }
.settingsItem{
  display:flex;
  padding: 10px 10px;
  border-radius: 10px;
  color: #e8eefc;
  text-decoration:none;
  font-weight: 700;
  letter-spacing:.2px;
}
.settingsItem:hover{ background: rgba(233,200,120,.10); }

/* Info statuses */
.statusLine{ display:inline-flex; align-items:center; gap:8px; font-weight:800; }
.statusLine--ok{ color:#bff7c8; }
.statusLine--bad{ color:#ffb6b6; }

/* Top Allies / Enemies */
.aeBlock{
  margin-top: 10px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(233,200,120,.18);
}
.aeTitle{
  font-weight: 900;
  color: rgba(233,200,120,.95);
  font-size: 12px;
  letter-spacing:.4px;
  margin-bottom:6px;
}
.aeList{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.aeList li{ display:flex; justify-content:space-between; gap:10px; }
.aeList a{ color:#e8eefc; text-decoration:none; font-weight:700; }
.aeList a:hover{ text-decoration:underline; }
.aeCount{ color: rgba(233,200,120,.9); font-weight:900; }
.aeEmpty{ color: rgba(232,238,252,.65); font-weight:700; }

/* Mini button in card headers */
.miniBtn{
  display:grid;
  place-items:center;
  width: 34px;
  height: 28px;
  border-radius: 10px;
  border:1px solid rgba(233,200,120,.25);
  background: rgba(10,14,26,.45);
  color:#e8eefc;
  text-decoration:none;
  font-weight:900;
}
.miniBtn:hover{
  border-color: rgba(233,200,120,.55);
  background: rgba(233,200,120,.10);
}


/* ===== Configurar perfil UI helpers ===== */
.formGrid{ display:grid; gap:14px; }
.formRow{ display:grid; gap:6px; }
.formLabel{ font-weight:900; color: rgba(233,200,120,.95); font-size:12px; letter-spacing:.4px; }
.formInput, .formTextarea, select.formInput{
  width:100%;
  border-radius: 12px;
  border:1px solid rgba(233,200,120,.22);
  background: rgba(10,14,26,.45);
  color:#e8eefc;
  padding: 10px 12px;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline:none;
}
.formTextarea{ resize: vertical; min-height: 92px; }
.formInput:disabled, .formTextarea:disabled, select.formInput:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.formHint{ color: rgba(232,238,252,.65); font-size:12px; }
.formHint.warn{ color: rgba(255,198,120,.92); font-weight:800; }
.photoRow{ display:grid; grid-template-columns: 120px 1fr; gap:12px; align-items:center; }
.photoBox{
  width:120px; height:120px;
  border-radius: 16px;
  border:1px solid rgba(233,200,120,.22);
  background: rgba(10,14,26,.35);
  overflow:hidden;
  display:grid; place-items:center;
}
.photoBox img{ width:100%; height:100%; object-fit:cover; }
.photoPh{ color: rgba(232,238,252,.55); font-weight:900; font-size:12px; }
.linksGrid{ display:grid; gap:10px; }
.linkRow{ display:grid; grid-template-columns: 28px 1fr; gap:10px; align-items:center; }
.linkIcon{ width:24px; height:24px; opacity:.95; }


/* ===== Configurar Perfil: País con bandera ===== */
.countryPicker{
  display:flex;
  align-items:center;
  gap:10px;
}
.countryPicker__flag{
  width:34px;height:24px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.countryPicker__flag img{
  width:100%;height:100%;object-fit:cover;
  opacity:.9;
}
.formHint{
  margin-top:6px;
  font-size:12px;
  color:rgba(233,238,252,.62);
}

/* ===== Información: layout nuevo (avatar abajo del nombre + aliados/enemigos a la derecha) ===== */
.infoTop--grid{
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:14px;
  align-items:start;
}
.infoAvatar--below{
  margin:10px 0 12px;
  width:76px;height:76px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
}
.infoAvatar--below img{width:100%;height:100%;object-fit:cover;display:block}
.statusIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;height:18px;
  border-radius:6px;
  margin-left:8px;
  font-weight:900;
  line-height:1;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
}
.statusIcon--ok{ color:#38d173; }
.statusIcon--bad{ color:#ff5d5d; }
.flagIcon{
  width:22px;height:16px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.14);
  margin:0 8px 0 8px;
  vertical-align:middle;
  object-fit:cover;
}
.aeBlock--right{
  margin-top:2px;
}
@media (max-width: 860px){
  .infoTop--grid{ grid-template-columns:1fr; }
}

/* ===== Compactar Tema Musical / Awards (mitad de altura) ===== */
.subCard--music .subBody,
.subCard--awards .subBody{
  padding:12px 14px;
}
.subCard--music .musicEmbed iframe{
  height:152px !important;
}
.subCard--music .musicPlaceholder{
  padding:12px 12px;
}
.awardsGrid{
  gap:10px;
}
.awardItem{
  padding:10px 10px;
}


/* =========================
   PLAYER HERO V2 (BANNER)
   ========================= */
.playerHeroV2{
  position: relative;
  width: 100%;
  /* full-bleed without 100vw overflow (zoom/scrollbar safe) */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 55px rgba(0,0,0,.55);
  background: #000;
  padding: 22px 34px 38px 34px;
}

.playerHeroV2__overlay{
  position:absolute; inset:0;
  background: none;
  pointer-events:none;
}

.playerHeroV2__top{
  position: relative;
  z-index: 2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  padding-left: 6px; /* empuja más hacia la izquierda sin pegar al borde */
}

.playerHeroV2__topLeft{
  display:flex;
  align-items:center;
  gap: 16px;
  min-width: 0;
}

.playerHeroV2__avatar{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: 0 10px 28px rgba(0,0,0,.55);
  flex: 0 0 auto;
}

.playerHeroV2__avatar img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.playerHeroV2__titleBlock{
  min-width: 0;
}

.playerHeroV2__name{
  font-size: 44px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .3px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 10px 30px rgba(0,0,0,.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(720px, 64vw);
}

.playerHeroV2__subtitle{
  margin-top: 4px;
  font-size: 18px;
  color: rgba(255,255,255,.68);
}

.playerHeroV2__bio{
  margin-top: 8px;
  font-size: 15px;
  color: rgba(255,255,255,.74);
  max-width: min(760px, 70vw);
  line-height: 1.35;
}

.playerHeroV2__topRight{
  display:flex;
  gap: 10px;
  align-items:center;
  flex: 0 0 auto;
}

.playerHeroV2__center{
  position: relative;
  z-index: 2;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  padding-top: 12px;           /* SUBE el bloque central */
  transform: translateY(-14px);/* un poquito más arriba */
}

.playerHeroV2__helmetWrap{
  width: 360px;
  max-width: 68vw;
  display:flex;
  align-items:center;
  justify-content:center;
  filter: drop-shadow(0 18px 45px rgba(0,0,0,.65));
  margin-top: 8px;
}

.playerHeroV2__helmet{
  width: 100%;
  height: auto;
  display:block;
}

.playerHeroV2__division{
  margin-top: 6px;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,210,120,.95);
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.playerHeroV2__meta{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 14px;
  font-weight: 800;
  color: rgba(255,255,255,.82);
  text-shadow: 0 10px 26px rgba(0,0,0,.55);
}

.playerHeroV2__elo{
  font-size: 28px;
  letter-spacing: 1px;
}

.playerHeroV2__rank{
  font-size: 20px;
  color: rgba(255,255,255,.72);
}

.playerHeroV2__metaSep{
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.22);
}

/* Responsive */
@media (max-width: 860px){
  .playerHeroV2{
    border-radius: 16px;
    padding: 18px 16px 30px 16px;
  }
  .playerHeroV2__top{
    flex-direction: column;
    align-items:flex-start;
    gap: 12px;
  }
  .playerHeroV2__topRight{
    width: 100%;
    justify-content:flex-start;
  }
  .playerHeroV2__name{
    font-size: 36px;
    max-width: 92vw;
  }
  .playerHeroV2__center{
    transform: translateY(-10px);
  }
  .playerHeroV2__division{
    font-size: 26px;
  }
}


/* Player page: hero row should be single column so full-bleed hero doesn't get clipped */
.hero-row--player{
  grid-template-columns: 1fr;
}


/* Black ring behind helmet (like previous circle) */
.playerHeroV2__helmetWrap{
  position: relative;
}
.playerHeroV2__helmetWrap::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%,-52%);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.85);
  box-shadow:
    0 0 0 10px rgba(0,0,0,.22),
    0 18px 60px rgba(0,0,0,.55);
  opacity: .92;
  z-index: 0;
}
.playerHeroV2__helmet{
  position: relative;
  z-index: 1;
}



/* === Player Hero (v20.17 patch) - Tarjeta compacta estilo mockup === */
.playerHeroV2.playerHeroV2--compact{
  padding: 18px 0 10px;
  min-height: unset !important;
}

/*
  Compact hero: SIN sombra/vinieta sobre el wallpaper.
  El usuario pidió ver el wallpaper "directo" (sin velo negro).
*/
.playerHeroV2.playerHeroV2--compact .playerHeroV2__overlay{
  display: none !important;
  background: transparent !important;
}

.playerHeroV2__card{
  width: min(520px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

.phCard__header{
  padding: 14px 18px 10px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.phCard__name{
  font-weight: 900;
  letter-spacing: .5px;
  font-size: 28px;
  line-height: 1.05;
  text-transform: none;
}

.phCard__bio{
  margin-top: 6px;
  font-size: 12px;
  opacity: .85;
  letter-spacing: .2px;
}

.phCard__division{
  text-align: center;
  padding: 10px 18px;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  /* reutiliza el mismo tono del texto dorado de division */
  color: var(--goldText, #D7B56D);
}

.phCard__helmetArea{
  display: grid;
  place-items: center;
  padding: 16px 0 18px;
}

/* === Barrido (helmetSweep) ===
   Nota: el efecto se aplica al contenedor (no al <img>) para que el pseudo-elemento funcione en todos los navegadores.
*/
.helmetsweep{
  position: relative;
  overflow: hidden;
}

.helmetsweep::after{
  content:"";
  position:absolute;
  top:-35%;
  left:-140%;
  width:80%;
  height:170%;
  transform: rotate(20deg);
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.12) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.12) 65%,
    rgba(255,255,255,0) 100%
  );
  mix-blend-mode: screen;
  opacity:0;
  pointer-events:none;
  z-index:3;
  animation: helmetSweep 10s linear infinite;
}

@media (prefers-reduced-motion: reduce){
  .helmetsweep::after{ animation:none !important; }
}


.phCard__helmet{
  position: relative;
  z-index: 2;
width: 210px;
  max-width: 70%;
  height: auto;
  /* Base (sin FX extra) */
  filter: drop-shadow(0 10px 25px rgba(0,0,0,.55));

  will-change: filter;
  /* Solo barrido: sin glow ni otros FX */
  animation: none;
}
@media (prefers-reduced-motion: reduce){
  .phCard__helmet{ animation: none !important; }
}


/* === Helmet FX (Player Hero): SOLO la imagen del casco ===
   El usuario solicitó que el destello NO afecte al contenedor (padding/círculo/fondo),
   únicamente al propio PNG del casco.
*/
#playerHeroHelmet{
  /* Destello suave cada 10s, sin afectar el contenedor */
  animation: helmetSparkOnly 10s ease-in-out infinite;
  will-change: filter, transform;
}

@keyframes helmetSparkOnly{
  /* La mayor parte del tiempo: normal */
  0%, 82%{
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.55)) brightness(1) contrast(1);
    transform: translateZ(0) scale(1);
  }
  /* Arranque del destello */
  84%{
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.58)) brightness(1.08) contrast(1.05);
  }
  /* Pico (muy corto) */
  86%{
    filter: drop-shadow(0 14px 32px rgba(0,0,0,.62)) brightness(1.22) contrast(1.12);
    transform: translateZ(0) scale(1.01);
  }
  /* Apagado rápido */
  88%{
    filter: drop-shadow(0 12px 28px rgba(0,0,0,.58)) brightness(1.08) contrast(1.05);
    transform: translateZ(0) scale(1);
  }
  /* Regresa a normal */
  92%, 100%{
    filter: drop-shadow(0 10px 25px rgba(0,0,0,.55)) brightness(1) contrast(1);
    transform: translateZ(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce){
  #playerHeroHelmet{ animation: none !important; }
}

.phCard__stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.phStat{
  position: relative;
  padding: 10px 10px 12px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.phStat:nth-child(3n){ border-right: none; }
.phStat:nth-last-child(-n+3){ border-bottom: none; }

.phStat__value{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: .3px;
}

.phStat__label{
  margin-top: 6px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 1.4px;
  opacity: .85;
}

.phStat__value--elo{
  color: var(--goldText, #D7B56D);
}

.phStreak{
  position: absolute;
  top: 6px;
  right: 8px;
  font-weight: 900;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
}
.phStreak--pos{ color: #4DFF8A; }
.phStreak--neg{ color: #FF4D4D; }

/* Reduce espacio vertical general del breakout para que el hero ocupe casi solo la tarjeta */
.hero-breakout{
  padding-top: 8px !important;
  padding-bottom: 6px !important;
}



/* ===========================
   Player Hero Grid (Info + Center + Awards + Spotify)
   =========================== */
.playerHeroV2__grid{
  --hero-gap: 18px;
  /* Altura fija para las tarjetas inferiores (History ELO y Aliados/Enemigos)
     para que mantengan consistencia visual y no cambien de tamaño. */
  --hero-under-h: 260px;
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 300px minmax(440px, 520px) 300px;
  /*
    Layout solicitado (según diagrama):
      [INFO]      [CENTRAL (span 2 rows)]      [AWARDS]
      [HISTORY]   [CENTRAL (span 2 rows)]      [ALLIES/ENEMIES]
                  [TEMA MUSICAL]
  */
  grid-template-rows: auto auto;
  grid-template-areas:
    "info center awards"
    "elo  center ae";
  gap: var(--hero-gap);
  padding-inline: var(--hero-gap); /* mismo espacio externo que el interno */
  box-sizing: border-box;
  align-items: start;
  justify-content: center;
}

.heroSide--left{ grid-area: info; }
.heroSide--right{ grid-area: awards; }
.heroUnder--elo{ grid-area: elo; }
.heroUnder--ae{ grid-area: ae; }
.heroUnder--spotify{ }
.heroCenter{ grid-area: center; }

.heroCenterStack{
  grid-area: center;
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
  min-width: 0;
  /*
    Mantener la card central EXACTAMENTE del mismo ancho que “Tema Musical”.
    Se fija el ancho del stack (centro) para que ambas tarjetas compartan
    el mismo contenedor y no existan diferencias visuales.
  */
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

/* El centro ya no es item de grid; se usa dentro del stack */
.heroCenterCard{
  width: 100%;
}

/* Evita que History/Aliados se estiren por la altura del centro (que ahora incluye Spotify) */
.heroUnder--elo,
.heroUnder--ae{
  align-self: start;
}

/* Spotify ya no ocupa un área de grid independiente */
.heroUnder--spotify{
  grid-area: auto;
  min-width: 0;
}

/* Asegura que Awards e Información tengan la misma altura en la fila superior */
.heroSide--left,
.heroSide--right{
  align-self: stretch;
}
.heroSide--left .heroCard,
.heroSide--right .heroCard{
  height: 100%;
}

/* Nombre largo en Información: no rompe el layout */
.heroInfo__name{
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



/* Center card spans rows 1-2 */
.playerHeroV2__card.heroCenter{ grid-column: 2; grid-row: 1 / span 2; }

/* Override center card auto centering when inside grid */
.playerHeroV2__card.heroCenter{
  margin: 0;
  width: 100%;
  max-width: 520px;
}

/* Shared card style */
.heroCard{
  height: 100%;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
  display: flex;
  flex-direction: column;
}

/* Tarjetas inferiores: altura fija para igualar History ELO vs Aliados/Enemigos */
.heroCard.heroCard--elo,
.heroCard.heroCard--ae{
  height: var(--hero-under-h);
}

.heroCard__title{
  padding: 18px 18px 14px 18px;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: .3px;
  color: rgba(232, 199, 120, .95);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.heroCard__title--small{
  padding: 12px 14px 10px 14px;
  font-size: 22px;
  font-weight: 900;
}
.heroCard__title--small .subIcon{font-size: 18px;}

/* Título especial para Aliados/Enemigos: más compacto y con espadas a la derecha */
.heroCard__title--ae{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 20px;
}
.heroCard__title--ae .aeSwords{
  font-size: 20px;
  line-height: 1;
  opacity: .95;
}

/* Información (reacomodo v29) */
.heroCard--info .heroCard__title{
  text-align: center;
}

.heroInfoV3{
  padding: 8px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
}

/* Nombre del jugador: ocupa todo el ancho y soporta nombres largos */
.heroInfoV3__name{
  padding: 12px 6px 10px;
  font-size: 26px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  line-height: 1.12;
  text-align: center;
  word-break: break-word;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* separador ligero entre filas */
.heroInfoV3__sep{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 8px 0;
}

/* Twitch / YouTube */
.heroInfoV3__socialRow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.heroInfoV3__socialBtn{
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-decoration: none;
  color: rgba(255,255,255,.90);
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.heroInfoV3__socialBtn img{ width: 20px; height: 20px; object-fit: contain; opacity: .95; }
.heroInfoV3__socialBtn:hover{ border-color: rgba(232,199,120,.35); }

/* Avatar (cuadrado) + estados */
.heroInfoV3__avatarStatus{
  display: grid;
  /* más espacio al avatar */
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: center;
}

.heroInfoV3__avatarSquare{
  /* tamaño base del avatar (thumb) */
  --thumb: 104px;
  width: var(--thumb);
  height: var(--thumb);
  border-radius: 10px; /* cuadrado con esquinas suaves */
  overflow: visible; /* permite el zoom por fuera */
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  position: relative;
  cursor: zoom-in;
}

/* thumb (recorte) */
.heroInfoV3__avatarThumb{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
}
.heroInfoV3__avatarThumb img{ width:100%; height:100%; object-fit: cover; display:block; }

/* El zoom antiguo por hover quedaba descentrado.
   Se reemplaza por un modal centrado (ver .avatar-modal). */
.heroInfoV3__avatarZoom{ display:none !important; }

.heroInfoV3__avatarSquare::after{
  content: "🔍";
  position:absolute;
  right:6px;
  bottom:6px;
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
  font-size: 14px;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events:none;
}
.heroInfoV3__avatarSquare:hover::after{
  opacity: 1;
  transform: scale(1);
}

/* ===== Avatar modal (zoom centrado) ===== */
.avatar-modal{
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
}
.avatar-modal.is-open{ display:block; }

.avatar-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}

.avatar-modal__content{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(520px, 92vw);
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  box-shadow: 0 28px 90px rgba(0,0,0,.85);
}

.avatar-modal__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.avatar-modal__close{
  position:absolute;
  right:10px;
  top:10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  color: rgba(255,255,255,.92);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.avatar-modal__close:hover{ border-color: rgba(232,199,120,.35); }


.heroInfoV3__statusCol{
  display: grid;
  gap: 8px;
  justify-items: end; /* todo lo más a la derecha posible */
}

.heroInfoV3__statusLine{
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap: 10px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
}
.heroInfoV3__statusLine .k{ opacity:.92; margin-left:auto; text-align:right; }
.heroInfoV3__statusLine .v{ font-weight: 900; color: rgba(255,255,255,.92); }


/* Pills (Registrado / Verificado) + icono afuera (como en el ejemplo) */
.heroInfoV3__statusLine .statusPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.28);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  letter-spacing: .3px;
  white-space: nowrap;
  line-height: 1;
}

.heroInfoV3__statusLine .statusMark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  font-weight: 900;
  line-height: 1;
}

.heroInfoV3__statusLine .statusMark--ok{ color:#38d173; border-color: rgba(56,209,115,.35); }
.heroInfoV3__statusLine .statusMark--bad{ color:#ff5d5d; border-color: rgba(255,93,93,.35); }
/* filas clave/valor */
.heroInfoV3__kv{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 2px;
  color: rgba(255,255,255,.78);
  font-size: 13px;
}
.heroInfoV3__kv .k{ opacity:.92; }
.heroInfoV3__kv .v{ font-weight: 900; color: rgba(255,255,255,.92); }


/* Awards */
.heroCard--awards{
  background: rgba(0,0,0,.82);
  backdrop-filter: none;
  border: 1px solid rgba(255,215,90,.22);
  box-shadow: 0 18px 46px rgba(0,0,0,.44), inset 0 0 0 1px rgba(255,215,90,.05);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.heroCard--awards:hover{
  border-color: rgba(255,215,90,.42);
  box-shadow: 0 22px 54px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,215,90,.12);
  transform: translateY(-2px);
}
.heroAwards__body{
  padding: 10px 10px 12px;
  display:flex;
  flex:1;
  flex-direction:column;
  justify-content:center;
  gap:12px;
  min-height:0;
}
.heroAwards__viewport{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
}
.heroAwards__slide{
  display:none;
  width:100%;
  max-width:372px;
  margin:0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}
.heroAwards__slide.is-active{
  display:flex;
}
.heroAwards__empty{
  margin:auto;
  text-align:center;
  color:rgba(255,255,255,.78);
}
.heroAwards__emptyTitle{
  font-size:22px;
  font-weight:900;
  color:rgba(255,255,255,.92);
}
.heroAwards__emptySub{
  margin-top:8px;
  font-size:13px;
  opacity:.8;
}
.heroAwards__mediaBox,
.heroAwards__descBox{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.94);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.24);
  text-decoration:none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}
.heroAwards__mediaBox:focus-visible,
.heroAwards__descBox:focus-visible{
  border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03), 0 10px 24px rgba(0,0,0,.24);
  transform: none;
  background: rgba(0,0,0,.94);
  outline:none;
}
.heroAwards__mediaBox{
  min-height:188px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.heroAwards__mediaInner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.heroAwards__img{
  width:100%;
  max-width:176px;
  max-height:170px;
  object-fit:contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.32));
}
.heroAwards__icon{
  font-size:56px;
  line-height:1;
}
.heroAwards__descBox{
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 16px;
}
.heroAwards__descTitle{
  font-size:24px;
  font-weight:900;
  letter-spacing:.5px;
  color:rgba(255,241,214,.98);
  text-transform:uppercase;
  line-height:1.05;
}
.heroAwards__descValue{
  margin-top:8px;
  font-size:20px;
  font-weight:800;
  color:rgba(255,255,255,.94);
  line-height:1.1;
}
.heroAwards__descMeta{
  margin-top:6px;
  font-size:16px;
  font-weight:700;
  color:rgba(232,199,120,.96);
  line-height:1.1;
}
.heroAwards__pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.heroAwards__arrow{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(8,8,8,.94);
  color: rgba(255,241,214,.96);
  font-size:18px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.heroAwards__arrow:hover{
  transform: translateY(-1px);
  border-color: rgba(255,215,90,.42);
  background: rgba(18,18,18,.98);
  box-shadow: 0 10px 22px rgba(0,0,0,.26);
}
.heroAwards__arrow:disabled{
  opacity:.45;
  cursor:default;
  transform:none;
  box-shadow:none;
}
@media (max-width: 640px){
  .heroAwards__body{
    padding:8px 8px 10px;
    gap:10px;
  }
  .heroAwards__slide{
    max-width:300px;
    gap:10px;
  }
  .heroAwards__mediaBox{
    min-height:154px;
    padding:8px;
  }
  .heroAwards__img{
    max-width:138px;
    max-height:132px;
  }
  .heroAwards__icon{
    font-size:40px;
  }
  .heroAwards__descBox{
    min-height:96px;
    padding:12px 14px;
  }
  .heroAwards__descTitle{
    font-size:20px;
  }
  .heroAwards__descValue{
    font-size:17px;
  }
  .heroAwards__descMeta{
    font-size:14px;
  }
}


/* ===== v14 player recent matches + elo chart upgrades ===== */
.heroElo__chart{ position:relative; border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:8px; height:136px; overflow:hidden; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.12)); }
.heroElo__chart svg{ width:100%; height:100%; display:block; }
.heroElo__line{ fill:none; stroke:rgba(215,184,116,.92); stroke-width:2.8; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 10px rgba(215,184,116,.18)); }
.heroElo__grid{ stroke:rgba(255,255,255,.10); stroke-width:1; }
.heroElo__axisLabel{ fill:rgba(233,238,252,.65); font-size:10px; font-weight:700; }
.heroElo__marker{ fill:#f2d28a; stroke:rgba(15,18,28,.92); stroke-width:1.2; cursor:pointer; }
.heroElo__marker:hover{ r:4.4; }
.heroElo__tooltip{ position:absolute; z-index:3; min-width:92px; padding:7px 10px; border-radius:10px; background:rgba(8,12,22,.94); border:1px solid rgba(233,200,120,.30); box-shadow:0 10px 24px rgba(0,0,0,.35); color:rgba(255,255,255,.96); font-size:11px; pointer-events:none; transform:translate(-50%,-100%); }
.heroElo__tooltip strong{ display:block; font-size:12px; font-weight:900; color:#f1d184; }
.heroElo__tooltip span{ display:block; margin-top:2px; color:rgba(233,238,252,.72); }
.heroElo__hint{ position:absolute; inset:auto 0 8px 0; text-align:center; color:rgba(255,255,255,.55); font-size:12px; }

.teamsShell--mainStyle{ grid-template-columns:1fr 130px 1fr; gap:18px; align-items:center; }
.teamCol.lmTeam{ position:relative; border-radius:18px; padding:12px 14px; background:radial-gradient(circle at top, rgba(255,255,255,.06), rgba(8,12,22,.58)); overflow:hidden; }
.teamCol.lmTeam::before{ content:""; position:absolute; inset:0; border-radius:18px; pointer-events:none; }
.teamCol.lmTeam.lmTeam--blue{ border:1px solid rgba(79,146,255,.34); box-shadow:inset 0 0 0 1px rgba(79,146,255,.12), 0 0 26px rgba(45,97,196,.08); }
.teamCol.lmTeam.lmTeam--blue::before{ box-shadow:inset 3px 0 0 rgba(84,160,255,.88); }
.teamCol.lmTeam.lmTeam--red{ border:1px solid rgba(255,162,71,.34); box-shadow:inset 0 0 0 1px rgba(255,162,71,.12), 0 0 26px rgba(255,140,45,.08); }
.teamCol.lmTeam.lmTeam--red::before{ box-shadow:inset -3px 0 0 rgba(255,154,61,.92); }
.teamCol.lmTeam .lmTeamTitle{ font-size:13px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:12px; color:rgba(255,255,255,.92); }
.versusMid--mainStyle{ justify-content:center; align-items:center; }
.versusBadge--mainStyle{ font-size:34px; line-height:1; padding:0; border:none; background:transparent; color:rgba(255,255,255,.96); text-shadow:0 0 22px rgba(255,255,255,.12); box-shadow:none; }
.lmPlayer{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:rgba(6,10,20,.34); border:1px solid rgba(255,255,255,.08); }
.lmPlayer + .lmPlayer{ margin-top:9px; }
.lmPlayer__name{ font-size:14px; }
.lmPlayer__sub{ margin-top:2px; font-size:12.5px; color:rgba(233,238,252,.70); }
.lmPlayer__elo{ font-size:12.5px; color:rgba(233,238,252,.74); }
.lmPlayer__res{ margin-top:5px; }
.slotRing{ position:relative; box-shadow:0 0 0 1px rgba(255,255,255,.08) inset; }
.slotRing::after{ content:""; position:absolute; inset:0; border-radius:12px; pointer-events:none; box-shadow:inset 0 0 0 2px var(--slotColor, rgba(255,255,255,.3)), 0 0 18px color-mix(in srgb, var(--slotColor, #fff) 26%, transparent); }
.slotRing--p1{ --slotColor:#3b82f6; }
.slotRing--p2{ --slotColor:#ef4444; }
.slotRing--p3{ --slotColor:#22c55e; }
.slotRing--p4{ --slotColor:#facc15; }
.slotRing--p5{ --slotColor:#06b6d4; }
.slotRing--p6{ --slotColor:#a855f7; }
.slotRing--p7{ --slotColor:#9ca3af; }
.slotRing--p8{ --slotColor:#fb923c; }

@media (max-width: 980px){
  .teamsShell--mainStyle{ grid-template-columns:1fr; gap:12px; }
  .versusBadge--mainStyle{ font-size:28px; }
}


/* ===== Patch player page v15 ===== */
.heroElo__meta{ justify-content:flex-start; gap:6px; margin-bottom:5px; }
.heroElo__metaLabel{ font-size:12px; line-height:1; }
.heroElo__metaValue{ font-size:12px; line-height:1; }
.heroElo__chart{ height:132px; }
.heroElo__line{ fill:none; stroke:rgba(215,184,116,.92); stroke-width:2.8; stroke-linejoin:round; stroke-linecap:round; filter:drop-shadow(0 0 10px rgba(215,184,116,.18)); }
.heroElo__axisLabel{ fill:rgba(233,238,252,.68); font-size:10px; font-weight:700; }
.heroElo__grid{ stroke:rgba(255,255,255,.10); stroke-width:1; }

.teamCol.lmTeam{ border:1px solid rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 0 20px rgba(0,0,0,.10); }
.teamCol.lmTeam::before{ content:""; position:absolute; top:0; bottom:0; width:3px; border-radius:10px; pointer-events:none; }
.teamCol.lmTeam.lmTeam--blue{ border-color:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 0 20px rgba(0,0,0,.10); }
.teamCol.lmTeam.lmTeam--blue::before{ left:0; right:auto; width:3px; background:linear-gradient(180deg, rgba(84,160,255,.96), rgba(45,110,255,.72)); box-shadow:0 0 14px rgba(84,160,255,.30); }
.teamCol.lmTeam.lmTeam--red{ border-color:rgba(255,255,255,.10); box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 0 20px rgba(0,0,0,.10); }
.teamCol.lmTeam.lmTeam--red::before{ right:0; left:auto; width:3px; background:linear-gradient(180deg, rgba(255,183,94,.96), rgba(255,140,45,.76)); box-shadow:0 0 14px rgba(255,154,61,.30); }

.lmPlayer__name{ font-size:14px; font-weight:800; color:rgba(255,255,255,.96); }
.lmPlayer__sub{ margin-top:3px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(215,184,116,.82); }


/* === Recent matches refinado v47.6 === */
.recentBlock{
  border-color: rgba(160,168,182,.32);
  background: rgba(9,12,22,.58);
}
.recentHeader{
  border-bottom: 1px solid rgba(160,168,182,.22);
}
.recentHeader.recentHeader--mainTitle{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:14px;
  padding:14px 18px;
}
.recentHeader.recentHeader--mainTitle .ttl{
  display:block;
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,226,190,.96);
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}
.recentHeader__line{
  height:2px;
  width:100%;
  background: linear-gradient(to right, rgba(0,0,0,0), rgba(165,173,186,.72), rgba(0,0,0,0));
  opacity:.88;
}

.matchFrame,
.matchFrame + .matchFrame{
  border-color: rgba(160,168,182,.24);
}
.matchFrame{
  padding: 16px 14px 14px;
  background: rgba(7,10,20,.52);
  border:1px solid rgba(160,168,182,.24);
  box-shadow: 0 18px 50px rgba(0,0,0,.38) inset, 0 14px 40px rgba(0,0,0,.45);
}
.matchFrame::after{
  left:18px; right:18px;
  background:linear-gradient(90deg, transparent, rgba(165,173,186,.28), transparent);
}
.matchFrame__header{
  border-bottom:1px solid rgba(160,168,182,.18);
  padding: 10px 10px 14px;
}
.matchTopActions{
  top: 10px;
  right: 10px;
}
.btnGoldSmall{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width: 112px;
  padding:8px 12px;
  border-radius:12px;
  font-weight:950;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
  text-decoration:none;
  user-select:none;
  color:#1a1203;
  background:linear-gradient(180deg, #ffce5a, #ff9e1a);
  border:1px solid rgba(255,206,90,.55);
  box-shadow:0 10px 28px rgba(255,122,0,.22);
}
.btnGoldSmall:hover{
  filter:brightness(1.03);
  box-shadow:0 12px 34px rgba(255,122,0,.28);
}
.matchHeadline{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
}
.matchTitleLine{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  font-family: inherit;
}
.matchTitleText{
  font-size:15px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,244,227,.96);
}
.matchNumber__num{
  margin-top:0;
  font-size:24px;
  line-height:1;
  letter-spacing:.08em;
  color: rgba(255,206,137,.98);
}
.matchRankedLine{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-family: inherit;
  font-size:13px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,241,214,.88);
}
.pillRankedText{
  color:rgba(255,241,214,.94);
}
.pillRankedStar{
  color:#ffd46f;
  text-shadow:0 0 12px rgba(255,194,60,.28);
  transform: translateY(-1px);
}
.matchLadderLine{
  font-family: inherit;
  font-size:15px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(215,184,116,.94);
}
.matchMetaRow.matchMetaRow--single{
  margin-top:2px;
  gap:12px;
  font-size:13px;
  color:rgba(224,230,241,.76);
}
.matchMetaRow.matchMetaRow--single .matchMetaSep{
  color:rgba(165,173,186,.64);
}
.pillRanked,
.matchPills{display:none !important;}

.teamCol.lmTeam,
.teamCol.lmTeam.lmTeam--blue,
.teamCol.lmTeam.lmTeam--red{
  border-color:rgba(160,168,182,.18);
}
.teamCol.lmTeam{
  background: radial-gradient(circle at top, rgba(255,255,255,.05), rgba(8,12,22,.56));
}
.lmPlayer__name{
  color:rgba(255,246,232,.96);
}
.lmPlayer__sub{
  font-size:10px;
  letter-spacing:.09em;
  color:rgba(184,194,210,.70);
}
@media (max-width: 980px){
  .recentHeader.recentHeader--mainTitle .ttl{ font-size:18px; letter-spacing:.13em; }
  .btnGoldSmall{ min-width:auto; padding:8px 10px; font-size:11px; }
  .matchTitleText{ font-size:13px; }
  .matchNumber__num{ font-size:20px; }
  .matchLadderLine{ font-size:13px; }
  .matchMetaRow.matchMetaRow--single{ font-size:12px; gap:8px; flex-wrap:wrap; }
}

/* === PATCH REAPLICADO SOBRE ÚLTIMO CSS FUNCIONAL === */

/* Quitar borde general que envuelve todas las partidas */
.recentBlock{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Quitar línea divisora superior del bloque */
.recentHeader{
  border-bottom: 0 !important;
}

/* Dejar solo el borde propio de cada partida */
.matchFrame,
.matchFrame + .matchFrame{
  border: 1px solid rgba(160,168,182,.24) !important;
}

/* Eliminar línea divisora entre una partida y otra */
.matchFrame::after,
.matchFrame:last-of-type::after{
  display: none !important;
  content: none !important;
}

/* Botón VER DETALLE: sin cambio de color al hover, solo subrayado */
.btnGoldSmall,
.btnGoldSmall:visited,
.btnGoldSmall:active{
  color:#1a1203 !important;
  background:linear-gradient(180deg, #ffce5a, #ff9e1a) !important;
  border:1px solid rgba(255,206,90,.55) !important;
  box-shadow:0 10px 28px rgba(255,122,0,.22) !important;
  filter:none !important;
  transition:text-decoration-color .15s ease;
}

.btnGoldSmall:hover,
.btnGoldSmall:focus{
  color:#1a1203 !important;
  background:linear-gradient(180deg, #ffce5a, #ff9e1a) !important;
  border:1px solid rgba(255,206,90,.55) !important;
  box-shadow:0 10px 28px rgba(255,122,0,.22) !important;
  filter:none !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}


.btnMatch--disabled,
.btnMatch--disabled:visited,
.btnMatch--disabled:hover,
.btnMatch--disabled:focus,
.btnMatch--disabled:active{
  opacity:.38 !important;
  cursor:not-allowed !important;
  pointer-events:auto !important;
  text-decoration:none !important;
  color:rgba(255,244,227,.72) !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:none !important;
  filter:none !important;
}


/* ===== Player awards follow-up fixes ===== */
.playerHeroV2{
  background: #000 !important;
}
.playerHeroV2__overlay{
  background: none !important;
}
.heroCard--info,
.heroCard--center,
.heroCard--awards,
.heroCard--elo,
.heroCard--ae,
.heroCard--music{
  background: #000 !important;
  backdrop-filter: none !important;
  border-color: rgba(255,255,255,.16);
}
.heroCard--info:hover,
.heroCard--center:hover,
.heroCard--awards:hover,
.heroCard--elo:hover,
.heroCard--ae:hover,
.heroCard--music:hover{
  border-color: rgba(255,215,90,.36);
}
.heroCard--awards{
  min-height: 484px;
  height: 484px;
}
.heroAwards__body{
  height: 100%;
  overflow: hidden;
}
.heroAwards__viewport{
  flex: 0 0 328px;
  height: 328px;
}
.heroAwards__slide{
  min-height: 328px;
  max-height: 328px;
}
.heroAwards__mediaBox{
  flex: 0 0 188px;
  height: 188px;
  min-height: 188px;
}
.heroAwards__descBox{
  flex: 0 0 112px;
  height: 112px;
  min-height: 112px;
}
.heroAwards__img{
  width: 176px;
  max-width: 176px;
  height: 170px;
  max-height: 170px;
}
.heroAE__body{
  padding: 12px 14px 14px;
}
.heroAE__stack{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.heroAE__block{
  min-width: 0;
}
.heroAE__colTitle{
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 900;
  color: rgba(233,200,120,.95);
}
.heroAE__list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
}
.heroAE__list li{
  color: rgba(255,255,255,.88);
  font-size: 13px;
  line-height: 1.2;
}
.heroAE__list a{
  color: rgba(255,255,255,.94) !important;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.heroAE__list a:hover{
  color: #79beff !important;
  text-decoration: underline;
}
.aeCount{
  color: rgba(233,200,120,.92);
  font-size: 13px;
  font-weight: 900;
}


/* ===== Player awards cache-bust + black background fix ===== */
html, body, body.page-player, main.wrap, .wrap, .hero-breakout, .playerHeroV2, .playerHeroV2.playerHeroV2--compact, .playerHeroV2__grid{
  background:#000 !important;
  background-image:none !important;
}
body{
  background:#000 !important;
}
.heroSide,
.hero-row,
.hero-row--player{
  background:transparent !important;
  background-image:none !important;
}
.heroCard--info,
.heroCard--center,
.heroCard--awards,
.heroCard--elo,
.heroCard--ae,
.heroCard--music{
  background:#000 !important;
  background-image:none !important;
  min-height:0;
}
.heroCard--awards{
  height:484px !important;
  min-height:484px !important;
  max-height:484px !important;
}
.heroAwards__body{
  height:calc(100% - 56px) !important;
}
.heroAwards__viewport{
  height:328px !important;
  min-height:328px !important;
  max-height:328px !important;
}
.heroAwards__slide{
  height:328px !important;
  min-height:328px !important;
  max-height:328px !important;
}
.heroAwards__mediaBox{
  height:188px !important;
  min-height:188px !important;
  max-height:188px !important;
}
.heroAwards__mediaInner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.heroAwards__img{
  display:block;
  object-fit:contain;
}
.heroAwards__descBox{
  height:112px !important;
  min-height:112px !important;
  max-height:112px !important;
}
.heroAwards__descValue{
  font-size:18px !important;
  line-height:1.1;
}
.heroAwards__descMeta{
  min-height:24px;
}
.heroAE__body,
.heroAE__stack,
.heroAE__block,
.heroAE__list{
  background:transparent !important;
}
.heroAE__colTitle{
  font-size:13px !important;
}
.heroAE__list li{
  font-size:12px !important;
  color:rgba(255,255,255,.88) !important;
}
.heroAE__list a,
.heroAE__list a:visited{
  font-size:12px !important;
  color:#4da3ff !important;
  font-weight:700 !important;
}
.heroAE__list a:hover{
  color: rgba(255,255,255,.94) !important;
}


/* ===== Player follow-up v25 ===== */
.heroInfoV3__avatarStatus{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.heroInfoV3__avatarSquare{
  --thumb: 142px;
  width: var(--thumb);
  height: var(--thumb);
  margin: 0 auto;
}
.heroInfoV3__statusCol{
  width:100%;
  gap:10px;
  justify-items:center !important;
}
.heroInfoV3__statusLine{
  justify-content:center;
  width:100%;
}
.heroInfoV3__statusLine .statusPill{
  min-width: 152px;
  width: 152px;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
}
.heroInfoV3__statusLine .statusPill__label{
  flex:1 1 auto;
  text-align:center;
}
.heroInfoV3__statusLine .statusMark{
  width: 20px;
  height: 20px;
  border-radius: 999px;
  margin-left: 0;
  flex: 0 0 20px;
}
.heroInfoV3__kv{
  padding: 6px 2px;
}

.heroAE__list a,
.heroAE__list a:visited,
.heroAE__list a:hover{
  color: rgba(255,255,255,.94) !important;
}

.playerHeroV2__card,
.heroCenterCard{
  border: 1px solid rgba(255,255,255,.20) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset !important;
}
.phCard__header,
.phCard__division,
.phCard__stats,
.phStat{
  border-color: rgba(255,255,255,.16) !important;
}
.phCard__header{
  border-bottom-width: 1px !important;
}
.phCard__division{
  border-bottom-width: 1px !important;
}
.phStat{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

#playerHeroHelmet,
.phCard__helmet,
.helmetsweep::after{
  animation: none !important;
}
#playerHeroHelmet{
  filter: none !important;
  transform:none !important;
}


/* ===== Player awards descriptive box: remove blue underline hover ===== */
.heroAwards__descBox,
.heroAwards__descBox:hover,
.heroAwards__descBox:focus,
.heroAwards__descBox:active,
.heroAwards__descBox:visited{
  color: inherit !important;
  text-decoration: none !important;
}
.heroAwards__descBox:hover .heroAwards__descTitle,
.heroAwards__descBox:hover .heroAwards__descValue,
.heroAwards__descBox:hover .heroAwards__descMeta,
.heroAwards__descBox:focus .heroAwards__descTitle,
.heroAwards__descBox:focus .heroAwards__descValue,
.heroAwards__descBox:focus .heroAwards__descMeta,
.heroAwards__descBox:active .heroAwards__descTitle,
.heroAwards__descBox:active .heroAwards__descValue,
.heroAwards__descBox:active .heroAwards__descMeta{
  color: inherit !important;
  text-decoration: none !important;
}