* { box-sizing:border-box; }
body { margin:0; padding:20px 12px; background:#f8f6f0; font-family:system-ui,sans-serif; color:#193b57; }
.preview { width:min(240px,100%); max-height:200px; object-fit:contain; }
.button-row { flex-wrap:wrap; justify-content:center; }
.puzzle-area { display:flex; flex-wrap:wrap; gap:24px; justify-content:center; width:100%; }
.puzzle-container { width:min(300px,100%); grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:none; gap:4px; }
.piece, .dropzone { width:100%; height:auto; aspect-ratio:1; border-radius:8px; }
.piece { padding:0; border:0; background-size:300% 300%; touch-action:manipulation; }
.dropzone { padding:0; display:flex; background:#fff; border:2px dashed #b1bec7; }
.dropzone .piece { height:100%; width:100%; }
.piece[aria-pressed="true"] { outline:3px solid #d65b24; outline-offset:1px; }
.piece:disabled { opacity:1; cursor:default; }
.btn, .next-btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; font:inherit; }
:focus-visible { outline:3px solid #d65b24; outline-offset:3px; }
.puzzle-help { font-size:14px; max-width:540px; margin:12px auto 20px; }
#message { color:#235c3a; min-height:24px; }