/*
 * puzzle.css — Module A board and sliding tiles.
 * Tiles are absolutely positioned and animated with translate transforms.
 * --grid is the board dimension (3 or 4).
 */
.puzzle-stage { display: flex; justify-content: center; padding: 6px 0 18px; }

.puzzle-board {
  position: relative;
  width: min(424px, 84vw);
  aspect-ratio: 1;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px calc(100% / var(--grid))),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px calc(100% / var(--grid))),
    var(--surface-2);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  touch-action: manipulation;
}

.tile {
  position: absolute;
  top: 0; left: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(1.1rem, 4.2vw, 1.85rem);
  color: var(--tile-text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--tile-grad);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
  cursor: default;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition), filter var(--transition);
  will-change: transform;
}
.tile::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
  pointer-events: none;
}
.tile--image { background-size: cover; background-position: center; color: transparent; }
.tile--movable { cursor: pointer; }
.tile--movable:hover {
  filter: brightness(1.04);
  border-color: var(--accent);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4), 0 0 0 1px var(--accent);
  z-index: 3;
}
.tile--solved { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 4px 14px rgba(0, 0, 0, .28); }

@media (prefers-reduced-motion: reduce) { .tile { transition: none; } }