/*
 * Picture puzzles (Jigsaw Puzzle, Art & Layered Puzzles, Sliding Picture Puzzle) — loaded after
 * games.css, only on those three pages ("extraStyles" in content/games/*.json). Every piece and
 * tile is a <canvas>; positions and turns come from CSS variables the scripts set.
 */

:root {
  --pp-table: #e9eef5;
  --pp-gap: #cbd5e1;
  --pp-frame: rgba(15, 23, 42, 0.18);
}

[data-bs-theme='dark'] {
  --pp-table: #111a2b;
  --pp-gap: #1e293b;
  --pp-frame: rgba(226, 232, 240, 0.2);
}

.pp-shell {
  width: 100%;
}

.pp-play {
  scroll-margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing);
  width: 100%;
}

.pp-play[hidden],
.pp-picker[hidden] {
  display: none;
}

/* ---------- Picker + crop preview ---------- */

.pp-picker {
  scroll-margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 40rem;
  padding: var(--spacing);
  border: 2px dashed transparent;
  border-radius: var(--radius-lg);
}

.pp-picker.is-dragover {
  border-color: var(--primary);
  background-color: var(--primary-soft);
}

.pp-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.pp-themes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-xs);
}

.pp-chip {
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 600;
}

.pp-chip.is-active {
  border-color: var(--primary);
  background: var(--primary);
  color: #ffffff;
}

/* Fixed-size thumbnails: every tile is the same 4:3 box whatever the picture. */
.pp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(6.5rem, 30%), 1fr));
  gap: var(--spacing-xs);
  width: 100%;
  max-height: 15.5rem;
  overflow-y: auto;
  padding: 2px;
}

.pp-thumb {
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  cursor: pointer;
}

.pp-thumb[hidden] {
  display: none;
}

.pp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-thumb:hover,
.pp-thumb:focus-visible {
  border-color: var(--primary-soft-border);
}

.pp-thumb[aria-pressed='true'] {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
}

.pp-upload {
  cursor: pointer;
}

.pp-upload:focus-within {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.pp-note {
  margin: 0;
  max-width: 36rem;
  font-size: 0.875rem;
  text-align: center;
  color: var(--text-muted);
}

.pp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: #0f172a;
  cursor: grab;
  touch-action: none;
}

.pp-stage.is-portrait {
  aspect-ratio: 1 / 1;
}

.pp-stage:active {
  cursor: grabbing;
}

/* Built-in photos and generated art: a fixed preview that doesn't trap touch scrolling. */
.pp-stage.is-locked,
.pp-stage.is-locked:active {
  background-color: transparent;
  cursor: default;
  touch-action: auto;
}

.pp-zoom[hidden] {
  display: none;
}

.pp-stage:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

.pp-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.pp-zoom {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  max-width: 28rem;
}

.pp-zoom-range {
  flex: 1 1 auto;
  min-width: 0;
}

.pp-zoom-btn {
  width: 2.5rem;
  padding-inline: 0;
  font-size: 1.2rem;
  line-height: 1;
}

.pp-start {
  min-width: 12rem;
}

/* The full picture over a board while Peek is on. */
.pp-peek {
  position: absolute;
  inset: 0;
  z-index: 5000;
  display: none;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.is-peek > .pp-peek {
  display: block;
}

/* ---------- Sliding puzzle ---------- */

.sp-board {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--pp-gap);
  touch-action: none;
  user-select: none;
}

/* Fixed-size cells (GAMES.md §4): each tile is exactly 1/N of the board, whatever it shows. */
.sp-tile {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / var(--sp-n, 4));
  height: calc(100% / var(--sp-n, 4));
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 1px;
  cursor: pointer;
  transform: translate(calc(var(--sp-x, 0) * 100%), calc(var(--sp-y, 0) * 100%));
  transition: transform 0.12s ease-out;
}

.sp-img,
.ap-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
}

.sp-num {
  position: absolute;
  top: 4px;
  left: 6px;
  display: none;
  padding: 0 0.3rem;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.7);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp-board.show-numbers .sp-num {
  display: block;
}

.sp-tile.is-gap {
  visibility: hidden;
}

.sp-board.is-solved .sp-tile {
  padding: 0;
}

.sp-board.is-solved .sp-tile.is-gap {
  visibility: visible;
}

.sp-board.is-solved .sp-img {
  border-radius: 0;
}

.sp-board.is-solved .sp-num {
  display: none;
}

/* ---------- Art & Layered ---------- */

.ap-board {
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1 / 1;
  min-height: 0;
  touch-action: none;
  user-select: none;
}

.ap-rings {
  overflow: hidden;
  border-radius: 50%;
  background-color: var(--pp-gap);
}

.ap-ring,
.ap-ring-mark,
.ap-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ap-ring {
  transform: rotate(var(--r, 0deg));
  transition: transform 0.15s ease-out;
}

.ap-board.is-dragging .ap-ring {
  transition: none;
}

.ap-ring-mark {
  pointer-events: none;
}

.ap-rotate,
.ap-swap {
  display: grid;
  grid-template-columns: repeat(var(--ap-n, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--ap-n, 4), minmax(0, 1fr));
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius);
  background-color: var(--pp-gap);
}

.ap-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  cursor: pointer;
}

.ap-rotate .ap-img {
  transform: rotate(var(--r, 0deg));
  transition: transform 0.15s ease-out;
}

.ap-cell.is-cursor {
  outline: 3px solid var(--primary);
  outline-offset: -3px;
  z-index: 1;
}

.ap-board:not(:focus-visible) .ap-cell.is-cursor {
  outline: none;
}

.ap-cell.is-picked {
  outline: 3px solid var(--game-yellow);
  outline-offset: -3px;
  z-index: 2;
}

.ap-cell.is-picked .ap-img {
  opacity: 0.7;
}

.ap-swap.show-correct .ap-cell.is-correct::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--game-green);
  pointer-events: none;
}

.ap-layers {
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--pp-gap);
  cursor: grab;
}

.ap-layer {
  opacity: 0.4;
}

.ap-layer.is-selected {
  z-index: 10;
  opacity: 1;
}

.ap-board.is-solved .ap-layer,
.ap-board.is-solved.ap-rotate,
.ap-board.is-solved.ap-swap {
  opacity: 1;
  gap: 0;
}

.ap-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-sm);
}

.ap-chips[hidden] {
  display: none;
}

.ap-chip {
  padding: 0.3rem 0.75rem;
  border: 2px solid var(--ap-chip);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
}

.ap-chip[aria-pressed='true'] {
  background: var(--ap-chip);
  color: #ffffff;
}

/* ---------- Jigsaw ---------- */

.jg-table {
  position: relative;
  width: calc(var(--jg-w, 100) * var(--jg-k, 1) * 1px);
  height: calc(var(--jg-h, 100) * var(--jg-k, 1) * 1px);
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background-color: var(--pp-table);
  touch-action: none;
  user-select: none;
}

.jg-frame {
  position: absolute;
  top: calc(var(--jg-oy) * var(--jg-k) * 1px);
  left: calc(var(--jg-ox) * var(--jg-k) * 1px);
  z-index: 0;
  width: calc(var(--fw) * var(--jg-k) * 1px);
  height: calc(var(--fh) * var(--jg-k) * 1px);
  box-shadow: 0 0 0 2px var(--pp-frame);
  background-color: var(--surface);
}

.jg-ghost {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.jg-table.show-ghost .jg-ghost {
  opacity: 0.22;
}

.jg-table.is-peek .jg-frame,
.jg-table.is-solved .jg-frame {
  z-index: 5000;
}

.jg-table.is-peek .jg-ghost,
.jg-table.is-solved .jg-ghost {
  opacity: 1;
}

.jg-cursor {
  position: absolute;
  top: calc(var(--cy, 0) * var(--ch) * var(--jg-k) * 1px);
  left: calc(var(--cx, 0) * var(--cw) * var(--jg-k) * 1px);
  z-index: 4000;
  display: none;
  width: calc(var(--cw) * var(--jg-k) * 1px);
  height: calc(var(--ch) * var(--jg-k) * 1px);
  outline: 3px solid var(--primary);
  pointer-events: none;
}

.jg-table:focus-visible .jg-cursor {
  display: block;
}

.jg-table.is-solved .jg-cursor {
  display: none;
}

.jg-piece {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z, 1);
  width: calc(var(--pw) * var(--jg-k) * 1px);
  height: calc(var(--ph) * var(--jg-k) * 1px);
  pointer-events: none;
  transform: translate(
    calc((var(--x, 0) + var(--jg-ox)) * var(--jg-k) * 1px),
    calc((var(--y, 0) + var(--jg-oy)) * var(--jg-k) * 1px)
  );
}

.jg-piece[hidden] {
  display: none;
}

.jg-img {
  display: block;
  width: 100%;
  height: 100%;
}

.jg-piece:not(.is-locked) .jg-img {
  filter: drop-shadow(0 2px 2px rgba(15, 23, 42, 0.35));
}

.jg-piece.is-dragging .jg-img {
  filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.45));
}

.jg-piece.is-selected .jg-img {
  filter: drop-shadow(0 0 3px var(--primary)) drop-shadow(0 0 3px var(--primary));
}

.jg-piece.is-snap {
  animation: pp-snap 0.25s ease-out;
}

@keyframes pp-snap {
  50% {
    filter: brightness(1.25);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-tile,
  .ap-ring,
  .ap-rotate .ap-img {
    transition: none;
  }

  .jg-piece.is-snap {
    animation: none;
  }
}