: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: #ffffff;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--bg-primary: linear-gradient(to bottom right, #111827, #1e1b4b);--bg-secondary: rgba(30, 27, 75, .8);--bg-tertiary: rgba(55, 48, 163, .3);--board-bg: #040221;--grid-lines: #6366f1;--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-color: #8b5cf6;--border-color-hover: #a78bfa;--shadow-color: rgba(139, 92, 246, .3)}body{margin:0;padding:0;min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .3s ease,color .3s ease}.app{display:flex;flex-direction:column;min-height:100vh;padding:1rem;box-sizing:border-box}.rules-section{background:var(--bg-secondary);border-radius:var(--radius-lg);box-shadow:0 0 15px var(--shadow-color),var(--shadow-sm);border:1px solid var(--border-color);padding:1rem;margin-bottom:1rem;transition:all .3s ease}.rules-section h2{margin:0 0 .75rem;font-size:1.25rem;font-weight:600;color:var(--text-primary);text-align:center}.puzzle-attribution{font-size:.9rem;color:var(--text-secondary);text-align:center;margin-bottom:1rem;margin-top:0}.puzzle-attribution a{color:#60a5fa;text-decoration:none;transition:color .2s ease}.puzzle-attribution a:hover{color:#93c5fd;text-decoration:underline}.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.5rem}.rule-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--bg-tertiary);border-radius:var(--radius-md);border:1px solid var(--border-color);font-size:.875rem;color:var(--text-primary);font-weight:500;transition:all .3s ease}.rule-icon{font-size:1rem;flex-shrink:0}.game-container{flex:1;display:flex;flex-direction:column}.game-main{display:grid;grid-template-columns:1fr 300px;gap:2rem;height:100%}.board-section{background:var(--bg-secondary);border-radius:var(--radius-xl);box-shadow:0 0 15px var(--shadow-color),var(--shadow-md);border:1px solid var(--border-color);padding:.75rem;display:flex;flex-direction:column;transition:all .3s ease}.board-controls{display:flex;gap:.75rem;justify-content:center;margin-bottom:1.5rem}.control-button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:1px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-tertiary);color:var(--text-primary);font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.control-button:hover{background:#8b5cf633;border-color:var(--border-color-hover)}.control-button.reset-button{color:#f87171;border-color:#f87171}.control-button.reset-button:hover{background:#f8717133;color:#fca5a5}.board-container{display:flex;justify-content:center;align-items:center;padding:1rem}.board{position:relative;border:3px solid var(--border-color);border-radius:var(--radius-md);background:var(--board-bg);box-shadow:0 0 20px var(--shadow-color),var(--shadow-lg);transition:all .2s ease}.board.drag-over{border-color:var(--border-color-hover);background:var(--board-bg);box-shadow:0 0 30px var(--shadow-color),var(--shadow-lg)}.grid-lines{position:absolute;top:0;left:0;pointer-events:none;z-index:1}.placed-square{position:absolute;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;cursor:move;border:1px solid rgba(0,0,0,.2);border-radius:2px;z-index:10;transition:all .2s ease;text-shadow:0 1px 2px rgba(0,0,0,.5)}.placed-square:hover:not(.locked){transform:scale(1.02);box-shadow:var(--shadow-md);z-index:20}.placed-square:active{transform:scale(.98)}.placed-square.locked{cursor:not-allowed;opacity:.8}.placed-square.locked:hover{transform:none;box-shadow:none}.preview-square{position:absolute;border:2px dashed;border-radius:2px;z-index:5;pointer-events:none;animation:pulse 1s infinite}.preview-square.valid{border-color:var(--success-green);background:#10b9811a}.preview-square.invalid{border-color:var(--danger-red);background:#ef44441a}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.toolbar-section{background:var(--bg-secondary);border-radius:var(--radius-xl);box-shadow:0 0 15px var(--shadow-color),var(--shadow-md);border:1px solid var(--border-color);padding:1rem;display:flex;flex-direction:column;transition:all .3s ease;min-height:500px}.toolbar{display:flex;flex-direction:column;justify-content:space-evenly;flex:1;height:100%}.toolbar-square-container{display:flex;align-items:center;gap:.75rem;padding:.25rem .5rem;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:all .2s ease}.toolbar-square-container:hover{background:#8b5cf633;border-color:var(--border-color-hover)}.toolbar-square-area{display:flex;align-items:center;justify-content:center;width:50px;height:50px;background:#00000080;border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.toolbar-square{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:12px;cursor:grab;border:1px solid rgba(0,0,0,.2);border-radius:2px;transition:all .2s ease;text-shadow:0 1px 2px rgba(0,0,0,.5)}.toolbar-square:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.toolbar-square:active{cursor:grabbing;transform:scale(.95)}.toolbar-square[draggable=false]{cursor:not-allowed;opacity:.6}.toolbar-square[draggable=false]:hover{transform:none;box-shadow:none}.toolbar-square.dragging{opacity:.5;transform:scale(.9)}.toolbar-square.exhausted{cursor:not-allowed;opacity:.6}.toolbar-square.exhausted:hover{transform:none;box-shadow:none}.remaining-info{display:flex;flex-direction:column;align-items:center;gap:.25rem}.remaining-count{font-size:1rem;font-weight:700;color:var(--text-primary)}.remaining-label{font-size:.7rem;color:var(--text-muted);font-weight:500}.check-icon{display:block;margin:0 auto}@media (max-width: 1200px){.game-main{grid-template-columns:1fr;gap:1.5rem}.toolbar-section{order:-1}.toolbar{flex-direction:row;flex-wrap:wrap;justify-content:center}.toolbar-square-container{flex:0 0 auto}}@media (max-width: 768px){.app{padding:1rem}.rules-section{padding:.75rem}.rules-section h2{font-size:1.125rem}.rules-grid{gap:.5rem}.rule-item{font-size:.8rem;padding:.375rem .5rem}.board-section{padding:1rem}.board-controls{flex-direction:column;gap:.5rem}.control-button{justify-content:center}}@media (max-width: 480px){.app{padding:.75rem}.rules-section{padding:.5rem;margin-bottom:.75rem}.rules-section h2{font-size:1rem;margin-bottom:.5rem}.rules-grid{flex-direction:column;gap:.375rem}.rule-item{justify-content:center;font-size:.75rem;padding:.25rem .5rem}.board-section{padding:.75rem}.toolbar-section{padding:1rem}.control-button{padding:.75rem 1rem;font-size:.8rem}.control-button svg{width:14px;height:14px}}