/* The whole photograph is clipped to complementary curved outlines.
   Only misplaced pieces are separated; solved neighbors meet edge to edge. */
.board {
  gap: 0;
  padding: 0;
  background-color: #e8e7dc;
  background-image: radial-gradient(#b6bcaa66 .75px, transparent .75px);
  background-size: 10px 10px;
  box-shadow: inset 0 0 25px #435e3810;
}
.tile {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  isolation: auto;
}
.tile .piece-art {
  position: absolute;
  left: -20%;
  top: -20%;
  width: 140%;
  height: 140%;
  overflow: visible;
  fill: none;
  stroke: none;
  pointer-events: none;
  transform: scale(.71);
  transform-origin: center;
  filter: drop-shadow(0 2px 1.5px #263e3460);
  transition: transform .22s ease, filter .18s;
}
.piece-outline {
  fill: none;
  stroke: #fffbeed9;
  stroke-width: .7;
  stroke-linejoin: round;
}
.piece-photo { pointer-events: visiblePainted; }
.tile.in-place { z-index: 2; }
.tile.in-place .piece-art { transform: scale(1); filter: none; }
.tile.in-place .piece-outline { stroke: #29463688; stroke-width: .45; }
.tile:hover { filter: none; z-index: 3; }
.tile:not(.in-place):hover .piece-art { transform: scale(.76); }
.tile.selected, .tile.drop-target, .tile:focus-visible {
  z-index: 4;
  box-shadow: none;
  filter: none;
  outline: none;
}
.tile.selected .piece-outline, .tile.drop-target .piece-outline, .tile:focus-visible .piece-outline {
  stroke: #f4ffa8;
  stroke-width: 2.5;
}
.tile.selected .piece-art, .tile.drop-target .piece-art, .tile:focus-visible .piece-art {
  filter: drop-shadow(0 0 2px #37542b) drop-shadow(0 3px 2px #263e3455);
}
.tile.drag-source { opacity: .22; }
.tile-number { right: 19%; bottom: 20%; pointer-events: none; }
.tile.in-place .tile-number { right: 7%; bottom: 8%; }
.drag-ghost { background: none; box-shadow: none; transform: none; }
.drag-ghost, .drag-ghost * { pointer-events: none !important; }
.drag-ghost .piece-art {
  transform: scale(.9);
  filter: drop-shadow(0 7px 4px #263e3466);
}
.drag-ghost .piece-outline { stroke: #fffed6; stroke-width: 1.2; }
@media (prefers-reduced-motion: reduce) {
  .tile .piece-art { transition: none; }
}