/* Kaamko games: 15 Puzzle (docs/49_GAMES.md). Linked from src/pages/games/fifteen.astro. */
.gfifteen {
  --ff-size: min(400px, calc(100vw - 2.5rem));
  --ff-gap: 6px;
  --ff-cell: calc((var(--ff-size) - var(--ff-gap) * 5) / 4);
  --ff-board: var(--ice-palette-line-200);
  --ff-tile: var(--ice-palette-navy-900);
  --ff-ink: var(--ice-palette-warm-50);
  --ff-home: var(--ice-palette-forest-700);
  max-width: 480px;
  margin-inline: auto;
}
[data-theme='dark'] .gfifteen {
  --ff-board: var(--ice-palette-graphite-950);
  --ff-tile: var(--ice-palette-graphite-700);
  --ff-ink: var(--ice-palette-graphite-100);
  --ff-home: var(--ice-palette-forest-700);
}
.gfifteen__board {
  position: relative;
  width: var(--ff-size);
  height: var(--ff-size);
  margin-inline: auto;
  border-radius: 8px;
  background: var(--ff-board);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.gfifteen__tile {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--ff-cell);
  height: var(--ff-cell);
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--ff-tile);
  color: var(--ff-ink);
  font: 700 calc(var(--ff-cell) * .4)/1 var(--ice-font-primary, inherit);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transform: translate(
    calc(var(--ff-gap) + var(--x, 0) * (var(--ff-cell) + var(--ff-gap))),
    calc(var(--ff-gap) + var(--y, 0) * (var(--ff-cell) + var(--ff-gap)))
  );
  transition: transform .11s ease-out;
}
.gfifteen__tile.is-home { background: var(--ff-home); color: var(--ice-palette-warm-50); }
.gfifteen__tile:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: 2px; }
.gfifteen__board.is-solved .gfifteen__tile { background: var(--ff-home); }
@media (prefers-reduced-motion: reduce) {
  .gfifteen__tile { transition: none; }
}