/* MU GAME Classic: quadro Ranking de guilds da página inicial (guilds.js) */
/* ---------------------------------------------------------------- ranking de guilds (guilds.js) */
.gr { --c-res: var(--azure); --c-par: var(--teal); --c-tit: var(--violet); --c-tg: var(--gold); }
.gr .card-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--tx-3); }
.gr .card-f b { font: 700 13px var(--f-display); color: var(--tx); margin-left: 4px; }
.gr-top { display: grid; grid-template-columns: 112px minmax(0, 1fr) 248px; gap: 18px; align-items: center; margin: 14px 16px 6px; padding: 16px;
  border-radius: 10px; border: 1px solid rgba(246, 199, 92, .32); background: radial-gradient(120% 140% at 0% 0%, rgba(246, 199, 92, .1), transparent 55%), rgba(0, 0, 0, .22); }
.gr-emb { display: block; width: 112px; height: 112px; image-rendering: pixelated; padding: 6px; border-radius: 8px; border: 1px solid rgba(246, 199, 92, .5); background: #000;
  box-shadow: 0 0 0 4px rgba(246, 199, 92, .08), 0 16px 30px -18px rgba(246, 199, 92, .7); }
.gr-top-t { display: grid; gap: 3px; min-width: 0; }
.gr-lider { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.gr-lider .i { width: 15px; height: 15px; }
.gr-nm { display: block; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 30px/1.05 var(--f-display); letter-spacing: .02em; color: var(--tx); }
.gr-mem { font-size: 12px; color: var(--tx-3); }
.gr-pts { margin-top: 6px; font: 700 26px/1 var(--f-display); color: #ffe39a; }
.gr-pts small { margin-left: 5px; font: 400 12px var(--f-body); color: var(--tx-3); }
.gr-bar { display: flex; height: 6px; margin-top: 8px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.gr-bar i { display: block; height: 100%; }
.gr-bar i + i { box-shadow: inset 1px 0 0 rgba(17, 5, 6, .8); }
.gr-bar .res, .gr-de .res dt::before { background: var(--c-res); }
.gr-bar .par, .gr-de .par dt::before { background: var(--c-par); }
.gr-bar .tit, .gr-de .tit dt::before { background: var(--c-tit); }
.gr-bar .tg, .gr-de .tg dt::before { background: var(--c-tg); }
.gr-de { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.gr-de div { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); }
.gr-de dt { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--tx-3); }
.gr-de dt::before { content: ""; width: 8px; height: 8px; border-radius: 2px; }
.gr-de dd { margin: 2px 0 0; font: 700 17px/1.1 var(--f-display); color: var(--tx); }
.gr-de dd small { display: block; font: 400 11px var(--f-body); color: var(--tx-3); }
.gr-l { list-style: none; margin: 0; padding: 4px 16px 10px; }
.gr-l li { display: grid; grid-template-columns: 28px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.gr-l li:first-child { border-top: 0; }
.gr-pos { font: 700 15px var(--f-display); color: var(--tx-3); }
.gr-emb-s { display: block; width: 36px; height: 36px; image-rendering: pixelated; padding: 3px; border-radius: 5px; border: 1px solid var(--line-2); background: #000; }
.gr-l-t { min-width: 0; }
.gr-l-t > a { display: block; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 16px/1.2 var(--f-display); color: var(--tx); }
.gr-l-t small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--tx-3); }
.gr-l-t .gr-bar { height: 4px; margin-top: 5px; max-width: 320px; }
.gr-l-p { font: 700 18px var(--f-display); color: var(--tx); text-align: right; white-space: nowrap; }
.gr-l-p small { margin-left: 4px; font: 400 11px var(--f-body); color: var(--tx-3); }
.gr-vazio { margin: 0; padding: 18px 16px; font-size: 13px; color: var(--tx-3); }
@media (max-width: 760px) {
  .gr-top { grid-template-columns: 84px minmax(0, 1fr); }
  .gr-emb { width: 84px; height: 84px; }
  .gr-de { grid-column: 1 / -1; grid-template-columns: repeat(2, 1fr); }
  .gr-nm { font-size: 24px; }
}
.gr-nm:hover, .gr-l-t > a:hover { color: var(--ice); }
.gr-l-p .gr-l-gap { display: block; margin: 2px 0 0; font: 400 11px var(--f-body); color: var(--ice); }