/* ===================== GRID E ESPAÇAMENTO ===================== */
.rifa-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, max-content));
  gap: 8px;                 /* separa os números */
  padding: 8px 6px;
  justify-content: center;  /* centraliza o conjunto */
}

/* ================== BOTÕES (TAMANHO/LEGIBILIDADE) ================== */
.rifa-grid .btn-num{
  min-width: 52px;
  height: 44px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums; /* números alinhados */
  font-size: clamp(14px, 2.4vw, 18px); /* responsivo desktop→mobile */
  user-select: none;

  /* Resposta imediata no toque/clique */
  touch-action: manipulation;                 /* remove atraso em mobile */
  transition: background-color 0s, box-shadow 0s; /* sem animação lenta */
  -webkit-tap-highlight-color: transparent;   /* iOS/Android */
}

/* Feedback enquanto pressiona (antes do JS marcar como selecionado) */
.rifa-grid .btn-num:active{
  background: #ffeb3b;
  color: #111;
  border-color: #f0c400;
}

/* Variante acionada por snippet JS de "pressing" (visual imediato) */
.rifa-grid .btn-num.rifa-pressing{
  background: #ffeb3b;
  color: #111;
  border-color: #f0c400;
}

/* ===================== ACESSIBILIDADE ===================== */
.rifa-grid .btn-num:focus-visible{
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* Selecionado = amarelo SEMPRE (vence hover/active do tema) */
.rifa-grid .btn-num.rifa-selected,
.rifa-grid .btn-num.rifa-selected:hover,
.rifa-grid .btn-num.rifa-selected:active,
#rifa .btn-num.rifa-selected,
#rifa .btn-num.rifa-selected:hover,
#rifa .btn-num.rifa-selected:active{
  background: #ffeb3b !important;
  color: #111 !important;
  border-color: #f0c400 !important;
}

/* ===================== RESPONSIVO ===================== */
@media (max-width: 768px){
  .rifa-grid{
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 7px;
  }
  .rifa-grid .btn-num{
    min-width: 48px;
    height: 42px;
    font-size: clamp(14px, 3.4vw, 17px); 
  }
}

@media (max-width: 420px){
  .rifa-grid{
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 6px;
  }
  .rifa-grid .btn-num{
    min-width: 44px;
    height: 40px;
    font-size: clamp(13px, 4.2vw, 16px);
  }
}

/* Muito pequenos (opcional) */
@media (max-width: 340px){
  .rifa-grid{
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 5px;
  }
  .rifa-grid .btn-num{
    min-width: 40px;
    height: 38px;
    font-size: clamp(12px, 4.8vw, 15px);
  }
}