@import url('../global.css');

/* =============================================================================
   2048 — game-specific styles (frame/controls/score-bar = shared).
   ========================================================================== */

/* --- Square board: an N×N grid (size set in JS via --n). The background slots
   sit under an absolutely-positioned tile layer, so tiles slide between cells
   instead of the grid being rebuilt each move. --gap is shared by both. --- */
.grid-board {
  position: relative;
  padding: var(--spacing-sm);
  background: var(--tile-board-bg);
  --n: 4;
  --gap: var(--spacing-sm);
}

/* Static empty slots (the board's holes), laid out as the grid. */
.grid-cells {
  position: absolute;
  inset: var(--spacing-sm);
  display: grid;
  grid-template: repeat(var(--n), 1fr) / repeat(var(--n), 1fr);
  gap: var(--gap);
}

.grid-cell {
  border-radius: var(--border-radius-sm);
  background: var(--tile-empty-bg);
}

/* Tiles float over the slots; JS sets --row/--col (0-based) per tile. */
.tile-layer {
  position: absolute;
  inset: var(--spacing-sm);
}

/* --- Tile ---
   Size and position derive from the cell count and gap so the tile lands exactly
   on a slot; a change of --row/--col transitions (the slide). --- */
.tile {
  position: absolute;
  --tile-size: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  width: var(--tile-size);
  height: var(--tile-size);
  left: calc(var(--col, 0) * (var(--tile-size) + var(--gap)));
  top: calc(var(--row, 0) * (var(--tile-size) + var(--gap)));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  background: var(--tile-empty-bg);
  color: var(--tile-text-dark);
  font-weight: var(--font-weight-bolder);
  font-size: clamp(1.1rem, 7vmin, 2.2rem);
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition:
    top 0.12s ease,
    left 0.12s ease;
}

.tile.is-new {
  animation: tileSpawn 0.18s ease-out both;
}

.tile.is-merged {
  animation: tileMerge 0.2s ease-out both;
}

/* Smaller font for large numbers. */
.tile--3digits {
  font-size: clamp(0.9rem, 5.5vmin, 1.7rem);
}
.tile--4digits {
  font-size: clamp(0.75rem, 4.5vmin, 1.4rem);
}

/* Value palette: dark text up to 4, light beyond. */
.tile--2 {
  background: var(--tile-2-bg);
}
.tile--4 {
  background: var(--tile-4-bg);
}
.tile--8 {
  background: var(--tile-8-bg);
  color: var(--tile-text-light);
}
.tile--16 {
  background: var(--tile-16-bg);
  color: var(--tile-text-light);
}
.tile--32 {
  background: var(--tile-32-bg);
  color: var(--tile-text-light);
}
.tile--64 {
  background: var(--tile-64-bg);
  color: var(--tile-text-light);
}
.tile--128 {
  background: var(--tile-128-bg);
  color: var(--tile-text-light);
}
.tile--256 {
  background: var(--tile-256-bg);
  color: var(--tile-text-light);
}
.tile--512 {
  background: var(--tile-512-bg);
  color: var(--tile-text-light);
}
.tile--1024 {
  background: var(--tile-1024-bg);
  color: var(--tile-text-light);
}
.tile--2048 {
  background: var(--tile-2048-bg);
  color: var(--tile-text-light);
  box-shadow: var(--shadow-sm);
}
.tile--super {
  background: var(--tile-super-bg);
  color: var(--tile-text-light);
  box-shadow: var(--shadow-sm);
}