/* 2048 specific styles */
.game-2048-container {
  background-color: var(--color-text-muted); /* Darker background for the board */
  border: 4px solid var(--color-text-primary);
  border-radius: 8px;
  touch-action: none;
}

.grid-cell {
  background-color: #d1cbbd; /* Empty cell color */
  border-radius: 4px;
}

.tile {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 2rem;
  font-family: var(--font-family-serif);
  transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out;
  color: var(--color-text-primary);
}

/* Tile Colors based on cream/orange theme */
.tile-2 { background-color: #f9f6f0; }
.tile-4 { background-color: #f0ebe1; }
.tile-8 { background-color: #f2b179; color: #fff; }
.tile-16 { background-color: #f59563; color: #fff; }
.tile-32 { background-color: #f67c5f; color: #fff; }
.tile-64 { background-color: #f65e3b; color: #fff; }
.tile-128 { background-color: #edcf72; color: #fff; font-size: 1.5rem; }
.tile-256 { background-color: #edcc61; color: #fff; font-size: 1.5rem; }
.tile-512 { background-color: #edc850; color: #fff; font-size: 1.5rem; }
.tile-1024 { background-color: #edc53f; color: #fff; font-size: 1.25rem; }
.tile-2048 { background-color: #edc22e; color: #fff; font-size: 1.25rem; box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55); }
.tile-super { background-color: #3c3a32; color: #f9f6f0; font-size: 1.25rem; }

.tile-new {
  animation: appear 0.2s;
}

.tile-merged {
  animation: pop 0.2s;
}

@keyframes appear {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.game-over-message {
  background-color: rgba(249, 246, 240, 0.85); /* Cream with opacity */
  color: var(--color-text-primary);
}