/* Holy Puzzle: jigsaw page (templates/holypuzzle/jigsaw.html); preview overlay etc. in puzzle.css */

#playWrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--bs-border-radius-lg);
  background:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, .07) 1px, transparent 0) 0 0 / 18px 18px,
    var(--bs-tertiary-bg);
}

/* phones: let the play area reach almost to the screen edges */
@media (max-width: 575.98px) {
  #playWrap {
    width: calc(100% + 1rem);
    margin: 0 -.5rem;
    border-radius: var(--bs-border-radius);
  }
}

#stage {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  touch-action: none;              /* touch drags are handled by jigsaw.ts */
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
#stage.grabbing { cursor: grabbing; }

#board {
  position: absolute;
  border: 3px dashed rgba(0, 0, 0, .18);
  border-radius: 6px;
  background: rgba(255, 255, 255, .55);
  transition: box-shadow .4s ease, border-color .4s ease;
}
#board img {
  width: 100%;
  height: 100%;
  display: block;
  opacity: .18;
  transition: opacity .2s ease;
  /* the guide picture is decoration only: it can't be dragged, selected or long-pressed */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
#board.no-ghost img { opacity: 0; }
#board.solved {
  border-color: transparent;
  box-shadow: 0 0 0 6px var(--bs-success), 0 12px 40px rgba(0, 0, 0, .25);
}

.piece {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;            /* hit-testing is done on the piece's real outline */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .2));
}
.piece.dragging {
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3));
  will-change: transform;
}
.piece.joined.dragging { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .2)); }
.piece.locked { filter: none; }
.piece.snapped { animation: snap .35s ease; }

@keyframes snap {
  0%   { filter: brightness(1.6); }
  100% { filter: brightness(1); }
}