/* 2048 — game-specific */
.board-wrap { flex:1; display:flex; align-items:center; justify-content:center; }

.board {
  --cell: 86px; --gap: 13px;
  position:relative;
  width:  calc(4 * var(--cell) + 5 * var(--gap));
  height: calc(4 * var(--cell) + 5 * var(--gap));
  padding: var(--gap);
  box-sizing: border-box;
  background:#C7A87A;
  border:5px solid var(--stroke);
  border-radius:18px;
  box-shadow:0 6px 0 var(--stroke);
  touch-action:none;
}
@media (max-width:430px) { .board { --cell: 76px; --gap: 11px; } }
@media (max-width:360px) { .board { --cell: 66px; --gap: 9px; } }

.cells {
  position:absolute; inset:var(--gap);
  display:grid;
  grid-template-columns: repeat(4, var(--cell));
  grid-template-rows: repeat(4, var(--cell));
  gap: var(--gap);
}
.cells span { background:rgba(28,24,20,0.12); border-radius:12px; }

.tiles { position:absolute; inset:var(--gap); }
.tile {
  position:absolute; top:0; left:0;
  width:var(--cell); height:var(--cell);
  display:flex; align-items:center; justify-content:center;
  font-family:'Astalamet','Realtime',sans-serif; font-weight:800;
  font-size:30px; color:#fff;
  border-radius:12px; border:3px solid var(--stroke);
  background:#EEE4DA; color:#5a5048;
  transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap))));
  transition: transform 110ms ease;
  will-change: transform;
}
.tile[data-val="2"]    { background:#FFE9B8; color:#5a5048; }
.tile[data-val="4"]    { background:#FFD98A; color:#5a5048; }
.tile[data-val="8"]    { background:#FF8A3D; color:#fff; }
.tile[data-val="16"]   { background:#FF6F3D; color:#fff; }
.tile[data-val="32"]   { background:#FF5DAA; color:#fff; }
.tile[data-val="64"]   { background:#E8439A; color:#fff; }
.tile[data-val="128"]  { background:#5EE882; color:#1C1814; font-size:26px; }
.tile[data-val="256"]  { background:#3DC2FF; color:#fff; font-size:26px; }
.tile[data-val="512"]  { background:#2BA8E0; color:#fff; font-size:26px; }
.tile[data-val="1024"] { background:#A855F7; color:#fff; font-size:21px; }
.tile[data-val="2048"] { background:#FFD43B; color:#1C1814; font-size:21px; box-shadow:0 0 0 4px rgba(255,212,59,0.5); }
.tile[data-big]        { font-size:19px; }

.tile-new   { animation: pop-in 150ms ease; }
.tile-merged{ animation: pop-merge 150ms ease; }
@keyframes pop-in   { 0%{ transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap)))) scale(0); } 100%{ transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap)))) scale(1); } }
@keyframes pop-merge{ 0%{ transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap)))) scale(1); } 50%{ transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap)))) scale(1.18); } 100%{ transform: translate(calc(var(--x) * (var(--cell) + var(--gap))), calc(var(--y) * (var(--cell) + var(--gap)))) scale(1); } }

.status-line { text-align:center; font-weight:700; font-size:15px; color:var(--muted); margin-top:14px; }