:root{--primary:#6c5ce7;--primary-glow:rgba(108, 92, 231, 0.6);--secondary:#a29bfe;--accent:#fd79a8;--success:#00b894;--bg-dark:#0a0a1a;--bg-darker:#050510;--bg-card:rgba(255, 255, 255, 0.05);--text-main:#ffffff;--text-muted:#b0b0d0;--font-heading:'Outfit',sans-serif;--font-body:'Poppins',sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background-color:var(--bg-dark);color:var(--text-main);line-height:1.6;overflow-x:hidden;min-height:100vh}.pattern-bg{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;background:linear-gradient(135deg,#0a0a1a 0,#1a1a2e 50%,#0a0a1a 100%);overflow:hidden}.pattern-layer{position:absolute;width:100%;height:100%;background-image:linear-gradient(rgba(108,92,231,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(108,92,231,.1) 1px,transparent 1px);background-size:50px 50px}.game-container{max-width:1200px;margin:0 auto;padding:20px;min-height:100vh}.game-header{display:flex;justify-content:center;align-items:center;padding:15px 0;border-bottom:1px solid rgba(108,92,231,.2);margin-bottom:20px;flex-wrap:wrap;gap:15px;min-height:0}.game-header:has(.game-stats[style*=none]){display:none}.back-btn{display:flex;align-items:center;gap:8px;color:var(--text-muted);text-decoration:none;font-size:.9rem;transition:color .3s}.back-btn:hover{color:var(--primary)}.game-title{font-family:var(--font-heading);font-size:1.8rem;font-weight:700}.gradient-text{background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.game-stats{display:none;gap:25px}.stat{display:flex;flex-direction:column;align-items:center}.stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.stat-value{font-family:var(--font-heading);font-size:1.5rem;font-weight:700;color:var(--primary)}.setup-screen{text-align:center;padding:20px}.setup-screen h2{font-family:var(--font-heading);font-size:2rem;margin-bottom:40px}.setup-screen h3{font-family:var(--font-heading);font-size:1.2rem;margin-bottom:20px;color:var(--text-muted)}.image-selection{margin-bottom:40px}.image-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;max-width:800px;margin:0 auto}.image-option{aspect-ratio:1;border-radius:15px;overflow:hidden;cursor:pointer;border:3px solid transparent;transition:.3s;position:relative}.image-option img{width:100%;height:100%;object-fit:cover}.image-option:hover{transform:scale(1.05);border-color:var(--secondary)}.image-option.selected{border-color:var(--primary);box-shadow:0 0 30px var(--primary-glow)}.image-option.selected::after{content:'✓';position:absolute;top:10px;right:10px;width:30px;height:30px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.upload-section{margin-bottom:20px}.upload-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);border:none;border-radius:50px;color:#fff;font-family:var(--font-heading);font-size:1rem;font-weight:600;cursor:pointer;transition:.3s;box-shadow:0 5px 20px var(--primary-glow)}.upload-btn:hover{transform:translateY(-3px);box-shadow:0 10px 30px var(--primary-glow)}.uploaded-preview{display:flex;justify-content:center;margin:20px 0}.uploaded-preview.hidden{display:none}.uploaded-image{position:relative;max-width:200px}.remove-upload-btn{position:absolute;top:-10px;right:-10px;width:30px;height:30px;background:#e74c3c;border:none;border-radius:50%;color:#fff;font-size:1.2rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.3s;z-index:10}.remove-upload-btn:hover{background:#c0392b;transform:scale(1.1)}.divider-text{display:flex;align-items:center;margin:25px 0;color:var(--text-muted);font-size:.9rem}.divider-text::after,.divider-text::before{content:'';flex:1;height:1px;background:rgba(108,92,231,.3)}.divider-text span{padding:0 20px}.difficulty-selection{margin-bottom:40px}.difficulty-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.difficulty-btn{background:var(--bg-card);border:2px solid rgba(108,92,231,.3);border-radius:15px;padding:20px 30px;cursor:pointer;transition:.3s;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:120px}.difficulty-btn:hover{border-color:var(--secondary);transform:translateY(-3px)}.difficulty-btn.active{border-color:var(--primary);background:rgba(108,92,231,.2);box-shadow:0 0 20px var(--primary-glow)}.diff-name{font-family:var(--font-heading);font-size:1.1rem;font-weight:600;color:var(--text-main)}.diff-grid{font-size:.9rem;color:var(--text-muted)}.preview-screen{text-align:center;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center}.preview-screen.hidden{display:none}.preview-screen h2{font-family:var(--font-heading);font-size:1.8rem;margin-bottom:8px;background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.preview-hint{color:var(--text-muted);font-size:1rem;margin-bottom:20px}.full-preview-image{width:var(--puzzle-size,400px);height:var(--puzzle-size,400px);border-radius:20px;overflow:hidden;border:3px solid rgba(108,92,231,.5);box-shadow:0 20px 60px rgba(108,92,231,.3);margin-bottom:20px}.full-preview-image img{width:100%;height:100%;object-fit:cover}.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:12px;font-size:1rem;font-weight:600;text-decoration:none;transition:.3s;cursor:pointer;border:none;font-family:var(--font-body)}.btn-primary{background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);color:#fff;box-shadow:0 10px 30px var(--primary-glow)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px var(--primary-glow)}.btn-secondary{background:var(--bg-card);color:var(--text-main);border:2px solid rgba(108,92,231,.3)}.btn-secondary:hover{border-color:var(--primary)}.start-btn{margin-top:20px;padding:18px 50px;font-size:1.1rem}.game-screen{display:flex;flex-direction:column;align-items:center;gap:30px}.game-screen.hidden{display:none}.hidden{display:none!important}.preview-container{text-align:center}.preview-label{font-size:.85rem;color:var(--text-muted);margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}.preview-image{width:var(--puzzle-size,150px);height:var(--puzzle-size,150px);border-radius:15px;overflow:hidden;border:2px solid rgba(108,92,231,.3);box-shadow:0 10px 30px rgba(0,0,0,.3)}.preview-image img{width:100%;height:100%;object-fit:cover}.puzzle-container{display:flex;justify-content:center;align-items:center;padding:20px}.puzzle-board{display:grid;gap:4px;background:rgba(0,0,0,.3);padding:10px;border-radius:20px;border:2px solid rgba(108,92,231,.3);box-shadow:0 20px 60px rgba(0,0,0,.5)}.tile{background-size:cover;background-position:center;border-radius:8px;cursor:grab;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}.tile:hover{transform:scale(1.02);box-shadow:0 5px 20px rgba(108,92,231,.4);z-index:10}.tile.dragging{cursor:grabbing;transform:scale(1.1);box-shadow:0 10px 40px rgba(108,92,231,.6);z-index:100;opacity:.9}.tile.drag-over{border:3px solid var(--primary);box-shadow:0 0 20px var(--primary-glow)}.tile.correct{box-shadow:0 0 15px var(--success)}.game-controls{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.control-btn{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--bg-card);border:2px solid rgba(108,92,231,.3);border-radius:10px;color:var(--text-main);font-family:var(--font-body);font-size:.9rem;cursor:pointer;transition:.3s}.control-btn:hover{border-color:var(--primary);background:rgba(108,92,231,.1);transform:translateY(-2px)}.control-btn svg{color:var(--primary)}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(5px)}.modal-content{background:linear-gradient(135deg,#1a1a2e 0,#0a0a1a 100%);border:2px solid rgba(108,92,231,.3);border-radius:25px;padding:50px;text-align:center;max-width:400px;width:90%;box-shadow:0 30px 80px rgba(0,0,0,.5)}.modal-icon{font-size:4rem;margin-bottom:20px}.modal-content h2{font-family:var(--font-heading);font-size:2rem;margin-bottom:15px;background:linear-gradient(135deg,var(--primary) 0,var(--accent) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.modal-stats{color:var(--text-muted);margin-bottom:30px;font-size:1.1rem;line-height:1.8}.modal-stats span{color:var(--primary);font-weight:600}.modal-buttons{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}@media (max-width:768px){.game-header{justify-content:center}.game-title{font-size:1.5rem;width:100%;text-align:center;order:-1}.image-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.puzzle-board{padding:8px;gap:3px}.control-btn{padding:10px 15px;font-size:.85rem}.modal-content{padding:30px}}@media (max-width:480px){.game-container{padding:10px}.setup-screen h2{font-size:1.5rem}.difficulty-btn{padding:15px 20px;min-width:100px}.btn{padding:12px 24px;font-size:.9rem}.start-btn{padding:15px 35px}.game-controls{gap:10px}.control-btn{padding:8px 12px;font-size:.8rem}.control-btn svg{width:16px;height:16px}}