.puzzle-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px;width:min(100%,360px,calc(480px * var(--photo-ratio,1)));aspect-ratio:var(--photo-ratio,1);margin:20px auto 0;background:#ececf0}
.puzzle-tile{position:relative;width:100%;height:100%;min-width:0;min-height:0;padding:0;border:0;border-radius:0;overflow:hidden;background:#ececf0;touch-action:manipulation}
.puzzle-tile img{position:absolute;width:300%;height:300%;max-width:none;object-fit:cover;background:#ececf0;pointer-events:none;user-select:none}
.puzzle-tile::after{content:"";position:absolute;inset:0;border:4px solid transparent;pointer-events:none}
.puzzle-tile[aria-pressed=true]::after{border-color:#a32958}
.puzzle-tile:focus-visible{outline:3px solid #202124;outline-offset:1px;z-index:1}
.puzzle-tile:disabled{opacity:1;cursor:default}
.puzzle-message{min-height:24px;text-align:center;margin:12px 0 0;color:#55545d}
#skip-puzzle{display:block;margin:auto}
#open-result,#retry,#again,#return-puzzle{width:100%;margin-top:12px}
#result-description{color:#55545d}
.puzzle-board{position:relative;isolation:isolate}
.puzzle-whole{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;animation:photo-join 550ms ease-out both}
.puzzle-board.is-solved .puzzle-tile::after{border-color:transparent}
@keyframes photo-join{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.puzzle-whole{animation:none}}