/* Pieces mode */
#puzzleWrap {
  position: relative;
  width: 100%;
  max-width: 1212px;
  margin: 0 auto;
  /* Grid dimensions for the puzzle. Most champions are 6x4, so these are the
     defaults. Non-standard layouts update them dynamically in setupPiecesContainer(). */
  --puzzle-cols: 6;
  --puzzle-rows: 4;
  /* A default, in the same spirit as the 6x4 above. The real ratio is written
     from the payload in setupPiecesContainer(), but that runs only after
     /api/progress answers — and until then the board had no height at all, so
     the checkerboard, the spinner and the whole page below them sat collapsed
     for the length of a round trip. 1215/717 is the splash art both puzzle
     modes are cut from. */
  aspect-ratio: 1215 / 717;
  --puzzle-cell-w: calc(100% / var(--puzzle-cols));
  --puzzle-cell-h: calc(100% / var(--puzzle-rows));
  /* Checkerboard drawn as a single conic-gradient rather than 24 elements.
     Each gradient tile covers a 2x2 block of cells. background-size is now
     calculated via CSS variables to avoid infinite-decimal percentages in JS. */
  background-color: var(--bg);
  background-image: conic-gradient(
    var(--piece-light) 0 25%,
    var(--piece-dark) 0 50%,
    var(--piece-light) 0 75%,
    var(--piece-dark) 0
  );
  background-size: calc(200% / var(--puzzle-cols)) calc(200% / var(--puzzle-rows));
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}

/* A <button> when renderPiecesGrid builds it (clicking hides the piece again),
   a plain <div> in the post-solve view where nothing is clickable. The reset is
   what stops the page's red uppercase button styling from painting over the
   crop — and the radius goes to 0 because 2px of rounding on every piece lets
   the checkerboard show through the corners of an image meant to look whole. */
.piece-crop-wrap {
  position: absolute;
  overflow: hidden;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.piece-crop {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Unlocked-but-unrevealed slot. Transparent, so the checkerboard shows
   through — only the dashed outline and the "?" mark it as clickable.
   Locked slots get no element at all: they are indistinguishable from any
   other board square, which also stops the unused cells from outlining where
   the face was excluded. */
.piece-placeholder {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A dark scrim rather than transparency: this slot can land on either
     checker colour, and a light "?" is unreadable on the lime square. The
     scrim gives one consistent, legible backdrop on both. */
  background: rgba(20, 33, 10, 0.55);
  border: 2px dashed rgba(163, 230, 53, 0.8);
  border-radius: var(--radius-sm);
  color: var(--piece-light);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: var(--text-xl);
  cursor: pointer;
  /* Also a <button>. The slot is sized absolutely, so the page's 11px/22px
     button padding would squeeze the "?" against its own dashed border. */
  padding: 0;
}
.piece-placeholder:hover {
  background: rgba(20, 33, 10, 0.75);
  border-color: var(--piece-light);
  color: #fff;
}

#puzzleFullImg {
  display: block;
  width: 100%;
  height: auto;
}