/* Jigsaw — table, controls and dialogs.
   Everything the player touches is sized up from the card games' chrome. That
   is not decoration: the people this is for are mostly over seventy, often on a
   laptop trackpad, and a 0.92rem button they have to aim at is the difference
   between a game and a chore. Nothing here is smaller than 1rem or shorter than
   2.6rem. */

.jigsaw-page {
  margin: 0;

  /* The table, read by board.js through getComputedStyle so the canvas and the
     page can never drift apart. Deliberately dark in both themes: a photograph
     is what the eye should be drawn to, and a light surround washes it out. */
  --jig-table: #2A2224;
  --jig-tray: #3A2C30;
  --jig-board: #1B1516;
  --jig-board-edge: #7A6166;

  --jig-bar-bg: #1C1A1B;
  --jig-bar-edge: #3A3234;
  --jig-bar-ink: #F0EAEA;
  --jig-control-bg: #2C2729;
  --jig-control-edge: #4E4447;
  --jig-gold: #F3C96B;
}

/* Full-height chain, as the card games do it: the stage takes whatever is left
   after the header, nav, bars and footer. min-height:0 on the flex children is
   what lets them shrink instead of shoving the footer off screen. */
.jigsaw-page .Master {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.jigsaw-page .Master > section.jig-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
}

.jigsaw-page footer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  padding: 2px 10px;
  margin: 0;
}

.jigsaw-page .build-tag,
.jigsaw-page .page-hits {
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: var(--footer-size);
  letter-spacing: 0.04em;
  opacity: 0.45;
  margin: 0;
}

.jigsaw-page .page-hits::before { content: '· '; }

/* ------------------------------------------------------------- the bars */

.jig-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--jig-bar-bg);
  border: 1px solid var(--jig-bar-edge);
  border-radius: 8px;
  color: var(--jig-bar-ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color-scheme: dark;
}

.jig-bar select,
.jig-bar button {
  font: inherit;
  font-size: calc(1rem * var(--font-scale, 1));
  min-height: 2.6rem;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--jig-control-edge);
  background: var(--jig-control-bg);
  color: var(--jig-bar-ink);
  cursor: pointer;
}

.jig-bar select:hover,
.jig-bar button:hover { background: #3A3336; }

.jig-bar button:focus-visible,
.jig-bar select:focus-visible {
  outline: 3px solid var(--jig-gold);
  outline-offset: 1px;
}

/* The one button that starts a puzzle. Company maroon, so there is never a
   question about which control is the main one on the row. */
.jig-bar button.jig-primary {
  background: #7B1828;
  border-color: #9A4050;
  font-weight: bold;
}

.jig-bar button.jig-primary:hover { background: #932131; }

.jig-field {
  display: flex;
  align-items: center;
  gap: 7px;
}

.jig-field > span {
  font-size: calc(0.82rem * var(--font-scale, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Zoom controls read as one instrument rather than four loose buttons. */
.jig-group {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  border-radius: 8px;
  background: #241F21;
  border: 1px solid #3B3335;
}

.jig-group button { min-width: 2.6rem; }

.jig-seed {
  font-size: calc(0.85rem * var(--font-scale, 1));
  font-variant-numeric: tabular-nums;
  opacity: 0.55;
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------- the picture chip */

/* Which picture you are doing is the single most important thing in the bar,
   so it is a chip that states the answer rather than a button labelled
   "Picture" that makes you open it to find out. Same reasoning as the deal
   chip on the card games. */
.picture-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(30rem, 60vw);
  text-align: left;
}

.picture-chip__icon { opacity: 0.6; }

.picture-chip__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.picture-chip__text b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picture-chip__text i {
  font-style: normal;
  font-size: 0.82em;
  opacity: 0.66;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picture-chip__caret { opacity: 0.55; margin-left: auto; }

/* ------------------------------------------------------------- the readout */

/* Pushed to the far end of the row and allowed to wrap onto its own line, so
   the time and the progress bar never squeeze the buttons. */
.jig-readout {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
  font-size: calc(1rem * var(--font-scale, 1));
}

.jig-readout__time b {
  font-variant-numeric: tabular-nums;
  font-size: 1.25em;
  letter-spacing: 0.02em;
}

.jig-readout__progress { opacity: 0.8; white-space: nowrap; }

.jig-progress {
  display: block;
  width: 9rem;
  height: 10px;
  border-radius: 999px;
  background: #33292C;
  overflow: hidden;
}

.jig-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #7B1828, #C9566B);
  transition: width 240ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .jig-progress > i { transition: none; }
}

/* ------------------------------------------------------------- the stage */

.jig-stage {
  position: relative;
  flex: 1;
  /* A floor, not a preference. The bars wrap, and on a short window they can
     wrap enough to leave the table a couple of hundred pixels tall -- at which
     point the game is unplayable and looks broken. Below this the page is
     allowed to scroll instead, which is recoverable; a 150px table is not. */
  min-height: 300px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--jig-table);
  border: 1px solid var(--jig-bar-edge);
}

/* Taken out of flow deliberately, and this is not a style choice.

   A canvas with height:100% inside a flex parent whose own height comes from
   its content has nothing to resolve the percentage against, so it falls back
   to the element's height ATTRIBUTE — which board.js sets from the measured CSS
   height. The canvas then sizes the stage, the stage sizes the canvas, and the
   loop settles wherever it happened to start: here it pinned the stage at 703px
   inside an 844px space, pushing the footer 70px below the fold and clipping
   the bottom row of the tray.

   Positioned absolutely, the canvas contributes nothing to layout and simply
   fills whatever the stage turns out to be. */
.jig-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* Without this the browser claims every drag and pinch for scrolling and
     zooming the page, and not one piece ever moves on a touch screen. */
  touch-action: none;
  cursor: grab;
}

/* ------------------------------------------------------------ overlays */

/* :not([hidden]) is load-bearing, not decoration. An author rule that sets
   `display` beats the user agent's `[hidden] { display: none }`, so writing
   `display: flex` here plainly would mean these overlays could never be
   switched off from script again — the loading panel would sit over the puzzle
   for ever. Same trap the card games' hit counter documents. */
.jig-loading:not([hidden]) {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: rgb(26 21 22 / 0.88);
  color: #F2ECEC;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: calc(1.05rem * var(--font-scale, 1));
}

.jig-loading p { margin: 0; max-width: 32rem; line-height: 1.5; }

.jig-loading__track {
  width: min(22rem, 70%);
  height: 8px;
  border-radius: 999px;
  background: #3A2E31;
  overflow: hidden;
}

.jig-loading__track > i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--jig-gold);
  transition: width 120ms linear;
}

.jig-loading.is-error .jig-loading__track { display: none; }

.jig-note:not([hidden]) {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(30 24 25 / 0.94);
  border: 1px solid var(--jig-gold);
  color: #F2ECEC;
  font-size: calc(0.95rem * var(--font-scale, 1));
  line-height: 1.45;
}

.jig-note p { margin: 0; }

.jig-note button {
  flex: none;
  min-height: 2.6rem;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--jig-control-edge);
  background: var(--jig-control-bg);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------- popover */

.jig-menu {
  padding: 8px;
  border: 1px solid var(--jig-control-edge);
  border-radius: 10px;
  background: #24201F;
  color: var(--jig-bar-ink);
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  color-scheme: dark;
  box-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
}

.jig-menu button {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: calc(1rem * var(--font-scale, 1));
  min-height: 2.6rem;
  padding: 8px 14px;
  margin: 2px 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.jig-menu button:hover { background: #352E30; }

/* Links out of the menu wear the same shape as the buttons above them, since
   to the person reading it they are the same kind of thing: a place to go. */
.jig-menu__link {
  display: block;
  padding: 8px 14px;
  margin: 2px 0;
  min-height: 2.6rem;
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  line-height: 2rem;
  font-size: calc(1rem * var(--font-scale, 1));
}

.jig-menu__link:hover { background: #352E30; }

.jig-menu__rule {
  border: none;
  border-top: 1px solid var(--jig-control-edge);
  margin: 6px 4px;
}

/* ----------------------------------------------------------- full screen */

/* Full screen is for making the table bigger, so it spends as little height on
   chrome as it can — but the control bars stay, because the way out has to be
   on the screen. */
.jig-shell:fullscreen,
.jig-shell.is-focus {
  padding: 6px;
  gap: 6px;
  background: #121011;
}

.jig-shell:fullscreen .jig-bar--setup,
.jig-shell.is-focus .jig-bar--setup {
  padding: 5px 10px;
}

/* The way out. Maroon with a gold edge, exactly as the card games' exit button
   wears it, so somebody who has played that game already knows what this is. */
.jig-bar button.fs-on {
  background: #7B1828;
  border-color: var(--jig-gold);
  color: #FFF3DA;
  font-weight: bold;
  letter-spacing: 0.06em;
}

.jig-bar button.fs-on:hover { background: #932131; }

/* --------------------------------------------------------------- dialogs */

.jig-dialog {
  width: min(34rem, 92vw);
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.35);
}

.jig-dialog--wide { width: min(62rem, 94vw); }

.jig-dialog::backdrop { background: var(--backdrop, rgb(0 0 0 / 0.45)); }

.jig-dialog > * { padding-inline: 20px; }

.jig-dialog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}

.jig-dialog__head h2 {
  margin: 0;
  font-size: calc(1.3rem * var(--font-scale, 1));
  color: var(--accent);
}

.jig-dialog__head button {
  font-size: 1.6rem;
  line-height: 1;
  min-width: 2.6rem;
  min-height: 2.6rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--ink-muted);
  cursor: pointer;
}

.jig-dialog__blurb,
.jig-dialog__note {
  margin: 12px 0;
  color: var(--ink-muted);
  font-size: calc(0.95rem * var(--font-scale, 1));
  line-height: 1.5;
}

.jig-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-block: 16px 20px;
}

.jig-dialog__actions button {
  font: inherit;
  font-size: calc(1rem * var(--font-scale, 1));
  min-height: 2.8rem;
  padding: 8px 18px;
  border-radius: 7px;
  border: 1px solid var(--rule-strong);
  background: var(--button-bg);
  color: var(--button-ink);
  cursor: pointer;
}

.jig-dialog__actions button.jig-primary {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--on-accent);
  font-weight: bold;
}

.jig-dialog--done { text-align: center; }
.jig-dialog--done h2 {
  margin: 20px 0 0;
  color: var(--accent);
  font-size: calc(1.7rem * var(--font-scale, 1));
}

.jig-dialog--done .jig-dialog__actions { justify-content: center; }

.done-headline {
  margin: 10px 0 2px;
  font-size: calc(1.25rem * var(--font-scale, 1));
}

.done-score { margin: 2px 0; font-size: calc(1.1rem * var(--font-scale, 1)); }
.done-flag { margin: 8px 0 0; color: var(--ok); font-weight: bold; }
.done-credit { margin: 10px 0 0; color: var(--ink-muted); font-size: 0.95rem; }

/* ---------------------------------------------------------- the picker */

.picker-artists {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-block: 4px 12px;
}

.picker-artist {
  font: inherit;
  font-size: calc(1rem * var(--font-scale, 1));
  min-height: 2.6rem;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--button-bg);
  color: var(--button-ink);
  cursor: pointer;
}

.picker-artist.is-on {
  background: var(--accent);
  border-color: var(--accent-strong);
  color: var(--on-accent);
  font-weight: bold;
}

.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 12px;
  max-height: 52vh;
  overflow-y: auto;
  padding-block: 4px;
}

.picker-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 2px solid var(--rule);
  border-radius: 10px;
  background: var(--surface-alt);
  cursor: pointer;
  text-align: left;
}

.picker-card:hover,
.picker-card:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.picker-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--rule);
}

.picker-card__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  font-size: calc(0.92rem * var(--font-scale, 1));
  color: var(--ink);
}

.picker-card__label i { font-style: normal; color: var(--ink-muted); }

.picker-empty { color: var(--ink-muted); padding-block: 24px; text-align: center; }

.picker-own {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  padding-block: 16px 20px;
  border-top: 1px solid var(--rule);
}

.picker-own label { display: flex; flex-direction: column; gap: 3px; }
.picker-own label span {
  color: var(--ink-muted);
  font-size: calc(0.88rem * var(--font-scale, 1));
  max-width: 34rem;
  line-height: 1.45;
}

.picker-own input[type="file"] {
  font: inherit;
  font-size: calc(0.95rem * var(--font-scale, 1));
}

/* ------------------------------------------------------------ the record */

.stats-body { padding-block: 8px 4px; }

.stats-body h3 {
  margin: 16px 0 6px;
  font-size: calc(1rem * var(--font-scale, 1));
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stats-body h3:first-child { margin-top: 4px; }

.stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: calc(1rem * var(--font-scale, 1));
}

.stat-row b { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------ narrow */

@media (max-width: 820px) {
  /* The readout stops being pinned right and takes its own line, so the
     buttons above it keep their size instead of being crushed. */
  .jig-readout {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }

  .jig-progress { flex: 1; width: auto; max-width: 12rem; }

  .picture-chip { max-width: 100%; flex: 1; }

  .jigsaw-page .Master > section.jig-shell { padding: 6px; }
}

@media (max-width: 560px) {
  .jig-bar { gap: 8px; padding: 8px; }
  .jig-readout__progress { display: none; }
}