body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}:root{--primary-blue:#2563eb;--primary-blue-hover:#1d4ed8;--success-green:#10b981;--success-green-hover:#059669;--danger-red:#ef4444;--danger-red-hover:#dc2626;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--white:#fff;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--radius-sm:0.375rem;--radius-md:0.5rem;--radius-lg:0.75rem}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#f9fafb,#f3f4f6);background:linear-gradient(135deg,var(--gray-50) 0,var(--gray-100) 100%);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;padding:0}.app,body{height:100vh;overflow:hidden}.app{box-sizing:border-box;display:flex;flex-direction:row;gap:1.5rem;padding:1rem;position:relative}.creator-info{align-items:center;background:#fff;background:var(--white);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);color:#6b7280;color:var(--gray-500);display:flex;font-size:.875rem;gap:.5rem;padding:.5rem .75rem;position:absolute;right:1rem;top:1rem;z-index:50}.creator-info a{color:#2563eb;color:var(--primary-blue);font-weight:500;text-decoration:none;transition:color .2s ease}.creator-info a:hover{color:#1d4ed8;color:var(--primary-blue-hover)}.github-link{align-items:center;border-radius:.375rem;border-radius:var(--radius-sm);color:#4b5563;color:var(--gray-600);display:flex;padding:.25rem;transition:all .2s ease}.github-link:hover{background-color:#f3f4f6;background-color:var(--gray-100);color:#1f2937;color:var(--gray-800);text-decoration:none!important}.github-link svg{display:block}.header{align-self:flex-start;background:#fff;background:var(--white);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);flex-shrink:0;padding:1rem;width:320px}.header h1{color:#111827;color:var(--gray-900);font-size:1.625rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;margin:0 0 .75rem}.subtitle{color:#4b5563;color:var(--gray-600);font-size:.8rem;line-height:1.4;margin:0 0 1rem}.subtitle a{color:#2563eb;color:var(--primary-blue);font-weight:500;text-decoration:none;transition:color .2s ease}.subtitle a:hover{color:#1d4ed8;color:var(--primary-blue-hover);text-decoration:underline}.useful-links{background:linear-gradient(135deg,#f9fafb,#f3f4f6);background:linear-gradient(135deg,var(--gray-50) 0,var(--gray-100) 100%);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.5rem;border-radius:var(--radius-md);font-size:.875rem;margin:0 0 1.5rem;padding:1rem}.useful-links p{color:#1f2937;color:var(--gray-800);font-weight:600;margin:0 0 .75rem}.useful-links ul{list-style-type:none;margin:0;padding-left:1rem}.useful-links li{line-height:1.4;margin-bottom:.5rem;position:relative}.useful-links li:before{color:#2563eb;color:var(--primary-blue);content:"→";font-weight:600;left:-1rem;position:absolute}.useful-links a{color:#2563eb;color:var(--primary-blue);font-weight:500;text-decoration:none;transition:all .2s ease}.useful-links a:hover{color:#1d4ed8;color:var(--primary-blue-hover);text-decoration:underline}.instructions{background:#fff;background:var(--white);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.5rem;border-radius:var(--radius-md);color:#374151;color:var(--gray-700);font-size:.875rem;margin-bottom:1rem;padding:1rem}.instructions p{color:#1f2937;color:var(--gray-800);font-weight:600;margin:0 0 .75rem}.instructions ul{list-style-type:none;margin:0;padding-left:1rem}.instructions li{line-height:1.4;margin-bottom:.5rem;position:relative}.instructions li:before{color:#2563eb;color:var(--primary-blue);content:"•";font-weight:600;left:-1rem;position:absolute}.related-section{background:#fff;background:var(--white);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.5rem;border-radius:var(--radius-md);color:#374151;color:var(--gray-700);font-size:.875rem;padding:1rem}.related-section p{color:#1f2937;color:var(--gray-800);font-weight:600;margin:0 0 .75rem}.related-section ul{list-style-type:none;margin:0;padding-left:1rem}.related-section li{line-height:1.4;margin-bottom:.5rem;position:relative}.related-section li:before{color:#2563eb;color:var(--primary-blue);content:"→";font-weight:600;left:-1rem;position:absolute}.related-section a{color:#2563eb;color:var(--primary-blue);font-weight:500;text-decoration:none;transition:all .2s ease}.related-section a:hover{color:#1d4ed8;color:var(--primary-blue-hover);text-decoration:underline}.game-container{align-items:center;box-sizing:border-box;display:flex;flex:1 1;flex-direction:column;gap:1.25rem;justify-content:flex-start;overflow:hidden;padding-right:320px;padding-top:1rem}.board-container{position:relative}.board-container,.preset-controls{align-items:center;display:flex;flex-direction:column}.preset-controls{background:#fff;background:var(--white);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);gap:.5rem;padding:.75rem;position:absolute;right:-140px;top:0;z-index:10}.preset-select{background-color:#fff;background-color:var(--white);border:1px solid #d1d5db;border:1px solid var(--gray-300);border-radius:.5rem;border-radius:var(--radius-md);color:#374151;color:var(--gray-700);cursor:pointer;font-size:.75rem;font-weight:500;padding:.5rem .75rem;text-align:center;text-align-last:center;transition:all .2s ease;width:100px}.preset-select:hover{box-shadow:0 0 0 1px #2563eb;box-shadow:0 0 0 1px var(--primary-blue)}.preset-select:focus,.preset-select:hover{border-color:#2563eb;border-color:var(--primary-blue)}.preset-select:focus{box-shadow:0 0 0 3px #2563eb1a;outline:none}.icon-button{align-items:center;border:none;border-radius:.5rem;border-radius:var(--radius-md);box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);cursor:pointer;display:flex;font-weight:500;height:32px;justify-content:center;transition:all .2s ease;width:50px}.icon-button:hover{box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;box-shadow:var(--shadow-md);transform:translateY(-1px)}.icon-button:active{box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);transform:translateY(0)}.icon-button.download-button{background:#10b981;background:var(--success-green);color:#fff;color:var(--white)}.icon-button.download-button:hover{background:#059669;background:var(--success-green-hover)}.icon-button.reset-button{background:#ef4444;background:var(--danger-red);color:#fff;color:var(--white)}.icon-button.reset-button:hover{background:#dc2626;background:var(--danger-red-hover)}.icon-button svg{height:14px;width:14px}.board{background:#fff;background:var(--white);border:2px solid #d1d5db;border:2px solid var(--gray-300);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);flex-shrink:0;overflow:hidden;position:relative;transition:all .3s ease}.board.drag-over{box-shadow:0 0 0 4px #2563eb1a,0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:0 0 0 4px #2563eb1a,var(--shadow-lg)}.grid-lines{left:0;pointer-events:none;position:absolute;top:0;z-index:1}.placed-square{align-items:center;border:1px solid #0000001a;box-sizing:border-box;color:#fff;color:var(--white);cursor:grab;display:flex;font-weight:700;justify-content:center;position:absolute;text-shadow:0 1px 2px #00000080;transition:all .2s ease;-webkit-user-select:none;user-select:none;z-index:2}.placed-square:hover:not(.locked){box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);transform:scale(1.05);z-index:3}.placed-square:active{cursor:grabbing}.placed-square.locked{border:1px solid #0003;cursor:pointer}.placed-square.locked:hover{border:1px solid #0006}.preview-square{animation:pulse 1.5s infinite;background-color:initial;border:2px dashed;box-sizing:border-box;pointer-events:none;position:absolute;z-index:3}.preview-square.valid{background-color:#10b9811a;border-color:#10b981;border-color:var(--success-green)}.preview-square.invalid{background-color:#ef44441a;border-color:#ef4444;border-color:var(--danger-red)}@keyframes pulse{0%,to{opacity:.6}50%{opacity:1}}.toolbar-section{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:.25rem}.remaining-label{color:#374151;color:var(--gray-700);font-size:.875rem;font-weight:600;left:.75rem;padding:.25rem .5rem;position:absolute;top:.5rem;z-index:1}.toolbar{align-items:flex-end;background:#fff;background:var(--white);border:2px solid #d1d5db;border:2px solid var(--gray-300);border-radius:.75rem;border-radius:var(--radius-lg);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);display:flex;gap:.5rem;max-width:100%;overflow-x:auto;padding:1.75rem 1rem 1rem;position:relative}.toolbar-square-container{align-items:center;display:flex;flex-direction:column;flex-shrink:0;gap:1rem}.toolbar-square-area{align-items:center;display:flex;height:90px;justify-content:center}.remaining-count{background:#f3f4f6;background:var(--gray-100);border:1px solid #e5e7eb;border:1px solid var(--gray-200);border-radius:.375rem;border-radius:var(--radius-sm);color:#374151;color:var(--gray-700);font-size:.7rem;font-weight:600;min-width:16px;padding:.125rem .375rem;text-align:center}.remaining-count,.toolbar-square{box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm)}.toolbar-square{align-items:center;border:2px solid #0000001a;color:#fff;color:var(--white);cursor:grab;display:flex;font-weight:700;justify-content:center;text-shadow:0 1px 2px #00000080;transition:all .2s ease;-webkit-user-select:none;user-select:none}.toolbar-square:hover{border-color:#0003;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;box-shadow:var(--shadow-lg);transform:translateY(-2px) scale(1.05)}.toolbar-square:active{box-shadow:0 1px 2px 0 #0000000d;box-shadow:var(--shadow-sm);cursor:grabbing;transform:translateY(0) scale(.98)}.toolbar-square[draggable=false]{box-shadow:0 1px 2px 0 #0000000d!important;box-shadow:var(--shadow-sm)!important;cursor:not-allowed;opacity:.5;transform:none!important}.toolbar-square.dragging{opacity:.6;transform:scale(.95)}.toolbar-square.exhausted{background-color:#f3f4f6!important;border-color:#10b9814d;cursor:not-allowed}.toolbar-square.exhausted:hover{border-color:#10b98180;box-shadow:0 1px 2px 0 #0000000d!important;box-shadow:var(--shadow-sm)!important;transform:none!important}.check-icon{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.1))}@media (max-width:768px){.app{flex-direction:column;gap:1rem;padding:.75rem}.header{width:100%}.header h1{font-size:1.5rem;margin:0 0 .5rem}.instructions{font-size:.8rem;padding:.75rem}.board{transform:scale(.85);transform-origin:center}.toolbar{gap:.5rem;padding:1.5rem 1rem 1rem}.game-container{gap:1rem;justify-content:flex-start;padding-right:0;padding-top:.5rem}.toolbar-square-area{height:80px}.creator-info{justify-content:center;margin-bottom:1rem;position:relative;right:auto;top:auto}}
/*# sourceMappingURL=main.72367ce9.css.map*/