/* Jigsaw — presentation. The shell is the same vocabulary as the other games
   on this site on purpose; only the play screen is different, and it is one
   canvas.

   Why one canvas and not a DOM node per piece: 24 absolutely-positioned
   elements being dragged over each other need z-index juggling, hit-testing
   that fights pointer-events, and a layout that reflows when any of them
   moves. A canvas has none of that, hit-tests exactly (against the piece's own
   alpha, so a tab counts and the notch beside it does not), and is the same
   pattern billiards already uses. */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: #111827;
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: 100vh;
  height: 100dvh;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
#app { display: flex; flex-direction: column; height: 100%; }

#hdr {
  flex: 0 0 auto; display: flex; align-items: center; gap: 5px;
  padding: calc(6px + env(safe-area-inset-top)) 7px 6px;
  background: #030712;
}
#hdrTitle {
  flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pill {
  background: #1f2937; color: inherit; border: 0; border-radius: 10px;
  min-width: 36px; height: 36px; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
/* R-C5: the 44px floor, which this game had been under since it shipped.
   Scoped to the header so a .pill used elsewhere keeps its own size. */
#hdr .pill { min-width: 44px; min-height: 44px; height: auto; }
.pill:active { transform: scale(.94); }
.pill[disabled] { opacity: .35; cursor: default; }

.scr { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.scr.on { display: flex; }

/* ---------- menu ---------- */
/* R-C15b: these screens CENTRE and SCROLL, which is the one combination that
   puts content out of reach. When the content is taller than the box,
   `justify-content: center` pushes the first child ABOVE the top edge and
   scrollTop cannot go negative. Measured at 375x620 — a phone with its URL bar
   showing — word-sleuth's help began at y = -585: the first three cards could
   not be read or scrolled to, and had not been since it shipped.
   Auto margins on the end children centre identically while the content fits
   and collapse to zero once it does not. */
#scr-menu, #scr-how, #scr-pick {
  align-items: center; gap: 11px;
  padding: 16px; overflow-y: auto; overscroll-behavior: contain;
}
/* #scr-pick is excluded on purpose: it keeps its own flex-start below, because
   a long picker should always begin at the top rather than centre itself. */
#scr-menu > :first-child, #scr-how > :first-child { margin-top: auto; }
#scr-menu > :last-child,  #scr-how > :last-child  { margin-bottom: auto; }
#scr-pick { justify-content: flex-start; }
#scr-menu h1 { font-size: 30px; }
.sub { color: #9ca3af; font-size: 14px; text-align: center; max-width: 320px; line-height: 1.45; }
#tierRow { display: flex; gap: 8px; width: 100%; max-width: 380px; }
.tierCard {
  flex: 1 1 0; min-width: 0;
  background: #1f2937; color: inherit; border: 2px solid transparent;
  border-radius: 14px; padding: 10px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 700; font-size: 13px;
}
.tierCard .te { font-size: 22px; }
.tierCard small { color: #9ca3af; font-weight: 500; font-size: 11px; }
.tierCard.sel { border-color: #f59e0b; background: #451a03; }
.big {
  width: 100%; max-width: 380px;
  background: #1f2937; color: inherit; border: 0; border-radius: 14px;
  padding: 14px; font-size: 16px; font-weight: 700; cursor: pointer;
}
.big.primary { background: #f59e0b; color: #341603; }
.big:active { transform: translateY(2px); }
#statsLine { color: #9ca3af; font-size: 13px; text-align: center; min-height: 18px; }

/* ---------- the picture gallery ---------- */
#pickGrid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  width: 100%; max-width: 420px;
}
@media (min-width: 560px) { #pickGrid { grid-template-columns: repeat(3, 1fr); } }
.pickCard {
  background: #1f2937; border: 0; border-radius: 12px; padding: 6px;
  cursor: pointer; color: inherit; display: flex; flex-direction: column; gap: 5px;
}
.pickCard canvas {
  width: 100%; height: auto; display: block; border-radius: 8px; background: #030712;
}
.pickCard span { font-size: 12px; font-weight: 700; }
.pickCard:active { transform: translateY(2px); }

/* ---------- how to play ---------- */
.card {
  background: #1f2937; border-radius: 14px; padding: 12px 14px;
  width: 100%; max-width: 380px; font-size: 14px; line-height: 1.5;
}
.card h2 { font-size: 15px; margin-bottom: 6px; }

/* ---------- play ---------- */
#scr-play { position: relative; z-index: 0; }
#cv { flex: 1 1 auto; min-height: 0; width: 100%; display: block; touch-action: none; }

/* ---------- overlay ---------- */
.ovl {
  position: absolute; inset: 0; z-index: 30;
  display: none; align-items: center; justify-content: center; padding: 16px;
  background: rgba(17, 24, 39, .95);
}
.ovl.on { display: flex; }
.ovlCard {
  background: #1f2937; border-radius: 18px; padding: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%; max-width: 340px; text-align: center;
}
#ovlTitle { font-size: 24px; font-weight: 800; }
#ovlSub { color: #9ca3af; font-size: 14px; line-height: 1.45; }

/* ---------- toasts ---------- */
.toast-host {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(10px + env(safe-area-inset-top));
  z-index: 9000; display: flex; flex-direction: column; gap: 8px;
  align-items: center; pointer-events: none;
  width: max-content; max-width: calc(100vw - 24px);
}
.toast {
  pointer-events: auto; cursor: pointer;
  padding: 11px 16px; border-radius: 13px;
  background: #f9fafb; color: #111827;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  font-size: 14px; font-weight: 700; max-width: calc(100vw - 24px);
  opacity: 0; transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ---- how many pieces ----
   Its own control, sitting under the tiers, because the piece count stopped
   being a property of the tier. See the note in data.js on why 24 stopped
   being the ceiling. */
.cutLine { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.cutLbl { flex: 0 0 auto; font-size: 13px; color: #94a3b8; }
#cutRow { display: flex; flex: 1; gap: 6px; flex-wrap: wrap; justify-content: flex-start; }
.cutChip {
  /* Fixed basis, not `flex: 1` — with eight rungs the row wraps, and a growing
     basis stretches whatever lands on the last line into two enormous slabs. */
  flex: 0 0 auto; min-width: 46px; min-height: 40px; padding: 8px 6px;
  border-radius: 9px; border: 1px solid #334155; background: rgba(255,255,255,.05);
  color: inherit; font: 600 13px/1 inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: manipulation;
}
.cutChip.sel { border-color: #f59e0b; background: #3a2a08; color: #fde68a; }