.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;-webkit-backdrop-filter:blur();backdrop-filter:blur()}to{opacity:1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}.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-modal-header h3{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-modal-header h3: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-container{width:auto;font-family:var(--font-family-secondary,"Segoe UI", Tahoma, Geneva, Verdana, sans-serif);box-sizing:border-box;background:linear-gradient(145deg,#f8f9fa,#fff);margin:0;padding:clamp(1.5em,4vw,2.5em);position:relative}.drag-puzzle-title{text-align:center;color:#495057;letter-spacing:.5px;margin-bottom:1.5em;font-size:16px;font-weight:600;line-height:1.5}.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-loading:before{content:"";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-game{-webkit-user-select:none;user-select:none;width:100%;position:relative}.drag-puzzle-background{background-position:50%;background-size:cover;border:clamp(2px,.5vw,3px) solid #e9ecef;border-radius:clamp(8px,2vw,12px);width:min(340px,100vw - 4rem);max-width:100%;height:min(180px,52.9vw - 2.116rem);margin:0 auto clamp(1em,3vw,1.5em);transition:all .3s;position:relative;overflow:hidden;box-shadow:0 8px 25px #00000026,inset 0 1px #ffffff80}.drag-puzzle-background:hover{box-shadow:0 12px 35px #0003,inset 0 1px #ffffff80}.drag-puzzle-hole{background:radial-gradient(circle,#0006 0%,#0003 70%,#0000 100%),linear-gradient(45deg,#0000 30%,#ffffff1a 50%,#0000 70%);border:clamp(2px,.5vw,3px) dashed #adb5bd;border-radius:clamp(6px,1.5vw,8px);width:min(70px,20.6vw - .824rem);height:min(70px,20.6vw - .824rem);animation:2s ease-in-out infinite pulse;position:absolute;box-shadow:inset 0 0 20px #0006,inset 0 4px 8px #0003}@keyframes pulse{0%,to{border-color:#adb5bd;box-shadow:inset 0 0 20px #0006,inset 0 4px 8px #0003}50%{border-color:#667eea;box-shadow:inset 0 0 25px #00000080,inset 0 4px 12px #0000004d,0 0 15px #667eea4d}}.drag-puzzle-piece{cursor:grab;z-index:10;touch-action:none;background-position:50%;background-size:cover;border:clamp(1px,.3vw,2px) solid #fffc;border-radius:clamp(6px,1.5vw,8px);width:min(70px,20.6vw - .824rem);height:min(70px,20.6vw - .824rem);transition:all .3s cubic-bezier(.25,.46,.45,.94);position:absolute;box-shadow:0 6px 20px #00000040,0 2px 4px #0000001a}.drag-puzzle-piece:hover{cursor:grab;transform:scale(1.05);box-shadow:0 8px 25px #0000004d,0 4px 8px #00000026}.drag-puzzle-piece:active{cursor:grabbing;transform:scale(1.1)}.drag-puzzle-piece.verified{cursor:default;border:3px solid #4caf50;animation:.6s ease-out success;transform:scale(1);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{width:min(340px,100vw - 4rem);max-width:100%;margin:0 auto}.drag-puzzle-track{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 50%,#f8f9fa 100%);border:clamp(1px,.3vw,2px) solid #dee2e6;border-radius:clamp(22px,6vw,25px);width:100%;height:clamp(50px,12vw,54px);margin-bottom:clamp(.75em,2vw,1em);position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #0000001a,0 2px 4px #0000000d}.drag-puzzle-track:before{content:"";opacity:0;background:linear-gradient(90deg,#667eea1a 0%,#667eea0d 50%,#667eea1a 100%);transition:opacity .3s;position:absolute;inset:0}.drag-puzzle-track:hover:before{opacity:1}.drag-puzzle-slider-button{cursor:grab;touch-action:manipulation;background:linear-gradient(135deg,#fff 0%,#f8f9fa 100%);border:clamp(2px,.5vw,3px) solid #dee2e6;border-radius:50%;justify-content:center;align-items:center;width:clamp(42px,10vw,44px);min-width:44px;height:clamp(42px,10vw,44px);min-height:44px;transition:all .3s cubic-bezier(.25,.46,.45,.94);display:flex;position:relative;top:clamp(2px,.5vw,3px);overflow:hidden;box-shadow:0 4px 12px #00000026,inset 0 1px #fffc}.drag-puzzle-slider-button:before{content:"";background:linear-gradient(90deg,#0000 0%,#fff6 50%,#0000 100%);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.drag-puzzle-slider-button:hover:before{left:100%}.drag-puzzle-slider-button: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-button.dragging{cursor:grabbing;border-color:#667eea;transform:scale(1.1);box-shadow:0 8px 25px #00000040,inset 0 1px #ffffffe6}.drag-puzzle-slider-button.verified{color:#fff;cursor:default;background:linear-gradient(135deg,#4caf50 0%,#45a049 100%);border-color:#4caf50;animation:2s ease-in-out infinite verifiedPulse;transform:scale(1);box-shadow:0 0 20px #4caf5066,0 4px 15px #0003,inset 0 1px #ffffff4d}@keyframes verifiedPulse{0%,to{box-shadow:0 0 20px #4caf5066,0 4px 15px #0003,inset 0 1px #ffffff4d}50%{box-shadow:0 0 30px #4caf5099,0 4px 15px #0003,inset 0 1px #ffffff4d}}.drag-puzzle-slider-icon{color:#6c757d;z-index:1;font-size:18px;font-weight:700;transition:all .3s;position:relative}.drag-puzzle-slider-button:hover .drag-puzzle-slider-icon{color:#495057}.drag-puzzle-slider-button.verified .drag-puzzle-slider-icon{color:#fff;animation:.6s ease-out checkmark}@keyframes checkmark{0%{opacity:0;transform:scale(0)}50%{transform:scale(1.2)}to{opacity:1;transform:scale(1)}}.drag-puzzle-text{text-align:center;color:#6c757d;letter-spacing:.3px;margin-bottom:1.5em;font-size:14px;font-weight:500;transition:all .3s}.drag-puzzle-attempts{text-align:center;color:#dc3545;background:linear-gradient(135deg,#dc35451a,#dc35450d);border:1px solid #dc354533;border-radius:25px;margin-bottom:0;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)}}.drag-puzzle-actions{text-align:center;margin-top:0}.drag-puzzle-attempts-container{flex-direction:column;align-items:center;gap:.75em;margin-top:.75em;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}@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{font-size:1.2em}.drag-puzzle-modal-header h3:before{font-size:1em}.drag-puzzle-close-btn{width:42px;min-width:44px;height:42px;min-height:44px;font-size:1.3em}.drag-puzzle-container{padding:2em 1.5em 1.5em}.drag-puzzle-background{width:min(300px,100vw - 3rem);height:min(158px,52.7vw - 1.581rem)}.drag-puzzle-hole,.drag-puzzle-piece{width:min(60px,20vw - .6rem);height:min(60px,20vw - .6rem)}.drag-puzzle-slider{width:min(300px,100vw - 3rem)}.drag-puzzle-track{height:48px}.drag-puzzle-slider-button{border-radius:20px;width:40px;height:40px;top:2px}.drag-puzzle-title{margin-bottom:1.25em;font-size:15px}.drag-puzzle-text{margin-bottom:1.25em;font-size:13px}.drag-puzzle-attempts{margin-bottom:0;padding:.3em .7em;font-size:12px}.drag-puzzle-actions{margin-top:0}.drag-puzzle-attempts-container{gap:.5em;margin-top:.5em}.drag-puzzle-refresh{padding:.6em 1.2em;font-size:12px}}@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-modal-header h3{font-size:1.1em}.drag-puzzle-close-btn{width:38px;min-width:44px;height:38px;min-height:44px;font-size:1.2em}.drag-puzzle-container{padding:1.5em 1.25em 1.25em}.drag-puzzle-background{width:min(280px,100vw - 2.5rem);height:min(148px,52.9vw - 1.3225rem)}.drag-puzzle-hole,.drag-puzzle-piece{width:min(55px,19.6vw - .49rem);height:min(55px,19.6vw - .49rem)}.drag-puzzle-slider{width:min(280px,100vw - 2.5rem)}.drag-puzzle-track{height:44px}.drag-puzzle-slider-button{border-radius:18px;width:36px;min-width:44px;height:36px;min-height:44px;top:2px}.drag-puzzle-slider-icon{font-size:16px}.drag-puzzle-title{margin-bottom:1em;font-size:14px;line-height:1.4}.drag-puzzle-text{margin-bottom:1em;font-size:12px;line-height:1.4}.drag-puzzle-attempts{margin-bottom:0;padding:.3em .6em;font-size:11px}.drag-puzzle-actions{margin-top:0}.drag-puzzle-attempts-container{gap:.4em;margin-top:.4em}.drag-puzzle-refresh{padding:.6em 1.1em;font-size:11px}.drag-puzzle-attempts+.drag-puzzle-actions{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-container{padding:1.25em 1em 1em}.drag-puzzle-background{width:min(260px,100vw - 2rem);height:min(137px,52.7vw - 1.054rem)}.drag-puzzle-hole,.drag-puzzle-piece{width:min(50px,19.2vw - .384rem);height:min(50px,19.2vw - .384rem)}.drag-puzzle-slider{width:min(260px,100vw - 2rem)}.drag-puzzle-track{height:42px}.drag-puzzle-slider-button{width:34px;min-width:44px;height:34px;min-height:44px;top:2px}.drag-puzzle-attempts{border-radius:15px;margin-bottom:0;padding:.25em .5em;font-size:10px}.drag-puzzle-actions{margin-top:0}.drag-puzzle-attempts-container{gap:.3em;margin-top:.3em}.drag-puzzle-refresh{border-radius:15px;padding:.5em .9em;font-size:10px}.drag-puzzle-attempts-container{flex-direction:column;align-items:center;gap:.3em;display:flex}@media (max-height:600px),(max-width:360px){.drag-puzzle-attempts-container{flex-flow:wrap;justify-content:center;gap:.5em}.drag-puzzle-attempts{flex-shrink:0;margin-bottom:0}.drag-puzzle-actions{flex-shrink:0;margin-top:0}.drag-puzzle-refresh{padding:.4em .7em;font-size:9px}}}@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-container{padding:1.25em 1.5em 1em}.drag-puzzle-title{margin-bottom:.75em}.drag-puzzle-background{margin-bottom:1em}.drag-puzzle-text{margin-bottom:.75em}}@media (pointer:coarse){.drag-puzzle-piece{cursor:pointer}.drag-puzzle-piece:hover{transform:none}.drag-puzzle-slider-button{cursor:pointer}.drag-puzzle-slider-button:hover{transform:none}.drag-puzzle-close-btn,.drag-puzzle-refresh,.drag-puzzle-slider-button{min-width:44px;min-height:44px}}@media (min-resolution:2x){.drag-puzzle-background,.drag-puzzle-piece{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-button:focus{outline-offset:2px;outline:3px solid #667eea80}@media (prefers-contrast:high){.drag-puzzle-title,.drag-puzzle-text{color:#212529;font-weight:600}.drag-puzzle-hole{border-width:2px;border-color:#000}}