/* =========================================================================
   Carrossel do banner de destaque (js/destaque.js), no lobby e na página
   inicial. Os banners têm proporções um pouco diferentes (o Fortune Tiger
   antigo é 5,5:1 e os novos ~4,4:1): a janela fica em 5:1 e cada arte
   preenche cortando só a sobra das bordas, então a página não pula de altura.
   ========================================================================= */

.dq { position: relative; display: flex; flex-direction: column; }
.dq-janela { position: relative; overflow: hidden; border-radius: 24px; border: 1px solid var(--borda-card, var(--borda)); box-shadow: 0 14px 34px rgba(20, 0, 30, 0.3); background: #1d0631; touch-action: pan-y; user-select: none; }
.dq-fita { display: flex; transition: transform 0.6s cubic-bezier(0.22, 0.8, 0.25, 1); will-change: transform; }
.dq-slide { position: relative; flex: 0 0 100%; aspect-ratio: 5 / 1; }
.dq-area { position: absolute; inset: 0; }
/* O link em cima do botão desenhado: invisível, com anel e brilho no hover */
.dq-jogar { position: absolute; z-index: 1; border-radius: 999px; transition: box-shadow 0.2s, background 0.2s, transform 0.2s; }
.dq-jogar:hover, .dq-jogar:focus-visible { background: rgba(255, 255, 255, 0.12); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.7), 0 0 26px rgba(255, 92, 184, 0.75); transform: scale(1.03); outline: 0; }
.dq-jogar:active { transform: scale(0.98); }
.dq-slide img { display: block; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }

.dq-seta { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(20, 2, 34, 0.55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); opacity: 0; transform: translateY(-50%); transition: opacity 0.2s, background 0.2s; }
.dq-seta .ic { width: 18px; height: 18px; }
.dq-seta.esq { left: 14px; }
.dq-seta.dir { right: 14px; }
.dq-seta:hover { background: rgba(255, 61, 154, 0.75); }
.dq:hover .dq-seta, .dq-seta:focus-visible { opacity: 1; }

.dq-pontos { position: absolute; left: 50%; bottom: 10px; z-index: 2; display: flex; gap: 6px; padding: 5px 8px; border-radius: 999px; background: rgba(20, 2, 34, 0.45); transform: translateX(-50%); backdrop-filter: blur(4px); }
.dq-pontos button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.45); cursor: pointer; transition: width 0.25s, background 0.25s; }
.dq-pontos button.ativo { width: 20px; background: #ff5cb8; }

/* Só no celular: a arte corta o botão desenhado, então vai um de verdade embaixo */
.dq-cel { display: none; }

@media (max-width: 760px) {
  .dq-janela { border-radius: 18px; }
  .dq-slide { aspect-ratio: auto; height: 150px; }
  .dq-slide img { object-position: 0% 50% !important; }
  .dq-seta, .dq-jogar { display: none; }
  .dq-pontos { bottom: 8px; }
  .dq-cel { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 12px 16px; border-radius: 999px; background: var(--grad-botao, var(--gradiente)); box-shadow: var(--sombra-botao, none); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-decoration: none; }
  .dq-cel .ic { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dq-fita { transition: none; }
}