:root {
  --size: 4;
  --board-size: min(90vmin, 480px);
  --gap: calc(var(--board-size) * 0.025);
  --cell: calc((var(--board-size) - var(--gap) * (var(--size) + 1)) / var(--size));
  --radius: calc(var(--cell) * 0.06);
  --slide-ms: 120ms;
}

.board {
  position: relative;
  width: var(--board-size);
  height: var(--board-size);
  background: var(--board-bg);
  border-radius: calc(var(--radius) * 1.5);
  padding: var(--gap);
  touch-action: none;
  user-select: none;
}

.grid-bg {
  position: absolute;
  inset: var(--gap);
  display: grid;
  grid-template-columns: repeat(var(--size), 1fr);
  grid-template-rows: repeat(var(--size), 1fr);
  gap: var(--gap);
}

.cell {
  background: var(--cell-bg);
  border-radius: var(--radius);
}

.tiles {
  position: absolute;
  inset: var(--gap);
}

.tile {
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(var(--cell) * 0.45);
  transition: transform var(--slide-ms) ease;
  will-change: transform;
}

.tile.appear { animation: appear .18s ease-in-out; }
.tile.merged { animation: pop .18s ease-in-out; }

@keyframes appear {
  0%   { transform: translate(var(--x), var(--y)) scale(0); }
  100% { transform: translate(var(--x), var(--y)) scale(1); }
}
@keyframes pop {
  0%   { transform: translate(var(--x), var(--y)) scale(1); }
  50%  { transform: translate(var(--x), var(--y)) scale(1.18); }
  100% { transform: translate(var(--x), var(--y)) scale(1); }
}

.tile[data-value="2"]    { background: #eee4da; color: #776e65; }
.tile[data-value="4"]    { background: #ede0c8; color: #776e65; }
.tile[data-value="8"]    { background: #f2b179; color: #f9f6f2; }
.tile[data-value="16"]   { background: #f59563; color: #f9f6f2; }
.tile[data-value="32"]   { background: #f67c5f; color: #f9f6f2; }
.tile[data-value="64"]   { background: #f65e3b; color: #f9f6f2; }
.tile[data-value="128"]  { background: #edcf72; color: #f9f6f2; font-size: calc(var(--cell) * 0.4); }
.tile[data-value="256"]  { background: #edcc61; color: #f9f6f2; font-size: calc(var(--cell) * 0.4); }
.tile[data-value="512"]  { background: #edc850; color: #f9f6f2; font-size: calc(var(--cell) * 0.4); }
.tile[data-value="1024"] { background: #edc53f; color: #f9f6f2; font-size: calc(var(--cell) * 0.32); }
.tile[data-value="2048"] { background: #edc22e; color: #f9f6f2; font-size: calc(var(--cell) * 0.32); box-shadow: 0 0 24px rgba(243, 215, 116, 0.6); }
.tile.super              { background: #3c3a32; color: #f9f6f2; font-size: calc(var(--cell) * 0.26); }

/* Cute gradient overlay on tiles */
.tile { box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.1); }
.tile[data-value="2"]  { background: linear-gradient(135deg, #eee4da 0%, #e4d4c4 100%); }
.tile[data-value="4"]  { background: linear-gradient(135deg, #ede0c8 0%, #ddd0b0 100%); }
.tile[data-value="8"]  { background: linear-gradient(135deg, #f2b179 0%, #e89060 100%); }
.tile[data-value="16"] { background: linear-gradient(135deg, #f59563 0%, #e07840 100%); }
.tile[data-value="32"] { background: linear-gradient(135deg, #f67c5f 0%, #e05838 100%); }
.tile[data-value="64"] { background: linear-gradient(135deg, #f65e3b 0%, #d83e18 100%); }
.tile[data-value="128"] { background: linear-gradient(135deg, #edcf72 0%, #dab840 100%); }
.tile[data-value="256"] { background: linear-gradient(135deg, #edcc61 0%, #d8b030 100%); }
.tile[data-value="512"] { background: linear-gradient(135deg, #edc850 0%, #d5a820 100%); }
.tile[data-value="1024"] { background: linear-gradient(135deg, #edc53f 0%, #d0a010 100%); }
.tile[data-value="2048"] { background: linear-gradient(135deg, #edc22e 0%, #c89800 100%); box-shadow: 0 0 32px rgba(243,215,116,0.8), inset 0 1px 0 rgba(255,255,255,0.3); }

.overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-bg);
  border-radius: calc(var(--radius) * 1.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 10;
  animation: fadein .3s ease-in-out;
}
.overlay[hidden] { display: none; }
.overlay-text {
  font-size: clamp(36px, 8vmin, 56px);
  font-weight: 800;
  color: var(--text);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 16px;
  min-height: 28px;
}
.badge {
  background: var(--accent);
  color: #f9f6f2;
  font-weight: 800;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.5px;
  animation: appear-badge .3s ease-in-out;
}
@keyframes appear-badge {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}