@import"https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap";@keyframes marching-ants{0%{background-position:0 0,0 100%,0 0,100% 0}to{background-position:20px 0,-20px 100%,0 -20px,100% 20px}}:root{--rc-drag-handle-size: 12px;--rc-drag-handle-mobile-size: 24px;--rc-drag-handle-bg-colour: rgba(0, 0, 0, .2);--rc-drag-bar-size: 6px;--rc-border-color: rgba(255, 255, 255, .7);--rc-focus-color: #0088ff}.ReactCrop{position:relative;display:inline-block;cursor:crosshair;max-width:100%}.ReactCrop *,.ReactCrop *:before,.ReactCrop *:after{box-sizing:border-box}.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}.ReactCrop__child-wrapper{overflow:hidden;max-height:inherit}.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}.ReactCrop__crop-mask{position:absolute;inset:0;pointer-events:none;width:calc(100% + .5px);height:calc(100% + .5px)}.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translateZ(0);cursor:move}.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%}.ReactCrop--circular-crop .ReactCrop__crop-selection:after{pointer-events:none;content:"";position:absolute;inset:-1px;border:1px solid var(--rc-border-color);opacity:.3}.ReactCrop--no-animate .ReactCrop__crop-selection{outline:1px dashed white}.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection){animation:marching-ants 1s;background-image:linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to right,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%),linear-gradient(to bottom,#fff 50%,#444 50%);background-size:10px 1px,10px 1px,1px 10px,1px 10px;background-position:0 0,0 100%,0 0,100% 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;color:#fff;animation-play-state:running;animation-timing-function:linear;animation-iteration-count:infinite}.ReactCrop__crop-selection:focus{outline:2px solid var(--rc-focus-color);outline-offset:-1px}.ReactCrop--invisible-crop .ReactCrop__crop-mask,.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after,.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{content:"";display:block;position:absolute;background-color:#fff6}.ReactCrop__rule-of-thirds-vt:before,.ReactCrop__rule-of-thirds-vt:after{width:1px;height:100%}.ReactCrop__rule-of-thirds-vt:before{left:33.3333333333%}.ReactCrop__rule-of-thirds-vt:after{left:66.6666666667%}.ReactCrop__rule-of-thirds-hz:before,.ReactCrop__rule-of-thirds-hz:after{width:100%;height:1px}.ReactCrop__rule-of-thirds-hz:before{top:33.3333333333%}.ReactCrop__rule-of-thirds-hz:after{top:66.6666666667%}.ReactCrop__drag-handle{position:absolute;width:var(--rc-drag-handle-size);height:var(--rc-drag-handle-size);background-color:var(--rc-drag-handle-bg-colour);border:1px solid var(--rc-border-color)}.ReactCrop__drag-handle:focus{background:var(--rc-focus-color)}.ReactCrop .ord-nw{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}.ReactCrop .ord-n{top:0;left:50%;transform:translate(-50%,-50%);cursor:n-resize}.ReactCrop .ord-ne{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}.ReactCrop .ord-e{top:50%;right:0;transform:translate(50%,-50%);cursor:e-resize}.ReactCrop .ord-se{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}.ReactCrop .ord-s{bottom:0;left:50%;transform:translate(-50%,50%);cursor:s-resize}.ReactCrop .ord-sw{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}.ReactCrop .ord-w{top:50%;left:0;transform:translate(-50%,-50%);cursor:w-resize}.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}.ReactCrop__drag-bar{position:absolute}.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(-50%)}.ReactCrop__drag-bar.ord-e{right:0;top:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(50%)}.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:var(--rc-drag-bar-size);transform:translateY(50%)}.ReactCrop__drag-bar.ord-w{top:0;left:0;width:var(--rc-drag-bar-size);height:100%;transform:translate(-50%)}.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}@media(pointer:coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:var(--rc-drag-handle-mobile-size);height:var(--rc-drag-handle-mobile-size)}}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--primary: #3b82f6;--primary-light: #60a5fa;--primary-dark: #2563eb;--secondary: #f472b6;--accent: #fbbf24;--success: #34d399;--background: #1e3a5f;--surface: #2d4a6f;--surface-light: #3d5a80;--text: #ffffff;--text-muted: #bfdbfe;--shadow: rgba(0, 0, 0, .3);--glow: rgba(251, 191, 36, .5)}html,body,#root{height:100%;height:100dvh;width:100%;overflow:hidden;background:var(--background)}body{font-family:Nunito,sans-serif;background:linear-gradient(135deg,var(--background) 0%,var(--surface) 100%);color:var(--text);user-select:none;-webkit-user-select:none;touch-action:manipulation}.app{height:100%;height:100dvh;width:100%;display:flex;flex-direction:column}.home-screen{height:100%;display:flex;flex-direction:column;padding:20px;overflow-y:auto}.home-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;width:100%;gap:24px}.home-title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent) 0%,var(--secondary) 50%,var(--primary-light) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center}.puzzle-preview{position:relative;width:180px;height:180px;border-radius:20px;overflow:hidden;box-shadow:0 8px 32px var(--shadow);cursor:pointer;transition:transform .2s ease}.puzzle-preview:hover{transform:scale(1.05)}.puzzle-preview:active{transform:scale(.98)}.puzzle-preview img{width:100%;height:100%;object-fit:cover}.shuffle-hint{position:absolute;bottom:8px;right:8px;background:#ffffffe6;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#1e3a5f;box-shadow:0 2px 8px #0003;transition:transform .2s ease}.puzzle-preview:hover .shuffle-hint{transform:rotate(45deg)}.puzzle-preview:active .shuffle-hint{transform:rotate(180deg)}.parent-controls{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--surface-light);margin-top:auto}.difficulty-selector{display:flex;gap:8px}.diff-btn{background:var(--surface);border:2px solid transparent;border-radius:12px;padding:8px 12px;font-size:.9rem;cursor:pointer;transition:all .2s ease;opacity:.6}.diff-btn:hover{opacity:.8}.diff-btn.active{opacity:1;border-color:var(--accent);background:var(--surface-light)}.quick-toggles{display:flex;gap:8px}.toggle-btn{background:var(--surface);border:2px solid transparent;border-radius:12px;padding:10px 14px;font-size:1.2rem;cursor:pointer;transition:all .2s ease;opacity:.6}.toggle-btn:hover{opacity:.8}.toggle-btn.active{opacity:1;border-color:var(--success);background:var(--surface-light)}.settings-section{background:var(--surface);border-radius:20px;padding:20px;margin-bottom:16px;box-shadow:0 8px 32px var(--shadow)}.section-title{font-size:1.1rem;font-weight:700;margin-bottom:16px;color:var(--text);display:flex;align-items:center;gap:8px}.section-title span{font-size:1.3rem}.grid-options{display:flex;gap:12px;justify-content:center}.grid-btn{flex:1;max-width:100px;aspect-ratio:1;border:3px solid var(--surface-light);border-radius:16px;background:var(--background);color:var(--text);font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}.grid-btn:hover{transform:scale(1.05);border-color:var(--primary-light)}.grid-btn.active{border-color:var(--accent);background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 100%);box-shadow:0 0 20px #fbbf2466}.grid-btn-label{font-size:.75rem;color:var(--text-muted);font-weight:600}.grid-btn.active .grid-btn-label{color:var(--accent)}.toggle-row{display:flex;align-items:center;justify-content:space-between}.toggle-label{font-size:1rem;font-weight:600}.toggle-switch{position:relative;width:60px;height:34px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;inset:0;background-color:var(--background);border:2px solid var(--surface-light);transition:.3s;border-radius:34px}.toggle-slider:before{position:absolute;content:"";height:24px;width:24px;left:3px;bottom:3px;background-color:var(--text-muted);transition:.3s;border-radius:50%}.toggle-switch input:checked+.toggle-slider{background:linear-gradient(135deg,var(--success) 0%,#10b981 100%);border-color:var(--success)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(26px);background-color:#fff}.image-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}.image-thumb{aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;border:3px solid transparent;transition:all .2s ease}.image-thumb:hover{transform:scale(1.05)}.image-thumb.selected{border-color:var(--accent);box-shadow:0 0 15px #fbbf2480}.image-thumb img{width:100%;height:100%;object-fit:cover}.custom-image-btn{aspect-ratio:1;border-radius:12px;border:3px dashed var(--surface-light);background:var(--background);color:var(--text-muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.8rem;font-weight:600;transition:all .2s ease}.custom-image-btn:hover{border-color:var(--primary-light);color:var(--text)}.custom-image-btn span{font-size:1.5rem;margin-bottom:4px}.start-btn{width:200px;padding:20px 40px;border:none;border-radius:50px;background:linear-gradient(135deg,var(--success) 0%,#10b981 100%);color:#fff;font-size:1.8rem;font-weight:800;cursor:pointer;transition:all .2s ease;box-shadow:0 6px 20px #34d39966}.start-btn:hover{transform:scale(1.05);box-shadow:0 8px 28px #34d39980}.start-btn:active{transform:scale(.95)}.my-photo-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#7dd3fc,#38bdf8);border:none;border-radius:25px;color:#0c4a6e;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #38bdf84d;margin-top:-8px}.my-photo-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #38bdf866}.my-photo-btn:active{transform:scale(.95)}.my-photo-btn svg{stroke:#0c4a6e}.game-screen{height:100%;height:100dvh;display:flex;flex-direction:column;background:linear-gradient(135deg,var(--background) 0%,var(--surface) 100%)}.game-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface);box-shadow:0 4px 16px var(--shadow)}.back-btn{width:44px;height:44px;border:none;border-radius:12px;background:var(--background);color:var(--text);font-size:1.3rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.back-btn:hover{background:var(--surface-light)}.game-title{font-size:1.2rem;font-weight:700;color:var(--accent)}.pieces-counter{font-size:.95rem;font-weight:600;color:var(--text);background:var(--background);padding:8px 14px;border-radius:10px}.puzzle-area{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;overflow:hidden;position:relative}.puzzle-board{position:relative;background:linear-gradient(135deg,#0d0d1a,#111827);border-radius:20px;box-shadow:0 12px 40px var(--shadow),inset 0 2px 4px #0000004d;overflow:hidden;border:4px solid rgba(255,255,255,.1)}.puzzle-hint{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.35;pointer-events:none}.puzzle-grid{position:relative;width:100%;height:100%}.grid-lines{position:absolute;top:0;left:0;pointer-events:none}.highlight-cell{position:absolute;background:#34d39966;border:4px solid var(--success);border-radius:8px;box-sizing:border-box;pointer-events:none;animation:pulseGlow 1s ease-in-out infinite}@keyframes pulseGlow{0%,to{box-shadow:0 0 10px var(--success),inset 0 0 20px #34d39933}50%{box-shadow:0 0 25px var(--success),inset 0 0 30px #34d3994d}}.placed-piece{position:absolute;pointer-events:none;transition:opacity .3s ease}.piece-tray{background:linear-gradient(180deg,var(--surface) 0%,var(--background) 100%);border-top:4px solid var(--accent);padding:24px 2px 12px;padding-bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:0;box-shadow:0 -8px 24px var(--shadow);overflow:visible}.piece-slot{display:flex;align-items:center;justify-content:center;background:#ffffff0d;border-radius:12px;border:2px dashed rgba(255,255,255,.15);transition:all .2s ease}.piece-slot.empty{opacity:.4}.piece-slot:not(.empty){border-color:transparent;background:transparent}.piece-slot.dragging{opacity:.3}.puzzle-piece{flex-shrink:0;cursor:grab;transition:transform .2s cubic-bezier(.34,1.56,.64,1),filter .2s ease;border-radius:4px;filter:drop-shadow(0 4px 8px var(--shadow))}.puzzle-piece:hover{transform:scale(1.12) rotate(-2deg);filter:drop-shadow(0 8px 16px var(--shadow)) drop-shadow(0 0 12px var(--glow))}.puzzle-piece:active{transform:scale(1.05)}.puzzle-piece.dragging{cursor:grabbing;transform:scale(1.2);filter:drop-shadow(0 20px 40px var(--shadow)) drop-shadow(0 0 20px var(--glow));z-index:1000;position:fixed;pointer-events:none}.win-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.win-modal{background:var(--surface);border-radius:24px;padding:32px;text-align:center;max-width:320px;margin:20px;animation:bounceIn .5s ease;box-shadow:0 20px 60px var(--shadow)}@keyframes bounceIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.win-emoji{font-size:4rem;margin-bottom:16px;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.win-title{font-size:2rem;font-weight:800;color:var(--accent);margin-bottom:8px}.win-subtitle{color:var(--text-muted);margin-bottom:24px}.win-buttons{display:flex;flex-wrap:wrap;gap:12px}.win-btn{flex:1;padding:14px 20px;border:none;border-radius:12px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.win-btn.primary{background:linear-gradient(135deg,var(--accent) 0%,#f59e0b 100%);color:var(--background)}.win-btn.success{background:linear-gradient(135deg,var(--success) 0%,#10b981 100%);color:#fff}.win-btn.secondary{background:var(--background);color:var(--text)}.win-btn:hover{transform:scale(1.05)}.cropper-screen{height:100%;display:flex;flex-direction:column;background:var(--background)}.cropper-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--surface)}.cropper-btn{padding:10px 20px;border:none;border-radius:10px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s ease}.cropper-btn.cancel{background:var(--background);color:var(--text)}.cropper-btn.confirm{background:linear-gradient(135deg,var(--success) 0%,#10b981 100%);color:#fff}.cropper-area{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;overflow:hidden}.ReactCrop{max-height:100%}.confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3000}.confetti-piece{position:absolute;width:10px;height:10px;animation:confettiFall 3s ease-out forwards}@keyframes confettiFall{0%{transform:translateY(-100px) rotate(0);opacity:1}to{transform:translateY(100dvh) rotate(720deg);opacity:0}}.install-button{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:1000;display:flex;align-items:center;gap:6px;padding:8px 14px;background:linear-gradient(135deg,var(--accent) 0%,#f59e0b 100%);border:none;border-radius:20px;color:var(--background);font-family:Nunito,sans-serif;font-size:.9rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #fbbf2466;transition:all .2s ease;animation:fadeInSlide .3s ease}.install-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #fbbf2480}.install-button:active{transform:scale(.95)}@keyframes fadeInSlide{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.install-prompt{position:fixed;bottom:0;left:0;right:0;background:var(--surface);padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 -4px 20px var(--shadow);z-index:1500;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.install-prompt-text{flex:1}.install-prompt-title{font-weight:700;margin-bottom:4px}.install-prompt-desc{font-size:.85rem;color:var(--text-muted)}.install-btn{padding:10px 20px;border:none;border-radius:10px;background:var(--accent);color:var(--background);font-weight:700;cursor:pointer}.install-close{width:36px;height:36px;border:none;border-radius:50%;background:var(--background);color:var(--text);cursor:pointer;font-size:1.2rem}@media(max-width:400px){.home-title{font-size:2rem}.image-grid{grid-template-columns:repeat(3,1fr)}.piece-tray{height:120px}}@media(min-width:600px){.home-screen{max-width:500px;margin:0 auto}.puzzle-board{max-width:450px;max-height:450px}}.update-prompt{position:fixed;bottom:20px;left:20px;right:20px;bottom:max(20px,env(safe-area-inset-bottom));z-index:2500;animation:slideUp .3s ease}.update-content{background:var(--surface);border-radius:16px;padding:16px;display:flex;align-items:center;gap:12px;box-shadow:0 8px 32px var(--shadow);border:2px solid var(--accent)}.update-icon{font-size:1.5rem}.update-text{flex:1}.update-text strong{display:block;color:var(--accent)}.update-text p{font-size:.85rem;color:var(--text-muted);margin:0}.update-btn{background:var(--accent);border:none;border-radius:10px;padding:10px 20px;font-family:Nunito,sans-serif;font-weight:700;color:var(--background);cursor:pointer;transition:all .2s ease}.update-btn:hover{transform:scale(1.05)}.update-dismiss{background:transparent;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;padding:0 8px;line-height:1}.update-dismiss:hover{color:var(--text)}.offline-indicator{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);padding:12px 20px;border-radius:25px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 16px var(--shadow);z-index:1500;animation:fadeIn .3s ease;pointer-events:none}.offline-dot{width:10px;height:10px;background:#ef4444;border-radius:50%;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}