.t48 { max-width: 460px; margin: 0 auto; }
.t48-board {
  --gap: clamp(6px, 2.2vw, 12px);
  position: relative; width: 100%; aspect-ratio: 1 / 1; padding: var(--gap); border-radius: 12px;
  background: #bbada0; touch-action: none; user-select: none; -webkit-user-select: none;
}
.t48-bg { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: var(--gap); width: 100%; height: 100%; }
.t48-slot { background: rgba(238, 228, 218, 0.35); border-radius: 8px; }
.t48-layer { position: absolute; inset: var(--gap); }
.t48-tile {
  position: absolute; left: 0; top: 0;
  width: calc((100% - 3 * var(--gap)) / 4); height: calc((100% - 3 * var(--gap)) / 4);
  transform: translate(calc(var(--c) * (100% + var(--gap))), calc(var(--r) * (100% + var(--gap))));
  transition: transform 110ms ease-in-out; z-index: 1;
}
.t48-tile.t48-ghost { z-index: 0; }
.t48-inner {
  width: 100%; height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1;
  background: #eee4da; color: #776e65; font-size: clamp(24px, 9vw, 50px);
}
.t48-d3 .t48-inner { font-size: clamp(20px, 7.6vw, 42px); }
.t48-d4 .t48-inner { font-size: clamp(16px, 6vw, 34px); }
.t48-d5 .t48-inner { font-size: clamp(13px, 4.6vw, 26px); }
.t48-new .t48-inner { animation: t48-appear 160ms ease 60ms backwards; }
.t48-merged { z-index: 2; }
.t48-merged .t48-inner { animation: t48-pop 180ms ease; }
@keyframes t48-appear { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes t48-pop { 0% { transform: scale(1); } 50% { transform: scale(1.16); } 100% { transform: scale(1); } }
.t48-v4 .t48-inner { background: #ede0c8; }
.t48-v8 .t48-inner { background: #f2b179; color: #fff; }
.t48-v16 .t48-inner { background: #f59563; color: #fff; }
.t48-v32 .t48-inner { background: #f67c5f; color: #fff; }
.t48-v64 .t48-inner { background: #f65e3b; color: #fff; }
.t48-v128 .t48-inner { background: #edcf72; color: #fff; box-shadow: 0 0 18px 2px rgba(243, 215, 116, .35); }
.t48-v256 .t48-inner { background: #edcc61; color: #fff; box-shadow: 0 0 18px 3px rgba(243, 215, 116, .45); }
.t48-v512 .t48-inner { background: #edc850; color: #fff; box-shadow: 0 0 20px 4px rgba(243, 215, 116, .5); }
.t48-v1024 .t48-inner { background: #edc53f; color: #fff; box-shadow: 0 0 22px 5px rgba(243, 215, 116, .55); }
.t48-v2048 .t48-inner { background: #edc22e; color: #fff; box-shadow: 0 0 24px 6px rgba(243, 215, 116, .6); }
.t48-vbig .t48-inner { background: #3c3a32; color: #fff; }
.t48-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .t48-tile { transition: none; } .t48-inner { animation: none !important; } }