/* MU GAME Classic: Destaques da semana (top 5 com o personagem em miniatura 3D) e Ao vivo (feed). */

/* ---------------------------------------------------------------- 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-cond); letter-spacing: .06em; text-transform: uppercase; color: var(--tx-3); }
.dq-tabs button:hover { color: var(--tx-1); }
.dq-tabs button.on { color: #fff; background: linear-gradient(180deg, var(--red), var(--red-lo)); }
.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(255, 74, 61, .55), rgba(255, 74, 61, 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(--red-hi); 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(--red-hi); }
.dq-c:focus-visible { outline: 2px solid var(--red-hi); 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-cond); letter-spacing: .02em; color: var(--tx-1); 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-cond); 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, var(--gold-hi), 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-cond); color: var(--tx-1); 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: var(--gold-hi); }
.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(227, 180, 94, .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-cond); color: var(--tx-1); margin-left: 4px; }
.dq-erro { padding: 18px; color: var(--tx-3); }

/* ---------------------------------------------------------------- ao vivo */
.fd .fd-pt { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; background: var(--red-hi); animation: fdPulso 1.8s ease-out infinite; }
@keyframes fdPulso { 0% { box-shadow: 0 0 0 0 rgba(255, 74, 61, .55); } 70% { box-shadow: 0 0 0 8px rgba(255, 74, 61, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 74, 61, 0); } }
.fd-l { list-style: none; margin: 0; padding: 4px 0; }
.fd-l li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line-soft); }
.fd-l li:last-child { border-bottom: 0; }
.fd-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(255, 255, 255, .06); color: var(--tx-2); }
.fd-ic .i { width: 14px; height: 14px; }
.fd-l .t-reset .fd-ic { color: #fff; background: linear-gradient(180deg, var(--red), var(--red-lo)); }
.fd-l .t-pioneiro .fd-ic { color: #1b1300; background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.fd-l .t-convite .fd-ic { color: #fff; background: #2f5fb3; }
.fd-tx { min-width: 0; font-size: 13px; line-height: 1.4; color: var(--tx-2); }
.fd-tx a { color: var(--tx-1); font-weight: 600; }
.fd-tx a:hover { color: var(--red-hi); }
.fd-tx b { color: var(--tx-1); font-weight: 600; }
.fd-tx small { display: block; margin-top: 1px; font-size: 11px; color: var(--tx-4); }
.fd-l li.novo { animation: fdEntra .55s ease both; }
@keyframes fdEntra { from { opacity: 0; transform: translateY(-10px); background: rgba(255, 74, 61, .18); } to { opacity: 1; transform: none; background: transparent; } }
.fd-l li.fd-nada { display: block; padding: 14px 16px; font-size: 13px; color: var(--tx-3); }
@media (prefers-reduced-motion: reduce) and (max-width: 0px) { .fd-l li.novo { animation: none; } .dq-fig { transition: none; } }