*{box-sizing:border-box;margin:0;padding:0}body{user-select:none;-webkit-user-select:none}.game-container{display:flex;flex-direction:column;align-items:center;width:100%;max-width:1200px;gap:20px}@media (min-width: 1024px){.game-container{flex-direction:row;align-items:flex-start}}.controls{background:#fff;padding:20px;border-radius:12px;box-shadow:0 4px 15px #0000000d;width:100%;max-width:350px}.controls h3{color:#333;margin-bottom:15px;font-size:18px}.control-group{margin-bottom:15px}.control-group label{display:block;margin-bottom:5px;font-weight:500;color:#555;font-size:14px}.control-row{display:flex;align-items:center;gap:10px}.control-row input[type=text]{width:70px;padding:6px 8px;border:1px solid #ddd;border-radius:6px;text-align:center;font-size:14px}.control-row input[type=range]{flex:1;cursor:pointer}.control-row input[type=checkbox]{width:18px;height:18px;cursor:pointer}.game-info{display:flex;justify-content:space-between;padding:15px;background:#f8f9fa;border-radius:8px;margin-bottom:15px}.info-item{text-align:center}.info-item .value{font-size:20px;font-weight:600;color:#333}.info-item .label{font-size:12px;color:#666;margin-top:3px}.btn-group{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}.btn{padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.btn:active{transform:translateY(0)}.btn-primary{background-color:#007bff;color:#fff}.btn-primary:hover{background-color:#0056b3}.btn-secondary{background-color:#6c757d;color:#fff}.btn-secondary:hover{background-color:#545b62}.btn-success{background-color:#28a745;color:#fff}.btn-success:hover{background-color:#218838}.btn-warning{background-color:#ffc107;color:#333}.btn-warning:hover{background-color:#e0a800}.btn-danger{background-color:#dc3545;color:#fff}.btn-danger:hover{background-color:#c82333}#puzzle-area{position:relative;width:100%;max-width:880px;aspect-ratio:1;background-color:#fff;border-radius:8px;box-shadow:0 8px 30px #0000001a;overflow:hidden;flex-shrink:0}#puzzle-area canvas{width:100%!important;height:100%!important}#piece-tray{display:none}#piece-tray:not(:empty){display:block;width:220px;height:600px;max-height:80vh;flex-shrink:0}.piece-tray{background:#f5f5f5;border-radius:8px;box-shadow:0 4px 15px #0000001a;overflow:hidden}.piece-tray-header{padding:12px 15px;background:#e8e8e8;border-bottom:1px solid #ddd;font-weight:600;font-size:14px;color:#333}.piece-tray-scroll{overflow-y:auto;overflow-x:hidden;height:calc(100% - 45px)}.piece-tray-pieces{position:relative;min-height:100%}.tray-piece{position:absolute;cursor:grab;transition:transform .2s ease,opacity .2s ease;border-radius:4px}.tray-piece:hover{transform:scale(1.05);z-index:10}.tray-piece canvas{display:block;border-radius:4px}.tray-piece-ghost{pointer-events:none;z-index:10000;opacity:.9}.tray-piece-ghost canvas{border-radius:4px;box-shadow:0 8px 25px #0000004d}.image-uploader{padding:10px 0}.uploader-section{margin-bottom:20px}.uploader-section h4{margin-bottom:10px;color:#333;font-size:14px}.upload-area{border:2px dashed #ccc;border-radius:12px;padding:30px;text-align:center;cursor:pointer;transition:all .3s ease}.upload-area:hover,.upload-area.drag-over{border-color:#007bff;background-color:#f0f7ff}.upload-icon{font-size:40px;margin-bottom:10px}.upload-area p{margin:5px 0;color:#666}.upload-hint{font-size:12px;color:#999}.preset-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.preset-item{border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease}.preset-item:hover{border-color:#007bff;transform:scale(1.02)}.preset-item.selected{border-color:#28a745}.preset-item img{width:100%;aspect-ratio:1;object-fit:cover}.preset-item span{display:block;padding:5px;text-align:center;font-size:12px;background:#f8f9fa}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.modal-dialog{background:#fff;border-radius:16px;max-width:500px;width:90%;max-height:80vh;overflow:hidden;box-shadow:0 20px 60px #0000004d;animation:modalIn .3s ease}@keyframes modalIn{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid #eee}.modal-header h3{margin:0;font-size:18px}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#999;padding:0 5px}.modal-close:hover{color:#333}.modal-body{padding:20px;max-height:60vh;overflow-y:auto}.save-slots{display:flex;flex-direction:column;gap:10px}.save-slot{display:flex;align-items:center;padding:15px;background:#f8f9fa;border-radius:8px;cursor:pointer;transition:all .2s ease}.save-slot:hover{background:#e9ecef}.slot-info{flex:1}.slot-info strong{display:block;margin-bottom:3px}.slot-info span{font-size:12px;color:#666}.slot-stats{display:flex;gap:15px;margin-right:15px;font-size:13px;color:#555}.slot-delete{padding:5px 10px;background:#dc3545;color:#fff;border:none;border-radius:4px;font-size:12px;cursor:pointer}.slot-delete:hover{background:#c82333}.complete-dialog{text-align:center;padding:40px 30px}.complete-icon{font-size:60px;margin-bottom:15px}.complete-dialog h2{margin-bottom:20px;color:#28a745}.complete-stats{margin-bottom:25px}.complete-stats p{font-size:18px;margin:10px 0;color:#333}.complete-actions{display:flex;justify-content:center;gap:15px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}::-webkit-scrollbar-thumb{background:#ccc;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#aaa}