.narrow { max-width: 520px; }
:root { --tm-board: #b9c2dc; --tm-ring: #9aa6cb; --tm-cell: rgba(255, 255, 255, 0.5); }
:root[data-theme="dark"] { --tm-board: #232b45; --tm-ring: #161c31; --tm-cell: rgba(255, 255, 255, 0.07); }
.board {
  --gap: 3.2%;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: var(--gap);
  border-radius: 16px;
  background: var(--tm-board);
  box-shadow: 0 0 0 4px var(--tm-ring), 0 22px 40px rgba(0, 0, 0, 0.5);
  touch-action: none; /* we handle swipes ourselves */
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.board:focus-visible { box-shadow: 0 0 0 4px var(--gold), 0 22px 40px rgba(0, 0, 0, 0.5); }
.cells, .tiles { position: absolute; inset: var(--gap); }
.cells { display: grid; grid-template: repeat(4, 1fr) / repeat(4, 1fr); gap: 0; }
.cells > i { display: block; margin: 6%; border-radius: 10px; background: var(--tm-cell); }

.tile {
  position: absolute;
  left: 0;
  top: 0;
  width: 25%;
  height: 25%;
  transform: translate(calc(var(--c) * 100%), calc(var(--r) * 100%));
  transition: transform 0.12s ease-out;
}
.tile > div {
  position: absolute;
  inset: 6%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: clamp(1.4rem, 8.5vw, 2.6rem);
  color: #3b2a1f;
  background: #eee2cf;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.tile.new > div { animation: appear 0.2s 0.1s ease-out backwards; }
.tile.merge > div { animation: pulse 0.2s 0.1s ease-out; }
@keyframes appear { from { transform: scale(0.3); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.18); } }

.tile.gone { transition: transform 0.12s ease-out, opacity 0.12s; opacity: 0; }

.v2 > div { background: #f2e8d5; }
.v4 > div { background: #efdcb5; }
.v8 > div { background: #f5b070; color: #fff; }
.v16 > div { background: #f28a4e; color: #fff; }
.v32 > div { background: #f2694b; color: #fff; }
.v64 > div { background: #e5484d; color: #fff; }
.v128 > div { background: #f2c94c; color: #fff; font-size: clamp(1.2rem, 7.4vw, 2.2rem); }
.v256 > div { background: #efc030; color: #fff; font-size: clamp(1.2rem, 7.4vw, 2.2rem); }
.v512 > div { background: #e9b41a; color: #fff; font-size: clamp(1.2rem, 7.4vw, 2.2rem); }
.v1024 > div { background: #35a86d; color: #fff; font-size: clamp(1rem, 6.2vw, 1.8rem); }
.v2048 > div { background: #4a7de8; color: #fff; font-size: clamp(1rem, 6.2vw, 1.8rem); box-shadow: 0 0 22px 4px rgba(242, 194, 48, 0.75); }
.vbig > div { background: #9b6be0; color: #fff; font-size: clamp(0.9rem, 5.4vw, 1.5rem); }

.hint { text-align: center; color: var(--muted); font-size: 0.85rem; margin: 12px 0 0; }
.big { font-size: 3.4rem; }