.puzzle-container{--bg: #f8fafc;--panel: #ffffff;--panel-light: #f1f5f9;--text: #1e293b;--text-muted: #64748b;--accent: #9333ea;--accent-hover: #7c3aed;--border: #e2e8f0;--success: #10b981;--radius: 8px;--shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06)}.puzzle-container *{box-sizing:border-box}.puzzle-container .app-container{height:calc(100vh - 120px);min-height:700px;display:flex;flex-direction:column}.puzzle-container .panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:visible;min-width:0;height:100%;display:flex;flex-direction:column}.puzzle-container .toolbar{display:flex;gap:8px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border);background:var(--panel-light);flex-wrap:wrap}.puzzle-container .toolbar-group{display:flex;align-items:center;gap:6px;background:var(--panel);padding:4px 8px;border-radius:var(--radius);border:1px solid var(--border)}.puzzle-container .toolbar-label{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.puzzle-container .toolbar button{cursor:pointer;padding:6px 12px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:var(--radius);font-weight:500;transition:all .2s ease;font-size:13px;white-space:nowrap}.puzzle-container .toolbar button:hover{background:var(--accent);border-color:var(--accent);color:#fff}.puzzle-container .toolbar button.primary{background:var(--success);border-color:var(--success);color:#fff}.puzzle-container .toolbar button.primary:hover{background:#059669;border-color:#059669}.puzzle-container .toolbar select{padding:6px 12px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:var(--radius);font-size:13px;cursor:pointer}.puzzle-container .viewport{display:flex;align-items:center;justify-content:center;background:var(--bg);flex:1;padding:12px;overflow:hidden;min-height:400px;position:relative}.puzzle-container .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;min-height:300px;padding:40px 30px;border:3px dashed var(--border);border-radius:16px;background:var(--panel);cursor:pointer;transition:all .3s ease;position:relative}.puzzle-container .drop:hover{border-color:var(--accent);background:#9333ea05;transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.puzzle-container .drop.dragover{border-color:var(--accent);background:#9333ea0d;transform:scale(1.02)}.puzzle-container .drop input[type=file]{position:absolute;width:100%;height:100%;opacity:0;cursor:pointer;top:0;left:0}.puzzle-container .upload-button-text{display:inline-block;padding:16px 32px;background:var(--accent);color:#fff;border-radius:12px;font-weight:600;font-size:16px;transition:all .2s ease;box-shadow:0 4px 12px #9333ea4d;cursor:pointer}.puzzle-container .drop:hover .upload-button-text{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 16px #9333ea66}.puzzle-container .game-area{width:100%;height:100%;position:relative;display:none}.puzzle-container .game-area.active{display:block}.puzzle-container canvas{position:absolute;cursor:move;transition:none;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;backface-visibility:hidden;transform:translateZ(0)}.puzzle-container canvas.dragging{cursor:grabbing;z-index:1000}.puzzle-container .progress-fill{background:var(--accent);border-radius:3px;transition:width .3s ease}.puzzle-container .success-message{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#10b981f2;color:#fff;padding:24px 48px;border-radius:16px;font-size:24px;font-weight:700;box-shadow:0 8px 32px #10b98166;z-index:100;animation:successPop .5s ease}@keyframes successPop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{transform:translate(-50%,-50%) scale(1.1)}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.puzzle-loading{position:relative;opacity:.6}.puzzle-loading:after{content:"";position:absolute;top:50%;left:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border:3px solid #e5e7eb;border-top:3px solid #9333ea;border-radius:50%;animation:spin 1s linear infinite;z-index:10}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@media (max-width: 900px){.puzzle-container .app-container{height:auto;min-height:500px}.puzzle-container .viewport{padding:8px;min-height:300px}.puzzle-container .toolbar{padding:8px;gap:6px}.puzzle-container .toolbar button{padding:5px 10px;font-size:12px}}