/* MU GAME Easy e 99z: Destaques (top 5 com o personagem em miniatura 3D). Sem o Ao vivo. */

/* ---------------------------------------------------------------- destaques da semana */
.dq .card-h { gap: 10px; }
.dq-tabs { display: inline-flex; margin-left: auto; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: rgba(0, 0, 0, .25); }
.dq-tabs button { height: 26px; padding: 0 9px; border: 0; border-radius: 4px; background: transparent; cursor: pointer;
  font: 600 12.5px var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.dq-tabs button:hover { color: var(--tx); }
.dq-tabs button.on { color: #04121c; background: linear-gradient(180deg, var(--ice), var(--ice-2)); }
.dq-tabs button[hidden] { display: none; }

.dq-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 10px 8px 4px; }
.dq-c { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 4px 6px 12px; color: inherit; text-decoration: none; }
.dq-c + .dq-c::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 16px; border-left: 1px dashed var(--line); }

.dq-fig { position: relative; width: 120px; height: 124px; transition: transform .2s var(--ease); }
.dq-fig::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 74px; height: 12px; margin-left: -37px; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 70%); }
.dq-c.p1 .dq-fig::after { background: radial-gradient(ellipse at center, rgba(124, 240, 255, .45), rgba(124, 240, 255, 0) 70%); }
.dq-fig img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.dq-fig img.cls { object-fit: cover; border-radius: 50%; width: 64px; height: 64px; margin: 36px auto 0; opacity: .85; }
.dq-fig .dq-gira { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; border: 2px solid var(--line); border-top-color: var(--ice); border-radius: 50%; animation: dqGira .8s linear infinite; }
@keyframes dqGira { to { transform: rotate(360deg); } }
.dq-c:hover .dq-fig { transform: translateY(-3px); }
.dq-c:hover .dq-nm { color: var(--ice); }
.dq-c:focus-visible { outline: 2px solid var(--ice); outline-offset: -2px; border-radius: 6px; }

.dq-nm { max-width: 100%; margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px/1.15 var(--f-display); letter-spacing: .02em; color: var(--tx); transition: color .15s; }
.dq-pos { display: inline-grid; place-items: center; min-width: 22px; height: 18px; margin-right: 5px; padding: 0 4px; vertical-align: 1px; border-radius: 4px;
  font: 700 12px/1 var(--f-display); color: var(--tx-2); border: 1px solid var(--line); background: rgba(0, 0, 0, .3); }
.dq-c.p1 .dq-pos { color: #1b1300; background: linear-gradient(180deg, #ffe39a, var(--gold)); border-color: var(--gold); }
.dq-cl { font-size: 11.5px; line-height: 1.3; color: var(--tx-3); white-space: nowrap; }
.dq-v { margin-top: 3px; font: 700 13px/1.2 var(--f-display); color: var(--tx); white-space: nowrap; }
.dq-v small { font: 400 11px var(--f-body); color: var(--tx-3); margin-left: 3px; }
.dq-c.p1 .dq-v { color: #ffe39a; }
.dq-vazio .dq-fig { opacity: .3; }
.dq-vazio .dq-nm { color: var(--tx-4); font-weight: 600; }

.dq-sub { margin: 0; padding: 12px 16px 0; font: 700 12px var(--f-display); letter-spacing: .09em; text-transform: uppercase; color: var(--tx-3); }
.dq-sub + .dq-row { padding-top: 2px; }
.dq-row + .dq-sub { border-top: 1px dashed var(--line); }
.dq-emb { display: grid; place-items: center; }
.dq-emb::after { display: none; }
.dq-emb img { width: 72px; height: 72px; object-fit: fill; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 4px; background: #000; padding: 4px; }
.dq-c.p1 .dq-emb img { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(246, 199, 92, .18); }

.dq .card-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--tx-3); }
.dq-fim2 { white-space: nowrap; }
.dq-fim2 b { font: 700 13px var(--f-display); color: var(--tx); margin-left: 4px; }
.dq-erro { padding: 18px; color: var(--tx-3); }

.dq-c.p1 .dq-v { color: var(--gold); }
.dq-dt { margin-top: 3px; font-size: 10.5px; line-height: 1.35; color: var(--tx-3); text-align: center; }
.dq-tabs { flex-wrap: wrap; }
.dq-tabs button { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .dq-fig { transition: none; } }

/* ---------------------------------------------------------------- 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(5, 9, 17, .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); }

/* ---------------------------------------------------------------- página inicial enxuta (20/10): abas numa linha só, prêmio de cada posição */
.dq > .dq-tabs { display: flex; flex-wrap: nowrap; gap: 4px; margin: 12px 16px 0; padding: 3px; border-radius: 9px; }
.dq > .dq-tabs button { flex: 1; height: 32px; padding: 0 8px; border-radius: 7px; font: 700 13px var(--f-display); letter-spacing: .05em; white-space: nowrap; }
.dq > .dq-tabs button.on { box-shadow: 0 6px 16px -10px var(--ice); }
.dq-row { padding-top: 14px; }
.dq-c.p1::after { content: ""; position: absolute; inset: 0 4px 6px; z-index: -1; border-radius: 10px; background: radial-gradient(70% 55% at 50% 40%, rgba(246, 199, 92, .1), transparent 70%); }
.dq-c { isolation: isolate; }
.dq-pr { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 2px 8px; border-radius: 999px; font: 700 11.5px var(--f-display); letter-spacing: .03em; white-space: nowrap;
  color: #ffe39a; background: rgba(246, 199, 92, .1); border: 1px solid rgba(246, 199, 92, .32); }
.dq-pr .i { width: 12px; height: 12px; }
.dq-c.p1 .dq-pr { color: #1b1300; background: linear-gradient(180deg, #ffe39a, var(--gold)); border-color: var(--gold); }
.dq-vazio .dq-pr { opacity: .85; }
.dq-vazio .dq-cl { color: var(--tx-3); }
.dq .card-f { flex-wrap: wrap; }
.dq-fim2 { display: inline-flex; align-items: baseline; gap: 4px; }
.dq-fim2[hidden] { display: none; }
.dq-falta { margin-left: 2px; }
@media (max-width: 760px) { .dq > .dq-tabs { overflow-x: auto; } .dq > .dq-tabs button { flex: none; } }