.color-preview-frame { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #342b25; }
.color-preview-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.color-preview-image { filter: blur(12px); }
.reference-dialog { padding-top: 44px; }
.reference-dialog > .close-dialog { z-index: 1; top: 8px; right: 10px; width: 30px; height: 30px; line-height: 30px; padding: 0; }
.preview-status { position: absolute; max-width: 80%; margin: 0; color: #e0d5bd; text-align: center; font: 12px/1.5 var(--sans); }
.reference-dialog .color-preview-frame { max-height: 76vh; }
.reference-dialog .color-preview-frame img { max-height: 76vh; }
.reference-dialog .preview-status { margin: 0; font: 12px/1.5 var(--sans); }
.show-guide .ghost-image { opacity: .45; }
.complete-dialog #view-full-picture { display: block; width: 100%; margin-top: 12px; }
#reference-original { display: block; width: 100%; height: 100%; }
#reference-original[href] { cursor: zoom-in; }
.reference-dialog { max-height: calc(100dvh - 32px); overflow: auto; }
.reference-dialog.full-picture .color-preview-frame,
.reference-dialog.full-picture .color-preview-frame img { max-height: min(72vh, calc(100dvh - 210px)); }
.reference-actions { display: flex; justify-content: center; gap: 12px; padding: 0 0 15px; }
.reference-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; width: auto; margin: 0; font-size: 13px; }
.reference-dialog .reference-actions .primary { margin: 0; }
.finished-picture { cursor: zoom-in; pointer-events: all; }
.finished-picture:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
#board:not(.board-complete) .finished-picture,
#board.piece-view .finished-picture,
#board.board-complete:not(.piece-view) #placed,
#board.board-complete #targets,
#board.board-complete:not(.piece-view) .ghost-image { display: none; }
@media (max-width: 760px) {
  .color-preview-image { filter: blur(7px); }
  .board-tools { gap: 8px; }
  .board-tools button { font-size: 9px; }
  .reference-actions { flex-wrap: wrap; gap: 8px; }
  .reference-actions a { flex: 1 1 auto; padding: 10px 12px; }
}