/* ===================================================================
   TELA GERAR - SIMPLIFICADA (Mobile-First)
   =================================================================== */

/* A Bateria dos 6 Testes NÃO pode ser escondida por CSS: é o teaser do
   paywall (FREE vê 2 de 6 borrados) e o produto que o PRO pagou pra ver.
   Quem controla a visibilidade é o science-gate.js, por plano. */

/* Make volante smaller on mobile */
#volante-grid {
  max-height: 400px !important;
  overflow-y: auto !important;
}

/* Simplify the main card layout */
#view-volante .bg-gradient-to-b {
  padding: 1rem !important;
}

#view-volante .space-y-4 {
  gap: 1.5rem !important;
}

/* Make quantity buttons bigger on mobile */
.grid.grid-cols-4 button {
  padding: 0.75rem !important;
  font-size: 0.875rem !important;
  min-height: 48px !important;
}

/* Improve accessibility: bigger fonts on mobile */
@media (max-width: 640px) {
  #view-volante {
    padding: 0.75rem !important;
  }

  #view-volante .bg-gradient-to-b {
    padding: 1.25rem !important;
  }

  /* Main button - larger target */
  #view-volante button[onclick*="gerarApostaNasaComMatriz4x4"] {
    padding: 1rem !important;
    font-size: 1rem !important;
    min-height: 56px !important;
    border-radius: 1rem !important;
  }

  /* Status badges - more readable (colchetes escapados: classe Tailwind arbitrária) */
  #view-volante .text-\[10px\] {
    font-size: 0.75rem !important;
  }

  #view-volante .text-xs {
    font-size: 0.875rem !important;
  }

  /* Mode buttons - more space */
  .p-2.bg-slate-950 {
    padding: 1rem !important;
    gap: 0.75rem !important;
  }

  /* Hide advanced controls on mobile (until they click) */
  #painel-regras-ativas,
  #container-abas-jogos-gerados,
  .flex.justify-between.items-center.cursor-pointer.select-none {
    max-width: 100% !important;
  }
}

/* Responsive volante grid */
@media (max-width: 480px) {
  #volante-grid {
    grid-template-columns: repeat(5, 1fr) !important;
  }

  .volante-btn {
    padding: 0.5rem !important;
    font-size: 0.625rem !important;
  }
}

/* Make numbers in volante readable */
.volante-btn {
  min-width: 32px !important;
  min-height: 32px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

/* Score panel always visible */
#painel-score-telemetria {
  display: block !important;
}

/* Collapse matriz by default (mobile) */
@media (max-width: 640px) {
  #conteudo-matriz-vitorio {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;
  }

  #conteudo-matriz-vitorio.expanded {
    max-height: 500px !important;
  }
}

/* Improve contrast on focus/hover */
.bottom-tab-btn:focus,
button:focus {
  outline: 2px solid rgb(34, 197, 94) !important;
  outline-offset: 2px !important;
}

/* Better touch targets */
@media (hover: none) and (pointer: coarse) {
  button {
    min-height: 44px !important;
    padding: 0.875rem !important;
  }
}

/* Print-friendly (hide UI chrome) */
@media print {
  #bottom-tab-bar,
  .bottom-tab-btn,
  header,
  #btn-user-profile,
  #btn-status-plano,
  button[onclick*="limpar"],
  button[onclick*="salvar"],
  .flex.items-center.gap-1 {
    display: none !important;
  }

  #painel-score-telemetria {
    page-break-inside: avoid !important;
  }
}