/* Puzzle-only extras. The screen itself is app-shell.css — the same one
 * play.html uses — so only the pieces that exist nowhere else live here. */

.puzzle-hint {
  margin: 0;
  padding: 12px 14px;
  border-inline-start: 3px solid var(--accent);
  border-start-end-radius: 12px;
  border-end-end-radius: 12px;
  background: var(--accent-soft);
}

/* One button per published puzzle, labelled with the piece it is about. */
.puzzle-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.puzzle-picker .is-active {
  color: var(--app-gold);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px rgba(180, 140, 60, 0.45);
}

/* The solved panel is .result-card in app-shell.css — play.html shows the same
 * thing when a game ends, so it is not puzzle-only chrome. */

.puzzle-explainer {
  max-width: 880px;
  margin: clamp(32px, 5vw, 64px) auto 0;
}

.piece-legend {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.piece-legend li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.piece-legend img {
  width: 38px;
  height: 38px;
  flex: none;
}