/* Ghép tranh cùng gấu: khung 2×2 + khay mảnh ghép */
.jigsaw { --S: min(clamp(180px, 46vmin, 380px), 62vh); }
.jz-wrap { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vmin, 40px); }
.jz-board { position: relative; width: var(--S); height: var(--S); padding: 0; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; }
.jz-ghost { position: absolute; inset: 0; opacity: .18; filter: grayscale(.4); pointer-events: none; }
.jz-slot { position: relative; overflow: hidden; outline: 3px dashed #c3cfdf; outline-offset: -6px; }
.jz-slot.on { outline: 0; }
.jz-board.full { animation: bump .6s ease; box-shadow: 0 8px 0 #22a454, 0 0 0 6px var(--good), 0 16px 28px rgba(47, 207, 106, .35); }
/* mảnh = 1/4 khung; bên trong là cả bức tranh dịch theo vị trí mảnh */
.pic.jz { --s: var(--S); }
.jz-cut { position: absolute; left: 0; top: 0; width: calc(var(--S) / 2); height: calc(var(--S) / 2); overflow: hidden; }
.jz-cut .pic.jz { position: absolute; left: calc(var(--x) * var(--S) / -2); top: calc(var(--y) * var(--S) / -2); }
.jz-ghost .pic.jz { position: absolute; inset: 0; }
.jz-tray { display: grid; grid-template-columns: repeat(2, auto); gap: clamp(10px, 2vmin, 16px); }
.jz-piece { position: relative; width: calc(var(--S) / 2); height: calc(var(--S) / 2); padding: 0; overflow: hidden; cursor: grab; touch-action: none; animation: pop .4s ease backwards; animation-delay: calc(var(--n) * .07s); }
.jz-piece .jz-cut { position: absolute; }
.jz-piece.dragging { z-index: 30; cursor: grabbing; box-shadow: 0 18px 30px rgba(40, 80, 140, .3); animation: none; }
.jz-piece.sel { box-shadow: 0 8px 0 #f2b23a, 0 0 0 5px #ffc21f; transform: translateY(-5px); }
.jz-piece.wrong { animation: shake .45s ease; }
/* dọc: khay 4 mảnh một hàng, mảnh thu nhỏ còn 3/4 (21vw so với ô 28vw) */
@media (orientation: portrait) {
  .jigsaw { --S: min(56vw, 28vh); }
  .jz-wrap { flex-direction: column; gap: 14px; }
  .jz-tray { grid-template-columns: repeat(4, auto); gap: 8px; }
  .jz-tray .jz-piece { width: calc(var(--S) * .375); height: calc(var(--S) * .375); }
  .jz-tray .jz-cut { transform: scale(.75); transform-origin: 0 0; }
}