/* ==========================================================================
   JOGOSRÁPIDOS — bingo.css
   Classes específicas do Bingo (tema escuro). O geral vem do base.css.
   ========================================================================== */

.bola-atual { min-height: 8rem; display: grid; place-items: center; margin-bottom: 1.5rem; }

.bola {
  width: 7rem; height: 7rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffbe6, var(--yellow) 72%);
  display: grid; place-items: center; line-height: 1; color: var(--pitch);
  box-shadow: 0 0 1.5rem rgba(255, 210, 30, 0.35);
}
.bola__letra { font-family: var(--font-title); font-weight: 700; font-size: 1.2rem; }
.bola__num { font-family: var(--font-title); font-weight: 700; font-size: 2.75rem; }
.bola.revelar { animation: quicar 0.4s ease; }
@keyframes quicar { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }

.bingo-contadores { display: flex; justify-content: center; gap: 2rem; font-weight: 600; color: var(--smoke); margin-bottom: 1.5rem; }
.bingo-contadores b { color: var(--yellow); font-family: var(--font-title); }

.bingo-acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.painel-bingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-top: 1.75rem; }
.painel-coluna { display: grid; gap: 0.3rem; }
.painel-coluna__letra { text-align: center; font-family: var(--font-title); font-weight: 700; color: var(--yellow); padding-bottom: 0.25rem; }
.painel-num {
  aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--graphite); border: 1px solid var(--steel); color: var(--smoke);
  font-size: 0.8125rem; font-weight: 600; transition: background var(--transition), color var(--transition), transform var(--transition);
}
.painel-num.branddo { background: var(--yellow); color: var(--pitch); border-color: var(--yellow); transform: scale(1.04); }

@media (max-width: 40rem) {
  .bola { width: 6rem; height: 6rem; }
  .bola__num { font-size: 2.25rem; }
  .painel-num { font-size: 0.6875rem; }
}