/* ============================================================================
   PREVIEW.CSS — camada de PREVIEW ESTÁTICO (só entra no dist/, injetada pelo build-static.py; NÃO é linkada nos HTMLs-fonte).
   As telas são o DOM capturado com Swiper/vue3-carousel "congelados" (overflow:hidden + transform fixo) e sem JS.
   Aqui só destravamos o que dá pra destravar com CSS. O comportamento de verdade é do back/front-end da casa.
   ============================================================================ */

/* ---------- ROLAGEM HORIZONTAL DOS CARROSSÉIS ---------- */
/* Swiper (linhas de jogos, provedores, categorias…): o wrapper fica parado em translate3d(0,0,0); deixamos o próprio .swiper rolar */
.swiper.swiper-horizontal {
  overflow-x: auto !important; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.swiper.swiper-horizontal::-webkit-scrollbar { display: none; }
.swiper.swiper-horizontal > .swiper-wrapper { transform: none !important; }
.swiper.swiper-horizontal > .swiper-wrapper > .swiper-slide { scroll-snap-align: start; }

/* vue3-carousel (banners do hero etc.) */
.carousel__viewport {
  overflow-x: auto !important; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { transform: none !important; }
.carousel__slide { scroll-snap-align: start; }

/* cursor de arrasto (o preview.js implementa o arrastar com o mouse) */
.preview-draggable { cursor: grab; }
.preview-dragging { cursor: grabbing !important; scroll-snap-type: none !important; user-select: none; }
.preview-dragging * { pointer-events: none; }

/* ---------- ATALHO PRO ÍNDICE DE TELAS ---------- */
.preview-telas {
  position: fixed; left: 10px; bottom: 10px; z-index: 2147483000;
  font: 600 12px/1 var(--font-primary, system-ui, sans-serif); letter-spacing: .02em;
  color: var(--text-dark, #0A0B0A); background: var(--primary-main, #C8FF2E);
  padding: 8px 12px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45); opacity: .85;
}
.preview-telas:hover { opacity: 1; }
html[device='mobile'] .preview-telas { bottom: 92px; left: 8px; padding: 6px 10px; font-size: 11px; }