body {
  font-family: Inter, sans-serif;
}

.tool-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.04);
}

:root {
  --cell: 68px;
  --gap: 8px;
  --pad: 8px;
}
@media (min-width: 380px) {
  :root {
    --cell: 76px;
    --gap: 10px;
    --pad: 10px;
  }
}
@media (min-width: 480px) {
  :root {
    --cell: 90px;
    --gap: 12px;
    --pad: 12px;
  }
}

#board-wrap {
  background: #bbada0;
  border-radius: 10px;
  padding: var(--pad);
  position: relative;
  touch-action: none;
  user-select: none;
  /* exact size = 4 cells + 3 gaps + 2 pads — no rounding issues */
  width: calc(4 * var(--cell) + 3 * var(--gap) + 2 * var(--pad));
  height: calc(4 * var(--cell) + 3 * var(--gap) + 2 * var(--pad));
  /* center on page */
  margin: 0 auto;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--cell));
  grid-template-rows: repeat(4, var(--cell));
  gap: var(--gap);
  position: absolute;
  top: var(--pad);
  left: var(--pad);
}

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

.tile,
.tile-empty {
  width: var(--cell);
  height: var(--cell);
  border-radius: 6px;
}
.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: clamp(14px, 5vw, 28px);
  animation: popIn 0.15s ease-out;
}

@keyframes popIn {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  80% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes merged {
  0%,
  100% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.18);
  }
}
.just-merged {
  animation: merged 0.2s ease-out;
}

/* Classic 2048 tile palette */
.t2 {
  background: #eee4da;
  color: #776e65;
}
.t4 {
  background: #ede0c8;
  color: #776e65;
}
.t8 {
  background: #f2b179;
  color: #f9f6f2;
}
.t16 {
  background: #f59563;
  color: #f9f6f2;
}
.t32 {
  background: #f67c5f;
  color: #f9f6f2;
}
.t64 {
  background: #f65e3b;
  color: #f9f6f2;
}
.t128 {
  background: #edcf72;
  color: #f9f6f2;
  font-size: clamp(12px, 4vw, 22px);
}
.t256 {
  background: #edcc61;
  color: #f9f6f2;
  font-size: clamp(12px, 4vw, 22px);
}
.t512 {
  background: #edc850;
  color: #f9f6f2;
  font-size: clamp(12px, 4vw, 22px);
}
.t1024 {
  background: #edc53f;
  color: #f9f6f2;
  font-size: clamp(10px, 3.5vw, 18px);
}
.t2048 {
  background: #edc22e;
  color: #f9f6f2;
  font-size: clamp(10px, 3.5vw, 18px);
}
.tsuper {
  background: #3c3a32;
  color: #f9f6f2;
  font-size: clamp(9px, 3vw, 14px);
}

/* Overlay */
#overlay {
  position: absolute;
  inset: 0;
  background: rgba(238, 228, 218, 0.9);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s;
}
#overlay.show {
  opacity: 1;
  pointer-events: all;
}

/* Score pills */
.score-pill {
  background: #bbada0;
  border-radius: 6px;
  padding: 6px 14px;
  text-align: center;
  min-width: 60px;
}
.score-pill .label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #eee4da;
  text-transform: uppercase;
}
.score-pill .value {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}