.quiz-stage {
  display: grid;
  place-items: center;
  padding: 88px 20px 20px;
  background: #e8e7e2;
}

.floating-board.full-puzzle {
  --canvas-max: 1024px;
  position: relative;
  inset: auto;
  width: min(var(--canvas-max), calc(100vw - 40px), calc((100vh - 108px) * 1.333333));
  height: auto;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(23, 23, 20, .4);
  background: #fff;
  box-shadow: 0 18px 55px rgba(23, 23, 20, .13);
}

.floating-board.canvas-small { --canvas-max: 900px; }
.floating-board.canvas-large { --canvas-max: 1180px; }

.full-puzzle.is-building::after {
  content: "CUTTING PUZZLE…";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #fff;
  font: 500 11px "DM Mono", monospace;
  letter-spacing: .12em;
  z-index: 50;
}

.full-puzzle .puzzle-group {
  position: absolute;
  z-index: 2;
  cursor: grab;
  touch-action: none;
  user-select: none;
  filter: drop-shadow(0 5px 3px rgba(23, 23, 20, .18));
  pointer-events: none;
}

.full-puzzle .puzzle-group:active { cursor: grabbing; }
.full-puzzle .joined-group { z-index: 8; }

.full-puzzle .puzzle-piece {
  position: absolute;
  display: block;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  cursor: inherit;
  filter: none;
  animation: none;
  transition: none;
  touch-action: none;
  pointer-events: none;
}

.full-puzzle .puzzle-piece::before,
.full-puzzle .puzzle-piece::after { display: none !important; }

.full-puzzle .piece-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.full-puzzle .piece-hit-area {
  fill: rgba(0, 0, 0, .001);
  stroke: none;
  pointer-events: all;
  cursor: grab;
}

.full-puzzle .piece-svg image,
.full-puzzle .piece-edge { pointer-events: none; }

.full-puzzle .piece-edge {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.full-puzzle .puzzle-piece.hovered .piece-edge,
.full-puzzle .puzzle-piece.selected .piece-edge { stroke-width: 3.4; }

.full-puzzle .puzzle-piece.selected image { filter: saturate(1.12) brightness(.94); }
.full-puzzle .joined-top .edge-top,
.full-puzzle .joined-right .edge-right,
.full-puzzle .joined-bottom .edge-bottom,
.full-puzzle .joined-left .edge-left { display: none; }

@media (max-width: 700px) {
  .quiz-stage { padding: 82px 8px 8px; }
  .floating-board.full-puzzle {
    width: min(calc(100vw - 16px), calc((100vh - 90px) * 1.333333));
  }
}