.knob{position:relative;width:50px;height:22px;border-radius:8em;background-color:var(--gray-2);transition:background-color .25s}.knob.enabled{background-color:var(--enabled-color)}.knob>.knob-inside{position:absolute;top:1px;left:1px;width:20px;height:20px;background-color:var(--gray-7);border-radius:8em;transition:left .25s}.knob.enabled>.knob-inside{left:29px}.board-wrapper{display:flex;flex-direction:column;align-items:center;gap:0;margin-top:16px}.board-middle{display:flex;align-items:stretch;gap:0}.board{display:grid;gap:2px;touch-action:none;user-select:none;-webkit-user-select:none;background-color:var(--board-bg);border-radius:8px;padding:3px;box-shadow:inset 0 2px 8px #0000004d}.cell{aspect-ratio:1;border-radius:4px;background-color:var(--cell-bg);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s ease;position:relative;overflow:hidden}.cell:active{transform:scale(.92) rotate(var(--current-rotation, 0deg))!important}.cell.empty{cursor:default;background-color:var(--board-bg)}.cell svg{width:100%;height:100%;display:block}.pipe-body{fill:var(--pipe-empty);transition:fill .3s ease;transition-delay:var(--fill-delay, 0ms)}.pipe-highlight{fill:var(--pipe-highlight-empty);opacity:.5;transition:fill .3s ease,opacity .3s ease;transition-delay:var(--fill-delay, 0ms)}.cell.filled .pipe-body{fill:var(--water-color)}.cell.filled .pipe-highlight{fill:var(--water-highlight);opacity:.7}.cell:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;transform:translate(-50%,-50%);border-radius:50%;background:var(--pipe-empty);border:2px solid var(--pipe-border);transition:background .3s ease,border-color .3s ease;transition-delay:var(--fill-delay, 0ms);z-index:1}.cell.filled:after{background:var(--water-color);border-color:var(--water-highlight)}.cell.empty:after{display:none}.edge-indicators{display:grid}.edge-top,.edge-bottom{height:var(--edge-indicator-size)}.edge-left,.edge-right{width:var(--edge-indicator-size)}.edge-slot{display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}.edge-slot.edge-source{color:var(--source-color);font-size:14px;filter:drop-shadow(0 0 4px var(--source-color))}.edge-slot.edge-destination{color:var(--dest-color);font-size:14px;filter:drop-shadow(0 0 4px var(--dest-color))}.edge-slot.edge-source.connected{animation:pulse-glow 1s ease-in-out infinite alternate}.edge-slot.edge-destination.connected{color:var(--source-color);filter:drop-shadow(0 0 8px var(--source-color));animation:pulse-glow 1s ease-in-out infinite alternate}@keyframes pulse-glow{0%{opacity:.7}to{opacity:1}}.cell.filled{animation:water-fill .3s ease-out;animation-delay:var(--fill-delay, 0ms)}@keyframes water-fill{0%{background-color:var(--cell-bg)}50%{background-color:color-mix(in srgb,var(--water-color) 20%,var(--cell-bg))}to{background-color:var(--cell-bg)}}.game-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;gap:8px}.header-btn{background:none;border:2px solid var(--border-color);border-radius:8px;color:var(--text-primary);font-size:1.2rem;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease}.header-btn:hover{background-color:var(--bg-secondary)}.header-btn:active{transform:scale(.9)}.header-level{font-weight:600;font-size:1.1rem;flex:1;text-align:center}.header-moves{font-size:.9rem;color:var(--text-secondary);min-width:60px;text-align:center;font-variant-numeric:tabular-nums}.level-select{display:flex;flex-direction:column;align-items:center;width:100%;padding:24px 0;gap:24px}.level-select-title{font-size:1.8rem;font-weight:700;text-align:center}.level-select-subtitle{font-size:1rem;color:var(--text-secondary);text-align:center}.level-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;width:100%;max-width:320px}.level-btn{aspect-ratio:1;border:2px solid var(--border-color);border-radius:10px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:1.1rem;font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:all .15s ease}.level-btn:hover{background-color:var(--border-color)}.level-btn:active{transform:scale(.9)}.level-btn.completed{border-color:var(--source-color);color:var(--source-color)}.level-btn.completed .level-moves{font-size:.6rem;color:var(--text-secondary)}.level-btn.locked{opacity:.3;cursor:not-allowed}.level-btn.locked:hover{background-color:var(--bg-secondary)}.level-btn.locked:active{transform:none}.endless-section{width:100%;max-width:320px;display:flex;flex-direction:column;gap:16px;padding-top:16px;border-top:1px solid var(--border-color)}.endless-title{font-size:1.2rem;font-weight:600;text-align:center}.difficulty-buttons{display:flex;gap:8px}.difficulty-btn{flex:1;padding:10px 8px;border:2px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.85rem;font-weight:600;cursor:pointer;text-align:center;transition:all .15s ease}.difficulty-btn:hover{background-color:var(--border-color)}.difficulty-btn:active{transform:scale(.95)}.difficulty-btn.selected{border-color:var(--btn-primary);background-color:var(--btn-primary);color:var(--btn-primary-text)}.size-selector{display:flex;align-items:center;justify-content:center;gap:12px}.size-selector label{font-size:.9rem;color:var(--text-secondary)}.size-selector select{padding:6px 12px;border:2px solid var(--border-color);border-radius:6px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.9rem}.endless-play-btn{padding:12px;border:none;border-radius:8px;background-color:var(--btn-primary);color:var(--btn-primary-text);font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s ease}.endless-play-btn:hover{opacity:.9}.endless-play-btn:active{transform:scale(.95)}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:1000}.settings-panel{background-color:var(--dialog-bg);border-radius:16px;padding:24px;width:90%;max-width:360px;box-shadow:0 8px 32px #0000004d}.settings-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.settings-title{font-size:1.3rem;font-weight:700}.settings-close{background:none;border:none;color:var(--text-secondary);font-size:1.3rem;cursor:pointer;padding:4px}.settings-item{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-color)}.settings-item:last-child{border-bottom:none}.settings-label{font-size:.95rem;color:var(--text-primary)}.theme-selector{display:flex;gap:6px}.theme-btn{padding:6px 12px;border:2px solid var(--border-color);border-radius:6px;background-color:var(--bg-secondary);color:var(--text-primary);font-size:.8rem;cursor:pointer;transition:all .15s ease}.theme-btn.active{border-color:var(--btn-primary);background-color:var(--btn-primary);color:var(--btn-primary-text)}.settings-version{text-align:center;font-size:.75rem;color:var(--text-secondary);margin-top:16px}.win-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--overlay-bg);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fade-in .3s ease}.win-dialog{background-color:var(--dialog-bg);border-radius:16px;padding:32px 24px;width:85%;max-width:320px;text-align:center;box-shadow:0 8px 32px #0000004d;animation:slide-up .3s ease}.win-title{font-size:1.6rem;font-weight:700;margin-bottom:8px}.win-subtitle{font-size:.95rem;color:var(--text-secondary);margin-bottom:24px}.win-stats{display:flex;justify-content:center;gap:24px;margin-bottom:24px}.win-stat{display:flex;flex-direction:column;align-items:center;gap:4px}.win-stat-value{font-size:1.8rem;font-weight:700;color:var(--source-color)}.win-stat-label{font-size:.75rem;color:var(--text-secondary);text-transform:uppercase}.win-buttons{display:flex;flex-direction:column;gap:10px}.win-btn{padding:12px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .15s ease}.win-btn:active{transform:scale(.95)}.win-btn.primary{background-color:var(--btn-primary);color:var(--btn-primary-text)}.win-btn.secondary{background-color:var(--btn-secondary);color:var(--btn-secondary-text)}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.level-editor{display:flex;flex-direction:column;align-items:center;width:100%;padding:8px 0;gap:6px;overflow-y:auto;max-height:100vh}.editor-header{display:flex;align-items:center;width:100%;gap:12px}.editor-title{font-size:1.2rem;font-weight:700}.editor-row{display:flex;align-items:center;gap:8px;width:100%;flex-wrap:wrap}.editor-label{font-size:.85rem;color:var(--text-secondary);min-width:40px}.editor-x-label{font-size:.85rem;color:var(--text-secondary)}.editor-rot-display{font-size:.9rem;font-weight:600;min-width:36px;text-align:center;font-variant-numeric:tabular-nums}.number-input{display:flex;align-items:center;gap:0;border:2px solid var(--border-color);border-radius:6px;overflow:hidden}.number-btn{background:var(--bg-secondary);border:none;color:var(--text-primary);width:28px;height:28px;cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center}.number-btn:active{background:var(--border-color)}.number-display{font-size:.9rem;font-weight:600;min-width:28px;text-align:center;font-variant-numeric:tabular-nums}.editor-tools{display:flex;flex-wrap:wrap;gap:4px;width:100%}.tool-btn{flex:1;min-width:55px;padding:6px 4px;border:2px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:.7rem;font-weight:600;cursor:pointer;text-align:center;transition:all .1s ease}.tool-btn:active{transform:scale(.95)}.tool-btn.active{border-color:var(--btn-primary);background:var(--btn-primary);color:var(--btn-primary-text)}.editor-grid-wrapper{display:flex;justify-content:center;width:100%}.editor-board{margin-top:0}.editor-cell{cursor:pointer;border:1px solid rgba(255,255,255,.05)}.editor-cell:hover{border-color:var(--btn-primary)}.editor-cell.empty{background:var(--cell-bg);cursor:pointer}.editor-edge-slot{cursor:pointer;border-radius:3px;transition:background .1s ease}.editor-edge-slot:hover{background:#ffffff1a}.editor-actions{display:flex;flex-wrap:wrap;gap:4px;width:100%}.editor-btn{flex:1;min-width:55px;padding:6px 4px;border:2px solid var(--border-color);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);font-size:.7rem;font-weight:600;cursor:pointer;text-align:center;transition:all .1s ease}.editor-btn:active{transform:scale(.95)}.editor-btn.primary{border-color:var(--btn-primary);background:var(--btn-primary);color:var(--btn-primary-text)}.editor-btn.danger{border-color:var(--dest-color);color:var(--dest-color)}.editor-dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.editor-dialog{background:var(--bg-primary);border:2px solid var(--border-color);border-radius:12px;padding:24px;min-width:240px;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:16px}.editor-dialog.success{border-color:var(--source-color)}.editor-dialog.error{border-color:var(--dest-color)}.editor-dialog-message{font-size:1rem;font-weight:600;text-align:center;margin:0;color:var(--text-primary)}.editor-dialog.success .editor-dialog-message{color:var(--source-color)}.editor-dialog.error .editor-dialog-message{color:var(--dest-color)}:root{--bg-primary: #1a1a2e;--bg-secondary: #16213e;--bg-cell: #2c3e50;--text-primary: #ecf0f1;--text-secondary: #bdc3c7;--border-color: #34495e;--enabled-color: #3498db;--gray-2: #34495e;--gray-7: #2c3e50;--overlay-bg: rgba(0, 0, 0, .6);--dialog-bg: #16213e;--btn-primary: #3498db;--btn-primary-text: #ffffff;--btn-secondary: #2c3e50;--btn-secondary-text: #ecf0f1;--pipe-empty: #5a6a7a;--pipe-highlight-empty: #6a7a8a;--pipe-border: #3a4a5a;--water-color: #3498db;--water-highlight: #5dade2;--source-color: #2ecc71;--dest-color: #e74c3c;--cell-bg: #1e2d3d;--board-bg: #0d1b2a;--edge-indicator-size: 24px}body.light{--bg-primary: #f0f2f5;--bg-secondary: #e4e7eb;--bg-cell: #d1d5db;--text-primary: #1f2937;--text-secondary: #6b7280;--border-color: #c0c4ca;--gray-2: #d1d5db;--gray-7: #f9fafb;--dialog-bg: #ffffff;--btn-secondary: #e5e7eb;--btn-secondary-text: #1f2937;--pipe-empty: #9ca3af;--pipe-highlight-empty: #b0b8c4;--pipe-border: #7a8290;--water-color: #2563eb;--water-highlight: #60a5fa;--cell-bg: #e5e7eb;--board-bg: #cbd5e1}body.retro{--bg-primary: #0a1a0a;--bg-secondary: #0f2a0f;--bg-cell: #1a3a1a;--text-primary: #00ff41;--text-secondary: #00cc33;--border-color: #1a4a1a;--enabled-color: #00ff41;--gray-2: #1a3a1a;--gray-7: #0a1a0a;--dialog-bg: #0f2a0f;--btn-primary: #00ff41;--btn-primary-text: #0a1a0a;--btn-secondary: #1a3a1a;--btn-secondary-text: #00ff41;--pipe-empty: #1a4a1a;--pipe-highlight-empty: #2a5a2a;--pipe-border: #0a3a0a;--water-color: #00ff41;--water-highlight: #66ff88;--source-color: #00ff41;--dest-color: #ff4141;--cell-bg: #0f2a0f;--board-bg: #051005}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body.retro{font-family:Courier New,Courier,monospace}.game-wrapper{display:flex;flex-direction:column;align-items:center;height:100%;width:100%;max-width:540px;margin:0 auto;padding:0 16px}#app{display:flex;flex-direction:column;align-items:center;width:100%;flex:1}