/* Jigsaw. Functional layout before the design pass; existing tokens only (spec §5). Scoped .p-jigsaw.
   Mobile: bar (piece count, placed, time), the play area at full width with the tray under the frame,
   then Preview, Pause and New deal. Wide screens: trays beside the frame (layout.js).
   For design review (docs/follow-ups.md): piece outlines, the dragged piece's ring, the frame, the
   faint preview, and the gallery tiles. */

.p-jigsaw { padding-block: var(--s3) var(--s7); }
.p-jigsaw__intro { margin-bottom: var(--s3); }
.p-jigsaw__intro h1 { font-size: 24px; }
.p-jigsaw__intro p { margin-top: var(--s1); max-width: 60ch; }
.p-jigsaw__note { margin-bottom: var(--s3); }

/* ---------- game card ---------- */
.p-jigsaw__game { position: relative; max-width: 1120px; padding: var(--s2) var(--s1); display: grid; gap: var(--s3); }
@media (min-width: 400px) { .p-jigsaw__game { padding: var(--s3); } }
@media (min-width: 720px) { .p-jigsaw__game { padding: var(--s4) var(--s5); } }
.p-jigsaw__game:focus { outline: none; }
.p-jigsaw__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); min-height: 44px; padding-inline: var(--s1); }
.p-jigsaw__bar .stat__value { font-size: 18px; }
.p-jigsaw__count span { justify-content: center; min-width: 44px; }
/* D3: at most 48 pieces under 600 px (in CSS, so the bar has its final width before any script runs);
   a game already at 96 or 150 keeps its button if the window narrows */
@media (max-width: 599px) { .p-jigsaw__count .p-jigsaw__big:not(:has(:checked)) { display: none; } }
.p-jigsaw__placed { display: inline-block; min-width: 9ch; } /* "150 of 150": no shift when it fills in */
.p-jigsaw__count-label { margin-right: calc(-1 * var(--s2)); }

/* ---------- play area ---------- */
.p-jigsaw__area {
  /* the shape of the play area comes with the page (tools/pages/jigsaw.mjs), so nothing below it moves when
     the painting loads; on short, wide windows the area is capped and the board letterboxed inside it */
  position: relative; aspect-ratio: var(--ar-narrow, 3 / 4); max-height: calc(100svh - var(--s7));
  border-radius: 12px; background: var(--surface-2);
}
@media (min-width: 720px) { .p-jigsaw__area { aspect-ratio: var(--ar-wide, 2 / 1); } }
.p-jigsaw__loading { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--s4); color: var(--ink-2); }
.p-jigsaw__loading[hidden] { display: none; }
.p-jigsaw__board {
  display: block; width: 100%; height: 100%;
  user-select: none; -webkit-user-select: none;
  /* D8: dragging needs the play area to keep touches, so no scrolling or pinch-zoom starts on it;
     the rest of the page scrolls and zooms as usual (the same board-only exception as Queens, D7). */
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
.p-jigsaw__board:empty { display: none; }
.p-jigsaw__frame { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.p-jigsaw__ghost { opacity: 0; pointer-events: none; }
.p-jigsaw__board.is-preview .p-jigsaw__ghost { opacity: .35; }
.p-jigsaw__placed { pointer-events: none; }
.p-jigsaw__piece { cursor: grab; }
.p-jigsaw__piece.is-dragging { cursor: grabbing; }
.p-jigsaw__edge { fill: none; stroke: var(--ink); stroke-opacity: .45; stroke-width: 1px; vector-effect: non-scaling-stroke; pointer-events: none; }
.p-jigsaw__piece.is-dragging .p-jigsaw__edge { stroke-opacity: 1; stroke-width: 2px; }
.p-jigsaw__hit { fill: transparent; }
/* Keyboard focus (D10): the piece's outline, thick and opaque, in both themes */
.p-jigsaw__piece:focus { outline: none; }
.p-jigsaw__piece:focus-visible .p-jigsaw__edge { stroke: var(--ink); stroke-opacity: 1; stroke-width: 3px; }
.p-jigsaw__board:focus { outline: none; }
.p-jigsaw__body { pointer-events: none; }
.p-jigsaw__board.is-edges-only .p-jigsaw__piece.is-inner { display: none; }
.p-jigsaw__board.is-complete .p-jigsaw__frame { stroke: none; }

/* ---------- actions ---------- */
.p-jigsaw__actions { display: flex; flex-wrap: wrap; gap: var(--s2); padding-inline: var(--s1); }
.p-jigsaw__actions .btn { touch-action: manipulation; min-width: 96px; }
.p-jigsaw__actions [aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* ---------- pause: hides the pieces, so the clock can't be stopped to study them ---------- */
.p-jigsaw__game.is-paused .p-jigsaw__board { visibility: hidden; }
.p-jigsaw__pause { position: absolute; inset: 0; border-radius: 12px; align-content: center; padding: var(--s5); }

/* ---------- completion card ---------- */
.p-jigsaw__card { padding: var(--s4) var(--s1) var(--s2); border-top: 1px solid var(--line); }
.p-jigsaw__card h2 { margin-bottom: var(--s3); }
.p-jigsaw__card h2:focus { outline: none; }
.p-jigsaw__credit { margin-top: var(--s4); max-width: 62ch; }
.p-jigsaw__credit p + p { margin-top: var(--s2); font-size: 14px; }
.p-jigsaw__credit-line { font-size: 14px; }
.p-jigsaw__others { padding-left: 1.25em; margin: var(--s3) 0 0; }

/* ---------- statistics ---------- */
.p-jigsaw__mystats { margin-top: var(--s6); max-width: 62ch; }
.p-jigsaw__mystats h2 { margin-bottom: var(--s3); }
.p-jigsaw__stats { border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.p-jigsaw__stats th, .p-jigsaw__stats td { text-align: left; padding: 6px var(--s4) 6px 0; border-bottom: 1px solid var(--line); }
.p-jigsaw__stats th { font-weight: 600; }

/* ---------- gallery ---------- */
.p-jigsaw__gallery { list-style: none; padding: 0; margin: var(--s3) 0 0; display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.p-jigsaw__tile { display: grid; gap: var(--s1); color: inherit; text-decoration: none; }
.p-jigsaw__tile img { width: 100%; height: auto; border-radius: var(--r-poster); box-shadow: var(--hang); }
.p-jigsaw__tile-title { font-weight: 700; margin-top: var(--s1); }
.p-jigsaw__tile:hover .p-jigsaw__tile-title { text-decoration: underline; }

/* ---------- text below the game ---------- */
.p-jigsaw__about { max-width: 62ch; margin-top: var(--s6); }
.p-jigsaw__about h2 { margin: var(--s6) 0 var(--s3); }
.p-jigsaw__about h2:first-child { margin-top: 0; }
.p-jigsaw__about ol { padding-left: 1.25em; margin: var(--s3) 0; }
.p-jigsaw__about li + li { margin-top: 6px; }
.p-jigsaw__about p + p { margin-top: var(--s3); }