:root{--preview-width:360px}
body{font-family:Arial,Helvetica,sans-serif}
.puzzle-page{max-width:1100px;margin:12px auto;padding:8px}
.puzzle-controls{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.puzzle-area{display:flex;gap:18px}
.image-preview{width:var(--preview-width);height:calc(var(--preview-width) * 4 / 3);background:#ddd;background-size:contain;background-position:center;border:1px solid #ccc}
.puzzle-work{flex:1;position:relative;min-height:420px;border:1px dashed #ccc;padding:10px;background-image: url('../asset/images/background.png');}
.grid{position:absolute;left:10px;top:10px;display:grid;pointer-events:none}
.grid .slot{border:1px solid rgba(0,0,0,0.06);box-sizing:border-box;width:100%;height:100%}
.pieces{position:absolute;right:12px;top:12px;bottom:12px;width:220px;display:block;gap:8px;padding:8px;overflow:auto}
.piece{background-size:cover;border:2px solid #888;border-radius:6px;box-shadow:0 4px 8px rgba(0,0,0,0.08);cursor:grab;position:absolute;touch-action:none}
.piece.locked{border-color:green;cursor:default}

/* small screens */
@media (max-width:900px){
  .puzzle-area{flex-direction:column;}
  .pieces{position:relative;width:100%;height:120px}
  .grid{position:relative;left:0;top:0;right:0;bottom:0}
}