/* 2048 sayfasına özel stiller */
.g2048 {
  --gap: clamp(8px, 2.4vw, 12px);
  --board-bg: #c9c3e8;
  --cell-bg: #e3dff5;
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  padding: var(--gap);
  background: var(--board-bg);
  border-radius: 16px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
:root[data-theme="dark"] .g2048 { --board-bg: #2b2f44; --cell-bg: #363b54; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .g2048 { --board-bg: #2b2f44; --cell-bg: #363b54; }
}
.g2048 .cells {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: var(--gap);
  width: 100%;
  height: 100%;
}
.g2048 .cell { background: var(--cell-bg); border-radius: 10px; }
.g2048 .tiles { position: absolute; inset: var(--gap); }
.tile {
  position: absolute;
  top: 0;
  left: 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 0.11s ease-in-out;
  z-index: 2;
}
.tile.dying { z-index: 1; }
.tile-inner {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 800;
  font-size: clamp(1.4rem, 7vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  background: var(--tile-bg, #eceffd);
  color: var(--tile-fg, #343a5c);
}
.tile-inner.d3 { font-size: clamp(1.2rem, 6vw, 2rem); }
.tile-inner.d4 { font-size: clamp(1rem, 4.8vw, 1.65rem); }
.tile-inner.d5 { font-size: clamp(0.85rem, 3.9vw, 1.35rem); }
.tile-inner.is-new { animation: tile-appear 0.18s ease-out 0.09s backwards; }
.tile-inner.is-merged { animation: tile-pop 0.2s ease-out 0.08s; }
@keyframes tile-appear { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes tile-pop { 0% { transform: scale(1); } 50% { transform: scale(1.14); } 100% { transform: scale(1); } }
.v2 { --tile-bg: #ffffff; --tile-fg: #3b3f63; box-shadow: 0 1px 2px rgb(40 30 90 / 12%); }
.v4 { --tile-bg: #fff0c7; --tile-fg: #4d3a12; box-shadow: 0 1px 2px rgb(40 30 90 / 12%); }
.v8 { --tile-bg: #ffd38f; --tile-fg: #4d3200; }
.v16 { --tile-bg: #ffb877; --tile-fg: #4d2400; }
.v32 { --tile-bg: #ff9a6a; --tile-fg: #ffffff; }
.v64 { --tile-bg: #ff7a5c; --tile-fg: #ffffff; }
.v128 { --tile-bg: #ffd84d; --tile-fg: #4d3b00; box-shadow: 0 0 18px rgb(255 216 77 / 45%); }
.v256 { --tile-bg: #f9c931; --tile-fg: #4d3b00; box-shadow: 0 0 20px rgb(249 201 49 / 50%); }
.v512 { --tile-bg: #6fd3a0; --tile-fg: #0f3d27; box-shadow: 0 0 22px rgb(111 211 160 / 50%); }
.v1024 { --tile-bg: #46b8e8; --tile-fg: #ffffff; box-shadow: 0 0 24px rgb(70 184 232 / 50%); }
.v2048 { --tile-bg: #7c6cf2; --tile-fg: #ffffff; box-shadow: 0 0 28px rgb(124 108 242 / 60%); }
.vbig { --tile-bg: #2b2d42; --tile-fg: #ffffff; }
.g2048 .overlay { border-radius: 16px; }