.merge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  padding: 0.75rem;
  background: #CBD5E1;
  border-radius: 16px;
  max-width: 360px;
  outline: none;
}

.merge-grid:focus-visible {
  box-shadow: 0 0 0 3px #7C3AED;
}

.merge-cell {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.45);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display, 'Fredoka', sans-serif);
  font-weight: 700;
  font-size: clamp(1rem, 5vw, 1.5rem);
  transition: transform 0.12s;
}

.merge-cell.has-tile {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.merge-cell.val-2 { background: #EDE9FE; color: #5B21B6; }
.merge-cell.val-4 { background: #DDD6FE; color: #5B21B6; }
.merge-cell.val-8 { background: #CFFAFE; color: #0E7490; }
.merge-cell.val-16 { background: #A5F3FC; color: #0E7490; }
.merge-cell.val-32 { background: #FEF3C7; color: #B45309; }
.merge-cell.val-64 { background: #FDE68A; color: #B45309; }
.merge-cell.val-128 { background: #FBCFE8; color: #BE185D; }
.merge-cell.val-256 { background: #10B981; color: #fff; }

.merge-cell.new-tile {
  animation: popIn 0.2s ease;
}

@keyframes popIn {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .merge-cell.new-tile { animation: none; }
}