/* 2048 — 4×4 grid of background cells with absolutely-positioned tiles
   that slide via CSS `translate` transitions. */

.g2048-stat {
  font-size: 12px;
  opacity: 0.85;
}
.g2048-stat b {
  font-weight: 700;
  font-size: 16px;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.g2048-wrap {
  display: flex;
  justify-content: center;
  margin: 18px auto;
  padding: 0 8px;
}

.g2048-board {
  --g2048-tile: 80px;
  --g2048-gap: 8px;
  --g2048-stride: calc(var(--g2048-tile) + var(--g2048-gap));
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, var(--g2048-tile));
  grid-template-rows: repeat(4, var(--g2048-tile));
  gap: var(--g2048-gap);
  padding: var(--g2048-gap);
  background: #bbada0;
  border-radius: 6px;
  box-sizing: content-box;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.g2048-cell {
  background: rgba(238, 228, 218, 0.35);
  border-radius: 4px;
}

.g2048-tiles {
  position: absolute;
  inset: var(--g2048-gap);
  pointer-events: none;
}

.g2048-tile {
  position: absolute;
  width: var(--g2048-tile);
  height: var(--g2048-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-family: 'Tahoma', sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #776e65;
  background: #eee4da;
  transition: translate 0.13s ease-out;
  translate: 0 0;
}
.g2048-tile.new       { animation: g2048-pop 0.18s ease both; }
.g2048-tile.merged    { animation: g2048-pop 0.18s ease both; }
.g2048-tile.absorbing { z-index: 0; }

@keyframes g2048-pop {
  0%   { scale: 0.4; }
  60%  { scale: 1.12; }
  100% { scale: 1; }
}

.g2048-tile[data-value="2"]    { background: #eee4da; color: #776e65; }
.g2048-tile[data-value="4"]    { background: #ede0c8; color: #776e65; }
.g2048-tile[data-value="8"]    { background: #f2b179; color: #fff; }
.g2048-tile[data-value="16"]   { background: #f59563; color: #fff; }
.g2048-tile[data-value="32"]   { background: #f67c5f; color: #fff; }
.g2048-tile[data-value="64"]   { background: #f65e3b; color: #fff; }
.g2048-tile[data-value="128"]  { background: #edcf72; color: #fff; font-size: 28px; }
.g2048-tile[data-value="256"]  { background: #edcc61; color: #fff; font-size: 28px; }
.g2048-tile[data-value="512"]  { background: #edc850; color: #fff; font-size: 28px; }
.g2048-tile[data-value="1024"] { background: #edc53f; color: #fff; font-size: 22px; }
.g2048-tile[data-value="2048"] { background: #edc22e; color: #fff; font-size: 22px; }
.g2048-tile[data-value="4096"] { background: #3c3a32; color: #fff; font-size: 22px; }
.g2048-tile[data-value="8192"] { background: #3c3a32; color: #fff; font-size: 22px; }

.g2048-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(238, 228, 218, 0.78);
  color: #776e65;
  border-radius: 6px;
  text-align: center;
}
.g2048-overlay.hidden { display: none; }
.g2048-overlay h2 { margin: 0 0 8px; font-size: 32px; color: #776e65; }
.g2048-overlay p  { margin: 0 0 4px; font-size: 16px; }
.g2048-overlay button { margin-top: 14px; padding: 10px 20px; font-size: 14px; }

@media (max-width: 420px) {
  .g2048-board { --g2048-tile: 68px; --g2048-gap: 6px; }
  .g2048-tile { font-size: 26px; }
  .g2048-tile[data-value="128"],
  .g2048-tile[data-value="256"],
  .g2048-tile[data-value="512"]  { font-size: 22px; }
  .g2048-tile[data-value="1024"],
  .g2048-tile[data-value="2048"] { font-size: 18px; }
}
@media (max-width: 360px) {
  .g2048-board { --g2048-tile: 60px; --g2048-gap: 5px; }
  .g2048-tile { font-size: 22px; }
  .g2048-tile[data-value="128"],
  .g2048-tile[data-value="256"],
  .g2048-tile[data-value="512"]  { font-size: 18px; }
  .g2048-tile[data-value="1024"],
  .g2048-tile[data-value="2048"] { font-size: 15px; }
}