body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Diseño de la matriz de 5 columnas */
.grid-template-columns {
  grid-template-columns: repeat(5, 1fr);
}

/* Botones de número */
.number-btn {
  padding: 15px;
  font-size: 1.2rem;
  border: 2px solid #ccc;
  border-radius: 8px;
  background-color: #222;
  color: #fff;
  transition: all 0.3s ease;
}

.number-btn:hover {
  background-color: #444;
}

.number-btn.selected {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

.number-btn.drawn {
  background-color: #ffcc00;
  border-color: #ffcc00;
  color: #000;
}

.number-btn.matched {
  background-color: #00ff88;
  border-color: #00ff88;
  color: #000;
}

.number-btn.disabled {
  pointer-events: none;
  opacity: 0.5;
}

/* Animaciones */
@keyframes flash {
  0% { transform: scale(1); box-shadow: 0 0 0px #fff; }
  50% { transform: scale(1.2); box-shadow: 0 0 20px #fff; }
  100% { transform: scale(1); box-shadow: 0 0 0px #fff; }
}

.number-btn.flash {
  animation: flash 0.6s ease-in-out;
  z-index: 2;
  position: relative;
}

@keyframes bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  50%  { transform: scale(0.9); }
  70%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.number-btn.bounce {
  animation: bounce 0.6s ease;
  z-index: 2;
  position: relative;
}

/* Intro Kino Activo */
#intro {
  transition: opacity 1s ease;
}

#intro-logo {
  opacity: 0;
  transform: scale(0);
  animation: logoIn 2s ease-out forwards;
}

@keyframes logoIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#intro-text {
  opacity: 0;
  animation: fadeInText 2s ease-in 2s forwards;
}

@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

.hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Monedas */
.coin {
  width: 40px;
  height: 40px;
  background-image: url('/img/moneda.png');
  background-size: cover;
  filter: grayscale(100%);
  cursor: pointer;
  transition: filter 0.3s ease;
}

.coin.selected {
  filter: none;
  animation: coinPop 0.4s ease;
}

@keyframes coinPop {
  0%   { transform: scale(1); box-shadow: none; }
  50%  { transform: scale(1.3); box-shadow: 0 0 10px #ffd700; }
  100% { transform: scale(1); box-shadow: none; }
}

/* Balance animado */
#Balance.updated {
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0% { transform: scale(1); color: #fff; }
  50% { transform: scale(1.3); color: #00ff88; }
  100% { transform: scale(1); color: #fff; }
}