/* Jigsaw. The table is a matte surface, not a white page: pieces need something to sit ON, and every
   piece casts a shadow so it reads as lying on top rather than printed into it. */
.jig-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 10px;margin-bottom:8px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
}
.jig-count{font-size:13px;color:var(--text-2);font-variant-numeric:tabular-nums;min-width:112px}
.jig-clock{
  font-size:13px;color:var(--text);font-variant-numeric:tabular-nums;
  padding:2px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);
}
.jig-btn{
  -webkit-appearance:none;appearance:none;font:inherit;font-size:13px;cursor:pointer;
  padding:5px 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--blue);
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);
}
.jig-btn:hover{background:var(--blue-bg);border-color:transparent}
.jig-btn:active{transform:translateY(1px)}

.jig-view{
  position:relative;overflow:hidden;
  height:min(68vh,600px);
  border:1px solid rgba(0,0,0,.18);border-radius:var(--r);
  touch-action:none;                 /* every gesture is ours: pan, pinch, drag a lump */
  cursor:grab;
  -webkit-user-select:none;user-select:none;
  overscroll-behavior:contain;
  /* Matte cloth. The weave is two fine cross hatches rather than a tiled image: a repeating gradient
     is seamless by definition, where a tiled bitmap shows its own square every few hundred pixels
     however carefully it is made. A soft pool of light in the middle gives the surface some depth. */
  background-color:#7C727E;
  background-image:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.11), rgba(0,0,0,.26) 78%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, rgba(0,0,0,.035) 2px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.025) 0 2px, rgba(0,0,0,.025) 2px 4px);
  box-shadow:inset 0 2px 14px rgba(0,0,0,.34);
}
.jig-view:active{cursor:grabbing}
.jig-table{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  will-change:transform;
}
/* The piece is a lit wrapper; the face inside it is the clipped picture. The wrapper carries the
   bevel filter and the shadow, which is what turns a printed shape into something lying on cloth.
   Only the face takes pointer events, so the transparent corners of the box are not grabbable. */
.jig-piece{
  position:absolute;top:0;left:0;
  z-index:10;
  pointer-events:none;
  filter:url(#gk-jig-bevel) drop-shadow(1px 2px 2px rgba(0,0,0,.42));
  transition:filter 140ms var(--ease);
}
.jig-face{
  width:100%;height:100%;
  background-repeat:no-repeat;
  pointer-events:auto;
  cursor:grab;
  /* the shaded half of the bevel: the light comes from the top left, so the bottom right of every
     piece sits in its own shadow. The lighting filter above does the bright half. */
  box-shadow:inset -4px -4px 6px rgba(0,0,0,.42), inset 3px 3px 4px rgba(255,255,255,.16);
}
.jig-piece.held{
  z-index:900;
  filter:url(#gk-jig-bevel) drop-shadow(6px 14px 16px rgba(0,0,0,.5));
}
.jig-piece.held .jig-face{cursor:grabbing}
/* the flash when two pieces click together */
.jig-piece.joined{
  filter:url(#gk-jig-bevel) drop-shadow(0 0 12px rgba(255,255,255,.9));
}
.jig-piece.done{filter:url(#gk-jig-bevel) drop-shadow(1px 2px 3px rgba(0,0,0,.34))}

/* the picture, only while you ask for it */
.jig-preview{
  position:absolute;inset:0;z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(20,18,20,.82);
  padding:18px;cursor:zoom-out;
}
.jig-preview.hidden{display:none}
.jig-preview-img{
  max-width:min(100%,760px);max-height:78%;
  border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,.6);
}
.jig-preview-note{color:#fff;font-size:13px;text-align:center;opacity:.9}

@media (max-width:520px){
  .jig-view{height:min(62vh,520px)}
  .jig-count{min-width:0;flex:1 1 100%;order:-1}
}