/* Site no celular com cara de app (24/10, devjunior — skill mobile-native). Carregado por último no layout.php.
   O :hover "grudado" foi resolvido no próprio CSS (/root/casa-rebuild/brava-tools/hover-gate.py). */

/* sem o flash cinza/azul do navegador no toque; sem a letra crescer ao virar o celular */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* toque responde na hora (sem a espera de ~300ms do "duplo toque") e segurar o dedo não seleciona o texto do botão */
button, [role="button"], .btn, label[for] { touch-action: manipulation; -webkit-user-select: none; user-select: none; }
a { touch-action: manipulation; }

/* iPhone dá zoom sozinho ao tocar num campo com letra < 16px (e não volta). Só em tela de toque;
   no PC os campos continuam com o tamanho do desenho. Campo só-leitura (código PIX etc.) não mexe. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([readonly]),
  textarea:not([readonly]), select { font-size: 16px !important; }
}

/* 100vh no celular = altura com a barra do Safari escondida -> passa da tela. svh/dvh = altura visível de verdade. */
@supports (height: 100svh) {
  .main-content--chines[data-v-66755cc3], .chines-viewport[data-v-66755cc3], .ch-home[data-v-734cbbd6],
  .legal-page[data-v-725b3642], .rw-page[data-v-1426dadf], .rw-page[data-v-ea736b4b] { min-height: 100svh; }
  .lc-panel[data-v-b1e164a0] { height: max(260px, min(520px, calc(100dvh - var(--lc-gap-bottom) - 96px))); max-height: calc(100dvh - 96px); }
}

/* 26/10 (devjunior): janelas que sobem de baixo usavam "vh" = altura com a barra do Safari ESCONDIDA. Com a barra
   aparecendo, a janela ficava mais alta que a tela e o topo (título, X de fechar) sumia embaixo da barra.
   dvh = altura visível de verdade. "html" na frente só pra ganhar dos estilos que vêm depois no <body>. */
@supports (height: 100dvh) {
  @media (max-width: 768px) { html #supDrawer { height: 92dvh; } }
  html .dep-sheet { max-height: 82dvh; }
  html .auth-sheet[data-v-d2ed24d4] { max-height: 92dvh; }
  html .ml { max-height: calc(100dvh - 32px); }
  html .txd { max-height: calc(100dvh - 40px); }
  html .painel[data-v-753b4497] { max-height: 82dvh; }
}

/* janela de depósito/saque no celular encosta no fundo da tela: o botão de baixo ficava atrás da barrinha do iPhone */
@media (max-width: 600px) {
  html .dep-sheet { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* 01/11 (Nina, devjunior "tudo harmônico"): no celular nenhuma fileira de abas/filtros rola pro lado escondendo item.
   Padrão: 8px entre botões, linha ocupa a largura toda, botões da mesma linha com o mesmo tamanho.
   Seletores SEM .rl-scroll de propósito: o rails.js tira/põe essa classe no resize. Prévia: /previa-celular-278ebbba/ */
@media (max-width: 600px) {
  /* abas da conta (Carteira · Prêmios · Dados · Histórico): 4 iguais, ícone em cima */
  html body .topbar > nav.tabs { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html body .topbar > nav.tabs > a { min-width: 0 !important; width: auto !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 4px !important; padding: 9px 2px !important; height: auto !important; font-size: 12px !important; white-space: nowrap; }
  /* abas das missões: 2x2 */
  html body .filters > nav.tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html body .filters > nav.tabs > button { min-width: 0 !important; justify-content: center !important; }
  html body .topbar > .rl-seta, html body .filters > .rl-seta { display: none !important; }
  /* histórico: Depósitos · Saques · Jogadas iguais; períodos 3 por linha */
  html body .filters-card .filter-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  html body .filters-card .filter-row > button { min-width: 0 !important; justify-content: center !important; text-align: center; }
  html body .period-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px 8px !important; overflow: visible !important; }
  /* prêmios: Disponíveis · Finalizados iguais; filtros quebram linha e cada linha preenche a largura */
  html body .sub-tabs-card .sub-tabs { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; width: 100% !important; }
  html body .sub-tabs-card .sub-tabs > button { min-width: 0 !important; justify-content: center !important; text-align: center; }
  html body nav.filter-chips { flex-wrap: wrap !important; gap: 8px !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html body nav.filter-chips > button { flex: 1 1 auto !important; justify-content: center !important; text-align: center; }
  /* minhas apostas: 6 filtros iguais (3 por linha; até 420px são 2, ver abaixo) */
  html body .mb-filters { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  html body .mb-filters > button { min-width: 0 !important; justify-content: center !important; text-align: center; padding-left: 6px !important; padding-right: 6px !important; }
  /* barra de baixo: nomes legíveis ("Cassino ao vivo" um pouco menor pra caber numa linha) */
  html body .vera-bottom-nav .vera-nav-item span { font-size: 10.5px !important; letter-spacing: .1px !important; }
  html body .vera-bottom-nav a[href="/cassino?cat=ao-vivo"] span { font-size: 9.5px !important; letter-spacing: -.15px !important; }
}
/* 01/11 filtros de apostas: até 420px, 2 por linha ("Apostas abertas" não cabe em 1/3) */
@media (max-width: 420px) { html body .mb-filters { grid-template-columns: 1fr 1fr !important; } }
/* 01/11 telas estreitas (≤374px, ex. Android 360): nomes da barra de baixo encostavam */
@media (max-width: 374px) {
  html body .vera-bottom-nav .vera-nav-item span { font-size: 9.5px !important; letter-spacing: 0 !important; }
  html body .vera-bottom-nav a[href="/cassino?cat=ao-vivo"] span { font-size: 8.5px !important; letter-spacing: -.2px !important; }
}