/* hotpuzzle.net's swap-tile puzzle (puzzle-fragments.html :: tiles, on tile-puzzle.html and upload.html,
   driven by hotpuzzle/tiles.ts), on top of jigsawfun/puzzle.css - whose color tokens, toolbar, Peek and
   win card it reuses. puzzle.css styles the jigsaw's game by id (#game, #table, #win); the tile game
   has classes instead, so both can share /upload, and the rules it needs from there are repeated here. */

/* Hint's "in the right place" color */
:root { --ok: #16a34a; }
@media (prefers-color-scheme: dark) {
  :root { --ok: #4ade80; }
}

#loadMsg.error { color: var(--accent); }

/* Shown by tiles.ts once its picture has loaded */
.tile-game { display: none; flex-direction: column; align-items: center; width: 100%; }
.tile-game .tiles-share.copied { border-color: var(--accent); color: var(--accent); }

/* The board is exactly the picture: tiles.ts sizes it to fit the window, and lays the tiles over it.
   As puzzle.css's #table: its own stacking context, and no scrolling or zooming from a touch on it. */
.tiles-board {
  position: relative;
  isolation: isolate;
  background: var(--table);
  border-radius: 4px;
  border: 1px solid var(--line);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* Peek's picture, over the tiles; and the finished picture, under the win card */
.tiles-board .board-img { z-index: 5000; }
.tiles-board .board-img.show { opacity: 1; }
.tiles-board.solved .board-img { opacity: 1; transition: opacity .8s .25s; z-index: 2; }
.tiles-board.solved .peek-count { display: none; }
.tiles-win { position: absolute; inset: 0; display: none; pointer-events: none; z-index: 6000; }
.tiles-win.show { display: block; }
/* Over the bottom of the finished picture, rather than above it as on the jigsaw's roomier table */
.tiles-win .win-card { top: auto; bottom: 14px; max-width: calc(100% - 24px); }

.tile {
  position: absolute; left: 0; top: 0;
  background-repeat: no-repeat;
  /* Thin lines between tiles, so the grid reads on any picture */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5);
  cursor: grab;
  touch-action: none;
  transition: transform .18s ease-out;
  outline: none;
}
/* Gliding into a new slot after a swap: above the tiles that stay put */
.tile.moving { z-index: 2; }
.tile.dragging {
  z-index: 3; cursor: grabbing; transition: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 12px 28px rgba(0, 0, 0, .45);
}
/* With Hint on: a tile in its right place gets a small check in its corner, with a dark halo so it
   reads on any picture */
.tile.correct::after {
  content: "\2713\FE0E"; /* ✓ as text, not an emoji */
  position: absolute; top: 4px; right: 7px;
  color: var(--ok);
  font-size: 16px; font-weight: 700; line-height: 1;
  text-shadow: 0 0 2px rgba(0, 0, 0, .7), 0 1px 3px rgba(0, 0, 0, .5);
  pointer-events: none;
}
/* The tile a dragged one would swap with, and the one picked by a tap (or Enter / Space) */
.tile.target, .tile.selected, .tile:focus-visible {
  box-shadow: inset 0 0 0 3px var(--accent);
}
.tile.selected { z-index: 1; }
.tiles-board.solved .tile { box-shadow: none; cursor: default; }