.bingo-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.bingo-tile {
  background-color: #000;
  color: white;
  transition: all 0.2s ease;
  cursor: pointer;
}

.bingo-tile.locked {
  background-color: #777;      /* ljusare grå */
  color: #bbb;
  cursor: not-allowed;
  opacity: 0.6;
}

.bingo-tile.locked:hover {
  transform: none;
}

.bingo-tile.solved {
  background-color: #198754;   /* Bootstrap success */
  color: white;
}


.tile {
  position: relative;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  min-height: 110px;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .06s ease, box-shadow .06s ease;
  overflow: hidden;
}

.tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

.tile-title {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
  line-height: 1.2;
  color: rgba(0,0,0,.85);
}

/* Centered big dot (hidden until solved) */
.tile-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  opacity: 0;
  transform: scale(.9);
  transition: opacity .12s ease, transform .12s ease;
  z-index: 0;
}

.tile-solved .tile-dot {
  opacity: 1;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(34,197,94,.20);
  transform: scale(1);
}

.tile-solved {
  border-color: rgba(34,197,94,.35);
}

.tile-number {
  font-size: 1.8rem;
  font-weight: 700;
}

/* Locked tiles (number not yet drawn) */
.tile-locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.tile-locked .tile-dot {
  opacity: 0.2;
  background: rgba(0,0,0,.08);
}

/* Small unlock pulse when a new number is drawn */
.tile-unlocked {
  animation: unlockPulse 1.2s ease;
}

@keyframes unlockPulse {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  25% { transform: scale(1.02); box-shadow: 0 0 0 6px rgba(59,130,246,.18); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}