.grid-2048 {
  position: relative;
  width: min(400px, 90vw);
  height: min(400px, 90vw);
  background: var(--bg-alt);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 10px;
  box-sizing: border-box;
}

.cell-bg {
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
}

.tile {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-weight: 700;
  font-family: var(--body-font);
  transition: top 0.12s ease, left 0.12s ease, transform 0.1s ease;
}

.tile[data-v="2"]    { background: #2c2740; color: var(--ivory); }
.tile[data-v="4"]    { background: #362d4d; color: var(--ivory); }
.tile[data-v="8"]    { background: #5fd9c9; color: #171320; }
.tile[data-v="16"]   { background: #4fc0e8; color: #171320; }
.tile[data-v="32"]   { background: #b98aff; color: #171320; }
.tile[data-v="64"]   { background: #ff6b6b; color: #171320; }
.tile[data-v="128"]  { background: #f4b93f; color: #171320; font-size: 0.9em; }
.tile[data-v="256"]  { background: #f4b93f; color: #171320; font-size: 0.9em; }
.tile[data-v="512"]  { background: #ffd166; color: #171320; font-size: 0.85em; }
.tile[data-v="1024"] { background: #ffd166; color: #171320; font-size: 0.75em; }
.tile[data-v="2048"] { background: #ffffff; color: #171320; font-size: 0.75em; box-shadow: 0 0 20px rgba(255,255,255,0.6); }