/* ==========================================================================
   Torrid Touch — the jigsaw page (main/puzzle/index.html)

   The page is one puzzle and nothing else: a table with the picture cut up
   loose on it, and a hairline of progress underneath. There is no toolbar, no
   strip of pictures and nothing to read — every visit deals a picture and a
   cut of its own, and the only words the page prints are "Solved".

   The colour scheme is the site's, and it lives in ../css/layout.css: the
   crimson #bb2649, the lightning photograph, Raleway body copy, Geostar Fill
   headings, the banner and the title. Layout is Bootstrap 5
   (../css/bootstrap.min.css). The --pz-* tokens below are the two things the
   site's palette does not already carry: the hairline on a light pane, and the
   table's own surface.
   ========================================================================== */

:root {
  --pz-border: #e8dde3;       /* the hairline round the table */
  --pz-surface: #f4eef1;      /* the table: a shade off white, so pieces read */
}

/* --- The table -------------------------------------------------------------
   A light pane on the photograph, with the same lift the gallery's note panel
   has, so the two pages look like one site. */

.pz-stage-wrap {
  border: 1px solid var(--pz-border);
  border-radius: .85rem;
  overflow: hidden;
  background: var(--pz-surface);
  box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .45);
}

.pz-canvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: var(--pz-surface);
  cursor: grab;
  /* Dragging a piece must not scroll the page on a touch screen. */
  touch-action: none;
}

.pz-canvas:active {
  cursor: grabbing;
}

.pz-canvas:focus-visible {
  outline: 3px solid var(--tt-accent-light);
  outline-offset: -3px;
}

/* While an image from the desktop is held over the table. */
.pz-stage-wrap.pz-drop-active {
  border-color: var(--tt-accent);
  box-shadow: inset 0 0 0 3px rgba(255, 91, 176, .35);
}

/* --- The one thing the board says ------------------------------------------
   One box, two jobs. While the puzzle is being played it is the page's only
   voice — a picture that would not load, a file dropped on the table that is
   not an image — so it stays the notice it has always been, over the middle of
   the board. Once the last piece is home it is the call to action instead, and
   then it is the site's button: the recipe from .button on the gate page
   (../../../css/default.css), in the same two pinks, at the foot of the
   picture rather than over it, so the picture the player has just finished is
   still the thing on the table. */

.pz-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  min-width: min(18rem, 92%);
  max-width: 92%;
  padding: 1rem 1.1rem;
  text-align: center;
  color: var(--tt-ink);
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--pz-border);
  border-radius: .85rem;
  box-shadow: 0 10px 30px rgba(36, 16, 22, .2);
}

/* The box's own two weights live here rather than as utilities on the markup,
   because Bootstrap's utilities are !important and would beat the button's. */
.pz-message p {
  font-weight: 600;
}

/* A finished board is a button: the table deals another puzzle on any click and
   on Enter (see js/puzzle.js), and this is what says so — and being the button,
   it is the one thing on the page that carries a pointer. Under the picture is
   the ring of table the loose pieces were parked in, so by now there is nothing
   beneath it for the button to hide. */
.pz-message--action {
  top: auto;
  bottom: .9rem;
  transform: translateX(-50%);
  width: max-content;
  min-width: 0;
  padding: .7rem 1.25rem;
  color: #fff;
  background-color: var(--tt-accent-light);
  background-image: linear-gradient(to bottom, var(--tt-accent-light) 5%, var(--tt-accent) 100%);
  border-color: var(--tt-accent-border);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 0 var(--tt-accent-soft), 0 .4rem 1rem rgba(36, 16, 22, .35);
  cursor: pointer;
}

.pz-message--action p {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 1px 1px 0 var(--tt-accent-shadow);
}

.pz-message--action:hover {
  background-color: var(--tt-accent);
  background-image: linear-gradient(to bottom, var(--tt-accent) 5%, var(--tt-accent-light) 100%);
}

.pz-message--action:active {
  transform: translate(-50%, 1px);
}

/* --- How far along ---------------------------------------------------------
   On the photograph rather than on the table: a hairline, no numbers. */

.pz-progress {
  height: .4rem;
  background: rgba(244, 238, 241, .18);
}

.pz-progress .progress-bar {
  background-color: var(--tt-accent);
  transition: width .2s ease-in-out;
}

/* --- Small screens --------------------------------------------------------- */

@media (max-width: 575.98px) {
  .pz-stage-wrap {
    border-radius: .6rem;
  }
}