.drag-puzzle-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;box-sizing:border-box;background:linear-gradient(135deg,#0009,#000c);justify-content:center;align-items:center;padding:1rem;animation:.4s cubic-bezier(.25,.46,.45,.94) fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.drag-puzzle-modal{background:linear-gradient(145deg,#fff,#f8f9fa);border:1px solid #fff3;border-radius:clamp(16px,4vw,20px);width:100%;max-width:min(90vw,450px);max-height:90vh;margin:auto;animation:.5s cubic-bezier(.34,1.56,.64,1) slideIn;position:relative;overflow:hidden;box-shadow:0 25px 80px #00000040,0 0 0 1px #ffffff1a,inset 0 1px #fffc}@keyframes slideIn{0%{opacity:0;transform:scale(.8)translateY(-40px)rotateX(15deg)}to{opacity:1;transform:scale(1)translateY(0)rotateX(0)}}.drag-puzzle-modal-header{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);justify-content:space-between;align-items:center;padding:clamp(1.5em,3vw,2.5em) clamp(1.5em,4vw,2.5em) clamp(.75em,2vw,1em);display:flex;position:relative;overflow:hidden}.drag-puzzle-modal-header:before{content:"";opacity:.3;background:url("data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"grid\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M 10 0 L 0 0 0 10\" fill=\"none\" stroke=\"rgba(255,255,255,0.1)\" stroke-width=\"1\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23grid)\"/></svg>");position:absolute;inset:0}.drag-puzzle-title{color:#fff;font-size:clamp(1.1em,3vw,1.4em);font-weight:700;font-family:var(--font-family-secondary,"Segoe UI",Tahoma,Geneva,Verdana,sans-serif);text-shadow:0 2px 4px #0000004d;z-index:1;align-items:center;gap:.5em;margin:0;line-height:1.2;display:flex;position:relative}.drag-puzzle-title:before{content:"🛡️";font-size:1.2em}.drag-puzzle-close-btn{color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1;touch-action:manipulation;background:#fff3;border:2px solid #ffffff4d;border-radius:50%;justify-content:center;align-items:center;width:clamp(40px,8vw,45px);min-width:44px;height:clamp(40px,8vw,45px);min-height:44px;padding:0;font-size:clamp(1.2em,3vw,1.5em);transition:all .3s cubic-bezier(.25,.46,.45,.94);display:flex;position:relative}.drag-puzzle-close-btn:hover:not(:disabled){background:#ffffff4d;border-color:#ffffff80;transform:scale(1.1);box-shadow:0 4px 15px #0003}.drag-puzzle-close-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.drag-puzzle-content{background:linear-gradient(145deg,#f8f9fa,#fff);flex-direction:column;align-items:center;gap:1.5em;padding:clamp(1.5em,4vw,2.5em);display:flex}.drag-puzzle-text{text-align:center;color:#6c757d;letter-spacing:.3px;width:100%;font-size:14px;font-weight:500;transition:all .3s}.drag-puzzle-canvas-container{background:#f5f5f5;border:clamp(2px,.5vw,3px) solid #e9ecef;border-radius:clamp(8px,2vw,12px);position:relative;overflow:hidden;box-shadow:0 8px 25px #00000026,inset 0 1px #ffffff80}.drag-puzzle-background{width:100%;height:100%;position:relative}.drag-puzzle-background-img{object-fit:cover;width:100%;height:100%;display:block}.drag-puzzle-piece{cursor:grab;z-index:10;touch-action:none;background-position:0 0;background-repeat:no-repeat;border:clamp(1px,.3vw,2px) solid #fffc;border-radius:clamp(4px,1vw,6px);transition:left .1s ease-out,box-shadow .3s;position:absolute;box-shadow:0 6px 20px #00000040,0 2px 4px #0000001a}.drag-puzzle-piece:hover{box-shadow:0 8px 25px #0000004d,0 4px 8px #00000026}.drag-puzzle-piece.verified{cursor:default;border:3px solid #4caf50;animation:.6s ease-out success;box-shadow:0 0 25px #4caf5099,0 0 50px #4caf504d,0 4px 15px #0003}@keyframes success{0%{filter:brightness(1.3);transform:scale(1.2)}50%{filter:brightness(1.2);transform:scale(1.1)}to{filter:brightness();transform:scale(1)}}.drag-puzzle-slider-container{align-items:center;width:100%;display:flex}.drag-puzzle-slider-root{-webkit-user-select:none;user-select:none;touch-action:none;align-items:center;width:100%;height:clamp(50px,12vw,54px);display:flex;position:relative}.drag-puzzle-slider-track{background:linear-gradient(135deg,#e9ecef 0%,#f8f9fa 50%,#e9ecef 100%);border:clamp(1px,.3vw,2px) solid #dee2e6;border-radius:clamp(22px,6vw,25px);flex-grow:1;height:clamp(8px,2vw,10px);position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #0000001a,0 2px 4px #0000000d}.drag-puzzle-slider-range{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:clamp(22px,6vw,25px);height:100%;position:absolute}.drag-puzzle-slider-thumb{cursor:grab;touch-action:none;background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);border:clamp(2px,.5vw,3px) solid #dee2e6;border-radius:clamp(8px,2vw,10px);width:clamp(44px,10vw,50px);min-width:44px;height:clamp(44px,10vw,50px);min-height:44px;transition:all .2s cubic-bezier(.25,.46,.45,.94);display:block;position:relative;overflow:hidden;box-shadow:0 4px 12px #00000026,inset 0 1px #fffc}.drag-puzzle-slider-thumb:hover{background:linear-gradient(135deg,#fff 0%,#f1f3f4 100%);transform:scale(1.05);box-shadow:0 6px 20px #0003,inset 0 1px #ffffffe6}.drag-puzzle-slider-thumb:active{cursor:grabbing;transform:scale(1.1)}.drag-puzzle-slider-thumb:focus{outline:none;box-shadow:0 0 0 3px #667eea4d,0 4px 12px #00000026,inset 0 1px #fffc}.drag-puzzle-slider-icon{color:#6c757d;z-index:1;pointer-events:none;font-size:16px;font-weight:700;transition:all .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.drag-puzzle-loading{text-align:center;color:#6c757d;flex-direction:column;align-items:center;gap:1em;padding:3em 2em;font-size:16px;display:flex}.drag-puzzle-spinner{border:4px solid #e9ecef;border-top-color:#667eea;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.drag-puzzle-error{text-align:center;color:#dc3545;flex-direction:column;align-items:center;gap:1em;padding:2em;font-size:14px;display:flex}.drag-puzzle-retry-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:25px;padding:.75em 1.5em;font-size:14px;font-weight:600;transition:all .3s;box-shadow:0 4px 15px #667eea4d}.drag-puzzle-retry-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.drag-puzzle-success{text-align:center;color:#28a745;background:linear-gradient(135deg,#28a7451a,#28a7450d);border:1px solid #28a74533;border-radius:25px;padding:.75em 1em;font-size:14px;font-weight:600;animation:.5s ease-in-out fadeIn;display:inline-block}.drag-puzzle-actions{text-align:center;flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;display:flex}.drag-puzzle-refresh{color:#fff;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;background:linear-gradient(135deg,#6c757d 0%,#5a6268 100%);border:2px solid #0000;border-radius:25px;padding:.75em 1.5em;font-size:13px;font-weight:600;transition:all .3s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden;box-shadow:0 4px 15px #6c757d4d}.drag-puzzle-refresh:before{content:"";background:linear-gradient(90deg,#0000 0%,#fff3 50%,#0000 100%);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.drag-puzzle-refresh:hover:not(:disabled){background:linear-gradient(135deg,#5a6268 0%,#495057 100%);transform:translateY(-2px);box-shadow:0 6px 20px #6c757d66}.drag-puzzle-refresh:hover:not(:disabled):before{left:100%}.drag-puzzle-refresh:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 10px #6c757d66}.drag-puzzle-refresh:disabled{opacity:.6;cursor:not-allowed;color:#6c757d;box-shadow:none;background:linear-gradient(135deg,#e9ecef 0%,#dee2e6 100%);transform:none}.drag-puzzle-attempts{color:#dc3545;background:linear-gradient(135deg,#dc35451a,#dc35450d);border:1px solid #dc354533;border-radius:25px;padding:.5em 1em;font-size:13px;font-weight:600;animation:.5s ease-in-out shake;display:inline-block}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}@media (max-width:1024px){.drag-puzzle-modal{max-width:85vw}}@media (max-width:768px){.drag-puzzle-modal-overlay{padding:.75rem}.drag-puzzle-modal{border-radius:16px;max-width:calc(100vw - 1.5rem)}.drag-puzzle-modal-header{padding:1.25em 1.5em .75em}.drag-puzzle-modal-header h3,.drag-puzzle-title{font-size:1.2em}.drag-puzzle-close-btn{width:42px;min-width:44px;height:42px;min-height:44px;font-size:1.3em}}@media (max-width:480px){.drag-puzzle-modal-overlay{align-items:flex-start;padding:2rem .5rem .5rem}.drag-puzzle-modal{border-radius:14px;max-width:calc(100vw - 1rem);max-height:calc(100vh - 4rem);overflow-y:auto}.drag-puzzle-modal-header{padding:1em 1.25em .5em}.drag-puzzle-title{font-size:1.1em}.drag-puzzle-close-btn{width:38px;min-width:44px;height:38px;min-height:44px;font-size:1.2em}.drag-puzzle-content{padding:1.5em 1.25em 1.25em}.drag-puzzle-text{font-size:12px}.drag-puzzle-refresh{padding:.6em 1.1em;font-size:11px}.drag-puzzle-attempts{margin-bottom:0;padding:.3em .6em;font-size:11px}.drag-puzzle-actions{gap:.5em;margin-top:0}}@media (max-width:360px){.drag-puzzle-modal-overlay{padding:1rem .25rem .25rem}.drag-puzzle-modal{max-width:calc(100vw - .5rem)}.drag-puzzle-content{padding:1.25em 1em 1em}.drag-puzzle-title{font-size:1em}.drag-puzzle-text{font-size:11px}.drag-puzzle-refresh{padding:.5em .9em;font-size:10px}.drag-puzzle-attempts{padding:.25em .5em;font-size:10px}}@media (max-height:600px) and (orientation:landscape){.drag-puzzle-modal-overlay{align-items:flex-start;padding-top:1rem;overflow-y:auto}.drag-puzzle-modal{max-height:calc(100vh - 2rem);margin:0 auto}.drag-puzzle-modal-header{padding:.75em 1.5em .5em}.drag-puzzle-content{gap:1em;padding:1.25em 1.5em 1em}.drag-puzzle-title,.drag-puzzle-text{margin-bottom:.75em}}@media (pointer:coarse){.drag-puzzle-piece:hover,.drag-puzzle-slider-thumb:hover{transform:none}.drag-puzzle-close-btn,.drag-puzzle-refresh,.drag-puzzle-slider-thumb{min-width:44px;min-height:44px}}@media (min-resolution:2x){.drag-puzzle-background-img{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}.drag-puzzle-modal.success-animation{animation:.8s ease-out successBounce}@keyframes successBounce{0%{transform:scale(1)}25%{transform:scale(1.02)}50%{transform:scale(.98)}75%{transform:scale(1.01)}to{transform:scale(1)}}.drag-puzzle-close-btn:focus,.drag-puzzle-refresh:focus,.drag-puzzle-slider-thumb:focus{outline-offset:2px;outline:3px solid #667eea80}@media (prefers-contrast:high){.drag-puzzle-title,.drag-puzzle-text{color:#212529;font-weight:600}}