/* ===================================================
   RustyKings — TOP STATS (4 cards inline no desktop)
   (versão com ícones transgráficos)
   =================================================== */

/* Alinha as colunas com o bloco da direita e tira espaço morto */
.store .row{ align-items: stretch; row-gap: 18px; }
.rk-stats-col{ display:flex; flex-direction:column; }

/* Cabeçalho: título + botão à direita */
.rk-stats-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:12px;
}
.rk-stats-btn-header{ white-space:nowrap; }

/* Secção do widget */
.rk-stats-section{
  flex:1; min-height:0;
  display:flex; flex-direction:column; gap:12px;
  margin-bottom: 8px;
}

/* ------ GRID responsivo com alturas uniformes ------ */
.rk-stats-grid{
  flex:1; min-height:0;
  display:grid; gap:14px;
  grid-template-columns: 1fr;               /* mobile */
  grid-auto-rows: 1fr;                      /* linhas de altura igual */
  align-items: stretch;
}
.rk-stats-grid > .rk-card{ height:100%; }   /* cartões preenchem a célula */

/*  ≥576px: 2 colunas */
@media (min-width: 576px){
  .rk-stats-grid{ grid-template-columns: repeat(2, 1fr); }
}
/*  ≥992px: 4 colunas numa fila */
@media (min-width: 992px){
  .rk-stats-grid{ grid-template-columns: repeat(4, 1fr); }
}

/* ------------- CARTÃO ------------- */
.rk-card{
  background: linear-gradient(180deg, rgba(18,23,35,.88), rgba(18,23,35,.76));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  display:flex; flex-direction:column; gap:10px;
  backdrop-filter: blur(4px) saturate(120%);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rk-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(0,0,0,.38);
  border-color: rgba(127,175,255,.25);
}
.rk-card h3{
  margin:0;
  font-size:15px; font-weight:800; letter-spacing:.2px; color:#e9ecf3;
  line-height:1.2;
}
.rk-card .sub{
  color:#a6adbd; font-size:11.5px; margin-top:-2px
}

/* ------------- LISTA ------------- */
.rk-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}

/* --------- ITEM (nome em cima, chips em baixo) --------- */
.rk-row{
  display:grid;
  grid-template-columns: 36px 36px 1fr;          /* rank | avatar | name */
  grid-template-rows: min-content auto;          /* nome acima, chips abaixo */
  grid-template-areas:
    "rank avatar name"
    "chips chips chips";
  align-items:center;
  gap:8px 10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:9px 10px;
}

.rk-rank{ grid-area:rank }
.rk-avatar{ grid-area:avatar }
.rk-name-wrap{ grid-area:name }
.rk-chips{ grid-area:chips }

/* Rank = Avatar (mesmo tamanho) */
.rk-rank{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background: radial-gradient(100% 100% at 50% 0%, #293144 0%, #161c2a 100%);
  color:#e9ecf3; font-weight:800; font-size:12px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.06);
}
.rk-rank--gold{
  background:linear-gradient(180deg,#ffe08a,#e3a531);
  color:#1a1200;
}
.rk-rank--silver{
  background:linear-gradient(180deg,#e9eef5,#8fa3b8);
  color:#0c1218;
}
.rk-rank--bronze{
  background:linear-gradient(180deg,#e9c2a2,#a06b42);
  color:#120a06;
}

/* Avatar */
.rk-avatar{
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-size:12px; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#7b5cff,#16c2ff);
  border:2px solid rgba(255,255,255,.12);
  overflow:hidden;
}
.rk-avatar img{ width:100%; height:100%; object-fit:cover; display:block }

/* Nome (2 linhas máx, sempre legível) */
.rk-name{
  color:#f4f6fb; font-weight:800; font-size:14px; line-height:1.18;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  white-space:normal; text-decoration:none;
}
.rk-name:hover{ text-decoration:underline }

/* Chips de stats lado-a-lado, dentro do painel */
.rk-chips{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(110px,1fr));
  gap:6px;
  padding:2px 2px;
}
.rk-chip{
  --bg: rgba(255,255,255,.06);
  --bd: rgba(255,255,255,.10);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; color:#dbe1ee;
  padding:6px 10px; border-radius:12px;
  background:var(--bg); border:1px solid var(--bd);
  line-height:1.1; white-space:nowrap;
  min-height:26px;
}
.rk-chip--main{
  --bg: rgba(123, 92, 255, .18);
  --bd: rgba(123, 92, 255, .40);
  color:#eef0ff; font-weight:700;
  box-shadow: inset 0 0 0 1px rgba(123,92,255,.08);
}

/* -------- ÍCONES TRANSGRÁFICOS (mask + gradient) -------- */
.rk-ico{
  width:14px; height:14px; display:inline-block;
  background:linear-gradient(135deg,#81b0ff,#7b5cff);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  opacity:.95;
}
.rk-chip .rk-ico{ flex:0 0 14px }

/* Kills — crosshair */
.rk-ico--kills{
  -webkit-mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M11 2h2v4h-2V2zm0 16h2v4h-2v-4zM2 11h4v2H2v-2zm16 0h4v2h-4v-2zM12 7a5 5 0 105 5 5 5 0 00-5-5zm0 2a3 3 0 11-3 3 3 3 0 013-3z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M11 2h2v4h-2V2zm0 16h2v4h-2v-4zM2 11h4v2H2v-2zm16 0h4v2h-4v-2zM12 7a5 5 0 105 5 5 5 0 00-5-5zm0 2a3 3 0 11-3 3 3 3 0 013-3z'/></svg>");
}

/* K/D — scale */
.rk-ico--kd{
  -webkit-mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3h2v18H3V3zm4 2h4l3 6H4l3-6zm10 2h4v2h-4V7zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3h2v18H3V3zm4 2h4l3 6H4l3-6zm10 2h4v2h-4V7zm0 4h4v2h-4v-2zm0 4h4v2h-4v-2z'/></svg>");
}

/* Time — clock */
.rk-ico--time{
  -webkit-mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1a11 11 0 1011 11A11 11 0 0012 1zm1 11.59l4.3 2.49-.75 1.3L11 13V6h2z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M12 1a11 11 0 1011 11A11 11 0 0012 1zm1 11.59l4.3 2.49-.75 1.3L11 13V6h2z'/></svg>");
}

/* Building — hammer */
.rk-ico--building{
  -webkit-mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M2 21l7-7 3 3-7 7H2v-3zm13.6-16.2l1.6-1.6 3 3-1.6 1.6 1.4 1.4-3.2 3.2-4.4-4.4 3.2-3.2 1.4 1.4z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M2 21l7-7 3 3-7 7H2v-3zm13.6-16.2l1.6-1.6 3 3-1.6 1.6 1.4 1.4-3.2 3.2-4.4-4.4 3.2-3.2 1.4 1.4z'/></svg>");
}

/* Offline / vazio */
.rk-ico--offline{
  -webkit-mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3l18 18-1.4 1.4L1.6 4.4 3 3zm9 1a8 8 0 018 8c0 1.5-.4 2.9-1.1 4.1l-1.5-1.5A6 6 0 0012 7a6 6 0 00-4.6 2.2L5.9 8.7A8 8 0 0112 4z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M3 3l18 18-1.4 1.4L1.6 4.4 3 3zm9 1a8 8 0 018 8c0 1.5-.4 2.9-1.1 4.1l-1.5-1.5A6 6 0 0012 7a6 6 0 00-4.6 2.2L5.9 8.7A8 8 0 0112 4z'/></svg>");
}

/* Skeleton */
.skeleton{
  position:relative; overflow:hidden; min-height:150px;
  border-radius:16px;
  background:linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.09), rgba(255,255,255,.05));
  animation:sheen 1.2s linear infinite;
  border:1px solid rgba(255,255,255,.06);
}
@keyframes sheen{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* Esconde qualquer nota antiga (Scope/Updated) */
.rk-stats-footnote{ display:none !important; }